@milaboratories/uikit 2.15.36 → 2.15.38

package/.turbo/turbo-formatter$colon$check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @milaboratories/uikit@2.15.36 formatter:check /home/runner/_work/platforma/platforma/lib/ui/uikit
+> @milaboratories/uikit@2.15.38 formatter:check /home/runner/_work/platforma/platforma/lib/ui/uikit
 > ts-builder formatter --check
 
 Checking formatting...
@@ -8,5 +8,5 @@ Checking formatting...
 Checking formatting...
 
 All matched files use the correct format.
-Finished in 2391ms on 383 files using 16 threads.
+Finished in 2298ms on 384 files using 16 threads.
 Format check completed successfully

package/.turbo/turbo-linter$colon$check.log

@@ -1,10 +1,10 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @milaboratories/uikit@2.15.36 linter:check /home/runner/_work/platforma/platforma/lib/ui/uikit
+> @milaboratories/uikit@2.15.38 linter:check /home/runner/_work/platforma/platforma/lib/ui/uikit
 > ts-builder linter --check
 
 Linting project...
 ↳ oxlint --config /home/runner/_work/platforma/platforma/lib/ui/uikit/.oxlintrc.json --deny-warnings
 Found 0 warnings and 0 errors.
-Finished in 26ms on 310 files with 108 rules using 16 threads.
+Finished in 27ms on 311 files with 108 rules using 16 threads.
 Linting completed successfully

package/.turbo/turbo-types$colon$check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @milaboratories/uikit@2.15.36 types:check /home/runner/_work/platforma/platforma/lib/ui/uikit
+> @milaboratories/uikit@2.15.38 types:check /home/runner/_work/platforma/platforma/lib/ui/uikit
 > ts-builder type-check --target browser-lib
 
 ↳ vue-tsc-ts6.cjs --noEmit --project ./tsconfig.json --customConditions default

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @milaboratories/uikit
 
+## 2.15.38
+
+### Patch Changes
+
+- ad7b703: Components render default `data-testid` anchors for E2E tests: `pl-<component>` on the root and `pl-<component>-<part>` on inner parts (inputs, options, buttons, titles, chart marks, …). A `data-testid` passed by the caller replaces the root one. PlFileInput now has a single root (its file dialog moved inside), so attributes passed to it are no longer dropped.
+
+## 2.15.37
+
+### Patch Changes
+
+- @platforma-sdk/model@1.84.10
+
 ## 2.15.36
 
 ### Patch Changes

package/dist/__tests__/default-testid.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=default-testid.test.d.ts.map

package/dist/__tests__/default-testid.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-testid.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/default-testid.test.ts"],"names":[],"mappings":""}

package/dist/base/BtnBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"BtnBase.js","names":[],"sources":["../../src/base/BtnBase.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport type { MaskIconName16, Size } from \"../types\";\nimport { computed, ref } from \"vue\";\nimport { PlMaskIcon16 } from \"../components/PlMaskIcon16\";\nimport { useRipple } from \"../composition/useRipple\";\n\nconst props = defineProps<{\n  loading?: boolean;\n  small?: boolean;\n  large?: boolean;\n  size?: Size;\n  round?: boolean;\n  icon?: MaskIconName16;\n  reverse?: boolean;\n  justifyCenter?: boolean;\n}>();\n\nconst btn = ref();\n\nconst small = computed(() => props.small || props.size === \"small\");\nconst large = computed(() => props.large || props.size === \"large\");\n\nuseRipple(btn);\n</script>\n\n<template>\n  <button\n    ref=\"btn\"\n    tabindex=\"0\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"!round\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon16 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon16 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"BtnBase.js","names":[],"sources":["../../src/base/BtnBase.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport type { MaskIconName16, Size } from \"../types\";\nimport { computed, ref } from \"vue\";\nimport { PlMaskIcon16 } from \"../components/PlMaskIcon16\";\nimport { useRipple } from \"../composition/useRipple\";\n\nconst props = defineProps<{\n  loading?: boolean;\n  small?: boolean;\n  large?: boolean;\n  size?: Size;\n  round?: boolean;\n  icon?: MaskIconName16;\n  reverse?: boolean;\n  justifyCenter?: boolean;\n}>();\n\nconst btn = ref();\n\nconst small = computed(() => props.small || props.size === \"small\");\nconst large = computed(() => props.large || props.size === \"large\");\n\nuseRipple(btn);\n</script>\n\n<template>\n  <button\n    ref=\"btn\"\n    tabindex=\"0\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"!round\" data-testid=\"pl-btn-label\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon16 v-if=\"loading\" data-testid=\"pl-btn-loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon16 v-else-if=\"icon\" data-testid=\"pl-btn-icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n  </button>\n</template>\n"],"mappings":""}

package/dist/base/BtnBase.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BtnBase.vue.d.ts","sourceRoot":"","sources":["../../src/base/BtnBase.vue"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;wBAMhC,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;cAEN,OAAO;YACT,OAAO;YACP,OAAO;WACR,IAAI;YACH,OAAO;WACR,cAAc;cACX,OAAO;oBACD,OAAO;;cAPb,OAAO;YACT,OAAO;YACP,OAAO;WACR,IAAI;YACH,OAAO;WACR,cAAc;cACX,OAAO;oBACD,OAAO;;cAiFX,CAAC,KAAK,IAAgB,KAAK,GAAG;;WACjC,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWrC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"BtnBase.vue.d.ts","sourceRoot":"","sources":["../../src/base/BtnBase.vue"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;wBAMhC,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;cAEN,OAAO;YACT,OAAO;YACP,OAAO;WACR,IAAI;YACH,OAAO;WACR,cAAc;cACX,OAAO;oBACD,OAAO;;cAPb,OAAO;YACT,OAAO;YACP,OAAO;WACR,IAAI;YACH,OAAO;WACR,cAAc;cACX,OAAO;oBACD,OAAO;;cAsFX,CAAC,KAAK,IAAgB,KAAK,GAAG;;WACjC,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWrC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/base/BtnBase.vue2.js

@@ -3,7 +3,10 @@ import "../components/PlMaskIcon16/index.js";
 import { useRipple as t } from "../composition/useRipple.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, mergeProps as s, openBlock as c, ref as l, renderSlot as u, unref as d } from "vue";
 //#region src/base/BtnBase.vue?vue&type=script&setup=true&lang.ts
-var f = { key: 0 }, p = /* @__PURE__ */ o({
+var f = {
+	key: 0,
+	"data-testid": "pl-btn-label"
+}, p = /* @__PURE__ */ o({
 	inheritAttrs: !1,
 	__name: "BtnBase",
 	props: {
@@ -36,10 +39,12 @@ var f = { key: 0 }, p = /* @__PURE__ */ o({
 			disabled: !!t.$attrs.disabled || o.loading
 		}), [o.round ? i("", !0) : (c(), a("span", f, [u(t.$slots, "default")])), u(t.$slots, "icon", {}, () => [o.loading ? (c(), r(d(e), {
 			key: 0,
+			"data-testid": "pl-btn-loading",
 			name: "loading",
 			size: o.size
 		}, null, 8, ["size"])) : o.icon ? (c(), r(d(e), {
 			key: 1,
+			"data-testid": "pl-btn-icon",
 			name: o.icon,
 			size: o.size
 		}, null, 8, ["name", "size"])) : i("", !0)])], 16));

package/dist/base/BtnBase.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"BtnBase.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/base/BtnBase.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport type { MaskIconName16, Size } from \"../types\";\nimport { computed, ref } from \"vue\";\nimport { PlMaskIcon16 } from \"../components/PlMaskIcon16\";\nimport { useRipple } from \"../composition/useRipple\";\n\nconst props = defineProps<{\n  loading?: boolean;\n  small?: boolean;\n  large?: boolean;\n  size?: Size;\n  round?: boolean;\n  icon?: MaskIconName16;\n  reverse?: boolean;\n  justifyCenter?: boolean;\n}>();\n\nconst btn = ref();\n\nconst small = computed(() => props.small || props.size === \"small\");\nconst large = computed(() => props.large || props.size === \"large\");\n\nuseRipple(btn);\n</script>\n\n<template>\n  <button\n    ref=\"btn\"\n    tabindex=\"0\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"!round\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon16 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon16 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n  </button>\n</template>\n"],"mappings":";;;;;;CAEE,cAAc;;;;;;;;;;;;;EAUhB,IAAM,IAAQ,GAWR,IAAM,GAAK,EAEX,IAAQ,QAAe,EAAM,SAAS,EAAM,SAAS,QAAQ,EAC7D,IAAQ,QAAe,EAAM,SAAS,EAAM,SAAS,QAAQ;SAEnE,EAAU,EAAI,kBAIZ,EAaS,UAbT,EAaS;YAZH;GAAJ,KAAI;GACJ,UAAS;GACR,OAAK;IAAA,SAAI,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA,CAErD,EAAA,QACH,EAAA,IAAA,GAAA,IADG,GAAA,EAAb,EAEO,QAAA,GAAA,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAA2D,EAAA,EAAA,EAAA;;GAA9B,MAAK;GAAW,MAAM,EAAA;2BAC1B,EAAA,QAAA,GAAA,EAAzB,EAA2D,EAAA,EAAA,EAAA;;GAA3B,MAAM,EAAA;GAAO,MAAM,EAAA"}
+{"version":3,"file":"BtnBase.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/base/BtnBase.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport type { MaskIconName16, Size } from \"../types\";\nimport { computed, ref } from \"vue\";\nimport { PlMaskIcon16 } from \"../components/PlMaskIcon16\";\nimport { useRipple } from \"../composition/useRipple\";\n\nconst props = defineProps<{\n  loading?: boolean;\n  small?: boolean;\n  large?: boolean;\n  size?: Size;\n  round?: boolean;\n  icon?: MaskIconName16;\n  reverse?: boolean;\n  justifyCenter?: boolean;\n}>();\n\nconst btn = ref();\n\nconst small = computed(() => props.small || props.size === \"small\");\nconst large = computed(() => props.large || props.size === \"large\");\n\nuseRipple(btn);\n</script>\n\n<template>\n  <button\n    ref=\"btn\"\n    tabindex=\"0\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"!round\" data-testid=\"pl-btn-label\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon16 v-if=\"loading\" data-testid=\"pl-btn-loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon16 v-else-if=\"icon\" data-testid=\"pl-btn-icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;CAEE,cAAc;;;;;;;;;;;;;EAUhB,IAAM,IAAQ,GAWR,IAAM,GAAK,EAEX,IAAQ,QAAe,EAAM,SAAS,EAAM,SAAS,QAAQ,EAC7D,IAAQ,QAAe,EAAM,SAAS,EAAM,SAAS,QAAQ;SAEnE,EAAU,EAAI,kBAIZ,EAaS,UAbT,EAaS;YAZH;GAAJ,KAAI;GACJ,UAAS;GACR,OAAK;IAAA,SAAI,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA,CAErD,EAAA,QACH,EAAA,IAAA,GAAA,IADG,GAAA,EAAb,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAAwF,EAAA,EAAA,EAAA;;GAA3D,eAAY;GAAiB,MAAK;GAAW,MAAM,EAAA;2BACvD,EAAA,QAAA,GAAA,EAAzB,EAAqF,EAAA,EAAA,EAAA;;GAAtD,eAAY;GAAe,MAAM,EAAA;GAAO,MAAM,EAAA"}

package/dist/components/DropdownListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownListItem.js","names":[],"sources":["../../src/components/DropdownListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport CheckboxUncheckedSvg from \"../assets/images/24_checkbox-light-enabled-unchecked.svg?raw\";\nimport CheckboxCheckedSvg from \"../assets/images/24_checkbox-light-enabled-checked.svg?raw\";\nimport type { ListOptionNormalized } from \"../types\";\n\nconst props = withDefaults(\n  defineProps<{\n    option: ListOptionNormalized;\n    isSelected: boolean;\n    size: \"small\" | \"medium\";\n    isHovered: boolean;\n    useCheckbox?: boolean;\n  }>(),\n  {\n    size: \"small\",\n    isSelected: false,\n    isHovered: false,\n    useCheckbox: false,\n  },\n);\n\nconst classes = computed<string>(() => {\n  const classItems: string[] = [];\n  if (props.size === \"small\") {\n    classItems.push(\"dropdown-list-item__small\");\n  }\n  if (props.isSelected) {\n    classItems.push(\"dropdown-list-item__selected\");\n  }\n  if (props.isHovered) {\n    classItems.push(\"hovered-item\");\n  }\n  return classItems.join(\" \");\n});\n\nconst checkboxClasses = computed(() => {\n  const classes: string[] = [\"dropdown-list-item__checkbox\", \"flex-self-start\"];\n  if (props.isSelected) {\n    classes.push(\"checked\");\n  }\n  return classes.join(\" \");\n});\n\n// Why??\nconst checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : CheckboxUncheckedSvg));\n</script>\n\n<template>\n  <div :class=\"classes\" class=\"dropdown-list-item\">\n    <!-- eslint-disable vue/no-v-html -->\n    <div v-if=\"props.useCheckbox\" :class=\"checkboxClasses\" v-html=\"checkboxSvg\" />\n    <!--eslint-enable-->\n    <div class=\"dropdown-list-item__title-container\">\n      <div class=\"dropdown-list-item__title text-s\">\n        {{ option.label }}\n      </div>\n      <div v-if=\"option.description\" class=\"dropdown-list-item__description text-description\">\n        {{ option.description }}\n      </div>\n    </div>\n    <div\n      v-if=\"!props.useCheckbox && props.isSelected\"\n      class=\"dropdown-list-item__icon flex-self-start\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DropdownListItem.js","names":[],"sources":["../../src/components/DropdownListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport CheckboxUncheckedSvg from \"../assets/images/24_checkbox-light-enabled-unchecked.svg?raw\";\nimport CheckboxCheckedSvg from \"../assets/images/24_checkbox-light-enabled-checked.svg?raw\";\nimport type { ListOptionNormalized } from \"../types\";\n\nconst props = withDefaults(\n  defineProps<{\n    option: ListOptionNormalized;\n    isSelected: boolean;\n    size: \"small\" | \"medium\";\n    isHovered: boolean;\n    useCheckbox?: boolean;\n  }>(),\n  {\n    size: \"small\",\n    isSelected: false,\n    isHovered: false,\n    useCheckbox: false,\n  },\n);\n\nconst classes = computed<string>(() => {\n  const classItems: string[] = [];\n  if (props.size === \"small\") {\n    classItems.push(\"dropdown-list-item__small\");\n  }\n  if (props.isSelected) {\n    classItems.push(\"dropdown-list-item__selected\");\n  }\n  if (props.isHovered) {\n    classItems.push(\"hovered-item\");\n  }\n  return classItems.join(\" \");\n});\n\nconst checkboxClasses = computed(() => {\n  const classes: string[] = [\"dropdown-list-item__checkbox\", \"flex-self-start\"];\n  if (props.isSelected) {\n    classes.push(\"checked\");\n  }\n  return classes.join(\" \");\n});\n\n// Why??\nconst checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : CheckboxUncheckedSvg));\n</script>\n\n<template>\n  <div :class=\"classes\" class=\"dropdown-list-item\" data-testid=\"pl-dropdown-list-item\">\n    <!-- eslint-disable vue/no-v-html -->\n    <div\n      v-if=\"props.useCheckbox\"\n      :class=\"checkboxClasses\"\n      data-testid=\"pl-dropdown-list-item-checkbox\"\n      v-html=\"checkboxSvg\"\n    />\n    <!--eslint-enable-->\n    <div class=\"dropdown-list-item__title-container\">\n      <div class=\"dropdown-list-item__title text-s\" data-testid=\"pl-dropdown-list-item-title\">\n        {{ option.label }}\n      </div>\n      <div\n        v-if=\"option.description\"\n        class=\"dropdown-list-item__description text-description\"\n        data-testid=\"pl-dropdown-list-item-description\"\n      >\n        {{ option.description }}\n      </div>\n    </div>\n    <div\n      v-if=\"!props.useCheckbox && props.isSelected\"\n      class=\"dropdown-list-item__icon flex-self-start\"\n      data-testid=\"pl-dropdown-list-item-selected-icon\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownListItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/DropdownListItem.vue"],"names":[],"mappings":"AAyEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,oBAAoB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqGJ,QAAA,MAAM,YAAY;UAxGR,OAAO,GAAG,QAAQ;gBADZ,OAAO;eAER,OAAO;iBACJ,OAAO;6EAyGvB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"DropdownListItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/DropdownListItem.vue"],"names":[],"mappings":"AAmFA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,oBAAoB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA0GJ,QAAA,MAAM,YAAY;UA7GR,OAAO,GAAG,QAAQ;gBADZ,OAAO;eAER,OAAO;iBACJ,OAAO;6EA8GvB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/DropdownListItem.vue2.js

@@ -2,12 +2,17 @@ import e from "../assets/images/24_checkbox-light-enabled-unchecked.js";
 import t from "../assets/images/24_checkbox-light-enabled-checked.js";
 import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, toDisplayString as l } from "vue";
 //#region src/components/DropdownListItem.vue?vue&type=script&setup=true&lang.ts
-var u = ["innerHTML"], d = { class: "dropdown-list-item__title-container" }, f = { class: "dropdown-list-item__title text-s" }, p = {
+var u = ["innerHTML"], d = { class: "dropdown-list-item__title-container" }, f = {
+	class: "dropdown-list-item__title text-s",
+	"data-testid": "pl-dropdown-list-item-title"
+}, p = {
 	key: 0,
-	class: "dropdown-list-item__description text-description"
+	class: "dropdown-list-item__description text-description",
+	"data-testid": "pl-dropdown-list-item-description"
 }, m = {
 	key: 1,
-	class: "dropdown-list-item__icon flex-self-start"
+	class: "dropdown-list-item__icon flex-self-start",
+	"data-testid": "pl-dropdown-list-item-selected-icon"
 }, h = /* @__PURE__ */ o({
 	__name: "DropdownListItem",
 	props: {
@@ -34,10 +39,14 @@ var u = ["innerHTML"], d = { class: "dropdown-list-item__title-container" }, f =
 			let e = ["dropdown-list-item__checkbox", "flex-self-start"];
 			return h.isSelected && e.push("checked"), e.join(" ");
 		}), v = n(() => h.isSelected ? t : e);
-		return (e, t) => (c(), i("div", { class: s([g.value, "dropdown-list-item"]) }, [
+		return (e, t) => (c(), i("div", {
+			class: s([g.value, "dropdown-list-item"]),
+			"data-testid": "pl-dropdown-list-item"
+		}, [
 			h.useCheckbox ? (c(), i("div", {
 				key: 0,
 				class: s(_.value),
+				"data-testid": "pl-dropdown-list-item-checkbox",
 				innerHTML: v.value
 			}, null, 10, u)) : r("", !0),
 			a("div", d, [a("div", f, l(o.option.label), 1), o.option.description ? (c(), i("div", p, l(o.option.description), 1)) : r("", !0)]),

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownListItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/DropdownListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport CheckboxUncheckedSvg from \"../assets/images/24_checkbox-light-enabled-unchecked.svg?raw\";\nimport CheckboxCheckedSvg from \"../assets/images/24_checkbox-light-enabled-checked.svg?raw\";\nimport type { ListOptionNormalized } from \"../types\";\n\nconst props = withDefaults(\n  defineProps<{\n    option: ListOptionNormalized;\n    isSelected: boolean;\n    size: \"small\" | \"medium\";\n    isHovered: boolean;\n    useCheckbox?: boolean;\n  }>(),\n  {\n    size: \"small\",\n    isSelected: false,\n    isHovered: false,\n    useCheckbox: false,\n  },\n);\n\nconst classes = computed<string>(() => {\n  const classItems: string[] = [];\n  if (props.size === \"small\") {\n    classItems.push(\"dropdown-list-item__small\");\n  }\n  if (props.isSelected) {\n    classItems.push(\"dropdown-list-item__selected\");\n  }\n  if (props.isHovered) {\n    classItems.push(\"hovered-item\");\n  }\n  return classItems.join(\" \");\n});\n\nconst checkboxClasses = computed(() => {\n  const classes: string[] = [\"dropdown-list-item__checkbox\", \"flex-self-start\"];\n  if (props.isSelected) {\n    classes.push(\"checked\");\n  }\n  return classes.join(\" \");\n});\n\n// Why??\nconst checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : CheckboxUncheckedSvg));\n</script>\n\n<template>\n  <div :class=\"classes\" class=\"dropdown-list-item\">\n    <!-- eslint-disable vue/no-v-html -->\n    <div v-if=\"props.useCheckbox\" :class=\"checkboxClasses\" v-html=\"checkboxSvg\" />\n    <!--eslint-enable-->\n    <div class=\"dropdown-list-item__title-container\">\n      <div class=\"dropdown-list-item__title text-s\">\n        {{ option.label }}\n      </div>\n      <div v-if=\"option.description\" class=\"dropdown-list-item__description text-description\">\n        {{ option.description }}\n      </div>\n    </div>\n    <div\n      v-if=\"!props.useCheckbox && props.isSelected\"\n      class=\"dropdown-list-item__icon flex-self-start\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAgBR,IAAU,QAAuB;GACrC,IAAM,IAAuB,EAAE;AAU/B,UATI,EAAM,SAAS,WACjB,EAAW,KAAK,4BAA4B,EAE1C,EAAM,cACR,EAAW,KAAK,+BAA+B,EAE7C,EAAM,aACR,EAAW,KAAK,eAAe,EAE1B,EAAW,KAAK,IAAI;IAC3B,EAEI,IAAkB,QAAe;GACrC,IAAM,IAAoB,CAAC,gCAAgC,kBAAkB;AAI7E,UAHI,EAAM,cACR,EAAQ,KAAK,UAAU,EAElB,EAAQ,KAAK,IAAI;IACxB,EAGI,IAAc,QAAgB,EAAM,aAAa,IAAqB,EAAsB;yBAIhG,EAgBM,OAAA,EAhBA,OAAK,EAAA,CAAE,EAAA,OAAe,qBAAoB,CAAA,EAAA,EAAA;GAEnC,EAAM,eAAA,GAAA,EAAjB,EAA8E,OAAA;;IAA/C,OAAK,EAAE,EAAA,MAAe;IAAE,WAAQ,EAAA;;GAE/D,EAOM,OAPN,GAOM,CANJ,EAEM,OAFN,GAEM,EADD,EAAA,OAAO,MAAK,EAAA,EAAA,EAEN,EAAA,OAAO,eAAA,GAAA,EAAlB,EAEM,OAFN,GAEM,EADD,EAAA,OAAO,YAAW,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;IAIhB,EAAM,eAAe,EAAM,cAAA,GAAA,EADpC,EAGE,OAHF,EAGE,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"DropdownListItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/DropdownListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport CheckboxUncheckedSvg from \"../assets/images/24_checkbox-light-enabled-unchecked.svg?raw\";\nimport CheckboxCheckedSvg from \"../assets/images/24_checkbox-light-enabled-checked.svg?raw\";\nimport type { ListOptionNormalized } from \"../types\";\n\nconst props = withDefaults(\n  defineProps<{\n    option: ListOptionNormalized;\n    isSelected: boolean;\n    size: \"small\" | \"medium\";\n    isHovered: boolean;\n    useCheckbox?: boolean;\n  }>(),\n  {\n    size: \"small\",\n    isSelected: false,\n    isHovered: false,\n    useCheckbox: false,\n  },\n);\n\nconst classes = computed<string>(() => {\n  const classItems: string[] = [];\n  if (props.size === \"small\") {\n    classItems.push(\"dropdown-list-item__small\");\n  }\n  if (props.isSelected) {\n    classItems.push(\"dropdown-list-item__selected\");\n  }\n  if (props.isHovered) {\n    classItems.push(\"hovered-item\");\n  }\n  return classItems.join(\" \");\n});\n\nconst checkboxClasses = computed(() => {\n  const classes: string[] = [\"dropdown-list-item__checkbox\", \"flex-self-start\"];\n  if (props.isSelected) {\n    classes.push(\"checked\");\n  }\n  return classes.join(\" \");\n});\n\n// Why??\nconst checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : CheckboxUncheckedSvg));\n</script>\n\n<template>\n  <div :class=\"classes\" class=\"dropdown-list-item\" data-testid=\"pl-dropdown-list-item\">\n    <!-- eslint-disable vue/no-v-html -->\n    <div\n      v-if=\"props.useCheckbox\"\n      :class=\"checkboxClasses\"\n      data-testid=\"pl-dropdown-list-item-checkbox\"\n      v-html=\"checkboxSvg\"\n    />\n    <!--eslint-enable-->\n    <div class=\"dropdown-list-item__title-container\">\n      <div class=\"dropdown-list-item__title text-s\" data-testid=\"pl-dropdown-list-item-title\">\n        {{ option.label }}\n      </div>\n      <div\n        v-if=\"option.description\"\n        class=\"dropdown-list-item__description text-description\"\n        data-testid=\"pl-dropdown-list-item-description\"\n      >\n        {{ option.description }}\n      </div>\n    </div>\n    <div\n      v-if=\"!props.useCheckbox && props.isSelected\"\n      class=\"dropdown-list-item__icon flex-self-start\"\n      data-testid=\"pl-dropdown-list-item-selected-icon\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAgBR,IAAU,QAAuB;GACrC,IAAM,IAAuB,EAAE;AAU/B,UATI,EAAM,SAAS,WACjB,EAAW,KAAK,4BAA4B,EAE1C,EAAM,cACR,EAAW,KAAK,+BAA+B,EAE7C,EAAM,aACR,EAAW,KAAK,eAAe,EAE1B,EAAW,KAAK,IAAI;IAC3B,EAEI,IAAkB,QAAe;GACrC,IAAM,IAAoB,CAAC,gCAAgC,kBAAkB;AAI7E,UAHI,EAAM,cACR,EAAQ,KAAK,UAAU,EAElB,EAAQ,KAAK,IAAI;IACxB,EAGI,IAAc,QAAgB,EAAM,aAAa,IAAqB,EAAsB;yBAIhG,EA0BM,OAAA;GA1BA,OAAK,EAAA,CAAE,EAAA,OAAe,qBAAoB,CAAA;GAAC,eAAY;;GAGnD,EAAM,eAAA,GAAA,EADd,EAKE,OAAA;;IAHC,OAAK,EAAE,EAAA,MAAe;IACvB,eAAY;IACZ,WAAQ,EAAA;;GAGV,EAWM,OAXN,GAWM,CAVJ,EAEM,OAFN,GAEM,EADD,EAAA,OAAO,MAAK,EAAA,EAAA,EAGT,EAAA,OAAO,eAAA,GAAA,EADf,EAMM,OANN,GAMM,EADD,EAAA,OAAO,YAAW,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;IAIhB,EAAM,eAAe,EAAM,cAAA,GAAA,EADpC,EAIE,OAJF,EAIE,IAAA,EAAA,IAAA,GAAA"}

package/dist/components/InputRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputRange.js","names":[],"sources":["../../src/components/InputRange.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: [number, number];\n    separator?: string;\n  }>(),\n  {\n    separator: \"-\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", val: [number, number]): void;\n  (e: \"change\", val: [number, number]): void;\n}>();\n\nconst data = reactive({\n  left: props.modelValue[0],\n  right: props.modelValue[1],\n});\n\nconst isFocused = ref(false);\n\nconst classes = computed(() =>\n  isFocused.value ? \"ui-input-range-focused\" : \"ui-input-range-focused\",\n);\n\nconst valuesModel = computed({\n  get() {\n    return {\n      left: Math.min(...props.modelValue), // dangerous....\n      right: Math.max(...props.modelValue),\n    };\n  },\n  set() {},\n});\n\nwatch(\n  () => valuesModel.value,\n  (value) => (data.left = value.left) && (data.right = value.right),\n);\n\n// watch(\n//   () => props.modelValue,\n//   (value: [number, number]) => {\n//     console.log('model value updated');\n//     (data.left = value[0]), (data.right = value[1]);\n//   },\n// );\n\nfunction updateModel() {\n  emit(\"update:modelValue\", [+data.left, +data.right]);\n  emit(\"change\", [+data.left, +data.right]);\n}\n\nfunction validateInput(isLeft: boolean, event: Event) {\n  const value: string = (event.target as HTMLInputElement).value;\n  const result = /^[0-9]{0,2}$/.test(value);\n  // if there is more than 3 digits we cut last one\n  if (!result) {\n    if (isLeft) {\n      data.left = +value.slice(0, value.length - 1);\n    } else {\n      data.right = +value.slice(0, value.length - 1);\n    }\n  } else {\n    if (isLeft) {\n      data.left = +value;\n    } else {\n      data.right = +value;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- {{ data }} -->\n  <div :class=\"classes\" class=\"ui-input-range\" v-bind=\"$attrs\">\n    <input\n      v-model=\"valuesModel.left\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(true, $event)\"\n    />\n    <div class=\"ui-input-range__separator\">{{ props.separator }}</div>\n    <input\n      v-model=\"valuesModel.right\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(false, $event)\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InputRange.js","names":[],"sources":["../../src/components/InputRange.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: [number, number];\n    separator?: string;\n  }>(),\n  {\n    separator: \"-\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", val: [number, number]): void;\n  (e: \"change\", val: [number, number]): void;\n}>();\n\nconst data = reactive({\n  left: props.modelValue[0],\n  right: props.modelValue[1],\n});\n\nconst isFocused = ref(false);\n\nconst classes = computed(() =>\n  isFocused.value ? \"ui-input-range-focused\" : \"ui-input-range-focused\",\n);\n\nconst valuesModel = computed({\n  get() {\n    return {\n      left: Math.min(...props.modelValue), // dangerous....\n      right: Math.max(...props.modelValue),\n    };\n  },\n  set() {},\n});\n\nwatch(\n  () => valuesModel.value,\n  (value) => (data.left = value.left) && (data.right = value.right),\n);\n\n// watch(\n//   () => props.modelValue,\n//   (value: [number, number]) => {\n//     console.log('model value updated');\n//     (data.left = value[0]), (data.right = value[1]);\n//   },\n// );\n\nfunction updateModel() {\n  emit(\"update:modelValue\", [+data.left, +data.right]);\n  emit(\"change\", [+data.left, +data.right]);\n}\n\nfunction validateInput(isLeft: boolean, event: Event) {\n  const value: string = (event.target as HTMLInputElement).value;\n  const result = /^[0-9]{0,2}$/.test(value);\n  // if there is more than 3 digits we cut last one\n  if (!result) {\n    if (isLeft) {\n      data.left = +value.slice(0, value.length - 1);\n    } else {\n      data.right = +value.slice(0, value.length - 1);\n    }\n  } else {\n    if (isLeft) {\n      data.left = +value;\n    } else {\n      data.right = +value;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- {{ data }} -->\n  <div :class=\"classes\" class=\"ui-input-range\" data-testid=\"pl-input-range\" v-bind=\"$attrs\">\n    <input\n      v-model=\"valuesModel.left\"\n      data-testid=\"pl-input-range-left\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(true, $event)\"\n    />\n    <div data-testid=\"pl-input-range-separator\" class=\"ui-input-range__separator\">\n      {{ props.separator }}\n    </div>\n    <input\n      v-model=\"valuesModel.right\"\n      data-testid=\"pl-input-range-right\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(false, $event)\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"InputRange.vue.d.ts","sourceRoot":"","sources":["../../src/components/InputRange.vue"],"names":[],"mappings":"AA0GA,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA6JJ,QAAA,MAAM,YAAY;;;;;;;eA9JF,MAAM;6EAkKpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"InputRange.vue.d.ts","sourceRoot":"","sources":["../../src/components/InputRange.vue"],"names":[],"mappings":"AA8GA,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiKJ,QAAA,MAAM,YAAY;;;;;;;eAlKF,MAAM;6EAsKpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/InputRange.vue2.js

@@ -1,6 +1,9 @@
 import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeProps as i, openBlock as a, reactive as o, ref as s, toDisplayString as c, vModelText as l, watch as u, withDirectives as d } from "vue";
 //#region src/components/InputRange.vue?vue&type=script&setup=true&lang.ts
-var f = { class: "ui-input-range__separator" }, p = /* @__PURE__ */ r({
+var f = {
+	"data-testid": "pl-input-range-separator",
+	class: "ui-input-range__separator"
+}, p = /* @__PURE__ */ r({
 	__name: "InputRange",
 	props: {
 		modelValue: {},
@@ -28,9 +31,13 @@ var f = { class: "ui-input-range__separator" }, p = /* @__PURE__ */ r({
 			let n = t.target.value;
 			/^[0-9]{0,2}$/.test(n) ? e ? g.left = +n : g.right = +n : e ? g.left = +n.slice(0, n.length - 1) : g.right = +n.slice(0, n.length - 1);
 		}
-		return (e, r) => (a(), t("div", i({ class: [v.value, "ui-input-range"] }, e.$attrs), [
+		return (e, r) => (a(), t("div", i({
+			class: [v.value, "ui-input-range"],
+			"data-testid": "pl-input-range"
+		}, e.$attrs), [
 			d(n("input", {
 				"onUpdate:modelValue": r[0] ||= (e) => y.value.left = e,
+				"data-testid": "pl-input-range-left",
 				class: "text-s",
 				type: "text",
 				onChange: b,
@@ -41,6 +48,7 @@ var f = { class: "ui-input-range__separator" }, p = /* @__PURE__ */ r({
 			n("div", f, c(m.separator), 1),
 			d(n("input", {
 				"onUpdate:modelValue": r[4] ||= (e) => y.value.right = e,
+				"data-testid": "pl-input-range-right",
 				class: "text-s",
 				type: "text",
 				onChange: b,

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

@@ -1 +1 @@
-{"version":3,"file":"InputRange.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/components/InputRange.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: [number, number];\n    separator?: string;\n  }>(),\n  {\n    separator: \"-\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", val: [number, number]): void;\n  (e: \"change\", val: [number, number]): void;\n}>();\n\nconst data = reactive({\n  left: props.modelValue[0],\n  right: props.modelValue[1],\n});\n\nconst isFocused = ref(false);\n\nconst classes = computed(() =>\n  isFocused.value ? \"ui-input-range-focused\" : \"ui-input-range-focused\",\n);\n\nconst valuesModel = computed({\n  get() {\n    return {\n      left: Math.min(...props.modelValue), // dangerous....\n      right: Math.max(...props.modelValue),\n    };\n  },\n  set() {},\n});\n\nwatch(\n  () => valuesModel.value,\n  (value) => (data.left = value.left) && (data.right = value.right),\n);\n\n// watch(\n//   () => props.modelValue,\n//   (value: [number, number]) => {\n//     console.log('model value updated');\n//     (data.left = value[0]), (data.right = value[1]);\n//   },\n// );\n\nfunction updateModel() {\n  emit(\"update:modelValue\", [+data.left, +data.right]);\n  emit(\"change\", [+data.left, +data.right]);\n}\n\nfunction validateInput(isLeft: boolean, event: Event) {\n  const value: string = (event.target as HTMLInputElement).value;\n  const result = /^[0-9]{0,2}$/.test(value);\n  // if there is more than 3 digits we cut last one\n  if (!result) {\n    if (isLeft) {\n      data.left = +value.slice(0, value.length - 1);\n    } else {\n      data.right = +value.slice(0, value.length - 1);\n    }\n  } else {\n    if (isLeft) {\n      data.left = +value;\n    } else {\n      data.right = +value;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- {{ data }} -->\n  <div :class=\"classes\" class=\"ui-input-range\" v-bind=\"$attrs\">\n    <input\n      v-model=\"valuesModel.left\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(true, $event)\"\n    />\n    <div class=\"ui-input-range__separator\">{{ props.separator }}</div>\n    <input\n      v-model=\"valuesModel.right\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(false, $event)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAGA,IAAM,IAAQ,GAUR,IAAO,GAKP,IAAO,EAAS;GACpB,MAAM,EAAM,WAAW;GACvB,OAAO,EAAM,WAAW;GACzB,CAAC,EAEI,IAAY,EAAI,GAAM,EAEtB,IAAU,SACd,EAAU,OAAQ,0BACnB,EAEK,IAAc,EAAS;GAC3B,MAAM;AACJ,WAAO;KACL,MAAM,KAAK,IAAI,GAAG,EAAM,WAAW;KACnC,OAAO,KAAK,IAAI,GAAG,EAAM,WAAW;KACrC;;GAEH,MAAM;GACP,CAAC;AAEF,UACQ,EAAY,QACjB,OAAW,EAAK,OAAO,EAAM,UAAU,EAAK,QAAQ,EAAM,OAC5D;EAUD,SAAS,IAAc;AAErB,GADA,EAAK,qBAAqB,CAAC,CAAC,EAAK,MAAM,CAAC,EAAK,MAAM,CAAC,EACpD,EAAK,UAAU,CAAC,CAAC,EAAK,MAAM,CAAC,EAAK,MAAM,CAAC;;EAG3C,SAAS,EAAc,GAAiB,GAAc;GACpD,IAAM,IAAiB,EAAM,OAA4B;AAGzD,GAFe,eAAe,KAAK,EAAM,GASnC,IACF,EAAK,OAAO,CAAC,IAEb,EAAK,QAAQ,CAAC,IATZ,IACF,EAAK,OAAO,CAAC,EAAM,MAAM,GAAG,EAAM,SAAS,EAAE,GAE7C,EAAK,QAAQ,CAAC,EAAM,MAAM,GAAG,EAAM,SAAS,EAAE;;yBAclD,EAoBM,OApBN,EAoBM,EApBA,OAAK,CAAE,EAAA,OAAe,iBAAgB,EAAA,EAASA,EAAAA,OAAM,EAAA;KACzD,EAQE,SAAA;6CAPS,MAAY,OAAI;IACzB,OAAM;IACN,MAAK;IACJ,UAAQ;IACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IAChB,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IACnB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAa,IAAO,EAAM;uBANzB,EAAA,MAAY,KAAI,CAAA,CAAA;GAQ3B,EAAkE,OAAlE,GAAkE,EAAxB,EAAM,UAAS,EAAA,EAAA;KACzD,EAQE,SAAA;6CAPS,MAAY,QAAK;IAC1B,OAAM;IACN,MAAK;IACJ,UAAQ;IACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IAChB,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IACnB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAa,IAAQ,EAAM;uBAN1B,EAAA,MAAY,MAAK,CAAA,CAAA"}
+{"version":3,"file":"InputRange.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../src/components/InputRange.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: [number, number];\n    separator?: string;\n  }>(),\n  {\n    separator: \"-\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", val: [number, number]): void;\n  (e: \"change\", val: [number, number]): void;\n}>();\n\nconst data = reactive({\n  left: props.modelValue[0],\n  right: props.modelValue[1],\n});\n\nconst isFocused = ref(false);\n\nconst classes = computed(() =>\n  isFocused.value ? \"ui-input-range-focused\" : \"ui-input-range-focused\",\n);\n\nconst valuesModel = computed({\n  get() {\n    return {\n      left: Math.min(...props.modelValue), // dangerous....\n      right: Math.max(...props.modelValue),\n    };\n  },\n  set() {},\n});\n\nwatch(\n  () => valuesModel.value,\n  (value) => (data.left = value.left) && (data.right = value.right),\n);\n\n// watch(\n//   () => props.modelValue,\n//   (value: [number, number]) => {\n//     console.log('model value updated');\n//     (data.left = value[0]), (data.right = value[1]);\n//   },\n// );\n\nfunction updateModel() {\n  emit(\"update:modelValue\", [+data.left, +data.right]);\n  emit(\"change\", [+data.left, +data.right]);\n}\n\nfunction validateInput(isLeft: boolean, event: Event) {\n  const value: string = (event.target as HTMLInputElement).value;\n  const result = /^[0-9]{0,2}$/.test(value);\n  // if there is more than 3 digits we cut last one\n  if (!result) {\n    if (isLeft) {\n      data.left = +value.slice(0, value.length - 1);\n    } else {\n      data.right = +value.slice(0, value.length - 1);\n    }\n  } else {\n    if (isLeft) {\n      data.left = +value;\n    } else {\n      data.right = +value;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- {{ data }} -->\n  <div :class=\"classes\" class=\"ui-input-range\" data-testid=\"pl-input-range\" v-bind=\"$attrs\">\n    <input\n      v-model=\"valuesModel.left\"\n      data-testid=\"pl-input-range-left\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(true, $event)\"\n    />\n    <div data-testid=\"pl-input-range-separator\" class=\"ui-input-range__separator\">\n      {{ props.separator }}\n    </div>\n    <input\n      v-model=\"valuesModel.right\"\n      data-testid=\"pl-input-range-right\"\n      class=\"text-s\"\n      type=\"text\"\n      @change=\"updateModel\"\n      @focus=\"isFocused = true\"\n      @focusout=\"isFocused = false\"\n      @input=\"validateInput(false, $event)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAGA,IAAM,IAAQ,GAUR,IAAO,GAKP,IAAO,EAAS;GACpB,MAAM,EAAM,WAAW;GACvB,OAAO,EAAM,WAAW;GACzB,CAAC,EAEI,IAAY,EAAI,GAAM,EAEtB,IAAU,SACd,EAAU,OAAQ,0BACnB,EAEK,IAAc,EAAS;GAC3B,MAAM;AACJ,WAAO;KACL,MAAM,KAAK,IAAI,GAAG,EAAM,WAAW;KACnC,OAAO,KAAK,IAAI,GAAG,EAAM,WAAW;KACrC;;GAEH,MAAM;GACP,CAAC;AAEF,UACQ,EAAY,QACjB,OAAW,EAAK,OAAO,EAAM,UAAU,EAAK,QAAQ,EAAM,OAC5D;EAUD,SAAS,IAAc;AAErB,GADA,EAAK,qBAAqB,CAAC,CAAC,EAAK,MAAM,CAAC,EAAK,MAAM,CAAC,EACpD,EAAK,UAAU,CAAC,CAAC,EAAK,MAAM,CAAC,EAAK,MAAM,CAAC;;EAG3C,SAAS,EAAc,GAAiB,GAAc;GACpD,IAAM,IAAiB,EAAM,OAA4B;AAGzD,GAFe,eAAe,KAAK,EAAM,GASnC,IACF,EAAK,OAAO,CAAC,IAEb,EAAK,QAAQ,CAAC,IATZ,IACF,EAAK,OAAO,CAAC,EAAM,MAAM,GAAG,EAAM,SAAS,EAAE,GAE7C,EAAK,QAAQ,CAAC,EAAM,MAAM,GAAG,EAAM,SAAS,EAAE;;yBAclD,EAwBM,OAxBN,EAwBM;GAxBA,OAAK,CAAE,EAAA,OAAe,iBAAgB;GAAC,eAAY;KAAyBA,EAAAA,OAAM,EAAA;KACtF,EASE,SAAA;6CARS,MAAY,OAAI;IACzB,eAAY;IACZ,OAAM;IACN,MAAK;IACJ,UAAQ;IACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IAChB,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IACnB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAa,IAAO,EAAM;uBAPzB,EAAA,MAAY,KAAI,CAAA,CAAA;GAS3B,EAEM,OAFN,GAEM,EADD,EAAM,UAAS,EAAA,EAAA;KAEpB,EASE,SAAA;6CARS,MAAY,QAAK;IAC1B,eAAY;IACZ,OAAM;IACN,MAAK;IACJ,UAAQ;IACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IAChB,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;IACnB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAa,IAAQ,EAAM;uBAP1B,EAAA,MAAY,MAAK,CAAA,CAAA"}

package/dist/components/PlAccordion/PlAccordionSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAccordionSection.js","names":[],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? \"\" : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\">\n    <PlSectionSeparator :class=\"$style.separator\" :compact=\"compact\" @click=\"open = !open\">\n      <PlMaskIcon16 name=\"chevron-right\" :class=\"[{ [$style.down]: open }, $style.chevron]\" />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlAccordionSection.js","names":[],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? \"\" : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\" data-testid=\"pl-accordion-section\">\n    <PlSectionSeparator\n      data-testid=\"pl-accordion-section-header\"\n      :class=\"$style.separator\"\n      :compact=\"compact\"\n      @click=\"open = !open\"\n    >\n      <PlMaskIcon16\n        data-testid=\"pl-accordion-section-chevron\"\n        name=\"chevron-right\"\n        :class=\"[{ [$style.down]: open }, $style.chevron]\"\n      />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" data-testid=\"pl-accordion-section-body\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAccordion/PlAccordionSection.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAccordionSection.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? \"\" : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\">\n    <PlSectionSeparator :class=\"$style.separator\" :compact=\"compact\" @click=\"open = !open\">\n      <PlMaskIcon16 name=\"chevron-right\" :class=\"[{ [$style.down]: open }, $style.chevron]\" />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlAccordionSection.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? \"\" : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\" data-testid=\"pl-accordion-section\">\n    <PlSectionSeparator\n      data-testid=\"pl-accordion-section-header\"\n      :class=\"$style.separator\"\n      :compact=\"compact\"\n      @click=\"open = !open\"\n    >\n      <PlMaskIcon16\n        data-testid=\"pl-accordion-section-chevron\"\n        name=\"chevron-right\"\n        :class=\"[{ [$style.down]: open }, $style.chevron]\"\n      />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" data-testid=\"pl-accordion-section-body\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAccordion/PlAccordionSection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlAccordionSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"names":[],"mappings":"AA4IA,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA6FxD,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;kFAGd,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":"PlAccordionSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"names":[],"mappings":"AAqJA,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAmGxD,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;kFAGd,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/PlAccordion/PlAccordionSection.vue2.js

@@ -6,7 +6,10 @@ import n from "./ExpandTransition.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, normalizeClass as d, openBlock as f, renderSlot as p, toDisplayString as m, toRef as h, unref as g, useModel as _, withCtx as v } from "vue";
 import { uniqueId as y } from "@milaboratories/helpers";
 //#region src/components/PlAccordion/PlAccordionSection.vue?vue&type=script&setup=true&lang.ts
-var b = { class: "pl-accordion-section" }, x = /* @__PURE__ */ c({
+var b = {
+	class: "pl-accordion-section",
+	"data-testid": "pl-accordion-section"
+}, x = /* @__PURE__ */ c({
 	__name: "PlAccordionSection",
 	props: /* @__PURE__ */ u({
 		label: {},
@@ -26,11 +29,13 @@ var b = { class: "pl-accordion-section" }, x = /* @__PURE__ */ c({
 			}
 		});
 		return (r, l) => (f(), a("div", b, [s(g(t), {
+			"data-testid": "pl-accordion-section-header",
 			class: d(r.$style.separator),
 			compact: c.compact,
 			onClick: l[0] ||= (e) => T.value = !T.value
 		}, {
 			default: v(() => [s(g(e), {
+				"data-testid": "pl-accordion-section-chevron",
 				name: "chevron-right",
 				class: d([{ [r.$style.down]: T.value }, r.$style.chevron])
 			}, null, 8, ["class"]), o(" " + m(c.label), 1)]),
@@ -38,6 +43,7 @@ var b = { class: "pl-accordion-section" }, x = /* @__PURE__ */ c({
 		}, 8, ["class", "compact"]), s(n, null, {
 			default: v(() => [T.value ? (f(), a("div", {
 				key: 0,
+				"data-testid": "pl-accordion-section-body",
 				class: d(r.$style.content)
 			}, [p(r.$slots, "default")], 2)) : i("", !0)]),
 			_: 3

package/dist/components/PlAccordion/PlAccordionSection.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAccordionSection.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? \"\" : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\">\n    <PlSectionSeparator :class=\"$style.separator\" :compact=\"compact\" @click=\"open = !open\">\n      <PlMaskIcon16 name=\"chevron-right\" :class=\"[{ [$style.down]: open }, $style.chevron]\" />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAK,EAAoB,4BAA4B,EAAM,GAAG,EAAE,GAAK,EAErE,IAAK,EAIT,4BAA4B,EAAM,EAAE,UAAU,IAAO,CAAC,EAAE,GAAK,EAEzD,IAAQ,EAAoB,GAAA,aAAE,EAE9B,IAAK,GAAU,EAEf,IAAU,QAAe,CAAC,KAAM,EAAG,MAAM,SAAS,EAElD,IAAO,EAAS;GACpB,MAAM;AAKJ,WAJI,EAAQ,QACH,EAAM,QAGR,IAAK,EAAG,UAAU,IAAK,EAAM;;GAEtC,IAAI,GAAI;AACN,IAAI,EAAQ,QACV,EAAM,QAAQ,IACL,MACT,EAAG,QAAQ,EAAG,UAAU,IAAK,KAAK;;GAGvC,CAAC;yBAeA,EAUM,OAVN,GAUM,CATJ,EAGqB,EAAA,EAAA,EAAA;GAHA,OAAK,EAAEA,EAAAA,OAAO,UAAS;GAAG,SAAS,EAAA;GAAU,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAI,CAAI,EAAA;;oBACS,CAAxF,EAAwF,EAAA,EAAA,EAAA;IAA1E,MAAK;IAAiB,OAAK,EAAA,CAAA,GAAMA,EAAAA,OAAO,OAAO,EAAA,OAAI,EAAIA,EAAAA,OAAO,QAAO,CAAA;6BAAK,MACxF,EAAG,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;+BAEV,EAImB,GAAA,MAAA;oBADX,CAFK,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;IAFY,OAAK,EAAEA,EAAAA,OAAO,QAAO;OACrC,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"PlAccordionSection.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAccordion/PlAccordionSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSectionSeparator } from \"../PlSectionSeparator\";\nimport ExpandTransition from \"./ExpandTransition.vue\";\nimport type { Ref } from \"vue\";\nimport { computed, inject, toRef } from \"vue\";\n\nconst $m = inject<Ref<string>>(\"pl-accordion-model\", () => toRef(\"\"), true);\n\nconst $p = inject<\n  Ref<{\n    multiple?: boolean;\n  }>\n>(\"pl-accordion-props\", () => toRef({ multiple: false }), true);\n\nconst model = defineModel<boolean>();\n\nconst id = uniqueId();\n\nconst isMulti = computed(() => !$p || $p.value.multiple);\n\nconst open = computed({\n  get() {\n    if (isMulti.value) {\n      return model.value;\n    }\n\n    return $m ? $m.value === id : model.value;\n  },\n  set(on) {\n    if (isMulti.value) {\n      model.value = on;\n    } else if ($m) {\n      $m.value = $m.value === id ? \"\" : id;\n    }\n  },\n});\n\ndefineProps<{\n  /**\n   * The label text (optional)\n   */\n  label?: string;\n  /**\n   * If `true`, remove top padding\n   */\n  compact?: boolean;\n}>();\n</script>\n\n<template>\n  <div class=\"pl-accordion-section\" data-testid=\"pl-accordion-section\">\n    <PlSectionSeparator\n      data-testid=\"pl-accordion-section-header\"\n      :class=\"$style.separator\"\n      :compact=\"compact\"\n      @click=\"open = !open\"\n    >\n      <PlMaskIcon16\n        data-testid=\"pl-accordion-section-chevron\"\n        name=\"chevron-right\"\n        :class=\"[{ [$style.down]: open }, $style.chevron]\"\n      />\n      {{ label }}\n    </PlSectionSeparator>\n    <ExpandTransition>\n      <div v-if=\"open\" data-testid=\"pl-accordion-section-body\" :class=\"$style.content\">\n        <slot />\n      </div>\n    </ExpandTransition>\n  </div>\n</template>\n\n<style module>\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-v);\n  will-change: height, opacity;\n  /* transform: translateZ(0);\n  backface-visibility: hidden; */\n}\n\n.content > *:first-child {\n  margin-top: 24px;\n}\n\n.content > *:last-child {\n  margin-bottom: 4px;\n}\n\n.separator {\n  cursor: pointer;\n  &:hover {\n    --pl-separator-txt-color: var(--txt-01);\n    --mask-icon-bg-color: var(--ic-01);\n  }\n}\n\n.chevron {\n  transition-duration: 50ms;\n}\n\n.down {\n  transform: rotate(90deg);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAK,EAAoB,4BAA4B,EAAM,GAAG,EAAE,GAAK,EAErE,IAAK,EAIT,4BAA4B,EAAM,EAAE,UAAU,IAAO,CAAC,EAAE,GAAK,EAEzD,IAAQ,EAAoB,GAAA,aAAE,EAE9B,IAAK,GAAU,EAEf,IAAU,QAAe,CAAC,KAAM,EAAG,MAAM,SAAS,EAElD,IAAO,EAAS;GACpB,MAAM;AAKJ,WAJI,EAAQ,QACH,EAAM,QAGR,IAAK,EAAG,UAAU,IAAK,EAAM;;GAEtC,IAAI,GAAI;AACN,IAAI,EAAQ,QACV,EAAM,QAAQ,IACL,MACT,EAAG,QAAQ,EAAG,UAAU,IAAK,KAAK;;GAGvC,CAAC;yBAeA,EAmBM,OAnBN,GAmBM,CAlBJ,EAYqB,EAAA,EAAA,EAAA;GAXnB,eAAY;GACX,OAAK,EAAEA,EAAAA,OAAO,UAAS;GACvB,SAAS,EAAA;GACT,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAI,CAAI,EAAA;;oBAMd,CAJF,EAIE,EAAA,EAAA,EAAA;IAHA,eAAY;IACZ,MAAK;IACJ,OAAK,EAAA,CAAA,GAAMA,EAAAA,OAAO,OAAO,EAAA,OAAI,EAAIA,EAAAA,OAAO,QAAO,CAAA;6BAChD,MACF,EAAG,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;+BAEV,EAImB,GAAA,MAAA;oBADX,CAFK,EAAA,SAAA,GAAA,EAAX,EAEM,OAAA;;IAFW,eAAY;IAA6B,OAAK,EAAEA,EAAAA,OAAO,QAAO;OAC7E,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/components/PlAlert/PlAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAlert.js","names":[],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated, typically when the close button is clicked.\n   *\n   * @param value - The new value of the model, generally `false` when the alert is closed.\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nwithDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the alert component. If `true`, the alert is visible.\n     *\n     * @default true\n     */\n    modelValue?: boolean;\n    /**\n     * The type of alert, which determines the alert's style and icon.\n     * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n     */\n    type?: \"success\" | \"info\" | \"warn\" | \"error\";\n    /**\n     * An optional label that appears at the top of the alert.\n     */\n    label?: string;\n    /**\n     * If `true`, an icon corresponding to the alert type is displayed.\n     */\n    icon?: boolean;\n    /**\n     * If `true`, a close button is displayed in the alert, allowing the user to close it.\n     */\n    closeable?: boolean;\n    /**\n     * If `true`, the alert text is displayed in a monospace font.\n     */\n    monospace?: boolean;\n    /**\n     * If `true`, the alert content will preserve whitespace and line breaks.\n     */\n    whiteSpacePre?: boolean;\n\n    /**\n     * Max height (css value like '120px or 30%')\n     */\n    maxHeight?: string;\n  }>(),\n  {\n    modelValue: true,\n    type: undefined,\n    label: undefined,\n    icon: undefined,\n    closeable: undefined,\n    monospace: undefined,\n    whiteSpacePre: undefined,\n    maxHeight: undefined,\n  },\n);\n\nconst iconMap = {\n  success: \"success\",\n  warn: \"warning\",\n  info: \"edit\",\n  error: \"error\",\n};\n</script>\n\n<template>\n  <div\n    v-if=\"modelValue\"\n    class=\"pl-alert\"\n    :style=\"{ maxHeight }\"\n    :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n  >\n    <div v-if=\"icon && type\" class=\"pl-alert__icon\">\n      <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n    </div>\n    <div class=\"pl-alert__main\">\n      <label v-if=\"label\">{{ label }}</label>\n      <div class=\"pl-alert__main__text\"><slot /></div>\n    </div>\n    <PlCloseModalBtn\n      v-if=\"closeable\"\n      class=\"pl-alert__close-btn\"\n      @click=\"$emit('update:modelValue', false)\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlAlert.js","names":[],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated, typically when the close button is clicked.\n   *\n   * @param value - The new value of the model, generally `false` when the alert is closed.\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nwithDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the alert component. If `true`, the alert is visible.\n     *\n     * @default true\n     */\n    modelValue?: boolean;\n    /**\n     * The type of alert, which determines the alert's style and icon.\n     * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n     */\n    type?: \"success\" | \"info\" | \"warn\" | \"error\";\n    /**\n     * An optional label that appears at the top of the alert.\n     */\n    label?: string;\n    /**\n     * If `true`, an icon corresponding to the alert type is displayed.\n     */\n    icon?: boolean;\n    /**\n     * If `true`, a close button is displayed in the alert, allowing the user to close it.\n     */\n    closeable?: boolean;\n    /**\n     * If `true`, the alert text is displayed in a monospace font.\n     */\n    monospace?: boolean;\n    /**\n     * If `true`, the alert content will preserve whitespace and line breaks.\n     */\n    whiteSpacePre?: boolean;\n\n    /**\n     * Max height (css value like '120px or 30%')\n     */\n    maxHeight?: string;\n  }>(),\n  {\n    modelValue: true,\n    type: undefined,\n    label: undefined,\n    icon: undefined,\n    closeable: undefined,\n    monospace: undefined,\n    whiteSpacePre: undefined,\n    maxHeight: undefined,\n  },\n);\n\nconst iconMap = {\n  success: \"success\",\n  warn: \"warning\",\n  info: \"edit\",\n  error: \"error\",\n};\n</script>\n\n<template>\n  <div\n    v-if=\"modelValue\"\n    data-testid=\"pl-alert\"\n    class=\"pl-alert\"\n    :style=\"{ maxHeight }\"\n    :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n  >\n    <div v-if=\"icon && type\" data-testid=\"pl-alert-icon\" class=\"pl-alert__icon\">\n      <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n    </div>\n    <div class=\"pl-alert__main\">\n      <label v-if=\"label\" data-testid=\"pl-alert-label\">{{ label }}</label>\n      <div data-testid=\"pl-alert-message\" class=\"pl-alert__main__text\"><slot /></div>\n    </div>\n    <PlCloseModalBtn\n      v-if=\"closeable\"\n      data-testid=\"pl-alert-close\"\n      class=\"pl-alert__close-btn\"\n      @click=\"$emit('update:modelValue', false)\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlAlert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAlert/PlAlert.vue"],"names":[],"mappings":"AAuGA,OAAO,iBAAiB,CAAC;wBAKJ,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAYd;;;;OAIG;iBACU,OAAO;IACpB;;;OAGG;WACI,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;IAC5C;;OAEG;YACK,MAAM;IACd;;OAEG;WACI,OAAO;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;oBACa,OAAO;IAEvB;;OAEG;gBACS,MAAM;;;;IAnClB;;;;OAIG;iBACU,OAAO;IACpB;;;OAGG;WACI,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;IAC5C;;OAEG;YACK,MAAM;IACd;;OAEG;WACI,OAAO;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;oBACa,OAAO;IAEvB;;OAEG;gBACS,MAAM;;;;WArBV,MAAM;gBATD,OAAO;UAKb,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;UAQrC,OAAO;eAiBF,MAAM;eAbN,OAAO;eAIP,OAAO;mBAIH,OAAO;;cAwHb,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,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":"PlAlert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAlert/PlAlert.vue"],"names":[],"mappings":"AAyGA,OAAO,iBAAiB,CAAC;wBAKJ,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAYd;;;;OAIG;iBACU,OAAO;IACpB;;;OAGG;WACI,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;IAC5C;;OAEG;YACK,MAAM;IACd;;OAEG;WACI,OAAO;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;oBACa,OAAO;IAEvB;;OAEG;gBACS,MAAM;;;;IAnClB;;;;OAIG;iBACU,OAAO;IACpB;;;OAGG;WACI,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;IAC5C;;OAEG;YACK,MAAM;IACd;;OAEG;WACI,OAAO;IACd;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;oBACa,OAAO;IAEvB;;OAEG;gBACS,MAAM;;;;WArBV,MAAM;gBATD,OAAO;UAKb,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;UAQrC,OAAO;eAiBF,MAAM;eAbN,OAAO;eAIP,OAAO;mBAIH,OAAO;;cA8Hb,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,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/PlAlert/PlAlert.vue2.js

@@ -4,8 +4,15 @@ import { createBlock as t, createCommentVNode as n, createElementBlock as r, cre
 //#region src/components/PlAlert/PlAlert.vue?vue&type=script&setup=true&lang.ts
 var d = {
 	key: 0,
+	"data-testid": "pl-alert-icon",
 	class: "pl-alert__icon"
-}, f = { class: "pl-alert__main" }, p = { key: 0 }, m = { class: "pl-alert__main__text" }, h = /* @__PURE__ */ a({
+}, f = { class: "pl-alert__main" }, p = {
+	key: 0,
+	"data-testid": "pl-alert-label"
+}, m = {
+	"data-testid": "pl-alert-message",
+	class: "pl-alert__main__text"
+}, h = /* @__PURE__ */ a({
 	name: "PlAlert",
 	props: {
 		modelValue: {
@@ -42,6 +49,7 @@ var d = {
 		};
 		return (g, _) => a.modelValue ? (c(), r("div", {
 			key: 0,
+			"data-testid": "pl-alert",
 			class: o(["pl-alert", [{
 				monospace: a.monospace,
 				whiteSpacePre: a.whiteSpacePre
@@ -52,6 +60,7 @@ var d = {
 			i("div", f, [a.label ? (c(), r("label", p, u(a.label), 1)) : n("", !0), i("div", m, [l(g.$slots, "default")])]),
 			a.closeable ? (c(), t(e, {
 				key: 1,
+				"data-testid": "pl-alert-close",
 				class: "pl-alert__close-btn",
 				onClick: _[0] ||= (e) => g.$emit("update:modelValue", !1)
 			})) : n("", !0)

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

@@ -1 +1 @@
-{"version":3,"file":"PlAlert.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated, typically when the close button is clicked.\n   *\n   * @param value - The new value of the model, generally `false` when the alert is closed.\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nwithDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the alert component. If `true`, the alert is visible.\n     *\n     * @default true\n     */\n    modelValue?: boolean;\n    /**\n     * The type of alert, which determines the alert's style and icon.\n     * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n     */\n    type?: \"success\" | \"info\" | \"warn\" | \"error\";\n    /**\n     * An optional label that appears at the top of the alert.\n     */\n    label?: string;\n    /**\n     * If `true`, an icon corresponding to the alert type is displayed.\n     */\n    icon?: boolean;\n    /**\n     * If `true`, a close button is displayed in the alert, allowing the user to close it.\n     */\n    closeable?: boolean;\n    /**\n     * If `true`, the alert text is displayed in a monospace font.\n     */\n    monospace?: boolean;\n    /**\n     * If `true`, the alert content will preserve whitespace and line breaks.\n     */\n    whiteSpacePre?: boolean;\n\n    /**\n     * Max height (css value like '120px or 30%')\n     */\n    maxHeight?: string;\n  }>(),\n  {\n    modelValue: true,\n    type: undefined,\n    label: undefined,\n    icon: undefined,\n    closeable: undefined,\n    monospace: undefined,\n    whiteSpacePre: undefined,\n    maxHeight: undefined,\n  },\n);\n\nconst iconMap = {\n  success: \"success\",\n  warn: \"warning\",\n  info: \"edit\",\n  error: \"error\",\n};\n</script>\n\n<template>\n  <div\n    v-if=\"modelValue\"\n    class=\"pl-alert\"\n    :style=\"{ maxHeight }\"\n    :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n  >\n    <div v-if=\"icon && type\" class=\"pl-alert__icon\">\n      <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n    </div>\n    <div class=\"pl-alert__main\">\n      <label v-if=\"label\">{{ label }}</label>\n      <div class=\"pl-alert__main__text\"><slot /></div>\n    </div>\n    <PlCloseModalBtn\n      v-if=\"closeable\"\n      class=\"pl-alert__close-btn\"\n      @click=\"$emit('update:modelValue', false)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;CAEE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqER,IAAM,IAAU;GACd,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACR;mBAKS,EAAA,cAAA,GAAA,EADR,EAkBM,OAAA;;GAhBJ,OAAK,EAAA,CAAC,YAAU,CAAA;IAAA,WAEL,EAAA;IAAS,eAAE,EAAA;IAAa,EAAI,EAAA,OAAI,aAAgB,EAAA,SAAI,GAAA,CAAA,CAAA;GAD9D,OAAK,EAAA,EAAA,WAAI,EAAA,WAAS,CAAA;;GAGR,EAAA,QAAQ,EAAA,QAAA,GAAA,EAAnB,EAEM,OAFN,GAEM,CADJ,EAAgD,OAAA,EAA1C,OAAK,EAAA,gBAAkB,EAAQ,EAAA,QAAI,EAAA,EAAA,MAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAE3C,EAGM,OAHN,GAGM,CAFS,EAAA,SAAA,GAAA,EAAb,EAAuC,SAAA,GAAA,EAAhB,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAC5B,EAAgD,OAAhD,GAAgD,CAAd,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA;GAGpC,EAAA,aAAA,GAAA,EADR,EAIE,GAAA;;IAFA,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAA,GAAA"}
+{"version":3,"file":"PlAlert.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlAlert/PlAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-alert.scss\";\n\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated, typically when the close button is clicked.\n   *\n   * @param value - The new value of the model, generally `false` when the alert is closed.\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\nwithDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the alert component. If `true`, the alert is visible.\n     *\n     * @default true\n     */\n    modelValue?: boolean;\n    /**\n     * The type of alert, which determines the alert's style and icon.\n     * Can be one of `'success' | 'info' | 'warn' | 'error'`.\n     */\n    type?: \"success\" | \"info\" | \"warn\" | \"error\";\n    /**\n     * An optional label that appears at the top of the alert.\n     */\n    label?: string;\n    /**\n     * If `true`, an icon corresponding to the alert type is displayed.\n     */\n    icon?: boolean;\n    /**\n     * If `true`, a close button is displayed in the alert, allowing the user to close it.\n     */\n    closeable?: boolean;\n    /**\n     * If `true`, the alert text is displayed in a monospace font.\n     */\n    monospace?: boolean;\n    /**\n     * If `true`, the alert content will preserve whitespace and line breaks.\n     */\n    whiteSpacePre?: boolean;\n\n    /**\n     * Max height (css value like '120px or 30%')\n     */\n    maxHeight?: string;\n  }>(),\n  {\n    modelValue: true,\n    type: undefined,\n    label: undefined,\n    icon: undefined,\n    closeable: undefined,\n    monospace: undefined,\n    whiteSpacePre: undefined,\n    maxHeight: undefined,\n  },\n);\n\nconst iconMap = {\n  success: \"success\",\n  warn: \"warning\",\n  info: \"edit\",\n  error: \"error\",\n};\n</script>\n\n<template>\n  <div\n    v-if=\"modelValue\"\n    data-testid=\"pl-alert\"\n    class=\"pl-alert\"\n    :style=\"{ maxHeight }\"\n    :class=\"[{ monospace, whiteSpacePre }, type ? `pl-alert__${type}` : '']\"\n  >\n    <div v-if=\"icon && type\" data-testid=\"pl-alert-icon\" class=\"pl-alert__icon\">\n      <div :class=\"`icon-24 icon-${iconMap[type]}`\" />\n    </div>\n    <div class=\"pl-alert__main\">\n      <label v-if=\"label\" data-testid=\"pl-alert-label\">{{ label }}</label>\n      <div data-testid=\"pl-alert-message\" class=\"pl-alert__main__text\"><slot /></div>\n    </div>\n    <PlCloseModalBtn\n      v-if=\"closeable\"\n      data-testid=\"pl-alert-close\"\n      class=\"pl-alert__close-btn\"\n      @click=\"$emit('update:modelValue', false)\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;CAEE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqER,IAAM,IAAU;GACd,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACR;mBAKS,EAAA,cAAA,GAAA,EADR,EAoBM,OAAA;;GAlBJ,eAAY;GACZ,OAAK,EAAA,CAAC,YAAU,CAAA;IAAA,WAEL,EAAA;IAAS,eAAE,EAAA;IAAa,EAAI,EAAA,OAAI,aAAgB,EAAA,SAAI,GAAA,CAAA,CAAA;GAD9D,OAAK,EAAA,EAAA,WAAI,EAAA,WAAS,CAAA;;GAGR,EAAA,QAAQ,EAAA,QAAA,GAAA,EAAnB,EAEM,OAFN,GAEM,CADJ,EAAgD,OAAA,EAA1C,OAAK,EAAA,gBAAkB,EAAQ,EAAA,QAAI,EAAA,EAAA,MAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAE3C,EAGM,OAHN,GAGM,CAFS,EAAA,SAAA,GAAA,EAAb,EAAoE,SAApE,GAAoE,EAAhB,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EACzD,EAA+E,OAA/E,GAA+E,CAAd,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA;GAGnE,EAAA,aAAA,GAAA,EADR,EAKE,GAAA;;IAHA,eAAY;IACZ,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAA,GAAA"}

package/dist/components/PlAutocomplete/PlAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAutocomplete.js","names":[],"sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a big list of options using string search request\n */\nexport default {\n  name: \"PlAutocomplete\",\n};\n</script>\n\n<script\n  lang=\"ts\"\n  setup\n  generic=\"M extends null | undefined | string | number = null | undefined | string\"\n>\nimport \"./pl-autocomplete.scss\";\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport { tap } from \"../../helpers/functions\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport type { ListOption, ListOptionNormalized } from \"../../types\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport LongText from \"../LongText.vue\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport { refDebounced } from \"@vueuse/core\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { isNil } from \"@milaboratories/helpers\";\n\n/**\n * The current selected value.\n */\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: (string: string, type: \"value\" | \"label\") => Promise<ListOption<M>[]>;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: string;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: string;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n    /**\n     * Formatter for the selected value if its label is absent\n     */\n    formatValue?: (value: M) => string;\n    /**\n     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    modelSearch: undefined,\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    formatValue: (v: M) => String(v),\n    groupPosition: undefined,\n  },\n);\n\nconst slots = defineSlots<{\n  [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlayRef = useTemplateRef(\"overlay\");\n\nconst search = ref<string | null>(null);\nconst data = reactive({\n  activeIndex: -1,\n  open: false,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> | undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n  return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n  return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n  return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (isLoadingError.value) {\n    return \"Data loading error\";\n  }\n\n  return undefined;\n});\n\nconst textValue = computed(() => {\n  const modelOption = unref(modelOptionRef);\n  const options = unref(renderedOptionsRef);\n\n  const item: ListOptionNormalized | undefined =\n    modelOption ??\n    options.find((o) => deepEqual(o.value, model.value)) ??\n    options.find((o) => deepEqual(o.value, model.value));\n\n  return item?.label || (model.value ? props.formatValue(model.value) : \"\");\n});\n\n// Native tooltip with the full selected value; the value layer itself has\n// `pointer-events: none`, so the title goes on the field wrapper.\nconst fieldTitle = computed(() => (!data.open && textValue.value ? textValue.value : undefined));\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && model.value) {\n    return \"\";\n  }\n\n  return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: (ListOptionBase<M> & { index: number }) | undefined) => {\n  model.value = v?.value as M;\n  modelOptionRef.value = v;\n  search.value = null;\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst clear = () => {\n  model.value = undefined as M;\n  modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n};\n\nwatch(\n  () => data.open,\n  (v) => {\n    search.value = v ? \"\" : null;\n  },\n);\n\nconst onInputFocus = () => {\n  data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (\n    !rootRef.value?.contains(relatedTarget) &&\n    !overlayRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    search.value = null;\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n      search.value = \"\";\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    search.value = null;\n    rootRef.value?.focus();\n  }\n\n  const options = unref(renderedOptionsRef);\n\n  const { length } = options;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(options.find((it) => it.index === activeIndex));\n  }\n\n  const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  search.value; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    overlayRef.value?.scrollIntoActive();\n  }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(\n  () => searchDebounced.value,\n  async (v) => (isNil(v) ? undefined : props.optionsSearch(v, \"label\")),\n);\n\nconst modelOptionRequest = useWatchFetch(\n  () => model.value,\n  async (v) => {\n    if (isNil(v) || deepEqual(modelOptionRef.value?.value, v)) {\n      return modelOptionRef.value;\n    }\n\n    const options = await props.optionsSearch(String(v), \"value\");\n    return options.find((o) => String(o.value) === String(v));\n  },\n);\n\nwatch(\n  () => optionsRequest.value,\n  (result) => {\n    if (result) {\n      loadedOptionsRef.value = result;\n      if (search.value !== null) {\n        isLoadingError.value = false;\n      }\n    }\n  },\n);\n\nwatch(\n  () => modelOptionRequest.value,\n  (result) => {\n    if (result) {\n      modelOptionRef.value = normalizeListOptions([result])[0];\n    }\n  },\n);\n\nwatch(\n  () => optionsRequest.error,\n  (err) => {\n    if (err) {\n      isLoadingError.value = Boolean(err);\n    }\n  },\n);\n\nwatch(\n  () => optionsRequest.loading || modelOptionRequest.loading,\n  (loading) => {\n    isLoadingOptions.value = loading;\n  },\n);\n</script>\n\n<template>\n  <div class=\"pl-autocomplete__envelope\" @click.stop=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete__container\">\n        <div class=\"pl-autocomplete__field\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-autocomplete__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div class=\"pl-autocomplete__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <div\n                v-if=\"arrowIconLarge\"\n                class=\"arrow-icon\"\n                :class=\"[`icon-24 ${arrowIconLarge}`]\"\n              />\n              <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n              <div v-else class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-autocomplete__options\"\n          tabindex=\"-1\"\n          :gap=\"3\"\n        >\n          <DropdownListItem\n            v-for=\"(item, index) in renderedOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            @click.stop=\"selectOption(item)\"\n          />\n          <div v-if=\"!renderedOptionsRef.length\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-autocomplete__error\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-autocomplete__helper\">\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlAutocomplete.js","names":[],"sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a big list of options using string search request\n */\nexport default {\n  name: \"PlAutocomplete\",\n};\n</script>\n\n<script\n  lang=\"ts\"\n  setup\n  generic=\"M extends null | undefined | string | number = null | undefined | string\"\n>\nimport \"./pl-autocomplete.scss\";\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport { tap } from \"../../helpers/functions\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport type { ListOption, ListOptionNormalized } from \"../../types\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport LongText from \"../LongText.vue\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport { refDebounced } from \"@vueuse/core\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { isNil } from \"@milaboratories/helpers\";\n\n/**\n * The current selected value.\n */\nconst model = defineModel<M>({ required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: (string: string, type: \"value\" | \"label\") => Promise<ListOption<M>[]>;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: string;\n    /**\n     * Error message displayed below the dropdown (optional)\n     */\n    error?: unknown;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: string;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: string;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n    /**\n     * Formatter for the selected value if its label is absent\n     */\n    formatValue?: (value: M) => string;\n    /**\n     * Makes some of corners not rounded\n     * */\n    groupPosition?:\n      | \"top\"\n      | \"bottom\"\n      | \"left\"\n      | \"right\"\n      | \"top-left\"\n      | \"top-right\"\n      | \"bottom-left\"\n      | \"bottom-right\"\n      | \"middle\";\n  }>(),\n  {\n    modelSearch: undefined,\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    formatValue: (v: M) => String(v),\n    groupPosition: undefined,\n  },\n);\n\nconst slots = defineSlots<{\n  [key: string]: unknown;\n}>();\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst overlayRef = useTemplateRef(\"overlay\");\n\nconst search = ref<string | null>(null);\nconst data = reactive({\n  activeIndex: -1,\n  open: false,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    renderedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst loadedOptionsRef = ref<ListOption<M>[]>([]);\nconst modelOptionRef = ref<ListOptionNormalized<M> | undefined>(); // list of 1 option that is selected or empty, to keep selected label\n\nconst renderedOptionsRef = computed(() => {\n  return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })) as (ListOptionBase<M> & { index: number; isSelected: boolean; isActive: boolean })[];\n});\nconst isLoadingOptions = ref<boolean>(true);\nconst isLoadingError = ref<boolean>(false);\n\nconst isDisabled = computed(() => {\n  return props.disabled;\n});\n\nconst selectedIndex = computed(() => {\n  return loadedOptionsRef.value.findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (isLoadingError.value) {\n    return \"Data loading error\";\n  }\n\n  return undefined;\n});\n\nconst textValue = computed(() => {\n  const modelOption = unref(modelOptionRef);\n  const options = unref(renderedOptionsRef);\n\n  const item: ListOptionNormalized | undefined =\n    modelOption ??\n    options.find((o) => deepEqual(o.value, model.value)) ??\n    options.find((o) => deepEqual(o.value, model.value));\n\n  return item?.label || (model.value ? props.formatValue(model.value) : \"\");\n});\n\n// Native tooltip with the full selected value; the value layer itself has\n// `pointer-events: none`, so the title goes on the field wrapper.\nconst fieldTitle = computed(() => (!data.open && textValue.value ? textValue.value : undefined));\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && model.value) {\n    return \"\";\n  }\n\n  return model.value ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return model.value !== undefined && model.value !== null;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: (ListOptionBase<M> & { index: number }) | undefined) => {\n  model.value = v?.value as M;\n  modelOptionRef.value = v;\n  search.value = null;\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst clear = () => {\n  model.value = undefined as M;\n  modelOptionRef.value = undefined;\n};\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n};\n\nwatch(\n  () => data.open,\n  (v) => {\n    search.value = v ? \"\" : null;\n  },\n);\n\nconst onInputFocus = () => {\n  data.open = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (\n    !rootRef.value?.contains(relatedTarget) &&\n    !overlayRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    search.value = null;\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n      search.value = \"\";\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    search.value = null;\n    rootRef.value?.focus();\n  }\n\n  const options = unref(renderedOptionsRef);\n\n  const { length } = options;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(options.find((it) => it.index === activeIndex));\n  }\n\n  const localIndex = options.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = renderedOptionsRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => model.value, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  search.value; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    overlayRef.value?.scrollIntoActive();\n  }\n});\n\nconst searchDebounced = refDebounced(search, 300, { maxWait: 1000 });\n\nconst optionsRequest = useWatchFetch(\n  () => searchDebounced.value,\n  async (v) => (isNil(v) ? undefined : props.optionsSearch(v, \"label\")),\n);\n\nconst modelOptionRequest = useWatchFetch(\n  () => model.value,\n  async (v) => {\n    if (isNil(v) || deepEqual(modelOptionRef.value?.value, v)) {\n      return modelOptionRef.value;\n    }\n\n    const options = await props.optionsSearch(String(v), \"value\");\n    return options.find((o) => String(o.value) === String(v));\n  },\n);\n\nwatch(\n  () => optionsRequest.value,\n  (result) => {\n    if (result) {\n      loadedOptionsRef.value = result;\n      if (search.value !== null) {\n        isLoadingError.value = false;\n      }\n    }\n  },\n);\n\nwatch(\n  () => modelOptionRequest.value,\n  (result) => {\n    if (result) {\n      modelOptionRef.value = normalizeListOptions([result])[0];\n    }\n  },\n);\n\nwatch(\n  () => optionsRequest.error,\n  (err) => {\n    if (err) {\n      isLoadingError.value = Boolean(err);\n    }\n  },\n);\n\nwatch(\n  () => optionsRequest.loading || modelOptionRequest.loading,\n  (loading) => {\n    isLoadingOptions.value = loading;\n  },\n);\n</script>\n\n<template>\n  <div\n    class=\"pl-autocomplete__envelope\"\n    @click.stop=\"setFocusOnInput\"\n    data-testid=\"pl-autocomplete\"\n  >\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete\"\n      data-testid=\"pl-autocomplete-control\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete__container\">\n        <div class=\"pl-autocomplete__field\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-autocomplete-input\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-autocomplete-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-autocomplete__controls\">\n            <PlMaskIcon24\n              v-if=\"isLoadingOptions\"\n              name=\"loading\"\n              data-testid=\"pl-autocomplete-loading\"\n            />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              data-testid=\"pl-autocomplete-clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-autocomplete__arrow-wrapper\"\n              data-testid=\"pl-autocomplete-arrow\"\n              @click.stop=\"toggleOpen\"\n            >\n              <div\n                v-if=\"arrowIconLarge\"\n                class=\"arrow-icon\"\n                :class=\"[`icon-24 ${arrowIconLarge}`]\"\n              />\n              <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" />\n              <div v-else class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-autocomplete-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-autocomplete-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-autocomplete-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <DropdownOverlay\n          v-if=\"data.open\"\n          ref=\"overlay\"\n          :root=\"rootRef\"\n          class=\"pl-autocomplete__options\"\n          data-testid=\"pl-autocomplete-options\"\n          tabindex=\"-1\"\n          :gap=\"3\"\n        >\n          <DropdownListItem\n            v-for=\"(item, index) in renderedOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            data-testid=\"pl-autocomplete-option\"\n            @click.stop=\"selectOption(item)\"\n          />\n          <div\n            v-if=\"!renderedOptionsRef.length\"\n            class=\"nothing-found\"\n            data-testid=\"pl-autocomplete-options-empty\"\n          >\n            Nothing found\n          </div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-autocomplete__error\" data-testid=\"pl-autocomplete-error\">\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"isLoadingOptions && loadingOptionsHelper\"\n      class=\"pl-autocomplete__helper\"\n      data-testid=\"pl-autocomplete-helper\"\n    >\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-autocomplete__helper\" data-testid=\"pl-autocomplete-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlAutocomplete.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"names":[],"mappings":"AAodA,OAAO,wBAAwB,CAAC;AAMhC,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,aAAa,CAAC;AAiBpE;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,EAC9F,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;WAkrBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA3qBpD;;WAEG;uBACY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACpF;;WAEG;gBACK,MAAM;QACd;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,MAAM;QAClB;;WAEG;yBACc,MAAM;QACvB;;WAEG;qBACU,OAAO,GAAG,QAAQ;QAC/B;;WAEG;sBACW,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM;QAClC;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;QAoRhB;;WAEG;oBACS,CAAC;;;KAoV8E,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;;;;;EAIP,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,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":"PlAutocomplete.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAutocomplete/PlAutocomplete.vue"],"names":[],"mappings":"AAwfA,OAAO,wBAAwB,CAAC;AAMhC,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,aAAa,CAAC;AAiBpE;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,EAC9F,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;WAwsBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAjsBpD;;WAEG;uBACY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACpF;;WAEG;gBACK,MAAM;QACd;;WAEG;iBACM,MAAM;QACf;;WAEG;+BACoB,MAAM;QAC7B;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;oBACS,OAAO;QACnB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;oBACS,MAAM;QAClB;;WAEG;yBACc,MAAM;QACvB;;WAEG;qBACU,OAAO,GAAG,QAAQ;QAC/B;;WAEG;sBACW,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM;QAClC;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;QAoRhB;;WAEG;oBACS,CAAC;;;KA0W8E,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;;;;;EAIP,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,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"}