@milaboratories/uikit 2.15.37 → 2.15.38

package/dist/components/PlAutocomplete/PlAutocomplete.vue2.js

@@ -25,22 +25,30 @@ import { refDebounced as he } from "@vueuse/core";
 //#region src/components/PlAutocomplete/PlAutocomplete.vue?vue&type=script&setup=true&lang.ts
 var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = ["title"], O = ["disabled", "placeholder"], k = {
 	key: 0,
-	class: "input-value"
+	class: "input-value",
+	"data-testid": "pl-autocomplete-value"
 }, A = { class: "pl-autocomplete__controls" }, j = {
 	key: 2,
 	class: "arrow-icon arrow-icon-default"
-}, M = { key: 0 }, N = {
+}, M = {
 	key: 0,
-	class: "nothing-found"
+	"data-testid": "pl-autocomplete-label"
+}, N = {
+	key: 0,
+	class: "nothing-found",
+	"data-testid": "pl-autocomplete-options-empty"
 }, P = {
 	key: 0,
-	class: "pl-autocomplete__error"
+	class: "pl-autocomplete__error",
+	"data-testid": "pl-autocomplete-error"
 }, F = {
 	key: 1,
-	class: "pl-autocomplete__helper"
+	class: "pl-autocomplete__helper",
+	"data-testid": "pl-autocomplete-helper"
 }, ye = {
 	key: 2,
-	class: "pl-autocomplete__helper"
+	class: "pl-autocomplete__helper",
+	"data-testid": "pl-autocomplete-helper"
 }, I = /* @__PURE__ */ g({
 	name: "PlAutocomplete",
 	props: /* @__PURE__ */ _({
@@ -141,7 +149,8 @@ var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = ["titl
 			G.value = e;
 		}), (t, n) => (y(), p("div", {
 			class: "pl-autocomplete__envelope",
-			onClick: E(ke, ["stop"])
+			onClick: E(ke, ["stop"]),
+			"data-testid": "pl-autocomplete"
 		}, [m("div", {
 			ref_key: "rootRef",
 			ref: L,
@@ -151,6 +160,7 @@ var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = ["titl
 				error: !!J.value,
 				disabled: q.value
 			}]),
+			"data-testid": "pl-autocomplete-control",
 			onKeydown: Me,
 			onFocusout: je
 		}, [m("div", _e, [
@@ -168,6 +178,7 @@ var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = ["titl
 					placeholder: Te.value,
 					spellcheck: "false",
 					autocomplete: "chrome-off",
+					"data-testid": "pl-autocomplete-input",
 					onFocus: Ae
 				}, null, 40, O), [[fe, B.value]]),
 				V.open ? f("", !0) : (y(), p("div", k, [h(a, null, {
@@ -177,17 +188,20 @@ var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = ["titl
 				m("div", A, [
 					G.value ? (y(), d(C(s), {
 						key: 0,
-						name: "loading"
+						name: "loading",
+						"data-testid": "pl-autocomplete-loading"
 					})) : f("", !0),
 					g.clearable && Ee.value ? (y(), d(C(ee), {
 						key: 1,
 						class: "clear",
+						"data-testid": "pl-autocomplete-clear",
 						name: "delete-clear",
 						onClick: E(Oe, ["stop"])
 					})) : f("", !0),
 					x(t.$slots, "append"),
 					m("div", {
 						class: "pl-autocomplete__arrow-wrapper",
+						"data-testid": "pl-autocomplete-arrow",
 						onClick: E(Z, ["stop"])
 					}, [g.arrowIconLarge ? (y(), p("div", {
 						key: 0,
@@ -201,13 +215,15 @@ var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = ["titl
 			g.label ? (y(), p("label", M, [
 				g.required ? (y(), d(C(o), {
 					key: 0,
-					uri: C(ie)
+					uri: C(ie),
+					"data-testid": "pl-autocomplete-required"
 				}, null, 8, ["uri"])) : f("", !0),
 				m("span", null, S(g.label), 1),
 				be.tooltip ? (y(), d(C(r), {
 					key: 1,
 					class: "info",
-					position: "top"
+					position: "top",
+					"data-testid": "pl-autocomplete-tooltip"
 				}, {
 					tooltip: T(() => [x(t.$slots, "tooltip")]),
 					_: 3
@@ -218,6 +234,7 @@ var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = ["titl
 				ref: "overlay",
 				root: L.value,
 				class: "pl-autocomplete__options",
+				"data-testid": "pl-autocomplete-options",
 				tabindex: "-1",
 				gap: 3
 			}, {
@@ -227,6 +244,7 @@ var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = ["titl
 					"is-selected": t.isSelected,
 					"is-hovered": t.isActive,
 					size: g.optionSize,
+					"data-testid": "pl-autocomplete-option",
 					onClick: E((e) => X(t), ["stop"])
 				}, null, 8, [
 					"option",
@@ -234,7 +252,7 @@ var ge = ["tabindex"], _e = { class: "pl-autocomplete__container" }, ve = ["titl
 					"is-hovered",
 					"size",
 					"onClick"
-				]))), 128)), W.value.length ? f("", !0) : (y(), p("div", N, "Nothing found"))]),
+				]))), 128)), W.value.length ? f("", !0) : (y(), p("div", N, " Nothing found "))]),
 				_: 1
 			}, 8, ["root"])) : f("", !0),
 			h(te, {

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

@@ -1 +1 @@
-{"version":3,"file":"PlAutocomplete.vue_vue_type_script_setup_true_lang.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCR,IAAM,IAAQ,GAAc,GAAA,aAAoB,EAE1C,IAAQ,GAsFR,KAAQ,IAEV,EAEE,IAAU,GAA8B,EACxC,IAAQ,GAAmC,EAE3C,IAAa,GAAe,UAAU,EAEtC,IAAS,EAAmB,KAAK,EACjC,IAAO,GAAS;GACpB,aAAa;GACb,MAAM;GACP,CAAC,EAEI,WACJ,EACE,EAAmB,MAAM,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,GACzE,MAAO,IAAI,IAAI,IAAI,EACrB,EAEG,WAAsB,EAAK,cAAc,IAAiB,EAE1D,IAAmB,EAAqB,EAAE,CAAC,EAC3C,IAAiB,GAA0C,EAE3D,IAAqB,QAClB,EAAqB,EAAiB,MAAM,CAAC,KAAK,GAAK,OAAW;GACvE,GAAG;GACH;GACA,YAAY,MAAU,GAAc;GACpC,UAAU,MAAU,EAAK;GAC1B,EAAE,CACH,EACI,IAAmB,EAAa,GAAK,EACrC,IAAiB,EAAa,GAAM,EAEpC,IAAa,QACV,EAAM,SACb,EAEI,KAAgB,QACb,EAAiB,MAAM,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,CAC/E,EAEI,IAAgB,QAAe;AAC/B,UAAiB,OAIrB;QAAI,EAAM,MACR,QAAO,EAAgB,EAAM,MAAM;AAGrC,QAAI,EAAe,MACjB,QAAO;;IAIT,EAEI,IAAY,QAAe;GAC/B,IAAM,IAAc,EAAM,EAAe,EACnC,IAAU,EAAM,EAAmB;AAOzC,WAJE,KACA,EAAQ,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,IACpD,EAAQ,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,GAEzC,UAAU,EAAM,QAAQ,EAAM,YAAY,EAAM,MAAM,GAAG;IACtE,EAII,KAAa,QAAgB,CAAC,EAAK,QAAQ,EAAU,QAAQ,EAAU,QAAQ,KAAA,EAAW,EAE1F,KAAsB,QACtB,CAAC,EAAK,QAAQ,EAAM,QACf,KAGF,EAAM,QAAQ,OAAO,EAAU,MAAM,GAAG,EAAM,YACrD,EAEI,KAAW,QACR,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,KACpD,EAEI,KAAW,QAAgB,EAAW,QAAQ,KAAA,IAAY,IAAK,EAE/D,KAAgB,MAA2D;AAK/E,GAJA,EAAM,QAAQ,GAAG,OACjB,EAAe,QAAQ,GACvB,EAAO,QAAQ,MACf,EAAK,OAAO,IACZ,GAAS,OAAO,OAAO;KAGnB,WAAc;AAElB,GADA,EAAM,QAAQ,KAAA,GACd,EAAe,QAAQ,KAAA;KAGnB,WAAwB,EAAM,OAAO,OAAO,EAE5C,UAAmB;AACvB,KAAK,OAAO,CAAC,EAAK;;AAGpB,UACQ,EAAK,OACV,MAAM;AACL,KAAO,QAAQ,IAAI,KAAK;IAE3B;EAED,IAAM,WAAqB;AACzB,KAAK,OAAO;KAGR,MAAc,MAAsB;GACxC,IAAM,IAAgB,EAAM;AAE5B,GACE,CAAC,EAAQ,OAAO,SAAS,EAAc,IACvC,CAAC,EAAW,OAAO,SAAS,SAAS,EAAa,KAElD,EAAO,QAAQ,MACf,EAAK,OAAO;KAIV,MAAiB,MAAgD;AACrE,OAAK;IAAC;IAAa;IAAW;IAAS;IAAS,CAAC,SAAS,EAAE,KAAK,CAG/D,GAAE,gBAAgB;OAFlB;GAKF,IAAM,EAAE,SAAM,mBAAgB;AAE9B,OAAI,CAAC,GAAM;AACT,IAAI,EAAE,SAAS,YACb,EAAK,OAAO,IACZ,EAAO,QAAQ;AAEjB;;AAGF,GAAI,EAAE,SAAS,aACb,EAAK,OAAO,IACZ,EAAO,QAAQ,MACf,EAAQ,OAAO,OAAO;GAGxB,IAAM,IAAU,EAAM,EAAmB,EAEnC,EAAE,cAAW;AAEnB,OAAI,CAAC,EACH;AAGF,GAAI,EAAE,SAAS,WACb,EAAa,EAAQ,MAAM,MAAO,EAAG,UAAU,EAAY,CAAC;GAG9D,IAAM,IAAa,EAAQ,WAAW,MAAO,EAAG,UAAU,EAAY,IAAI,IAEpE,IAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK,GAEjE,IAAW,KAAK,IAAI,IAAa,IAAQ,EAAO,GAAG;AAEzD,KAAK,cAAc,EAAmB,MAAM,GAAU,SAAS;;AAYjE,EATA,GAAc,EAAQ,EAEtB,QAAY,EAAM,OAAO,IAAc,EAAE,WAAW,IAAM,CAAC,EAE3D,QACQ,EAAK,OACV,MAAU,IAAO,EAAM,OAAO,OAAO,GAAG,GAC1C,EAED,SAAsB;AAIpB,GAFA,EAAO,OAEH,EAAK,eAAe,KAAK,EAAK,QAChC,EAAW,OAAO,kBAAkB;IAEtC;EAEF,IAAM,KAAkB,GAAa,GAAQ,KAAK,EAAE,SAAS,KAAM,CAAC,EAE9D,IAAiB,QACf,GAAgB,OACtB,OAAO,MAAO,EAAM,EAAE,GAAG,KAAA,IAAY,EAAM,cAAc,GAAG,QAAQ,CACrE,EAEK,IAAqB,QACnB,EAAM,OACZ,OAAO,MACD,EAAM,EAAE,IAAI,EAAU,EAAe,OAAO,OAAO,EAAE,GAChD,EAAe,SAGR,MAAM,EAAM,cAAc,OAAO,EAAE,EAAE,QAAQ,EAC9C,MAAM,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,EAAE,CAAC,CAE5D;SAED,QACQ,EAAe,QACpB,MAAW;AACV,GAAI,MACF,EAAiB,QAAQ,GACrB,EAAO,UAAU,SACnB,EAAe,QAAQ;IAI9B,EAED,QACQ,EAAmB,QACxB,MAAW;AACV,GAAI,MACF,EAAe,QAAQ,EAAqB,CAAC,EAAO,CAAC,CAAC;IAG3D,EAED,QACQ,EAAe,QACpB,MAAQ;AACP,GAAI,MACF,EAAe,QAAQ,EAAQ;IAGpC,EAED,QACQ,EAAe,WAAW,EAAmB,UAClD,MAAY;AACX,KAAiB,QAAQ;IAE5B,kBAIC,EAmFM,OAAA;GAnFD,OAAM;GAA6B,SAAK,EAAO,IAAe,CAAA,OAAA,CAAA;MACjE,EA4EM,OAAA;YA3EA;GAAJ,KAAI;GACH,UAAU,GAAA;GACX,OAAK,EAAA,CAAC,mBAAiB;IAAA,MACP,EAAK;IAAI,OAAS,EAAQ,EAAA;IAAa,UAAa,EAAA;IAAU,CAAA,CAAA;GAC7E,WAAS;GACT,YAAU;MAEX,EAmEM,OAnEN,IAmEM;GAlEJ,EAoCM,OAAA;IApCD,OAAM;IAA0B,OAAO,GAAA;;OAC1C,EAUE,SAAA;cATI;KAAJ,KAAI;8CACW,QAAA;KACf,MAAK;KACL,UAAS;KACR,UAAU,EAAA;KACV,aAAa,GAAA;KACd,YAAW;KACX,cAAa;KACZ,SAAO;2BAPC,EAAA,MAAM,CAAA,CAAA;IAUL,EAAK,oBAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADJ,EAAsC,GAAA,MAAA;sBAAZ,CAAA,GAAA,EAAZ,EAAA,MAAS,EAAA,EAAA,CAAA,CAAA;;;IAGzB,EAkBM,OAlBN,GAkBM;KAjBgB,EAAA,SAAA,GAAA,EAApB,EAAuD,EAAA,EAAA,EAAA;;MAAjB,MAAK;;KAEnC,EAAA,aAAa,GAAA,SAAA,GAAA,EADrB,EAKE,EAAA,GAAA,EAAA;;MAHA,OAAM;MACN,MAAK;MACJ,SAAK,EAAO,IAAK,CAAA,OAAA,CAAA;;KAEpB,EAAsB,EAAA,QAAA,SAAA;KACtB,EAQM,OAAA;MARD,OAAM;MAAkC,SAAK,EAAO,GAAU,CAAA,OAAA,CAAA;SAEzD,EAAA,kBAAA,GAAA,EADR,EAIE,OAAA;;MAFA,OAAK,EAAA,CAAC,cAAY,CAAA,WACE,EAAA,iBAAc,CAAA,CAAA;oBAEpB,EAAA,aAAA,GAAA,EAAhB,EAAkF,OAAA;;MAAvD,OAAK,EAAA,CAAC,cAAY,CAAA,WAAqB,EAAA,YAAS,CAAA,CAAA;0BAC3E,EAAoD,OAApD,EAAoD,EAAA,CAAA;;;GAI7C,EAAA,SAAA,GAAA,EAAb,EAQQ,SAAA,GAAA;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,GAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,GAAM,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAKrB,EAAK,QAAA,GAAA,EADb,EAkBkB,EAAA,GAAA,EAAA;;IAhBhB,KAAI;IACH,MAAM,EAAA;IACP,OAAM;IACN,UAAS;IACR,KAAK;;qBAGuC,EAAA,EAAA,GAAA,EAD7C,EAQE,IAAA,MAAA,GAPwB,EAAA,QAAhB,GAAM,YADhB,EAQE,GAAA;KANC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACN,SAAK,GAAA,MAAO,EAAa,EAAI,EAAA,CAAA,OAAA,CAAA;;;;;;;iBAEpB,EAAA,MAAmB,SAA2C,EAAA,IAAA,GAAA,IAA3C,GAAA,EAA/B,EAAgF,OAAhF,GAA6D,gBAAa,EAAA,CAAA;;;GAE5E,EAAkF,IAAA;IAAnE,OAAM;IAA4B,kBAAgB,EAAA;;gBAG1D,EAAA,SAAA,GAAA,EAAX,EAAkF,OAAlF,GAAkF,EAAtB,EAAA,MAAa,EAAA,EAAA,IACzD,EAAA,SAAoB,EAAA,wBAAA,GAAA,EAApC,EAEM,OAFN,GAEM,EADD,EAAA,qBAAoB,EAAA,EAAA,IAET,EAAA,UAAA,GAAA,EAAhB,EAA0E,OAA1E,IAA0E,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"PlAutocomplete.vue_vue_type_script_setup_true_lang.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":"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"}

package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAutocompleteMulti.js","names":[],"sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n *\n * @example\n * Basic usage:\n * <PlAutocompleteMulti\n *   v-model=\"selectedUsers\"\n *   :options-search=\"searchUsers\"\n *   :model-search=\"getUsersByIds\"\n *   label=\"Select Users\"\n *   placeholder=\"Search for users...\"\n *   required\n *   :debounce=\"300\"\n *   helper=\"Choose one or more users from the list\"\n * />\n *\n * With async functions:\n * const selectedUsers = ref([])\n *\n * const searchUsers = async (searchTerm) => {\n *   const response = await fetch('/api/users/search?q=' + searchTerm)\n *   const users = await response.json()\n *   return users.map(user => ({ value: user.id, label: user.name }))\n * }\n *\n * const getUsersByIds = async (userIds) => {\n *   if (!userIds.length) return []\n *   const response = await fetch('/api/users?ids=' + userIds.join(','))\n *   const users = await response.json()\n *   return users.map(user => ({ value: user.id, label: user.name }))\n * }\n */\nexport default {\n  name: \"PlAutocompleteMulti\",\n};\n\nexport interface OptionsSearch<T> {\n  (s: string, type: \"label\"): Promise<Readonly<ListOptionBase<T>[]>>;\n  (s: T[], type: \"value\"): Promise<Readonly<ListOptionBase<T>[]>>;\n}\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string | number = string\">\nimport \"./pl-autocomplete-multi.scss\";\n\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport canonicalize from \"canonicalize\";\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from \"vue\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: OptionsSearch<M>;\n    /**\n     * Unique identifier for the source of the options, changing it will invalidate the options cache.\n     */\n    sourceId?: string;\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     * 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     * 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     * Debounce time in ms for the options search.\n     */\n    debounce?: number;\n    /**\n     * If `true`, the search input is reset and focus is set on it when the new option is selected.\n     */\n    resetSearchOnSelect?: boolean;\n    /**\n     * The text to display when no options are found.\n     */\n    emptyOptionsText?: 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    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    required: false,\n    disabled: false,\n    debounce: 300,\n    emptyOptionsText: \"Nothing found\",\n    sourceId: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n  search: \"\",\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nwatch(\n  () => data.open,\n  (v) => {\n    if (!v) {\n      data.search = \"\";\n    }\n  },\n  { flush: \"sync\" },\n);\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst debounce = toRef(props, \"debounce\");\n\nconst searchOptionsRef = useWatchFetch(\n  () => [data.search, data.open, props.sourceId] as const,\n  async ([search, _open]) => {\n    return props.optionsSearch(search, \"label\");\n  },\n  {\n    filterWatchResult: ([_search, open]) => open,\n    debounce,\n  },\n);\n\nconst modelOptionsRef = useWatchFetch(\n  () => [props.modelValue, props.sourceId] as const,\n  async ([v]) => {\n    return props.optionsSearch(v, \"value\");\n  },\n  {\n    debounce,\n  },\n);\n\nconst allOptionsRef = computed(() => {\n  const modelOptions = modelOptionsRef.value ?? [];\n  const searchOptions = searchOptionsRef.value ?? [];\n\n  const seenValues = new Set<string | undefined>();\n  const result = [] as ListOptionBase<M>[];\n\n  const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n    for (const option of options) {\n      const canonicalValue = canonicalize(option.value);\n      if (!seenValues.has(canonicalValue)) {\n        seenValues.add(canonicalValue);\n        result.push(option);\n      }\n    }\n  };\n\n  addOptions(modelOptions);\n  addOptions(searchOptions);\n\n  return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value\n    .map((v) => allOptionsRef.value.find((opt) => deepEqual(opt.value, v)))\n    .filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = searchOptionsRef.value ?? [];\n\n  return [...options].map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading || modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n  if (modelOptionsRef.value === undefined) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n  data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  if (props.resetSearchOnSelect) {\n    data.search = \"\";\n  }\n  inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    inputRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\n\n  if (!length) {\n    return;\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filteredOptions[activeOption].value);\n  }\n\n  const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nconst computedError = computed(() => {\n  if (isOptionsLoading.value) {\n    return undefined;\n  }\n\n  if (searchOptionsRef.error) {\n    return getErrorMessage(searchOptionsRef.error);\n  }\n\n  if (modelOptionsRef.error) {\n    return getErrorMessage(modelOptionsRef.error);\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n    return \"The selected values are not one of the options\";\n  }\n\n  return undefined;\n});\n</script>\n\n<template>\n  <div class=\"pl-autocomplete-multi__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete-multi\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete-multi__container\">\n        <div class=\"pl-autocomplete-multi__field\">\n          <input\n            ref=\"inputRef\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              closeable\n              small\n              @click.stop=\"data.open = true\"\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n\n          <div class=\"pl-autocomplete-multi__controls\">\n            <PlMaskIcon24 v-if=\"isOptionsLoading\" name=\"loading\" />\n            <slot name=\"append\" />\n            <div class=\"pl-autocomplete-multi__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <div 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-multi__options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div class=\"pl-autocomplete-multi__open-chips-container\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              closeable\n              small\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div v-if=\"!filteredOptionsRef.length && !isOptionsLoading\" class=\"nothing-found\">\n            {{ emptyOptionsText }}\n          </div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-autocomplete-multi__error\">{{ computedError }}</div>\n    <div v-else-if=\"helper\" class=\"pl-autocomplete-multi__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlAutocompleteMulti.js","names":[],"sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n *\n * @example\n * Basic usage:\n * <PlAutocompleteMulti\n *   v-model=\"selectedUsers\"\n *   :options-search=\"searchUsers\"\n *   :model-search=\"getUsersByIds\"\n *   label=\"Select Users\"\n *   placeholder=\"Search for users...\"\n *   required\n *   :debounce=\"300\"\n *   helper=\"Choose one or more users from the list\"\n * />\n *\n * With async functions:\n * const selectedUsers = ref([])\n *\n * const searchUsers = async (searchTerm) => {\n *   const response = await fetch('/api/users/search?q=' + searchTerm)\n *   const users = await response.json()\n *   return users.map(user => ({ value: user.id, label: user.name }))\n * }\n *\n * const getUsersByIds = async (userIds) => {\n *   if (!userIds.length) return []\n *   const response = await fetch('/api/users?ids=' + userIds.join(','))\n *   const users = await response.json()\n *   return users.map(user => ({ value: user.id, label: user.name }))\n * }\n */\nexport default {\n  name: \"PlAutocompleteMulti\",\n};\n\nexport interface OptionsSearch<T> {\n  (s: string, type: \"label\"): Promise<Readonly<ListOptionBase<T>[]>>;\n  (s: T[], type: \"value\"): Promise<Readonly<ListOptionBase<T>[]>>;\n}\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string | number = string\">\nimport \"./pl-autocomplete-multi.scss\";\n\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport canonicalize from \"canonicalize\";\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from \"vue\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: OptionsSearch<M>;\n    /**\n     * Unique identifier for the source of the options, changing it will invalidate the options cache.\n     */\n    sourceId?: string;\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     * 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     * 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     * Debounce time in ms for the options search.\n     */\n    debounce?: number;\n    /**\n     * If `true`, the search input is reset and focus is set on it when the new option is selected.\n     */\n    resetSearchOnSelect?: boolean;\n    /**\n     * The text to display when no options are found.\n     */\n    emptyOptionsText?: 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    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    required: false,\n    disabled: false,\n    debounce: 300,\n    emptyOptionsText: \"Nothing found\",\n    sourceId: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n  search: \"\",\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nwatch(\n  () => data.open,\n  (v) => {\n    if (!v) {\n      data.search = \"\";\n    }\n  },\n  { flush: \"sync\" },\n);\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst debounce = toRef(props, \"debounce\");\n\nconst searchOptionsRef = useWatchFetch(\n  () => [data.search, data.open, props.sourceId] as const,\n  async ([search, _open]) => {\n    return props.optionsSearch(search, \"label\");\n  },\n  {\n    filterWatchResult: ([_search, open]) => open,\n    debounce,\n  },\n);\n\nconst modelOptionsRef = useWatchFetch(\n  () => [props.modelValue, props.sourceId] as const,\n  async ([v]) => {\n    return props.optionsSearch(v, \"value\");\n  },\n  {\n    debounce,\n  },\n);\n\nconst allOptionsRef = computed(() => {\n  const modelOptions = modelOptionsRef.value ?? [];\n  const searchOptions = searchOptionsRef.value ?? [];\n\n  const seenValues = new Set<string | undefined>();\n  const result = [] as ListOptionBase<M>[];\n\n  const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n    for (const option of options) {\n      const canonicalValue = canonicalize(option.value);\n      if (!seenValues.has(canonicalValue)) {\n        seenValues.add(canonicalValue);\n        result.push(option);\n      }\n    }\n  };\n\n  addOptions(modelOptions);\n  addOptions(searchOptions);\n\n  return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value\n    .map((v) => allOptionsRef.value.find((opt) => deepEqual(opt.value, v)))\n    .filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = searchOptionsRef.value ?? [];\n\n  return [...options].map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading || modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n  if (modelOptionsRef.value === undefined) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n  data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  if (props.resetSearchOnSelect) {\n    data.search = \"\";\n  }\n  inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    inputRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\n\n  if (!length) {\n    return;\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filteredOptions[activeOption].value);\n  }\n\n  const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nconst computedError = computed(() => {\n  if (isOptionsLoading.value) {\n    return undefined;\n  }\n\n  if (searchOptionsRef.error) {\n    return getErrorMessage(searchOptionsRef.error);\n  }\n\n  if (modelOptionsRef.error) {\n    return getErrorMessage(modelOptionsRef.error);\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n    return \"The selected values are not one of the options\";\n  }\n\n  return undefined;\n});\n</script>\n\n<template>\n  <div\n    class=\"pl-autocomplete-multi__envelope\"\n    @click=\"setFocusOnInput\"\n    data-testid=\"pl-autocomplete-multi\"\n  >\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete-multi\"\n      data-testid=\"pl-autocomplete-multi-control\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete-multi__container\">\n        <div class=\"pl-autocomplete-multi__field\">\n          <input\n            ref=\"inputRef\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-autocomplete-multi-input\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\" data-testid=\"pl-autocomplete-multi-chips\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              closeable\n              data-testid=\"pl-autocomplete-multi-chip\"\n              small\n              @click.stop=\"data.open = true\"\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n\n          <div class=\"pl-autocomplete-multi__controls\">\n            <PlMaskIcon24\n              v-if=\"isOptionsLoading\"\n              name=\"loading\"\n              data-testid=\"pl-autocomplete-multi-loading\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-autocomplete-multi__arrow-wrapper\"\n              data-testid=\"pl-autocomplete-multi-arrow\"\n              @click.stop=\"toggleOpen\"\n            >\n              <div class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-autocomplete-multi-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-autocomplete-multi-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-autocomplete-multi-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-multi__options\"\n          data-testid=\"pl-autocomplete-multi-options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div\n            class=\"pl-autocomplete-multi__open-chips-container\"\n            data-testid=\"pl-autocomplete-multi-chips\"\n          >\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              closeable\n              data-testid=\"pl-autocomplete-multi-chip\"\n              small\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            data-testid=\"pl-autocomplete-multi-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredOptionsRef.length && !isOptionsLoading\"\n            class=\"nothing-found\"\n            data-testid=\"pl-autocomplete-multi-options-empty\"\n          >\n            {{ emptyOptionsText }}\n          </div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div\n      v-if=\"computedError\"\n      class=\"pl-autocomplete-multi__error\"\n      data-testid=\"pl-autocomplete-multi-error\"\n    >\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"helper\"\n      class=\"pl-autocomplete-multi__helper\"\n      data-testid=\"pl-autocomplete-multi-helper\"\n    >\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlAutocompleteMulti.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"names":[],"mappings":"AAucA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAkB3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAMzC,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EACxD,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;WA6pBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAlpBpD;;WAEG;oBACS,CAAC,EAAE;QACf;;WAEG;uBACY,aAAa,CAAC,CAAC,CAAC;QAC/B;;WAEG;mBACQ,MAAM;QACjB;;WAEG;gBACK,MAAM;QACd;;WAEG;iBACM,MAAM;QACf;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,MAAM;QACjB;;WAEG;8BACmB,OAAO;QAC7B;;WAEG;2BACgB,MAAM;QACzB;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;KAslB2E,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;;iBAbE,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAjpBvC,mBAAmB,KAAK,CAAC,EAAE,KAAG,IAAI;EAiqBpC,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":"PlAutocompleteMulti.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"names":[],"mappings":"AAifA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAkB3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAMzC,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EACxD,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;WAqrBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA1qBpD;;WAEG;oBACS,CAAC,EAAE;QACf;;WAEG;uBACY,aAAa,CAAC,CAAC,CAAC;QAC/B;;WAEG;mBACQ,MAAM;QACjB;;WAEG;gBACK,MAAM;QACd;;WAEG;iBACM,MAAM;QACf;;WAEG;gBACK,OAAO;QACf;;WAEG;sBACW,MAAM;QACpB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,OAAO;QAClB;;WAEG;mBACQ,MAAM;QACjB;;WAEG;8BACmB,OAAO;QAC7B;;WAEG;2BACgB,MAAM;QACzB;;aAEK;wBAED,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;;KA8mB2E,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;;iBAbE,CAAC,KAAK,IAAiB,KAAK,GAAG;;kBAC9B,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAzqBvC,mBAAmB,KAAK,CAAC,EAAE,KAAG,IAAI;EAyrBpC,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"}

package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js

@@ -20,16 +20,26 @@ import se from "canonicalize";
 //#region src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue?vue&type=script&setup=true&lang.ts
 var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue = { class: "pl-autocomplete-multi__field" }, de = ["disabled", "placeholder"], fe = {
 	key: 0,
-	class: "chips-container"
-}, pe = { class: "pl-autocomplete-multi__controls" }, me = { key: 0 }, he = { class: "pl-autocomplete-multi__open-chips-container" }, ge = {
+	class: "chips-container",
+	"data-testid": "pl-autocomplete-multi-chips"
+}, pe = { class: "pl-autocomplete-multi__controls" }, me = {
 	key: 0,
-	class: "nothing-found"
+	"data-testid": "pl-autocomplete-multi-label"
+}, he = {
+	class: "pl-autocomplete-multi__open-chips-container",
+	"data-testid": "pl-autocomplete-multi-chips"
+}, ge = {
+	key: 0,
+	class: "nothing-found",
+	"data-testid": "pl-autocomplete-multi-options-empty"
 }, j = {
 	key: 0,
-	class: "pl-autocomplete-multi__error"
+	class: "pl-autocomplete-multi__error",
+	"data-testid": "pl-autocomplete-multi-error"
 }, M = {
 	key: 1,
-	class: "pl-autocomplete-multi__helper"
+	class: "pl-autocomplete-multi__helper",
+	"data-testid": "pl-autocomplete-multi-helper"
 }, N = /* @__PURE__ */ v({
 	name: "PlAutocompleteMulti",
 	props: {
@@ -121,7 +131,8 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 		});
 		return (n, o) => (y(), h("div", {
 			class: "pl-autocomplete-multi__envelope",
-			onClick: xe
+			onClick: xe,
+			"data-testid": "pl-autocomplete-multi"
 		}, [g("div", {
 			ref_key: "rootRef",
 			ref: R,
@@ -131,6 +142,7 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 				error: !!$.value,
 				disabled: Y.value
 			}]),
+			"data-testid": "pl-autocomplete-multi-control",
 			onKeydown: Ce,
 			onFocusout: Q
 		}, [g("div", le, [
@@ -145,11 +157,13 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 					placeholder: _e.value,
 					spellcheck: "false",
 					autocomplete: "chrome-off",
+					"data-testid": "pl-autocomplete-multi-input",
 					onFocus: o[1] ||= (e) => V.open = !0
 				}, null, 40, de), [[D, V.search]]),
 				V.open ? m("", !0) : (y(), h("div", fe, [(y(!0), h(d, null, S(K.value, (e, t) => (y(), p(E(u), {
 					key: t,
 					closeable: "",
+					"data-testid": "pl-autocomplete-multi-chip",
 					small: "",
 					onClick: o[2] ||= A((e) => V.open = !0, ["stop"]),
 					onClose: (t) => Z(e.value)
@@ -160,11 +174,13 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 				g("div", pe, [
 					J.value ? (y(), p(E(i), {
 						key: 0,
-						name: "loading"
+						name: "loading",
+						"data-testid": "pl-autocomplete-multi-loading"
 					})) : m("", !0),
 					C(n.$slots, "append"),
 					g("div", {
 						class: "pl-autocomplete-multi__arrow-wrapper",
+						"data-testid": "pl-autocomplete-multi-arrow",
 						onClick: A(Se, ["stop"])
 					}, [...o[3] ||= [g("div", { class: "arrow-icon arrow-icon-default" }, null, -1)]])
 				])
@@ -172,13 +188,15 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 			v.label ? (y(), h("label", me, [
 				v.required ? (y(), p(E(r), {
 					key: 0,
-					uri: E(te)
+					uri: E(te),
+					"data-testid": "pl-autocomplete-multi-required"
 				}, null, 8, ["uri"])) : m("", !0),
 				g("span", null, w(v.label), 1),
 				E(I).tooltip ? (y(), p(E(t), {
 					key: 1,
 					class: "info",
-					position: "top"
+					position: "top",
+					"data-testid": "pl-autocomplete-multi-tooltip"
 				}, {
 					tooltip: k(() => [C(n.$slots, "tooltip")]),
 					_: 3
@@ -190,6 +208,7 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 				ref: B,
 				root: R.value,
 				class: "pl-autocomplete-multi__options",
+				"data-testid": "pl-autocomplete-multi-options",
 				gap: 5,
 				tabindex: "-1",
 				onFocusout: Q
@@ -198,6 +217,7 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 					g("div", he, [(y(!0), h(d, null, S(K.value, (e, t) => (y(), p(E(u), {
 						key: t,
 						closeable: "",
+						"data-testid": "pl-autocomplete-multi-chip",
 						small: "",
 						onClose: (t) => Z(e.value)
 					}, {
@@ -212,6 +232,7 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 						"is-hovered": V.activeOption == n,
 						size: "medium",
 						"use-checkbox": "",
+						"data-testid": "pl-autocomplete-multi-option",
 						onClick: A((e) => X(t.value), ["stop"])
 					}, null, 8, [
 						"option",

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

@@ -1 +1 @@
-{"version":3,"file":"PlAutocompleteMulti.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n *\n * @example\n * Basic usage:\n * <PlAutocompleteMulti\n *   v-model=\"selectedUsers\"\n *   :options-search=\"searchUsers\"\n *   :model-search=\"getUsersByIds\"\n *   label=\"Select Users\"\n *   placeholder=\"Search for users...\"\n *   required\n *   :debounce=\"300\"\n *   helper=\"Choose one or more users from the list\"\n * />\n *\n * With async functions:\n * const selectedUsers = ref([])\n *\n * const searchUsers = async (searchTerm) => {\n *   const response = await fetch('/api/users/search?q=' + searchTerm)\n *   const users = await response.json()\n *   return users.map(user => ({ value: user.id, label: user.name }))\n * }\n *\n * const getUsersByIds = async (userIds) => {\n *   if (!userIds.length) return []\n *   const response = await fetch('/api/users?ids=' + userIds.join(','))\n *   const users = await response.json()\n *   return users.map(user => ({ value: user.id, label: user.name }))\n * }\n */\nexport default {\n  name: \"PlAutocompleteMulti\",\n};\n\nexport interface OptionsSearch<T> {\n  (s: string, type: \"label\"): Promise<Readonly<ListOptionBase<T>[]>>;\n  (s: T[], type: \"value\"): Promise<Readonly<ListOptionBase<T>[]>>;\n}\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string | number = string\">\nimport \"./pl-autocomplete-multi.scss\";\n\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport canonicalize from \"canonicalize\";\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from \"vue\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: OptionsSearch<M>;\n    /**\n     * Unique identifier for the source of the options, changing it will invalidate the options cache.\n     */\n    sourceId?: string;\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     * 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     * 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     * Debounce time in ms for the options search.\n     */\n    debounce?: number;\n    /**\n     * If `true`, the search input is reset and focus is set on it when the new option is selected.\n     */\n    resetSearchOnSelect?: boolean;\n    /**\n     * The text to display when no options are found.\n     */\n    emptyOptionsText?: 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    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    required: false,\n    disabled: false,\n    debounce: 300,\n    emptyOptionsText: \"Nothing found\",\n    sourceId: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n  search: \"\",\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nwatch(\n  () => data.open,\n  (v) => {\n    if (!v) {\n      data.search = \"\";\n    }\n  },\n  { flush: \"sync\" },\n);\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst debounce = toRef(props, \"debounce\");\n\nconst searchOptionsRef = useWatchFetch(\n  () => [data.search, data.open, props.sourceId] as const,\n  async ([search, _open]) => {\n    return props.optionsSearch(search, \"label\");\n  },\n  {\n    filterWatchResult: ([_search, open]) => open,\n    debounce,\n  },\n);\n\nconst modelOptionsRef = useWatchFetch(\n  () => [props.modelValue, props.sourceId] as const,\n  async ([v]) => {\n    return props.optionsSearch(v, \"value\");\n  },\n  {\n    debounce,\n  },\n);\n\nconst allOptionsRef = computed(() => {\n  const modelOptions = modelOptionsRef.value ?? [];\n  const searchOptions = searchOptionsRef.value ?? [];\n\n  const seenValues = new Set<string | undefined>();\n  const result = [] as ListOptionBase<M>[];\n\n  const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n    for (const option of options) {\n      const canonicalValue = canonicalize(option.value);\n      if (!seenValues.has(canonicalValue)) {\n        seenValues.add(canonicalValue);\n        result.push(option);\n      }\n    }\n  };\n\n  addOptions(modelOptions);\n  addOptions(searchOptions);\n\n  return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value\n    .map((v) => allOptionsRef.value.find((opt) => deepEqual(opt.value, v)))\n    .filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = searchOptionsRef.value ?? [];\n\n  return [...options].map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading || modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n  if (modelOptionsRef.value === undefined) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n  data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  if (props.resetSearchOnSelect) {\n    data.search = \"\";\n  }\n  inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    inputRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\n\n  if (!length) {\n    return;\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filteredOptions[activeOption].value);\n  }\n\n  const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nconst computedError = computed(() => {\n  if (isOptionsLoading.value) {\n    return undefined;\n  }\n\n  if (searchOptionsRef.error) {\n    return getErrorMessage(searchOptionsRef.error);\n  }\n\n  if (modelOptionsRef.error) {\n    return getErrorMessage(modelOptionsRef.error);\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n    return \"The selected values are not one of the options\";\n  }\n\n  return undefined;\n});\n</script>\n\n<template>\n  <div class=\"pl-autocomplete-multi__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete-multi\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete-multi__container\">\n        <div class=\"pl-autocomplete-multi__field\">\n          <input\n            ref=\"inputRef\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              closeable\n              small\n              @click.stop=\"data.open = true\"\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n\n          <div class=\"pl-autocomplete-multi__controls\">\n            <PlMaskIcon24 v-if=\"isOptionsLoading\" name=\"loading\" />\n            <slot name=\"append\" />\n            <div class=\"pl-autocomplete-multi__arrow-wrapper\" @click.stop=\"toggleOpen\">\n              <div 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-multi__options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div class=\"pl-autocomplete-multi__open-chips-container\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              closeable\n              small\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div v-if=\"!filteredOptionsRef.length && !isOptionsLoading\" class=\"nothing-found\">\n            {{ emptyOptionsText }}\n          </div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-autocomplete-multi__error\">{{ computedError }}</div>\n    <div v-else-if=\"helper\" class=\"pl-autocomplete-multi__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlAutocompleteMulti.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n *\n * @example\n * Basic usage:\n * <PlAutocompleteMulti\n *   v-model=\"selectedUsers\"\n *   :options-search=\"searchUsers\"\n *   :model-search=\"getUsersByIds\"\n *   label=\"Select Users\"\n *   placeholder=\"Search for users...\"\n *   required\n *   :debounce=\"300\"\n *   helper=\"Choose one or more users from the list\"\n * />\n *\n * With async functions:\n * const selectedUsers = ref([])\n *\n * const searchUsers = async (searchTerm) => {\n *   const response = await fetch('/api/users/search?q=' + searchTerm)\n *   const users = await response.json()\n *   return users.map(user => ({ value: user.id, label: user.name }))\n * }\n *\n * const getUsersByIds = async (userIds) => {\n *   if (!userIds.length) return []\n *   const response = await fetch('/api/users?ids=' + userIds.join(','))\n *   const users = await response.json()\n *   return users.map(user => ({ value: user.id, label: user.name }))\n * }\n */\nexport default {\n  name: \"PlAutocompleteMulti\",\n};\n\nexport interface OptionsSearch<T> {\n  (s: string, type: \"label\"): Promise<Readonly<ListOptionBase<T>[]>>;\n  (s: T[], type: \"value\"): Promise<Readonly<ListOptionBase<T>[]>>;\n}\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string | number = string\">\nimport \"./pl-autocomplete-multi.scss\";\n\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport canonicalize from \"canonicalize\";\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from \"vue\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected values.\n     */\n    modelValue: M[];\n    /**\n     * Lambda for requesting of available options for the dropdown by search string.\n     */\n    optionsSearch: OptionsSearch<M>;\n    /**\n     * Unique identifier for the source of the options, changing it will invalidate the options cache.\n     */\n    sourceId?: string;\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     * 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     * 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     * Debounce time in ms for the options search.\n     */\n    debounce?: number;\n    /**\n     * If `true`, the search input is reset and focus is set on it when the new option is selected.\n     */\n    resetSearchOnSelect?: boolean;\n    /**\n     * The text to display when no options are found.\n     */\n    emptyOptionsText?: 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    modelValue: () => [],\n    label: undefined,\n    helper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    required: false,\n    disabled: false,\n    debounce: 300,\n    emptyOptionsText: \"Nothing found\",\n    sourceId: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n  search: \"\",\n  activeOption: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nwatch(\n  () => data.open,\n  (v) => {\n    if (!v) {\n      data.search = \"\";\n    }\n  },\n  { flush: \"sync\" },\n);\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n  if (data.open && props.modelValue.length > 0) {\n    return props.placeholder;\n  }\n\n  return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst debounce = toRef(props, \"debounce\");\n\nconst searchOptionsRef = useWatchFetch(\n  () => [data.search, data.open, props.sourceId] as const,\n  async ([search, _open]) => {\n    return props.optionsSearch(search, \"label\");\n  },\n  {\n    filterWatchResult: ([_search, open]) => open,\n    debounce,\n  },\n);\n\nconst modelOptionsRef = useWatchFetch(\n  () => [props.modelValue, props.sourceId] as const,\n  async ([v]) => {\n    return props.optionsSearch(v, \"value\");\n  },\n  {\n    debounce,\n  },\n);\n\nconst allOptionsRef = computed(() => {\n  const modelOptions = modelOptionsRef.value ?? [];\n  const searchOptions = searchOptionsRef.value ?? [];\n\n  const seenValues = new Set<string | undefined>();\n  const result = [] as ListOptionBase<M>[];\n\n  const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n    for (const option of options) {\n      const canonicalValue = canonicalize(option.value);\n      if (!seenValues.has(canonicalValue)) {\n        seenValues.add(canonicalValue);\n        result.push(option);\n      }\n    }\n  };\n\n  addOptions(modelOptions);\n  addOptions(searchOptions);\n\n  return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value\n    .map((v) => allOptionsRef.value.find((opt) => deepEqual(opt.value, v)))\n    .filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n  const selectedValues = unref(selectedValuesRef);\n\n  const options = searchOptionsRef.value ?? [];\n\n  return [...options].map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading || modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n  if (modelOptionsRef.value === undefined) {\n    return true;\n  }\n\n  return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n  data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n  const values = unref(selectedValuesRef);\n  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n  if (props.resetSearchOnSelect) {\n    data.search = \"\";\n  }\n  inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  const { open, activeOption } = data;\n\n  if (!open) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    inputRef.value?.focus();\n  }\n\n  const filteredOptions = unref(filteredOptionsRef);\n\n  const { length } = filteredOptions;\n\n  if (!length) {\n    return;\n  }\n\n  if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n    e.preventDefault();\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filteredOptions[activeOption].value);\n  }\n\n  const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  data.activeOption = Math.abs(activeOption + d + length) % length;\n\n  requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n  () => props.modelValue,\n  () => updateActiveOption(),\n  { immediate: true },\n);\n\nconst computedError = computed(() => {\n  if (isOptionsLoading.value) {\n    return undefined;\n  }\n\n  if (searchOptionsRef.error) {\n    return getErrorMessage(searchOptionsRef.error);\n  }\n\n  if (modelOptionsRef.error) {\n    return getErrorMessage(modelOptionsRef.error);\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n    return \"The selected values are not one of the options\";\n  }\n\n  return undefined;\n});\n</script>\n\n<template>\n  <div\n    class=\"pl-autocomplete-multi__envelope\"\n    @click=\"setFocusOnInput\"\n    data-testid=\"pl-autocomplete-multi\"\n  >\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-autocomplete-multi\"\n      data-testid=\"pl-autocomplete-multi-control\"\n      :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-autocomplete-multi__container\">\n        <div class=\"pl-autocomplete-multi__field\">\n          <input\n            ref=\"inputRef\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"placeholderRef\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-autocomplete-multi-input\"\n            @focus=\"data.open = true\"\n          />\n          <div v-if=\"!data.open\" class=\"chips-container\" data-testid=\"pl-autocomplete-multi-chips\">\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              closeable\n              data-testid=\"pl-autocomplete-multi-chip\"\n              small\n              @click.stop=\"data.open = true\"\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n\n          <div class=\"pl-autocomplete-multi__controls\">\n            <PlMaskIcon24\n              v-if=\"isOptionsLoading\"\n              name=\"loading\"\n              data-testid=\"pl-autocomplete-multi-loading\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-autocomplete-multi__arrow-wrapper\"\n              data-testid=\"pl-autocomplete-multi-arrow\"\n              @click.stop=\"toggleOpen\"\n            >\n              <div class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-autocomplete-multi-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-autocomplete-multi-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-autocomplete-multi-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-multi__options\"\n          data-testid=\"pl-autocomplete-multi-options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div\n            class=\"pl-autocomplete-multi__open-chips-container\"\n            data-testid=\"pl-autocomplete-multi-chips\"\n          >\n            <PlChip\n              v-for=\"(opt, i) in selectedOptionsRef\"\n              :key=\"i\"\n              closeable\n              data-testid=\"pl-autocomplete-multi-chip\"\n              small\n              @close=\"unselectOption(opt.value)\"\n            >\n              {{ opt.label || opt.value }}\n            </PlChip>\n          </div>\n          <DropdownListItem\n            v-for=\"(item, index) in filteredOptionsRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :text-item=\"'text'\"\n            :is-selected=\"item.selected\"\n            :is-hovered=\"data.activeOption == index\"\n            size=\"medium\"\n            use-checkbox\n            data-testid=\"pl-autocomplete-multi-option\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div\n            v-if=\"!filteredOptionsRef.length && !isOptionsLoading\"\n            class=\"nothing-found\"\n            data-testid=\"pl-autocomplete-multi-options-empty\"\n          >\n            {{ emptyOptionsText }}\n          </div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div\n      v-if=\"computedError\"\n      class=\"pl-autocomplete-multi__error\"\n      data-testid=\"pl-autocomplete-multi-error\"\n    >\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"helper\"\n      class=\"pl-autocomplete-multi__helper\"\n      data-testid=\"pl-autocomplete-multi-helper\"\n    >\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlBtnAccent/PlBtnAccent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBtnAccent.js","names":[],"sources":["../../../src/components/PlBtnAccent/PlBtnAccent.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Accent button\n */\nexport default {\n  name: \"PlBtnAccent\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-accent.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-accent\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnAccent.js","names":[],"sources":["../../../src/components/PlBtnAccent/PlBtnAccent.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Accent button\n */\nexport default {\n  name: \"PlBtnAccent\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-accent.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase data-testid=\"pl-btn-accent\" class=\"pl-btn-accent\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnAccent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnAccent/PlBtnAccent.vue"],"names":[],"mappings":"AAkDA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;cAoCX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAOxC,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":"PlBtnAccent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnAccent/PlBtnAccent.vue"],"names":[],"mappings":"AAkDA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;cAsCX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAOxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlBtnAccent/PlBtnAccent.vue2.js

@@ -13,7 +13,10 @@ var s = /* @__PURE__ */ n({
 	},
 	setup(n) {
 		let s = n;
-		return (n, c) => (i(), t(e, r({ class: "pl-btn-accent" }, s), {
+		return (n, c) => (i(), t(e, r({
+			"data-testid": "pl-btn-accent",
+			class: "pl-btn-accent"
+		}, s), {
 			default: o(() => [a(n.$slots, "default")]),
 			_: 3
 		}, 16));

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnAccent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnAccent/PlBtnAccent.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Accent button\n */\nexport default {\n  name: \"PlBtnAccent\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-accent.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-accent\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAQ;yBA6BZ,EAEU,GAFV,EAEU,EAFD,OAAM,iBAAe,EAAS,EAAK,EAAA;oBAClC,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"PlBtnAccent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnAccent/PlBtnAccent.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Accent button\n */\nexport default {\n  name: \"PlBtnAccent\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-accent.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase data-testid=\"pl-btn-accent\" class=\"pl-btn-accent\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAQ;yBA6BZ,EAEU,GAFV,EAEU;GAFD,eAAY;GAAgB,OAAM;KAAwB,EAAK,EAAA;oBAC9D,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/PlBtnDanger/PlBtnDanger.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBtnDanger.js","names":[],"sources":["../../../src/components/PlBtnDanger/PlBtnDanger.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Danger button\n */\nexport default {\n  name: \"PlBtnDanger\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-danger.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-danger\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnDanger.js","names":[],"sources":["../../../src/components/PlBtnDanger/PlBtnDanger.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Danger button\n */\nexport default {\n  name: \"PlBtnDanger\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-danger.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase data-testid=\"pl-btn-danger\" class=\"pl-btn-danger\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnDanger.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnDanger/PlBtnDanger.vue"],"names":[],"mappings":"AAkDA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;cAoCX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAOxC,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":"PlBtnDanger.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnDanger/PlBtnDanger.vue"],"names":[],"mappings":"AAkDA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;cAsCX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAOxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlBtnDanger/PlBtnDanger.vue2.js

@@ -13,7 +13,10 @@ var s = /* @__PURE__ */ n({
 	},
 	setup(n) {
 		let s = n;
-		return (n, c) => (i(), t(e, r({ class: "pl-btn-danger" }, s), {
+		return (n, c) => (i(), t(e, r({
+			"data-testid": "pl-btn-danger",
+			class: "pl-btn-danger"
+		}, s), {
 			default: o(() => [a(n.$slots, "default")]),
 			_: 3
 		}, 16));