@milaboratories/uikit 2.15.36 → 2.15.38

package/dist/components/PlElementList/PlElementListItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"names":[],"mappings":"AA6SA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,OAAO,GAAG,OAAO,EACjD,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAkRO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;cAhRhD,CAAC;eACA,MAAM;wBACG,OAAO;kBACb,OAAO;qBACJ,OAAO;qBACP,OAAO;sBACN,OAAO;oBACT,OAAO;oBACP,OAAO;mBACR,OAAO;oBACN,OAAO;kBACT,OAAO;oBACL,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;sBACtB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;oBAC1B,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;qBACvB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;;;;;;;KAiQoD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;eA7PF,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;gBAChD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;iBAC7C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;;YAQnD,OAAO,QAAQ,UAAU,GAAG,IAAI;YAChC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,KAAK,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACpC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;;EAkPzC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlElementListItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"names":[],"mappings":"AAwTA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,OAAO,GAAG,OAAO,EACjD,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAgSO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;cA9RhD,CAAC;eACA,MAAM;wBACG,OAAO;kBACb,OAAO;qBACJ,OAAO;qBACP,OAAO;sBACN,OAAO;oBACT,OAAO;oBACP,OAAO;mBACR,OAAO;oBACN,OAAO;kBACT,OAAO;oBACL,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;sBACtB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;oBAC1B,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;qBACvB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;;;;;;;KA+QoD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;eA3QF,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;gBAChD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;iBAC7C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;;YAQnD,OAAO,QAAQ,UAAU,GAAG,IAAI;YAChC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,KAAK,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACpC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;;EAgQzC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/PlElementList/PlElementListItem.vue2.js

@@ -34,24 +34,32 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
 	],
 	setup(c, { emit: g }) {
 		let _ = c, v = p(), y = n(() => v.content !== void 0), b = n(() => v.after !== void 0), x = n(() => v.before !== void 0), S = g;
-		return (n, p) => (u(), a("div", { onClick: p[4] ||= (e) => S("click", e) }, [
+		return (n, p) => (u(), a("div", {
+			"data-testid": "pl-element-list-item",
+			onClick: p[4] ||= (e) => S("click", e)
+		}, [
 			x.value ? (u(), a("div", {
 				key: 0,
+				"data-testid": "pl-element-list-item-before",
 				class: l(c.beforeClass)
 			}, [d(n.$slots, "before", {
 				item: _.item,
 				index: _.index
 			})], 2)) : i("", !0),
-			o("div", { class: l([
-				n.$style.root,
-				n.$attrs.class,
-				{
-					[n.$style.active]: _.isActive,
-					[n.$style.pinned]: _.isPinned,
-					[n.$style.opened]: _.isExpanded,
-					[n.$style.disabled]: _.isToggled
-				}
-			]) }, [o("div", {
+			o("div", {
+				"data-testid": "pl-element-list-item-card",
+				class: l([
+					n.$style.root,
+					n.$attrs.class,
+					{
+						[n.$style.active]: _.isActive,
+						[n.$style.pinned]: _.isPinned,
+						[n.$style.opened]: _.isExpanded,
+						[n.$style.disabled]: _.isToggled
+					}
+				])
+			}, [o("div", {
+				"data-testid": "pl-element-list-item-head",
 				class: l([
 					n.$style.head,
 					c.titleClass,
@@ -64,6 +72,7 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
 					class: l(n.$style.headIcons)
 				}, [_.showDragHandle ? (u(), a("div", {
 					key: 0,
+					"data-testid": "pl-element-list-item-drag",
 					class: l([
 						n.$style.action,
 						n.$style.draggable,
@@ -72,16 +81,24 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
 					"data-draggable": _.isDraggable
 				}, [s(f(t), { name: "drag-dots" })], 10, h)) : i("", !0), c.isExpandable ? (u(), r(f(t), {
 					key: 1,
+					"data-testid": "pl-element-list-item-expand",
 					class: l([n.$style.contentChevron, { [n.$style.opened]: _.isExpanded }]),
 					name: "chevron-down"
 				}, null, 8, ["class"])) : i("", !0)], 2)) : i("", !0),
-				o("div", { class: l(n.$style.title) }, [d(n.$slots, "title", {
+				o("div", {
+					"data-testid": "pl-element-list-item-title",
+					class: l(n.$style.title)
+				}, [d(n.$slots, "title", {
 					item: _.item,
 					index: _.index
 				})], 2),
-				o("div", { class: l([n.$style.actions, n.$style.showOnHover]) }, [
+				o("div", {
+					"data-testid": "pl-element-list-item-actions",
+					class: l([n.$style.actions, n.$style.showOnHover])
+				}, [
 					_.isToggable ? (u(), a("div", {
 						key: 0,
+						"data-testid": "pl-element-list-item-toggle",
 						class: l([
 							n.$style.action,
 							n.$style.clickable,
@@ -94,6 +111,7 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
 					}, null, 8, ["name"])], 2)) : i("", !0),
 					_.isPinnable ? (u(), a("div", {
 						key: 1,
+						"data-testid": "pl-element-list-item-pin",
 						class: l([
 							n.$style.action,
 							n.$style.clickable,
@@ -109,12 +127,14 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
 					})], 2)) : i("", !0),
 					_.isRemovable ? (u(), a("div", {
 						key: 2,
+						"data-testid": "pl-element-list-item-remove",
 						class: l([n.$style.action, n.$style.clickable]),
 						onClick: p[2] ||= m((e) => S("remove", _.item, _.index), ["stop"])
 					}, [s(f(t), { name: "close" })], 2)) : i("", !0)
 				], 2)
 			], 2), y.value && _.isExpanded ? (u(), a("div", {
 				key: 0,
+				"data-testid": "pl-element-list-item-content",
 				class: l([
 					n.$style.body,
 					c.contentClass,
@@ -126,6 +146,7 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
 			})], 2)) : i("", !0)], 2),
 			b.value ? (u(), a("div", {
 				key: 1,
+				"data-testid": "pl-element-list-item-after",
 				class: l(c.afterClass)
 			}, [d(n.$slots, "after", {
 				item: _.item,

package/dist/components/PlElementList/PlElementListItem.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs"],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n  (e: \"click\", item: MouseEvent): void;\n  (e: \"expand\", item: T, index: number): void;\n  (e: \"toggle\", item: T, index: number): void;\n  (e: \"pin\", item: T, index: number): void;\n  (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div @click=\"(event) => emit('click', event)\">\n    <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      :class=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\n        ]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div v-if=\"props.showDragHandle || isExpandable\" :class=\"$style.headIcons\">\n          <div\n            v-if=\"props.showDragHandle\"\n            :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n            :data-draggable=\"props.isDraggable\"\n          >\n            <PlIcon16 name=\"drag-dots\" />\n          </div>\n          <PlIcon16\n            v-if=\"isExpandable\"\n            :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n            name=\"chevron-down\"\n          />\n        </div>\n\n        <div :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div :class=\"[$style.actions, $style.showOnHover]\">\n          <div\n            v-if=\"props.isToggable\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            :class=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\n            ]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active);\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.headIcons {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  height: 24px;\n  flex: 0 0 auto;\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs"],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n  (e: \"click\", item: MouseEvent): void;\n  (e: \"expand\", item: T, index: number): void;\n  (e: \"toggle\", item: T, index: number): void;\n  (e: \"pin\", item: T, index: number): void;\n  (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div data-testid=\"pl-element-list-item\" @click=\"(event) => emit('click', event)\">\n    <div v-if=\"hasBeforeSlot\" data-testid=\"pl-element-list-item-before\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      data-testid=\"pl-element-list-item-card\"\n      :class=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        data-testid=\"pl-element-list-item-head\"\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\n        ]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div v-if=\"props.showDragHandle || isExpandable\" :class=\"$style.headIcons\">\n          <div\n            v-if=\"props.showDragHandle\"\n            data-testid=\"pl-element-list-item-drag\"\n            :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n            :data-draggable=\"props.isDraggable\"\n          >\n            <PlIcon16 name=\"drag-dots\" />\n          </div>\n          <PlIcon16\n            v-if=\"isExpandable\"\n            data-testid=\"pl-element-list-item-expand\"\n            :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n            name=\"chevron-down\"\n          />\n        </div>\n\n        <div data-testid=\"pl-element-list-item-title\" :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div\n          data-testid=\"pl-element-list-item-actions\"\n          :class=\"[$style.actions, $style.showOnHover]\"\n        >\n          <div\n            v-if=\"props.isToggable\"\n            data-testid=\"pl-element-list-item-toggle\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            data-testid=\"pl-element-list-item-pin\"\n            :class=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\n            ]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            data-testid=\"pl-element-list-item-remove\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        data-testid=\"pl-element-list-item-content\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" data-testid=\"pl-element-list-item-after\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active);\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.headIcons {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  height: 24px;\n  flex: 0 0 auto;\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/PlErrorAlert/PlErrorAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlErrorAlert.js","names":[],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlErrorAlert.js","names":[],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div data-testid=\"pl-error-alert\" :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard data-testid=\"pl-error-alert-copy\" :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div data-testid=\"pl-error-alert-title\" :class=\"$style.title\">\n        <PlMaskIcon16 data-testid=\"pl-error-alert-icon\" :class=\"$style.titleIcon\" name=\"warning\" />\n        <div data-testid=\"pl-error-alert-title-text\" :class=\"$style.titleText\">\n          {{ props.title }}\n        </div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div data-testid=\"pl-error-alert-message\" :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlErrorAlert/PlErrorAlert.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlErrorAlert.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlErrorAlert.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div data-testid=\"pl-error-alert\" :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard data-testid=\"pl-error-alert-copy\" :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div data-testid=\"pl-error-alert-title\" :class=\"$style.title\">\n        <PlMaskIcon16 data-testid=\"pl-error-alert-icon\" :class=\"$style.titleIcon\" name=\"warning\" />\n        <div data-testid=\"pl-error-alert-title-text\" :class=\"$style.titleText\">\n          {{ props.title }}\n        </div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div data-testid=\"pl-error-alert-message\" :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlErrorAlert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"names":[],"mappings":"wBAgHqB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;YAEN,MAAM;cACJ,MAAM;gBACJ,MAAM;kBACJ,MAAM;;YAHZ,MAAM;cACJ,MAAM;gBACJ,MAAM;kBACJ,MAAM;;WAHZ,MAAM;aACJ,MAAM;eACJ,MAAM;iBACJ,MAAM;;YA2GZ,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC5B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAUzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlErrorAlert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"names":[],"mappings":"wBAkHqB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;YAEN,MAAM;cACJ,MAAM;gBACJ,MAAM;kBACJ,MAAM;;YAHZ,MAAM;cACJ,MAAM;gBACJ,MAAM;kBACJ,MAAM;;WAHZ,MAAM;aACJ,MAAM;eACJ,MAAM;iBACJ,MAAM;;YAmHZ,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC5B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAUzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlErrorAlert/PlErrorAlert.vue2.js

@@ -18,18 +18,30 @@ var f = /* @__PURE__ */ a({
 			typeof e == "string" && navigator.clipboard.writeText(e);
 		}
 		return (a, m) => (c(), n("div", {
+			"data-testid": "pl-error-alert",
 			style: s({ maxHeight: f.maxHeight }),
 			class: o(a.$style.root)
 		}, [
 			i(d(t), {
+				"data-testid": "pl-error-alert-copy",
 				class: o(a.$style.copy),
 				onCopy: p
 			}, null, 8, ["class"]),
-			l(a.$slots, "title", {}, () => [r("div", { class: o(a.$style.title) }, [i(d(e), {
+			l(a.$slots, "title", {}, () => [r("div", {
+				"data-testid": "pl-error-alert-title",
+				class: o(a.$style.title)
+			}, [i(d(e), {
+				"data-testid": "pl-error-alert-icon",
 				class: o(a.$style.titleIcon),
 				name: "warning"
-			}, null, 8, ["class"]), r("div", { class: o(a.$style.titleText) }, u(f.title), 3)], 2)]),
-			l(a.$slots, "message", {}, () => [r("div", { class: o(a.$style.message) }, u(f.message), 3)])
+			}, null, 8, ["class"]), r("div", {
+				"data-testid": "pl-error-alert-title-text",
+				class: o(a.$style.titleText)
+			}, u(f.title), 3)], 2)]),
+			l(a.$slots, "message", {}, () => [r("div", {
+				"data-testid": "pl-error-alert-message",
+				class: o(a.$style.message)
+			}, u(f.message), 3)])
 		], 6));
 	}
 });

package/dist/components/PlErrorAlert/PlErrorAlert.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlErrorAlert.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":";;;;;;CAEE,MAAM;;;;;;;;EAQR,IAAM,IAAQ;EAed,SAAS,IAAS;GAChB,IAAM,IAAQ,EAAM,eAAe,EAAM;AACzC,GAAI,OAAO,KAAU,YACnB,UAAU,UAAU,UAAU,EAAM;;yBAMtC,EAaM,OAAA;GAbA,OAAK,EAAA,EAAA,WAAe,EAAM,WAAS,CAAA;GAAK,OAAK,EAAEA,EAAAA,OAAO,KAAI;;GAC9D,EAAmD,EAAA,EAAA,EAAA;IAArC,OAAK,EAAEA,EAAAA,OAAO,KAAI;IAAS;;GACzC,EAKO,EAAA,QAAA,SAAA,EAAA,QAAA,CAJL,EAGM,OAAA,EAHA,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAAyD,EAAA,EAAA,EAAA;IAA1C,OAAK,EAAEA,EAAAA,OAAO,UAAS;IAAE,MAAK;2BAC7C,EAAsD,OAAA,EAAhD,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA,EAAK,EAAM,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;GAGjD,EAIO,EAAA,QAAA,WAAA,EAAA,QAAA,CAHL,EAEM,OAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,QAAO,EAAA,EAAA,EACtB,EAAM,QAAO,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"PlErrorAlert.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div data-testid=\"pl-error-alert\" :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard data-testid=\"pl-error-alert-copy\" :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div data-testid=\"pl-error-alert-title\" :class=\"$style.title\">\n        <PlMaskIcon16 data-testid=\"pl-error-alert-icon\" :class=\"$style.titleIcon\" name=\"warning\" />\n        <div data-testid=\"pl-error-alert-title-text\" :class=\"$style.titleText\">\n          {{ props.title }}\n        </div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div data-testid=\"pl-error-alert-message\" :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":";;;;;;CAEE,MAAM;;;;;;;;EAQR,IAAM,IAAQ;EAed,SAAS,IAAS;GAChB,IAAM,IAAQ,EAAM,eAAe,EAAM;AACzC,GAAI,OAAO,KAAU,YACnB,UAAU,UAAU,UAAU,EAAM;;yBAMtC,EAeM,OAAA;GAfD,eAAY;GAAkB,OAAK,EAAA,EAAA,WAAe,EAAM,WAAS,CAAA;GAAK,OAAK,EAAEA,EAAAA,OAAO,KAAI;;GAC3F,EAAqF,EAAA,EAAA,EAAA;IAAxE,eAAY;IAAuB,OAAK,EAAEA,EAAAA,OAAO,KAAI;IAAS;;GAC3E,EAOO,EAAA,QAAA,SAAA,EAAA,QAAA,CANL,EAKM,OAAA;IALD,eAAY;IAAwB,OAAK,EAAEA,EAAAA,OAAO,MAAK;OAC1D,EAA2F,EAAA,EAAA,EAAA;IAA7E,eAAY;IAAuB,OAAK,EAAEA,EAAAA,OAAO,UAAS;IAAE,MAAK;2BAC/E,EAEM,OAAA;IAFD,eAAY;IAA6B,OAAK,EAAEA,EAAAA,OAAO,UAAS;QAChE,EAAM,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;GAIpB,EAIO,EAAA,QAAA,WAAA,EAAA,QAAA,CAHL,EAEM,OAAA;IAFD,eAAY;IAA0B,OAAK,EAAEA,EAAAA,OAAO,QAAO;QAC3D,EAAM,QAAO,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/PlErrorBoundary/PlErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlErrorBoundary.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined | string => {\n  if (err == null) {\n    return undefined;\n  }\n\n  if (isErrorLike(err)) {\n    return err.stack == null || err.stack.length === 0\n      ? err.message\n      : err.stack.includes(err.message)\n        ? err.stack\n        : err.message + \"\\n\" + err.stack;\n  }\n\n  return tryDo(\n    () => JSON.stringify(err, null, 4),\n    () => err.toString(),\n  );\n};\n\nconst data = ref<null | {\n  title: undefined | string;\n  error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n  data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> | null>(null);\n\nonBeforeUpdate(() => {\n  // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n  // reset the error state.\n  if (data.value !== null && errorAlert.value) {\n    reset();\n  }\n});\n\nonErrorCaptured((err, instance) => {\n  data.value = {\n    title: instance?.$?.type?.name ?? undefined,\n    error: err,\n  };\n  // stop error propagation\n  return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n  <slot />\n  <PlErrorAlert v-if=\"error\" ref=\"errorAlert\" :message=\"message\" :title=\"data?.title\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlErrorBoundary.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined | string => {\n  if (err == null) {\n    return undefined;\n  }\n\n  if (isErrorLike(err)) {\n    return err.stack == null || err.stack.length === 0\n      ? err.message\n      : err.stack.includes(err.message)\n        ? err.stack\n        : err.message + \"\\n\" + err.stack;\n  }\n\n  return tryDo(\n    () => JSON.stringify(err, null, 4),\n    () => err.toString(),\n  );\n};\n\nconst data = ref<null | {\n  title: undefined | string;\n  error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n  data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> | null>(null);\n\nonBeforeUpdate(() => {\n  // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n  // reset the error state.\n  if (data.value !== null && errorAlert.value) {\n    reset();\n  }\n});\n\nonErrorCaptured((err, instance) => {\n  data.value = {\n    title: instance?.$?.type?.name ?? undefined,\n    error: err,\n  };\n  // stop error propagation\n  return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n  <slot />\n  <PlErrorAlert\n    v-if=\"error\"\n    ref=\"errorAlert\"\n    data-testid=\"pl-error-boundary-alert\"\n    :message=\"message\"\n    :title=\"data?.title\"\n  />\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlErrorBoundary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"names":[],"mappings":"AAgGA,iBAAS,KAAK,SAEb;AA8DD,QAAA,IAAI,OAAO,IAA8B,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;0OAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlErrorBoundary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"names":[],"mappings":"AAsGA,iBAAS,KAAK,SAEb;AAgED,QAAA,IAAI,OAAO,IAA8B,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;0OAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js

@@ -25,6 +25,7 @@ var h = /* @__PURE__ */ o({
 			key: 0,
 			ref_key: "errorAlert",
 			ref: x,
+			"data-testid": "pl-error-boundary-alert",
 			message: y.value,
 			title: _.value?.title
 		}, null, 8, ["message", "title"])) : i("", !0)], 64));

package/dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlErrorBoundary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined | string => {\n  if (err == null) {\n    return undefined;\n  }\n\n  if (isErrorLike(err)) {\n    return err.stack == null || err.stack.length === 0\n      ? err.message\n      : err.stack.includes(err.message)\n        ? err.stack\n        : err.message + \"\\n\" + err.stack;\n  }\n\n  return tryDo(\n    () => JSON.stringify(err, null, 4),\n    () => err.toString(),\n  );\n};\n\nconst data = ref<null | {\n  title: undefined | string;\n  error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n  data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> | null>(null);\n\nonBeforeUpdate(() => {\n  // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n  // reset the error state.\n  if (data.value !== null && errorAlert.value) {\n    reset();\n  }\n});\n\nonErrorCaptured((err, instance) => {\n  data.value = {\n    title: instance?.$?.type?.name ?? undefined,\n    error: err,\n  };\n  // stop error propagation\n  return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n  <slot />\n  <PlErrorAlert v-if=\"error\" ref=\"errorAlert\" :message=\"message\" :title=\"data?.title\" />\n</template>\n"],"mappings":";;;;;;;;EAKA,IAAM,KAAkB,MAAqC;AACvD,YAAO,KAYX,QARI,EAAY,EAAI,GACX,EAAI,SAAS,QAAQ,EAAI,MAAM,WAAW,IAC7C,EAAI,UACJ,EAAI,MAAM,SAAS,EAAI,QAAO,GAC5B,EAAI,QACJ,EAAI,UAAU,OAAO,EAAI,QAG1B,QACC,KAAK,UAAU,GAAK,MAAM,EAAE,QAC5B,EAAI,UAAU,CACrB;KAGG,IAAO,EAGV,KAAK,EAEF,IAAQ,QAAe,EAAK,OAAO,MAAM,EACzC,IAAU,QAAe,EAAe,EAAM,MAAM,CAAC;EAE3D,SAAS,IAAQ;AACf,KAAK,QAAQ;;EAGf,IAAM,IAAa,EAA8C,KAAK;SAEtE,QAAqB;AAGnB,GAAI,EAAK,UAAU,QAAQ,EAAW,SACpC,GAAO;IAET,EAEF,GAAiB,GAAK,OACpB,EAAK,QAAQ;GACX,OAAO,GAAU,GAAG,MAAM,QAAQ,KAAA;GAClC,OAAO;GACR,EAEM,IACP,EAEF,EAAa;GAAE;GAAO;GAAO,CAAC,8BAI5B,EAAQ,EAAA,QAAA,UAAA,EACY,EAAA,SAAA,GAAA,EAApB,EAAsF,EAAA,EAAA,EAAA;;YAAvD;GAAJ,KAAI;GAAc,SAAS,EAAA;GAAU,OAAO,EAAA,OAAM"}
+{"version":3,"file":"PlErrorBoundary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined | string => {\n  if (err == null) {\n    return undefined;\n  }\n\n  if (isErrorLike(err)) {\n    return err.stack == null || err.stack.length === 0\n      ? err.message\n      : err.stack.includes(err.message)\n        ? err.stack\n        : err.message + \"\\n\" + err.stack;\n  }\n\n  return tryDo(\n    () => JSON.stringify(err, null, 4),\n    () => err.toString(),\n  );\n};\n\nconst data = ref<null | {\n  title: undefined | string;\n  error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n  data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> | null>(null);\n\nonBeforeUpdate(() => {\n  // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n  // reset the error state.\n  if (data.value !== null && errorAlert.value) {\n    reset();\n  }\n});\n\nonErrorCaptured((err, instance) => {\n  data.value = {\n    title: instance?.$?.type?.name ?? undefined,\n    error: err,\n  };\n  // stop error propagation\n  return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n  <slot />\n  <PlErrorAlert\n    v-if=\"error\"\n    ref=\"errorAlert\"\n    data-testid=\"pl-error-boundary-alert\"\n    :message=\"message\"\n    :title=\"data?.title\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAKA,IAAM,KAAkB,MAAqC;AACvD,YAAO,KAYX,QARI,EAAY,EAAI,GACX,EAAI,SAAS,QAAQ,EAAI,MAAM,WAAW,IAC7C,EAAI,UACJ,EAAI,MAAM,SAAS,EAAI,QAAO,GAC5B,EAAI,QACJ,EAAI,UAAU,OAAO,EAAI,QAG1B,QACC,KAAK,UAAU,GAAK,MAAM,EAAE,QAC5B,EAAI,UAAU,CACrB;KAGG,IAAO,EAGV,KAAK,EAEF,IAAQ,QAAe,EAAK,OAAO,MAAM,EACzC,IAAU,QAAe,EAAe,EAAM,MAAM,CAAC;EAE3D,SAAS,IAAQ;AACf,KAAK,QAAQ;;EAGf,IAAM,IAAa,EAA8C,KAAK;SAEtE,QAAqB;AAGnB,GAAI,EAAK,UAAU,QAAQ,EAAW,SACpC,GAAO;IAET,EAEF,GAAiB,GAAK,OACpB,EAAK,QAAQ;GACX,OAAO,GAAU,GAAG,MAAM,QAAQ,KAAA;GAClC,OAAO;GACR,EAEM,IACP,EAEF,EAAa;GAAE;GAAO;GAAO,CAAC,8BAI5B,EAAQ,EAAA,QAAA,UAAA,EAEA,EAAA,SAAA,GAAA,EADR,EAME,EAAA,EAAA,EAAA;;YAJI;GAAJ,KAAI;GACJ,eAAY;GACX,SAAS,EAAA;GACT,OAAO,EAAA,OAAM"}

package/dist/components/PlFileDialog/Local.js.map

@@ -1 +1 @@
-{"version":3,"file":"Local.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n  importFiles: (value: ImportedFiles) => void;\n  multi?: boolean;\n  extensions?: string[];\n}>();\n\nconst data = reactive({\n  error: undefined as unknown,\n});\n\nconst label = computed(() =>\n  props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n  const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n  if (!fileToImportHandle) {\n    return console.error(\n      \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n    );\n  }\n\n  const extensions = normalizeExtensions(props.extensions);\n\n  const files = await Promise.all(\n    [...(ev.dataTransfer?.files ?? [])]\n      .filter((f) => !!f)\n      .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n      .map((file) => {\n        return fileToImportHandle(file);\n      }),\n  );\n\n  if (files.length) {\n    props.importFiles({\n      files,\n    });\n  }\n};\n\nconst openNativeDialog = async () => {\n  const filters: OpenDialogFilter[] = props.extensions\n    ? [\n        {\n          name: \"All Files\",\n          extensions: [...props.extensions],\n        },\n      ]\n    : [];\n\n  if (props.multi) {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenMultipleFilesDialog({\n        title: \"Select files to import\",\n        filters,\n      })\n      .then(({ files }) => {\n        if (files) {\n          props.importFiles({\n            files,\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  } else {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenSingleFileDialog({\n        title: \"Select file to import\",\n        filters,\n      })\n      .then(({ file }) => {\n        if (file) {\n          props.importFiles({\n            files: [file],\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  }\n};\n</script>\n\n<template>\n  <div :class=\"style.local\" @drop=\"onDrop\" @dragover.prevent @click=\"openNativeDialog\">\n    <PlIcon24 name=\"cloud-upload\" />\n    <span>{{ label }}</span>\n    <span v-if=\"extensions\" :class=\"style.supported\"\n      >Supported formats: {{ extensions.join(\", \") }}</span\n    >\n    <span v-if=\"data.error\" class=\"alert-error\">{{ data.error }}</span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Local.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n  importFiles: (value: ImportedFiles) => void;\n  multi?: boolean;\n  extensions?: string[];\n}>();\n\nconst data = reactive({\n  error: undefined as unknown,\n});\n\nconst label = computed(() =>\n  props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n  const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n  if (!fileToImportHandle) {\n    return console.error(\n      \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n    );\n  }\n\n  const extensions = normalizeExtensions(props.extensions);\n\n  const files = await Promise.all(\n    [...(ev.dataTransfer?.files ?? [])]\n      .filter((f) => !!f)\n      .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n      .map((file) => {\n        return fileToImportHandle(file);\n      }),\n  );\n\n  if (files.length) {\n    props.importFiles({\n      files,\n    });\n  }\n};\n\nconst openNativeDialog = async () => {\n  const filters: OpenDialogFilter[] = props.extensions\n    ? [\n        {\n          name: \"All Files\",\n          extensions: [...props.extensions],\n        },\n      ]\n    : [];\n\n  if (props.multi) {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenMultipleFilesDialog({\n        title: \"Select files to import\",\n        filters,\n      })\n      .then(({ files }) => {\n        if (files) {\n          props.importFiles({\n            files,\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  } else {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenSingleFileDialog({\n        title: \"Select file to import\",\n        filters,\n      })\n      .then(({ file }) => {\n        if (file) {\n          props.importFiles({\n            files: [file],\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  }\n};\n</script>\n\n<template>\n  <div\n    :class=\"style.local\"\n    data-testid=\"pl-file-dialog-local\"\n    @drop=\"onDrop\"\n    @dragover.prevent\n    @click=\"openNativeDialog\"\n  >\n    <PlIcon24 name=\"cloud-upload\" />\n    <span data-testid=\"pl-file-dialog-local-label\">{{ label }}</span>\n    <span v-if=\"extensions\" :class=\"style.supported\" data-testid=\"pl-file-dialog-local-formats\"\n      >Supported formats: {{ extensions.join(\", \") }}</span\n    >\n    <span v-if=\"data.error\" class=\"alert-error\" data-testid=\"pl-file-dialog-local-error\">{{\n      data.error\n    }}</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlFileDialog/Local.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Local.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileDialog/Local.vue"],"names":[],"mappings":"AAyGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB,CAAC;AAyIF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Local.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileDialog/Local.vue"],"names":[],"mappings":"AAiHA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB,CAAC;AA+IF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlFileDialog/Local.vue2.js

@@ -5,10 +5,11 @@ import { normalizeExtensions as n } from "./utils.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, reactive as d, toDisplayString as f, unref as p, withModifiers as m } from "vue";
 import { getRawPlatformaInstance as h } from "@platforma-sdk/model";
 //#region src/components/PlFileDialog/Local.vue?vue&type=script&setup=true&lang.ts
-var g = {
+var g = { "data-testid": "pl-file-dialog-local-label" }, _ = {
 	key: 1,
-	class: "alert-error"
-}, _ = /* @__PURE__ */ c({
+	class: "alert-error",
+	"data-testid": "pl-file-dialog-local-error"
+}, v = /* @__PURE__ */ c({
 	__name: "Local",
 	props: {
 		importFiles: { type: Function },
@@ -16,45 +17,47 @@ var g = {
 		extensions: {}
 	},
 	setup(c) {
-		let _ = c, v = d({ error: void 0 }), y = r(() => _.multi ? "Drag & Drop files here or click to add" : "Drag & Drop file here or click to add"), b = async (e) => {
+		let v = c, y = d({ error: void 0 }), b = r(() => v.multi ? "Drag & Drop files here or click to add" : "Drag & Drop file here or click to add"), x = async (e) => {
 			let t = h()?.lsDriver?.fileToImportHandle;
 			if (!t) return console.error("API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available");
-			let r = n(_.extensions), i = await Promise.all([...e.dataTransfer?.files ?? []].filter((e) => !!e).filter((e) => r ? r.some((t) => e.name.endsWith(t)) : !0).map((e) => t(e)));
-			i.length && _.importFiles({ files: i });
-		}, x = async () => {
-			let e = _.extensions ? [{
+			let r = n(v.extensions), i = await Promise.all([...e.dataTransfer?.files ?? []].filter((e) => !!e).filter((e) => r ? r.some((t) => e.name.endsWith(t)) : !0).map((e) => t(e)));
+			i.length && v.importFiles({ files: i });
+		}, S = async () => {
+			let e = v.extensions ? [{
 				name: "All Files",
-				extensions: [..._.extensions]
+				extensions: [...v.extensions]
 			}] : [];
-			_.multi ? h()?.lsDriver.showOpenMultipleFilesDialog({
+			v.multi ? h()?.lsDriver.showOpenMultipleFilesDialog({
 				title: "Select files to import",
 				filters: e
 			}).then(({ files: e }) => {
-				e && _.importFiles({ files: e });
-			}).catch((e) => v.error = e) : h()?.lsDriver.showOpenSingleFileDialog({
+				e && v.importFiles({ files: e });
+			}).catch((e) => y.error = e) : h()?.lsDriver.showOpenSingleFileDialog({
 				title: "Select file to import",
 				filters: e
 			}).then(({ file: e }) => {
-				e && _.importFiles({ files: [e] });
-			}).catch((e) => v.error = e);
+				e && v.importFiles({ files: [e] });
+			}).catch((e) => y.error = e);
 		};
 		return (n, r) => (u(), a("div", {
 			class: l(p(t).local),
-			onDrop: b,
+			"data-testid": "pl-file-dialog-local",
+			onDrop: x,
 			onDragover: r[0] ||= m(() => {}, ["prevent"]),
-			onClick: x
+			onClick: S
 		}, [
 			s(p(e), { name: "cloud-upload" }),
-			o("span", null, f(y.value), 1),
+			o("span", g, f(b.value), 1),
 			c.extensions ? (u(), a("span", {
 				key: 0,
-				class: l(p(t).supported)
+				class: l(p(t).supported),
+				"data-testid": "pl-file-dialog-local-formats"
 			}, "Supported formats: " + f(c.extensions.join(", ")), 3)) : i("", !0),
-			v.error ? (u(), a("span", g, f(v.error), 1)) : i("", !0)
+			y.error ? (u(), a("span", _, f(y.error), 1)) : i("", !0)
 		], 34));
 	}
 });
 //#endregion
-export { _ as default };
+export { v as default };
 
 //# sourceMappingURL=Local.vue2.js.map

package/dist/components/PlFileDialog/Local.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Local.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n  importFiles: (value: ImportedFiles) => void;\n  multi?: boolean;\n  extensions?: string[];\n}>();\n\nconst data = reactive({\n  error: undefined as unknown,\n});\n\nconst label = computed(() =>\n  props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n  const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n  if (!fileToImportHandle) {\n    return console.error(\n      \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n    );\n  }\n\n  const extensions = normalizeExtensions(props.extensions);\n\n  const files = await Promise.all(\n    [...(ev.dataTransfer?.files ?? [])]\n      .filter((f) => !!f)\n      .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n      .map((file) => {\n        return fileToImportHandle(file);\n      }),\n  );\n\n  if (files.length) {\n    props.importFiles({\n      files,\n    });\n  }\n};\n\nconst openNativeDialog = async () => {\n  const filters: OpenDialogFilter[] = props.extensions\n    ? [\n        {\n          name: \"All Files\",\n          extensions: [...props.extensions],\n        },\n      ]\n    : [];\n\n  if (props.multi) {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenMultipleFilesDialog({\n        title: \"Select files to import\",\n        filters,\n      })\n      .then(({ files }) => {\n        if (files) {\n          props.importFiles({\n            files,\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  } else {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenSingleFileDialog({\n        title: \"Select file to import\",\n        filters,\n      })\n      .then(({ file }) => {\n        if (file) {\n          props.importFiles({\n            files: [file],\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  }\n};\n</script>\n\n<template>\n  <div :class=\"style.local\" @drop=\"onDrop\" @dragover.prevent @click=\"openNativeDialog\">\n    <PlIcon24 name=\"cloud-upload\" />\n    <span>{{ label }}</span>\n    <span v-if=\"extensions\" :class=\"style.supported\"\n      >Supported formats: {{ extensions.join(\", \") }}</span\n    >\n    <span v-if=\"data.error\" class=\"alert-error\">{{ data.error }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAMR,IAAO,EAAS,EACpB,OAAO,KAAA,GACR,CAAC,EAEI,IAAQ,QACZ,EAAM,QAAQ,2CAA2C,wCAC1D,EAEK,IAAS,OAAO,MAAkB;GACtC,IAAM,IAAqB,GAAyB,EAAE,UAAU;AAEhE,OAAI,CAAC,EACH,QAAO,QAAQ,MACb,6EACD;GAGH,IAAM,IAAa,EAAoB,EAAM,WAAW,EAElD,IAAQ,MAAM,QAAQ,IAC1B,CAAC,GAAI,EAAG,cAAc,SAAS,EAAE,CAAC,CAC/B,QAAQ,MAAM,CAAC,CAAC,EAAC,CACjB,QAAQ,MAAO,IAAa,EAAW,MAAM,MAAQ,EAAE,KAAK,SAAS,EAAI,CAAC,GAAG,GAAK,CAClF,KAAK,MACG,EAAmB,EAAK,CAC/B,CACL;AAED,GAAI,EAAM,UACR,EAAM,YAAY,EAChB,UACD,CAAC;KAIA,IAAmB,YAAY;GACnC,IAAM,IAA8B,EAAM,aACtC,CACE;IACE,MAAM;IACN,YAAY,CAAC,GAAG,EAAM,WAAW;IAClC,CACH,GACA,EAAE;AAEN,GAAI,EAAM,QACR,GAAwB,EACpB,SAAS,4BAA4B;IACrC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,eAAY;AACnB,IAAI,KACF,EAAM,YAAY,EAChB,UACD,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK,GAErC,GAAwB,EACpB,SAAS,yBAAyB;IAClC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,cAAW;AAClB,IAAI,KACF,EAAM,YAAY,EAChB,OAAO,CAAC,EAAK,EACd,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK;;yBAMvC,EAOM,OAAA;GAPA,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;GAAS;GAAS,YAAQ,AAAA,EAAA,OAAA,QAAT,IAAiB,CAAA,UAAA,CAAA;GAAE,SAAO;;GACjE,EAAgC,EAAA,EAAA,EAAA,EAAtB,MAAK,gBAAc,CAAA;GAC7B,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;GACF,EAAA,cAAA,GAAA,EAAZ,EAEC,QAAA;;IAFwB,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;MAC5C,wBAAmB,EAAG,EAAA,WAAW,KAAI,KAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAE5B,EAAK,SAAA,GAAA,EAAjB,EAAmE,QAAnE,GAAmE,EAApB,EAAK,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"Local.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n  importFiles: (value: ImportedFiles) => void;\n  multi?: boolean;\n  extensions?: string[];\n}>();\n\nconst data = reactive({\n  error: undefined as unknown,\n});\n\nconst label = computed(() =>\n  props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n  const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n  if (!fileToImportHandle) {\n    return console.error(\n      \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n    );\n  }\n\n  const extensions = normalizeExtensions(props.extensions);\n\n  const files = await Promise.all(\n    [...(ev.dataTransfer?.files ?? [])]\n      .filter((f) => !!f)\n      .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n      .map((file) => {\n        return fileToImportHandle(file);\n      }),\n  );\n\n  if (files.length) {\n    props.importFiles({\n      files,\n    });\n  }\n};\n\nconst openNativeDialog = async () => {\n  const filters: OpenDialogFilter[] = props.extensions\n    ? [\n        {\n          name: \"All Files\",\n          extensions: [...props.extensions],\n        },\n      ]\n    : [];\n\n  if (props.multi) {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenMultipleFilesDialog({\n        title: \"Select files to import\",\n        filters,\n      })\n      .then(({ files }) => {\n        if (files) {\n          props.importFiles({\n            files,\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  } else {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenSingleFileDialog({\n        title: \"Select file to import\",\n        filters,\n      })\n      .then(({ file }) => {\n        if (file) {\n          props.importFiles({\n            files: [file],\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  }\n};\n</script>\n\n<template>\n  <div\n    :class=\"style.local\"\n    data-testid=\"pl-file-dialog-local\"\n    @drop=\"onDrop\"\n    @dragover.prevent\n    @click=\"openNativeDialog\"\n  >\n    <PlIcon24 name=\"cloud-upload\" />\n    <span data-testid=\"pl-file-dialog-local-label\">{{ label }}</span>\n    <span v-if=\"extensions\" :class=\"style.supported\" data-testid=\"pl-file-dialog-local-formats\"\n      >Supported formats: {{ extensions.join(\", \") }}</span\n    >\n    <span v-if=\"data.error\" class=\"alert-error\" data-testid=\"pl-file-dialog-local-error\">{{\n      data.error\n    }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAMR,IAAO,EAAS,EACpB,OAAO,KAAA,GACR,CAAC,EAEI,IAAQ,QACZ,EAAM,QAAQ,2CAA2C,wCAC1D,EAEK,IAAS,OAAO,MAAkB;GACtC,IAAM,IAAqB,GAAyB,EAAE,UAAU;AAEhE,OAAI,CAAC,EACH,QAAO,QAAQ,MACb,6EACD;GAGH,IAAM,IAAa,EAAoB,EAAM,WAAW,EAElD,IAAQ,MAAM,QAAQ,IAC1B,CAAC,GAAI,EAAG,cAAc,SAAS,EAAE,CAAC,CAC/B,QAAQ,MAAM,CAAC,CAAC,EAAC,CACjB,QAAQ,MAAO,IAAa,EAAW,MAAM,MAAQ,EAAE,KAAK,SAAS,EAAI,CAAC,GAAG,GAAK,CAClF,KAAK,MACG,EAAmB,EAAK,CAC/B,CACL;AAED,GAAI,EAAM,UACR,EAAM,YAAY,EAChB,UACD,CAAC;KAIA,IAAmB,YAAY;GACnC,IAAM,IAA8B,EAAM,aACtC,CACE;IACE,MAAM;IACN,YAAY,CAAC,GAAG,EAAM,WAAW;IAClC,CACH,GACA,EAAE;AAEN,GAAI,EAAM,QACR,GAAwB,EACpB,SAAS,4BAA4B;IACrC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,eAAY;AACnB,IAAI,KACF,EAAM,YAAY,EAChB,UACD,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK,GAErC,GAAwB,EACpB,SAAS,yBAAyB;IAClC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,cAAW;AAClB,IAAI,KACF,EAAM,YAAY,EAChB,OAAO,CAAC,EAAK,EACd,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK;;yBAMvC,EAeM,OAAA;GAdH,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;GACnB,eAAY;GACL;GACN,YAAQ,AAAA,EAAA,OAAA,QAAT,IAAiB,CAAA,UAAA,CAAA;GAChB,SAAO;;GAER,EAAgC,EAAA,EAAA,EAAA,EAAtB,MAAK,gBAAc,CAAA;GAC7B,EAAiE,QAAjE,GAAiE,EAAf,EAAA,MAAK,EAAA,EAAA;GAC3C,EAAA,cAAA,GAAA,EAAZ,EAEC,QAAA;;IAFwB,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;IAAE,eAAY;MAC1D,wBAAmB,EAAG,EAAA,WAAW,KAAI,KAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAE5B,EAAK,SAAA,GAAA,EAAjB,EAES,QAFT,GAES,EADP,EAAK,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/components/PlFileDialog/PlFileDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlFileDialog.js","names":[],"sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport style from \"./pl-file-dialog.module.scss\";\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { notEmpty } from \"@milaboratories/helpers\";\nimport type { ImportedFiles, SimpleOption } from \"../../types\";\nimport { PlDialogModal } from \"../PlDialogModal\";\nimport { PlBtnPrimary } from \"../PlBtnPrimary\";\nimport { PlBtnGhost } from \"../PlBtnGhost\";\nimport { PlBtnGroup } from \"../PlBtnGroup\";\nimport Remote from \"./Remote.vue\";\nimport Local from \"./Local.vue\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the modal.\n     *\n     * When `true`, the modal is open. When `false`, the modal is closed.\n     */\n    modelValue: boolean;\n    /**\n     * Specifies the file extensions that are allowed for selection.\n     *\n     * Provide an array of strings representing file extensions (leading dot can be omitted)\n     * If not specified, all file types are allowed.\n     */\n    extensions?: string[];\n    /**\n     * Enables the selection of multiple files.\n     *\n     * When `true`, the user can select multiple files.\n     * When `false` or not specified, only a single file can be selected.\n     */\n    multi?: boolean;\n    /**\n     * The custom title of the dialog.\n     */\n    title?: string;\n    /**\n     * Automatically selects the initial storage option.\n     * When `true`, the default storage is pre-selected for the user (default: `true`)\n     */\n    autoSelectStorage?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n    closeOnOutsideClick: true,\n  },\n);\n\nconst mode = ref<\"local\" | \"remote\">(\"local\");\n\nconst defaultTitle = computed(() =>\n  props.multi ? \"Select Files to Import\" : \"Select File to Import\",\n);\n\nconst modeOptions = [\n  {\n    label: \"My Computer\",\n    value: \"local\",\n  },\n  {\n    label: \"Remote\",\n    value: \"remote\",\n  },\n] satisfies SimpleOption[];\n\nconst closeModal = () => emit(\"update:modelValue\", false);\n\nconst remoteRef = useTemplateRef(\"remote\");\n\nconst submit = () => {\n  if (remoteRef.value?.isReady) {\n    emit(\"import:files\", notEmpty(remoteRef.value?.getFilesToImport()));\n    closeModal();\n  }\n};\n\nconst importFiles = (importedFiles: ImportedFiles) => {\n  emit(\"import:files\", importedFiles);\n  closeModal();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    :no-content-gutters=\"true\"\n    :close-on-outside-click=\"closeOnOutsideClick\"\n    class=\"pl-dialog-modal\"\n    :class=\"style.component\"\n    :model-value=\"modelValue\"\n    width=\"688px\"\n    height=\"720px\"\n    @update:model-value=\"closeModal\"\n    @click.stop\n  >\n    <template #title>{{ title ?? defaultTitle }}</template>\n    <div style=\"margin: 0 24px\">\n      <PlBtnGroup v-model=\"mode\" :options=\"modeOptions\" />\n    </div>\n    <Remote v-if=\"mode === 'remote'\" ref=\"remote\" v-bind=\"$props\" :submit=\"submit\" />\n    <Local v-if=\"mode === 'local'\" :import-files=\"importFiles\" v-bind=\"$props\" />\n    <template v-if=\"mode === 'remote'\" #actions>\n      <PlBtnPrimary style=\"min-width: 160px\" :disabled=\"!remoteRef?.isReady\" @click.stop=\"submit\"\n        >Import</PlBtnPrimary\n      >\n      <PlBtnGhost :justify-center=\"false\" @click.stop=\"closeModal\">Cancel</PlBtnGhost>\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlFileDialog.js","names":[],"sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport style from \"./pl-file-dialog.module.scss\";\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { notEmpty } from \"@milaboratories/helpers\";\nimport type { ImportedFiles, SimpleOption } from \"../../types\";\nimport { PlDialogModal } from \"../PlDialogModal\";\nimport { PlBtnPrimary } from \"../PlBtnPrimary\";\nimport { PlBtnGhost } from \"../PlBtnGhost\";\nimport { PlBtnGroup } from \"../PlBtnGroup\";\nimport Remote from \"./Remote.vue\";\nimport Local from \"./Local.vue\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the modal.\n     *\n     * When `true`, the modal is open. When `false`, the modal is closed.\n     */\n    modelValue: boolean;\n    /**\n     * Specifies the file extensions that are allowed for selection.\n     *\n     * Provide an array of strings representing file extensions (leading dot can be omitted)\n     * If not specified, all file types are allowed.\n     */\n    extensions?: string[];\n    /**\n     * Enables the selection of multiple files.\n     *\n     * When `true`, the user can select multiple files.\n     * When `false` or not specified, only a single file can be selected.\n     */\n    multi?: boolean;\n    /**\n     * The custom title of the dialog.\n     */\n    title?: string;\n    /**\n     * Automatically selects the initial storage option.\n     * When `true`, the default storage is pre-selected for the user (default: `true`)\n     */\n    autoSelectStorage?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n    closeOnOutsideClick: true,\n  },\n);\n\nconst mode = ref<\"local\" | \"remote\">(\"local\");\n\nconst defaultTitle = computed(() =>\n  props.multi ? \"Select Files to Import\" : \"Select File to Import\",\n);\n\nconst modeOptions = [\n  {\n    label: \"My Computer\",\n    value: \"local\",\n  },\n  {\n    label: \"Remote\",\n    value: \"remote\",\n  },\n] satisfies SimpleOption[];\n\nconst closeModal = () => emit(\"update:modelValue\", false);\n\nconst remoteRef = useTemplateRef(\"remote\");\n\nconst submit = () => {\n  if (remoteRef.value?.isReady) {\n    emit(\"import:files\", notEmpty(remoteRef.value?.getFilesToImport()));\n    closeModal();\n  }\n};\n\nconst importFiles = (importedFiles: ImportedFiles) => {\n  emit(\"import:files\", importedFiles);\n  closeModal();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    :no-content-gutters=\"true\"\n    :close-on-outside-click=\"closeOnOutsideClick\"\n    class=\"pl-dialog-modal\"\n    data-testid=\"pl-file-dialog\"\n    :class=\"style.component\"\n    :model-value=\"modelValue\"\n    width=\"688px\"\n    height=\"720px\"\n    @update:model-value=\"closeModal\"\n    @click.stop\n  >\n    <template #title>{{ title ?? defaultTitle }}</template>\n    <div style=\"margin: 0 24px\">\n      <PlBtnGroup v-model=\"mode\" :options=\"modeOptions\" data-testid=\"pl-file-dialog-mode\" />\n    </div>\n    <Remote v-if=\"mode === 'remote'\" ref=\"remote\" v-bind=\"$props\" :submit=\"submit\" />\n    <Local v-if=\"mode === 'local'\" :import-files=\"importFiles\" v-bind=\"$props\" />\n    <template v-if=\"mode === 'remote'\" #actions>\n      <PlBtnPrimary\n        style=\"min-width: 160px\"\n        :disabled=\"!remoteRef?.isReady\"\n        data-testid=\"pl-file-dialog-import\"\n        @click.stop=\"submit\"\n        >Import</PlBtnPrimary\n      >\n      <PlBtnGhost\n        :justify-center=\"false\"\n        data-testid=\"pl-file-dialog-cancel\"\n        @click.stop=\"closeModal\"\n        >Cancel</PlBtnGhost\n      >\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlFileDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"names":[],"mappings":"AA+HA,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,aAAa,CAAC;AAc/D,KAAK,WAAW,GAAG;IACf;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAuOJ,QAAA,MAAM,YAAY;;;;;;;WAjPN,MAAM;yBASQ,OAAO;gBApBhB,MAAM,EAAE;uBAgBD,OAAO;6EAgP7B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PlFileDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"names":[],"mappings":"AAyIA,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,aAAa,CAAC;AAc/D,KAAK,WAAW,GAAG;IACf;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AA+OJ,QAAA,MAAM,YAAY;;;;;;;WAzPN,MAAM;yBASQ,OAAO;gBApBhB,MAAM,EAAE;uBAgBD,OAAO;6EAwP7B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlFileDialog/PlFileDialog.vue2.js

@@ -45,6 +45,7 @@ var T = { style: { margin: "0 24px" } }, E = /* @__PURE__ */ m({
 			"no-content-gutters": !0,
 			"close-on-outside-click": m.closeOnOutsideClick,
 			class: g(["pl-dialog-modal", b(i).component]),
+			"data-testid": "pl-file-dialog",
 			"model-value": m.modelValue,
 			width: "688px",
 			height: "720px",
@@ -56,7 +57,8 @@ var T = { style: { margin: "0 24px" } }, E = /* @__PURE__ */ m({
 				u("div", T, [p(b(t), {
 					modelValue: k.value,
 					"onUpdate:modelValue": v[0] ||= (e) => k.value = e,
-					options: j
+					options: j,
+					"data-testid": "pl-file-dialog-mode"
 				}, null, 8, ["modelValue"])]),
 				k.value === "remote" ? (_(), c(a, h({
 					key: 0,
@@ -73,12 +75,14 @@ var T = { style: { margin: "0 24px" } }, E = /* @__PURE__ */ m({
 			fn: S(() => [p(b(n), {
 				style: { "min-width": "160px" },
 				disabled: !N.value?.isReady,
+				"data-testid": "pl-file-dialog-import",
 				onClick: C(P, ["stop"])
 			}, {
 				default: S(() => [...v[2] ||= [f("Import", -1)]]),
 				_: 1
 			}, 8, ["disabled"]), p(b(e), {
 				"justify-center": !1,
+				"data-testid": "pl-file-dialog-cancel",
 				onClick: C(M, ["stop"])
 			}, {
 				default: S(() => [...v[3] ||= [f("Cancel", -1)]]),

package/dist/components/PlFileDialog/PlFileDialog.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlFileDialog.vue_vue_type_script_setup_true_lang.js","names":["$props"],"sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport style from \"./pl-file-dialog.module.scss\";\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { notEmpty } from \"@milaboratories/helpers\";\nimport type { ImportedFiles, SimpleOption } from \"../../types\";\nimport { PlDialogModal } from \"../PlDialogModal\";\nimport { PlBtnPrimary } from \"../PlBtnPrimary\";\nimport { PlBtnGhost } from \"../PlBtnGhost\";\nimport { PlBtnGroup } from \"../PlBtnGroup\";\nimport Remote from \"./Remote.vue\";\nimport Local from \"./Local.vue\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the modal.\n     *\n     * When `true`, the modal is open. When `false`, the modal is closed.\n     */\n    modelValue: boolean;\n    /**\n     * Specifies the file extensions that are allowed for selection.\n     *\n     * Provide an array of strings representing file extensions (leading dot can be omitted)\n     * If not specified, all file types are allowed.\n     */\n    extensions?: string[];\n    /**\n     * Enables the selection of multiple files.\n     *\n     * When `true`, the user can select multiple files.\n     * When `false` or not specified, only a single file can be selected.\n     */\n    multi?: boolean;\n    /**\n     * The custom title of the dialog.\n     */\n    title?: string;\n    /**\n     * Automatically selects the initial storage option.\n     * When `true`, the default storage is pre-selected for the user (default: `true`)\n     */\n    autoSelectStorage?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n    closeOnOutsideClick: true,\n  },\n);\n\nconst mode = ref<\"local\" | \"remote\">(\"local\");\n\nconst defaultTitle = computed(() =>\n  props.multi ? \"Select Files to Import\" : \"Select File to Import\",\n);\n\nconst modeOptions = [\n  {\n    label: \"My Computer\",\n    value: \"local\",\n  },\n  {\n    label: \"Remote\",\n    value: \"remote\",\n  },\n] satisfies SimpleOption[];\n\nconst closeModal = () => emit(\"update:modelValue\", false);\n\nconst remoteRef = useTemplateRef(\"remote\");\n\nconst submit = () => {\n  if (remoteRef.value?.isReady) {\n    emit(\"import:files\", notEmpty(remoteRef.value?.getFilesToImport()));\n    closeModal();\n  }\n};\n\nconst importFiles = (importedFiles: ImportedFiles) => {\n  emit(\"import:files\", importedFiles);\n  closeModal();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    :no-content-gutters=\"true\"\n    :close-on-outside-click=\"closeOnOutsideClick\"\n    class=\"pl-dialog-modal\"\n    :class=\"style.component\"\n    :model-value=\"modelValue\"\n    width=\"688px\"\n    height=\"720px\"\n    @update:model-value=\"closeModal\"\n    @click.stop\n  >\n    <template #title>{{ title ?? defaultTitle }}</template>\n    <div style=\"margin: 0 24px\">\n      <PlBtnGroup v-model=\"mode\" :options=\"modeOptions\" />\n    </div>\n    <Remote v-if=\"mode === 'remote'\" ref=\"remote\" v-bind=\"$props\" :submit=\"submit\" />\n    <Local v-if=\"mode === 'local'\" :import-files=\"importFiles\" v-bind=\"$props\" />\n    <template v-if=\"mode === 'remote'\" #actions>\n      <PlBtnPrimary style=\"min-width: 160px\" :disabled=\"!remoteRef?.isReady\" @click.stop=\"submit\"\n        >Import</PlBtnPrimary\n      >\n      <PlBtnGhost :justify-center=\"false\" @click.stop=\"closeModal\">Cancel</PlBtnGhost>\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,IAAM,IAAO,GAKP,IAAQ,GA4CR,IAAO,EAAwB,QAAQ,EAEvC,IAAe,QACnB,EAAM,QAAQ,2BAA2B,wBAC1C,EAEK,IAAc,CAClB;GACE,OAAO;GACP,OAAO;GACR,EACD;GACE,OAAO;GACP,OAAO;GACR,CACF,EAEK,UAAmB,EAAK,qBAAqB,GAAM,EAEnD,IAAY,EAAe,SAAS,EAEpC,UAAe;AACnB,GAAI,EAAU,OAAO,YACnB,EAAK,gBAAgB,EAAS,EAAU,OAAO,kBAAkB,CAAC,CAAC,EACnE,GAAY;KAIV,KAAe,MAAiC;AAEpD,GADA,EAAK,gBAAgB,EAAc,EACnC,GAAY;;yBAKZ,EAuBgB,EAAA,EAAA,EAAA;GAtBb,sBAAoB;GACpB,0BAAwB,EAAA;GACzB,OAAK,EAAA,CAAC,mBACE,EAAA,EAAK,CAAC,UAAS,CAAA;GACtB,eAAa,EAAA;GACd,OAAM;GACN,QAAO;GACN,uBAAoB;GACpB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;;GAEA,OAAK,QAA4B,CAAA,EAAA,EAAxB,EAAA,SAAS,EAAA,MAAY,EAAA,EAAA,CAAA,CAAA;oBAGnC;IAFN,EAEM,OAFN,GAEM,CADJ,EAAoD,EAAA,EAAA,EAAA;iBAA/B,EAAA;8CAAI,QAAA;KAAG,SAAS;;IAEzB,EAAA,UAAI,YAAA,GAAA,EAAlB,EAAiF,GAAjF,EAAiF;;KAAhD,KAAI;OAAiBA,EAAAA,QAAM,EAAW,WAAM,CAAA,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;IAChE,EAAA,UAAI,WAAA,GAAA,EAAjB,EAA6E,GAA7E,EAA6E;;KAA7C,gBAAc;OAAqBA,EAAAA,OAAM,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;;;MACzD,EAAA,UAAI,WAAA;SAAgB;eAGjC,CAFD,EAEC,EAAA,EAAA,EAAA;IAFa,OAAA,EAAA,aAAA,SAAwB;IAAE,UAAQ,CAAG,EAAA,OAAW;IAAU,SAAK,EAAO,GAAM,CAAA,OAAA,CAAA;;qBACjF,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA;;wBAET,EAAgF,EAAA,EAAA,EAAA;IAAnE,kBAAgB;IAAQ,SAAK,EAAO,GAAU,CAAA,OAAA,CAAA;;qBAAQ,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"PlFileDialog.vue_vue_type_script_setup_true_lang.js","names":["$props"],"sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport style from \"./pl-file-dialog.module.scss\";\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { notEmpty } from \"@milaboratories/helpers\";\nimport type { ImportedFiles, SimpleOption } from \"../../types\";\nimport { PlDialogModal } from \"../PlDialogModal\";\nimport { PlBtnPrimary } from \"../PlBtnPrimary\";\nimport { PlBtnGhost } from \"../PlBtnGhost\";\nimport { PlBtnGroup } from \"../PlBtnGroup\";\nimport Remote from \"./Remote.vue\";\nimport Local from \"./Local.vue\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the modal.\n     *\n     * When `true`, the modal is open. When `false`, the modal is closed.\n     */\n    modelValue: boolean;\n    /**\n     * Specifies the file extensions that are allowed for selection.\n     *\n     * Provide an array of strings representing file extensions (leading dot can be omitted)\n     * If not specified, all file types are allowed.\n     */\n    extensions?: string[];\n    /**\n     * Enables the selection of multiple files.\n     *\n     * When `true`, the user can select multiple files.\n     * When `false` or not specified, only a single file can be selected.\n     */\n    multi?: boolean;\n    /**\n     * The custom title of the dialog.\n     */\n    title?: string;\n    /**\n     * Automatically selects the initial storage option.\n     * When `true`, the default storage is pre-selected for the user (default: `true`)\n     */\n    autoSelectStorage?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n    closeOnOutsideClick: true,\n  },\n);\n\nconst mode = ref<\"local\" | \"remote\">(\"local\");\n\nconst defaultTitle = computed(() =>\n  props.multi ? \"Select Files to Import\" : \"Select File to Import\",\n);\n\nconst modeOptions = [\n  {\n    label: \"My Computer\",\n    value: \"local\",\n  },\n  {\n    label: \"Remote\",\n    value: \"remote\",\n  },\n] satisfies SimpleOption[];\n\nconst closeModal = () => emit(\"update:modelValue\", false);\n\nconst remoteRef = useTemplateRef(\"remote\");\n\nconst submit = () => {\n  if (remoteRef.value?.isReady) {\n    emit(\"import:files\", notEmpty(remoteRef.value?.getFilesToImport()));\n    closeModal();\n  }\n};\n\nconst importFiles = (importedFiles: ImportedFiles) => {\n  emit(\"import:files\", importedFiles);\n  closeModal();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    :no-content-gutters=\"true\"\n    :close-on-outside-click=\"closeOnOutsideClick\"\n    class=\"pl-dialog-modal\"\n    data-testid=\"pl-file-dialog\"\n    :class=\"style.component\"\n    :model-value=\"modelValue\"\n    width=\"688px\"\n    height=\"720px\"\n    @update:model-value=\"closeModal\"\n    @click.stop\n  >\n    <template #title>{{ title ?? defaultTitle }}</template>\n    <div style=\"margin: 0 24px\">\n      <PlBtnGroup v-model=\"mode\" :options=\"modeOptions\" data-testid=\"pl-file-dialog-mode\" />\n    </div>\n    <Remote v-if=\"mode === 'remote'\" ref=\"remote\" v-bind=\"$props\" :submit=\"submit\" />\n    <Local v-if=\"mode === 'local'\" :import-files=\"importFiles\" v-bind=\"$props\" />\n    <template v-if=\"mode === 'remote'\" #actions>\n      <PlBtnPrimary\n        style=\"min-width: 160px\"\n        :disabled=\"!remoteRef?.isReady\"\n        data-testid=\"pl-file-dialog-import\"\n        @click.stop=\"submit\"\n        >Import</PlBtnPrimary\n      >\n      <PlBtnGhost\n        :justify-center=\"false\"\n        data-testid=\"pl-file-dialog-cancel\"\n        @click.stop=\"closeModal\"\n        >Cancel</PlBtnGhost\n      >\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,IAAM,IAAO,GAKP,IAAQ,GA4CR,IAAO,EAAwB,QAAQ,EAEvC,IAAe,QACnB,EAAM,QAAQ,2BAA2B,wBAC1C,EAEK,IAAc,CAClB;GACE,OAAO;GACP,OAAO;GACR,EACD;GACE,OAAO;GACP,OAAO;GACR,CACF,EAEK,UAAmB,EAAK,qBAAqB,GAAM,EAEnD,IAAY,EAAe,SAAS,EAEpC,UAAe;AACnB,GAAI,EAAU,OAAO,YACnB,EAAK,gBAAgB,EAAS,EAAU,OAAO,kBAAkB,CAAC,CAAC,EACnE,GAAY;KAIV,KAAe,MAAiC;AAEpD,GADA,EAAK,gBAAgB,EAAc,EACnC,GAAY;;yBAKZ,EAiCgB,EAAA,EAAA,EAAA;GAhCb,sBAAoB;GACpB,0BAAwB,EAAA;GACzB,OAAK,EAAA,CAAC,mBAEE,EAAA,EAAK,CAAC,UAAS,CAAA;GADvB,eAAY;GAEX,eAAa,EAAA;GACd,OAAM;GACN,QAAO;GACN,uBAAoB;GACpB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;;GAEA,OAAK,QAA4B,CAAA,EAAA,EAAxB,EAAA,SAAS,EAAA,MAAY,EAAA,EAAA,CAAA,CAAA;oBAGnC;IAFN,EAEM,OAFN,GAEM,CADJ,EAAsF,EAAA,EAAA,EAAA;iBAAjE,EAAA;8CAAI,QAAA;KAAG,SAAS;KAAa,eAAY;;IAElD,EAAA,UAAI,YAAA,GAAA,EAAlB,EAAiF,GAAjF,EAAiF;;KAAhD,KAAI;OAAiBA,EAAAA,QAAM,EAAW,WAAM,CAAA,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;IAChE,EAAA,UAAI,WAAA,GAAA,EAAjB,EAA6E,GAA7E,EAA6E;;KAA7C,gBAAc;OAAqBA,EAAAA,OAAM,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;;;MACzD,EAAA,UAAI,WAAA;SAAgB;eAOjC,CAND,EAMC,EAAA,EAAA,EAAA;IALC,OAAA,EAAA,aAAA,SAAwB;IACvB,UAAQ,CAAG,EAAA,OAAW;IACvB,eAAY;IACX,SAAK,EAAO,GAAM,CAAA,OAAA,CAAA;;qBACZ,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA;;wBAET,EAKC,EAAA,EAAA,EAAA;IAJE,kBAAgB;IACjB,eAAY;IACX,SAAK,EAAO,GAAU,CAAA,OAAA,CAAA;;qBAChB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA"}