@ironsource/shared-ui 2.1.11-test.9 → 2.1.11-test.92

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 (170) hide show
  1. package/ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_604dfc6f_lang.css +1 -0
  2. package/Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css +1 -0
  3. package/ChartHeader.vue_vue_type_style_index_0_scoped_b8213498_lang.css +1 -0
  4. package/ChartLegend.vue_vue_type_style_index_0_scoped_a1c626cd_lang.css +1 -0
  5. package/ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css +1 -0
  6. package/CheckboxV4.vue_vue_type_style_index_0_scoped_af4ae3c3_lang.css +1 -0
  7. package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_e43ac1c9_lang.css +1 -0
  8. package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_2ba23450_lang.css +1 -0
  9. package/DataGrid.vue_vue_type_style_index_0_scoped_26488faf_lang.css +1 -0
  10. package/DataGridMenu.vue_vue_type_style_index_0_scoped_ddfaf207_lang.css +1 -0
  11. package/DialogV4.vue_vue_type_style_index_0_scoped_37da643b_lang.css +1 -0
  12. package/DropdownV4.vue_vue_type_style_index_0_scoped_75002075_lang.css +1 -0
  13. package/EditableV4.vue_vue_type_style_index_0_scoped_1bbe222a_lang.css +1 -0
  14. package/EmptyStateV4.vue_vue_type_style_index_0_scoped_18728498_lang.css +1 -0
  15. package/FiltersPanelV4.vue_vue_type_style_index_0_scoped_383011d3_lang.css +1 -0
  16. package/FormCard.vue_vue_type_style_index_0_scoped_86feae7b_lang.css +1 -0
  17. package/IconFlag.vue_vue_type_style_index_0_scoped_be9dc7bb_lang.css +1 -0
  18. package/OptionV4.vue_vue_type_style_index_0_scoped_2c2947b3_lang.css +1 -0
  19. package/PopoverV4.vue_vue_type_style_index_0_scoped_66694b4e_lang.css +1 -0
  20. package/README.md +4 -15
  21. package/SnackbarV4.vue_vue_type_style_index_0_scoped_89fe8aa1_lang.css +1 -0
  22. package/SortableItem.vue_vue_type_style_index_0_scoped_2ca7b24c_lang.css +1 -0
  23. package/SortableItemLabel.vue_vue_type_style_index_0_scoped_f2ced2f4_lang.css +1 -0
  24. package/SortableList.vue_vue_type_style_index_0_scoped_8f267f88_lang.css +1 -0
  25. package/TextField.vue_vue_type_style_index_0_scoped_fce3948c_lang.css +1 -0
  26. package/ThemeWrapper.vue_vue_type_style_index_1_lang.css +1 -1
  27. package/TooltipV4.vue_vue_type_style_index_0_scoped_66eab856_lang.css +1 -0
  28. package/TooltipV4.vue_vue_type_style_index_1_lang.css +1 -1
  29. package/TreeDropdown.vue_vue_type_style_index_0_scoped_b883d1fa_lang.css +1 -0
  30. package/Typography.vue_vue_type_style_index_0_scoped_5714d43e_lang.css +1 -0
  31. package/components/autocomplete/Autocomplete.vue2.js +1 -1
  32. package/components/chart/Chart.vue.d.ts +16 -3
  33. package/components/chart/Chart.vue.js +5 -5
  34. package/components/chart/Chart.vue2.js +127 -110
  35. package/components/chart/ChartHeader.vue.d.ts +13 -6
  36. package/components/chart/ChartHeader.vue.js +2 -2
  37. package/components/chart/ChartHeader.vue2.js +32 -29
  38. package/components/chart/ChartLegend.vue.d.ts +5 -0
  39. package/components/chart/ChartLegend.vue.js +3 -3
  40. package/components/chart/ChartLegend.vue2.js +99 -49
  41. package/components/chart/ChartTooltip.vue.d.ts +4 -5
  42. package/components/chart/ChartTooltip.vue.js +2 -2
  43. package/components/chart/ChartTooltip.vue2.js +64 -43
  44. package/components/chart/SettingsHeader.vue2.js +1 -1
  45. package/components/chart/index.d.ts +55 -16
  46. package/components/chart/mockData.d.ts +15 -2
  47. package/components/chart/types.d.ts +15 -1
  48. package/components/chart/utils/utils.js +5 -5
  49. package/components/checkbox/v4/CheckboxV4.vue.js +3 -3
  50. package/components/checkbox/v4/CheckboxV4.vue2.js +2 -2
  51. package/components/datePicker/v4/DatePickerV4.vue2.js +1 -1
  52. package/components/dateRange/v4/DateRangeV4.vue2.js +1 -1
  53. package/components/dialog/v4/DialogV4.vue.d.ts +15 -0
  54. package/components/dialog/v4/DialogV4.vue.js +3 -3
  55. package/components/dialog/v4/DialogV4.vue2.js +80 -73
  56. package/components/dialog/v4/index.d.ts +58 -1
  57. package/components/dropdown/common/Dropdown.common.js +180 -169
  58. package/components/dropdown/v3/index.d.ts +12 -12
  59. package/components/dropdown/v4/ButtonDropdownTrigger.vue.d.ts +15 -0
  60. package/components/dropdown/v4/ButtonDropdownTrigger.vue.js +2 -2
  61. package/components/dropdown/v4/ButtonDropdownTrigger.vue2.js +42 -20
  62. package/components/dropdown/v4/ChipDropdownTrigger.vue.d.ts +10 -0
  63. package/components/dropdown/v4/ChipDropdownTrigger.vue.js +3 -3
  64. package/components/dropdown/v4/ChipDropdownTrigger.vue2.js +59 -40
  65. package/components/dropdown/v4/{ConditionalDroprown.vue.d.ts → ConditionalDropdown.vue.d.ts} +60 -0
  66. package/components/dropdown/v4/ConditionalDropdown.vue.js +7 -0
  67. package/components/dropdown/v4/ConditionalDropdown.vue2.js +239 -0
  68. package/components/dropdown/v4/DropdownV4.vue.d.ts +18 -5
  69. package/components/dropdown/v4/DropdownV4.vue.js +3 -3
  70. package/components/dropdown/v4/DropdownV4.vue2.js +52 -50
  71. package/components/dropdown/v4/OptionV4.vue.js +2 -2
  72. package/components/dropdown/v4/OptionV4.vue2.js +2 -2
  73. package/components/dropdown/v4/TreeDropdown.vue.js +2 -2
  74. package/components/dropdown/v4/TreeDropdown.vue2.js +87 -87
  75. package/components/dropdown/v4/index.d.ts +205 -35
  76. package/components/dropdown/v4/index.js +3 -3
  77. package/components/emptyState/v4/EmptyStateV4.vue.js +3 -3
  78. package/components/emptyState/v4/EmptyStateV4.vue2.js +1 -1
  79. package/components/filtersPanel/v4/FiltersPanelV4.vue.js +2 -2
  80. package/components/filtersPanel/v4/FiltersPanelV4.vue2.js +8 -9
  81. package/components/forms/FormCard.vue.js +3 -3
  82. package/components/forms/FormCard.vue2.js +1 -1
  83. package/components/icon/v4/IconFlag.vue.js +3 -3
  84. package/components/icon/v4/IconFlag.vue2.js +1 -1
  85. package/components/icon/v4/consts.d.ts +1 -1
  86. package/components/icon/v4/consts.js +1 -1
  87. package/components/input/v4/TextField.vue.js +3 -3
  88. package/components/input/v4/TextField.vue2.js +185 -165
  89. package/components/multibar/MultiBarMenu.vue2.js +1 -1
  90. package/components/popover/v4/PopoverV4.vue.d.ts +11 -1
  91. package/components/popover/v4/PopoverV4.vue.js +2 -2
  92. package/components/popover/v4/PopoverV4.vue2.js +40 -26
  93. package/components/popover/v4/index.d.ts +46 -8
  94. package/components/snackbar/v4/SnackbarV4.vue.d.ts +7 -116
  95. package/components/snackbar/v4/SnackbarV4.vue.js +5 -5
  96. package/components/snackbar/v4/SnackbarV4.vue2.js +62 -60
  97. package/components/sortableList/SortableItem.vue.d.ts +5 -0
  98. package/components/sortableList/SortableItem.vue.js +2 -2
  99. package/components/sortableList/SortableItem.vue2.js +86 -70
  100. package/components/sortableList/SortableItemLabel.vue.js +3 -3
  101. package/components/sortableList/SortableItemLabel.vue2.js +20 -23
  102. package/components/sortableList/SortableList.vue.d.ts +17 -1
  103. package/components/sortableList/SortableList.vue.js +4 -4
  104. package/components/sortableList/SortableList.vue2.js +113 -94
  105. package/components/sortableList/index.d.ts +63 -5
  106. package/components/table/common/Table.common.d.ts +1 -1
  107. package/components/table/common/Table.common.js +82 -74
  108. package/components/table/common/Table.types.d.ts +1 -1
  109. package/components/table/common/consts.d.ts +4 -0
  110. package/components/table/common/consts.js +7 -0
  111. package/components/table/v3/Table.vue.d.ts +1 -1
  112. package/components/table/v3/index.d.ts +5 -5
  113. package/components/table/v4/DataGrid.vue.d.ts +12 -2
  114. package/components/table/v4/DataGrid.vue.js +2 -2
  115. package/components/table/v4/DataGrid.vue2.js +164 -155
  116. package/components/table/v4/DataGridMenu.vue.js +5 -5
  117. package/components/table/v4/DataGridMenu.vue2.js +2 -2
  118. package/components/table/v4/MultipleDataGrid.vue.d.ts +1 -1
  119. package/components/table/v4/index.d.ts +84 -46
  120. package/components/table-cells/common/Editable.common.js +29 -23
  121. package/components/table-cells/common/EditableContext.d.ts +1 -0
  122. package/components/table-cells/v4/EditableV4.vue.d.ts +5 -0
  123. package/components/table-cells/v4/EditableV4.vue.js +3 -3
  124. package/components/table-cells/v4/EditableV4.vue2.js +11 -10
  125. package/components/table-cells/v4/index.d.ts +20 -1
  126. package/components/tooltip/v4/TooltipV4.vue.d.ts +10 -0
  127. package/components/tooltip/v4/TooltipV4.vue.js +3 -3
  128. package/components/tooltip/v4/TooltipV4.vue2.js +24 -21
  129. package/components/tooltip/v4/index.d.ts +39 -1
  130. package/components/typography/v4/Typography.vue.js +3 -3
  131. package/components/typography/v4/Typography.vue2.js +24 -18
  132. package/design-foundation.stories/icons/iconsData.d.ts +1 -1
  133. package/index.d.ts +1097 -204
  134. package/index.js +1 -1
  135. package/mocks/words.d.ts +1 -1
  136. package/package.json +1 -1
  137. package/style/v4/grid.css +1 -1
  138. package/style/v4/grid.css.map +1 -1
  139. package/style/v4/spacings.scss +1 -0
  140. package/testids/index.d.ts +2 -0
  141. package/testids/index.js +13 -13
  142. package/ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_76c74f58_lang.css +0 -1
  143. package/Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css +0 -1
  144. package/ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css +0 -1
  145. package/ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css +0 -1
  146. package/ChartTooltip.vue_vue_type_style_index_0_scoped_ec636f18_lang.css +0 -1
  147. package/CheckboxV4.vue_vue_type_style_index_0_scoped_8e5b619a_lang.css +0 -1
  148. package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_ba28c717_lang.css +0 -1
  149. package/ConditionalDroprown.vue_vue_type_style_index_0_scoped_546e19a9_lang.css +0 -1
  150. package/DataGrid.vue_vue_type_style_index_0_scoped_0cd8af73_lang.css +0 -1
  151. package/DataGridMenu.vue_vue_type_style_index_0_scoped_a6e4672f_lang.css +0 -1
  152. package/DialogV4.vue_vue_type_style_index_0_scoped_09c488cf_lang.css +0 -1
  153. package/DropdownV4.vue_vue_type_style_index_0_scoped_f88a132e_lang.css +0 -1
  154. package/EditableV4.vue_vue_type_style_index_0_scoped_e0c047b4_lang.css +0 -1
  155. package/EmptyStateV4.vue_vue_type_style_index_0_scoped_24001caa_lang.css +0 -1
  156. package/FiltersPanelV4.vue_vue_type_style_index_0_scoped_39061862_lang.css +0 -1
  157. package/FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css +0 -1
  158. package/IconFlag.vue_vue_type_style_index_0_scoped_7b09cc85_lang.css +0 -1
  159. package/OptionV4.vue_vue_type_style_index_0_scoped_df830bf5_lang.css +0 -1
  160. package/PopoverV4.vue_vue_type_style_index_0_scoped_43b5cba4_lang.css +0 -1
  161. package/SnackbarV4.vue_vue_type_style_index_0_scoped_49c5ccea_lang.css +0 -1
  162. package/SortableItem.vue_vue_type_style_index_0_scoped_9dd4d372_lang.css +0 -1
  163. package/SortableItemLabel.vue_vue_type_style_index_0_scoped_1386ae20_lang.css +0 -1
  164. package/SortableList.vue_vue_type_style_index_0_scoped_e9cd63b8_lang.css +0 -1
  165. package/TextField.vue_vue_type_style_index_0_scoped_4d9bf5b2_lang.css +0 -1
  166. package/TooltipV4.vue_vue_type_style_index_0_scoped_fcdb9d02_lang.css +0 -1
  167. package/TreeDropdown.vue_vue_type_style_index_0_scoped_bdfb0aef_lang.css +0 -1
  168. package/Typography.vue_vue_type_style_index_0_scoped_992962bc_lang.css +0 -1
  169. package/components/dropdown/v4/ConditionalDroprown.vue.js +0 -7
  170. package/components/dropdown/v4/ConditionalDroprown.vue2.js +0 -157
@@ -1,9 +1,10 @@
1
- import "../../../ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_76c74f58_lang.css"; import { defineComponent as l, openBlock as o, createBlock as i, unref as d, normalizeClass as r, withCtx as s, renderSlot as c, createTextVNode as u, toDisplayString as f } from "vue";
2
- import m from "../../button/v4/ButtonV4.vue.js";
1
+ import "../../../ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_604dfc6f_lang.css"; import { defineComponent as c, openBlock as s, createBlock as u, unref as o, normalizeClass as m, withCtx as n, renderSlot as f, createElementVNode as p, normalizeStyle as y, createVNode as h, createTextVNode as b, toDisplayString as x } from "vue";
2
+ import T from "../../button/v4/ButtonV4.vue.js";
3
3
  import "../../button/v4/IconButtonV4.vue.js";
4
4
  import "../../button/v4/ButtonGroup.vue.js";
5
5
  import "../../button/v4/ToggleButtonGroupAB.vue.js";
6
- const p = /* @__PURE__ */ l({
6
+ import B from "../../typography/v4/Typography.vue.js";
7
+ const W = /* @__PURE__ */ c({
7
8
  __name: "ButtonDropdownTrigger",
8
9
  props: {
9
10
  label: null,
@@ -14,26 +15,47 @@ const p = /* @__PURE__ */ l({
14
15
  startIconName: { default: null },
15
16
  startIconType: { default: "regular" },
16
17
  hideEndIcon: { type: Boolean, default: !1 },
17
- testId: { default: "" }
18
+ testId: { default: "" },
19
+ maxWidth: { default: 0 },
20
+ withTooltip: { type: Boolean, default: !0 },
21
+ tooltipPlacement: { default: "top" }
18
22
  },
19
23
  emits: ["click"],
20
- setup(e, { emit: a }) {
21
- return (n, t) => (o(), i(d(m), {
22
- class: r(["button-trigger", { open: e.open }]),
23
- disabled: e.disabled,
24
+ setup(t, { emit: i }) {
25
+ const e = t, a = 40, d = e.maxWidth > a ? { maxWidth: `${e.maxWidth - a}px` } : {};
26
+ return (r, l) => (s(), u(o(T), {
27
+ class: m(["button-trigger", { open: t.open }]),
28
+ disabled: t.disabled,
24
29
  color: "default",
25
- variant: e.variant,
26
- size: e.size,
27
- "start-icon-name": e.startIconName,
28
- "start-icon-type": e.startIconType,
29
- "end-icon-name": e.hideEndIcon ? null : "caret-down",
30
- content: e.label,
31
- "test-id": e.testId,
32
- onClick: t[0] || (t[0] = (b) => a("click"))
30
+ variant: t.variant,
31
+ size: t.size,
32
+ "start-icon-name": t.startIconName,
33
+ "start-icon-type": t.startIconType,
34
+ "end-icon-name": t.hideEndIcon ? null : "caret-down",
35
+ content: t.label,
36
+ "test-id": t.testId,
37
+ onClick: l[0] || (l[0] = (g) => i("click"))
33
38
  }, {
34
- default: s(() => [
35
- c(n.$slots, "default", {}, () => [
36
- u(f(e.label), 1)
39
+ default: n(() => [
40
+ f(r.$slots, "default", {}, () => [
41
+ p("div", {
42
+ style: y(o(d)),
43
+ class: "label-wrapper"
44
+ }, [
45
+ h(B, {
46
+ variant: "button",
47
+ class: "label-text",
48
+ "is-truncated": "",
49
+ "with-tooltip": t.withTooltip,
50
+ "tooltip-text": t.label,
51
+ "tooltip-placement": t.tooltipPlacement
52
+ }, {
53
+ default: n(() => [
54
+ b(x(t.label), 1)
55
+ ]),
56
+ _: 1
57
+ }, 8, ["with-tooltip", "tooltip-text", "tooltip-placement"])
58
+ ], 4)
37
59
  ], !0)
38
60
  ]),
39
61
  _: 3
@@ -41,5 +63,5 @@ const p = /* @__PURE__ */ l({
41
63
  }
42
64
  });
43
65
  export {
44
- p as default
66
+ W as default
45
67
  };
@@ -10,6 +10,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
10
10
  selectedOption: unknown | unknown[];
11
11
  displayValue: (option: unknown) => string;
12
12
  multi: boolean;
13
+ cancelAllSelectedDisplay?: boolean;
14
+ displayValueInQuotes?: boolean;
13
15
  }>, {
14
16
  label: string;
15
17
  open: boolean;
@@ -18,6 +20,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
18
20
  feedbackVariant: string;
19
21
  displayedValue: string;
20
22
  allSelected: boolean;
23
+ cancelAllSelectedDisplay: boolean;
24
+ displayValueInQuotes: boolean;
21
25
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
22
26
  clear: () => void;
23
27
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -32,6 +36,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
32
36
  selectedOption: unknown | unknown[];
33
37
  displayValue: (option: unknown) => string;
34
38
  multi: boolean;
39
+ cancelAllSelectedDisplay?: boolean;
40
+ displayValueInQuotes?: boolean;
35
41
  }>, {
36
42
  label: string;
37
43
  open: boolean;
@@ -40,6 +46,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
40
46
  feedbackVariant: string;
41
47
  displayedValue: string;
42
48
  allSelected: boolean;
49
+ cancelAllSelectedDisplay: boolean;
50
+ displayValueInQuotes: boolean;
43
51
  }>>> & {
44
52
  onClear?: () => any;
45
53
  }, {
@@ -50,6 +58,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
50
58
  feedbackVariant: string;
51
59
  allSelected: boolean;
52
60
  displayedValue: any;
61
+ cancelAllSelectedDisplay: boolean;
62
+ displayValueInQuotes: boolean;
53
63
  }>;
54
64
  export default _default;
55
65
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -1,7 +1,7 @@
1
1
  import o from "./ChipDropdownTrigger.vue2.js";
2
2
  /* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_ba28c717_lang.css"; //*');
4
- const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-ba28c717"]]);
3
+ // import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_e43ac1c9_lang.css"; //*');
4
+ const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e43ac1c9"]]);
5
5
  export {
6
- s as default
6
+ c as default
7
7
  };
@@ -1,13 +1,13 @@
1
- import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_ba28c717_lang.css"; import { defineComponent as w, ref as d, computed as p, watch as _, openBlock as k, createBlock as B, unref as t, withCtx as T, createElementVNode as r, mergeProps as u, createVNode as f, createTextVNode as A, toDisplayString as N, withDirectives as g, vShow as O, withModifiers as I } from "vue";
2
- import x from "../../icon/v4/IconV4.vue.js";
1
+ import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_e43ac1c9_lang.css"; import { defineComponent as k, ref as f, computed as m, watch as D, openBlock as I, createBlock as S, unref as t, withCtx as y, createElementVNode as c, mergeProps as p, createVNode as d, createTextVNode as V, toDisplayString as v, withDirectives as x, vShow as _, withModifiers as $ } from "vue";
2
+ import b from "../../icon/v4/IconV4.vue.js";
3
3
  import "../../icon/v4/IconFlag.vue.js";
4
- import $ from "../../typography/v4/Typography.vue.js";
5
- import { DropdownTestIdModifiers as n } from "../../../testids/index.js";
6
- import { useTestIdAttrs as D } from "../../../utils/testIds.js";
7
- import { isElementTruncated as S } from "../../../utils/text.js";
8
- import { promiseTimeout as E } from "@vueuse/core";
9
- import R from "../../tooltip/v4/TooltipV4.vue.js";
10
- const U = { class: "chip-trigger--icon" }, z = ["onClick"], K = /* @__PURE__ */ w({
4
+ import C from "../../typography/v4/Typography.vue.js";
5
+ import { DropdownTestIdModifiers as i } from "../../../testids/index.js";
6
+ import { useTestIdAttrs as E } from "../../../utils/testIds.js";
7
+ import { isElementTruncated as U } from "../../../utils/text.js";
8
+ import { promiseTimeout as F } from "@vueuse/core";
9
+ import L from "../../tooltip/v4/TooltipV4.vue.js";
10
+ const R = { class: "chip-trigger--icon" }, z = ["onClick"], K = /* @__PURE__ */ k({
11
11
  __name: "ChipDropdownTrigger",
12
12
  props: {
13
13
  label: { default: "Status" },
@@ -20,70 +20,89 @@ const U = { class: "chip-trigger--icon" }, z = ["onClick"], K = /* @__PURE__ */
20
20
  options: null,
21
21
  selectedOption: null,
22
22
  displayValue: null,
23
- multi: { type: Boolean }
23
+ multi: { type: Boolean },
24
+ cancelAllSelectedDisplay: { type: Boolean, default: !1 },
25
+ displayValueInQuotes: { type: Boolean, default: !1 }
24
26
  },
25
27
  emits: ["clear"],
26
- setup(s, { emit: V }) {
27
- const e = s, v = () => {
28
- V("clear");
29
- }, o = d(null), i = d(!0), m = d(!1), h = (l) => {
28
+ setup(u, { emit: A }) {
29
+ const e = u, B = () => {
30
+ A("clear");
31
+ }, o = f(null), r = f(!0), T = f(!1), h = (l) => {
30
32
  let a = l;
31
- return Array.isArray(l) && (l.length > 1 ? a = `${l[0]}, +${l[1]}` : a = l[0] ? `${l[0]}` : ""), i.value = !!a, a ? `${e.label}: ${a}` : e.label;
32
- }, C = p(
33
+ Array.isArray(l) && (l.length > 1 ? a = `${l[0]}` : a = l[0] ? `${l[0]}` : ""), r.value = !!a;
34
+ let O = a;
35
+ return e.displayValueInQuotes && (O = `"${a}"`), a ? `${e.label}: ${O}` : e.label;
36
+ }, g = (l) => {
37
+ let a = "";
38
+ return Array.isArray(l) && l.length > 1 && (a = `, +${l[1]}`), a;
39
+ }, N = m(
33
40
  () => e.feedbackVariant ? `state-${e.feedbackVariant}` : ""
34
- ), c = D(e.testId, n), y = p(() => {
41
+ ), s = E(e.testId, i), n = m(() => {
35
42
  if (!e.multi)
36
43
  return e.selectedOption ? e.displayValue(e.selectedOption) : "";
37
44
  if (Array.isArray(e.selectedOption))
38
- return e.selectedOption.length ? e.allSelected ? ["All"] : e.selectedOption.length == 1 && e.displayValue ? [e.displayValue(e.selectedOption[0])] : [
45
+ return e.selectedOption.length ? e.allSelected && !e.cancelAllSelectedDisplay ? ["All"] : e.selectedOption.length == 1 && e.displayValue ? [e.displayValue(e.selectedOption[0])] : [
39
46
  e.displayValue(e.selectedOption[0]),
40
47
  e.selectedOption.length - 1
41
48
  ] : [];
42
49
  });
43
- _([() => e.selectedOption, o], async () => {
44
- await E(100), m.value = o.value && S(o.value);
50
+ D([() => e.selectedOption, o], async () => {
51
+ await F(100), T.value = o.value && U(o.value);
45
52
  });
46
- const b = p(() => m.value ? h(y.value) : "");
47
- return (l, a) => (k(), B(t(R), {
48
- text: t(b),
49
- class: "tooltip-option"
53
+ const w = m(() => T.value ? `${h(n.value)}${g(
54
+ n.value
55
+ )}` : "");
56
+ return (l, a) => (I(), S(t(L), {
57
+ text: t(w),
58
+ class: "tooltip-option",
59
+ placement: "top"
50
60
  }, {
51
- default: T(() => [
52
- r("div", u({
53
- class: ["chip-trigger", [t(C), { active: i.value, disabled: s.disabled, open: s.open }]]
54
- }, t(c)[t(n).BUTTON]), [
55
- r("div", {
61
+ default: y(() => [
62
+ c("div", p({
63
+ class: ["chip-trigger", [t(N), { active: r.value, disabled: u.disabled, open: u.open }]]
64
+ }, t(s)[t(i).BUTTON]), [
65
+ c("div", {
56
66
  ref_key: "textContainerRef",
57
67
  ref: o,
58
68
  class: "chip-trigger--content"
59
69
  }, [
60
- f(t($), u({
70
+ d(t(C), p({
61
71
  class: "chip-trigger--text",
62
72
  variant: "chipLabel"
63
- }, t(c)[t(n).BUTTON_CONTENT]), {
64
- default: T(() => [
65
- A(N(h(t(y))), 1)
73
+ }, t(s)[t(i).BUTTON_CONTENT]), {
74
+ default: y(() => [
75
+ V(v(h(t(n))), 1)
66
76
  ]),
67
77
  _: 1
68
78
  }, 16),
69
- g(r("div", U, [
70
- f(t(x), {
79
+ d(t(C), p({
80
+ class: "chip-trigger--suffix",
81
+ variant: "chipLabel"
82
+ }, t(s)[t(i).BUTTON_CONTENT_SUFFIX]), {
83
+ default: y(() => [
84
+ V(v(g(t(n))), 1)
85
+ ]),
86
+ _: 1
87
+ }, 16),
88
+ x(c("div", R, [
89
+ d(t(b), {
71
90
  name: "caret-down",
72
91
  size: "16px"
73
92
  })
74
93
  ], 512), [
75
- [O, !i.value]
94
+ [_, !r.value]
76
95
  ]),
77
- g(r("div", u({ class: "x-circle-wrapper" }, t(c)[t(n).BUTTON_CLEAR], {
78
- onClick: I(v, ["stop"])
96
+ x(c("div", p({ class: "x-circle-wrapper" }, t(s)[t(i).BUTTON_CLEAR], {
97
+ onClick: $(B, ["stop"])
79
98
  }), [
80
- f(t(x), {
99
+ d(t(b), {
81
100
  name: "x-circle",
82
101
  size: "16px",
83
102
  type: "fill"
84
103
  })
85
104
  ], 16, z), [
86
- [O, i.value]
105
+ [_, r.value]
87
106
  ])
88
107
  ], 512)
89
108
  ], 16)
@@ -1,3 +1,4 @@
1
+ import { IconTypes } from '@is-ssp/icon/v4/Icon.types';
1
2
  type SelectedCondition = {
2
3
  label: string;
3
4
  value: string;
@@ -13,15 +14,39 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
13
14
  fetchFnCallback: (q: string) => Promise<unknown[]>;
14
15
  optionNameKey: string;
15
16
  minCharsToStart?: number;
17
+ isOpen?: boolean;
18
+ searchQuery?: string;
19
+ loadMoreFn?: () => Promise<any[]>;
20
+ infiniteLoading?: boolean;
21
+ fetchDataDebounceTime?: number;
22
+ autoFocusSearch?: boolean;
23
+ groupedOptions?: boolean;
24
+ optionFlagKey?: string;
25
+ optionIconKey?: string;
26
+ optionImageKey?: string;
27
+ optionIconType?: IconTypes;
16
28
  }>, {
17
29
  label: string;
18
30
  testId: string;
19
31
  comparingKey: string;
20
32
  optionNameKey: string;
21
33
  minCharsToStart: number;
34
+ isOpen: boolean;
35
+ searchQuery: string;
36
+ loadMoreFn: any;
37
+ infiniteLoading: boolean;
38
+ fetchDataDebounceTime: number;
39
+ autoFocusSearch: boolean;
40
+ groupedOptions: boolean;
41
+ optionFlagKey: string;
42
+ optionIconKey: string;
43
+ optionImageKey: string;
44
+ optionIconType: any;
22
45
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
23
46
  "update:selectedCondition": (value: SelectedCondition) => void;
24
47
  "update:appliedSelections": (value: unknown) => void;
48
+ clear: () => void;
49
+ closed: () => void;
25
50
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
26
51
  selectedCondition: SelectedCondition | null;
27
52
  appliedSelections: unknown | unknown[];
@@ -32,21 +57,56 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
32
57
  fetchFnCallback: (q: string) => Promise<unknown[]>;
33
58
  optionNameKey: string;
34
59
  minCharsToStart?: number;
60
+ isOpen?: boolean;
61
+ searchQuery?: string;
62
+ loadMoreFn?: () => Promise<any[]>;
63
+ infiniteLoading?: boolean;
64
+ fetchDataDebounceTime?: number;
65
+ autoFocusSearch?: boolean;
66
+ groupedOptions?: boolean;
67
+ optionFlagKey?: string;
68
+ optionIconKey?: string;
69
+ optionImageKey?: string;
70
+ optionIconType?: IconTypes;
35
71
  }>, {
36
72
  label: string;
37
73
  testId: string;
38
74
  comparingKey: string;
39
75
  optionNameKey: string;
40
76
  minCharsToStart: number;
77
+ isOpen: boolean;
78
+ searchQuery: string;
79
+ loadMoreFn: any;
80
+ infiniteLoading: boolean;
81
+ fetchDataDebounceTime: number;
82
+ autoFocusSearch: boolean;
83
+ groupedOptions: boolean;
84
+ optionFlagKey: string;
85
+ optionIconKey: string;
86
+ optionImageKey: string;
87
+ optionIconType: any;
41
88
  }>>> & {
89
+ onClear?: () => any;
90
+ onClosed?: () => any;
42
91
  "onUpdate:selectedCondition"?: (value: SelectedCondition) => any;
43
92
  "onUpdate:appliedSelections"?: (value: unknown) => any;
44
93
  }, {
45
94
  label: string;
46
95
  testId: string;
96
+ isOpen: boolean;
97
+ infiniteLoading: boolean;
47
98
  optionNameKey: string;
99
+ optionIconKey: string;
100
+ optionImageKey: string;
101
+ optionIconType: IconTypes;
102
+ optionFlagKey: string;
103
+ groupedOptions: boolean;
48
104
  comparingKey: string;
49
105
  minCharsToStart: number;
106
+ searchQuery: string;
107
+ loadMoreFn: () => Promise<any[]>;
108
+ fetchDataDebounceTime: number;
109
+ autoFocusSearch: boolean;
50
110
  }>;
51
111
  export default _default;
52
112
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -0,0 +1,7 @@
1
+ import o from "./ConditionalDropdown.vue2.js";
2
+ /* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_2ba23450_lang.css"; //*');
4
+ const n = /* @__PURE__ */ _(o, [["__scopeId", "data-v-2ba23450"]]);
5
+ export {
6
+ n as default
7
+ };
@@ -0,0 +1,239 @@
1
+ import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_2ba23450_lang.css"; import { defineComponent as j, computed as k, ref as s, watch as O, onMounted as W, openBlock as D, createBlock as q, unref as d, withCtx as f, createVNode as g, mergeProps as G, createElementVNode as H, isRef as J, normalizeProps as X, guardReactiveProps as Y, createElementBlock as Z, createTextVNode as _, toDisplayString as ee, createCommentVNode as le } from "vue";
2
+ import N from "./DropdownV4.vue.js";
3
+ import "./DefaultDropdownTrigger.vue.js";
4
+ import "./IconButtonDropdownTrigger.vue.js";
5
+ import oe from "./ChipDropdownTrigger.vue.js";
6
+ import "./AppDropdownTrigger.vue.js";
7
+ import ae from "./ButtonDropdownTrigger.vue.js";
8
+ import "./ButtonFilterDropdownTrigger.vue.js";
9
+ import "./TreeDropdown.vue.js";
10
+ import "./OptionV4.vue.js";
11
+ import "./ConditionalDropdown.vue.js";
12
+ import te from "../../search/v4/SearchV4.vue.js";
13
+ import ne from "../../typography/v4/Typography.vue.js";
14
+ import { useDebounceFn as ie } from "@vueuse/core";
15
+ const ue = { class: "conditional-container" }, re = {
16
+ key: 0,
17
+ class: "custom-list-area"
18
+ }, we = /* @__PURE__ */ j({
19
+ __name: "ConditionalDropdown",
20
+ props: {
21
+ selectedCondition: null,
22
+ appliedSelections: null,
23
+ conditionalOptions: null,
24
+ label: { default: "" },
25
+ testId: { default: "" },
26
+ comparingKey: { default: "id" },
27
+ fetchFnCallback: null,
28
+ optionNameKey: { default: "name" },
29
+ minCharsToStart: { default: 3 },
30
+ isOpen: { type: Boolean, default: !1 },
31
+ searchQuery: { default: "" },
32
+ loadMoreFn: { type: Function, default: null },
33
+ infiniteLoading: { type: Boolean, default: !1 },
34
+ fetchDataDebounceTime: { default: 400 },
35
+ autoFocusSearch: { type: Boolean, default: !0 },
36
+ groupedOptions: { type: Boolean, default: !1 },
37
+ optionFlagKey: { default: "" },
38
+ optionIconKey: { default: "" },
39
+ optionImageKey: { default: "" },
40
+ optionIconType: { default: null }
41
+ },
42
+ emits: ["update:selectedCondition", "update:appliedSelections", "clear", "closed"],
43
+ setup(r, { emit: h }) {
44
+ const e = r, S = k({
45
+ get: () => e.appliedSelections,
46
+ set: (l) => {
47
+ h("update:appliedSelections", l);
48
+ }
49
+ }), n = k({
50
+ get: () => e.selectedCondition || e.conditionalOptions[0],
51
+ set: (l) => {
52
+ h("update:selectedCondition", l);
53
+ }
54
+ }), w = s(null), c = s(!0), a = s([]), u = s(
55
+ Array.isArray(e.appliedSelections) ? e.appliedSelections : [e.appliedSelections]
56
+ ), K = s(!0), p = s(!1), b = s(!1), i = s(e.searchQuery), L = s(""), m = s(e.label), T = s([]), F = k(() => (!i.value || i.value?.length < e.minCharsToStart) && !a.value.length ? `Enter at least ${e.minCharsToStart} keywords to begin` : "No results found"), U = k(() => {
57
+ const l = c.value ? 4 : 4.5, t = a.value.length > 4 ? a.value.length : l;
58
+ if (e.groupedOptions) {
59
+ let o = 0;
60
+ return a.value.forEach((y) => {
61
+ y.options && (o = o + y.options.length);
62
+ }), o > 4 ? o : l;
63
+ }
64
+ return t > l ? t : l;
65
+ }), B = (l, t) => {
66
+ if (e.infiniteLoading && n.value.multi && Array.isArray(u.value) && u.value.length && l && t.length) {
67
+ const o = [], y = u.value.filter(
68
+ (v) => v[e.optionNameKey].includes(l)
69
+ );
70
+ return t.forEach((v) => {
71
+ y.find(
72
+ ($) => $[e.comparingKey] === v[e.comparingKey]
73
+ ) && o.push(v[e.comparingKey]);
74
+ }), y.filter(
75
+ (v) => !o.includes(v[e.comparingKey])
76
+ );
77
+ }
78
+ return [];
79
+ }, I = async (l) => {
80
+ try {
81
+ p.value = !0;
82
+ const t = await e.fetchFnCallback(l), o = B(
83
+ l,
84
+ t
85
+ );
86
+ a.value = [...o, ...t], p.value = !1;
87
+ } catch (t) {
88
+ p.value = !1, console.error("Error fetching data:", t);
89
+ }
90
+ }, M = async () => {
91
+ if (e.infiniteLoading)
92
+ try {
93
+ b.value = !0;
94
+ const l = await e.loadMoreFn();
95
+ b.value = !1, Array.isArray(l) && (a.value = [...a.value, ...l]);
96
+ } catch (l) {
97
+ b.value = !1, console.error("Error fetching data:", l);
98
+ }
99
+ }, E = ie(
100
+ I,
101
+ e.fetchDataDebounceTime
102
+ ), C = (l) => {
103
+ l.length >= e.minCharsToStart ? (E(l), w.value?.scrollTo(0)) : e.infiniteLoading && n.value.multi ? a.value = T.value || [] : a.value = [];
104
+ }, V = () => {
105
+ i.value && a.value.length && !p.value && !n.value.multi ? a.value[0].conditionalOptions ? a.value[0] = {
106
+ name: i.value,
107
+ conditionalOptions: !0,
108
+ conditionalName: n.value.label,
109
+ [e.comparingKey]: i.value
110
+ } : a.value = [
111
+ {
112
+ name: i.value,
113
+ conditionalOptions: !0,
114
+ conditionalName: n.value.label,
115
+ [e.comparingKey]: i.value
116
+ },
117
+ ...a.value
118
+ ] : a.value.length && a.value[0].conditionalOptions && a.value.shift();
119
+ }, A = () => {
120
+ c.value && u.value.length === 0 ? m.value = e.label : m.value = `${e.label} ${n.value.label.toLowerCase()}`;
121
+ };
122
+ O(i, () => {
123
+ C(i.value);
124
+ }), O([n, a], () => {
125
+ V();
126
+ });
127
+ const x = () => {
128
+ c.value && u.value.length === 0 ? (n.value = null, S.value = [], n.value = null) : (L.value = i.value, S.value = c.value ? [...u.value] : { ...u.value }, K.value = c.value), A();
129
+ };
130
+ O(n, (l, t) => {
131
+ n.value.multi ? (p.value = !0, !t.multi && l.multi && Array.isArray(e.appliedSelections) && (u.value = e.appliedSelections), setTimeout(() => {
132
+ p.value = !1, c.value = !0;
133
+ }, 100)) : setTimeout(() => {
134
+ c.value = !1;
135
+ }, 100);
136
+ });
137
+ const P = (l) => {
138
+ T.value = l;
139
+ }, Q = () => {
140
+ u.value = [], S.value = [], n.value = null, m.value = e.label, i.value = "", h("clear");
141
+ }, R = (l) => {
142
+ l && n.value.multi && e.infiniteLoading && u.value && (a.value = u.value, i.value && C(i.value));
143
+ };
144
+ W(() => {
145
+ (e.searchQuery || !e.infiniteLoading) && C(e.searchQuery), A();
146
+ });
147
+ const z = () => {
148
+ h("closed");
149
+ };
150
+ return (l, t) => (D(), q(d(N), {
151
+ ref_key: "dropdownRef",
152
+ ref: w,
153
+ selected: u.value,
154
+ "onUpdate:selected": t[2] || (t[2] = (o) => u.value = o),
155
+ "predefined-trigger": "chip",
156
+ "display-value": (o) => o?.[r.optionNameKey],
157
+ multi: c.value,
158
+ options: a.value,
159
+ placeholder: m.value,
160
+ "search-placeholder": "Search",
161
+ "option-name-key": r.optionNameKey,
162
+ "with-conditions": "",
163
+ "inline-search": "",
164
+ "custom-number-of-displayed-options": d(U),
165
+ "options-list-width": "330px",
166
+ loading: p.value,
167
+ "load-more-loading": b.value,
168
+ "comparing-key": r.comparingKey,
169
+ "is-open": r.isOpen,
170
+ "infinite-loading": r.infiniteLoading,
171
+ "show-select-all": !r.infiniteLoading && !i.value,
172
+ "grouped-options": r.groupedOptions,
173
+ "option-flag-key": r.optionFlagKey,
174
+ "option-image-key": r.optionImageKey,
175
+ "option-icon-key": r.optionIconKey,
176
+ "option-icon-type": r.optionIconType,
177
+ "onUpdate:isOpen": R,
178
+ onOnsearch: C,
179
+ onApply: x,
180
+ onLoadMore: M,
181
+ onUnsavedSelectionUpdate: P,
182
+ onClosed: z
183
+ }, {
184
+ "dropdown-trigger": f(({ defaultTriggerProps: o }) => [
185
+ g(d(oe), G(o, {
186
+ label: m.value,
187
+ "selected-option": d(S),
188
+ multi: K.value,
189
+ "cancel-all-selected-display": "",
190
+ "display-value-in-quotes": !Array.isArray(u.value) && u.value.conditionalOptions,
191
+ onClear: Q
192
+ }), null, 16, ["label", "selected-option", "multi", "display-value-in-quotes"])
193
+ ]),
194
+ "dropdown-conditions": f(() => [
195
+ H("div", ue, [
196
+ g(d(N), {
197
+ selected: d(n),
198
+ "onUpdate:selected": t[0] || (t[0] = (o) => J(n) ? n.value = o : null),
199
+ options: r.conditionalOptions,
200
+ "option-name-key": "label",
201
+ "display-value": (o) => o?.label,
202
+ container: ".conditional-container",
203
+ size: "small"
204
+ }, {
205
+ "dropdown-trigger": f(({ buttonTriggerProps: o }) => [
206
+ g(d(ae), X(Y(o)), null, 16)
207
+ ]),
208
+ _: 1
209
+ }, 8, ["selected", "options", "display-value"])
210
+ ])
211
+ ]),
212
+ "inline-search": f(() => [
213
+ g(d(te), {
214
+ modelValue: i.value,
215
+ "onUpdate:modelValue": t[1] || (t[1] = (o) => i.value = o),
216
+ class: "inline-search",
217
+ placeholder: "Search",
218
+ variant: "transparent",
219
+ size: "md",
220
+ "auto-focus": r.autoFocusSearch
221
+ }, null, 8, ["modelValue", "auto-focus"])
222
+ ]),
223
+ "custom-list-area": f(() => [
224
+ !a.value.length && !p.value ? (D(), Z("div", re, [
225
+ g(ne, { variant: "body1" }, {
226
+ default: f(() => [
227
+ _(ee(d(F)), 1)
228
+ ]),
229
+ _: 1
230
+ })
231
+ ])) : le("", !0)
232
+ ]),
233
+ _: 1
234
+ }, 8, ["selected", "display-value", "multi", "options", "placeholder", "option-name-key", "custom-number-of-displayed-options", "loading", "load-more-loading", "comparing-key", "is-open", "infinite-loading", "show-select-all", "grouped-options", "option-flag-key", "option-image-key", "option-icon-key", "option-icon-type"]));
235
+ }
236
+ });
237
+ export {
238
+ we as default
239
+ };