@platforma-sdk/ui-vue 1.84.9 → 1.84.14

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgGridColumnManager.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlElementList,\n  PlIcon24,\n  PlSearchField,\n  PlSlideModal,\n  usePlBlockPageTitleTeleportTarget,\n} from \"@milaboratories/uikit\";\nimport { type GridApi } from \"ag-grid-enterprise\";\nimport { computed, ref } from \"vue\";\nimport { PlAgDataTableRowNumberColId } from \"../PlAgDataTable/sources/row-number\";\nimport { useFilteredItems } from \"./useFilteredItems\";\nimport { useGridColumns } from \"./useGridColumns\";\n\nconst props = defineProps<{\n  /**\n   * The GridApi is an API interface provided by the table/grid component\n   * for interacting programmatically with the grid's features and functionality.\n   * It allows you to control and manipulate grid behavior, access data, and\n   * trigger specific actions.\n   */\n  api: GridApi;\n  /**\n   * Css Column Manager (Panel) modal width (default value is `368px`)\n   */\n  width?: string;\n}>();\n\nconst query = ref(\"\");\nconst slideModal = ref(false);\nconst teleportTarget = usePlBlockPageTitleTeleportTarget(\"PlAgGridColumnManager\");\n\nconst columns = useGridColumns(props);\n\nconst items = computed(() => {\n  return columns.value.map((col, i) => ({\n    column: col,\n    id: col.getId(),\n    label: col.getColDef().headerName ?? `Unnamed Column (${i + 1})`,\n  }));\n});\n\nconst { filteredItems, segments } = useFilteredItems({\n  items,\n  query,\n  getStrings: (item) => [item.label],\n});\n\nconst toggleableFilteredItems = computed(() =>\n  filteredItems.value.filter((item) => item.id !== PlAgDataTableRowNumberColId),\n);\n\nconst allFilteredHidden = computed(\n  () =>\n    toggleableFilteredItems.value.length > 0 &&\n    toggleableFilteredItems.value.every((item) => !item.column.isVisible()),\n);\n\nconst toggleAllFiltered = () => {\n  if (props.api.isDestroyed()) return;\n  const nextVisible = allFilteredHidden.value;\n  const cols = toggleableFilteredItems.value.map((item) => item.column);\n  if (cols.length === 0) return;\n  props.api.setColumnsVisible(cols, nextVisible);\n};\n</script>\n\n<template>\n  <Teleport v-if=\"teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost icon=\"columns\" @click.stop=\"slideModal = !slideModal\"> Columns </PlBtnGhost>\n  </Teleport>\n\n  <PlSlideModal v-model=\"slideModal\" :width=\"width\" close-on-outside-click>\n    <template #title>Manage Columns</template>\n    <div :class=\"$style.searchRow\">\n      <PlSearchField v-model=\"query\" clearable />\n      <PlBtnSecondary\n        :class=\"$style.toggleAllBtn\"\n        :disabled=\"toggleableFilteredItems.length === 0\"\n        @click.stop=\"toggleAllFiltered\"\n      >\n        <PlIcon24 v-if=\"allFilteredHidden\" name=\"view-show\" />\n        <PlIcon24 v-else name=\"view-hide\" />\n      </PlBtnSecondary>\n    </div>\n    <PlElementList\n      :items=\"filteredItems\"\n      :get-item-key=\"(item) => item.id\"\n      :is-draggable=\"(item) => !item.column.getColDef().lockPosition\"\n      :on-sort=\"\n        (fromIndex, toIndex) => {\n          if (!props.api.isDestroyed()) {\n            const columnToMove = columns[fromIndex];\n            props.api.moveColumns([columnToMove], toIndex);\n          }\n          return true; // Let PlElementList handle the visual update\n        }\n      \"\n      :on-toggle=\"\n        (item) => {\n          if (!props.api.isDestroyed()) {\n            props.api.setColumnsVisible([item.column], !item.column.isVisible());\n          }\n        }\n      \"\n      :is-toggled=\"(item) => !item.column.isVisible()\"\n      :is-toggable=\"(item) => item.id !== PlAgDataTableRowNumberColId\"\n      :is-pinned=\"(item) => !!item.column.getColDef().lockPosition\"\n      :is-pinnable=\"() => false\"\n      :disable-dragging=\"query.length > 0\"\n      disable-removing\n    >\n      <template #item-title=\"{ item }\">\n        <span>\n          <span\n            v-for=\"(segment, i) of segments.get(item.label)\"\n            :key=\"i\"\n            :class=\"{ [$style.match]: segment.match }\"\n            >{{ segment.value }}</span\n          >\n        </span>\n      </template>\n    </PlElementList>\n  </PlSlideModal>\n</template>\n\n<style module>\n.match {\n  background-color: var(--color-active-select);\n  border-radius: 2px;\n}\n\n.searchRow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.searchRow > :first-child {\n  flex: 1;\n}\n\n.toggleAllBtn {\n  min-width: unset;\n  opacity: 0.2;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlAgGridColumnManager.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlElementList,\n  PlIcon24,\n  PlSearchField,\n  PlSlideModal,\n  usePlBlockPageTitleTeleportTarget,\n} from \"@milaboratories/uikit\";\nimport { type GridApi } from \"ag-grid-enterprise\";\nimport { computed, ref } from \"vue\";\nimport { PlAgDataTableRowNumberColId } from \"../PlAgDataTable/sources/row-number\";\nimport { useFilteredItems } from \"./useFilteredItems\";\nimport { useGridColumns } from \"./useGridColumns\";\n\nconst props = defineProps<{\n  /**\n   * The GridApi is an API interface provided by the table/grid component\n   * for interacting programmatically with the grid's features and functionality.\n   * It allows you to control and manipulate grid behavior, access data, and\n   * trigger specific actions.\n   */\n  api: GridApi;\n  /**\n   * Css Column Manager (Panel) modal width (default value is `368px`)\n   */\n  width?: string;\n}>();\n\nconst query = ref(\"\");\nconst slideModal = ref(false);\nconst teleportTarget = usePlBlockPageTitleTeleportTarget(\"PlAgGridColumnManager\");\n\nconst columns = useGridColumns(props);\n\nconst items = computed(() => {\n  return columns.value.map((col, i) => ({\n    column: col,\n    id: col.getId(),\n    label: col.getColDef().headerName ?? `Unnamed Column (${i + 1})`,\n  }));\n});\n\nconst { filteredItems, segments } = useFilteredItems({\n  items,\n  query,\n  getStrings: (item) => [item.label],\n});\n\nconst toggleableFilteredItems = computed(() =>\n  filteredItems.value.filter((item) => item.id !== PlAgDataTableRowNumberColId),\n);\n\nconst allFilteredHidden = computed(\n  () =>\n    toggleableFilteredItems.value.length > 0 &&\n    toggleableFilteredItems.value.every((item) => !item.column.isVisible()),\n);\n\nconst toggleAllFiltered = () => {\n  if (props.api.isDestroyed()) return;\n  const nextVisible = allFilteredHidden.value;\n  const cols = toggleableFilteredItems.value.map((item) => item.column);\n  if (cols.length === 0) return;\n  props.api.setColumnsVisible(cols, nextVisible);\n};\n</script>\n\n<template>\n  <Teleport v-if=\"teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost\n      data-testid=\"pl-ag-grid-column-manager\"\n      icon=\"columns\"\n      @click.stop=\"slideModal = !slideModal\"\n    >\n      Columns\n    </PlBtnGhost>\n  </Teleport>\n\n  <PlSlideModal\n    v-model=\"slideModal\"\n    data-testid=\"pl-ag-grid-column-manager-panel\"\n    :width=\"width\"\n    close-on-outside-click\n  >\n    <template #title>Manage Columns</template>\n    <div data-testid=\"pl-ag-grid-column-manager-search-row\" :class=\"$style.searchRow\">\n      <PlSearchField v-model=\"query\" data-testid=\"pl-ag-grid-column-manager-search\" clearable />\n      <PlBtnSecondary\n        data-testid=\"pl-ag-grid-column-manager-toggle-all\"\n        :class=\"$style.toggleAllBtn\"\n        :disabled=\"toggleableFilteredItems.length === 0\"\n        @click.stop=\"toggleAllFiltered\"\n      >\n        <PlIcon24 v-if=\"allFilteredHidden\" name=\"view-show\" />\n        <PlIcon24 v-else name=\"view-hide\" />\n      </PlBtnSecondary>\n    </div>\n    <PlElementList\n      data-testid=\"pl-ag-grid-column-manager-list\"\n      :items=\"filteredItems\"\n      :get-item-key=\"(item) => item.id\"\n      :is-draggable=\"(item) => !item.column.getColDef().lockPosition\"\n      :on-sort=\"\n        (fromIndex, toIndex) => {\n          if (!props.api.isDestroyed()) {\n            const columnToMove = columns[fromIndex];\n            props.api.moveColumns([columnToMove], toIndex);\n          }\n          return true; // Let PlElementList handle the visual update\n        }\n      \"\n      :on-toggle=\"\n        (item) => {\n          if (!props.api.isDestroyed()) {\n            props.api.setColumnsVisible([item.column], !item.column.isVisible());\n          }\n        }\n      \"\n      :is-toggled=\"(item) => !item.column.isVisible()\"\n      :is-toggable=\"(item) => item.id !== PlAgDataTableRowNumberColId\"\n      :is-pinned=\"(item) => !!item.column.getColDef().lockPosition\"\n      :is-pinnable=\"() => false\"\n      :disable-dragging=\"query.length > 0\"\n      disable-removing\n    >\n      <template #item-title=\"{ item }\">\n        <span data-testid=\"pl-ag-grid-column-manager-item\">\n          <span\n            v-for=\"(segment, i) of segments.get(item.label)\"\n            :key=\"i\"\n            :class=\"{ [$style.match]: segment.match }\"\n            >{{ segment.value }}</span\n          >\n        </span>\n      </template>\n    </PlElementList>\n  </PlSlideModal>\n</template>\n\n<style module>\n.match {\n  background-color: var(--color-active-select);\n  border-radius: 2px;\n}\n\n.searchRow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.searchRow > :first-child {\n  flex: 1;\n}\n\n.toggleAllBtn {\n  min-width: unset;\n  opacity: 0.2;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgGridColumnManager.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue"],"names":[],"mappings":"AAsKA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAMlD,KAAK,WAAW,GAAG;IACjB;;;;;OAKG;IACH,GAAG,EAAE,OAAO,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmSF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PlAgGridColumnManager.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue"],"names":[],"mappings":"AAmLA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAMlD,KAAK,WAAW,GAAG;IACjB;;;;;OAKG;IACH,GAAG,EAAE,OAAO,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+SF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlAgGridColumnManager/PlAgGridColumnManager.vue2.js

@@ -4,52 +4,59 @@ import { useGridColumns as n } from "./useGridColumns.js";
 import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, withCtx as y, withModifiers as b } from "vue";
 import { PlBtnGhost as x, PlBtnSecondary as S, PlElementList as C, PlIcon24 as w, PlSearchField as T, PlSlideModal as E, usePlBlockPageTitleTeleportTarget as D } from "@milaboratories/uikit";
 //#region src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue?vue&type=script&setup=true&lang.ts
-var O = /* @__PURE__ */ f({
+var O = { "data-testid": "pl-ag-grid-column-manager-item" }, k = /* @__PURE__ */ f({
 	__name: "PlAgGridColumnManager",
 	props: {
 		api: {},
 		width: {}
 	},
 	setup(f) {
-		let O = f, k = h(""), A = h(!1), j = D("PlAgGridColumnManager"), M = n(O), { filteredItems: N, segments: P } = t({
-			items: a(() => M.value.map((e, t) => ({
+		let k = f, A = h(""), j = h(!1), M = D("PlAgGridColumnManager"), N = n(k), { filteredItems: P, segments: F } = t({
+			items: a(() => N.value.map((e, t) => ({
 				column: e,
 				id: e.getId(),
 				label: e.getColDef().headerName ?? `Unnamed Column (${t + 1})`
 			}))),
-			query: k,
+			query: A,
 			getStrings: (e) => [e.label]
-		}), F = a(() => N.value.filter((t) => t.id !== e)), I = a(() => F.value.length > 0 && F.value.every((e) => !e.column.isVisible())), L = () => {
-			if (O.api.isDestroyed()) return;
-			let e = I.value, t = F.value.map((e) => e.column);
-			t.length !== 0 && O.api.setColumnsVisible(t, e);
+		}), I = a(() => P.value.filter((t) => t.id !== e)), L = a(() => I.value.length > 0 && I.value.every((e) => !e.column.isVisible())), R = () => {
+			if (k.api.isDestroyed()) return;
+			let e = L.value, t = I.value.map((e) => e.column);
+			t.length !== 0 && k.api.setColumnsVisible(t, e);
 		};
-		return (t, n) => (m(), c(r, null, [v(j) ? (m(), o(i, {
+		return (t, n) => (m(), c(r, null, [v(M) ? (m(), o(i, {
 			key: 0,
-			to: v(j)
+			to: v(M)
 		}, [d(v(x), {
+			"data-testid": "pl-ag-grid-column-manager",
 			icon: "columns",
-			onClick: n[0] ||= b((e) => A.value = !A.value, ["stop"])
+			onClick: n[0] ||= b((e) => j.value = !j.value, ["stop"])
 		}, {
 			default: y(() => [...n[3] ||= [u(" Columns ", -1)]]),
 			_: 1
 		})], 8, ["to"])) : s("", !0), d(v(E), {
-			modelValue: A.value,
-			"onUpdate:modelValue": n[2] ||= (e) => A.value = e,
+			modelValue: j.value,
+			"onUpdate:modelValue": n[2] ||= (e) => j.value = e,
+			"data-testid": "pl-ag-grid-column-manager-panel",
 			width: f.width,
 			"close-on-outside-click": ""
 		}, {
 			title: y(() => [...n[4] ||= [u("Manage Columns", -1)]]),
-			default: y(() => [l("div", { class: p(t.$style.searchRow) }, [d(v(T), {
-				modelValue: k.value,
-				"onUpdate:modelValue": n[1] ||= (e) => k.value = e,
+			default: y(() => [l("div", {
+				"data-testid": "pl-ag-grid-column-manager-search-row",
+				class: p(t.$style.searchRow)
+			}, [d(v(T), {
+				modelValue: A.value,
+				"onUpdate:modelValue": n[1] ||= (e) => A.value = e,
+				"data-testid": "pl-ag-grid-column-manager-search",
 				clearable: ""
 			}, null, 8, ["modelValue"]), d(v(S), {
+				"data-testid": "pl-ag-grid-column-manager-toggle-all",
 				class: p(t.$style.toggleAllBtn),
-				disabled: F.value.length === 0,
-				onClick: b(L, ["stop"])
+				disabled: I.value.length === 0,
+				onClick: b(R, ["stop"])
 			}, {
-				default: y(() => [I.value ? (m(), o(v(w), {
+				default: y(() => [L.value ? (m(), o(v(w), {
 					key: 0,
 					name: "view-show"
 				})) : (m(), o(v(w), {
@@ -58,27 +65,28 @@ var O = /* @__PURE__ */ f({
 				}))]),
 				_: 1
 			}, 8, ["class", "disabled"])], 2), d(v(C), {
-				items: v(N),
+				"data-testid": "pl-ag-grid-column-manager-list",
+				items: v(P),
 				"get-item-key": (e) => e.id,
 				"is-draggable": (e) => !e.column.getColDef().lockPosition,
 				"on-sort": (e, t) => {
-					if (!O.api.isDestroyed()) {
-						let n = v(M)[e];
-						O.api.moveColumns([n], t);
+					if (!k.api.isDestroyed()) {
+						let n = v(N)[e];
+						k.api.moveColumns([n], t);
 					}
 					return !0;
 				},
 				"on-toggle": (e) => {
-					O.api.isDestroyed() || O.api.setColumnsVisible([e.column], !e.column.isVisible());
+					k.api.isDestroyed() || k.api.setColumnsVisible([e.column], !e.column.isVisible());
 				},
 				"is-toggled": (e) => !e.column.isVisible(),
 				"is-toggable": (t) => t.id !== v(e),
 				"is-pinned": (e) => !!e.column.getColDef().lockPosition,
 				"is-pinnable": () => !1,
-				"disable-dragging": k.value.length > 0,
+				"disable-dragging": A.value.length > 0,
 				"disable-removing": ""
 			}, {
-				"item-title": y(({ item: e }) => [l("span", null, [(m(!0), c(r, null, g(v(P).get(e.label), (e, n) => (m(), c("span", {
+				"item-title": y(({ item: e }) => [l("span", O, [(m(!0), c(r, null, g(v(F).get(e.label), (e, n) => (m(), c("span", {
 					key: n,
 					class: p({ [t.$style.match]: e.match })
 				}, _(e.value), 3))), 128))])]),
@@ -99,6 +107,6 @@ var O = /* @__PURE__ */ f({
 	}
 });
 //#endregion
-export { O as default };
+export { k as default };
 
 //# sourceMappingURL=PlAgGridColumnManager.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgGridColumnManager.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlElementList,\n  PlIcon24,\n  PlSearchField,\n  PlSlideModal,\n  usePlBlockPageTitleTeleportTarget,\n} from \"@milaboratories/uikit\";\nimport { type GridApi } from \"ag-grid-enterprise\";\nimport { computed, ref } from \"vue\";\nimport { PlAgDataTableRowNumberColId } from \"../PlAgDataTable/sources/row-number\";\nimport { useFilteredItems } from \"./useFilteredItems\";\nimport { useGridColumns } from \"./useGridColumns\";\n\nconst props = defineProps<{\n  /**\n   * The GridApi is an API interface provided by the table/grid component\n   * for interacting programmatically with the grid's features and functionality.\n   * It allows you to control and manipulate grid behavior, access data, and\n   * trigger specific actions.\n   */\n  api: GridApi;\n  /**\n   * Css Column Manager (Panel) modal width (default value is `368px`)\n   */\n  width?: string;\n}>();\n\nconst query = ref(\"\");\nconst slideModal = ref(false);\nconst teleportTarget = usePlBlockPageTitleTeleportTarget(\"PlAgGridColumnManager\");\n\nconst columns = useGridColumns(props);\n\nconst items = computed(() => {\n  return columns.value.map((col, i) => ({\n    column: col,\n    id: col.getId(),\n    label: col.getColDef().headerName ?? `Unnamed Column (${i + 1})`,\n  }));\n});\n\nconst { filteredItems, segments } = useFilteredItems({\n  items,\n  query,\n  getStrings: (item) => [item.label],\n});\n\nconst toggleableFilteredItems = computed(() =>\n  filteredItems.value.filter((item) => item.id !== PlAgDataTableRowNumberColId),\n);\n\nconst allFilteredHidden = computed(\n  () =>\n    toggleableFilteredItems.value.length > 0 &&\n    toggleableFilteredItems.value.every((item) => !item.column.isVisible()),\n);\n\nconst toggleAllFiltered = () => {\n  if (props.api.isDestroyed()) return;\n  const nextVisible = allFilteredHidden.value;\n  const cols = toggleableFilteredItems.value.map((item) => item.column);\n  if (cols.length === 0) return;\n  props.api.setColumnsVisible(cols, nextVisible);\n};\n</script>\n\n<template>\n  <Teleport v-if=\"teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost icon=\"columns\" @click.stop=\"slideModal = !slideModal\"> Columns </PlBtnGhost>\n  </Teleport>\n\n  <PlSlideModal v-model=\"slideModal\" :width=\"width\" close-on-outside-click>\n    <template #title>Manage Columns</template>\n    <div :class=\"$style.searchRow\">\n      <PlSearchField v-model=\"query\" clearable />\n      <PlBtnSecondary\n        :class=\"$style.toggleAllBtn\"\n        :disabled=\"toggleableFilteredItems.length === 0\"\n        @click.stop=\"toggleAllFiltered\"\n      >\n        <PlIcon24 v-if=\"allFilteredHidden\" name=\"view-show\" />\n        <PlIcon24 v-else name=\"view-hide\" />\n      </PlBtnSecondary>\n    </div>\n    <PlElementList\n      :items=\"filteredItems\"\n      :get-item-key=\"(item) => item.id\"\n      :is-draggable=\"(item) => !item.column.getColDef().lockPosition\"\n      :on-sort=\"\n        (fromIndex, toIndex) => {\n          if (!props.api.isDestroyed()) {\n            const columnToMove = columns[fromIndex];\n            props.api.moveColumns([columnToMove], toIndex);\n          }\n          return true; // Let PlElementList handle the visual update\n        }\n      \"\n      :on-toggle=\"\n        (item) => {\n          if (!props.api.isDestroyed()) {\n            props.api.setColumnsVisible([item.column], !item.column.isVisible());\n          }\n        }\n      \"\n      :is-toggled=\"(item) => !item.column.isVisible()\"\n      :is-toggable=\"(item) => item.id !== PlAgDataTableRowNumberColId\"\n      :is-pinned=\"(item) => !!item.column.getColDef().lockPosition\"\n      :is-pinnable=\"() => false\"\n      :disable-dragging=\"query.length > 0\"\n      disable-removing\n    >\n      <template #item-title=\"{ item }\">\n        <span>\n          <span\n            v-for=\"(segment, i) of segments.get(item.label)\"\n            :key=\"i\"\n            :class=\"{ [$style.match]: segment.match }\"\n            >{{ segment.value }}</span\n          >\n        </span>\n      </template>\n    </PlElementList>\n  </PlSlideModal>\n</template>\n\n<style module>\n.match {\n  background-color: var(--color-active-select);\n  border-radius: 2px;\n}\n\n.searchRow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.searchRow > :first-child {\n  flex: 1;\n}\n\n.toggleAllBtn {\n  min-width: unset;\n  opacity: 0.2;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PlAgGridColumnManager.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlElementList,\n  PlIcon24,\n  PlSearchField,\n  PlSlideModal,\n  usePlBlockPageTitleTeleportTarget,\n} from \"@milaboratories/uikit\";\nimport { type GridApi } from \"ag-grid-enterprise\";\nimport { computed, ref } from \"vue\";\nimport { PlAgDataTableRowNumberColId } from \"../PlAgDataTable/sources/row-number\";\nimport { useFilteredItems } from \"./useFilteredItems\";\nimport { useGridColumns } from \"./useGridColumns\";\n\nconst props = defineProps<{\n  /**\n   * The GridApi is an API interface provided by the table/grid component\n   * for interacting programmatically with the grid's features and functionality.\n   * It allows you to control and manipulate grid behavior, access data, and\n   * trigger specific actions.\n   */\n  api: GridApi;\n  /**\n   * Css Column Manager (Panel) modal width (default value is `368px`)\n   */\n  width?: string;\n}>();\n\nconst query = ref(\"\");\nconst slideModal = ref(false);\nconst teleportTarget = usePlBlockPageTitleTeleportTarget(\"PlAgGridColumnManager\");\n\nconst columns = useGridColumns(props);\n\nconst items = computed(() => {\n  return columns.value.map((col, i) => ({\n    column: col,\n    id: col.getId(),\n    label: col.getColDef().headerName ?? `Unnamed Column (${i + 1})`,\n  }));\n});\n\nconst { filteredItems, segments } = useFilteredItems({\n  items,\n  query,\n  getStrings: (item) => [item.label],\n});\n\nconst toggleableFilteredItems = computed(() =>\n  filteredItems.value.filter((item) => item.id !== PlAgDataTableRowNumberColId),\n);\n\nconst allFilteredHidden = computed(\n  () =>\n    toggleableFilteredItems.value.length > 0 &&\n    toggleableFilteredItems.value.every((item) => !item.column.isVisible()),\n);\n\nconst toggleAllFiltered = () => {\n  if (props.api.isDestroyed()) return;\n  const nextVisible = allFilteredHidden.value;\n  const cols = toggleableFilteredItems.value.map((item) => item.column);\n  if (cols.length === 0) return;\n  props.api.setColumnsVisible(cols, nextVisible);\n};\n</script>\n\n<template>\n  <Teleport v-if=\"teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost\n      data-testid=\"pl-ag-grid-column-manager\"\n      icon=\"columns\"\n      @click.stop=\"slideModal = !slideModal\"\n    >\n      Columns\n    </PlBtnGhost>\n  </Teleport>\n\n  <PlSlideModal\n    v-model=\"slideModal\"\n    data-testid=\"pl-ag-grid-column-manager-panel\"\n    :width=\"width\"\n    close-on-outside-click\n  >\n    <template #title>Manage Columns</template>\n    <div data-testid=\"pl-ag-grid-column-manager-search-row\" :class=\"$style.searchRow\">\n      <PlSearchField v-model=\"query\" data-testid=\"pl-ag-grid-column-manager-search\" clearable />\n      <PlBtnSecondary\n        data-testid=\"pl-ag-grid-column-manager-toggle-all\"\n        :class=\"$style.toggleAllBtn\"\n        :disabled=\"toggleableFilteredItems.length === 0\"\n        @click.stop=\"toggleAllFiltered\"\n      >\n        <PlIcon24 v-if=\"allFilteredHidden\" name=\"view-show\" />\n        <PlIcon24 v-else name=\"view-hide\" />\n      </PlBtnSecondary>\n    </div>\n    <PlElementList\n      data-testid=\"pl-ag-grid-column-manager-list\"\n      :items=\"filteredItems\"\n      :get-item-key=\"(item) => item.id\"\n      :is-draggable=\"(item) => !item.column.getColDef().lockPosition\"\n      :on-sort=\"\n        (fromIndex, toIndex) => {\n          if (!props.api.isDestroyed()) {\n            const columnToMove = columns[fromIndex];\n            props.api.moveColumns([columnToMove], toIndex);\n          }\n          return true; // Let PlElementList handle the visual update\n        }\n      \"\n      :on-toggle=\"\n        (item) => {\n          if (!props.api.isDestroyed()) {\n            props.api.setColumnsVisible([item.column], !item.column.isVisible());\n          }\n        }\n      \"\n      :is-toggled=\"(item) => !item.column.isVisible()\"\n      :is-toggable=\"(item) => item.id !== PlAgDataTableRowNumberColId\"\n      :is-pinned=\"(item) => !!item.column.getColDef().lockPosition\"\n      :is-pinnable=\"() => false\"\n      :disable-dragging=\"query.length > 0\"\n      disable-removing\n    >\n      <template #item-title=\"{ item }\">\n        <span data-testid=\"pl-ag-grid-column-manager-item\">\n          <span\n            v-for=\"(segment, i) of segments.get(item.label)\"\n            :key=\"i\"\n            :class=\"{ [$style.match]: segment.match }\"\n            >{{ segment.value }}</span\n          >\n        </span>\n      </template>\n    </PlElementList>\n  </PlSlideModal>\n</template>\n\n<style module>\n.match {\n  background-color: var(--color-active-select);\n  border-radius: 2px;\n}\n\n.searchRow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.searchRow > :first-child {\n  flex: 1;\n}\n\n.toggleAllBtn {\n  min-width: unset;\n  opacity: 0.2;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAgRowNumCheckbox.js","names":[],"sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams } from \"ag-grid-enterprise\";\nimport { PlCheckbox } from \"@milaboratories/uikit\";\nimport { ref, computed, onBeforeMount, onBeforeUnmount } from \"vue\";\nimport $styles from \"./pl-ag-row-num-checkbox.module.scss\";\nimport { isSelectionEnabled } from \"../../lib\";\n\nconst props = defineProps<{ params: ICellRendererParams }>();\n\nconst api = props.params.api;\nconst isChecked = ref(!!props.params.node.isSelected());\nconst forceShowCheckbox = computed(() => isChecked.value || isSelectionEnabled(api));\nconst allowedSelection = ref(isSelectionEnabled(api));\n\nconst updateSelection = () => {\n  isChecked.value = props.params.node.isSelected() !== false;\n};\n\nconst setSelection = (val: boolean) => {\n  if (isSelectionEnabled(api)) {\n    props.params.node.setSelected(val);\n    updateSelection();\n  }\n};\n\nonBeforeMount(() => {\n  props.params.node.addEventListener(\"rowSelected\", updateSelection);\n});\n\nonBeforeUnmount(() => {\n  props.params.node.removeEventListener(\"rowSelected\", updateSelection);\n});\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $styles.container,\n      { [$styles['allowed-selection']]: allowedSelection },\n      'd-flex',\n      'justify-center',\n      'align-center',\n    ]\"\n  >\n    <div v-if=\"!isChecked\" :class=\"[$styles.text]\">{{ params.value }}</div>\n    <PlCheckbox\n      v-if=\"forceShowCheckbox\"\n      v-model=\"isChecked\"\n      :class=\"[$styles.checkbox, isChecked && $styles.checked]\"\n      @update:modelValue=\"setSelection\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlAgRowNumCheckbox.js","names":[],"sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams } from \"ag-grid-enterprise\";\nimport { PlCheckbox } from \"@milaboratories/uikit\";\nimport { ref, computed, onBeforeMount, onBeforeUnmount } from \"vue\";\nimport $styles from \"./pl-ag-row-num-checkbox.module.scss\";\nimport { isSelectionEnabled } from \"../../lib\";\n\nconst props = defineProps<{ params: ICellRendererParams }>();\n\nconst api = props.params.api;\nconst isChecked = ref(!!props.params.node.isSelected());\nconst forceShowCheckbox = computed(() => isChecked.value || isSelectionEnabled(api));\nconst allowedSelection = ref(isSelectionEnabled(api));\n\nconst updateSelection = () => {\n  isChecked.value = props.params.node.isSelected() !== false;\n};\n\nconst setSelection = (val: boolean) => {\n  if (isSelectionEnabled(api)) {\n    props.params.node.setSelected(val);\n    updateSelection();\n  }\n};\n\nonBeforeMount(() => {\n  props.params.node.addEventListener(\"rowSelected\", updateSelection);\n});\n\nonBeforeUnmount(() => {\n  props.params.node.removeEventListener(\"rowSelected\", updateSelection);\n});\n</script>\n\n<template>\n  <div\n    data-testid=\"pl-ag-row-num-checkbox\"\n    :class=\"[\n      $styles.container,\n      { [$styles['allowed-selection']]: allowedSelection },\n      'd-flex',\n      'justify-center',\n      'align-center',\n    ]\"\n  >\n    <div v-if=\"!isChecked\" data-testid=\"pl-ag-row-num-checkbox-value\" :class=\"[$styles.text]\">\n      {{ params.value }}\n    </div>\n    <PlCheckbox\n      v-if=\"forceShowCheckbox\"\n      v-model=\"isChecked\"\n      data-testid=\"pl-ag-row-num-checkbox-checkbox\"\n      :class=\"[$styles.checkbox, isChecked && $styles.checked]\"\n      @update:modelValue=\"setSelection\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgRowNumCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAM9D,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,CAAC;AA8FnD,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PlAgRowNumCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAM9D,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,CAAC;AAkGnD,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue2.js

@@ -17,19 +17,24 @@ var h = /* @__PURE__ */ o({
 			h.params.node.addEventListener("rowSelected", b);
 		}), l(() => {
 			h.params.node.removeEventListener("rowSelected", b);
-		}), (t, n) => (u(), a("div", { class: s([
-			p(e).container,
-			{ [p(e)["allowed-selection"]]: y.value },
-			"d-flex",
-			"justify-center",
-			"align-center"
-		]) }, [_.value ? i("", !0) : (u(), a("div", {
+		}), (t, n) => (u(), a("div", {
+			"data-testid": "pl-ag-row-num-checkbox",
+			class: s([
+				p(e).container,
+				{ [p(e)["allowed-selection"]]: y.value },
+				"d-flex",
+				"justify-center",
+				"align-center"
+			])
+		}, [_.value ? i("", !0) : (u(), a("div", {
 			key: 0,
+			"data-testid": "pl-ag-row-num-checkbox-value",
 			class: s([p(e).text])
 		}, f(o.params.value), 3)), v.value ? (u(), r(p(m), {
 			key: 1,
 			modelValue: _.value,
 			"onUpdate:modelValue": [n[0] ||= (e) => _.value = e, x],
+			"data-testid": "pl-ag-row-num-checkbox-checkbox",
 			class: s([p(e).checkbox, _.value && p(e).checked])
 		}, null, 8, ["modelValue", "class"])) : i("", !0)], 2));
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgRowNumCheckbox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams } from \"ag-grid-enterprise\";\nimport { PlCheckbox } from \"@milaboratories/uikit\";\nimport { ref, computed, onBeforeMount, onBeforeUnmount } from \"vue\";\nimport $styles from \"./pl-ag-row-num-checkbox.module.scss\";\nimport { isSelectionEnabled } from \"../../lib\";\n\nconst props = defineProps<{ params: ICellRendererParams }>();\n\nconst api = props.params.api;\nconst isChecked = ref(!!props.params.node.isSelected());\nconst forceShowCheckbox = computed(() => isChecked.value || isSelectionEnabled(api));\nconst allowedSelection = ref(isSelectionEnabled(api));\n\nconst updateSelection = () => {\n  isChecked.value = props.params.node.isSelected() !== false;\n};\n\nconst setSelection = (val: boolean) => {\n  if (isSelectionEnabled(api)) {\n    props.params.node.setSelected(val);\n    updateSelection();\n  }\n};\n\nonBeforeMount(() => {\n  props.params.node.addEventListener(\"rowSelected\", updateSelection);\n});\n\nonBeforeUnmount(() => {\n  props.params.node.removeEventListener(\"rowSelected\", updateSelection);\n});\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $styles.container,\n      { [$styles['allowed-selection']]: allowedSelection },\n      'd-flex',\n      'justify-center',\n      'align-center',\n    ]\"\n  >\n    <div v-if=\"!isChecked\" :class=\"[$styles.text]\">{{ params.value }}</div>\n    <PlCheckbox\n      v-if=\"forceShowCheckbox\"\n      v-model=\"isChecked\"\n      :class=\"[$styles.checkbox, isChecked && $styles.checked]\"\n      @update:modelValue=\"setSelection\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAOA,IAAM,IAAQ,GAER,IAAM,EAAM,OAAO,KACnB,IAAY,EAAI,CAAC,CAAC,EAAM,OAAO,KAAK,YAAY,CAAC,EACjD,IAAoB,QAAe,EAAU,SAAS,EAAmB,EAAI,CAAC,EAC9E,IAAmB,EAAI,EAAmB,EAAI,CAAC,EAE/C,UAAwB;AAC5B,KAAU,QAAQ,EAAM,OAAO,KAAK,YAAY,KAAK;KAGjD,KAAgB,MAAiB;AACrC,GAAI,EAAmB,EAAI,KACzB,EAAM,OAAO,KAAK,YAAY,EAAI,EAClC,GAAiB;;SAIrB,QAAoB;AAClB,KAAM,OAAO,KAAK,iBAAiB,eAAe,EAAgB;IAClE,EAEF,QAAsB;AACpB,KAAM,OAAO,KAAK,oBAAoB,eAAe,EAAgB;IACrE,kBAIA,EAgBM,OAAA,EAfH,OAAK,EAAA;GAAU,EAAA,EAAO,CAAC;MAAoB,EAAA,EAAO,CAAA,uBAAwB,EAAA,OAAgB;;;;SAQ/E,EAAA,QAAkD,EAAA,IAAA,GAAA,IAAlD,GAAA,EAAZ,EAAuE,OAAA;;GAA/C,OAAK,EAAA,CAAG,EAAA,EAAO,CAAC,KAAI,CAAA;OAAM,EAAA,OAAO,MAAK,EAAA,EAAA,GAEtD,EAAA,SAAA,GAAA,EADR,EAKE,EAAA,EAAA,EAAA;;eAHS,EAAA;6CAAS,QAAA,GAEE,EAAA;GADnB,OAAK,EAAA,CAAG,EAAA,EAAO,CAAC,UAAU,EAAA,SAAa,EAAA,EAAO,CAAC,QAAO,CAAA"}
+{"version":3,"file":"PlAgRowNumCheckbox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams } from \"ag-grid-enterprise\";\nimport { PlCheckbox } from \"@milaboratories/uikit\";\nimport { ref, computed, onBeforeMount, onBeforeUnmount } from \"vue\";\nimport $styles from \"./pl-ag-row-num-checkbox.module.scss\";\nimport { isSelectionEnabled } from \"../../lib\";\n\nconst props = defineProps<{ params: ICellRendererParams }>();\n\nconst api = props.params.api;\nconst isChecked = ref(!!props.params.node.isSelected());\nconst forceShowCheckbox = computed(() => isChecked.value || isSelectionEnabled(api));\nconst allowedSelection = ref(isSelectionEnabled(api));\n\nconst updateSelection = () => {\n  isChecked.value = props.params.node.isSelected() !== false;\n};\n\nconst setSelection = (val: boolean) => {\n  if (isSelectionEnabled(api)) {\n    props.params.node.setSelected(val);\n    updateSelection();\n  }\n};\n\nonBeforeMount(() => {\n  props.params.node.addEventListener(\"rowSelected\", updateSelection);\n});\n\nonBeforeUnmount(() => {\n  props.params.node.removeEventListener(\"rowSelected\", updateSelection);\n});\n</script>\n\n<template>\n  <div\n    data-testid=\"pl-ag-row-num-checkbox\"\n    :class=\"[\n      $styles.container,\n      { [$styles['allowed-selection']]: allowedSelection },\n      'd-flex',\n      'justify-center',\n      'align-center',\n    ]\"\n  >\n    <div v-if=\"!isChecked\" data-testid=\"pl-ag-row-num-checkbox-value\" :class=\"[$styles.text]\">\n      {{ params.value }}\n    </div>\n    <PlCheckbox\n      v-if=\"forceShowCheckbox\"\n      v-model=\"isChecked\"\n      data-testid=\"pl-ag-row-num-checkbox-checkbox\"\n      :class=\"[$styles.checkbox, isChecked && $styles.checked]\"\n      @update:modelValue=\"setSelection\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAOA,IAAM,IAAQ,GAER,IAAM,EAAM,OAAO,KACnB,IAAY,EAAI,CAAC,CAAC,EAAM,OAAO,KAAK,YAAY,CAAC,EACjD,IAAoB,QAAe,EAAU,SAAS,EAAmB,EAAI,CAAC,EAC9E,IAAmB,EAAI,EAAmB,EAAI,CAAC,EAE/C,UAAwB;AAC5B,KAAU,QAAQ,EAAM,OAAO,KAAK,YAAY,KAAK;KAGjD,KAAgB,MAAiB;AACrC,GAAI,EAAmB,EAAI,KACzB,EAAM,OAAO,KAAK,YAAY,EAAI,EAClC,GAAiB;;SAIrB,QAAoB;AAClB,KAAM,OAAO,KAAK,iBAAiB,eAAe,EAAgB;IAClE,EAEF,QAAsB;AACpB,KAAM,OAAO,KAAK,oBAAoB,eAAe,EAAgB;IACrE,kBAIA,EAoBM,OAAA;GAnBJ,eAAY;GACX,OAAK,EAAA;IAAU,EAAA,EAAO,CAAC;OAAoB,EAAA,EAAO,CAAA,uBAAwB,EAAA,OAAgB;;;;;MAQ/E,EAAA,QACK,EAAA,IAAA,GAAA,IADL,GAAA,EAAZ,EAEM,OAAA;;GAFiB,eAAY;GAAgC,OAAK,EAAA,CAAG,EAAA,EAAO,CAAC,KAAI,CAAA;OAClF,EAAA,OAAO,MAAK,EAAA,EAAA,GAGT,EAAA,SAAA,GAAA,EADR,EAME,EAAA,EAAA,EAAA;;eAJS,EAAA;6CAAS,QAAA,GAGE,EAAA;GAFpB,eAAY;GACX,OAAK,EAAA,CAAG,EAAA,EAAO,CAAC,UAAU,EAAA,SAAa,EAAA,EAAO,CAAC,QAAO,CAAA"}

package/dist/components/PlAgRowNumHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAgRowNumHeader.js","names":[],"sources":["../../src/components/PlAgRowNumHeader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCheckbox } from \"@milaboratories/uikit\";\nimport type { IHeaderParams } from \"ag-grid-enterprise\";\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from \"vue\";\nimport {\n  deselectAll,\n  getSelectedRowsCount,\n  getTotalRowsCount,\n  isSelectionEnabled,\n  selectAll,\n} from \"../lib\";\n\nconst { params } = defineProps<{\n  params: IHeaderParams;\n}>();\n\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst isSelectable = ref(isSelectionEnabled(params.api));\n\nconst someRowsSelected = computed(() => selectedRowCount.value > 0);\n\nconst allRowsSelected = computed(\n  () => someRowsSelected.value && selectedRowCount.value === totalRowCount.value,\n);\n\nfunction toggleSelectAll() {\n  if (someRowsSelected.value) {\n    deselectAll(params.api);\n  } else {\n    selectAll(params.api);\n  }\n}\n\nfunction updateRowCounts() {\n  selectedRowCount.value = getSelectedRowsCount(params.api);\n  totalRowCount.value = getTotalRowsCount(params.api);\n}\n\nfunction updateIsSelectable() {\n  isSelectable.value = isSelectionEnabled(params.api);\n}\n\nonBeforeMount(() => {\n  params.api.addEventListener(\"selectionChanged\", updateRowCounts);\n  params.api.addEventListener(\"rowDataUpdated\", updateRowCounts);\n  params.api.addEventListener(\"modelUpdated\", updateRowCounts);\n  params.api.addEventListener(\"stateUpdated\", updateIsSelectable);\n});\n\nonBeforeUnmount(() => {\n  params.api.removeEventListener(\"selectionChanged\", updateRowCounts);\n  params.api.removeEventListener(\"rowDataUpdated\", updateRowCounts);\n  params.api.removeEventListener(\"modelUpdated\", updateRowCounts);\n  params.api.removeEventListener(\"stateUpdated\", updateIsSelectable);\n});\n</script>\n\n<template>\n  <div\n    style=\"\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    \"\n  >\n    <PlCheckbox\n      v-if=\"isSelectable\"\n      :model-value=\"someRowsSelected\"\n      :indeterminate=\"someRowsSelected && !allRowsSelected\"\n      @update:model-value=\"toggleSelectAll\"\n    />\n    <span v-else>\n      {{ params.displayName }}\n    </span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlAgRowNumHeader.js","names":[],"sources":["../../src/components/PlAgRowNumHeader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCheckbox } from \"@milaboratories/uikit\";\nimport type { IHeaderParams } from \"ag-grid-enterprise\";\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from \"vue\";\nimport {\n  deselectAll,\n  getSelectedRowsCount,\n  getTotalRowsCount,\n  isSelectionEnabled,\n  selectAll,\n} from \"../lib\";\n\nconst { params } = defineProps<{\n  params: IHeaderParams;\n}>();\n\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst isSelectable = ref(isSelectionEnabled(params.api));\n\nconst someRowsSelected = computed(() => selectedRowCount.value > 0);\n\nconst allRowsSelected = computed(\n  () => someRowsSelected.value && selectedRowCount.value === totalRowCount.value,\n);\n\nfunction toggleSelectAll() {\n  if (someRowsSelected.value) {\n    deselectAll(params.api);\n  } else {\n    selectAll(params.api);\n  }\n}\n\nfunction updateRowCounts() {\n  selectedRowCount.value = getSelectedRowsCount(params.api);\n  totalRowCount.value = getTotalRowsCount(params.api);\n}\n\nfunction updateIsSelectable() {\n  isSelectable.value = isSelectionEnabled(params.api);\n}\n\nonBeforeMount(() => {\n  params.api.addEventListener(\"selectionChanged\", updateRowCounts);\n  params.api.addEventListener(\"rowDataUpdated\", updateRowCounts);\n  params.api.addEventListener(\"modelUpdated\", updateRowCounts);\n  params.api.addEventListener(\"stateUpdated\", updateIsSelectable);\n});\n\nonBeforeUnmount(() => {\n  params.api.removeEventListener(\"selectionChanged\", updateRowCounts);\n  params.api.removeEventListener(\"rowDataUpdated\", updateRowCounts);\n  params.api.removeEventListener(\"modelUpdated\", updateRowCounts);\n  params.api.removeEventListener(\"stateUpdated\", updateIsSelectable);\n});\n</script>\n\n<template>\n  <div\n    data-testid=\"pl-ag-row-num-header\"\n    style=\"\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    \"\n  >\n    <PlCheckbox\n      v-if=\"isSelectable\"\n      data-testid=\"pl-ag-row-num-header-checkbox\"\n      :model-value=\"someRowsSelected\"\n      :indeterminate=\"someRowsSelected && !allRowsSelected\"\n      @update:model-value=\"toggleSelectAll\"\n    />\n    <span v-else data-testid=\"pl-ag-row-num-header-label\">\n      {{ params.displayName }}\n    </span>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgRowNumHeader.vue.d.ts","sourceRoot":"","sources":["../../src/components/PlAgRowNumHeader.vue"],"names":[],"mappings":"AAmFA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAUxD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,aAAa,CAAC;CACvB,CAAC;AAqGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PlAgRowNumHeader.vue.d.ts","sourceRoot":"","sources":["../../src/components/PlAgRowNumHeader.vue"],"names":[],"mappings":"AAqFA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAUxD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,aAAa,CAAC;CACvB,CAAC;AAyGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlAgRowNumHeader.vue2.js

@@ -3,13 +3,19 @@ import "../lib.js";
 import { computed as a, createBlock as o, createElementBlock as s, defineComponent as c, onBeforeMount as l, onBeforeUnmount as u, openBlock as d, ref as f, toDisplayString as p, unref as m } from "vue";
 import { PlCheckbox as h } from "@milaboratories/uikit";
 //#region src/components/PlAgRowNumHeader.vue?vue&type=script&setup=true&lang.ts
-var g = { style: {
-	position: "absolute",
-	inset: "0",
-	display: "flex",
-	"justify-content": "center",
-	"align-items": "center"
-} }, _ = { key: 1 }, v = /* @__PURE__ */ c({
+var g = {
+	"data-testid": "pl-ag-row-num-header",
+	style: {
+		position: "absolute",
+		inset: "0",
+		display: "flex",
+		"justify-content": "center",
+		"align-items": "center"
+	}
+}, _ = {
+	key: 1,
+	"data-testid": "pl-ag-row-num-header-label"
+}, v = /* @__PURE__ */ c({
 	__name: "PlAgRowNumHeader",
 	props: { params: {} },
 	setup(c) {
@@ -29,6 +35,7 @@ var g = { style: {
 			c.params.api.removeEventListener("selectionChanged", w), c.params.api.removeEventListener("rowDataUpdated", w), c.params.api.removeEventListener("modelUpdated", w), c.params.api.removeEventListener("stateUpdated", T);
 		}), (e, t) => (d(), s("div", g, [b.value ? (d(), o(m(h), {
 			key: 0,
+			"data-testid": "pl-ag-row-num-header-checkbox",
 			"model-value": x.value,
 			indeterminate: x.value && !S.value,
 			"onUpdate:modelValue": C

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgRowNumHeader.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/PlAgRowNumHeader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCheckbox } from \"@milaboratories/uikit\";\nimport type { IHeaderParams } from \"ag-grid-enterprise\";\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from \"vue\";\nimport {\n  deselectAll,\n  getSelectedRowsCount,\n  getTotalRowsCount,\n  isSelectionEnabled,\n  selectAll,\n} from \"../lib\";\n\nconst { params } = defineProps<{\n  params: IHeaderParams;\n}>();\n\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst isSelectable = ref(isSelectionEnabled(params.api));\n\nconst someRowsSelected = computed(() => selectedRowCount.value > 0);\n\nconst allRowsSelected = computed(\n  () => someRowsSelected.value && selectedRowCount.value === totalRowCount.value,\n);\n\nfunction toggleSelectAll() {\n  if (someRowsSelected.value) {\n    deselectAll(params.api);\n  } else {\n    selectAll(params.api);\n  }\n}\n\nfunction updateRowCounts() {\n  selectedRowCount.value = getSelectedRowsCount(params.api);\n  totalRowCount.value = getTotalRowsCount(params.api);\n}\n\nfunction updateIsSelectable() {\n  isSelectable.value = isSelectionEnabled(params.api);\n}\n\nonBeforeMount(() => {\n  params.api.addEventListener(\"selectionChanged\", updateRowCounts);\n  params.api.addEventListener(\"rowDataUpdated\", updateRowCounts);\n  params.api.addEventListener(\"modelUpdated\", updateRowCounts);\n  params.api.addEventListener(\"stateUpdated\", updateIsSelectable);\n});\n\nonBeforeUnmount(() => {\n  params.api.removeEventListener(\"selectionChanged\", updateRowCounts);\n  params.api.removeEventListener(\"rowDataUpdated\", updateRowCounts);\n  params.api.removeEventListener(\"modelUpdated\", updateRowCounts);\n  params.api.removeEventListener(\"stateUpdated\", updateIsSelectable);\n});\n</script>\n\n<template>\n  <div\n    style=\"\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    \"\n  >\n    <PlCheckbox\n      v-if=\"isSelectable\"\n      :model-value=\"someRowsSelected\"\n      :indeterminate=\"someRowsSelected && !allRowsSelected\"\n      @update:model-value=\"toggleSelectAll\"\n    />\n    <span v-else>\n      {{ params.displayName }}\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAgBA,IAAM,IAAmB,EAAI,EAAqB,EAAA,OAAO,IAAI,CAAC,EACxD,IAAgB,EAAI,EAAkB,EAAA,OAAO,IAAI,CAAC,EAClD,IAAe,EAAI,EAAmB,EAAA,OAAO,IAAI,CAAC,EAElD,IAAmB,QAAe,EAAiB,QAAQ,EAAE,EAE7D,IAAkB,QAChB,EAAiB,SAAS,EAAiB,UAAU,EAAc,MAC1E;EAED,SAAS,IAAkB;AACzB,GAAI,EAAiB,QACnB,EAAY,EAAA,OAAO,IAAI,GAEvB,EAAU,EAAA,OAAO,IAAI;;EAIzB,SAAS,IAAkB;AAEzB,GADA,EAAiB,QAAQ,EAAqB,EAAA,OAAO,IAAI,EACzD,EAAc,QAAQ,EAAkB,EAAA,OAAO,IAAI;;EAGrD,SAAS,IAAqB;AAC5B,KAAa,QAAQ,EAAmB,EAAA,OAAO,IAAI;;SAGrD,QAAoB;AAIlB,GAHA,EAAA,OAAO,IAAI,iBAAiB,oBAAoB,EAAgB,EAChE,EAAA,OAAO,IAAI,iBAAiB,kBAAkB,EAAgB,EAC9D,EAAA,OAAO,IAAI,iBAAiB,gBAAgB,EAAgB,EAC5D,EAAA,OAAO,IAAI,iBAAiB,gBAAgB,EAAmB;IAC/D,EAEF,QAAsB;AAIpB,GAHA,EAAA,OAAO,IAAI,oBAAoB,oBAAoB,EAAgB,EACnE,EAAA,OAAO,IAAI,oBAAoB,kBAAkB,EAAgB,EACjE,EAAA,OAAO,IAAI,oBAAoB,gBAAgB,EAAgB,EAC/D,EAAA,OAAO,IAAI,oBAAoB,gBAAgB,EAAmB;IAClE,kBAIA,EAkBM,OAlBN,GAkBM,CARI,EAAA,SAAA,GAAA,EADR,EAKE,EAAA,EAAA,EAAA;;GAHC,eAAa,EAAA;GACb,eAAe,EAAA,SAAgB,CAAK,EAAA;GACpC,uBAAoB;yDAEvB,EAEO,QAAA,GAAA,EADF,EAAA,OAAO,YAAW,EAAA,EAAA,EAAA,CAAA"}
+{"version":3,"file":"PlAgRowNumHeader.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/PlAgRowNumHeader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCheckbox } from \"@milaboratories/uikit\";\nimport type { IHeaderParams } from \"ag-grid-enterprise\";\nimport { computed, onBeforeMount, onBeforeUnmount, ref } from \"vue\";\nimport {\n  deselectAll,\n  getSelectedRowsCount,\n  getTotalRowsCount,\n  isSelectionEnabled,\n  selectAll,\n} from \"../lib\";\n\nconst { params } = defineProps<{\n  params: IHeaderParams;\n}>();\n\nconst selectedRowCount = ref(getSelectedRowsCount(params.api));\nconst totalRowCount = ref(getTotalRowsCount(params.api));\nconst isSelectable = ref(isSelectionEnabled(params.api));\n\nconst someRowsSelected = computed(() => selectedRowCount.value > 0);\n\nconst allRowsSelected = computed(\n  () => someRowsSelected.value && selectedRowCount.value === totalRowCount.value,\n);\n\nfunction toggleSelectAll() {\n  if (someRowsSelected.value) {\n    deselectAll(params.api);\n  } else {\n    selectAll(params.api);\n  }\n}\n\nfunction updateRowCounts() {\n  selectedRowCount.value = getSelectedRowsCount(params.api);\n  totalRowCount.value = getTotalRowsCount(params.api);\n}\n\nfunction updateIsSelectable() {\n  isSelectable.value = isSelectionEnabled(params.api);\n}\n\nonBeforeMount(() => {\n  params.api.addEventListener(\"selectionChanged\", updateRowCounts);\n  params.api.addEventListener(\"rowDataUpdated\", updateRowCounts);\n  params.api.addEventListener(\"modelUpdated\", updateRowCounts);\n  params.api.addEventListener(\"stateUpdated\", updateIsSelectable);\n});\n\nonBeforeUnmount(() => {\n  params.api.removeEventListener(\"selectionChanged\", updateRowCounts);\n  params.api.removeEventListener(\"rowDataUpdated\", updateRowCounts);\n  params.api.removeEventListener(\"modelUpdated\", updateRowCounts);\n  params.api.removeEventListener(\"stateUpdated\", updateIsSelectable);\n});\n</script>\n\n<template>\n  <div\n    data-testid=\"pl-ag-row-num-header\"\n    style=\"\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    \"\n  >\n    <PlCheckbox\n      v-if=\"isSelectable\"\n      data-testid=\"pl-ag-row-num-header-checkbox\"\n      :model-value=\"someRowsSelected\"\n      :indeterminate=\"someRowsSelected && !allRowsSelected\"\n      @update:model-value=\"toggleSelectAll\"\n    />\n    <span v-else data-testid=\"pl-ag-row-num-header-label\">\n      {{ params.displayName }}\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgBA,IAAM,IAAmB,EAAI,EAAqB,EAAA,OAAO,IAAI,CAAC,EACxD,IAAgB,EAAI,EAAkB,EAAA,OAAO,IAAI,CAAC,EAClD,IAAe,EAAI,EAAmB,EAAA,OAAO,IAAI,CAAC,EAElD,IAAmB,QAAe,EAAiB,QAAQ,EAAE,EAE7D,IAAkB,QAChB,EAAiB,SAAS,EAAiB,UAAU,EAAc,MAC1E;EAED,SAAS,IAAkB;AACzB,GAAI,EAAiB,QACnB,EAAY,EAAA,OAAO,IAAI,GAEvB,EAAU,EAAA,OAAO,IAAI;;EAIzB,SAAS,IAAkB;AAEzB,GADA,EAAiB,QAAQ,EAAqB,EAAA,OAAO,IAAI,EACzD,EAAc,QAAQ,EAAkB,EAAA,OAAO,IAAI;;EAGrD,SAAS,IAAqB;AAC5B,KAAa,QAAQ,EAAmB,EAAA,OAAO,IAAI;;SAGrD,QAAoB;AAIlB,GAHA,EAAA,OAAO,IAAI,iBAAiB,oBAAoB,EAAgB,EAChE,EAAA,OAAO,IAAI,iBAAiB,kBAAkB,EAAgB,EAC9D,EAAA,OAAO,IAAI,iBAAiB,gBAAgB,EAAgB,EAC5D,EAAA,OAAO,IAAI,iBAAiB,gBAAgB,EAAmB;IAC/D,EAEF,QAAsB;AAIpB,GAHA,EAAA,OAAO,IAAI,oBAAoB,oBAAoB,EAAgB,EACnE,EAAA,OAAO,IAAI,oBAAoB,kBAAkB,EAAgB,EACjE,EAAA,OAAO,IAAI,oBAAoB,gBAAgB,EAAgB,EAC/D,EAAA,OAAO,IAAI,oBAAoB,gBAAgB,EAAmB;IAClE,kBAIA,EAoBM,OApBN,GAoBM,CATI,EAAA,SAAA,GAAA,EADR,EAME,EAAA,EAAA,EAAA;;GAJA,eAAY;GACX,eAAa,EAAA;GACb,eAAe,EAAA,SAAgB,CAAK,EAAA;GACpC,uBAAoB;yDAEvB,EAEO,QAFP,GAEO,EADF,EAAA,OAAO,YAAW,EAAA,EAAA,EAAA,CAAA"}

package/dist/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAgTextAndButtonCell.js","names":[],"sources":["../../../src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams, RowDoubleClickedEvent } from \"ag-grid-enterprise\";\nimport type { MaskIconName16 } from \"@milaboratories/uikit\";\nimport { PlMaskIcon16 } from \"@milaboratories/uikit\";\nimport \"./pl-ag-text-and-button-cell.scss\";\n\nconst props = defineProps<{\n  params: ICellRendererParams & {\n    /**\n     * Button icon MaskIconName16\n     */\n    icon?: MaskIconName16;\n    /**\n     * Button label\n     */\n    btnLabel?: string;\n    /**\n     * If invokeRowsOnDoubleClick = true, clicking a button inside the row\n     * triggers the doubleClick event for the entire row. In this case,\n     * the handler passed to the component is not called, even if it is defined.\n     *\n     * If invokeRowsOnDoubleClick = false, the doubleClick event for the row\n     * is not triggered, but the provided handler will be called, receiving\n     * the ICellRendererParams as an argument.\n     */\n    invokeRowsOnDoubleClick?: boolean;\n    /**\n     * plHandler parameter is a click handler that is invoked when\n     * the invokeRowsOnDoubleClick property is set to false.\n     */\n    onClick?: (params: ICellRendererParams) => void;\n  };\n}>();\n\nfunction triggerRowDoubleClick() {\n  if (props.params.invokeRowsOnDoubleClick) {\n    const gridApi = props.params.api;\n\n    const event: RowDoubleClickedEvent = {\n      rowPinned: props.params.node.rowPinned,\n      api: gridApi,\n      rowIndex: props.params.node.rowIndex,\n      context: gridApi,\n      type: \"rowDoubleClicked\",\n      node: props.params.node,\n      data: props.params.data,\n      event: null,\n    };\n\n    gridApi.dispatchEvent(event);\n  } else {\n    props.params.onClick?.(props.params);\n  }\n}\n</script>\n<template>\n  <div class=\"pl-ag-grid-open-cell d-flex\">\n    <div class=\"pl-ag-grid-open-cell__value\">\n      {{ params.value }}\n    </div>\n    <div\n      class=\"pl-ag-grid-open-cell__activator text-caps11 align-center\"\n      @click.stop=\"triggerRowDoubleClick\"\n    >\n      <PlMaskIcon16 :name=\"params.icon ?? 'maximize'\" />\n      {{ params.btnLabel ?? \"Open\" }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlAgTextAndButtonCell.js","names":[],"sources":["../../../src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams, RowDoubleClickedEvent } from \"ag-grid-enterprise\";\nimport type { MaskIconName16 } from \"@milaboratories/uikit\";\nimport { PlMaskIcon16 } from \"@milaboratories/uikit\";\nimport \"./pl-ag-text-and-button-cell.scss\";\n\nconst props = defineProps<{\n  params: ICellRendererParams & {\n    /**\n     * Button icon MaskIconName16\n     */\n    icon?: MaskIconName16;\n    /**\n     * Button label\n     */\n    btnLabel?: string;\n    /**\n     * If invokeRowsOnDoubleClick = true, clicking a button inside the row\n     * triggers the doubleClick event for the entire row. In this case,\n     * the handler passed to the component is not called, even if it is defined.\n     *\n     * If invokeRowsOnDoubleClick = false, the doubleClick event for the row\n     * is not triggered, but the provided handler will be called, receiving\n     * the ICellRendererParams as an argument.\n     */\n    invokeRowsOnDoubleClick?: boolean;\n    /**\n     * plHandler parameter is a click handler that is invoked when\n     * the invokeRowsOnDoubleClick property is set to false.\n     */\n    onClick?: (params: ICellRendererParams) => void;\n  };\n}>();\n\nfunction triggerRowDoubleClick() {\n  if (props.params.invokeRowsOnDoubleClick) {\n    const gridApi = props.params.api;\n\n    const event: RowDoubleClickedEvent = {\n      rowPinned: props.params.node.rowPinned,\n      api: gridApi,\n      rowIndex: props.params.node.rowIndex,\n      context: gridApi,\n      type: \"rowDoubleClicked\",\n      node: props.params.node,\n      data: props.params.data,\n      event: null,\n    };\n\n    gridApi.dispatchEvent(event);\n  } else {\n    props.params.onClick?.(props.params);\n  }\n}\n</script>\n<template>\n  <div data-testid=\"pl-ag-text-and-button-cell\" class=\"pl-ag-grid-open-cell d-flex\">\n    <div data-testid=\"pl-ag-text-and-button-cell-value\" class=\"pl-ag-grid-open-cell__value\">\n      {{ params.value }}\n    </div>\n    <div\n      data-testid=\"pl-ag-text-and-button-cell-button\"\n      class=\"pl-ag-grid-open-cell__activator text-caps11 align-center\"\n      @click.stop=\"triggerRowDoubleClick\"\n    >\n      <PlMaskIcon16 :name=\"params.icon ?? 'maximize'\" />\n      {{ params.btnLabel ?? \"Open\" }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgTextAndButtonCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue"],"names":[],"mappings":"AAwEA,OAAO,KAAK,EAAE,mBAAmB,EAAyB,MAAM,oBAAoB,CAAC;AACrF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,mCAAmC,CAAC;AAE3C,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,mBAAmB,GAAG;QAC5B;;WAEG;QACH,IAAI,CAAC,EAAE,cAAc,CAAC;QACtB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;;;;;;;WAQG;QACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;QAClC;;;WAGG;QACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;KACjD,CAAC;CACH,CAAC;AA0EF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PlAgTextAndButtonCell.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue"],"names":[],"mappings":"AAyEA,OAAO,KAAK,EAAE,mBAAmB,EAAyB,MAAM,oBAAoB,CAAC;AACrF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,mCAAmC,CAAC;AAE3C,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,mBAAmB,GAAG;QAC5B;;WAEG;QACH,IAAI,CAAC,EAAE,cAAc,CAAC;QACtB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;;;;;;;WAQG;QACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;QAClC;;;WAGG;QACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;KACjD,CAAC;CACH,CAAC;AA6EF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue2.js

@@ -2,7 +2,13 @@ import './pl-ag-text-and-button-cell.css';/* empty css
 import { createElementBlock as e, createElementVNode as t, createTextVNode as n, createVNode as r, defineComponent as i, openBlock as a, toDisplayString as o, unref as s, withModifiers as c } from "vue";
 import { PlMaskIcon16 as l } from "@milaboratories/uikit";
 //#region src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue?vue&type=script&setup=true&lang.ts
-var u = { class: "pl-ag-grid-open-cell d-flex" }, d = { class: "pl-ag-grid-open-cell__value" }, f = /* @__PURE__ */ i({
+var u = {
+	"data-testid": "pl-ag-text-and-button-cell",
+	class: "pl-ag-grid-open-cell d-flex"
+}, d = {
+	"data-testid": "pl-ag-text-and-button-cell-value",
+	class: "pl-ag-grid-open-cell__value"
+}, f = /* @__PURE__ */ i({
 	__name: "PlAgTextAndButtonCell",
 	props: { params: {} },
 	setup(i) {
@@ -23,6 +29,7 @@ var u = { class: "pl-ag-grid-open-cell d-flex" }, d = { class: "pl-ag-grid-open-
 			} else f.params.onClick?.(f.params);
 		}
 		return (f, m) => (a(), e("div", u, [t("div", d, o(i.params.value), 1), t("div", {
+			"data-testid": "pl-ag-text-and-button-cell-button",
 			class: "pl-ag-grid-open-cell__activator text-caps11 align-center",
 			onClick: c(p, ["stop"])
 		}, [r(s(l), { name: i.params.icon ?? "maximize" }, null, 8, ["name"]), n(" " + o(i.params.btnLabel ?? "Open"), 1)])]));

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

@@ -1 +1 @@
-{"version":3,"file":"PlAgTextAndButtonCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams, RowDoubleClickedEvent } from \"ag-grid-enterprise\";\nimport type { MaskIconName16 } from \"@milaboratories/uikit\";\nimport { PlMaskIcon16 } from \"@milaboratories/uikit\";\nimport \"./pl-ag-text-and-button-cell.scss\";\n\nconst props = defineProps<{\n  params: ICellRendererParams & {\n    /**\n     * Button icon MaskIconName16\n     */\n    icon?: MaskIconName16;\n    /**\n     * Button label\n     */\n    btnLabel?: string;\n    /**\n     * If invokeRowsOnDoubleClick = true, clicking a button inside the row\n     * triggers the doubleClick event for the entire row. In this case,\n     * the handler passed to the component is not called, even if it is defined.\n     *\n     * If invokeRowsOnDoubleClick = false, the doubleClick event for the row\n     * is not triggered, but the provided handler will be called, receiving\n     * the ICellRendererParams as an argument.\n     */\n    invokeRowsOnDoubleClick?: boolean;\n    /**\n     * plHandler parameter is a click handler that is invoked when\n     * the invokeRowsOnDoubleClick property is set to false.\n     */\n    onClick?: (params: ICellRendererParams) => void;\n  };\n}>();\n\nfunction triggerRowDoubleClick() {\n  if (props.params.invokeRowsOnDoubleClick) {\n    const gridApi = props.params.api;\n\n    const event: RowDoubleClickedEvent = {\n      rowPinned: props.params.node.rowPinned,\n      api: gridApi,\n      rowIndex: props.params.node.rowIndex,\n      context: gridApi,\n      type: \"rowDoubleClicked\",\n      node: props.params.node,\n      data: props.params.data,\n      event: null,\n    };\n\n    gridApi.dispatchEvent(event);\n  } else {\n    props.params.onClick?.(props.params);\n  }\n}\n</script>\n<template>\n  <div class=\"pl-ag-grid-open-cell d-flex\">\n    <div class=\"pl-ag-grid-open-cell__value\">\n      {{ params.value }}\n    </div>\n    <div\n      class=\"pl-ag-grid-open-cell__activator text-caps11 align-center\"\n      @click.stop=\"triggerRowDoubleClick\"\n    >\n      <PlMaskIcon16 :name=\"params.icon ?? 'maximize'\" />\n      {{ params.btnLabel ?? \"Open\" }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;EAMA,IAAM,IAAQ;EA4Bd,SAAS,IAAwB;AAC/B,OAAI,EAAM,OAAO,yBAAyB;IACxC,IAAM,IAAU,EAAM,OAAO,KAEvB,IAA+B;KACnC,WAAW,EAAM,OAAO,KAAK;KAC7B,KAAK;KACL,UAAU,EAAM,OAAO,KAAK;KAC5B,SAAS;KACT,MAAM;KACN,MAAM,EAAM,OAAO;KACnB,MAAM,EAAM,OAAO;KACnB,OAAO;KACR;AAED,MAAQ,cAAc,EAAM;SAE5B,GAAM,OAAO,UAAU,EAAM,OAAO;;yBAKtC,EAWM,OAXN,GAWM,CAVJ,EAEM,OAFN,GAEM,EADD,EAAA,OAAO,MAAK,EAAA,EAAA,EAEjB,EAMM,OAAA;GALJ,OAAM;GACL,SAAK,EAAO,GAAqB,CAAA,OAAA,CAAA;MAElC,EAAkD,EAAA,EAAA,EAAA,EAAnC,MAAM,EAAA,OAAO,QAAI,YAAA,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,EAAA,EAAkB,MAClD,EAAG,EAAA,OAAO,YAAQ,OAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"PlAgTextAndButtonCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ICellRendererParams, RowDoubleClickedEvent } from \"ag-grid-enterprise\";\nimport type { MaskIconName16 } from \"@milaboratories/uikit\";\nimport { PlMaskIcon16 } from \"@milaboratories/uikit\";\nimport \"./pl-ag-text-and-button-cell.scss\";\n\nconst props = defineProps<{\n  params: ICellRendererParams & {\n    /**\n     * Button icon MaskIconName16\n     */\n    icon?: MaskIconName16;\n    /**\n     * Button label\n     */\n    btnLabel?: string;\n    /**\n     * If invokeRowsOnDoubleClick = true, clicking a button inside the row\n     * triggers the doubleClick event for the entire row. In this case,\n     * the handler passed to the component is not called, even if it is defined.\n     *\n     * If invokeRowsOnDoubleClick = false, the doubleClick event for the row\n     * is not triggered, but the provided handler will be called, receiving\n     * the ICellRendererParams as an argument.\n     */\n    invokeRowsOnDoubleClick?: boolean;\n    /**\n     * plHandler parameter is a click handler that is invoked when\n     * the invokeRowsOnDoubleClick property is set to false.\n     */\n    onClick?: (params: ICellRendererParams) => void;\n  };\n}>();\n\nfunction triggerRowDoubleClick() {\n  if (props.params.invokeRowsOnDoubleClick) {\n    const gridApi = props.params.api;\n\n    const event: RowDoubleClickedEvent = {\n      rowPinned: props.params.node.rowPinned,\n      api: gridApi,\n      rowIndex: props.params.node.rowIndex,\n      context: gridApi,\n      type: \"rowDoubleClicked\",\n      node: props.params.node,\n      data: props.params.data,\n      event: null,\n    };\n\n    gridApi.dispatchEvent(event);\n  } else {\n    props.params.onClick?.(props.params);\n  }\n}\n</script>\n<template>\n  <div data-testid=\"pl-ag-text-and-button-cell\" class=\"pl-ag-grid-open-cell d-flex\">\n    <div data-testid=\"pl-ag-text-and-button-cell-value\" class=\"pl-ag-grid-open-cell__value\">\n      {{ params.value }}\n    </div>\n    <div\n      data-testid=\"pl-ag-text-and-button-cell-button\"\n      class=\"pl-ag-grid-open-cell__activator text-caps11 align-center\"\n      @click.stop=\"triggerRowDoubleClick\"\n    >\n      <PlMaskIcon16 :name=\"params.icon ?? 'maximize'\" />\n      {{ params.btnLabel ?? \"Open\" }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAMA,IAAM,IAAQ;EA4Bd,SAAS,IAAwB;AAC/B,OAAI,EAAM,OAAO,yBAAyB;IACxC,IAAM,IAAU,EAAM,OAAO,KAEvB,IAA+B;KACnC,WAAW,EAAM,OAAO,KAAK;KAC7B,KAAK;KACL,UAAU,EAAM,OAAO,KAAK;KAC5B,SAAS;KACT,MAAM;KACN,MAAM,EAAM,OAAO;KACnB,MAAM,EAAM,OAAO;KACnB,OAAO;KACR;AAED,MAAQ,cAAc,EAAM;SAE5B,GAAM,OAAO,UAAU,EAAM,OAAO;;yBAKtC,EAYM,OAZN,GAYM,CAXJ,EAEM,OAFN,GAEM,EADD,EAAA,OAAO,MAAK,EAAA,EAAA,EAEjB,EAOM,OAAA;GANJ,eAAY;GACZ,OAAM;GACL,SAAK,EAAO,GAAqB,CAAA,OAAA,CAAA;MAElC,EAAkD,EAAA,EAAA,EAAA,EAAnC,MAAM,EAAA,OAAO,QAAI,YAAA,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,EAAA,EAAkB,MAClD,EAAG,EAAA,OAAO,YAAQ,OAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/PlAnnotations/components/AnnotationsSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationsSidebar.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport $commonStyle from \"./style.module.css\";\n\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n  PlTextField,\n} from \"@milaboratories/uikit\";\nimport type { Annotation } from \"../types\";\nimport { validateTitle } from \"../utils\";\nimport { isEmpty } from \"es-toolkit/compat\";\n\nconst props = defineProps<{\n  annotation: Annotation;\n  selectedStepId: undefined | number;\n  onUpdateAnnotation: (annotation: Annotation) => void;\n  onUpdateSelectedStepId: (id: undefined | number) => void;\n}>();\n\nconst emits = defineEmits<{\n  (e: \"delete-schema\"): void;\n}>();\n\nfunction produceAnnotationUpdate(updater: (draft: Annotation) => void) {\n  props.onUpdateAnnotation(produce(props.annotation, updater));\n}\n\nfunction updateTitle(title: string | undefined) {\n  produceAnnotationUpdate((draft) => {\n    draft.title = title ?? \"\";\n  });\n}\n\nfunction updateSteps(steps: Annotation[\"steps\"]) {\n  produceAnnotationUpdate((draft) => {\n    draft.steps = steps;\n  });\n}\n\nfunction updateDefaultValue(value: string) {\n  produceAnnotationUpdate((draft) => {\n    draft.defaultValue = value === \"\" ? undefined : value;\n  });\n}\n\nfunction handleAddStep() {\n  const id = randomInt();\n  produceAnnotationUpdate((draft) => {\n    draft.steps.push({\n      id,\n      label: \"\",\n      filter: {\n        id: randomInt(),\n        type: \"and\",\n        filters: [],\n      },\n    });\n  });\n  props.onUpdateSelectedStepId(id);\n}\n</script>\n\n<template>\n  <PlSidebarItem>\n    <template #header-content>\n      <PlEditableTitle\n        :model-value=\"props.annotation.title\"\n        :class=\"{ [$commonStyle.flashing]: props.annotation.title.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Title\"\n        :autofocus=\"props.annotation.title.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateTitle\"\n      />\n    </template>\n    <template v-if=\"props.annotation\" #body-content>\n      <div :class=\"[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]\">\n        <span :class=\"$style.tip\">\n          Above annotations override the ones below. Rearrange them by dragging.\n        </span>\n        <PlElementList\n          :items=\"props.annotation.steps\"\n          :get-item-key=\"(item) => item.id\"\n          :is-active=\"(item) => item.id === props.selectedStepId\"\n          :item-class=\"$style.stepItem\"\n          :class=\"$style.steps\"\n          @update:items=\"updateSteps\"\n          @item-click=\"(item) => props.onUpdateSelectedStepId(item.id)\"\n        >\n          <template #item-title=\"{ item }\">\n            {{ item.label }}\n          </template>\n        </PlElementList>\n\n        <PlBtnSecondary icon=\"add\" @click=\"handleAddStep\"> Add label </PlBtnSecondary>\n\n        <PlTextField\n          :class=\"[\n            $style.defaultValue,\n            { [$style.emptyDefaultValue]: isEmpty(props.annotation.defaultValue) },\n          ]\"\n          :model-value=\"props.annotation.defaultValue ?? ''\"\n          label=\"Label remaining with\"\n          placeholder=\"No label\"\n          clearable\n          helper=\"This label will be applied to the remaining rows, after all other filters are applied.\"\n          @click.stop\n          @update:model-value=\"updateDefaultValue\"\n        />\n      </div>\n    </template>\n    <template #footer-content>\n      <PlBtnGhost\n        icon=\"delete-bin\"\n        reverse\n        :disabled=\"props.annotation.steps.length === 0\"\n        @click.stop=\"emits('delete-schema')\"\n      >\n        Delete Schema\n      </PlBtnGhost>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use \"@milaboratories/uikit/styles/variables\" as *;\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tip {\n  color: var(--txt-03);\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.stepItem {\n  cursor: pointer;\n}\n\n.defaultValue {\n  margin-top: 8px;\n}\n.emptyDefaultValue {\n  opacity: 0.5;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"AnnotationsSidebar.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport $commonStyle from \"./style.module.css\";\n\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n  PlTextField,\n} from \"@milaboratories/uikit\";\nimport type { Annotation } from \"../types\";\nimport { validateTitle } from \"../utils\";\nimport { isEmpty } from \"es-toolkit/compat\";\n\nconst props = defineProps<{\n  annotation: Annotation;\n  selectedStepId: undefined | number;\n  onUpdateAnnotation: (annotation: Annotation) => void;\n  onUpdateSelectedStepId: (id: undefined | number) => void;\n}>();\n\nconst emits = defineEmits<{\n  (e: \"delete-schema\"): void;\n}>();\n\nfunction produceAnnotationUpdate(updater: (draft: Annotation) => void) {\n  props.onUpdateAnnotation(produce(props.annotation, updater));\n}\n\nfunction updateTitle(title: string | undefined) {\n  produceAnnotationUpdate((draft) => {\n    draft.title = title ?? \"\";\n  });\n}\n\nfunction updateSteps(steps: Annotation[\"steps\"]) {\n  produceAnnotationUpdate((draft) => {\n    draft.steps = steps;\n  });\n}\n\nfunction updateDefaultValue(value: string) {\n  produceAnnotationUpdate((draft) => {\n    draft.defaultValue = value === \"\" ? undefined : value;\n  });\n}\n\nfunction handleAddStep() {\n  const id = randomInt();\n  produceAnnotationUpdate((draft) => {\n    draft.steps.push({\n      id,\n      label: \"\",\n      filter: {\n        id: randomInt(),\n        type: \"and\",\n        filters: [],\n      },\n    });\n  });\n  props.onUpdateSelectedStepId(id);\n}\n</script>\n\n<template>\n  <PlSidebarItem data-testid=\"pl-annotations-schema\">\n    <template #header-content>\n      <PlEditableTitle\n        data-testid=\"pl-annotations-schema-title\"\n        :model-value=\"props.annotation.title\"\n        :class=\"{ [$commonStyle.flashing]: props.annotation.title.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Title\"\n        :autofocus=\"props.annotation.title.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateTitle\"\n      />\n    </template>\n    <template v-if=\"props.annotation\" #body-content>\n      <div\n        data-testid=\"pl-annotations-schema-body\"\n        :class=\"[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]\"\n      >\n        <span data-testid=\"pl-annotations-schema-tip\" :class=\"$style.tip\">\n          Above annotations override the ones below. Rearrange them by dragging.\n        </span>\n        <PlElementList\n          data-testid=\"pl-annotations-steps\"\n          :items=\"props.annotation.steps\"\n          :get-item-key=\"(item) => item.id\"\n          :is-active=\"(item) => item.id === props.selectedStepId\"\n          :item-class=\"$style.stepItem\"\n          :class=\"$style.steps\"\n          @update:items=\"updateSteps\"\n          @item-click=\"(item) => props.onUpdateSelectedStepId(item.id)\"\n        >\n          <template #item-title=\"{ item }\">\n            {{ item.label }}\n          </template>\n        </PlElementList>\n\n        <PlBtnSecondary data-testid=\"pl-annotations-add-label\" icon=\"add\" @click=\"handleAddStep\">\n          Add label\n        </PlBtnSecondary>\n\n        <PlTextField\n          data-testid=\"pl-annotations-default-value\"\n          :class=\"[\n            $style.defaultValue,\n            { [$style.emptyDefaultValue]: isEmpty(props.annotation.defaultValue) },\n          ]\"\n          :model-value=\"props.annotation.defaultValue ?? ''\"\n          label=\"Label remaining with\"\n          placeholder=\"No label\"\n          clearable\n          helper=\"This label will be applied to the remaining rows, after all other filters are applied.\"\n          @click.stop\n          @update:model-value=\"updateDefaultValue\"\n        />\n      </div>\n    </template>\n    <template #footer-content>\n      <PlBtnGhost\n        data-testid=\"pl-annotations-delete-schema\"\n        icon=\"delete-bin\"\n        reverse\n        :disabled=\"props.annotation.steps.length === 0\"\n        @click.stop=\"emits('delete-schema')\"\n      >\n        Delete Schema\n      </PlBtnGhost>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use \"@milaboratories/uikit/styles/variables\" as *;\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tip {\n  color: var(--txt-03);\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.stepItem {\n  cursor: pointer;\n}\n\n.defaultValue {\n  margin-top: 8px;\n}\n.emptyDefaultValue {\n  opacity: 0.5;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAnnotations/components/AnnotationsSidebar.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationsSidebar.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport $commonStyle from \"./style.module.css\";\n\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n  PlTextField,\n} from \"@milaboratories/uikit\";\nimport type { Annotation } from \"../types\";\nimport { validateTitle } from \"../utils\";\nimport { isEmpty } from \"es-toolkit/compat\";\n\nconst props = defineProps<{\n  annotation: Annotation;\n  selectedStepId: undefined | number;\n  onUpdateAnnotation: (annotation: Annotation) => void;\n  onUpdateSelectedStepId: (id: undefined | number) => void;\n}>();\n\nconst emits = defineEmits<{\n  (e: \"delete-schema\"): void;\n}>();\n\nfunction produceAnnotationUpdate(updater: (draft: Annotation) => void) {\n  props.onUpdateAnnotation(produce(props.annotation, updater));\n}\n\nfunction updateTitle(title: string | undefined) {\n  produceAnnotationUpdate((draft) => {\n    draft.title = title ?? \"\";\n  });\n}\n\nfunction updateSteps(steps: Annotation[\"steps\"]) {\n  produceAnnotationUpdate((draft) => {\n    draft.steps = steps;\n  });\n}\n\nfunction updateDefaultValue(value: string) {\n  produceAnnotationUpdate((draft) => {\n    draft.defaultValue = value === \"\" ? undefined : value;\n  });\n}\n\nfunction handleAddStep() {\n  const id = randomInt();\n  produceAnnotationUpdate((draft) => {\n    draft.steps.push({\n      id,\n      label: \"\",\n      filter: {\n        id: randomInt(),\n        type: \"and\",\n        filters: [],\n      },\n    });\n  });\n  props.onUpdateSelectedStepId(id);\n}\n</script>\n\n<template>\n  <PlSidebarItem>\n    <template #header-content>\n      <PlEditableTitle\n        :model-value=\"props.annotation.title\"\n        :class=\"{ [$commonStyle.flashing]: props.annotation.title.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Title\"\n        :autofocus=\"props.annotation.title.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateTitle\"\n      />\n    </template>\n    <template v-if=\"props.annotation\" #body-content>\n      <div :class=\"[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]\">\n        <span :class=\"$style.tip\">\n          Above annotations override the ones below. Rearrange them by dragging.\n        </span>\n        <PlElementList\n          :items=\"props.annotation.steps\"\n          :get-item-key=\"(item) => item.id\"\n          :is-active=\"(item) => item.id === props.selectedStepId\"\n          :item-class=\"$style.stepItem\"\n          :class=\"$style.steps\"\n          @update:items=\"updateSteps\"\n          @item-click=\"(item) => props.onUpdateSelectedStepId(item.id)\"\n        >\n          <template #item-title=\"{ item }\">\n            {{ item.label }}\n          </template>\n        </PlElementList>\n\n        <PlBtnSecondary icon=\"add\" @click=\"handleAddStep\"> Add label </PlBtnSecondary>\n\n        <PlTextField\n          :class=\"[\n            $style.defaultValue,\n            { [$style.emptyDefaultValue]: isEmpty(props.annotation.defaultValue) },\n          ]\"\n          :model-value=\"props.annotation.defaultValue ?? ''\"\n          label=\"Label remaining with\"\n          placeholder=\"No label\"\n          clearable\n          helper=\"This label will be applied to the remaining rows, after all other filters are applied.\"\n          @click.stop\n          @update:model-value=\"updateDefaultValue\"\n        />\n      </div>\n    </template>\n    <template #footer-content>\n      <PlBtnGhost\n        icon=\"delete-bin\"\n        reverse\n        :disabled=\"props.annotation.steps.length === 0\"\n        @click.stop=\"emits('delete-schema')\"\n      >\n        Delete Schema\n      </PlBtnGhost>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use \"@milaboratories/uikit/styles/variables\" as *;\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tip {\n  color: var(--txt-03);\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.stepItem {\n  cursor: pointer;\n}\n\n.defaultValue {\n  margin-top: 8px;\n}\n.emptyDefaultValue {\n  opacity: 0.5;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"AnnotationsSidebar.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport $commonStyle from \"./style.module.css\";\n\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n  PlTextField,\n} from \"@milaboratories/uikit\";\nimport type { Annotation } from \"../types\";\nimport { validateTitle } from \"../utils\";\nimport { isEmpty } from \"es-toolkit/compat\";\n\nconst props = defineProps<{\n  annotation: Annotation;\n  selectedStepId: undefined | number;\n  onUpdateAnnotation: (annotation: Annotation) => void;\n  onUpdateSelectedStepId: (id: undefined | number) => void;\n}>();\n\nconst emits = defineEmits<{\n  (e: \"delete-schema\"): void;\n}>();\n\nfunction produceAnnotationUpdate(updater: (draft: Annotation) => void) {\n  props.onUpdateAnnotation(produce(props.annotation, updater));\n}\n\nfunction updateTitle(title: string | undefined) {\n  produceAnnotationUpdate((draft) => {\n    draft.title = title ?? \"\";\n  });\n}\n\nfunction updateSteps(steps: Annotation[\"steps\"]) {\n  produceAnnotationUpdate((draft) => {\n    draft.steps = steps;\n  });\n}\n\nfunction updateDefaultValue(value: string) {\n  produceAnnotationUpdate((draft) => {\n    draft.defaultValue = value === \"\" ? undefined : value;\n  });\n}\n\nfunction handleAddStep() {\n  const id = randomInt();\n  produceAnnotationUpdate((draft) => {\n    draft.steps.push({\n      id,\n      label: \"\",\n      filter: {\n        id: randomInt(),\n        type: \"and\",\n        filters: [],\n      },\n    });\n  });\n  props.onUpdateSelectedStepId(id);\n}\n</script>\n\n<template>\n  <PlSidebarItem data-testid=\"pl-annotations-schema\">\n    <template #header-content>\n      <PlEditableTitle\n        data-testid=\"pl-annotations-schema-title\"\n        :model-value=\"props.annotation.title\"\n        :class=\"{ [$commonStyle.flashing]: props.annotation.title.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Title\"\n        :autofocus=\"props.annotation.title.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateTitle\"\n      />\n    </template>\n    <template v-if=\"props.annotation\" #body-content>\n      <div\n        data-testid=\"pl-annotations-schema-body\"\n        :class=\"[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]\"\n      >\n        <span data-testid=\"pl-annotations-schema-tip\" :class=\"$style.tip\">\n          Above annotations override the ones below. Rearrange them by dragging.\n        </span>\n        <PlElementList\n          data-testid=\"pl-annotations-steps\"\n          :items=\"props.annotation.steps\"\n          :get-item-key=\"(item) => item.id\"\n          :is-active=\"(item) => item.id === props.selectedStepId\"\n          :item-class=\"$style.stepItem\"\n          :class=\"$style.steps\"\n          @update:items=\"updateSteps\"\n          @item-click=\"(item) => props.onUpdateSelectedStepId(item.id)\"\n        >\n          <template #item-title=\"{ item }\">\n            {{ item.label }}\n          </template>\n        </PlElementList>\n\n        <PlBtnSecondary data-testid=\"pl-annotations-add-label\" icon=\"add\" @click=\"handleAddStep\">\n          Add label\n        </PlBtnSecondary>\n\n        <PlTextField\n          data-testid=\"pl-annotations-default-value\"\n          :class=\"[\n            $style.defaultValue,\n            { [$style.emptyDefaultValue]: isEmpty(props.annotation.defaultValue) },\n          ]\"\n          :model-value=\"props.annotation.defaultValue ?? ''\"\n          label=\"Label remaining with\"\n          placeholder=\"No label\"\n          clearable\n          helper=\"This label will be applied to the remaining rows, after all other filters are applied.\"\n          @click.stop\n          @update:model-value=\"updateDefaultValue\"\n        />\n      </div>\n    </template>\n    <template #footer-content>\n      <PlBtnGhost\n        data-testid=\"pl-annotations-delete-schema\"\n        icon=\"delete-bin\"\n        reverse\n        :disabled=\"props.annotation.steps.length === 0\"\n        @click.stop=\"emits('delete-schema')\"\n      >\n        Delete Schema\n      </PlBtnGhost>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use \"@milaboratories/uikit/styles/variables\" as *;\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tip {\n  color: var(--txt-03);\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.stepItem {\n  cursor: pointer;\n}\n\n.defaultValue {\n  margin-top: 8px;\n}\n.emptyDefaultValue {\n  opacity: 0.5;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAnnotations/components/AnnotationsSidebar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationsSidebar.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"names":[],"mappings":"AAoLA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,cAAc,EAAE,SAAS,GAAG,MAAM,CAAC;IACnC,kBAAkB,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,sBAAsB,EAAE,CAAC,EAAE,EAAE,SAAS,GAAG,MAAM,KAAK,IAAI,CAAC;CAC1D,CAAC;AAuSF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"AnnotationsSidebar.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"names":[],"mappings":"AA6LA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,cAAc,EAAE,SAAS,GAAG,MAAM,CAAC;IACnC,kBAAkB,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,sBAAsB,EAAE,CAAC,EAAE,EAAE,SAAS,GAAG,MAAM,KAAK,IAAI,CAAC;CAC1D,CAAC;AAqTF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlAnnotations/components/AnnotationsSidebar.vue2.js

@@ -50,8 +50,9 @@ var C = /* @__PURE__ */ l({
 				});
 			}), w.onUpdateSelectedStepId(t);
 		}
-		return (e, r) => (d(), i(p(b), null, o({
+		return (e, r) => (d(), i(p(b), { "data-testid": "pl-annotations-schema" }, o({
 			"header-content": m(() => [c(p(v), {
+				"data-testid": "pl-annotations-schema-title",
 				"model-value": w.annotation.title,
 				class: u({ [p(t).flashing]: w.annotation.title.length === 0 }),
 				"max-length": 40,
@@ -67,6 +68,7 @@ var C = /* @__PURE__ */ l({
 				"validate"
 			])]),
 			"footer-content": m(() => [c(p(g), {
+				"data-testid": "pl-annotations-delete-schema",
 				icon: "delete-bin",
 				reverse: "",
 				disabled: w.annotation.steps.length === 0,
@@ -78,9 +80,16 @@ var C = /* @__PURE__ */ l({
 			_: 2
 		}, [w.annotation ? {
 			name: "body-content",
-			fn: m(() => [a("div", { class: u([e.$style.root, { [p(t).disabled]: w.annotation.title.length === 0 }]) }, [
-				a("span", { class: u(e.$style.tip) }, " Above annotations override the ones below. Rearrange them by dragging. ", 2),
+			fn: m(() => [a("div", {
+				"data-testid": "pl-annotations-schema-body",
+				class: u([e.$style.root, { [p(t).disabled]: w.annotation.title.length === 0 }])
+			}, [
+				a("span", {
+					"data-testid": "pl-annotations-schema-tip",
+					class: u(e.$style.tip)
+				}, " Above annotations override the ones below. Rearrange them by dragging. ", 2),
 				c(p(y), {
+					"data-testid": "pl-annotations-steps",
 					items: w.annotation.steps,
 					"get-item-key": (e) => e.id,
 					"is-active": (e) => e.id === w.selectedStepId,
@@ -99,6 +108,7 @@ var C = /* @__PURE__ */ l({
 					"class"
 				]),
 				c(p(_), {
+					"data-testid": "pl-annotations-add-label",
 					icon: "add",
 					onClick: A
 				}, {
@@ -106,6 +116,7 @@ var C = /* @__PURE__ */ l({
 					_: 1
 				}),
 				c(p(x), {
+					"data-testid": "pl-annotations-default-value",
 					class: u([e.$style.defaultValue, { [e.$style.emptyDefaultValue]: p(S)(w.annotation.defaultValue) }]),
 					"model-value": w.annotation.defaultValue ?? "",
 					label: "Label remaining with",

package/dist/components/PlAnnotations/components/AnnotationsSidebar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationsSidebar.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport $commonStyle from \"./style.module.css\";\n\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n  PlTextField,\n} from \"@milaboratories/uikit\";\nimport type { Annotation } from \"../types\";\nimport { validateTitle } from \"../utils\";\nimport { isEmpty } from \"es-toolkit/compat\";\n\nconst props = defineProps<{\n  annotation: Annotation;\n  selectedStepId: undefined | number;\n  onUpdateAnnotation: (annotation: Annotation) => void;\n  onUpdateSelectedStepId: (id: undefined | number) => void;\n}>();\n\nconst emits = defineEmits<{\n  (e: \"delete-schema\"): void;\n}>();\n\nfunction produceAnnotationUpdate(updater: (draft: Annotation) => void) {\n  props.onUpdateAnnotation(produce(props.annotation, updater));\n}\n\nfunction updateTitle(title: string | undefined) {\n  produceAnnotationUpdate((draft) => {\n    draft.title = title ?? \"\";\n  });\n}\n\nfunction updateSteps(steps: Annotation[\"steps\"]) {\n  produceAnnotationUpdate((draft) => {\n    draft.steps = steps;\n  });\n}\n\nfunction updateDefaultValue(value: string) {\n  produceAnnotationUpdate((draft) => {\n    draft.defaultValue = value === \"\" ? undefined : value;\n  });\n}\n\nfunction handleAddStep() {\n  const id = randomInt();\n  produceAnnotationUpdate((draft) => {\n    draft.steps.push({\n      id,\n      label: \"\",\n      filter: {\n        id: randomInt(),\n        type: \"and\",\n        filters: [],\n      },\n    });\n  });\n  props.onUpdateSelectedStepId(id);\n}\n</script>\n\n<template>\n  <PlSidebarItem>\n    <template #header-content>\n      <PlEditableTitle\n        :model-value=\"props.annotation.title\"\n        :class=\"{ [$commonStyle.flashing]: props.annotation.title.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Title\"\n        :autofocus=\"props.annotation.title.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateTitle\"\n      />\n    </template>\n    <template v-if=\"props.annotation\" #body-content>\n      <div :class=\"[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]\">\n        <span :class=\"$style.tip\">\n          Above annotations override the ones below. Rearrange them by dragging.\n        </span>\n        <PlElementList\n          :items=\"props.annotation.steps\"\n          :get-item-key=\"(item) => item.id\"\n          :is-active=\"(item) => item.id === props.selectedStepId\"\n          :item-class=\"$style.stepItem\"\n          :class=\"$style.steps\"\n          @update:items=\"updateSteps\"\n          @item-click=\"(item) => props.onUpdateSelectedStepId(item.id)\"\n        >\n          <template #item-title=\"{ item }\">\n            {{ item.label }}\n          </template>\n        </PlElementList>\n\n        <PlBtnSecondary icon=\"add\" @click=\"handleAddStep\"> Add label </PlBtnSecondary>\n\n        <PlTextField\n          :class=\"[\n            $style.defaultValue,\n            { [$style.emptyDefaultValue]: isEmpty(props.annotation.defaultValue) },\n          ]\"\n          :model-value=\"props.annotation.defaultValue ?? ''\"\n          label=\"Label remaining with\"\n          placeholder=\"No label\"\n          clearable\n          helper=\"This label will be applied to the remaining rows, after all other filters are applied.\"\n          @click.stop\n          @update:model-value=\"updateDefaultValue\"\n        />\n      </div>\n    </template>\n    <template #footer-content>\n      <PlBtnGhost\n        icon=\"delete-bin\"\n        reverse\n        :disabled=\"props.annotation.steps.length === 0\"\n        @click.stop=\"emits('delete-schema')\"\n      >\n        Delete Schema\n      </PlBtnGhost>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use \"@milaboratories/uikit/styles/variables\" as *;\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tip {\n  color: var(--txt-03);\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.stepItem {\n  cursor: pointer;\n}\n\n.defaultValue {\n  margin-top: 8px;\n}\n.emptyDefaultValue {\n  opacity: 0.5;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAOR,IAAQ;EAId,SAAS,EAAwB,GAAsC;AACrE,KAAM,mBAAmB,EAAQ,EAAM,YAAY,EAAQ,CAAC;;EAG9D,SAAS,EAAY,GAA2B;AAC9C,MAAyB,MAAU;AACjC,MAAM,QAAQ,KAAS;KACvB;;EAGJ,SAAS,EAAY,GAA4B;AAC/C,MAAyB,MAAU;AACjC,MAAM,QAAQ;KACd;;EAGJ,SAAS,EAAmB,GAAe;AACzC,MAAyB,MAAU;AACjC,MAAM,eAAe,MAAU,KAAK,KAAA,IAAY;KAChD;;EAGJ,SAAS,IAAgB;GACvB,IAAM,IAAK,GAAW;AAYtB,GAXA,GAAyB,MAAU;AACjC,MAAM,MAAM,KAAK;KACf;KACA,OAAO;KACP,QAAQ;MACN,IAAI,GAAW;MACf,MAAM;MACN,SAAS,EAAE;MACZ;KACF,CAAC;KACF,EACF,EAAM,uBAAuB,EAAG;;yBAKhC,EA2DgB,EAAA,EAAA,EAAA,MAAA,EAAA;GA1DH,kBAAc,QAUrB,CATF,EASE,EAAA,EAAA,EAAA;IARC,eAAa,EAAM,WAAW;IAC9B,OAAK,EAAA,GAAK,EAAA,EAAY,CAAC,WAAW,EAAM,WAAW,MAAM,WAAM,GAAA,CAAA;IAC/D,cAAY;IACb,aAAU;IACV,aAAY;IACX,WAAW,EAAM,WAAW,MAAM,WAAM;IACxC,UAAU,EAAA,EAAa;IACvB,uBAAoB;;;;;;;GAuCd,kBAAc,QAQV,CAPb,EAOa,EAAA,EAAA,EAAA;IANX,MAAK;IACL,SAAA;IACC,UAAU,EAAM,WAAW,MAAM,WAAM;IACvC,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAK,gBAAA,EAAA,CAAA,OAAA,CAAA;;qBAGpB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFC,mBAED,GAAA,CAAA,CAAA,CAAA;;;;MA5Cc,EAAM,aAAA;SAAa;eAkC3B,CAjCN,EAiCM,OAAA,EAjCA,OAAK,EAAA,CAAGA,EAAAA,OAAO,MAAI,GAAK,EAAA,EAAY,CAAC,WAAW,EAAM,WAAW,MAAM,WAAM,GAAA,CAAA,CAAA,EAAA,EAAA;IACjF,EAEO,QAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,IAAG,EAAA,EAAE,4EAE1B,EAAA;IACA,EAYgB,EAAA,EAAA,EAAA;KAXb,OAAO,EAAM,WAAW;KACxB,iBAAe,MAAS,EAAK;KAC7B,cAAY,MAAS,EAAK,OAAO,EAAM;KACvC,cAAYA,EAAAA,OAAO;KACnB,OAAK,EAAEA,EAAAA,OAAO,MAAK;KACnB,kBAAc;KACd,aAAU,AAAA,EAAA,QAAG,MAAS,EAAM,uBAAuB,EAAK,GAAE;;KAEhD,cAAU,GACH,EADO,cAAI,CAAA,EAAA,EACxB,EAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;;IAIjB,EAA8E,EAAA,EAAA,EAAA;KAA9D,MAAK;KAAO,SAAO;;sBAA0B,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAX,eAAW,GAAA,CAAA,CAAA,CAAA;;;IAE7D,EAYE,EAAA,EAAA,EAAA;KAXC,OAAK,EAAA,CAAgBA,EAAAA,OAAO,cAAA,GAA6BA,EAAAA,OAAO,oBAAoB,EAAA,EAAO,CAAC,EAAM,WAAW,aAAY,EAAA,CAAA,CAAA;KAIzH,eAAa,EAAM,WAAW,gBAAY;KAC3C,OAAM;KACN,aAAY;KACZ,WAAA;KACA,QAAO;KACN,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;KACV,uBAAoB"}
+{"version":3,"file":"AnnotationsSidebar.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../../src/components/PlAnnotations/components/AnnotationsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport $commonStyle from \"./style.module.css\";\n\nimport { produce } from \"immer\";\nimport { randomInt } from \"@milaboratories/helpers\";\nimport {\n  PlBtnGhost,\n  PlBtnSecondary,\n  PlEditableTitle,\n  PlElementList,\n  PlSidebarItem,\n  PlTextField,\n} from \"@milaboratories/uikit\";\nimport type { Annotation } from \"../types\";\nimport { validateTitle } from \"../utils\";\nimport { isEmpty } from \"es-toolkit/compat\";\n\nconst props = defineProps<{\n  annotation: Annotation;\n  selectedStepId: undefined | number;\n  onUpdateAnnotation: (annotation: Annotation) => void;\n  onUpdateSelectedStepId: (id: undefined | number) => void;\n}>();\n\nconst emits = defineEmits<{\n  (e: \"delete-schema\"): void;\n}>();\n\nfunction produceAnnotationUpdate(updater: (draft: Annotation) => void) {\n  props.onUpdateAnnotation(produce(props.annotation, updater));\n}\n\nfunction updateTitle(title: string | undefined) {\n  produceAnnotationUpdate((draft) => {\n    draft.title = title ?? \"\";\n  });\n}\n\nfunction updateSteps(steps: Annotation[\"steps\"]) {\n  produceAnnotationUpdate((draft) => {\n    draft.steps = steps;\n  });\n}\n\nfunction updateDefaultValue(value: string) {\n  produceAnnotationUpdate((draft) => {\n    draft.defaultValue = value === \"\" ? undefined : value;\n  });\n}\n\nfunction handleAddStep() {\n  const id = randomInt();\n  produceAnnotationUpdate((draft) => {\n    draft.steps.push({\n      id,\n      label: \"\",\n      filter: {\n        id: randomInt(),\n        type: \"and\",\n        filters: [],\n      },\n    });\n  });\n  props.onUpdateSelectedStepId(id);\n}\n</script>\n\n<template>\n  <PlSidebarItem data-testid=\"pl-annotations-schema\">\n    <template #header-content>\n      <PlEditableTitle\n        data-testid=\"pl-annotations-schema-title\"\n        :model-value=\"props.annotation.title\"\n        :class=\"{ [$commonStyle.flashing]: props.annotation.title.length === 0 }\"\n        :max-length=\"40\"\n        max-width=\"600px\"\n        placeholder=\"Annotation Title\"\n        :autofocus=\"props.annotation.title.length === 0\"\n        :validate=\"validateTitle\"\n        @update:model-value=\"updateTitle\"\n      />\n    </template>\n    <template v-if=\"props.annotation\" #body-content>\n      <div\n        data-testid=\"pl-annotations-schema-body\"\n        :class=\"[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]\"\n      >\n        <span data-testid=\"pl-annotations-schema-tip\" :class=\"$style.tip\">\n          Above annotations override the ones below. Rearrange them by dragging.\n        </span>\n        <PlElementList\n          data-testid=\"pl-annotations-steps\"\n          :items=\"props.annotation.steps\"\n          :get-item-key=\"(item) => item.id\"\n          :is-active=\"(item) => item.id === props.selectedStepId\"\n          :item-class=\"$style.stepItem\"\n          :class=\"$style.steps\"\n          @update:items=\"updateSteps\"\n          @item-click=\"(item) => props.onUpdateSelectedStepId(item.id)\"\n        >\n          <template #item-title=\"{ item }\">\n            {{ item.label }}\n          </template>\n        </PlElementList>\n\n        <PlBtnSecondary data-testid=\"pl-annotations-add-label\" icon=\"add\" @click=\"handleAddStep\">\n          Add label\n        </PlBtnSecondary>\n\n        <PlTextField\n          data-testid=\"pl-annotations-default-value\"\n          :class=\"[\n            $style.defaultValue,\n            { [$style.emptyDefaultValue]: isEmpty(props.annotation.defaultValue) },\n          ]\"\n          :model-value=\"props.annotation.defaultValue ?? ''\"\n          label=\"Label remaining with\"\n          placeholder=\"No label\"\n          clearable\n          helper=\"This label will be applied to the remaining rows, after all other filters are applied.\"\n          @click.stop\n          @update:model-value=\"updateDefaultValue\"\n        />\n      </div>\n    </template>\n    <template #footer-content>\n      <PlBtnGhost\n        data-testid=\"pl-annotations-delete-schema\"\n        icon=\"delete-bin\"\n        reverse\n        :disabled=\"props.annotation.steps.length === 0\"\n        @click.stop=\"emits('delete-schema')\"\n      >\n        Delete Schema\n      </PlBtnGhost>\n    </template>\n  </PlSidebarItem>\n</template>\n\n<style lang=\"scss\" module>\n@use \"@milaboratories/uikit/styles/variables\" as *;\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.tip {\n  color: var(--txt-03);\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.stepItem {\n  cursor: pointer;\n}\n\n.defaultValue {\n  margin-top: 8px;\n}\n.emptyDefaultValue {\n  opacity: 0.5;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAOR,IAAQ;EAId,SAAS,EAAwB,GAAsC;AACrE,KAAM,mBAAmB,EAAQ,EAAM,YAAY,EAAQ,CAAC;;EAG9D,SAAS,EAAY,GAA2B;AAC9C,MAAyB,MAAU;AACjC,MAAM,QAAQ,KAAS;KACvB;;EAGJ,SAAS,EAAY,GAA4B;AAC/C,MAAyB,MAAU;AACjC,MAAM,QAAQ;KACd;;EAGJ,SAAS,EAAmB,GAAe;AACzC,MAAyB,MAAU;AACjC,MAAM,eAAe,MAAU,KAAK,KAAA,IAAY;KAChD;;EAGJ,SAAS,IAAgB;GACvB,IAAM,IAAK,GAAW;AAYtB,GAXA,GAAyB,MAAU;AACjC,MAAM,MAAM,KAAK;KACf;KACA,OAAO;KACP,QAAQ;MACN,IAAI,GAAW;MACf,MAAM;MACN,SAAS,EAAE;MACZ;KACF,CAAC;KACF,EACF,EAAM,uBAAuB,EAAG;;yBAKhC,EAoEgB,EAAA,EAAA,EAAA,EApED,eAAY,yBAAuB,EAAA,EAAA;GACrC,kBAAc,QAWrB,CAVF,EAUE,EAAA,EAAA,EAAA;IATA,eAAY;IACX,eAAa,EAAM,WAAW;IAC9B,OAAK,EAAA,GAAK,EAAA,EAAY,CAAC,WAAW,EAAM,WAAW,MAAM,WAAM,GAAA,CAAA;IAC/D,cAAY;IACb,aAAU;IACV,aAAY;IACX,WAAW,EAAM,WAAW,MAAM,WAAM;IACxC,UAAU,EAAA,EAAa;IACvB,uBAAoB;;;;;;;GA8Cd,kBAAc,QASV,CARb,EAQa,EAAA,EAAA,EAAA;IAPX,eAAY;IACZ,MAAK;IACL,SAAA;IACC,UAAU,EAAM,WAAW,MAAM,WAAM;IACvC,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAK,gBAAA,EAAA,CAAA,OAAA,CAAA;;qBAGpB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFC,mBAED,GAAA,CAAA,CAAA,CAAA;;;;MApDc,EAAM,aAAA;SAAa;eAyC3B,CAxCN,EAwCM,OAAA;IAvCJ,eAAY;IACX,OAAK,EAAA,CAAGA,EAAAA,OAAO,MAAI,GAAK,EAAA,EAAY,CAAC,WAAW,EAAM,WAAW,MAAM,WAAM,GAAA,CAAA,CAAA;;IAE9E,EAEO,QAAA;KAFD,eAAY;KAA6B,OAAK,EAAEA,EAAAA,OAAO,IAAG;OAAE,4EAElE,EAAA;IACA,EAagB,EAAA,EAAA,EAAA;KAZd,eAAY;KACX,OAAO,EAAM,WAAW;KACxB,iBAAe,MAAS,EAAK;KAC7B,cAAY,MAAS,EAAK,OAAO,EAAM;KACvC,cAAYA,EAAAA,OAAO;KACnB,OAAK,EAAEA,EAAAA,OAAO,MAAK;KACnB,kBAAc;KACd,aAAU,AAAA,EAAA,QAAG,MAAS,EAAM,uBAAuB,EAAK,GAAE;;KAEhD,cAAU,GACH,EADO,cAAI,CAAA,EAAA,EACxB,EAAK,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;;IAIjB,EAEiB,EAAA,EAAA,EAAA;KAFD,eAAY;KAA2B,MAAK;KAAO,SAAO;;sBAE1E,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFyF,eAEzF,GAAA,CAAA,CAAA,CAAA;;;IAEA,EAaE,EAAA,EAAA,EAAA;KAZA,eAAY;KACX,OAAK,EAAA,CAAgBA,EAAAA,OAAO,cAAA,GAA6BA,EAAAA,OAAO,oBAAoB,EAAA,EAAO,CAAC,EAAM,WAAW,aAAY,EAAA,CAAA,CAAA;KAIzH,eAAa,EAAM,WAAW,gBAAY;KAC3C,OAAM;KACN,aAAY;KACZ,WAAA;KACA,QAAO;KACN,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;KACV,uBAAoB"}