├── .gitattributes ├── src ├── index.ts └── svelte-sortable-flat-list-view.svelte ├── dist ├── svelte-sortable-flat-list-view.d.ts ├── svelte-sortable-flat-list-view.svelte └── svelte-sortable-flat-list-view.bundled.js ├── LICENSE.md ├── rollup-bundling.config.js ├── .gitignore ├── rollup.config.js ├── package.json ├── example_ListView_on_web_page.html ├── tsconfig.json └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export {default as default} from "./svelte-sortable-flat-list-view.svelte" -------------------------------------------------------------------------------- /dist/svelte-sortable-flat-list-view.d.ts: -------------------------------------------------------------------------------- 1 | export { default as default } from "./svelte-sortable-flat-list-view.svelte"; 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021-present Andreas Rozek 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /rollup-bundling.config.js: -------------------------------------------------------------------------------- 1 | // see https://github.com/rozek/build-configuration-study 2 | 3 | import svelte from 'rollup-plugin-svelte' 4 | import commonjs from '@rollup/plugin-commonjs' 5 | import resolve from '@rollup/plugin-node-resolve' 6 | import autoPreprocess from 'svelte-preprocess' 7 | import typescript from '@rollup/plugin-typescript' 8 | import postcss from 'rollup-plugin-postcss' 9 | import { terser } from 'rollup-plugin-terser' 10 | 11 | export default { 12 | input: './src/index.ts', 13 | output: { 14 | file: './dist/svelte-sortable-flat-list-view.bundled.js', 15 | format: 'umd', // builds for both Node.js and Browser 16 | name: 'sortableFlatListView', // required for UMD modules 17 | noConflict:true, 18 | sourcemap: true, 19 | exports: 'default', 20 | }, 21 | plugins: [ 22 | svelte({ preprocess:[ 23 | autoPreprocess({ aliases:[['ts','typescript']] }), 24 | ]}), 25 | resolve({ browser:true, dedupe:['svelte'] }), commonjs(), typescript(), 26 | postcss({ extract:false, inject:{insertAt:'top'} }), 27 | terser({ format:{ comments:false, safari10:true } }) 28 | ], 29 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # parcel-bundler cache (https://parceljs.org/) 61 | .cache 62 | 63 | # next.js build output 64 | .next 65 | 66 | # nuxt.js build output 67 | .nuxt 68 | 69 | # vuepress build output 70 | .vuepress/dist 71 | 72 | # Serverless directories 73 | .serverless 74 | 75 | # FuseBox cache 76 | .fusebox/ 77 | 78 | .DS_Store 79 | package-lock.json 80 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | // see https://github.com/rozek/build-configuration-study 2 | 3 | import svelte from 'rollup-plugin-svelte' 4 | import commonjs from '@rollup/plugin-commonjs' 5 | import resolve from '@rollup/plugin-node-resolve' 6 | import autoPreprocess from 'svelte-preprocess' 7 | import typescript from '@rollup/plugin-typescript' 8 | import postcss from 'rollup-plugin-postcss' 9 | import saveToFile from 'save-to-file' 10 | 11 | export default { 12 | input: './src/index.ts', 13 | external: [ 14 | 'javascript-interface-library', 'locally-unique-id-generator', 15 | 'svelte-device-info', 'svelte-coordinate-conversion', 16 | 'svelte-drag-and-drop-actions' 17 | ], 18 | output: [ 19 | { 20 | file: './dist/svelte-sortable-flat-list-view.js', 21 | format: 'umd', // builds for both Node.js and Browser 22 | name: 'sortableFlatListView', // required for UMD modules 23 | globals: { 24 | 'javascript-interface-library':'JIL', 25 | 'locally-unique-id-generator': 'newUniqueId', 26 | 'svelte-device-info': 'Device', 27 | 'svelte-coordinate-conversion':'Conversion', 28 | 'svelte-drag-and-drop-actions':'DragAndDropActions' 29 | }, 30 | noConflict:true, 31 | sourcemap: true, 32 | exports: 'default', 33 | },{ 34 | file: './dist/svelte-sortable-flat-list-view.esm.js', 35 | format: 'esm', 36 | sourcemap:true, 37 | } 38 | ], 39 | plugins: [ 40 | svelte({ preprocess:[ 41 | autoPreprocess({ aliases:[['ts','typescript']] }), 42 | saveToFile('./dist/svelte-sortable-flat-list-view.svelte') 43 | ]}), 44 | resolve({ browser:true, dedupe:['svelte'] }), commonjs(), typescript(), 45 | postcss({ extract:false, inject:{insertAt:'top'} }), 46 | ], 47 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-sortable-flat-list-view", 3 | "version": "1.0.0", 4 | "description": "a sortable view for flat lists", 5 | "type": "module", 6 | "browser": "./dist/svelte-sortable-flat-list-view.js", 7 | "module": "./dist/svelte-sortable-flat-list-view.esm.js", 8 | "svelte": "./dist/svelte-sortable-flat-list-view.svelte", 9 | "types": "./dist/svelte-sortable-flat-list-view.d.ts", 10 | "exports": { 11 | ".": { 12 | "require": "./dist/svelte-sortable-flat-list-view.js", 13 | "import": "./dist/svelte-sortable-flat-list-view.esm.js" 14 | }, 15 | "./package.json": "./package.json" 16 | }, 17 | "scripts": { 18 | "build": "rimraf dist && rollup -c rollup.config.js && rollup -c rollup-bundling.config.js && tsc && mv src/*.d.ts dist/svelte-sortable-flat-list-view.d.ts && rm src/*.js*", 19 | "agadoo": "agadoo", 20 | "test": "echo \"Error: no test specified\" && exit 1" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/rozek/svelte-sortable-flat-list-view.git" 25 | }, 26 | "keywords": [ 27 | "svelte", 28 | "svelte3", 29 | "svelte-v3", 30 | "sortable", 31 | "list-view" 32 | ], 33 | "author": "Andreas Rozek (https://www.rozek.de/)", 34 | "license": "MIT", 35 | "bugs": { 36 | "url": "https://github.com/rozek/svelte-sortable-flat-list-view/issues" 37 | }, 38 | "homepage": "https://github.com/rozek/svelte-sortable-flat-list-view#readme", 39 | "dependencies": { 40 | "javascript-interface-library": "^0.1.14", 41 | "locally-unique-id-generator": "^0.1.3", 42 | "svelte-coordinate-conversion": "^0.1.9", 43 | "svelte-device-info": "^0.1.14", 44 | "svelte-drag-and-drop-actions": "^0.1.35" 45 | }, 46 | "devDependencies": { 47 | "@rollup/plugin-commonjs": "^19.0.0", 48 | "@rollup/plugin-node-resolve": "^13.0.0", 49 | "@rollup/plugin-typescript": "^8.2.1", 50 | "@tsconfig/svelte": "^2.0.1", 51 | "agadoo": "^2.0.0", 52 | "rimraf": "^3.0.2", 53 | "rollup": "^2.52.7", 54 | "rollup-plugin-postcss": "^4.0.0", 55 | "rollup-plugin-svelte": "^7.1.0", 56 | "rollup-plugin-terser": "^7.0.2", 57 | "save-to-file": "^0.1.1", 58 | "svelte": "^3.38.3", 59 | "svelte-preprocess": "^4.7.3", 60 | "typescript": "^4.3.5" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /example_ListView_on_web_page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 22 | 23 | 32 | 33 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 70 | 71 | 72 | 73 |

74 | This example demonstrates multiple list item selection (with a limit of 3 75 | selected items): you may select individual items or (by pressing the Shift 76 | key while clicking or tapping) complete ranges of items. Selection behaviour 77 | differs depending on whether a mouse or a touch screen are used for input 78 |

79 | 80 |
81 | 82 | 83 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | 4 | "include": ["src/**/*.ts", "src/node_modules"], 5 | "exclude": ["node_modules/*", "__sapper__/*", "public/*"], 6 | "compilerOptions": { 7 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 8 | 9 | /* Basic Options */ 10 | // "incremental": true, /* Enable incremental compilation */ 11 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */ 12 | "module": "ESNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ 13 | // "lib": [], /* Specify library files to be included in the compilation. */ 14 | // "allowJs": true, /* Allow javascript files to be compiled. */ 15 | // "checkJs": true, /* Report errors in .js files. */ 16 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ 17 | "declaration": true, /* Generates corresponding '.d.ts' file. */ 18 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 19 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 20 | // "outFile": "./", /* Concatenate and emit output to single file. */ 21 | "outDir": "./", /* Redirect output structure to the directory. */ 22 | "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 23 | // "composite": true, /* Enable project compilation */ 24 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 25 | // "removeComments": true, /* Do not emit comments to output. */ 26 | // "noEmit": true, /* Do not emit outputs. */ 27 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 28 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 29 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 30 | 31 | /* Strict Type-Checking Options */ 32 | "strict": true, /* Enable all strict type-checking options. */ 33 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 34 | // "strictNullChecks": true, /* Enable strict null checks. */ 35 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 36 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 37 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 38 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 39 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 40 | 41 | /* Additional Checks */ 42 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 43 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 44 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 45 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 46 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 47 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an 'override' modifier. */ 48 | // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ 49 | 50 | /* Module Resolution Options */ 51 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 52 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 53 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 54 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 55 | // "typeRoots": [], /* List of folders to include type definitions from. */ 56 | "types": ["svelte"], /* Type declaration files to be included in compilation. */ 57 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 58 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 59 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 60 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 61 | 62 | /* Source Map Options */ 63 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 64 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 65 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 66 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 67 | 68 | /* Experimental Options */ 69 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 70 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 71 | 72 | /* Advanced Options */ 73 | "skipLibCheck": true, /* Skip type checking of declaration files. */ 74 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-sortable-flat-list-view # 2 | 3 | a sortable view for flat lists which also supports dragging items into and out of a list 4 | 5 | It is based on [svelte-drag-and-drop-actions](https://github.com/rozek/svelte-drag-and-drop-actions) and, consequently, on HTML5 native Drag-and-Drop. 6 | 7 | **some of its Features:** 8 | 9 | All [examples](#examples) are live and may be changed on the fly! 10 | 11 | * works on mobile devices (when combined with [svelte-drag-drop-touch](https://github.com/rozek/svelte-drag-drop-touch)) 12 | * provides a configurable placeholder for empty lists (see [example](https://svelte.dev/repl/bf8eeeffc1be47be976eeb7ceb58a140)) 13 | * can render list elements itself or use a given template (see [example](https://svelte.dev/repl/d0314246026c48c685ed97542b56e518)) 14 | * can be styled using a given set of selectors (see [example](https://svelte.dev/repl/806db6bfe11b485aa4b9268492e32088)) 15 | * supports single and multiple selection (with a configurable limit of selectable elements, see [example](https://svelte.dev/repl/d12c72cd0bc84d01b716ab9394965115)) 16 | * supports sorting elements from a given handle only (rather than from the whole element itself, see [example](https://svelte.dev/repl/4adf5f8c28a549edae25eeb94edd281f)) 17 | * recognizes when a draggable stands still (i.e., is "held") over a sortable list view for a given time (see [example](https://svelte.dev/repl/b179ed1e9f584bd687f2588da2129f12)) 18 | * supports horizontal lists (see [example](https://svelte.dev/repl/a960543f3f88431ab30592fea997ac91)) and - up to a certain extent - even two-dimensonal ones (see [example](https://svelte.dev/repl/e9d4a2312d1e436ba27a6914d590acec)) 19 | * does the sorting itself or gives you full control over it (see [example](https://svelte.dev/repl/82d3d414e81d4680b3210c08f23a16fa)) 20 | * supports dragging of external elements into a list (see [example](https://svelte.dev/repl/ee96b00b21914807ba72eefaa5b618e1)) 21 | * supports dragging of list elements onto external drop zones (see [example](https://svelte.dev/repl/3290cdf6cd61453f9b5a4c867c38ae7a)) 22 | * supports dragging of list elements between lists (see [example](https://svelte.dev/repl/26e9bb4cebd0431e931d66c521061bfb)) 23 | * provides lots of live(!) [examples](#examples) for many use cases 24 | * however, unfortunately, `svelte-sortable-flat-list-view` may also suffer from any bugs in the browser implementations of native HTML drag-and-drop (thinking of Safari 13.0/13.1, f.e.) if they can not be compensated by the author 25 | 26 | **NPM users**: please consider the [Github README](https://github.com/rozek/svelte-sortable-flat-list-view/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version) 27 | 28 | **Mobile Developers**: since many mobile platforms lack support for native HTML5 drag-and-drop, you should consider importing [svelte-drag-drop-touch](https://github.com/rozek/svelte-drag-drop-touch) as a polyfill (a simple import of that package will suffice - there is no extra programming needed) 29 | 30 | > Just a small note: if you like this module and plan to use it, consider "starring" this repository (you will find the "Star" button on the top right of this page), so that I know which of my repositories to take most care of. 31 | 32 | ## Installation ## 33 | 34 | ``` 35 | npm install svelte-sortable-flat-list-view 36 | ``` 37 | 38 | ## Usage ## 39 | 40 | `svelte-sortable-flat-list-view` should be imported in a module context (perhaps together with `svelte-drag-drop-touch`) and may then be used in your markup: 41 | 42 | ```html 43 | 47 | 48 | 51 | 52 | 53 | ``` 54 | 55 | More detailled [examples](#examples) for a variety of use cases can be found below. 56 | 57 | In addition, this repo also contains a file `example_ListView_on_web_page.html` which demonstrates how to use a ListView on a web page (i.e., outside of Svelte) 58 | 59 | ## API ## 60 | 61 | `svelte-sortable-flat-list-view` emits some Svelte events and exports some types (for TypeScript users) and properties (for anybody), as shown below. 62 | 63 | ### exported Types ### 64 | 65 | TypeScript programmers may import the following types in order to benefit from static type checking (JavaScript programmers may simply skip this section): 66 | 67 | * **`type ListDroppableExtras = { List:any[], Item:any, ItemList:any[] }`**
`ListDroppableExtras` defines the shape of `DroppableExtras` (as defined by [svelte-drag-and-drop-actions](https://github.com/rozek/svelte-drag-and-drop-actions)) when a `Droppable` which is dragged over a list item that may serve as a `DropZone` comes from this (or another) `svelte-sortable-flat-list-view` instance 68 | * **`type ListDropZoneExtras = { List:any[], Item:any }`**
`ListDropZoneExtras` defines the shape of `DropZoneExtras` (as defined by [svelte-drag-and-drop-actions](https://github.com/rozek/svelte-drag-and-drop-actions)) when a `Droppable` is dragged over this drop zone 69 | 70 | ### exported Svelte Props ### 71 | 72 | `svelte-sortable-flat-list-view` exports the following Svelte "props" (shown with TypeScript type annotations - JavaScript users may simply ignore them): 73 | 74 | * **`class?:string`**
list views come with a default styling. However, if you set the (optional) `class` attribute (to a CSS class name), the list view assumes that you will take over any styling and remove its defaults (see below for more details) 75 | * **`style?:string`**
use the (optional) `style` attribute to set important CSS properties for the list view itself (not its item views). "Important" CSS properties could, f.e., control position and size of a list view and set basic visual parameters such as background, borders or text size and color
 
76 | * **`List:{}[]`**
the mandatory `List` attribute accepts the actual list to be shown. It should be a JavaScript array with arbitrary objects as elements. Note: **lists of JavaScript primitives will be rejected!** 77 | * **`Key?:string|Function`**
the optional `Key` attribute specifies which string to be used as the (unique) "key" of a list item - such "keys" are required by Svelte for proper rendering of lists. `Key` may either be set to the (fixed) name of a list item property containing the key or to a function which receives a list item and that item's current index in the list and returns that item's key (which must be a string). If omitted, the list item itself is used as its key (after conversion into a string). List item keys must be unique within the whole list - or Svelte will throw an error 78 | * **`SelectionLimit?:number`**
by default, any number of list items may be selected simultaneously. By setting the (optional) `SelectionLimit` attribute to an ordinal number, you may set an upper limit for selections 79 | * **`SelectionList:{}[]`**
the optional `SelectionList` attribute specifies which elements of `List` are to be selected in the list view. It must contain elements of `List` only and should not contain more than `SelectionLimit` elements (otherwise only the first `SelectionLimit` elements will be considered and all others removed). If `SelectionList` is bound to a variable, that variable also reflects any selection changes made within the list view 80 | * **`AttachmentRegion?:string`**
in order to allow for appending list elements while dragging, a specific "attachment region" is rendered at the end of any list. Set the (optional) `AttachmentRegion` attribute to the HTML you want to be shown in that region - by default, attachment regions are just empty 81 | * **`Placeholder?:string`**
empty lists show a "placeholder" instead of just an empty space. Set the (optional) `Placeholder` attribute to the HTML you want to be shown in that placeholder - by default, the text "(empty list)" is shown 82 | * **`withTransitions:boolean`**
by default, the appearance and disappearance of individual list items is shown using a short animation. If you prefer immediate display updates, just set the (optional) `withTransitions` atttribute to `false` 83 | * **`sortable?:boolean`**
set the (optional) `sortable` attribute to `true` if you want the list view to support sorting - or `false` otherwise. By default, sorting is *not* supported (such list views just support selections)
 
84 | * **`onlyFrom?:string`**
`onlyFrom` is an optional, comma-separated list of CSS selectors identifying the inner elements of a list item view, from which a drag operation must be started in order to be allowed. If `onlyFrom` is missing, no `onlyFrom` restriction is applied 85 | * **`neverFrom?:string`**
`neverFrom` is an optional, comma-separated list of CSS selectors identifying the inner elements of a list item view, from which a drag operation must *never* be started in order to be allowed. If `neverFrom` is missing, no `neverFrom` restriction is applied 86 | * **`onSortRequest?:(x:number,y:number, DroppableExtras:ListDroppableExtras, DropZoneExtras:ListDropZoneExtras) => boolean`**
`onSortRequest` is an optional callback which (when invoked during sorting) indicates whether the currently dragged list items may be inserted immediately before the currently hovered list element or not. `x` and `y` contain the current mouse pointer (or finger) position within the hovered list item, `DroppableExtras` are the configured "extras" for the currently dragged list item and `DropZoneExtras` those for the currently hovered one. If `onSortRequest` is missing, insertion is allowed everywhere in the list 87 | * **`onSort?:(beforeItem:any|undefined, ItemList:{}[]) => void`**
`onSort` is an optional callback which (when invoked during sorting) performs the actual reordering of list items - it can be used to update the state of the surrounding Svelte application if the default behaviour (which simply updates the given list and emits an event) does not suffice. The callback receives the sequence `ItemList` of list items to be moved (given in their original order) and the list item `beforeItem` before which the dragged list items should be inserted - if `beforeItem` is `undefined`, the dragged items should just be appended to the list
 
88 | * **`Operations?:string`**
`Operations` is either a blank-separated list of drop operations (`'copy'`, `'move'` or `'link'`), the keyword `all` (which includes all three available operations) or the keyword `none` (which effectively suppresses dropping) and specifies which kind of data transfer list items support when dropped outside of their list - by default, no such drop is allowed 89 | * **`DataToOffer?:DataOfferSet`**
`DataToOffer` is a plain JavaScript object whose keys represent the various data formats a droppable list item supports and whose corresponding values contain the transferrable data in that format. Often, the given keys denote MIME formats (which simplifies data transfer between different applications) or contain the special value "DownloadURL", but - in principle - any string (except `none`) may be used 90 | * **`TypesToAccept?:TypeAcceptanceSet`**
`TypesToAccept` is a plain JavaScript object whose keys represent the various data formats a list item serving as drop zone may accept and whose corresponding values contain a blank-separated, perhaps empty, list of supported drop operations for that format. Often, the given keys denote MIME formats (which simplifies data transfer between different applications) or contain the special value "DownloadURL", but - in principle - any string (except `none`) may be used. Note: since native HTML5 drag-and-drop implementations often fail reporting a correct "dropEffect", the given drop operations can not be properly checked - with the exception, that types with empty operation lists will never be accepted 91 | * **`onDroppedOutside?:(x:number,y:number, Operation:DropOperation, TypeTransferred:string|undefined, DataTransferred:any|undefined, DropZoneExtras:any, DroppableExtras:ListDroppableExtras) => void`**
`onDroppedOutside` is an optional callback which is invoked when one or multiple items of this list were dropped somewhere outside this list. It may be used for any housekeeping required - or even for performing the actual data transfer in case that the foreign drop zone is not able to do so. `x` and `y` contain the mouse pointer (or finger) position within the foreign drop zone when the list item(s) were dropped, `Operation` contains the accepted data transfer operation (i.e., `'copy'`, `'move'` or `'link'`), `TypeTransferred` the accepted type and `DataTransferred` the actually accepted data, `DropZoneExtras` are the configured "extras" for the foreign drop zone and `DroppableExtras` those for the actually dragged list item. `TypeTransferred` and `DataTransferred` may both be `undefined` in order to indicate that there values are unknown. If `onDroppedOutside` is missing, it simply does not get called and the actual drop zone has to perform the data transfer itself 92 | * **`onOuterDropRequest?:(x:number,y:number, Operation:DropOperation, offeredTypeList:string[], DroppableExtras:any, DropZoneExtras:ListDropZoneExtras) => boolean`**
`onDroppedOutside` is an optional callback which is invoked when a draggable object that is not already an item of this list is dragged over an item of this list. It should return `true` if dropping is allowed or `false` otherwise. `x` and `y` contain the current mouse pointer (or finger) position within the list item that should serve as a drop zone, `Operation` the requested data transfer operation (i.e., `'copy'`, `'move'` or `'link'`) and `offeredTypeList` a list of types the dragged object offers. `DroppableExtras` are the configured "extras" for the currently dragged (foreign) object and `DropZoneExtras` those for the currently hovered list item. If `onOuterDropRequest` is missing the permission to drop or not to drop is determined by comparing the requested data transfer types and operations with those configured for this list 93 | * **`onDropFromOutside?:(x:number,y:number, Operation:DropOperation, DataOffered:DataOfferSet, DroppableExtras:any, DropZoneExtras:ListDropZoneExtras) => string | undefined`**
`onDropFromOutside` is an optional callback which is invoked after a draggable object that is not already an item of this list was dropped onto an item of this list. It should either return the actually accepted data type (i.e., one of the keys from `DataOffered`) or `none` if the drop is not acceptable. If `undefined` is returned instead, the drop operation is considered accepted, but the accepted data type remains unknwon. `x` and `y` contain the current mouse pointer (or finger) position within the list item that served as a drop zone, `Operation` the requested data transfer operation (i.e., `'copy'`, `'move'` or `'link'`) and `DataOffered` a JavaScript object, whose keys represent the various data formats offered and whose corresponding values contain the offered data in that format. `DroppableExtras` are the configured "extras" for the currently dragged (foreign) object and `DropZoneExtras` those for the list item acting as drop zone. If `onDropFromOutside` is missing, the list view only accepts items that match the configured data transfer types and operations for this list and look like items of another `svelte-sortable-flat-list-view`
 
94 | * **`HoldDelay?:number`**
when a droppable has entered a list item view serving as a drop zone and remains there for at least `HoldDelay` milliseconds without much movement, the `onDroppableHold` callback is invoked (if it exists). The property is optional: when missing, `onDroppableHold` will never be called 95 | * **`onDroppableHold?: (x:number,y:number, DroppableExtras:any, DropZoneExtras:ListDropZoneExtras) => void`**
`onDroppableHold` is an optional callback which (when invoked) indicates that a droppable whose data is at least partially acceptable, stood still for at least `HoldDelay` milliseconds within the bounds of a list item view. `x` and `y` contain the current coordinates of the mouse or finger relative to the list item view, `DroppableExtras` are any `Extras` configured for the held droppable and `DropZoneExtras` any `Extras` configured for the list item view that acts as a drop zone. **Warning**: be careful with what to do within that callback - if you disturb the flow of events (e.g., by invoking `window.alert`), the visual feedback for the list view may get mixed up!
 
96 | * **`PanSensorWidth?:number`**
`svelte-sortable-flat-list-view` supports automatic scrolling (aka "panning") of only partially visible lists while dragging. `PanSensorWidth` is an optional ordinal number (defaulting to `20`) which specifies the width (in pixels) of the horizontal pan sensor area: panning starts as soon as the mouse pointer (or finger) gets closer than the given number of pixels to the left or right border of the list view. If set to `0`, no horizontal panning will be performed 97 | * **`PanSensorHeight?:number`**
`svelte-sortable-flat-list-view` supports automatic scrolling (aka "panning") of only partially visible lists while dragging. `PanSensorHeight` is an optional ordinal number (defaulting to `20`) which specifies the height (in pixels) of the vertical pan sensor area: panning starts as soon as the mouse pointer (or finger) gets closer than the given number of pixels to the upper or lower border of the list view. If set to `0`, no vertical panning will be performed 98 | * **`PanSpeed?:number`**
`svelte-sortable-flat-list-view` supports automatic scrolling (aka "panning") of only partially visible lists while dragging. `PanSpeed` is an optional ordinal number (defaulting to `10`) which specifies the "speed" of panning - values in the range of 10...20 are reasonable choices, but it is always a good idea to make this parameter configurable for the users of your application. If set to `0`, no panning will be performed 99 | 100 | ### emitted Svelte Events ### 101 | 102 | * **`'selected-item'`** (`const Item:any = Event.detail`)
`selected-item` is emitted whenever a list item becomes selected, `Event.detail` refers to the newly selected item 103 | * **`'deselected-item'`** (`const Item:any = Event.detail`)
`deselected-item` is emitted whenever a list item becomes deselected, `Event.detail` refers to the no longer selected item 104 | * **`'sorted-items'`** (`const [sortedItems:any[],InsertionIndex:number] = Event.detail`)
`sorted-items` is emitted after one or multiple list items have been moved to new positions within their list using the default approach implemented by `svelte-sortable-flat-list-view` itself (i.e., not by a given `onSort` callback). `Event.detail` contains a list with two elements: the first one being the list of repositioned items and the second one being the new index of the first repositioned item (all items are placed one after the other) 105 | * **`'inserted-items'`** (`const [ItemsToBeInserted:any[],InsertionIndex:number] = Event.detail`)
`inserted-items` is emitted after one or multiple items of another list have been moved into this one using the default approach implemented by `svelte-sortable-flat-list-view` itself (i.e., not by a given `onDropFromOutside` callback). `Event.detail` contains a list with two elements: the first one being the list of inserted (i.e., new) items and the second one being the index of the first inserted item (all items are placed one after the other) 106 | * **`'removed-items'`** (`const ItemList:any[] = Event.detail`)
`removed-items` is emitted after one or multiple items of this list have been dropped onto another drop zone using the default approach implemented by `svelte-sortable-flat-list-view` itself (i.e., not by a given `onDroppedOutside` callback). `Event.detail` contains a list of all removed list items 107 | 108 | ## CSS Classes ## 109 | 110 | Without explicitly specifying a CSS class for a list view, standard styling is applied. Otherwise, the following selectors may be used to define custom list view styling (assuming that you instantiate your list view with a class attribute containing `ListView`, like so: ``): 111 | 112 | * **`ListView`**
use this selector to style the list view itself (i.e., not the individual items). In combination with the `ListView > .ListItemView` selector, this also allows for horizontal or even two-dimensional list views 113 | * **`ListView > .ListItemView`**
use this selector to style any list item view. In combination with the `ListView` selector itself, this also allows for horizontal or even two-dimensional list views 114 | * **`ListView > .ListItemView > *`**
use this selector to style the actual contents of a list item view 115 | * **`ListView:not(.transitioning) > .ListItemView:hover:not(.dragged)`**
you may want some visual feedback whenever a mouse pointer hovers over a list item. If so, use this selector to provide it (`transitioning` is a class added to all list item view elements which are going to appear or disappear - and, usually, you don't want to apply the styling of hovered elements to those) 116 | * **`ListView:not(.transitioning) > .ListItemView.selected:not(.dragged)`**
if list items are selected, there should be some visual feedback. Use this selector to provide it (`transitioning` is a class added to all list item view elements which are going to appear or disappear - and, usually, you don't want to apply the styling of selected elements to those) 117 | * **`ListView > .ListItemView.dragged`**
if list items are dragged, there should be some visual feedback. Use this selector to provide it 118 | * **`ListView > .ListItemView.hovered:not(.dragged)`**
if list items are dragged over other list items which may serve a drop zones, those items should visually indicate that a drop would be allowed. Use this selector to do so 119 | * **`ListView > .AttachmentRegion`**
in order to allow for appending list elements while dragging, a specific "attachment region" is rendered at the end of any list. Use this selector to style it 120 | * **`ListView > .AttachmentRegion.hovered`**
normally, the "attachment region" does not stand out. Use this selector to change that while a list item is dragged over it 121 | * **`ListView > .Placeholder`**
empty lists show a "placeholder" instead of just an empty space. Use this selector to style it 122 | 123 | **Important**: whenever you change the style of a list item during dragging, you should take great care that HTML5 drag-and-drop still recognizes the styled list item as a draggable or drop zone. More precisely: you should avoid to move drop zones away from the mouse pointer (or finger, resp.), hide draggables or drop zones completely (e.g., with `display:none`) or change their sensitivity to mouse and touch events (with `pointer-events:none`) 124 | 125 | There is an example ([ListView with custom CSS classes](https://svelte.dev/repl/806db6bfe11b485aa4b9268492e32088)) which specifically demonstrates how to style a list view using the abovementioned selectors. 126 | 127 | ## Examples ## 128 | 129 | A few examples may help understanding how `svelte-sortable-flat-list-view` may be used. 130 | 131 | ### Visual Appearance ### 132 | 133 | * [empty List](https://svelte.dev/repl/bf8eeeffc1be47be976eeb7ceb58a140) - empty lists display a placeholder rather than just an empty area 134 | * [non-empty List](https://svelte.dev/repl/1b78167b5b374deab38a414767351a89) - in the simplest case, a list view shows list item "keys", line by line 135 | * [ListView with given Template](https://svelte.dev/repl/d0314246026c48c685ed97542b56e518) - if given, a "template" is used to render individual list items 136 | * [ListView with custom CSS classes](https://svelte.dev/repl/806db6bfe11b485aa4b9268492e32088) - sometimes, it is sufficient to provide custom CSS classes for rendering 137 | 138 | ### Selection ### 139 | 140 | * [single selection](https://svelte.dev/repl/d881dba9a6b54286aa4159366adde9a5) - this example shows a ListView which supports the selection of single items only 141 | * [multiple selection](https://svelte.dev/repl/d12c72cd0bc84d01b716ab9394965115) - multiple selections (with optionally predefined limits) are supported as well 142 | 143 | ### Sorting ### 144 | 145 | * [sorting with single selection](https://svelte.dev/repl/7de55ceb5ae841499d8752addf33fbce) - in the simplest case, individual list items may be rearranged with mouse or finger 146 | * [sorting with multiple selections](https://svelte.dev/repl/6ae6b28514c742f6a911c7b72188570c) - rearranging multiple list items at once is supported as well 147 | * [sorting with handles](https://svelte.dev/repl/4adf5f8c28a549edae25eeb94edd281f) - on mobile platforms, it is preferred to drag list items from handles only 148 | * [holding a dragged list item](https://svelte.dev/repl/b179ed1e9f584bd687f2588da2129f12) - demonstrates what happens if a Droppable is held over a list item for a long time 149 | * [sorting a horizontal list](https://svelte.dev/repl/a960543f3f88431ab30592fea997ac91) - with proper CSS Styling, a sortable list view may also arrange its items horizontally 150 | * [sorting a two-dimensional list](https://svelte.dev/repl/e9d4a2312d1e436ba27a6914d590acec) - with proper CSS Styling, even 2-dimensional lists may become sortable 151 | * [sorting with callbacks](https://svelte.dev/repl/82d3d414e81d4680b3210c08f23a16fa) - optional callbacks give full control over sorting "semantics" 152 | 153 | ### Dragging beyond List Bounds ### 154 | 155 | * [dragging items from a source into a list](https://svelte.dev/repl/ee96b00b21914807ba72eefaa5b618e1) - add new list items by dragging them onto the list view 156 | * [dragging list items into a trashcan](https://svelte.dev/repl/3290cdf6cd61453f9b5a4c867c38ae7a) - delete list items by dragging them into a trashcan 157 | * [dragging items between lists](https://svelte.dev/repl/26e9bb4cebd0431e931d66c521061bfb) - of course, you may also drag items from one list into another 158 | 159 | ## Build Instructions ## 160 | 161 | You may easily build this package yourself. 162 | 163 | Just install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps: 164 | 165 | 1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/svelte-sortable-flat-list-view/archive/refs/heads/main.zip) with its contents to your disk and unpack it there 166 | 2. open a shell and navigate to the root directory of this repository 167 | 3. run `npm install` in order to install the complete build environment 168 | 4. execute `npm run build` to create a new build 169 | 170 | See the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment. 171 | 172 | ## License ## 173 | 174 | [MIT License](LICENSE.md) 175 | -------------------------------------------------------------------------------- /dist/svelte-sortable-flat-list-view.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 |
    14 | {#if (List.length > 0)} 15 | {#if sortable || extendable || shrinkable} 16 | {#each List as Item,Index (KeyOf(Item,Index))} 17 |
  • = 0} 20 | class:selected={isSelected(Item)} 21 | on:click={(Event) => handleClick(Event,Item)} 22 | use:asDroppable={{ 23 | onlyFrom, neverFrom, Dummy:dynamicDummy, 24 | Extras:{ List, Item }, DataToOffer:DataOffered, 25 | onDragStart, onDragEnd, onDropped 26 | }} 27 | use:asDropZone={{ 28 | Extras:{ List, Item }, TypesToAccept:TypesAccepted, 29 | onDrop, onDroppableEnter, onDroppableMove, onDroppableLeave, 30 | HoldDelay, onDroppableHold, 31 | Pannable:ListViewElement, PanSensorWidth,PanSensorHeight, PanSpeed 32 | }} 33 | animate:flip 34 | transition:scale={{ duration:withTransitions ? 300 : 0 }} 35 | on:introstart={TransitionStarted} on:introend={TransitionEnded} 36 | on:outrostart={TransitionStarted} on:outroend={TransitionEnded} 37 | > 38 | {KeyOf(Item,Index)} 39 |
    • 40 | {/each} 41 | 42 | {#if sortable || extendable} 43 |
  • {@html AttachmentRegion || ''}
    • 51 | {/if} 52 | {:else} 53 | {#each List as Item,Index (KeyOf(Item,Index))} 54 |
  • handleClick(Event,Item)} 58 | transition:scale={{ duration:withTransitions ? 300 : 0 }} 59 | on:introstart={TransitionStarted} on:introend={TransitionEnded} 60 | on:outrostart={TransitionStarted} on:outroend={TransitionEnded} 61 | > 62 | {KeyOf(Item,Index)} 63 |
    • 64 | {/each} 65 | {/if} 66 | {:else} 67 | {#if extendable} 68 |
  • {@html Placeholder || '(empty list)'}
    • 75 | {:else} 76 |
  • {@html Placeholder || '(empty list)'}
    • 77 | {/if} 78 | {/if} 79 |
80 | 81 | 82 | 90 | 759 | 804 | -------------------------------------------------------------------------------- /src/svelte-sortable-flat-list-view.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 52 | 53 | 68 | 69 | 925 | 926 |
    933 | {#if (List.length > 0)} 934 | {#if sortable || extendable || shrinkable} 935 | {#each List as Item,Index (KeyOf(Item,Index))} 936 |
  • = 0} 939 | class:selected={isSelected(Item)} 940 | on:click={(Event) => handleClick(Event,Item)} 941 | use:asDroppable={{ 942 | onlyFrom, neverFrom, Dummy:dynamicDummy, 943 | Extras:{ List, Item }, DataToOffer:DataOffered, 944 | onDragStart, onDragEnd, onDropped 945 | }} 946 | use:asDropZone={{ 947 | Extras:{ List, Item }, TypesToAccept:TypesAccepted, 948 | onDrop, onDroppableEnter, onDroppableMove, onDroppableLeave, 949 | HoldDelay, onDroppableHold, 950 | Pannable:ListViewElement, PanSensorWidth,PanSensorHeight, PanSpeed 951 | }} 952 | animate:flip 953 | transition:scale={{ duration:withTransitions ? 300 : 0 }} 954 | on:introstart={TransitionStarted} on:introend={TransitionEnded} 955 | on:outrostart={TransitionStarted} on:outroend={TransitionEnded} 956 | > 957 | {KeyOf(Item,Index)} 958 |
    • 959 | {/each} 960 | 961 | {#if sortable || extendable} 962 |
  • {@html AttachmentRegion || ''}
    • 970 | {/if} 971 | {:else} 972 | {#each List as Item,Index (KeyOf(Item,Index))} 973 |
  • handleClick(Event,Item)} 977 | transition:scale={{ duration:withTransitions ? 300 : 0 }} 978 | on:introstart={TransitionStarted} on:introend={TransitionEnded} 979 | on:outrostart={TransitionStarted} on:outroend={TransitionEnded} 980 | > 981 | {KeyOf(Item,Index)} 982 |
    • 983 | {/each} 984 | {/if} 985 | {:else} 986 | {#if extendable} 987 |
  • {@html Placeholder || '(empty list)'}
    • 994 | {:else} 995 |
  • {@html Placeholder || '(empty list)'}
    • 996 | {/if} 997 | {/if} 998 |
999 | 1000 | -------------------------------------------------------------------------------- /dist/svelte-sortable-flat-list-view.bundled.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.sortableFlatListView,r=e.sortableFlatListView=t();r.noConflict=function(){return e.sortableFlatListView=n,r}}())}(this,(function(){"use strict";function e(){}const t=e=>e;function n(e,t){for(const n in t)e[n]=t[n];return e}function r(e){return e()}function o(){return Object.create(null)}function i(e){e.forEach(r)}function a(e){return"function"==typeof e}function l(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function s(e,t,n,r){if(e){const o=c(e,t,n,r);return e[0](o)}}function c(e,t,r,o){return e[1]&&o?n(r.ctx.slice(),e[1](o(t))):r.ctx}function u(e,t,n,r,o,i,a){const l=function(e,t,n,r){if(e[2]&&r){const o=e[2](r(n));if(void 0===t.dirty)return o;if("object"==typeof o){const e=[],n=Math.max(t.dirty.length,o.length);for(let r=0;rwindow.performance.now():()=>Date.now(),h=f?e=>requestAnimationFrame(e):e;const g=new Set;function v(e){g.forEach((t=>{t.c(e)||(g.delete(t),t.f())})),0!==g.size&&h(v)}function y(e){let t;return 0===g.size&&h(v),{promise:new Promise((n=>{g.add(t={c:e,f:n})})),abort(){g.delete(t)}}}let b=!1;function D(e,t,n,r){for(;e>1);n(o)<=r?e=o+1:t=o}return e}function x(e,t){b?(!function(e){if(e.hydrate_init)return;e.hydrate_init=!0;const t=e.childNodes,n=new Int32Array(t.length+1),r=new Int32Array(t.length);n[0]=-1;let o=0;for(let e=0;et[n[e]].claim_order),t[e].claim_order)-1;r[e]=n[i]+1;const a=i+1;n[a]=e,o=Math.max(a,o)}const i=[],a=[];let l=t.length-1;for(let e=n[o]+1;0!=e;e=r[e-1]){for(i.push(t[e-1]);l>=e;l--)a.push(t[l]);l--}for(;l>=0;l--)a.push(t[l]);i.reverse(),a.sort(((e,t)=>e.claim_order-t.claim_order));for(let t=0,n=0;t=i[n].claim_order;)n++;const r=ne.removeEventListener(t,n,r)}function O(e,t,n){null==n?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function A(e,t){const n=Object.getOwnPropertyDescriptors(e.__proto__);for(const r in t)null==t[r]?e.removeAttribute(r):"style"===r?e.style.cssText=t[r]:"__value"===r?e.value=e[r]=t[r]:n[r]&&n[r].set?e[r]=t[r]:O(e,r,t[r])}function H(e,t){t=""+t,e.wholeText!==t&&(e.data=t)}function k(e,t,n){e.classList[n?"add":"remove"](t)}function _(e,t){const n=document.createEvent("CustomEvent");return n.initCustomEvent(e,!1,!1,t),n}const I=new Set;let M,Z=0;function R(e,t,n,r,o,i,a,l=0){const s=16.666/r;let c="{\n";for(let e=0;e<=1;e+=s){const r=t+(n-t)*i(e);c+=100*e+`%{${a(r,1-r)}}\n`}const u=c+`100% {${a(n,1-n)}}\n}`,d=`__svelte_${function(e){let t=5381,n=e.length;for(;n--;)t=(t<<5)-t^e.charCodeAt(n);return t>>>0}(u)}_${l}`,p=e.ownerDocument;I.add(p);const f=p.__svelte_stylesheet||(p.__svelte_stylesheet=p.head.appendChild(T("style")).sheet),m=p.__svelte_rules||(p.__svelte_rules={});m[d]||(m[d]=!0,f.insertRule(`@keyframes ${d} ${u}`,f.cssRules.length));const h=e.style.animation||"";return e.style.animation=`${h?`${h}, `:""}${d} ${r}ms linear ${o}ms 1 both`,Z+=1,d}function F(e,t){const n=(e.style.animation||"").split(", "),r=n.filter(t?e=>e.indexOf(t)<0:e=>-1===e.indexOf("__svelte")),o=n.length-r.length;o&&(e.style.animation=r.join(", "),Z-=o,Z||h((()=>{Z||(I.forEach((e=>{const t=e.__svelte_stylesheet;let n=t.cssRules.length;for(;n--;)t.deleteRule(n);e.__svelte_rules={}})),I.clear())})))}function W(e,t){const n=e.getBoundingClientRect();if(t.left!==n.left||t.top!==n.top){const r=getComputedStyle(e),o="none"===r.transform?"":r.transform;e.style.transform=`${o} translate(${t.left-n.left}px, ${t.top-n.top}px)`}}function C(e){M=e}function j(){const e=function(){if(!M)throw new Error("Function called outside component initialization");return M}();return(t,n)=>{const r=e.$$.callbacks[t];if(r){const o=_(t,n);r.slice().forEach((t=>{t.call(e,o)}))}}}const V=[],N=[],X=[],Y=[],q=Promise.resolve();let z=!1;function B(e){X.push(e)}let K=!1;const G=new Set;function J(){if(!K){K=!0;do{for(let e=0;e{te.delete(e),r&&(n&&e.d(1),r())})),e.o(t)}}const le={duration:0};function se(n,r,o,l){let s=r(n,o),c=l?0:1,u=null,d=null,p=null;function f(){p&&F(n,p)}function h(e,t){const n=e.b-c;return t*=Math.abs(n),{a:c,b:e.b,d:n,duration:t,start:e.start,end:e.start+t,group:e.group}}function g(r){const{delay:o=0,duration:a=300,easing:l=t,tick:g=e,css:v}=s||le,b={start:m()+o,b:r};r||(b.group=ne,ne.r+=1),u||d?d=b:(v&&(f(),p=R(n,c,r,a,o,l,v)),r&&g(0,1),u=h(b,a),B((()=>ee(n,r,"start"))),y((e=>{if(d&&e>d.start&&(u=h(d,a),d=null,ee(n,u.b,"start"),v&&(f(),p=R(n,c,u.b,u.duration,0,l,s.css))),u)if(e>=u.end)g(c=u.b,1-c),ee(n,u.b,"end"),d||(u.b?f():--u.group.r||i(u.group.c)),u=null;else if(e>=u.start){const t=e-u.start;c=u.a+u.d*l(t/u.duration),g(c,1-c)}return!(!u&&!d)})))}return{run(e){a(s)?(U||(U=Promise.resolve(),U.then((()=>{U=null}))),U).then((()=>{s=s(),g(e)})):g(e)},end(){f(),u=d=null}}}function ce(e,t){ae(e,1,1,(()=>{t.delete(e.key)}))}function ue(e,t){e.f(),ce(e,t)}function de(e,t,n,r,o,i,a,l,s,c,u,d){let p=e.length,f=i.length,m=p;const h={};for(;m--;)h[e[m].key]=m;const g=[],v=new Map,y=new Map;for(m=f;m--;){const e=d(o,i,m),l=n(e);let s=a.get(l);s?r&&s.p(e,t):(s=c(l,e),s.c()),v.set(l,g[m]=s),l in h&&y.set(l,Math.abs(m-h[l]))}const b=new Set,D=new Set;function x(e){ie(e,1),e.m(l,u),a.set(e.key,e),u=e.first,f--}for(;p&&f;){const t=g[f-1],n=e[p-1],r=t.key,o=n.key;t===n?(u=t.first,p--,f--):v.has(o)?!a.has(r)||b.has(r)?x(t):D.has(o)?p--:y.get(r)>y.get(o)?(D.add(r),x(t)):(b.add(o),p--):(s(n,a),p--)}for(;p--;){const t=e[p];v.has(t.key)||s(t,a)}for(;f;)x(g[f-1]);return g}function pe(e,t){-1===e.$$.dirty[0]&&(V.push(e),z||(z=!0,q.then(J)),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<{const o=r.length?r[0]:n;return f.ctx&&c(f.ctx[e],f.ctx[e]=o)&&(!f.skip_bound&&f.bound[e]&&f.bound[e](o),m&&pe(t,e)),n})):[],f.update(),m=!0,i(f.before_update),f.fragment=!!s&&s(f.ctx),n.target){if(n.hydrate){b=!0;const e=function(e){return Array.from(e.childNodes)}(n.target);f.fragment&&f.fragment.l(e),e.forEach($)}else f.fragment&&f.fragment.c();n.intro&&ie(t.$$.fragment),function(e,t,n,o){const{fragment:l,on_mount:s,on_destroy:c,after_update:u}=e.$$;l&&l.m(t,n),o||B((()=>{const t=s.map(r).filter(a);c?c.push(...t):i(t),e.$$.on_mount=[]})),u.forEach(B)}(t,n.target,n.anchor,n.customElement),b=!1,J()}C(p)}function me(e){const t=e-1;return t*t*t+1}function he(e,t,n={}){const r=getComputedStyle(e),o="none"===r.transform?"":r.transform,i=t.from.width/e.clientWidth,l=t.from.height/e.clientHeight,s=(t.from.left-t.to.left)/i,c=(t.from.top-t.to.top)/l,u=Math.sqrt(s*s+c*c),{delay:d=0,duration:p=(e=>120*Math.sqrt(e)),easing:f=me}=n;return{delay:d,duration:a(p)?p(u):p,easing:f,css:(e,t)=>`transform: ${o} translate(${t*s}px, ${t*c}px);`}}var ge=Function("return this")();function ve(e){throw function(e){var t=/^([$a-zA-Z][$a-zA-Z0-9]*):\s*(\S.+)\s*$/.exec(e);if(null==t)return new Error(e);var n=new Error(t[2]);return n.name=t[1],n}(e)}function ye(e){return"boolean"==typeof e||e instanceof Boolean}function be(e){return"number"==typeof e||e instanceof Number}function De(e){return("number"==typeof e||e instanceof Number)&&isFinite(e.valueOf())}function xe(e){return("number"==typeof e||e instanceof Number)&&(e=e.valueOf(),isFinite(e)&&Math.round(e)===e)}function we(e){return("number"==typeof e||e instanceof Number)&&(e=e.valueOf(),isFinite(e)&&Math.round(e)===e&&e>=0)}function $e(e){return"string"==typeof e||e instanceof String}var Te=/^\s*$/;function Ee(e){return("string"==typeof e||e instanceof String)&&!Te.test(e.valueOf())}function Pe(e){return"function"==typeof e}function Se(e){return null!=e&&"object"==typeof e}function Le(e){return null!=e&&"object"==typeof e&&Object.getPrototypeOf(e)===Object.prototype}var Oe=Array.isArray;function Ae(e,t){return t.indexOf(e)>=0}var He=!0;function ke(e,t,n){var r=function(r,o){return function(e,t,n,r,o){if(null==t){if(r)return t;ve("MissingArgument: no "+Qe(e)+" given")}else if(n(t))switch(!0){case t instanceof Boolean:case t instanceof Number:case t instanceof String:return t.valueOf();default:return t}else ve("InvalidArgument: the given "+Qe(e)+" is no valid "+Qe(o))}(r,o,e,t,n)},o=e.name;return null!=o&&/^ValueIs/.test(o)?function(e,t){null==e&&ve("MissingArgument: no function given");"function"!=typeof e&&ve("InvalidArgument: the given 1st Argument is not a JavaScript function");null==t&&ve("MissingArgument: no desired name given");"string"==typeof t||t instanceof String||ve("InvalidArgument: the given desired name is not a string");if(e.name===t)return e;try{if(Object.defineProperty(e,"name",{value:t}),e.name===t)return e}catch(e){}return new Function("originalFunction","return function "+t+" () {return originalFunction.apply(this,Array.prototype.slice.apply(arguments))}")(e)}(r,o.replace(/^ValueIs/,t?"allow":"expect")):r}var _e=ke(ye,He,"boolean value"),Ie=_e,Me=ke(De,He,"finite numeric value"),Ze=ke(xe,false,"integral numeric value");function Re(e,t,n,r){return null==t?t:We(e,t,n,r)}var Fe=Re;var We=function(e,t,n,r){if(Ze(e,t),isNaN(t)&&ve("InvalidArgument: the given "+Qe(e)+" is not-a-number"),null!=n&&isFinite(n)){if(null!=r&&isFinite(r)){if(tr)throw new RangeError("the given "+Qe(e)+" ("+t+") is outside the allowed range ("+n+"..."+r+")")}else if(tr)throw new RangeError("the given "+Qe(e)+" exceeds the allowed maximum ("+t+" > "+r+")");return t.valueOf()},Ce=ke(we,He,"ordinal number"),je=Ce,Ve=ke($e,He,"literal string"),Ne=ke(Ee,He,"non-empty literal string"),Xe=Ne,Ye=ke(Pe,He,"JavaScript function"),qe=Ye,ze=ke(Se,false,"JavaScript object"),Be=ke(Le,He,'"plain" JavaScript object'),Ke=Be;function Ge(e,t,n,r,o,i){return null==t?t:Je(e,t,n,r,o,i)}var Je=function(e,t,n,r,o,i){if(null==t&&ve("MissingArgument: no "+Qe(e)+" given"),function(e,t,n,r){if(Oe(e))try{for(var o=0,i=e.length;or)}catch(e){}return!1}(t,n,o,i))return t;ve("InvalidArgument: the given "+Qe(e)+" is "+(null==r?"either not a list or contains invalid elements":"no "+Qe(r)))};function Qe(e){return e.replace(/\\x[0-9a-zA-Z]{2}|\\u[0-9a-zA-Z]{4}|\\[0bfnrtv'"\\\/]?/g,(function(e){return"\\"===e?"\\\\":e})).replace(/[\x00-\x1f\x7f-\x9f]/g,(function(e){switch(e){case"\0":return"\\0";case"\b":return"\\b";case"\f":return"\\f";case"\n":return"\\n";case"\r":return"\\r";case"\t":return"\\t";case"\v":return"\\v";default:var t=e.charCodeAt(0).toString(16);return"\\x"+"00".slice(t.length)+t}}))}function Ue(e,t){return void 0===t&&(t='"'),t+function(e,t){return void 0===t&&(t='"'),e.replace("'"===t?/\\x[0-9a-zA-Z]{2}|\\u[0-9a-zA-Z]{4}|\\[0bfnrtv'"\\\/]?|'/g:/\\x[0-9a-zA-Z]{2}|\\u[0-9a-zA-Z]{4}|\\[0bfnrtv'"\\\/]?|"/g,(function(e){switch(e){case"'":return"\\'";case'"':return'\\"';case"\\":return"\\\\";default:return e}})).replace(/[\x00-\x1f\x7f-\x9f]/g,(function(e){switch(e){case"\0":return"\\0";case"\b":return"\\b";case"\f":return"\\f";case"\n":return"\\n";case"\r":return"\\r";case"\t":return"\\t";case"\v":return"\\v";default:var t=e.charCodeAt(0).toString(16);return"\\x"+"00".slice(t.length)+t}}))}(e,t)+t}function et(e,t,n){if(e===t)return!1;var r=typeof e;if(r!==typeof t)return!0;switch(r){case"undefined":case"boolean":case"string":case"function":return!0;case"number":return isNaN(e)!==isNaN(t)||Math.abs(e-t)>Number.EPSILON;case"object":return null==e||(null==t||("by-value"===n&&(e instanceof Boolean||e instanceof Number||e instanceof String)?e.valueOf()!==t.valueOf():Array.isArray(e)?function(e,t,n){if(!Array.isArray(t))return!0;if(e.length!==t.length)return!0;for(var r=0,o=e.length;rl.left+a.offsetWidth-1||n>l.top+a.offsetHeight-1))return lt(a,t,n)}return e}var st=["copy","move","link"];function ct(e){var t,n;return t=ht("list of allowed operations",(e=Ke("drop options",e)||{}).Operations,"copy"),"none"in(n=Object.assign({},Ke("data to be offered",e.DataToOffer)))&&ve('InvalidArgument: "none" is not a valid data type'),{Operations:t,DataToOffer:n,onDropZoneEnter:qe('"onDropZoneEnter" handler',e.onDropZoneEnter),onDropZoneHover:qe('"onDropZoneHover" handler',e.onDropZoneHover),onDropZoneLeave:qe('"onDropZoneLeave" handler',e.onDropZoneLeave),onDropped:qe('"onDropped" handler',e.onDropped)}}function ut(e,t){var n,r,o,i,a,l,s,c,u,d,p,f;return n=!1,r=it(t),o=ct(t),e.setAttribute("draggable","true"),e.addEventListener("dragstart",(function(t){var m=Object.assign({},r,o);if(at(e,m,t))return t.stopPropagation(),t.preventDefault(),!1;i=function(e,t){var n;switch(!0){case"parent"===t.relativeTo:n=e.parentElement;break;case"body"===t.relativeTo:n=document.body;break;case t.relativeTo instanceof HTMLElement:case t.relativeTo instanceof SVGElement:(n=t.relativeTo)==document.body||document.body.contains(n)||ve('InvalidArgument: the HTML element given as "relativeTo" option is not part of this HTML document');break;default:n=e.closest(t.relativeTo)}return null==n?document.body:n}(e,m);var h,g=rt.fromDocumentTo("local",{left:t.pageX,top:t.pageY},i);if(a=l=0,u={x:0,y:0},null==m.onDragStart)u={x:0,y:0};else try{var v=m.onDragStart(m.Extras);if(Le(v)){var y=Me("x start position",v.x),b=Me("y start position",v.y);a=y-g.left,l=b-g.top,y=nt(y,m.minX,m.maxX),b=nt(b,m.minY,m.maxY),u={x:y,y:b}}}catch(e){console.error('"onDragStart" handler failed',e)}if(d=u,p=void 0,f=void 0,s=!1,null==m.Dummy&&(m.Dummy="standard"),null!=(c=function(e,t){switch(!0){case"standard"===t.Dummy:return;case"none"===t.Dummy:var n=document.createElement("div");return n.setAttribute("style","display:block; position:absolute; width:1px; height:1px; background:transparent; border:none; margin:0px; padding:0px; cursor:auto"),document.body.appendChild(n),n;case Ee(t.Dummy):var r=document.createElement("div");return r.style.display="block",r.style.position="absolute",r.style.left=document.body.scrollWidth+100+"px",document.body.appendChild(r),r.innerHTML=t.Dummy,r.children[0];case t.Dummy instanceof HTMLElement:case t.Dummy instanceof SVGElement:return t.Dummy;case Pe(t.Dummy):var o=void 0;try{o=t.Dummy(t.Extras,e)}catch(e){console.error("RuntimeError: creating draggable dummy failed",e)}if(null!=o){if(o instanceof HTMLElement||o instanceof SVGElement)return o;console.error("InvalidArgument: the newly created draggable dummy is neither an HTML nor an SVG element")}}}(e,m))&&null!=t.dataTransfer){var D=m.DummyOffsetX,x=m.DummyOffsetY;if(null==D||null==x){var w=rt.fromDocumentTo("local",{left:t.pageX,top:t.pageY},e);null==D&&(D=w.left),null==x&&(x=w.top)}switch(!0){case"none"===m.Dummy:t.dataTransfer.setDragImage(c,0,0),setTimeout((function(){document.body.removeChild(c)}),0);break;case $e(m.Dummy):t.dataTransfer.setDragImage(c,D,x),setTimeout((function(){document.body.removeChild(c.parentElement)}),0);break;default:t.dataTransfer.setDragImage(c,D,x)}}if(null!=t.dataTransfer){var $=["none","copy","link","copyLink","move","copyMove","linkMove","all"][2*(2*((h=m.Operations).indexOf("move")<0?0:1)+(h.indexOf("link")<0?0:1))+(h.indexOf("copy")<0?0:1)];if(t.dataTransfer.effectAllowed=$,tt(m.DataToOffer))for(var T in m.DataToOffer)m.DataToOffer.hasOwnProperty(T)&&t.dataTransfer.setData(T,m.DataToOffer[T])}ot.currentDroppableExtras=m.Extras,ot.currentDropZoneExtras=void 0,ot.currentDropZonePosition=void 0,ot.currentDropZoneElement=void 0,ot.DroppableWasDropped=!1,ot.currentDropOperation=void 0,ot.currentTypeTransferred=void 0,ot.currentDataTransferred=void 0,n=!0,setTimeout((function(){return e.classList.add("dragged")}),0),t.stopPropagation()})),e.addEventListener("drag",(function(t){if(!n)return!1;var c=Object.assign({},r,o);if(0!==t.screenX||0!==t.screenY||s){s=!1,mt("draggable",e,c,t.pageX,t.pageY);var u=rt.fromDocumentTo("local",{left:t.pageX,top:t.pageY},i),m=u.left+a,h=u.top+l;m=nt(m,c.minX,c.maxX),h=nt(h,c.minY,c.maxY);var g=m-d.x,v=h-d.y;d={x:m,y:h},gt("onDragMove",c,m,h,g,v,c.Extras)}else s=!0;ot.currentDropZoneElement===p?null!=ot.currentDropZoneElement&>("onDropZoneHover",c,ot.currentDropZonePosition.x,ot.currentDropZonePosition.y,ot.currentDropZoneExtras,c.Extras):(null==ot.currentDropZoneElement?(e.classList.remove("droppable"),gt("onDropZoneLeave",c,f,c.Extras)):(e.classList.add("droppable"),gt("onDropZoneEnter",c,ot.currentDropZonePosition.x,ot.currentDropZonePosition.y,f,c.Extras)),p=ot.currentDropZoneElement,f=ot.currentDropZoneExtras),t.stopPropagation()})),e.addEventListener("dragend",(function(t){if(!n)return!1;var i=Object.assign({},r,o);if(ot.DroppableWasDropped&&(gt("onDropped",i,ot.currentDropZonePosition.x,ot.currentDropZonePosition.y,ot.currentDropOperation,ot.currentTypeTransferred,ot.currentDataTransferred,ot.currentDropZoneExtras,i.Extras),ot.currentDropZoneExtras=void 0,ot.currentDropZonePosition=void 0,ot.currentDropZoneElement=void 0,ot.DroppableWasDropped=!1,ot.currentDropOperation=void 0,ot.currentTypeTransferred=void 0,ot.currentDataTransferred=void 0),null!=i.onDragEnd){var a=nt(d.x,i.minX,i.maxX),l=nt(d.y,i.minY,i.maxY);gt("onDragEnd",i,a,l,a-d.x,l-d.y,i.Extras)}ot.currentDroppableExtras=void 0,n=!1,e.classList.remove("dragged","droppable"),t.stopPropagation()})),{update:function(e){!function(e){e=it(e),null==r.Extras&&null!=e.Extras&&(r.Extras=e.Extras),r.Dummy=e.Dummy||r.Dummy,r.minX=e.minX,r.minY=e.minY,r.maxX=e.maxX,r.maxY=e.maxY,r.Pannable=e.Pannable,r.PanSensorWidth=e.PanSensorWidth,r.PanSensorHeight=e.PanSensorHeight,r.PanSpeed=e.PanSpeed,r.onDragStart=e.onDragStart||r.onDragStart}(e),function(e){e=ct(e),o.Operations=e.Operations,o.DataToOffer=e.DataToOffer}(e)}}}function dt(e){var t,n,r,o,i,a,l;for(var s in t=(e=Ke("drop zone options",e)||{}).Extras,Be("data types to be accepted",e.TypesToAccept),n=Object.create(null),null!=e.TypesToAccept&&"none"in e.TypesToAccept&&ve('InvalidArgument: "none" is not a valid data type'),e.TypesToAccept)e.TypesToAccept.hasOwnProperty(s)&&(n[s]=ht("list of accepted operations for type "+Ue(s),e.TypesToAccept[s]));switch(r=Fe("min. time to hold",e.HoldDelay,0),!0){case null==e.Pannable:o=void 0;break;case"this"===e.Pannable:case Ee(e.Pannable):case e.Pannable instanceof HTMLElement:case e.Pannable instanceof SVGElement:o=e.Pannable;break;default:ve('InvalidArgument: invalid "Pannable" specification given')}return null==(i=je("panning sensor width",e.PanSensorWidth))&&(i=20),null==(a=je("panning sensor height",e.PanSensorHeight))&&(a=20),null==(l=je("panning speed",e.PanSpeed))&&(l=10),{Extras:t,TypesToAccept:n,HoldDelay:r,Pannable:o,PanSensorWidth:i,PanSensorHeight:a,PanSpeed:l,onDroppableEnter:qe('"onDroppableEnter" handler',e.onDroppableEnter),onDroppableMove:qe('"onDroppableMove" handler',e.onDroppableMove),onDroppableLeave:qe('"onDroppableLeave" handler',e.onDroppableLeave),onDroppableHold:qe('"onDroppableHold" handler',e.onDroppableHold),onDroppableRelease:qe('"onDroppableRelease" handler',e.onDroppableRelease),onDrop:qe('"onDrop" handler',e.onDrop)}}function pt(e,t){var n;function r(e){ot.HoldPosition=e,null!=ot.HoldTimer&&clearTimeout(ot.HoldTimer),ot.HoldTimer=setTimeout(a,t.HoldDelay)}function o(e){Math.pow(ot.HoldPosition.x-e.x,2)+Math.pow(ot.HoldPosition.y-e.y,2)>25&&(ot.HoldPosition=e,clearTimeout(ot.HoldTimer),ot.HoldTimer=setTimeout(a,t.HoldDelay))}function i(){delete ot.HoldPosition,null!=ot.HoldTimer&&(clearTimeout(ot.HoldTimer),delete ot.HoldTimer),delete ot.HoldWasTriggeredForElement}function a(){var n=ot.currentDropZonePosition||ot.HoldPosition;delete ot.HoldPosition,delete ot.HoldTimer,ot.HoldWasTriggeredForElement=e,gt("onDroppableHold",t,n.x,n.y,ot.currentDroppableExtras,t.Extras)}return n=dt(t),e.setAttribute("draggable","true"),e.addEventListener("dragenter",(function(t){var o=n;mt("dropzone",e,o,t.pageX,t.pageY);var i=ft(rt.fromDocumentTo("local",{left:t.pageX,top:t.pageY},e));if(be(o.HoldDelay)&&o.HoldDelay>0&&ot.HoldWasTriggeredForElement!==e&&r(i),null!=t.dataTransfer&&"none"!==t.dataTransfer.effectAllowed){var a=t.dataTransfer.dropEffect;if("none"===a)switch(t.dataTransfer.effectAllowed){case"copy":case"move":case"link":a=t.dataTransfer.effectAllowed;break;default:a=void 0}var l=o.TypesToAccept,s=t.dataTransfer.types.filter((function(e){return e in l&&""!==l[e]}));if(0!==s.length)!1!==vt("onDroppableEnter",o,i.x,i.y,a,s,ot.currentDroppableExtras,o.Extras)&&(ot.currentDropZoneExtras=o.Extras,ot.currentDropZoneElement=e,ot.currentDropZonePosition=i,e.classList.add("hovered"),t.preventDefault(),t.stopPropagation())}})),e.addEventListener("dragover",(function(t){var i=n;mt("dropzone",e,i,t.pageX,t.pageY);var a=ft(rt.fromDocumentTo("local",{left:t.pageX,top:t.pageY},e));if(be(i.HoldDelay)&&i.HoldDelay>0&&ot.HoldWasTriggeredForElement!==e&&(null==ot.HoldPosition?r(a):o(a)),null==t.dataTransfer||"none"===t.dataTransfer.effectAllowed||null!=ot.currentDropZoneElement&&ot.currentDropZoneElement!==e)e.classList.remove("hovered");else{var l=t.dataTransfer.dropEffect;if("none"===l)switch(t.dataTransfer.effectAllowed){case"copy":case"move":case"link":l=t.dataTransfer.effectAllowed;break;default:l=void 0}var s=i.TypesToAccept,c=t.dataTransfer.types.filter((function(e){return e in s&&""!==s[e]}));if(0===c.length)return ot.currentDropZoneElement===e&&(ot.currentDropZoneExtras=void 0,ot.currentDropZoneElement=void 0,ot.currentDropZonePosition=void 0),void e.classList.remove("hovered");if(ot.currentDropZonePosition=a,!1!==vt("onDroppableMove",i,ot.currentDropZonePosition.x,ot.currentDropZonePosition.y,l,c,ot.currentDroppableExtras,i.Extras))return ot.currentDropZoneExtras=i.Extras,ot.currentDropZoneElement=e,e.classList.add("hovered"),t.preventDefault(),!1;ot.currentDropZoneExtras=void 0,ot.currentDropZoneElement=void 0,ot.currentDropZonePosition=void 0,e.classList.remove("hovered")}})),e.addEventListener("dragleave",(function(t){e.classList.remove("hovered"),ot.DropZonePanning=!1,i();var r=n;ot.currentDropZoneElement===e&&(null==ot.currentTypeTransferred&&(ot.currentDropZoneExtras=void 0,ot.currentDropZoneElement=void 0,ot.DroppableWasDropped=!1,ot.currentDropZonePosition=void 0,ot.currentTypeTransferred=void 0,ot.currentDataTransferred=void 0,gt("onDroppableLeave",r,ot.currentDroppableExtras,r.Extras)),t.preventDefault(),t.stopPropagation())})),e.addEventListener("drop",(function(t){if(e.classList.remove("hovered"),ot.DropZonePanning=!1,i(),null!=t.dataTransfer&&"none"!==t.dataTransfer.effectAllowed&&ot.currentDropZoneElement===e){t.stopPropagation();var r=n,o=t.dataTransfer.dropEffect;if("none"===o)switch(t.dataTransfer.effectAllowed){case"copy":case"move":case"link":o=t.dataTransfer.effectAllowed;break;default:o=void 0}var a=r.TypesToAccept,l=t.dataTransfer.types.filter((function(e){return e in a&&(null==o||a[e].indexOf(o)>=0)}));if(0===l.length)return ot.currentDropZoneExtras=void 0,ot.currentDropZonePosition=void 0,ot.DroppableWasDropped=!1,ot.currentDropOperation=void 0,ot.currentTypeTransferred=void 0,ot.currentDataTransferred=void 0,void gt("onDroppableLeave",r,ot.currentDroppableExtras,r.Extras);ot.currentDropZonePosition=ft(rt.fromDocumentTo("local",{left:t.pageX,top:t.pageY},e));var s={};l.forEach((function(e){return s[e]=t.dataTransfer.getData(e)}));var c=vt("onDrop",r,ot.currentDropZonePosition.x,ot.currentDropZonePosition.y,o,s,ot.currentDroppableExtras,r.Extras);switch(!0){case null==c:ot.DroppableWasDropped=!0,ot.currentDropOperation=o,ot.currentTypeTransferred=void 0,ot.currentDataTransferred=void 0;break;case Ae(c,l):ot.DroppableWasDropped=!0,ot.currentDropOperation=o,ot.currentTypeTransferred=c,ot.currentDataTransferred=s[c];break;default:ot.DroppableWasDropped=!1,ot.currentDropZoneExtras=void 0,ot.currentDropZonePosition=void 0,ot.currentDropOperation=void 0,ot.currentTypeTransferred=void 0,ot.currentDataTransferred=void 0}ot.currentDropZoneElement=void 0}})),{update:function(e){e=dt(e),null==n.Extras&&null!=e.Extras&&(n.Extras=e.Extras),n.TypesToAccept=e.TypesToAccept,n.HoldDelay=e.HoldDelay,n.Pannable=e.Pannable,n.PanSensorWidth=e.PanSensorWidth,n.PanSensorHeight=e.PanSensorHeight,n.PanSpeed=e.PanSpeed}}}function ft(e){return{x:e.left,y:e.top}}function mt(e,t,n,r,o){if("draggable"!==e||!ot.DropZonePanning)if(null==n.Pannable||0===n.PanSensorWidth&&0===n.PanSensorHeight||0===n.PanSpeed)ot.DropZonePanning=!1;else{var i;switch(!0){case Ee(n.Pannable):null!=(i=t.parentElement)&&(i=i.closest(n.Pannable));break;case"this"===n.Pannable&&"dropzone"===e:i=t;break;case n.Pannable instanceof HTMLElement:case n.Pannable instanceof SVGElement:i=n.Pannable}if(null!=i){var a=rt.fromDocumentTo("local",{left:r,top:o},i),l=a.left,s=a.top;l>=0&&l=c-n.PanSensorWidth&&l=0&&s=u-n.PanSensorHeight&&s0||/touch|android|iphone|ipod|ipad/i.test(navigator.userAgent))),yt.AppRunsOnLegacyTouchDevice}function Tt(e,t){return"function"==typeof e.item?e.item(t):e[t]}function Et(e,t){for(var n=0,r=e.length;n.ListItemView{display:block;position:relative;flex:0 0 auto;height:30px;line-height:30px;border:solid 1px transparent;margin:0px 2px 0px 2px;padding:0px 4px 0px 4px;list-style:none}.defaultListView.svelte-1tfuj23>.ListItemView > *{pointer-events:none}.defaultListView.svelte-1tfuj23:not(.transitioning)>.ListItemView:hover:not(.dragged){border:solid 1px }.defaultListView.svelte-1tfuj23:not(.transitioning)>.ListItemView.selected:not(.dragged){background:dodgerblue }.defaultListView.svelte-1tfuj23>.ListItemView.dragged{opacity:0.3 }.defaultListView.svelte-1tfuj23>.ListItemView.hovered:not(.dragged){border-top:solid 10px transparent }.defaultListView.svelte-1tfuj23>.AttachmentRegion{display:block;position:relative;flex:1 1 auto;min-height:20px;background:transparent;border:solid 1px transparent;margin:0px 2px 2px 2px;padding:0px;list-style:none}.defaultListView.svelte-1tfuj23>.AttachmentRegion.hovered{border:solid 1px }.defaultListView.svelte-1tfuj23>.Placeholder{display:flex;position:absolute;left:0px;top:0px;right:0px;height:100%;flex-flow:column nowrap;justify-content:center;align-items:center}",{insertAt:"top"});const It=e=>({Item:1&e[0],Index:1&e[0]}),Mt=e=>({Item:e[74],Index:e[76]});function Zt(e,t,n){const r=e.slice();return r[74]=t[n],r[76]=n,r}const Rt=e=>({Item:1&e[0],Index:1&e[0]}),Ft=e=>({Item:e[74],Index:e[76]});function Wt(t){let n,r=(t[6]||"(empty list)")+"";return{c(){n=T("li"),k(n,"Placeholder",!0)},m(e,t){w(e,n,t),n.innerHTML=r},p(e,t){64&t[0]&&r!==(r=(e[6]||"(empty list)")+"")&&(n.innerHTML=r)},i:e,o:e,d(e){e&&$(n)}}}function Ct(t){let n,r,o,i,l=(t[6]||"(empty list)")+"";return{c(){n=T("li"),k(n,"Placeholder",!0)},m(e,a){w(e,n,a),n.innerHTML=l,o||(i=p(r=pt.call(null,n,{Extras:{List:t[0],Item:void 0},TypesToAccept:t[17],onDroppableEnter:t[27],onDroppableMove:t[28],onDrop:t[30]})),o=!0)},p(e,t){64&t[0]&&l!==(l=(e[6]||"(empty list)")+"")&&(n.innerHTML=l),r&&a(r.update)&&131073&t[0]&&r.update.call(null,{Extras:{List:e[0],Item:void 0},TypesToAccept:e[17],onDroppableEnter:e[27],onDroppableMove:e[28],onDrop:e[30]})},i:e,o:e,d(e){e&&$(n),o=!1,i()}}}function jt(e){let t,n,r,o;const i=[Nt,Vt],a=[];function l(e,t){return e[2]||e[21]||e[20]?0:1}return t=l(e),n=a[t]=i[t](e),{c(){n.c(),r=S()},m(e,n){a[t].m(e,n),w(e,r,n),o=!0},p(e,o){let s=t;t=l(e),t===s?a[t].p(e,o):(re(),ae(a[s],1,1,(()=>{a[s]=null})),oe(),n=a[t],n?n.p(e,o):(n=a[t]=i[t](e),n.c()),ie(n,1),n.m(r.parentNode,r))},i(e){o||(ie(n),o=!0)},o(e){ae(n),o=!1},d(e){a[t].d(e),e&&$(r)}}}function Vt(e){let t,n,r=[],o=new Map,i=e[0];const a=e=>e[15](e[74],e[76]);for(let t=0;te[15](e[74],e[76]);for(let t=0;t{o||(o=se(n,Bt,{duration:t[1]?300:0},!0)),o.run(1)})),a=!0)},o(e){ae(f,e),o||(o=se(n,Bt,{duration:t[1]?300:0},!1)),o.run(0),a=!1},d(e){e&&$(n),f&&f.d(e),e&&o&&o.end(),l=!1,i(c)}}}function Yt(n,r){let o,l,c,d,f,h,g,v,b=e;const D=r[57].default,x=s(D,r,r[56],Ft),P=x||function(e){let t,n=e[15](e[74],e[76])+"";return{c(){t=E(n)},m(e,n){w(e,t,n)},p(e,r){32769&r[0]&&n!==(n=e[15](e[74],e[76])+"")&&H(t,n)},d(e){e&&$(t)}}}(r);function S(...e){return r[58](r[74],...e)}return{key:n,first:null,c(){o=T("li"),P&&P.c(),k(o,"ListItemView",!0),k(o,"dragged",r[19].indexOf(r[74])>=0),k(o,"selected",r[7](r[74])),this.first=o},m(e,t){w(e,o,t),P&&P.m(o,null),h=!0,g||(v=[L(o,"click",S),p(l=ut.call(null,o,{onlyFrom:r[8],neverFrom:r[9],Dummy:r[23],Extras:{List:r[0],Item:r[74]},DataToOffer:r[16],onDragStart:r[24],onDragEnd:r[25],onDropped:r[26]})),p(c=pt.call(null,o,{Extras:{List:r[0],Item:r[74]},TypesToAccept:r[17],onDrop:r[30],onDroppableEnter:r[27],onDroppableMove:r[28],onDroppableLeave:r[29],HoldDelay:r[13],onDroppableHold:r[14],Pannable:r[18],PanSensorWidth:r[10],PanSensorHeight:r[11],PanSpeed:r[12]})),L(o,"introstart",r[31]),L(o,"introend",r[32]),L(o,"outrostart",r[31]),L(o,"outroend",r[32])],g=!0)},p(e,t){r=e,x?x.p&&(!h||1&t[0]|33554432&t[1])&&u(x,D,r,r[56],h?t:[-1,-1,-1],Rt,Ft):P&&P.p&&(!h||32769&t[0])&&P.p(r,h?t:[-1,-1,-1]),l&&a(l.update)&&66305&t[0]&&l.update.call(null,{onlyFrom:r[8],neverFrom:r[9],Dummy:r[23],Extras:{List:r[0],Item:r[74]},DataToOffer:r[16],onDragStart:r[24],onDragEnd:r[25],onDropped:r[26]}),c&&a(c.update)&&424961&t[0]&&c.update.call(null,{Extras:{List:r[0],Item:r[74]},TypesToAccept:r[17],onDrop:r[30],onDroppableEnter:r[27],onDroppableMove:r[28],onDroppableLeave:r[29],HoldDelay:r[13],onDroppableHold:r[14],Pannable:r[18],PanSensorWidth:r[10],PanSensorHeight:r[11],PanSpeed:r[12]}),524289&t[0]&&k(o,"dragged",r[19].indexOf(r[74])>=0),129&t[0]&&k(o,"selected",r[7](r[74]))},r(){f=o.getBoundingClientRect()},f(){!function(e){const t=getComputedStyle(e);if("absolute"!==t.position&&"fixed"!==t.position){const{width:n,height:r}=t,o=e.getBoundingClientRect();e.style.position="absolute",e.style.width=n,e.style.height=r,W(e,o)}}(o),b(),W(o,f)},a(){b(),b=function(n,r,o,i){if(!r)return e;const a=n.getBoundingClientRect();if(r.left===a.left&&r.right===a.right&&r.top===a.top&&r.bottom===a.bottom)return e;const{delay:l=0,duration:s=300,easing:c=t,start:u=m()+l,end:d=u+s,tick:p=e,css:f}=o(n,{from:r,to:a},i);let h,g=!0,v=!1;function b(){f&&F(n,h),g=!1}return y((e=>{if(!v&&e>=u&&(v=!0),v&&e>=d&&(p(1,0),b()),!g)return!1;if(v){const t=0+1*c((e-u)/s);p(t,1-t)}return!0})),f&&(h=R(n,0,1,s,l,c,f)),l||(v=!0),p(0,1),b}(o,f,he,{})},i(e){h||(ie(P,e),B((()=>{d||(d=se(o,Bt,{duration:r[1]?300:0},!0)),d.run(1)})),h=!0)},o(e){ae(P,e),d||(d=se(o,Bt,{duration:r[1]?300:0},!1)),d.run(0),h=!1},d(e){e&&$(o),P&&P.d(e),e&&d&&d.end(),g=!1,i(v)}}}function qt(e){let t,n,r,o,i=(e[5]||"")+"";return{c(){t=T("li"),k(t,"AttachmentRegion",!0)},m(a,l){w(a,t,l),t.innerHTML=i,r||(o=p(n=pt.call(null,t,{Extras:{List:e[0],Item:void 0},TypesToAccept:e[17],onDroppableEnter:e[27],onDroppableMove:e[28],onDrop:e[30],HoldDelay:e[13],onDroppableHold:e[14]})),r=!0)},p(e,r){32&r[0]&&i!==(i=(e[5]||"")+"")&&(t.innerHTML=i),n&&a(n.update)&&155649&r[0]&&n.update.call(null,{Extras:{List:e[0],Item:void 0},TypesToAccept:e[17],onDroppableEnter:e[27],onDroppableMove:e[28],onDrop:e[30],HoldDelay:e[13],onDroppableHold:e[14]})},d(e){e&&$(t),r=!1,o()}}}function zt(e){let t,r,o,i;const a=[jt,Ct,Wt],l=[];function s(e,t){return e[0].length>0?0:e[21]?1:2}r=s(e),o=l[r]=a[r](e);let c=[{class:e[3]},{style:e[4]},e[33]],u={};for(let e=0;e{l[d]=null})),oe(),o=l[r],o?o.p(e,n):(o=l[r]=a[r](e),o.c()),ie(o,1),o.m(t,null)),A(t,u=function(e,t){const n={},r={},o={$$scope:1};let i=e.length;for(;i--;){const a=e[i],l=t[i];if(l){for(const e in a)e in l||(r[e]=1);for(const e in l)o[e]||(n[e]=l[e],o[e]=1);e[i]=l}else for(const e in a)o[e]=1}for(const e in r)e in n||(n[e]=void 0);return n}(c,[(!i||8&n[0])&&{class:e[3]},(!i||16&n[0])&&{style:e[4]},4&n[1]&&e[33]])),k(t,"defaultListView",null==e[3]),k(t,"withoutTextSelection",!0),k(t,"svelte-1tfuj23",!0)},i(e){i||(ie(o),i=!0)},o(e){ae(o),i=!1},d(n){n&&$(t),l[r].d(),e[60](null)}}}function Bt(e,t){const n=window.getComputedStyle(e),r="none"===n.transform?"":n.transform;return{delay:0,duration:0===t.duration?0:t.duration||300,css:(e,t)=>`transform: ${r} translateX(-${50*t}%) scaleX(${e})`}}function Kt(e,t,r){const o=["class","style","List","Key","AttachmentRegion","Placeholder","withTransitions","SelectionLimit","SelectionList","select","selectOnly","selectAll","selectRange","deselect","deselectAll","toggleSelectionOf","selectedItems","SelectionCount","isSelected","sortable","onlyFrom","neverFrom","onSortRequest","onSort","PanSensorWidth","PanSensorHeight","PanSpeed","Operations","DataToOffer","TypesToAccept","onOuterDropRequest","onDroppedOutside","onDropFromOutside","HoldDelay","onDroppableHold"];let i=d(t,o),{$$slots:a={},$$scope:l}=t,s="uid-"+kt.__nextId();const c=j();let u,p,f,{class:m}=t,{style:h}=t,{List:g}=t,{Key:v}=t,{AttachmentRegion:y}=t,{Placeholder:b}=t,{withTransitions:D=!0}=t;let x,w,$=new WeakMap,{SelectionLimit:T}=t,{SelectionList:E=[]}=t;function P(...e){let t=_(),n=!1;e.forEach((e=>{p(e)in f?$.has(e)||(null==T||t{p(e)in f?$.has(e)&&($.delete(e),t=!0,c("deselected-item",e)):ve('InvalidArgument: one or multiple of the given items to deselect are not part of the given "List"')})),x=w=void 0,t&&(r(34,E=k()),de())}function A(){let e=!1;g.forEach((t=>{$.has(t)&&($.delete(t),e=!0,c("deselected-item",t))})),x=w=void 0,e&&(r(34,E=k()),de())}function H(...e){x=void 0;let t=[],n=!1;e.forEach((e=>{p(e)in f?$.has(e)?($.delete(e),n=!0,c("deselected-item",e)):t.push(e):ve('InvalidArgument: one or multiple of the given items to select or deselect are not part of the given "List"')}));let o=_();if(null!=T){let e=T-o;e{$.set(t,!0),n=!0,c("selected-item",t),1===e.length&&(x=t,w=void 0)})),n&&(r(34,E=k()),de())}function k(){return g.filter((e=>$.has(e)))}function _(){return g.reduce(((e,t)=>e+($.has(t)?1:0)),0)}function I(e){return $.has(e)}function M(e,t){switch(!0){case 0===e.buttons&&0!==e.button:case 0!==e.buttons&&1!==e.buttons:return;case"coarse"===At.PointingAccuracy:if(!(1!==T||I(t)||e.ctrlKey||e.metaKey||e.shiftKey)){S(t);break}case e.ctrlKey:case e.metaKey:H(t);break;case e.shiftKey:L(t);break;default:S(t)}}let Z,R,F=!1,W=[],{sortable:C=!1}=t,{onlyFrom:V}=t,{neverFrom:X}=t,{onSortRequest:Y}=t,{onSort:q}=t,{PanSensorWidth:z}=t,{PanSensorHeight:B}=t,{PanSpeed:K}=t,{Operations:G}=t,{DataToOffer:J}=t,{TypesToAccept:Q}=t,{onOuterDropRequest:U}=t,{onDroppedOutside:ee}=t,{onDropFromOutside:te}=t,{HoldDelay:ne}=t,{onDroppableHold:re}=t;function oe(e,t,n="copy move link"){let r=Ve(e,t)||n;switch(r.trim()){case"all":return"copy move link";case"none":return""}let o=r.trim().replace(/\s+/g," ").split(" ");return Ge(e,o,(e=>Ae(e,st))),o.reduce(((e,t)=>e.indexOf(t)<0?e+t+" ":e)," ")}function ie(e){for(let t in e)if(e.hasOwnProperty(t)&&t!==s)return!0;return!1}let ae=!1,le=!1;function se(e,t,n,r,o,i){if(g===(o&&o.List)&&g.indexOf(o.Item)>=0&&o.ItemList.indexOf(i.Item)>=0)return de(),!1;let a=!0;if(g===(o&&o.List))if(C){if(null!=Y)try{a=Y(e,t,o,i)}catch(e){a=!1,console.error('RuntimeError: callback "onSortRequest" failed',e)}}else a=!1;else if(null!=U)try{a=U(e,t,n,r,o,o)}catch(e){a=!1,console.error('RuntimeError: callback "onOuterDropRequest" failed',e)}return a&&i.Item,de(),a&&"link"!==n}const ce=se;function ue(e){let t=Object.create(null);return e.forEach((e=>{let n=p(e);t[n]=e})),t}function de(){r(0,g)}return e.$$set=e=>{t=n(n({},t),function(e){const t={};for(const n in e)"$"!==n[0]&&(t[n]=e[n]);return t}(e)),r(33,i=d(t,o)),"class"in e&&r(3,m=e.class),"style"in e&&r(4,h=e.style),"List"in e&&r(0,g=e.List),"Key"in e&&r(35,v=e.Key),"AttachmentRegion"in e&&r(5,y=e.AttachmentRegion),"Placeholder"in e&&r(6,b=e.Placeholder),"withTransitions"in e&&r(1,D=e.withTransitions),"SelectionLimit"in e&&r(36,T=e.SelectionLimit),"SelectionList"in e&&r(34,E=e.SelectionList),"sortable"in e&&r(2,C=e.sortable),"onlyFrom"in e&&r(8,V=e.onlyFrom),"neverFrom"in e&&r(9,X=e.neverFrom),"onSortRequest"in e&&r(46,Y=e.onSortRequest),"onSort"in e&&r(47,q=e.onSort),"PanSensorWidth"in e&&r(10,z=e.PanSensorWidth),"PanSensorHeight"in e&&r(11,B=e.PanSensorHeight),"PanSpeed"in e&&r(12,K=e.PanSpeed),"Operations"in e&&r(48,G=e.Operations),"DataToOffer"in e&&r(49,J=e.DataToOffer),"TypesToAccept"in e&&r(50,Q=e.TypesToAccept),"onOuterDropRequest"in e&&r(51,U=e.onOuterDropRequest),"onDroppedOutside"in e&&r(52,ee=e.onDroppedOutside),"onDropFromOutside"in e&&r(53,te=e.onDropFromOutside),"HoldDelay"in e&&r(13,ne=e.HoldDelay),"onDroppableHold"in e&&r(14,re=e.onDroppableHold),"$$scope"in e&&r(56,l=e.$$scope)},e.$$.update=()=>{if(8&e.$$.dirty[0]&&Ne('"class" attribute',m),16&e.$$.dirty[0]&&Ne('"style" attribute',h),1&e.$$.dirty[0]&&(Ge('"List" attribute',g,Se),null==g&&r(0,g=[])),16&e.$$.dirty[1])switch(!0){case null==v:r(15,p=e=>String(e));break;case Ee(v):r(15,p=e=>String(e[v]));break;case Pe(v):r(15,p=(e,t)=>String(v(e,t)));break;default:ve('InvalidArgument: the given "Key" attribute is neither a non-empty string nor a function returning such a string')}if(32&e.$$.dirty[0]&&Ne('"AttachmentRegion" attribute',y),64&e.$$.dirty[0]&&Ne('"Placeholder" attribute',b),2&e.$$.dirty[0]&&(_e('"withTransitions" attribute',D),null==D&&r(1,D=!0)),1&e.$$.dirty[0]|16&e.$$.dirty[1]&&(r(54,f=Object.create(null)),g.forEach((e=>{let t=p(e);t in f?f[t]===e?ve('InvalidArgument: the given "List" contains the same item multiple times'):ve('InvalidArgument: the given "Key" does not produce unique keys for every "List" item'):r(54,f[t]=e,f)})),null!=u&&r(34,E=k())),32&e.$$.dirty[1]&&Ce("selection limit",T),32769&e.$$.dirty[0]|8388648&e.$$.dirty[1]){Ge('"SelectionList" attribute',E,Se),null==E&&r(34,E=[]);let e=new WeakMap,t=0;E.forEach((n=>{p(n)in f?e.has(n)||(null==T||t{$.has(t)?e.has(t)||($.delete(t),n=!0):e.has(t)&&($.set(t,!0),n=!0)})),n&&(r(34,E=k()),de())}if(1&e.$$.dirty[0]|32&e.$$.dirty[1]&&null!=T&&_()>T){let e=0;g.forEach((t=>{$.has(t)&&(e++,e>T&&O(t))}))}if(4&e.$$.dirty[0]&&r(2,C=Ie('"sortable" attribute',C)||!1),256&e.$$.dirty[0]&&Ne('"onlyFrom" CSS selector list',V),512&e.$$.dirty[0]&&Ne('"neverFrom" CSS selector list',X),32768&e.$$.dirty[1]&&Ye('"onSortRequest" callback',Y),65536&e.$$.dirty[1]&&Ye('"onSort" callback',q),1024&e.$$.dirty[0]&&Ce("panning sensor width",z),2048&e.$$.dirty[0]&&Ce("panning sensor height",B),4096&e.$$.dirty[0]&&Ce("panning speed",K),131072&e.$$.dirty[1]&&oe("list of allowed operations",G),262144&e.$$.dirty[1]&&Be('"DataToOffer" attribute',J),524288&e.$$.dirty[1]&&Be('"TypesToAccept" attribute',Q),1048576&e.$$.dirty[1]&&Ye('"onOuterDropRequest" callback',U),2097152&e.$$.dirty[1]&&Ye('"onDroppedOutside" callback',ee),4194304&e.$$.dirty[1]&&Ye('"onDropFromOutside" callback',te),8192&e.$$.dirty[0]&&Re('"HoldDelay" attribute',ne,0),16384&e.$$.dirty[0]&&Ye('"onDroppableHold" callback',re),65540&e.$$.dirty[0]|17039360&e.$$.dirty[1]&&(F||(r(16,Z=Object.assign({},J)),"none"in Z&&ve('InvalidArgument: "none" is not a valid data type'),C&&r(16,Z[s]="",Z))),4&e.$$.dirty[0]|17301504&e.$$.dirty[1]&&!F){r(17,R={}),null!=Q&&"none"in Q&&ve('InvalidArgument: "none" is not a valid data type');for(let e in Q)Q.hasOwnProperty(e)&&r(17,R[e]=oe("list of accepted operations for type "+Ue(e),Q[e]),R);C&&r(17,R[s]="copy move",R)}196608&e.$$.dirty[0]|16777216&e.$$.dirty[1]&&(F||(r(20,ae=ie(Z)),r(21,le=ie(R))))},[g,D,C,m,h,y,b,I,V,X,z,B,K,ne,re,p,Z,R,u,W,ae,le,M,function(e,t){let n=t.cloneNode(!0);if(n.style.display="block",n.style.position="absolute",n.style.left=document.body.scrollWidth+100+"px",n.style.width=t.clientWidth+"px",n.style.height=t.clientHeight+"px",W.length>1){let e=document.createElement("div");e.setAttribute("style","display:block; position:absolute; top:-10px; right:-10px; width:20px; height:20px; background:red; color:white; border:none; border-radius:10px; margin:0px; padding:0px 4px 0px 4px; line-height:20px; text-align:center"),e.innerText="+"+(W.length-1),n.appendChild(e)}return document.body.appendChild(n),setTimeout((()=>{document.body.removeChild(n)}),0),n},function(e){return r(55,F=!0),I(e.Item)||S(e.Item),r(19,W=e.ItemList=k()),{x:0,y:0}},function(e,t,n,o,i){r(55,F=!1),delete i.ItemList,r(19,W.length=0,W)},function(e,t,n,r,o,i,a){if(!(g===(i&&i.List)))if(null==ee){let e=a.ItemList,t=ue(e);for(let e=g.length-1;e>=0;e--){p(g[e])in t&&g.splice(e,1)}c("removed-items",e.slice()),de()}else{try{ee(e,t,n,r,o,i,a)}catch(e){console.error('RuntimeError: callback "onDroppedOutside" failed',e)}de()}},se,ce,function(e,t){},function(e,t,n,r,o,i){if(g===(o&&o.List)&&g.indexOf(o.Item)>=0&&o.ItemList.indexOf(i.Item)>=0)return de(),"none";if(g===(o&&o.List)){if(C){let e=o.ItemList;if(null==q){let t=ue(e);for(let e=g.length-1;e>=0;e--){p(g[e])in t&&g.splice(e,1)}let n=g.indexOf(i.Item);n<0&&(n=g.length),g.splice.apply(g,[n,0].concat(e)),c("sorted-items",[e.slice(),n]),de()}else{try{q(i.Item,e.slice())}catch(e){console.error('RuntimeError: callback "onSort" failed',e)}de()}return n}return"none"}if(null==te){let e=o&&o.ItemList;if(!function(e,t,n){if(Oe(e)){for(var r=0,o=e.length;rn)}return!1}(e))return"none";let t=g.indexOf(i.Item);return t<0&&(t=g.length),g.splice.apply(g,[t,0].concat(e)),c("inserted-items",[e.slice(),t]),void de()}{let a;try{a=te(e,t,n,r,o,i)}catch(e){console.error('RuntimeError: callback "onSort" failed',e)}return de(),a}},function(){u.classList.add("transitioning")},function(){u.classList.remove("transitioning")},i,E,v,T,P,S,function(){let e=_(),t=!1;g.forEach((n=>{$.has(n)||(null==T||eM(t,e),(e,t)=>M(t,e),function(e){N[e?"unshift":"push"]((()=>{u=e,r(18,u)}))}]}return class extends class{$destroy(){!function(e,t){const n=e.$$;null!==n.fragment&&(i(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}(this,1),this.$destroy=e}$on(e,t){const n=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return n.push(t),()=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}{constructor(e){super(),fe(this,e,Kt,zt,l,{class:3,style:4,List:0,Key:35,AttachmentRegion:5,Placeholder:6,withTransitions:1,SelectionLimit:36,SelectionList:34,select:37,selectOnly:38,selectAll:39,selectRange:40,deselect:41,deselectAll:42,toggleSelectionOf:43,selectedItems:44,SelectionCount:45,isSelected:7,sortable:2,onlyFrom:8,neverFrom:9,onSortRequest:46,onSort:47,PanSensorWidth:10,PanSensorHeight:11,PanSpeed:12,Operations:48,DataToOffer:49,TypesToAccept:50,onOuterDropRequest:51,onDroppedOutside:52,onDropFromOutside:53,HoldDelay:13,onDroppableHold:14},[-1,-1,-1])}get class(){return this.$$.ctx[3]}set class(e){this.$set({class:e}),J()}get style(){return this.$$.ctx[4]}set style(e){this.$set({style:e}),J()}get List(){return this.$$.ctx[0]}set List(e){this.$set({List:e}),J()}get Key(){return this.$$.ctx[35]}set Key(e){this.$set({Key:e}),J()}get AttachmentRegion(){return this.$$.ctx[5]}set AttachmentRegion(e){this.$set({AttachmentRegion:e}),J()}get Placeholder(){return this.$$.ctx[6]}set Placeholder(e){this.$set({Placeholder:e}),J()}get withTransitions(){return this.$$.ctx[1]}set withTransitions(e){this.$set({withTransitions:e}),J()}get SelectionLimit(){return this.$$.ctx[36]}set SelectionLimit(e){this.$set({SelectionLimit:e}),J()}get SelectionList(){return this.$$.ctx[34]}set SelectionList(e){this.$set({SelectionList:e}),J()}get select(){return this.$$.ctx[37]}get selectOnly(){return this.$$.ctx[38]}get selectAll(){return this.$$.ctx[39]}get selectRange(){return this.$$.ctx[40]}get deselect(){return this.$$.ctx[41]}get deselectAll(){return this.$$.ctx[42]}get toggleSelectionOf(){return this.$$.ctx[43]}get selectedItems(){return this.$$.ctx[44]}get SelectionCount(){return this.$$.ctx[45]}get isSelected(){return this.$$.ctx[7]}get sortable(){return this.$$.ctx[2]}set sortable(e){this.$set({sortable:e}),J()}get onlyFrom(){return this.$$.ctx[8]}set onlyFrom(e){this.$set({onlyFrom:e}),J()}get neverFrom(){return this.$$.ctx[9]}set neverFrom(e){this.$set({neverFrom:e}),J()}get onSortRequest(){return this.$$.ctx[46]}set onSortRequest(e){this.$set({onSortRequest:e}),J()}get onSort(){return this.$$.ctx[47]}set onSort(e){this.$set({onSort:e}),J()}get PanSensorWidth(){return this.$$.ctx[10]}set PanSensorWidth(e){this.$set({PanSensorWidth:e}),J()}get PanSensorHeight(){return this.$$.ctx[11]}set PanSensorHeight(e){this.$set({PanSensorHeight:e}),J()}get PanSpeed(){return this.$$.ctx[12]}set PanSpeed(e){this.$set({PanSpeed:e}),J()}get Operations(){return this.$$.ctx[48]}set Operations(e){this.$set({Operations:e}),J()}get DataToOffer(){return this.$$.ctx[49]}set DataToOffer(e){this.$set({DataToOffer:e}),J()}get TypesToAccept(){return this.$$.ctx[50]}set TypesToAccept(e){this.$set({TypesToAccept:e}),J()}get onOuterDropRequest(){return this.$$.ctx[51]}set onOuterDropRequest(e){this.$set({onOuterDropRequest:e}),J()}get onDroppedOutside(){return this.$$.ctx[52]}set onDroppedOutside(e){this.$set({onDroppedOutside:e}),J()}get onDropFromOutside(){return this.$$.ctx[53]}set onDropFromOutside(e){this.$set({onDropFromOutside:e}),J()}get HoldDelay(){return this.$$.ctx[13]}set HoldDelay(e){this.$set({HoldDelay:e}),J()}get onDroppableHold(){return this.$$.ctx[14]}set onDroppableHold(e){this.$set({onDroppableHold:e}),J()}}})); 2 | //# sourceMappingURL=svelte-sortable-flat-list-view.bundled.js.map 3 | --------------------------------------------------------------------------------