@ironsource/shared-ui 2.1.6-rc.27 → 2.1.6-rc.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/AppDropdownTrigger.vue_vue_type_style_index_0_scoped_092d0e03_lang.css +1 -0
  2. package/DataGrid.vue_vue_type_style_index_0_scoped_b5729ec6_lang.css +1 -0
  3. package/DropdownV4.vue_vue_type_style_index_0_scoped_2e7a89bc_lang.css +1 -0
  4. package/HelpIcon.vue_vue_type_style_index_0_scoped_06fce2e3_lang.css +1 -0
  5. package/OptionV4.vue_vue_type_style_index_0_scoped_89b98201_lang.css +1 -0
  6. package/components/dropdown/v4/AppDropdownTrigger.vue.d.ts +11 -0
  7. package/components/dropdown/v4/AppDropdownTrigger.vue.js +3 -3
  8. package/components/dropdown/v4/AppDropdownTrigger.vue2.js +72 -58
  9. package/components/dropdown/v4/DropdownV4.vue.js +3 -3
  10. package/components/dropdown/v4/DropdownV4.vue2.js +44 -42
  11. package/components/dropdown/v4/OptionV4.vue.js +3 -3
  12. package/components/dropdown/v4/OptionV4.vue2.js +12 -12
  13. package/components/dropdown/v4/index.d.ts +40 -1
  14. package/components/table/v4/DataGrid.vue.js +3 -3
  15. package/components/table/v4/DataGrid.vue2.js +28 -28
  16. package/components/table/v4/HelpIcon.vue.js +5 -5
  17. package/components/table/v4/HelpIcon.vue2.js +5 -5
  18. package/composables/useFormValidation.js +19 -13
  19. package/index.d.ts +80 -2
  20. package/mocks/apps.d.ts +1 -0
  21. package/package.json +1 -1
  22. package/AppDropdownTrigger.vue_vue_type_style_index_0_scoped_39c47ad1_lang.css +0 -1
  23. package/DataGrid.vue_vue_type_style_index_0_scoped_6df3b70f_lang.css +0 -1
  24. package/DropdownV4.vue_vue_type_style_index_0_scoped_0363db63_lang.css +0 -1
  25. package/HelpIcon.vue_vue_type_style_index_0_scoped_7a611779_lang.css +0 -1
  26. package/OptionV4.vue_vue_type_style_index_0_scoped_e0c24b6a_lang.css +0 -1
@@ -0,0 +1 @@
1
+ .app-trigger-wrapper[data-v-092d0e03]{display:flex}.app-trigger-wrapper.with-copy .app-trigger[data-v-092d0e03]{border-radius:var(--border-radius-lg) 0 0 var(--border-radius-lg);width:calc(100% - 41px)}.app-trigger-key[data-v-092d0e03]{flex:none}.app-trigger-key--content[data-v-092d0e03]{padding:10px;background:var(--default-main);cursor:pointer;border-radius:0 var(--border-radius-lg) var(--border-radius-lg) 0;border-left:1px solid var(--common-divider);color:var(--action-active)}.app-trigger-key--content[data-v-092d0e03]:hover{background:var(--action-selected);color:var(--action-primary)}.app-trigger[data-v-092d0e03]{width:100%;padding:0 12px;border-radius:var(--border-radius-lg);cursor:pointer;user-select:none;display:inline-flex;background:var(--default-main);height:40px;align-items:center}.app-trigger[data-v-092d0e03]:hover,.app-trigger.active[data-v-092d0e03]{background:var(--action-selected)}.app-trigger.disabled[data-v-092d0e03]{cursor:auto}.app-trigger--content[data-v-092d0e03]{color:var(--text-primary);display:flex;column-gap:4px;width:calc(100% - 20px);align-items:center}.app-trigger--content .x-circle-wrapper[data-v-092d0e03]{color:var(--primary-dark)}.app-trigger--content .x-circle-wrapper[data-v-092d0e03]:hover{color:var(--primary-main)}.app-trigger--icon[data-v-092d0e03]{display:flex;align-items:center;color:var(--action-active)}.app-trigger .displayed-value[data-v-092d0e03]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.app-trigger .image[data-v-092d0e03]{width:28px;height:28px;flex:none}.app-trigger .image img[data-v-092d0e03]{border-radius:4px;width:100%;height:100%}.app-trigger .start-icon[data-v-092d0e03],.app-trigger .end-icon[data-v-092d0e03]{display:flex;color:var(--action-active)}.app-trigger .end-icon[data-v-092d0e03]{margin-right:var(--spacing-100)}.app-trigger .label-text[data-v-092d0e03]{display:flex;align-items:center;gap:8px}.app-trigger .label-text .text-content[data-v-092d0e03]{display:flex;align-items:center;gap:4px;width:100%}.app-trigger .label-text .text-content .text-content-value[data-v-092d0e03]{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-trigger .label-text .is-mandatory[data-v-092d0e03]{padding-top:5px;color:var(--error-main)}
@@ -0,0 +1 @@
1
+ .sticky[data-v-b5729ec6]{position:sticky}.table-container[data-v-b5729ec6]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-b5729ec6]{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-b5729ec6]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-b5729ec6]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-b5729ec6]{width:13.75rem}.table-header.isStickyHeader[data-v-b5729ec6]{z-index:calc(var(--1d168568) + 3);top:0}.table-head-container[data-v-b5729ec6]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-b5729ec6]{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-b5729ec6]{display:inline-table}.table-header-actions[data-v-b5729ec6]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-b5729ec6]{position:relative}.table-row.loading[data-v-b5729ec6]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-b5729ec6]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-b5729ec6]{border-bottom:none}.expanded-row[data-v-b5729ec6]{grid-column:var(--40a246c0);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-b5729ec6]{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-b5729ec6]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-b5729ec6],table th[data-v-b5729ec6]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-b5729ec6]:first-of-type,table th[data-v-b5729ec6]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-b5729ec6]:last-of-type,table th[data-v-b5729ec6]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-b5729ec6],table th.expand-toggle-cell[data-v-b5729ec6]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-b5729ec6]{border-bottom:none;z-index:calc(var(--1d168568) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-b5729ec6]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--68f7a9b9)}table>thead>tr>th[data-v-b5729ec6]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-b5729ec6]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-b5729ec6]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-b5729ec6]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-b5729ec6]{cursor:pointer}table>thead.sticky[data-v-b5729ec6]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-b5729ec6]{z-index:calc(var(--1d168568) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-b5729ec6]{display:block}table>tbody>*>tr[data-v-b5729ec6]{background-color:var(--background-default);min-height:var(--60bffa01);height:auto;display:grid;align-items:center;grid-template-columns:var(--68f7a9b9)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-b5729ec6]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-b5729ec6],table>tbody>*>tr.activeMenu>td[data-v-b5729ec6]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-b5729ec6]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--60bffa01);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-b5729ec6]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-b5729ec6]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-b5729ec6]{justify-content:flex-end;text-align:right}.section-container[data-v-b5729ec6]{left:0}.sections[data-v-b5729ec6]{display:flex}.section[data-v-b5729ec6]{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-b5729ec6]{width:100%}.empty-state[data-v-b5729ec6]{min-height:250px}
@@ -0,0 +1 @@
1
+ .v-enter-active[data-v-2e7a89bc],.v-leave-active[data-v-2e7a89bc]{transition:opacity .25s ease}ol[data-v-2e7a89bc],ul[data-v-2e7a89bc],menu[data-v-2e7a89bc]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-2e7a89bc],.dropdown.full-width .button__container[data-v-2e7a89bc]{width:100%}.dropdown-list-wrapper[data-v-2e7a89bc]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-2e7a89bc]{padding:.5rem}.list-container--multi[data-v-2e7a89bc]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-2e7a89bc]{padding-bottom:.25rem}.inline-search .list-container[data-v-2e7a89bc]{padding-top:0}.no-result-container[data-v-2e7a89bc]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-2e7a89bc]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-2e7a89bc]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-2e7a89bc]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.image-slot[data-v-2e7a89bc]{margin-right:.5rem}.actions-wrapper[data-v-2e7a89bc]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-2e7a89bc]{margin-left:.5rem}
@@ -0,0 +1 @@
1
+ .table-help-icon[data-v-06fce2e3]{margin-left:var(--spacing-50);color:var(--action-active);margin-right:calc(var(--spacing-50) * -1)}.info-icon[data-v-06fce2e3]{color:var(--action-active)}.info-icon[data-v-06fce2e3]:hover{color:var(--action-primary)}
@@ -0,0 +1 @@
1
+ .label[data-v-89b98201]{color:#41454d}.item-container[data-v-89b98201]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-89b98201]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-89b98201]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-89b98201],.item-container[data-v-89b98201]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-89b98201]{background-color:var(--action-selected)}.subtitle[data-v-89b98201]{color:#7b838c;line-height:1rem}.clear-button[data-v-89b98201]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-89b98201]:hover{color:#3083ff}.item[data-v-89b98201]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-89b98201],.item--multi[data-v-89b98201]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-89b98201]{width:20px;height:20px;flex:none}.item .image img[data-v-89b98201]{width:20px;height:20px;border-radius:4px}.item .start-icon[data-v-89b98201],.item .end-icon[data-v-89b98201]{display:flex;color:var(--action-active)}.item .option-text[data-v-89b98201]{line-height:1.1875rem}.text-container[data-v-89b98201]{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.tooltip-option[data-v-89b98201]{display:block}.tooltip-option[data-v-89b98201] .container{width:100%}
@@ -18,6 +18,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
18
18
  optionImageKey?: string;
19
19
  optionIconKey?: string;
20
20
  optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
21
+ optionEndIconKey?: string;
22
+ optionEndIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
21
23
  }>, {
22
24
  placeholder: string;
23
25
  selectedOption: any;
@@ -41,6 +43,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
41
43
  optionImageKey: any;
42
44
  optionIconKey: any;
43
45
  optionIconType: any;
46
+ optionEndIconKey: any;
47
+ optionEndIconType: any;
44
48
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
45
49
  click: () => void;
46
50
  copyToClipboard: () => void;
@@ -64,6 +68,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
64
68
  optionImageKey?: string;
65
69
  optionIconKey?: string;
66
70
  optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
71
+ optionEndIconKey?: string;
72
+ optionEndIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
67
73
  }>, {
68
74
  placeholder: string;
69
75
  selectedOption: any;
@@ -87,6 +93,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
87
93
  optionImageKey: any;
88
94
  optionIconKey: any;
89
95
  optionIconType: any;
96
+ optionEndIconKey: any;
97
+ optionEndIconType: any;
90
98
  }>>> & {
91
99
  onClick?: () => any;
92
100
  onCopyToClipboard?: () => any;
@@ -106,12 +114,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
106
114
  optionIconKey: string;
107
115
  optionImageKey: string;
108
116
  optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
117
+ optionEndIconKey: string;
118
+ optionEndIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
109
119
  valueToCopy: string;
110
120
  selectedOption: any;
111
121
  brandIconType: "android" | "ios";
112
122
  }>, {
113
123
  image?(_: {}): any;
114
124
  "icon-start"?(_: {}): any;
125
+ "icon-end"?(_: {}): any;
115
126
  }>;
116
127
  export default _default;
117
128
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -1,7 +1,7 @@
1
1
  import o from "./AppDropdownTrigger.vue2.js";
2
- /* empty css */import p from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_39c47ad1_lang.css"; //*');
4
- const s = /* @__PURE__ */ p(o, [["__scopeId", "data-v-39c47ad1"]]);
2
+ /* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_092d0e03_lang.css"; //*');
4
+ const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-092d0e03"]]);
5
5
  export {
6
6
  s as default
7
7
  };
@@ -1,21 +1,24 @@
1
- import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_39c47ad1_lang.css"; import { defineComponent as V, computed as p, openBlock as o, createElementBlock as n, normalizeClass as B, createElementVNode as a, mergeProps as O, unref as l, renderSlot as T, createCommentVNode as i, createVNode as s, withCtx as v, toDisplayString as $ } from "vue";
2
- import r from "../../icon/v4/IconV4.vue.js";
3
- import x from "../../typography/v4/Typography.vue.js";
4
- import { DropdownTestIdModifiers as u } from "../../../testids/index.js";
5
- import { useTestIdAttrs as K } from "../../../utils/testIds.js";
6
- import N from "../../tooltip/v4/TooltipV4.vue.js";
7
- import { useClipboard as w } from "@vueuse/core";
8
- import { Snackbar as z } from "../../snackbar/v4/index.js";
9
- const S = { class: "app-trigger--content" }, D = {
1
+ import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_092d0e03_lang.css"; import { defineComponent as A, computed as r, openBlock as n, createElementBlock as a, normalizeClass as $, createElementVNode as s, mergeProps as v, unref as o, renderSlot as u, createCommentVNode as d, createVNode as c, withCtx as I, toDisplayString as V } from "vue";
2
+ import p from "../../icon/v4/IconV4.vue.js";
3
+ import B from "../../typography/v4/Typography.vue.js";
4
+ import { DropdownTestIdModifiers as y } from "../../../testids/index.js";
5
+ import { useTestIdAttrs as E } from "../../../utils/testIds.js";
6
+ import x from "../../tooltip/v4/TooltipV4.vue.js";
7
+ import { useClipboard as z } from "@vueuse/core";
8
+ import { Snackbar as N } from "../../snackbar/v4/index.js";
9
+ const w = { class: "app-trigger--content" }, S = {
10
10
  key: 0,
11
11
  class: "image"
12
- }, E = ["src"], P = {
12
+ }, D = ["src"], P = {
13
13
  key: 1,
14
14
  class: "start-icon"
15
15
  }, R = { class: "label-text" }, U = { key: 0 }, L = { class: "text-content" }, M = { class: "text-content-value" }, W = {
16
16
  key: 0,
17
17
  class: "is-mandatory"
18
- }, j = { class: "app-trigger-key--content" }, _ = /* @__PURE__ */ V({
18
+ }, j = {
19
+ key: 2,
20
+ class: "end-icon"
21
+ }, q = { class: "app-trigger-key--content" }, ee = /* @__PURE__ */ A({
19
22
  __name: "AppDropdownTrigger",
20
23
  props: {
21
24
  placeholder: { default: "Select app" },
@@ -36,97 +39,108 @@ const S = { class: "app-trigger--content" }, D = {
36
39
  optionNameKey: { default: null },
37
40
  optionImageKey: { default: null },
38
41
  optionIconKey: { default: null },
39
- optionIconType: { default: null }
42
+ optionIconType: { default: null },
43
+ optionEndIconKey: { default: null },
44
+ optionEndIconType: { default: null }
40
45
  },
41
46
  emits: ["click", "copyToClipboard"],
42
- setup(t, { emit: y }) {
43
- const e = t, { copy: k, copied: C } = w({}), I = p(
47
+ setup(t, { emit: f }) {
48
+ const e = t, { copy: O, copied: k } = z({}), C = r(
44
49
  () => e.feedbackVariant ? `state-${e.feedbackVariant}` : ""
45
50
  ), b = () => {
46
- y("click");
47
- }, f = K(e.testId, u), m = "All apps selected", g = p(() => e.multi ? !Array.isArray(e.selectedOption) || !e.selectedOption?.length ? e.placeholder : e.options?.length === e.selectedOption.length ? `${m} (${e.selectedOption.length})` : e.selectedOption?.length === 1 && e.displayValue ? e.displayValue(e.selectedOption[0]) : `${e.selectedOption.length} selected` : e.selectedOption ? e.displayValue(e.selectedOption) : e.placeholder), d = p(() => {
51
+ f("click");
52
+ }, m = E(e.testId, y), g = "All apps selected", h = r(() => e.multi ? !Array.isArray(e.selectedOption) || !e.selectedOption?.length ? e.placeholder : e.options?.length === e.selectedOption.length ? `${g} (${e.selectedOption.length})` : e.selectedOption?.length === 1 && e.displayValue ? e.displayValue(e.selectedOption[0]) : `${e.selectedOption.length} selected` : e.selectedOption ? e.displayValue(e.selectedOption) : e.placeholder), l = r(() => {
48
53
  if (!e.selectedOption)
49
54
  return null;
50
55
  if (!e.multi)
51
56
  return e.selectedOption;
52
57
  if (Array.isArray(e.selectedOption))
53
58
  return e.selectedOption.length === 1 ? e.selectedOption[0] : null;
54
- }), A = async () => {
55
- await k(e.valueToCopy), C.value && (z({
59
+ }), K = async () => {
60
+ await O(e.valueToCopy), k.value && (N({
56
61
  title: "Copied successfully",
57
62
  type: "success",
58
63
  duration: 2e3
59
- }), y("copyToClipboard"));
64
+ }), f("copyToClipboard"));
60
65
  };
61
- return (c, h) => (o(), n("div", {
62
- class: B(["app-trigger-wrapper", { "with-copy": !!t.valueToCopy }])
66
+ return (i, T) => (n(), a("div", {
67
+ class: $(["app-trigger-wrapper", { "with-copy": !!t.valueToCopy }])
63
68
  }, [
64
- a("div", O({
65
- class: ["app-trigger", [t.size, l(I), { open: t.open, disabled: t.disabled }]],
69
+ s("div", v({
70
+ class: ["app-trigger", [t.size, o(C), { open: t.open, disabled: t.disabled }]],
66
71
  style: {
67
- paddingLeft: c.$slots.image || l(d) && t.optionImageKey ? "8px" : "12px"
72
+ paddingLeft: i.$slots.image || o(l) && t.optionImageKey ? "8px" : "12px"
68
73
  }
69
- }, l(f)[l(u).BUTTON_WRAPPER], {
70
- onClick: h[0] || (h[0] = (q) => b())
74
+ }, o(m)[o(y).BUTTON_WRAPPER], {
75
+ onClick: T[0] || (T[0] = (F) => b())
71
76
  }), [
72
- a("div", S, [
73
- c.$slots.image || l(d) && t.optionImageKey ? (o(), n("div", D, [
74
- T(c.$slots, "image", {}, () => [
75
- t.optionImageKey ? (o(), n("img", {
77
+ s("div", w, [
78
+ i.$slots.image || o(l) && t.optionImageKey ? (n(), a("div", S, [
79
+ u(i.$slots, "image", {}, () => [
80
+ t.optionImageKey ? (n(), a("img", {
76
81
  key: 0,
77
- src: l(d)[t.optionImageKey]
78
- }, null, 8, E)) : i("", !0)
82
+ src: o(l)[t.optionImageKey]
83
+ }, null, 8, D)) : d("", !0)
79
84
  ], !0)
80
- ])) : i("", !0),
81
- c.$slots["icon-start"] || l(d) && t.optionIconKey ? (o(), n("div", P, [
82
- T(c.$slots, "icon-start", {}, () => [
83
- s(l(r), {
85
+ ])) : d("", !0),
86
+ i.$slots["icon-start"] || o(l) && t.optionIconKey ? (n(), a("div", P, [
87
+ u(i.$slots, "icon-start", {}, () => [
88
+ c(o(p), {
84
89
  type: t.optionIconType,
85
- name: l(d)[t.optionIconKey],
90
+ name: o(l)[t.optionIconKey],
86
91
  size: "20px"
87
92
  }, null, 8, ["type", "name"])
88
93
  ], !0)
89
- ])) : i("", !0),
90
- s(l(x), O({ variant: "button" }, l(f)[l(u).BUTTON_CONTENT], { class: "displayed-value" }), {
91
- default: v(() => [
92
- a("div", R, [
93
- l(g) === m ? (o(), n("span", U, [
94
- s(l(r), {
94
+ ])) : d("", !0),
95
+ c(o(B), v({ variant: "button" }, o(m)[o(y).BUTTON_CONTENT], { class: "displayed-value" }), {
96
+ default: I(() => [
97
+ s("div", R, [
98
+ o(h) === g ? (n(), a("span", U, [
99
+ c(o(p), {
95
100
  name: "cube",
96
101
  size: "20px",
97
102
  type: "fill"
98
103
  })
99
- ])) : i("", !0),
100
- a("div", L, [
101
- a("div", M, $(l(g)), 1),
102
- t.mandatory && (Array.isArray(t.selectedOption) ? !t.selectedOption.length : !t.selectedOption) ? (o(), n("span", W, "*")) : i("", !0)
104
+ ])) : d("", !0),
105
+ s("div", L, [
106
+ s("div", M, V(o(h)), 1),
107
+ t.mandatory && (Array.isArray(t.selectedOption) ? !t.selectedOption.length : !t.selectedOption) ? (n(), a("span", W, "*")) : d("", !0)
103
108
  ])
104
109
  ])
105
110
  ]),
106
111
  _: 1
107
- }, 16)
112
+ }, 16),
113
+ i.$slots["icon-end"] || o(l) && t.optionEndIconKey && o(l)[t.optionEndIconKey] ? (n(), a("div", j, [
114
+ u(i.$slots, "icon-end", {}, () => [
115
+ c(o(p), {
116
+ type: t.optionEndIconType,
117
+ name: o(l)[t.optionEndIconKey],
118
+ size: "24px"
119
+ }, null, 8, ["type", "name"])
120
+ ], !0)
121
+ ])) : d("", !0)
108
122
  ]),
109
- a("div", null, [
110
- s(l(r), {
123
+ s("div", null, [
124
+ c(o(p), {
111
125
  name: "caret-down",
112
126
  size: "20px",
113
127
  class: "app-trigger--icon"
114
128
  })
115
129
  ])
116
130
  ], 16),
117
- t.valueToCopy ? (o(), n("div", {
131
+ t.valueToCopy ? (n(), a("div", {
118
132
  key: 0,
119
133
  class: "app-trigger-key",
120
- onClick: A
134
+ onClick: K
121
135
  }, [
122
- s(l(N), {
136
+ c(o(x), {
123
137
  text: t.valueToCopy,
124
138
  header: "Copy app key",
125
139
  placement: "bottom"
126
140
  }, {
127
- default: v(() => [
128
- a("div", j, [
129
- s(l(r), {
141
+ default: I(() => [
142
+ s("div", q, [
143
+ c(o(p), {
130
144
  name: "copy",
131
145
  size: "20px"
132
146
  })
@@ -134,10 +148,10 @@ const S = { class: "app-trigger--content" }, D = {
134
148
  ]),
135
149
  _: 1
136
150
  }, 8, ["text"])
137
- ])) : i("", !0)
151
+ ])) : d("", !0)
138
152
  ], 2));
139
153
  }
140
154
  });
141
155
  export {
142
- _ as default
156
+ ee as default
143
157
  };
@@ -1,8 +1,8 @@
1
1
  import o from "./DropdownV4.vue2.js";
2
- /* empty css *//* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_0363db63_lang.css"; //*');
2
+ /* empty css *//* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_2e7a89bc_lang.css"; //*');
4
4
  // import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css"; //');
5
- const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-0363db63"]]);
5
+ const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-2e7a89bc"]]);
6
6
  export {
7
7
  r as default
8
8
  };
@@ -1,10 +1,10 @@
1
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_0363db63_lang.css"; import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css"; import { defineComponent as se, computed as x, openBlock as i, createElementBlock as n, mergeProps as u, unref as e, renderSlot as w, createElementVNode as y, createVNode as a, withCtx as c, Transition as ue, normalizeClass as A, normalizeStyle as ce, isRef as fe, createCommentVNode as r, createTextVNode as g, toDisplayString as me, withModifiers as $, Fragment as ye, renderList as pe, toRaw as k, createBlock as H, resolveDynamicComponent as ge } from "vue";
1
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_2e7a89bc_lang.css"; import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css"; import { defineComponent as se, computed as x, openBlock as i, createElementBlock as n, mergeProps as u, unref as e, renderSlot as w, createElementVNode as m, createVNode as a, withCtx as c, Transition as ue, normalizeClass as A, normalizeStyle as ce, isRef as fe, createCommentVNode as r, createTextVNode as g, toDisplayString as ye, withModifiers as $, Fragment as me, renderList as pe, toRaw as b, createBlock as H, resolveDynamicComponent as ge } from "vue";
2
2
  import L from "../../button/v4/ButtonV4.vue.js";
3
3
  import "../../button/v4/IconButtonV4.vue.js";
4
4
  import "./DropdownV4.vue.js";
5
- import Te from "./DefaultDropdownTrigger.vue.js";
6
- import be from "./IconButtonDropdownTrigger.vue.js";
7
- import ke from "./ChipDropdownTrigger.vue.js";
5
+ import ke from "./DefaultDropdownTrigger.vue.js";
6
+ import Te from "./IconButtonDropdownTrigger.vue.js";
7
+ import be from "./ChipDropdownTrigger.vue.js";
8
8
  import he from "./AppDropdownTrigger.vue.js";
9
9
  import "./ButtonDropdownTrigger.vue.js";
10
10
  import "./ButtonFilterDropdownTrigger.vue.js";
@@ -19,7 +19,7 @@ import { useTestIdAttrs as Se } from "../../../utils/testIds.js";
19
19
  import { TRIGGERS as p } from "./Dropdown.types.js";
20
20
  import { useElementSize as Ae } from "@vueuse/core";
21
21
  import Le from "../../shared/FieldHelpText.vue.js";
22
- const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne = { key: 1 }, Ke = { key: 2 }, De = {
22
+ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke = { key: 1 }, Ne = { key: 2 }, De = {
23
23
  key: 0,
24
24
  class: "inline-search-wrapper"
25
25
  }, Pe = {
@@ -93,7 +93,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
93
93
  DROPLIST_MIN_WIDTH: 240,
94
94
  VERSION: 4
95
95
  }, {
96
- onKeydown: T,
96
+ onKeydown: k,
97
97
  open: s,
98
98
  toggleMenu: h,
99
99
  onButtonKeydown: G,
@@ -105,10 +105,10 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
105
105
  allSelected: B,
106
106
  isIndeterminate: J,
107
107
  onSelectAll: Q,
108
- virtualOptions: N,
108
+ virtualOptions: K,
109
109
  isSelected: S,
110
- selectedOption: b,
111
- selectedOptionPrevious: K,
110
+ selectedOption: T,
111
+ selectedOptionPrevious: N,
112
112
  selectedValue: Z,
113
113
  onSelect: D,
114
114
  activeIndex: P,
@@ -122,7 +122,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
122
122
  el: ne,
123
123
  onClearAllSelections: F,
124
124
  clearAll: ae
125
- } = we(d, O, E), m = Se(d.testId, f), z = x(() => !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT ? Te : d.predefinedTrigger === p.APP ? he : null), { width: V } = Ae(R), de = x(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT || d.predefinedTrigger === p.APP ? V.value - 2 > 240 ? `${V.value - 2}px` : `${E.DROPLIST_MIN_WIDTH}px` : "auto"), re = () => {
125
+ } = we(d, O, E), y = Se(d.testId, f), z = x(() => !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT ? ke : d.predefinedTrigger === p.APP ? he : null), { width: V } = Ae(R), de = x(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT || d.predefinedTrigger === p.APP ? V.value - 2 > 240 ? `${V.value - 2}px` : `${E.DROPLIST_MIN_WIDTH}px` : "auto"), re = () => {
126
126
  h();
127
127
  };
128
128
  return M({
@@ -133,12 +133,12 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
133
133
  ref: ne,
134
134
  class: ["dropdown dropdown--main-wrapper", [{ "dropdown--disabled": t.disabled, "full-width": t.fullWidth }]],
135
135
  tabindex: t.disabled ? -1 : 0
136
- }, e(m)[e(f).WRAPPER], {
136
+ }, e(y)[e(f).WRAPPER], {
137
137
  onKeydown: o[8] || (o[8] = //@ts-ignore
138
- (...l) => e(T) && e(T)(...l))
138
+ (...l) => e(k) && e(k)(...l))
139
139
  }), [
140
140
  w(I.$slots, "label", {}, void 0, !0),
141
- y("div", Ee, [
141
+ m("div", Ee, [
142
142
  a(e(ve), u({
143
143
  theme: t.theme,
144
144
  "popper-class": [
@@ -156,7 +156,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
156
156
  "auto-hide": !1,
157
157
  container: t.container,
158
158
  "auto-size": t.autoSize
159
- }, e(m)[e(f).TRIGGER]), {
159
+ }, e(y)[e(f).TRIGGER]), {
160
160
  popper: c(() => [
161
161
  a(ue, null, {
162
162
  default: c(() => [
@@ -174,7 +174,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
174
174
  key: 0,
175
175
  class: A(["dropdown-list-wrapper", { "dropdown-list-wrapper--multi": t.multi }]),
176
176
  onKeydown: o[7] || (o[7] = //@ts-ignore
177
- (...l) => e(T) && e(T)(...l))
177
+ (...l) => e(k) && e(k)(...l))
178
178
  }, [
179
179
  e(s) && t.inlineSearch ? (i(), n("div", De, [
180
180
  a(e(Ie), {
@@ -188,25 +188,25 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
188
188
  size: "md",
189
189
  "auto-focus": t.searchAutoFocus,
190
190
  "test-id": t.testId,
191
- onKeydown: e(T)
191
+ onKeydown: e(k)
192
192
  }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
193
193
  ])) : r("", !0),
194
194
  w(I.$slots, "input-list", { open: e(s) }, void 0, !0),
195
- y("div", u({
195
+ m("div", u({
196
196
  class: ["list-container", { "list-container--multi": t.multi }],
197
197
  style: { height: `${e(q)}rem` }
198
198
  }, {
199
199
  ...e(X),
200
- ...e(m)[e(f).LIST_CONTAINER]
200
+ ...e(y)[e(f).LIST_CONTAINER]
201
201
  }), [
202
- y("ul", u(e(Y), {
202
+ m("ul", u(e(Y), {
203
203
  role: "listbox",
204
204
  class: ["list", { "list--multi": t.multi }]
205
205
  }), [
206
206
  !e(j).length && !t.loading ? (i(), n("li", Pe, [
207
- a(e(W), u({ variant: "body2" }, e(m)[e(f).NO_RESULT]), {
207
+ a(e(W), u({ variant: "body2" }, e(y)[e(f).NO_RESULT]), {
208
208
  default: c(() => [
209
- g(me(t.noResultsText), 1)
209
+ g(ye(t.noResultsText), 1)
210
210
  ]),
211
211
  _: 1
212
212
  }, 16)
@@ -229,7 +229,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
229
229
  "is-indeterminate": e(J),
230
230
  "select-all-option": ""
231
231
  },
232
- e(m)[e(f).SELECT_ALL],
232
+ e(y)[e(f).SELECT_ALL],
233
233
  {
234
234
  onClick: o[5] || (o[5] = $((l) => e(Q)(), ["stop"]))
235
235
  }
@@ -240,22 +240,22 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
240
240
  _: 1
241
241
  }, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
242
242
  ])) : r("", !0),
243
- e(N).length && !t.loading ? (i(!0), n(ye, { key: 3 }, pe(e(N), ({ data: l, index: v }) => (i(), n("li", {
243
+ e(K).length && !t.loading ? (i(!0), n(me, { key: 3 }, pe(e(K), ({ data: l, index: v }) => (i(), n("li", {
244
244
  key: v,
245
- "aria-selected": e(S)(k(e(b)), l),
245
+ "aria-selected": e(S)(b(e(T)), l),
246
246
  "aria-disabled": !!t.disabled,
247
247
  onClick: $(() => e(D)(l, v), ["stop"])
248
248
  }, [
249
249
  w(I.$slots, "default", {
250
250
  option: l,
251
- selected: e(S)(k(e(b)), l),
252
- active: k(e(P)) === v,
251
+ selected: e(S)(b(e(T)), l),
252
+ active: b(e(P)) === v,
253
253
  disabled: l[d.disabledOptionKey]
254
254
  }, () => [
255
255
  a(e(U), {
256
256
  option: l,
257
- selected: e(S)(k(e(b)), l),
258
- active: k(e(P)) === v,
257
+ selected: e(S)(b(e(T)), l),
258
+ active: b(e(P)) === v,
259
259
  disabled: l[d.disabledOptionKey],
260
260
  "name-key": t.optionNameKey,
261
261
  "image-key": t.optionImageKey,
@@ -269,7 +269,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
269
269
  ], 16)
270
270
  ], 16),
271
271
  t.multi ? (i(), n("div", Ve, [
272
- y("div", xe, [
272
+ m("div", xe, [
273
273
  a(e(L), u(
274
274
  {
275
275
  ref_key: "clearAll",
@@ -278,7 +278,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
278
278
  variant: "text",
279
279
  color: "primary"
280
280
  },
281
- e(m)[e(f).ACTION_CLEAR_ALL],
281
+ e(y)[e(f).ACTION_CLEAR_ALL],
282
282
  {
283
283
  onClick: o[6] || (o[6] = () => e(F)(!1))
284
284
  }
@@ -289,7 +289,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
289
289
  _: 1
290
290
  }, 16)
291
291
  ]),
292
- y("div", $e, [
292
+ m("div", $e, [
293
293
  a(e(L), u(
294
294
  {
295
295
  ref_key: "cancel",
@@ -298,7 +298,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
298
298
  variant: "outlined",
299
299
  color: "primary"
300
300
  },
301
- e(m)[e(f).ACTION_CANCEL],
301
+ e(y)[e(f).ACTION_CANCEL],
302
302
  { onClick: e(_) }
303
303
  ), {
304
304
  default: c(() => [
@@ -312,7 +312,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
312
312
  "data-testid": "mutli-apply",
313
313
  size: "small",
314
314
  class: "apply-button"
315
- }, e(m)[e(f).ACTION_APPLY], { onClick: e(ee) }), {
315
+ }, e(y)[e(f).ACTION_APPLY], { onClick: e(ee) }), {
316
316
  default: c(() => [
317
317
  g("Apply ")
318
318
  ]),
@@ -327,7 +327,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
327
327
  })
328
328
  ]),
329
329
  default: c(() => [
330
- y("div", {
330
+ m("div", {
331
331
  class: A(["button__container", {
332
332
  "button__container--open": !!e(s),
333
333
  [`button__container--${t.size}`]: !0,
@@ -342,7 +342,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
342
342
  onClick: () => e(h)()
343
343
  }
344
344
  }, () => [
345
- y("div", {
345
+ m("div", {
346
346
  ref_key: "buttonRef",
347
347
  ref: R
348
348
  }, [
@@ -356,13 +356,15 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
356
356
  "test-id": t.testId,
357
357
  multi: t.multi,
358
358
  disabled: t.disabled,
359
- "selected-option": t.multi ? e(K) : e(b),
359
+ "selected-option": t.multi ? e(N) : e(T),
360
360
  "display-value": t.displayValue,
361
361
  options: t.options,
362
362
  "option-name-key": t.optionNameKey,
363
363
  "option-image-key": t.optionImageKey,
364
364
  "option-icon-key": t.optionIconKey,
365
365
  "option-icon-type": t.optionIconType,
366
+ "option-end-icon-key": t.optionEndIconKey,
367
+ "option-end-icon-type": t.optionEndIconType,
366
368
  "feedback-variant": t.triggerFeedbackVariant,
367
369
  "value-to-copy": t.valueToCopy,
368
370
  "status-dot-type": t.statusType,
@@ -370,20 +372,20 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ne
370
372
  onKeydown: e(G),
371
373
  onClick: re,
372
374
  onCopyToClipboard: o[0] || (o[0] = (l) => O("copyToClipboard"))
373
- }, null, 40, ["placeholder", "open", "label", "show-feedback-icon", "mandatory", "test-id", "multi", "disabled", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "feedback-variant", "value-to-copy", "status-dot-type", "size", "onKeydown"]))
375
+ }, null, 40, ["placeholder", "open", "label", "show-feedback-icon", "mandatory", "test-id", "multi", "disabled", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "option-end-icon-key", "option-end-icon-type", "feedback-variant", "value-to-copy", "status-dot-type", "size", "onKeydown"]))
374
376
  ])) : r("", !0),
375
- t.predefinedTrigger === e(p).ICON_BUTTON ? (i(), n("div", Ne, [
376
- a(e(be), {
377
+ t.predefinedTrigger === e(p).ICON_BUTTON ? (i(), n("div", Ke, [
378
+ a(e(Te), {
377
379
  onClick: o[1] || (o[1] = (l) => e(h)())
378
380
  })
379
381
  ])) : r("", !0),
380
- t.predefinedTrigger === e(p).CHIP ? (i(), n("div", Ke, [
381
- a(e(ke), {
382
+ t.predefinedTrigger === e(p).CHIP ? (i(), n("div", Ne, [
383
+ a(e(be), {
382
384
  open: e(s),
383
385
  label: t.placeholder,
384
386
  "test-id": t.testId,
385
387
  options: t.options,
386
- "selected-option": t.multi ? e(K) : e(b),
388
+ "selected-option": t.multi ? e(N) : e(T),
387
389
  "display-value": t.displayValue,
388
390
  multi: t.multi,
389
391
  onClick: o[2] || (o[2] = (l) => e(h)()),
@@ -1,7 +1,7 @@
1
1
  import o from "./OptionV4.vue2.js";
2
- /* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../OptionV4.vue_vue_type_style_index_0_scoped_e0c24b6a_lang.css"; //*');
4
- const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e0c24b6a"]]);
2
+ /* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../../OptionV4.vue_vue_type_style_index_0_scoped_89b98201_lang.css"; //*');
4
+ const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-89b98201"]]);
5
5
  export {
6
6
  s as default
7
7
  };