@ironsource/shared-ui 2.1.7-test.4 → 2.1.7-test.6

package/DataGrid.vue_vue_type_style_index_0_scoped_5273976b_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-5273976b]{position:sticky}.table-container[data-v-5273976b]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-5273976b]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-5273976b]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-5273976b]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-5273976b]{width:13.75rem}.table-header.isStickyHeader[data-v-5273976b]{z-index:calc(var(--2d374a62) + 3);top:0}.table-head-container[data-v-5273976b]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-5273976b]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-5273976b]{display:inline-table}.table-header-actions[data-v-5273976b]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-5273976b]{position:relative}.table-row.loading[data-v-5273976b]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-5273976b]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-5273976b]{border-bottom:none}.expanded-row[data-v-5273976b]{grid-column:var(--7d502b56);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-5273976b]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md);border-collapse:collapse;border-spacing:0}table.hasFooter[data-v-5273976b]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-5273976b],table th[data-v-5273976b]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-5273976b]:first-of-type,table th[data-v-5273976b]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-5273976b]:last-of-type,table th[data-v-5273976b]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-5273976b],table th.expand-toggle-cell[data-v-5273976b]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-5273976b]{border-bottom:none;z-index:calc(var(--2d374a62) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-5273976b]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--31bec0cf)}table>thead>tr>th[data-v-5273976b]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-5273976b]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-5273976b]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-5273976b]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-5273976b]{cursor:pointer}table>thead.sticky[data-v-5273976b]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-5273976b]{z-index:calc(var(--2d374a62) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-5273976b]{display:block}table>tbody>*>tr[data-v-5273976b]{background-color:var(--background-default);min-height:var(--93d8ccd2);height:auto;display:grid;align-items:center;grid-template-columns:var(--31bec0cf)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-5273976b]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-5273976b],table>tbody>*>tr.activeMenu>td[data-v-5273976b]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-5273976b]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--93d8ccd2);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-5273976b]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-5273976b]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-5273976b]{justify-content:flex-end;text-align:right}.section-container[data-v-5273976b]{left:0}.sections[data-v-5273976b]{display:flex}.section[data-v-5273976b]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-5273976b]{width:100%}.empty-state[data-v-5273976b]{min-height:250px}

package/DataGridRowsCounter.vue_vue_type_style_index_0_scoped_ef699ec5_lang.css

@@ -0,0 +1 @@
+.data-grid-rows-counter[data-v-ef699ec5]{color:var(--text-secondary)}.text-strong[data-v-ef699ec5]{color:var(--text-primary)}

package/EditableV4.vue_vue_type_style_index_0_scoped_e0c047b4_lang.css

@@ -0,0 +1 @@
+.editable[data-v-e0c047b4]{position:relative;left:calc(var(--spacing-100) * -1);display:flex;align-items:center}.editable-wrapper[data-v-e0c047b4]{display:flex;flex:1 1 auto}.editable-wrapper[data-v-e0c047b4]:hover{cursor:text;background:var(--default-main)}.editable-content[data-v-e0c047b4]{padding:0 var(--spacing-100);height:28px;display:flex;align-items:center;justify-content:space-between;width:100%;border-radius:var(--border-radius-md)}.caret-icon[data-v-e0c047b4]{display:none;color:var(--action-active)}.table-row:hover .editable-wrapper[data-v-e0c047b4]{cursor:text;width:100%}.table-row:hover .editable-content[data-v-e0c047b4]{outline:1px solid var(--action-outlined-border);outline-offset:-1px}.table-row:hover .caret-icon[data-v-e0c047b4]{display:flex}

package/MultipleDataGrid.vue_vue_type_style_index_0_scoped_82ba0e12_lang.css

@@ -0,0 +1 @@
+.multi-table-container[data-v-82ba0e12]{border-radius:var(--border-radius-md);border:1px solid var(--common-divider);display:flex;flex-direction:column;overflow-y:auto;width:100%}.multi-table-container .table-header-container[data-v-82ba0e12]{align-items:center;background-color:var(--background-paper-elevation-0);display:flex;height:calc(var(--spacing-800) - 2px);justify-content:space-between;padding:var(--spacing-300);width:100%}.multi-table-container .table-header-container.sticky[data-v-82ba0e12]{position:sticky;top:0;z-index:calc(var(--5d3fa26e) + 3)}.multi-table-container[data-v-82ba0e12] table{display:table;border:unset;border-radius:unset}.multi-table-container[data-v-82ba0e12] thead{border-top:1px solid var(--common-divider)}.multi-table-container .tables-container[data-v-82ba0e12] thead.sticky{top:62px}.multi-table-container .empty-state[data-v-82ba0e12]{min-height:250px}.multi-table-container .table-header-right[data-v-82ba0e12]{align-items:center;display:flex;height:100%}.multi-table-container .table-header-right .table-header-actions[data-v-82ba0e12]{align-items:center;display:flex;margin-left:var(--spacing-100)}

package/SortableList.vue_vue_type_style_index_0_scoped_e9cd63b8_lang.css

@@ -0,0 +1 @@
+.list-search[data-v-e9cd63b8]{margin-bottom:var(--spacing-100)}.sortable-list[data-v-e9cd63b8],.locked-list[data-v-e9cd63b8]{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-75);color:var(--text-primary)}.locked-list[data-v-e9cd63b8]{margin-top:var(--spacing-75)}.force-grabbing-cursor *[data-v-e9cd63b8]{cursor:move!important;cursor:-webkit-grabbing!important;cursor:-moz-grabbing!important;cursor:grabbing!important}.empty-state-title[data-v-e9cd63b8]{color:var(--text-disabled);padding:0 8px;width:100%}.loader-bars[data-v-e9cd63b8]{display:flex;flex-direction:column;gap:6px}.loader-bars .loader-bar[data-v-e9cd63b8]{height:40px;width:100%}

package/TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css

@@ -0,0 +1 @@
+.tabs-list[data-v-f9433b11]{position:relative;padding:0;margin:0}.tabs-list--page[data-v-f9433b11]{border-bottom:1px solid var(--common-divider);box-sizing:border-box}.tabs-list--page .tab-item[data-v-f9433b11]{padding:0;margin-right:var(--spacing-200);min-height:calc(var(--spacing-600) - 1px)}.tabs-list--page .tabs-border-line[data-v-f9433b11]{margin-top:-1px}.tabs-border-line[data-v-f9433b11]{left:var(--167b065e);width:var(--8cfadb62);border-bottom:2px solid var(--primary-main);transition:left .2s ease-in-out,width .2s;position:absolute;margin-top:-2px}.tab-item[data-v-f9433b11]{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;color:var(--action-active);gap:var(--spacing-100);vertical-align:middle;padding:0 var(--spacing-300);min-height:var(--spacing-600)}.tab-item[data-v-f9433b11]:hover{cursor:pointer;color:var(--text-primary)}.tab-item--active[data-v-f9433b11]{color:var(--text-primary)}.tab-item--disabled[data-v-f9433b11]{color:var(--action-disabled);cursor:not-allowed;pointer-events:none}

package/TextField.vue_vue_type_style_index_0_scoped_4d9bf5b2_lang.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-4d9bf5b2],.font-chart-2[data-v-4d9bf5b2],.font-chart-1[data-v-4d9bf5b2]{font-family:Inter,sans-serif;font-weight:700}.font-chip-label[data-v-4d9bf5b2],.font-table-label[data-v-4d9bf5b2],.font-button[data-v-4d9bf5b2],.font-heading-6[data-v-4d9bf5b2],.font-heading-5[data-v-4d9bf5b2],.font-heading-4[data-v-4d9bf5b2],.font-heading-3[data-v-4d9bf5b2],.font-heading-2[data-v-4d9bf5b2],.font-heading-1[data-v-4d9bf5b2],.font-title[data-v-4d9bf5b2]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-4d9bf5b2],.font-input-label[data-v-4d9bf5b2],.font-overline[data-v-4d9bf5b2],.font-subtitle-2[data-v-4d9bf5b2],.font-subtitle-1[data-v-4d9bf5b2]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-4d9bf5b2],.font-body-2[data-v-4d9bf5b2],.input-container .input[data-v-4d9bf5b2],.font-body-1[data-v-4d9bf5b2]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-4d9bf5b2]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-4d9bf5b2]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-4d9bf5b2]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-4d9bf5b2]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-4d9bf5b2]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-4d9bf5b2]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-4d9bf5b2]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.input-container .input[data-v-4d9bf5b2],.font-body-1[data-v-4d9bf5b2]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-4d9bf5b2]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-4d9bf5b2]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-4d9bf5b2]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-4d9bf5b2]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-4d9bf5b2]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-4d9bf5b2]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-4d9bf5b2]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-4d9bf5b2]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-4d9bf5b2]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-4d9bf5b2]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-4d9bf5b2],.font-tab-label2[data-v-4d9bf5b2]{font-size:.875rem;line-height:1rem}.font-chip-label[data-v-4d9bf5b2]{font-size:.75rem;line-height:1rem}h1[data-v-4d9bf5b2],h2[data-v-4d9bf5b2],h3[data-v-4d9bf5b2],h4[data-v-4d9bf5b2],h5[data-v-4d9bf5b2],h6[data-v-4d9bf5b2]{margin:0}.disabled .input[data-v-4d9bf5b2]::placeholder{color:var(--text-disabled)}.disabled .input-container[data-v-4d9bf5b2]{cursor:no-drop;background-color:var(--action-disabled-background)}.disabled .input-container[data-v-4d9bf5b2]:hover{outline:1px solid var(--action-outlined-border);background-color:var(--action-disabled-background)}.input-size-small[data-v-4d9bf5b2]{height:28px}.input-size-medium[data-v-4d9bf5b2]{height:32px}.input-size-large[data-v-4d9bf5b2]{height:40px}.input-with-label-container[data-v-4d9bf5b2]{display:flex;flex-direction:column}.input-container[data-v-4d9bf5b2]{flex-grow:2;display:flex;flex-direction:row;align-items:center;border-radius:var(--border-radius-md);background:var(--default-main);outline:1px solid var(--action-outlined-border);outline-offset:-1px;padding:0 var(--spacing-100);position:relative;gap:var(--spacing-50)}.input-container[data-v-4d9bf5b2]:hover{outline:1px solid var(--action-active);background-color:var(--action-hover)}.input-container .input[data-v-4d9bf5b2]{padding:0;width:100%;border:none;background:transparent;color:var(--text-primary);line-height:normal}.input-container .input[data-v-4d9bf5b2]:focus{outline:none}.input-container .input[data-v-4d9bf5b2]:disabled{color:var(--text-disabled);cursor:no-drop}.input-container .input.view-only[data-v-4d9bf5b2]{color:var(--text-disabled)}.input-container .input[type=number][data-v-4d9bf5b2]::-webkit-inner-spin-button{opacity:.7;transform:scale(1.1)}.input-container .hide-arrows.input[type=number][data-v-4d9bf5b2]::-webkit-inner-spin-button,.input-container .hide-arrows.input[type=number][data-v-4d9bf5b2]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.input-container .input[type=password][data-v-4d9bf5b2]{letter-spacing:4px}.input-container[data-v-4d9bf5b2] ::placeholder{color:var(--text-secondary);letter-spacing:normal}.input-container .label-inside[data-v-4d9bf5b2]::placeholder{color:var(--text-primary)}.input-container .icon-container[data-v-4d9bf5b2]{display:flex;align-items:center;color:var(--text-secondary)}.input-container .icon-before[data-v-4d9bf5b2]{padding-right:var(--spacing-50)}.input-container .icon-after[data-v-4d9bf5b2]{padding-left:var(--spacing-50)}.prefix-text[data-v-4d9bf5b2]{color:var(--text-secondary, #646464);margin-right:var(--spacing-50)}.suffix-text[data-v-4d9bf5b2]{color:var(--text-secondary, #646464)}.focused[data-v-4d9bf5b2],.focused[data-v-4d9bf5b2]:hover{outline:2px solid var(--primary-main);background-color:var(--action-hover)}.error-icon.error-icon[data-v-4d9bf5b2],.error-icon.error-icon[data-v-4d9bf5b2]:hover{color:var(--error-main)}.label-direction-left[data-v-4d9bf5b2]{flex-direction:row;align-items:center;justify-content:space-between}.apply-button[data-v-4d9bf5b2]{cursor:pointer;color:var(--default-contrast-text);width:var(--spacing-250);height:var(--spacing-250)}.inline-error[data-v-4d9bf5b2]{cursor:pointer;color:var(--error-main);display:flex;justify-content:center;align-items:center}.footer[data-v-4d9bf5b2]{display:flex;justify-content:flex-end;margin-top:var(--spacing-50)}.footer.footer-absolute[data-v-4d9bf5b2]{position:absolute;bottom:calc(0px - var(--spacing-300))}.password-visibility-toggle[data-v-4d9bf5b2]{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.variant-success .input-container[data-v-4d9bf5b2],.variant-success .input-container[data-v-4d9bf5b2]:hover{outline:2px solid var(--success-dark)}.variant-error .input-container[data-v-4d9bf5b2],.variant-error .input-container[data-v-4d9bf5b2]:hover{outline:2px solid var(--error-main)}.variant-warning .input-container[data-v-4d9bf5b2],.variant-warning .input-container[data-v-4d9bf5b2]:hover{outline:2px solid var(--warning-dark)}

package/ThemeWrapper.vue_vue_type_style_index_0_scoped_66bd448a_lang.css

@@ -0,0 +1 @@
+.theme--wrapper-container[data-v-66bd448a]{width:100%}

package/components/ThemeWrapper/ThemeWrapper.vue.js

@@ -1,8 +1,8 @@
 import e from "./ThemeWrapper.vue2.js";
 /* empty css                   *//* empty css                   */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ThemeWrapper.vue_vue_type_style_index_0_scoped_b62ee695_lang.css"; //*');
+// import "../../ThemeWrapper.vue_vue_type_style_index_0_scoped_66bd448a_lang.css"; //*');
 // import "../../ThemeWrapper.vue_vue_type_style_index_1_lang.css";  //');
-const t = /* @__PURE__ */ o(e, [["__scopeId", "data-v-b62ee695"]]);
+const t = /* @__PURE__ */ o(e, [["__scopeId", "data-v-66bd448a"]]);
 export {
   t as default
 };

package/components/ThemeWrapper/ThemeWrapper.vue2.js

@@ -1,4 +1,4 @@
- import "../../ThemeWrapper.vue_vue_type_style_index_0_scoped_b62ee695_lang.css";  import "../../ThemeWrapper.vue_vue_type_style_index_1_lang.css";  import { defineComponent as a, computed as l, openBlock as m, createElementBlock as c, normalizeClass as p, unref as u, renderSlot as h } from "vue";
+ import "../../ThemeWrapper.vue_vue_type_style_index_0_scoped_66bd448a_lang.css";  import "../../ThemeWrapper.vue_vue_type_style_index_1_lang.css";  import { defineComponent as a, computed as m, openBlock as l, createElementBlock as p, normalizeClass as c, unref as u, renderSlot as h } from "vue";
 import { useThemeStore as i } from "./ThemeStrore.js";
 const v = /* @__PURE__ */ a({
   __name: "ThemeWrapper",
@@ -6,12 +6,12 @@ const v = /* @__PURE__ */ a({
     version: { default: "v4" }
   },
   setup(o) {
-    const s = o, r = l(() => {
+    const r = o, s = m(() => {
       const e = [], { theme: t } = i(), n = t.value === "light" ? "light-theme" : "dark-theme";
-      return e.push(n), e.push(s.version), e.join("-");
+      return e.push(n), e.push(r.version), e.join("-");
     });
-    return (e, t) => (m(), c("div", {
-      class: p(u(r))
+    return (e, t) => (l(), p("div", {
+      class: c(["theme--wrapper-container", u(s)])
     }, [
       h(e.$slots, "default", {}, void 0, !0)
     ], 2));

package/components/input/v4/TextField.vue.js

@@ -1,7 +1,7 @@
 import e from "./TextField.vue2.js";
 /* empty css                */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TextField.vue_vue_type_style_index_0_scoped_eb472aa3_lang.css"; //*');
-const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-eb472aa3"]]);
+// import "../../../TextField.vue_vue_type_style_index_0_scoped_4d9bf5b2_lang.css"; //*');
+const d = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4d9bf5b2"]]);
 export {
-  a as default
+  d as default
 };

package/components/input/v4/TextField.vue2.js

@@ -1,4 +1,4 @@
- import "../../../TextField.vue_vue_type_style_index_0_scoped_eb472aa3_lang.css"; import { defineComponent as J, computed as f, ref as Q, openBlock as l, createElementBlock as d, mergeProps as c, unref as t, createBlock as r, createCommentVNode as n, createElementVNode as A, normalizeClass as E, renderSlot as F, withCtx as b, createTextVNode as V, toDisplayString as $, withKeys as U, withModifiers as z, normalizeProps as O, createVNode as p } from "vue";
+ import "../../../TextField.vue_vue_type_style_index_0_scoped_4d9bf5b2_lang.css"; import { defineComponent as J, computed as f, ref as Q, openBlock as l, createElementBlock as d, mergeProps as c, unref as t, createBlock as r, createCommentVNode as n, createElementVNode as A, normalizeClass as E, renderSlot as F, withCtx as b, createTextVNode as V, toDisplayString as $, withKeys as U, withModifiers as z, normalizeProps as O, createVNode as p } from "vue";
 import v from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
 import X from "../../tooltip/v4/TooltipV4.vue.js";

package/components/sortableList/SortableList.vue.d.ts

@@ -9,6 +9,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showSearch?: boolean;
     searchPlaceholder?: string;
     searchHandler?: (item: SortableListItem, searchQuery: string) => boolean;
+    isLoading?: boolean;
+    loadingRowCount?: number;
+    emptyStateTitle?: string;
     testId?: string;
 }>, {
     items: () => any[];
@@ -20,8 +23,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showSearch: boolean;
     searchPlaceholder: string;
     searchHandler: any;
+    isLoading: boolean;
+    loadingRowCount: number;
+    emptyStateTitle: string;
     testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sortableItemDragged: (event: {
+        id: string;
+        newIndex: number;
+    }) => void;
     "update:items": (items: SortableListItem[]) => void;
     "update:openId": (id: string | number) => void;
     "update:selectedId": (id: string | number) => void;
@@ -38,6 +48,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showSearch?: boolean;
     searchPlaceholder?: string;
     searchHandler?: (item: SortableListItem, searchQuery: string) => boolean;
+    isLoading?: boolean;
+    loadingRowCount?: number;
+    emptyStateTitle?: string;
     testId?: string;
 }>, {
     items: () => any[];
@@ -49,8 +62,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showSearch: boolean;
     searchPlaceholder: string;
     searchHandler: any;
+    isLoading: boolean;
+    loadingRowCount: number;
+    emptyStateTitle: string;
     testId: string;
 }>>> & {
+    onSortableItemDragged?: (event: {
+        id: string;
+        newIndex: number;
+    }) => any;
     "onUpdate:items"?: (items: SortableListItem[]) => any;
     "onUpdate:openId"?: (id: string | number) => any;
     "onUpdate:selectedId"?: (id: string | number) => any;
@@ -60,6 +80,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     search: string;
     testId: string;
+    isLoading: boolean;
     displayValue: (item: SortableListItem) => string;
     searchPlaceholder: string;
     items: SortableListItem[];
@@ -68,10 +89,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     openId: string | number;
     selectedId: string | number;
     showSearch: boolean;
+    loadingRowCount: number;
+    emptyStateTitle: string;
 }>, {
     menu?(_: {
         item: SortableListItem;
     }): any;
+    loader?(_: {}): any;
+    "empty-state"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/sortableList/SortableList.vue.js

@@ -1,7 +1,7 @@
 import o from "./SortableList.vue2.js";
-/* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../SortableList.vue_vue_type_style_index_0_scoped_21842d59_lang.css"; //*');
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-21842d59"]]);
+/* empty css                   */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../SortableList.vue_vue_type_style_index_0_scoped_e9cd63b8_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e9cd63b8"]]);
 export {
-  p as default
+  c as default
 };

package/components/sortableList/SortableList.vue2.js

@@ -1,13 +1,21 @@
- import "../../SortableList.vue_vue_type_style_index_0_scoped_21842d59_lang.css"; import { defineComponent as $, computed as p, ref as F, openBlock as c, createElementBlock as m, mergeProps as v, unref as t, createBlock as y, isRef as E, createCommentVNode as P, createVNode as w, withCtx as C, Fragment as x, renderList as B, renderSlot as D, createElementVNode as G } from "vue";
-import { VueDraggable as U } from "vue-draggable-plus";
-import R from "./SortableItem.vue.js";
-import M from "../search/v4/SearchV4.vue.js";
-import { useVModel as K } from "@vueuse/core";
-import { matchString as q } from "../../utils/search.js";
-import { useTestIdAttrs as Q } from "../../utils/testIds.js";
-import { SortableListTestIdModifiers as f } from "../../testids/index.js";
-import { DRAG_CURSOR_CSS_CLASS as H } from "./consts.js";
-const le = /* @__PURE__ */ $({
+ import "../../SortableList.vue_vue_type_style_index_0_scoped_e9cd63b8_lang.css"; import { defineComponent as F, computed as f, ref as P, openBlock as s, createElementBlock as i, mergeProps as T, unref as l, createBlock as g, isRef as N, createCommentVNode as y, withCtx as m, Fragment as V, renderList as D, renderSlot as S, createElementVNode as G, createVNode as $, createTextVNode as U, toDisplayString as M } from "vue";
+import { VueDraggable as K } from "vue-draggable-plus";
+import w from "./SortableItem.vue.js";
+import Q from "../search/v4/SearchV4.vue.js";
+import j from "../typography/v4/Typography.vue.js";
+import z from "../skeleton/v4/SkeletonV4.vue.js";
+import { useVModel as J } from "@vueuse/core";
+import { matchString as x } from "../../utils/search.js";
+import { useTestIdAttrs as W } from "../../utils/testIds.js";
+import { SortableListTestIdModifiers as I } from "../../testids/index.js";
+import { DRAG_CURSOR_CSS_CLASS as q } from "./consts.js";
+const X = {
+  key: 1,
+  class: "sortable-list-container"
+}, Y = { class: "loader-bars" }, Z = {
+  key: 3,
+  class: "empty-state-title"
+}, ue = /* @__PURE__ */ F({
   __name: "SortableList",
   props: {
     items: { default: () => [] },
@@ -19,102 +27,134 @@ const le = /* @__PURE__ */ $({
     showSearch: { type: Boolean, default: !1 },
     searchPlaceholder: { default: "Search" },
     searchHandler: { type: Function, default: null },
+    isLoading: { type: Boolean, default: !1 },
+    loadingRowCount: { default: 3 },
+    emptyStateTitle: { default: "No results" },
     testId: { default: "" }
   },
-  emits: ["update:items", "update:openId", "update:selectedId", "update:selectedChildId", "update:search", "clearSearch"],
-  setup(d, { emit: s }) {
-    const r = d, o = K(r, "search", s), S = p(() => !!o.value?.trim()), L = p(() => S.value ? r.items.filter((l) => {
-      const a = l.children || [], e = o.value;
-      return r.searchHandler ? r.searchHandler(l, e) : q(l.displayText, e) || // match parent item
-      a.some((n) => q(n.displayText, e));
-    }) : r.items), u = p({
+  emits: ["sortableItemDragged", "update:items", "update:openId", "update:selectedId", "update:selectedChildId", "update:search", "clearSearch"],
+  setup(d, { emit: o }) {
+    const n = d, u = J(n, "search", o), v = f(() => !!u.value?.trim()), C = f(() => v.value ? n.items.filter((t) => {
+      const a = t.children || [], e = u.value;
+      return n.searchHandler ? n.searchHandler(t, e) : x(t.displayText, e) || // match parent item
+      a.some((r) => x(r.displayText, e));
+    }) : n.items), h = f({
       get() {
-        return L.value.filter((l) => !l.isLocked);
+        return C.value.filter((t) => !t.isLocked);
       },
-      set(l) {
-        s("update:items", [...l, ...V.value]);
+      set(t) {
+        o("update:items", [...t, ...b.value]);
       }
-    }), V = p(
-      () => L.value.filter((l) => l.isLocked)
-    ), I = F(!1), N = (l) => {
-      I.value = !0, setTimeout(() => l.target.classList.add(H), 50);
-    }, O = (l) => {
-      I.value = !1, l.target.classList.remove(H);
-    }, T = (l) => (S.value || l.id === r.openId) && !I.value, b = (l, a) => {
-      a ? s("update:openId", l.id) : s("update:openId", null);
-    }, i = (l) => l.id === r.selectedId, k = (l) => {
-      s("update:selectedId", l.id), s("update:selectedChildId", null);
-    }, A = (l, a) => {
-      s("update:selectedChildId", l.id), s("update:selectedId", a.id), s("update:openId", a.id);
-    }, g = Q(r.testId, f);
-    return (l, a) => (c(), m("div", v({ class: "sortable-list-container" }, t(g)[t(f).CONTAINER]), [
-      d.showSearch ? (c(), y(t(M), {
+    }), b = f(
+      () => C.value.filter((t) => t.isLocked)
+    ), k = P(!1), H = (t) => {
+      k.value = !0, setTimeout(() => t.target.classList.add(q), 50);
+    }, O = (t) => {
+      const { target: a, item: e, newIndex: r } = t;
+      k.value = !1, a.classList.remove(q);
+      const c = e.attributes["data-id"]?.value;
+      o("sortableItemDragged", { id: c, newIndex: r });
+    }, R = (t) => (v.value || t.id === n.openId) && !k.value, A = (t, a) => {
+      a ? o("update:openId", t.id) : o("update:openId", null);
+    }, p = (t) => t.id === n.selectedId, B = (t) => {
+      o("update:selectedId", t.id), o("update:selectedChildId", null);
+    }, E = (t, a) => {
+      o("update:selectedChildId", t.id), o("update:selectedId", a.id), o("update:openId", a.id);
+    }, L = W(n.testId, I);
+    return (t, a) => (s(), i("div", T({ class: "sortable-list-and-search-container" }, l(L)[l(I).CONTAINER]), [
+      d.showSearch ? (s(), g(l(Q), {
         key: 0,
-        modelValue: t(o),
-        "onUpdate:modelValue": a[0] || (a[0] = (e) => E(o) ? o.value = e : null),
+        modelValue: l(u),
+        "onUpdate:modelValue": a[0] || (a[0] = (e) => N(u) ? u.value = e : null),
         class: "list-search",
         placeholder: d.searchPlaceholder,
         "test-id": d.testId,
-        onOnClear: a[1] || (a[1] = (e) => s("clearSearch"))
-      }, null, 8, ["modelValue", "placeholder", "test-id"])) : P("", !0),
-      w(t(U), v({
-        modelValue: t(u),
-        "onUpdate:modelValue": a[2] || (a[2] = (e) => E(u) ? u.value = e : null),
-        class: "sortable-list",
-        filter: ".expand-icon",
-        animation: 150,
-        handle: ".draggable-handle",
-        disabled: t(S)
-      }, t(g)[t(f).DRAGGABLE_LIST], {
-        onStart: N,
-        onEnd: O
-      }), {
-        default: C(() => [
-          (c(!0), m(x, null, B(t(u), (e, n) => (c(), y(R, {
+        onOnClear: a[1] || (a[1] = (e) => o("clearSearch"))
+      }, null, 8, ["modelValue", "placeholder", "test-id"])) : y("", !0),
+      d.isLoading ? S(t.$slots, "loader", { key: 2 }, () => [
+        G("div", Y, [
+          (s(!0), i(V, null, D(d.loadingRowCount, (e) => (s(), i("div", { key: e }, [
+            $(l(z), {
+              round: "",
+              class: "loader-bar"
+            })
+          ]))), 128))
+        ])
+      ], !0) : (s(), i("div", X, [
+        l(h).length ? (s(), g(l(K), T({
+          key: 0,
+          modelValue: l(h),
+          "onUpdate:modelValue": a[2] || (a[2] = (e) => N(h) ? h.value = e : null),
+          class: "sortable-list",
+          filter: ".expand-icon",
+          animation: 150,
+          handle: ".draggable-handle",
+          disabled: l(v)
+        }, l(L)[l(I).DRAGGABLE_LIST], {
+          onStart: H,
+          onEnd: O
+        }), {
+          default: m(() => [
+            (s(!0), i(V, null, D(l(h), (e, r) => (s(), g(w, {
+              key: e.id,
+              "data-id": e.id,
+              item: e,
+              index: r,
+              "is-open": R(e),
+              "is-selected": p(e),
+              "selected-child-id": p(e) ? d.selectedChildId : null,
+              "display-value": d.displayValue,
+              "search-query": l(u),
+              "search-handler": d.searchHandler,
+              onToggle: (c) => A(e, c),
+              onSelect: (c) => B(e),
+              onSelectChild: (c) => E(c, e)
+            }, {
+              menu: m(() => [
+                S(t.$slots, "menu", { item: e }, void 0, !0)
+              ]),
+              _: 2
+            }, 1032, ["data-id", "item", "index", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "search-handler", "onToggle", "onSelect", "onSelectChild"]))), 128))
+          ]),
+          _: 3
+        }, 16, ["modelValue", "disabled"])) : y("", !0),
+        l(b).length ? (s(), i("div", T({
+          key: 1,
+          class: "locked-list"
+        }, l(L)[l(I).LOCKED_LIST]), [
+          (s(!0), i(V, null, D(l(b), (e) => (s(), g(w, {
             key: e.id,
             item: e,
-            index: n,
-            "is-open": T(e),
-            "is-selected": i(e),
-            "selected-child-id": i(e) ? d.selectedChildId : null,
+            "is-open": R(e),
+            "is-selected": p(e),
+            "selected-child-id": p(e) ? d.selectedChildId : null,
             "display-value": d.displayValue,
-            "search-query": t(o),
-            "search-handler": d.searchHandler,
-            onToggle: (h) => b(e, h),
-            onSelect: (h) => k(e),
-            onSelectChild: (h) => A(h, e)
+            "search-query": l(u),
+            "on-search": d.searchHandler,
+            onToggle: (r) => A(e, r),
+            onSelect: (r) => B(e),
+            onSelectChild: (r) => E(r, e)
           }, {
-            menu: C(() => [
-              D(l.$slots, "menu", { item: e }, void 0, !0)
+            menu: m(() => [
+              S(t.$slots, "menu", { item: e }, void 0, !0)
             ]),
             _: 2
-          }, 1032, ["item", "index", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "search-handler", "onToggle", "onSelect", "onSelectChild"]))), 128))
-        ]),
-        _: 3
-      }, 16, ["modelValue", "disabled"]),
-      G("div", v({ class: "locked-list" }, t(g)[t(f).LOCKED_LIST]), [
-        (c(!0), m(x, null, B(t(V), (e) => (c(), y(R, {
-          key: e.id,
-          item: e,
-          "is-open": T(e),
-          "is-selected": i(e),
-          "selected-child-id": i(e) ? d.selectedChildId : null,
-          "display-value": d.displayValue,
-          "search-query": t(o),
-          "on-search": d.searchHandler,
-          onToggle: (n) => b(e, n),
-          onSelect: (n) => k(e),
-          onSelectChild: (n) => A(n, e)
-        }, {
-          menu: C(() => [
-            D(l.$slots, "menu", { item: e }, void 0, !0)
-          ]),
-          _: 2
-        }, 1032, ["item", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "on-search", "onToggle", "onSelect", "onSelectChild"]))), 128))
-      ], 16)
+          }, 1032, ["item", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "on-search", "onToggle", "onSelect", "onSelectChild"]))), 128))
+        ], 16)) : y("", !0)
+      ])),
+      !l(C).length && !d.isLoading ? (s(), i("div", Z, [
+        S(t.$slots, "empty-state", {}, () => [
+          $(l(j), { variant: "body2" }, {
+            default: m(() => [
+              U(M(d.emptyStateTitle), 1)
+            ]),
+            _: 1
+          })
+        ], !0)
+      ])) : y("", !0)
     ], 16));
   }
 });
 export {
-  le as default
+  ue as default
 };