@bagelink/vue 0.0.825 → 0.0.829

package/dist/style.css

@@ -1188,10 +1188,10 @@ p {
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-94b45d29] {
+.selectinput[data-v-e3164caf] {
 	width: 100%;
 }
-.selectinput-option[data-v-94b45d29] {
+.selectinput-option[data-v-e3164caf] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1203,23 +1203,23 @@ p {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-94b45d29]{
+.selectinput-option .bgl_icon-font[data-v-e3164caf]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-94b45d29] {
+.selectinput-options.multiselect .selectinput-option[data-v-e3164caf] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-94b45d29] {
+.selectinput-options[data-v-e3164caf] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-94b45d29]:hover {
+.selectinput-option[data-v-e3164caf]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-94b45d29] {
+.isEmpty p[data-v-e3164caf] {
 	opacity: 0.3;
 }
-.selected[data-v-94b45d29]{
+.selected[data-v-e3164caf]{
 	/* background: var(--bgl-primary-tint); */
 	background: var(--bgl-selected);
 }
@@ -1814,25 +1814,25 @@ p {
   transform: translateX(-20px);
 }
 
-.skeleton-wrap[data-v-34172009] {
+.skeleton-wrap[data-v-9a44f23a] {
 	margin-bottom: var(--skeleton-margin);
 }
-.skeleton[data-v-34172009] {
+.skeleton[data-v-9a44f23a] {
 	background-color: var(--skeleton-bg);
 	border-radius: var(--bg-card-radius);
 	margin-bottom: 0.25em;
     position: relative;
     overflow: hidden;
 }
-.skeleton[data-v-34172009]::before {
+.skeleton[data-v-9a44f23a]::before {
     content: "";
     background: linear-gradient(90deg, transparent 20%, var(--skeleton-pulse) 50%, transparent 80%);
-    animation: loadingAnimation-34172009 1s ease-in-out infinite;
+    animation: loadingAnimation-9a44f23a 1s ease-in-out infinite;
     position: absolute;
     inset: 0px;
     transform: translateX(-100%);
 }
-@keyframes loadingAnimation-34172009 {
+@keyframes loadingAnimation-9a44f23a {
 to {
         transform: translateX(100%);
 }
@@ -3174,25 +3174,25 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 }
 
-.bgl_pill-btn[data-v-40a0a2e2]{
+.bgl_pill-btn[data-v-4c9e6928]{
 	color: var(--pill-btn-color);
 	background: var(--pill-btn-bg);
 	width: calc(var(--pill-height) / 1.25)!important;
 	height: calc(var(--pill-height) / 1.25)!important;
 }
-.loading[data-v-40a0a2e2] {
+.loading[data-v-4c9e6928] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-40a0a2e2 1s linear infinite;
+  animation: spin-4c9e6928 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-.bgl_flatPill .loading[data-v-40a0a2e2] {
+.bgl_flatPill .loading[data-v-4c9e6928] {
 	border-bottom: 2px solid var(--bgl-text-color);
 }
-@keyframes spin-40a0a2e2 {
+@keyframes spin-4c9e6928 {
 0% {
     transform: rotate(0deg);
 }
@@ -3200,11 +3200,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
     transform: rotate(360deg);
 }
 }
-.bgl_pill[data-v-40a0a2e2] {
+.bgl_pill[data-v-4c9e6928] {
   padding-inline: 0.25rem;
   transition: var(--bgl-transition);
-  background-color: var(--64b28dae);
-  color: var(--e70b1a78);
+  background-color: var(--559533ce);
+  color: var(--4621e5ae);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
@@ -3212,26 +3212,26 @@ svg.leaflet-image-layer.leaflet-interactive path {
   vertical-align: middle;
   margin-bottom: 0.25rem;
 }
-.bgl_pill[disabled="true"][data-v-40a0a2e2] {
+.bgl_pill[disabled="true"][data-v-4c9e6928] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_pill-flex[data-v-40a0a2e2] {
+.bgl_pill-flex[data-v-4c9e6928] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_pill.bgl_flatPill[data-v-40a0a2e2] {
+.bgl_pill.bgl_flatPill[data-v-4c9e6928] {
   background: transparent;
 }
-.bgl_pill.round[data-v-40a0a2e2] {
+.bgl_pill.round[data-v-4c9e6928] {
   border-radius: 1000px;
 }
-.bgl_pill-border[data-v-40a0a2e2] {
-  outline: 1px solid var(--64b28dae);
-  color: var(--64b28dae);
+.bgl_pill-border[data-v-4c9e6928] {
+  outline: 1px solid var(--559533ce);
+  color: var(--559533ce);
   background: transparent;
 }
 

package/dist/utils/BagelFormUtils.d.ts

@@ -16,6 +16,7 @@ interface TextInputOptions extends InputOptions {
 interface SlctInputOptions extends InputOptions {
     searchable?: boolean;
     multiselect?: boolean;
+    onSearch?: (search: string) => any;
 }
 interface NumFieldOptions extends InputOptions {
     max?: number;
@@ -69,21 +70,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
             dirty: (...args: any[]) => void;
-        }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
-            label?: string;
-            id?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: {
-                [key: string]: any;
-            };
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
+        }, import('vue').PublicProps, {
             modelValue: {
                 [key: string]: any;
             };
@@ -198,21 +185,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
             dirty: (...args: any[]) => void;
-        }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
-            label?: string;
-            id?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: {
-                [key: string]: any;
-            };
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
+        }, import('vue').PublicProps, {
             modelValue: {
                 [key: string]: any;
             };

package/dist/utils/BagelFormUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}

package/dist/utils/objects.d.ts

@@ -1,4 +1,5 @@
 import { BagelField } from '..';
+
 export declare function getPropByPath(obj: Record<string, any>, propPath?: string, bagelField?: BagelField): {};
 export declare function setPropByPath(obj: Record<string, any>, path?: string, value?: any): void;
 //# sourceMappingURL=objects.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.825",
+  "version": "0.0.829",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@types/leaflet": "^1.9.14",
     "@types/signature_pad": "^2.3.6",
-    "@vue-macros/reactivity-transform": "^1.1.2",
+    "@vue-macros/reactivity-transform": "^1.1.3",
     "vue": "^3.5.12"
   },
   "peerDependencies": {
@@ -115,7 +115,7 @@
     "@tiptap/starter-kit": "^2.9.1",
     "@tiptap/vue-3": "^2.9.1",
     "@vuepic/vue-datepicker": "^8.8.1",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/core": "^11.2.0",
     "axios": "^1.7.7",
     "floating-vue": "^5.2.2",
     "libphonenumber-js": "1.11.12",

package/src/components/Pill.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 import { Btn, MaterialIcon } from '@bagelink/vue'
 import { useSlots } from 'vue'
-import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 
 interface BtnProp {
 	icon: MaterialIcons
@@ -12,7 +12,7 @@ interface BtnProp {
 const props = defineProps<{
 	disabled?: boolean
 	icon?: MaterialIcons
-	iconEnd: MaterialIcons
+	iconEnd?: MaterialIcons
 	color?: ThemeType
 	theme?: ThemeType
 	flat?: boolean
@@ -21,8 +21,8 @@ const props = defineProps<{
 	loading?: boolean
 	value?: string
 	round?: boolean
-	btn: BtnProp
-	btnEnd: BtnProp
+	btn?: BtnProp
+	btnEnd?: BtnProp
 }>()
 
 const slots = useSlots()

package/src/components/form/inputs/SelectInput.vue

@@ -2,6 +2,7 @@
 import {
 	Btn,
 	Card,
+	Skeleton,
 	Dropdown,
 	Icon,
 	type MaterialIcons,
@@ -26,9 +27,10 @@ const props = defineProps<{
 	defaultValue?: Option
 	clearable?: boolean
 	searchPlaceholder?: string
+	onSearch?: (search: string) => Promise<Option[]>
 }>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue']) // Add 'search' event
 
 const searchPlaceholder = $computed(() => props.searchPlaceholder || 'Search')
 
@@ -60,17 +62,35 @@ const selectedLabel = $computed((): string => {
 	return selectedItems.map(item => getLabel(item)).join(', ')
 })
 
-const filteredOptions = $computed(() =>	props.options.filter((option) => {
-	const searchTerm = search
-		.split(/\s+/)
-		.filter(Boolean)
-		.map(t => new RegExp(t.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
-	return (
-		Boolean(option)
-		&& (searchTerm.every(s => getLabel(option).match(s))
+let serverOptions: Option[] = $ref([])
+let isSearching = $ref(false)
+
+async function runServerSearch() {
+	if (props.onSearch !== undefined) {
+		isSearching = true
+		serverOptions = await props.onSearch(search)
+		isSearching = false
+	}
+}
+
+const filteredOptions = $computed(() => {
+	if (props.onSearch !== undefined) {
+		if (isSearching) return []
+		if (search.trim().length) return serverOptions
+		return props.options
+	}
+	return props.options.filter((option) => {
+		const searchTerm = search
+			.split(/\s+/)
+			.filter(Boolean)
+			.map(t => new RegExp(t.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
+		return (
+			Boolean(option)
+			&& (searchTerm.every(s => getLabel(option).match(s))
+			)
 		)
-	)
-}))
+	})
+})
 
 const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
 
@@ -87,7 +107,7 @@ function updateOpen(visible: boolean) {
 		if (props.searchable && !props.multiselect && selectedItemCount) search = selectedLabel as string
 		setTimeout(
 			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
-			350,
+			100,
 		)
 	}
 }
@@ -176,6 +196,7 @@ watch(
 )
 
 onMounted(() => {
+	console.log('mounted')
 	if (props.defaultValue !== undefined) {
 		const defaultOption = props.options.find(
 			o => getValue(o) === getValue(props.defaultValue),
@@ -193,6 +214,7 @@ onMounted(() => {
 		ref="dropdown"
 		placement="bottom-start"
 		class="bagel-input selectinput"
+		noAutoFocus
 		@hide="updateOpen(false)"
 	>
 		<template #trigger>
@@ -207,6 +229,7 @@ onMounted(() => {
 						dense
 						:placeholder="searchPlaceholder"
 						icon="search"
+						@debounce="runServerSearch"
 						@input="selected = false"
 					/>
 					<button
@@ -249,6 +272,7 @@ onMounted(() => {
 				</div>
 			</label>
 		</template>
+		<Skeleton v-if="isSearching" :count="3" width="230px" height="30px" class="mx-1 my-05" />
 		<Card
 			class="p-05"
 			:style="{ width: fullWidth ? '100%' : 'auto' }"

package/src/components/layout/Skeleton.vue

@@ -4,13 +4,15 @@ const {
 	height = '50px',
 	width = 'auto',
 	borderRadius = 'var(--skeleton-radius)',
-	round = false
+	round = false,
+	class: className = '',
 } = defineProps<{
-	count?: number
+	count?: number | string
 	height?: string
 	width?: string
 	round?: boolean
 	borderRadius?: string
+	class?: string
 }>()
 import { useSlots } from 'vue'
 
@@ -18,11 +20,11 @@ const slots = useSlots()
 </script>
 
 <template>
-	<template v-for="i in count" :key="i">
-		<div v-if="slots.default" class="skeleton-wrap">
+	<template v-for="i in +count" :key="i">
+		<div v-if="slots.default" class="skeleton-wrap" :class="className">
 			<slot />
 		</div>
-		<div v-else class="skeleton" :style="{ height, width, borderRadius }" :class="{ round }" />
+		<div v-else class="skeleton" :style="{ height, width, borderRadius }" :class="{ round, [className as string]: true }" />
 	</template>
 </template>
 

package/src/utils/BagelFormUtils.ts

@@ -21,6 +21,7 @@ interface TextInputOptions extends InputOptions {
 interface SlctInputOptions extends InputOptions {
 	searchable?: boolean
 	multiselect?: boolean
+	onSearch?: (search: string) => any
 }
 
 interface NumFieldOptions extends InputOptions {
@@ -80,6 +81,7 @@ export function slctField(
 	label?: string,
 	options?: Option[] | (() => Option[]),
 	config?: SlctInputOptions,
+
 ): Field {
 	return {
 		$el: 'select',
@@ -94,6 +96,7 @@ export function slctField(
 			disabled: config?.disabled,
 			searchable: config?.searchable,
 			multiselect: config?.multiselect,
+			onSearch: config?.onSearch,
 		},
 	}
 }

package/dist/components/AddressSaerch.vue.d.ts

@@ -1,7 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    addressSelected: (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
-    onAddressSelected?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;
-//# sourceMappingURL=AddressSaerch.vue.d.ts.map

package/dist/components/AddressSaerch.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AddressSaerch.vue.d.ts","sourceRoot":"","sources":["../../src/components/AddressSaerch.vue"],"names":[],"mappings":";;;;;AAwIA,wBAMG"}

package/dist/components/Popover.vue.d.ts

@@ -1,10 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    trigger?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=Popover.vue.d.ts.map

package/dist/components/Popover.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Popover.vue.d.ts","sourceRoot":"","sources":["../../src/components/Popover.vue"],"names":[],"mappings":"AAoBA;AAEA,OAAO,6BAA6B,CAAC;;;;AAmHrC,wBAAwG;AACxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/components/sortable/Animation.d.ts

@@ -1,43 +0,0 @@
-interface Rect {
-    top: number;
-    left: number;
-    bottom: number;
-    right: number;
-    width: number;
-    height: number;
-}
-interface AnimationOptions {
-    animation: number;
-    easing?: string;
-    [key: string]: any;
-}
-interface AnimatedHTMLElement extends HTMLElement {
-    thisAnimationDuration?: number | null;
-    fromRect?: Rect | null;
-    prevFromRect?: Rect | null;
-    prevToRect?: Rect | null;
-    toRect?: Rect | null;
-    animationResetTimer?: number;
-    animationTime?: number;
-    animated?: number | boolean;
-    animatingX?: boolean;
-    animatingY?: boolean;
-}
-interface AnimationState {
-    target: AnimatedHTMLElement;
-    rect: Rect;
-}
-interface AnimationManagerContext {
-    options: AnimationOptions;
-    el: HTMLElement;
-    forRepaintDummy?: any;
-}
-export default function AnimationStateManager(): {
-    captureAnimationState(this: AnimationManagerContext): void;
-    addAnimationState(this: AnimationManagerContext, state: AnimationState): void;
-    removeAnimationState(this: AnimationManagerContext, target: AnimatedHTMLElement): void;
-    animateAll(this: AnimationManagerContext, callback?: () => void): void;
-    animate(this: AnimationManagerContext, target: AnimatedHTMLElement, currentRect: Rect, toRect: Rect, duration: number): void;
-};
-export {};
-//# sourceMappingURL=Animation.d.ts.map

package/dist/components/sortable/Animation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Animation.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/Animation.ts"],"names":[],"mappings":"AAGA,UAAU,IAAI;IACb,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACd;AAED,UAAU,gBAAgB;IACzB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAClB;AAED,UAAU,mBAAoB,SAAQ,WAAW;IAChD,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACxB,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,UAAU,cAAc;IACvB,MAAM,EAAE,mBAAmB,CAAA;IAC3B,IAAI,EAAE,IAAI,CAAA;CACV;AAED,UAAU,uBAAuB;IAChC,OAAO,EAAE,gBAAgB,CAAA;IACzB,EAAE,EAAE,WAAW,CAAA;IACf,eAAe,CAAC,EAAE,GAAG,CAAA;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB;gCAKf,uBAAuB;4BA2B3B,uBAAuB,SAAS,cAAc;+BAI3C,uBAAuB,UAAU,mBAAmB;qBAO9D,uBAAuB,aAAa,MAAM,IAAI;kBAsFxD,uBAAuB,UACrB,mBAAmB,eACd,IAAI,UACT,IAAI,YACF,MAAM;EAwClB"}

package/dist/components/sortable/BrowserInfo.d.ts

@@ -1,7 +0,0 @@
-export declare const IE11OrLess: boolean;
-export declare const Edge: boolean;
-export declare const FireFox: boolean;
-export declare const Safari: boolean;
-export declare const IOS: boolean;
-export declare const ChromeForAndroid: boolean;
-//# sourceMappingURL=BrowserInfo.d.ts.map

package/dist/components/sortable/BrowserInfo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BrowserInfo.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/BrowserInfo.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,EAAE,OAAgI,CAAA;AACzJ,eAAO,MAAM,IAAI,EAAE,OAA0C,CAAA;AAC7D,eAAO,MAAM,OAAO,EAAE,OAA8C,CAAA;AACpE,eAAO,MAAM,MAAM,EAAE,OAAoE,CAAA;AACzF,eAAO,MAAM,GAAG,EAAE,OAAuD,CAAA;AACzE,eAAO,MAAM,gBAAgB,EAAE,OAAqF,CAAA"}

package/dist/components/sortable/EventDispatcher.d.ts

@@ -1,13 +0,0 @@
-export interface DispatchEventParams {
-    putSortable: any;
-    cloneEl: HTMLElement | null;
-    targetEl: HTMLElement | null;
-    rootEl: HTMLElement | null;
-    oldIndex: number | null;
-    oldDraggableIndex: number | null;
-    newIndex: number | null;
-    newDraggableIndex: number | null;
-    [key: string]: any;
-}
-export default function dispatchEvent(detail: DispatchEventParams): void;
-//# sourceMappingURL=EventDispatcher.d.ts.map

package/dist/components/sortable/EventDispatcher.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EventDispatcher.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/EventDispatcher.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IACnC,WAAW,EAAE,GAAG,CAAA;IAChB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,MAAM,EAAE,mBAAmB,QAGhE"}

package/dist/components/sortable/PluginManager.d.ts

@@ -1,27 +0,0 @@
-interface Plugin {
-    pluginName: string;
-    initializeByDefault?: boolean;
-    optionListeners?: {
-        [key: string]: (value: any) => any;
-    };
-    eventProperties?: (name: string) => any;
-    new (sortable: any, el: HTMLElement, options: any): any;
-}
-interface Sortable {
-    options: any;
-    [key: string]: any;
-}
-declare const _default: {
-    eventCanceled: boolean;
-    mount(plugin: Plugin): void;
-    pluginEvent(eventName: string, sortable: Sortable, evt: any): void;
-    initializePlugins(sortable: Sortable, el: HTMLElement, defaults: {
-        [key: string]: any;
-    }, options: any): void;
-    getEventProperties(name: string, sortable: Sortable): {
-        [key: string]: any;
-    };
-    modifyOption(sortable: Sortable, name: string, value: any): any;
-};
-export default _default;
-//# sourceMappingURL=PluginManager.d.ts.map

package/dist/components/sortable/PluginManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PluginManager.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/PluginManager.ts"],"names":[],"mappings":"AAAA,UAAU,MAAM;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;KAAE,CAAA;IACxD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAA;IACvC,KAAK,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,GAAG,GAAG,CAAA;CACvD;AAED,UAAU,QAAQ;IACjB,OAAO,EAAE,GAAG,CAAA;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAClB;;;kBAUc,MAAM;2BAeG,MAAM,YAAY,QAAQ,OAAO,GAAG;gCAwBhD,QAAQ,MACd,WAAW,YACL;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,WACvB,GAAG;6BAuBY,MAAM,YAAY,QAAQ;;;2BAY5B,QAAQ,QAAQ,MAAM,SAAS,GAAG;;AA/E1D,wBAmGC"}