@ironsource/shared-ui 2.2.0-rc.22 → 2.2.0-rc.23

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.
@@ -0,0 +1 @@
1
+ @import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-cbb21c6a],.font-chart-2[data-v-cbb21c6a],.font-chart-1[data-v-cbb21c6a]{font-family:Inter,sans-serif;font-weight:700}.chip-input-sizer[data-v-cbb21c6a],.chip-input[data-v-cbb21c6a],.font-chip-label[data-v-cbb21c6a],.font-table-label[data-v-cbb21c6a],.font-button[data-v-cbb21c6a],.font-heading-6[data-v-cbb21c6a],.font-heading-5[data-v-cbb21c6a],.font-heading-4[data-v-cbb21c6a],.font-heading-3[data-v-cbb21c6a],.font-heading-2[data-v-cbb21c6a],.font-heading-1[data-v-cbb21c6a],.font-title[data-v-cbb21c6a]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-cbb21c6a],.font-input-label[data-v-cbb21c6a],.font-overline[data-v-cbb21c6a],.font-subtitle-2[data-v-cbb21c6a],.font-subtitle-1[data-v-cbb21c6a]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-cbb21c6a],.font-body-2[data-v-cbb21c6a],.font-body-1[data-v-cbb21c6a]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-cbb21c6a]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-cbb21c6a]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-cbb21c6a]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-cbb21c6a]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-cbb21c6a]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-cbb21c6a]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-cbb21c6a]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-cbb21c6a]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-cbb21c6a]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-cbb21c6a]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-cbb21c6a]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-cbb21c6a]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-cbb21c6a]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-cbb21c6a]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-cbb21c6a]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-cbb21c6a]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-cbb21c6a]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-cbb21c6a]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-cbb21c6a],.font-tab-label2[data-v-cbb21c6a]{font-size:.875rem;line-height:1rem}.chip-input-sizer[data-v-cbb21c6a],.chip-input[data-v-cbb21c6a],.font-chip-label[data-v-cbb21c6a]{font-size:.75rem;line-height:1rem}h1[data-v-cbb21c6a],h2[data-v-cbb21c6a],h3[data-v-cbb21c6a],h4[data-v-cbb21c6a],h5[data-v-cbb21c6a],h6[data-v-cbb21c6a]{margin:0}.rounded-chip[data-v-cbb21c6a]{border-radius:100px}.tags-field-chip--editing[data-v-cbb21c6a]{outline:1px solid var(--outline-color)}.chip-content[data-v-cbb21c6a]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.chip-label[data-v-cbb21c6a]{min-width:.5rem}.chip-label--hidden[data-v-cbb21c6a]{visibility:hidden}.chip-input[data-v-cbb21c6a]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.chip-input[data-v-cbb21c6a]:focus{outline:none}.chip-input-outline[data-v-cbb21c6a]::placeholder{color:var(--action-disabled)}.clear-button[data-v-cbb21c6a]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-cbb21c6a]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-cbb21c6a]{color:var(--error-dark)}.clear-button--invalid[data-v-cbb21c6a]:hover{color:var(--error-darker)}.chip-input-sizer[data-v-cbb21c6a]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}
@@ -1,82 +1 @@
1
- import "../../../SearchInput.vue_vue_type_style_index_0_scoped_b256f8ef_lang.css"; import { defineComponent as I, useSlots as x, ref as v, onMounted as z, computed as r, watch as V, renderSlot as f, unref as t, createElementVNode as m, normalizeClass as s, openBlock as u, createElementBlock as $, createCommentVNode as i, createVNode as O, withCtx as A, createBlock as h } from "vue";
2
- import { useDropdownContext as B, Mode as b } from "../common/DropdownContext.js";
3
- import g from "../../icon/v3/Icon.vue.js";
4
- import "../../button/v3/Button.vue.js";
5
- import E from "../../button/v3/IconButton.vue.js";
6
- import "../../button/v3/ScrollButton.vue.js";
7
- const M = {
8
- key: 0,
9
- class: "prefix"
10
- }, S = ["disabled", "placeholder"], G = /* @__PURE__ */ I({
11
- __name: "SearchInput",
12
- setup(F) {
13
- const e = B("searchInput"), y = x(), l = v(null), a = v();
14
- z(() => {
15
- e.registerInput(l);
16
- });
17
- const c = (o) => {
18
- e.toggle(!0), e.search(o.target.value);
19
- }, C = r(() => !e.open.value && y.prefix && !Array.isArray(e.selectedOption.value) && e.selectedOption.value), d = r(() => e.mode === b.Multi && Array.isArray(e.selectedOption.value) && e.selectedOption.value.length ? `${e.selectedOption.value.length} selected` : e.open.value && e.selectedValue.value ? e.selectedValue.value : e.placeholder), p = r(() => e.query.value !== "" || e.selectedValue.value);
20
- V(e.open, (o) => {
21
- o && l.value.focus(), e.mode !== b.Multi && (!o || !l.value || (l.value.value = ""));
22
- });
23
- const k = r(() => p.value ? "cancel" : "search-bold"), _ = () => {
24
- e.clearSelection(), l.value.focus();
25
- };
26
- return (o, n) => f(o.$slots, "default", {
27
- inputRef: l.value,
28
- disabled: t(e).disabled,
29
- change: c,
30
- placeholder: t(d)
31
- }, () => [
32
- m("div", {
33
- class: s(["container", {
34
- "container--open": t(e).open.value,
35
- "container--disabled": t(e).disabled,
36
- [`container--${t(e).size}`]: !0,
37
- focused: a.value
38
- }])
39
- }, [
40
- t(C) ? (u(), $("div", M, [
41
- f(o.$slots, "prefix", {}, void 0, !0)
42
- ])) : i("", !0),
43
- m("input", {
44
- ref_key: "inputEl",
45
- ref: l,
46
- disabled: t(e).disabled,
47
- class: s(["input", { "input--disabled": t(e).disabled }]),
48
- placeholder: t(d),
49
- onFocusin: n[0] || (n[0] = (w) => a.value = !0),
50
- onFocusout: n[1] || (n[1] = (w) => a.value = !1),
51
- onInput: c
52
- }, null, 42, S),
53
- O(t(E), {
54
- variant: "colorized",
55
- size: "sm",
56
- theme: "secondary",
57
- class: s(["search-right-icon", { "search-right-icon-clear": t(p) }]),
58
- disabled: t(e).disabled
59
- }, {
60
- default: A(() => [
61
- t(e).open.value ? i("", !0) : (u(), h(t(g), {
62
- key: 0,
63
- "font-size": "sm",
64
- class: "angle-down",
65
- name: "angle-down"
66
- })),
67
- t(e).open.value ? (u(), h(t(g), {
68
- key: 1,
69
- "font-size": "sm",
70
- name: t(k),
71
- onClick: _
72
- }, null, 8, ["name"])) : i("", !0)
73
- ]),
74
- _: 1
75
- }, 8, ["disabled", "class"])
76
- ], 2)
77
- ], !0);
78
- }
79
- });
80
- export {
81
- G as default
82
- };
1
+ import "../../../SearchInput.vue_vue_type_style_index_0_scoped_b256f8ef_lang.css";
@@ -1,185 +1 @@
1
- import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_f86477a9_lang.css"; import { defineComponent as B, computed as y, ref as O, watch as w, nextTick as z, openBlock as a, createElementBlock as i, normalizeClass as N, createElementVNode as d, mergeProps as C, unref as t, renderSlot as f, createCommentVNode as c, createVNode as s, withCtx as m, toDisplayString as S } from "vue";
2
- import r from "../../icon/v4/IconV4.vue.js";
3
- import "../../icon/v4/IconFlag.vue.js";
4
- import D from "../../typography/v4/Typography.vue.js";
5
- import { DropdownTestIdModifiers as g } from "../../../testids/index.js";
6
- import { useTestIdAttrs as R } from "../../../utils/testIds.js";
7
- import b from "../../tooltip/v4/TooltipV4.vue.js";
8
- import { useClipboard as P } from "@vueuse/core";
9
- import { Snackbar as U } from "../../snackbar/v4/index.js";
10
- import { isElementTruncated as L } from "../../../utils/text.js";
11
- const M = { class: "app-trigger--content" }, W = {
12
- key: 0,
13
- class: "image"
14
- }, j = ["src"], q = {
15
- key: 1,
16
- class: "start-icon"
17
- }, F = { class: "label-text" }, G = { key: 0 }, H = { class: "text-content" }, J = {
18
- key: 0,
19
- class: "is-mandatory"
20
- }, Q = {
21
- key: 2,
22
- class: "end-icon"
23
- }, X = { class: "app-trigger-key--content" }, de = /* @__PURE__ */ B({
24
- __name: "AppDropdownTrigger",
25
- props: {
26
- placeholder: { default: "Select app" },
27
- selectedOption: { default: null },
28
- options: { default: null },
29
- multi: { type: Boolean, default: !1 },
30
- size: { default: "medium" },
31
- open: { type: Boolean, default: !1 },
32
- disabled: { type: Boolean, default: !1 },
33
- testId: { default: "" },
34
- valueToCopy: { default: null },
35
- label: { default: "" },
36
- mandatory: { type: Boolean, default: !1 },
37
- loading: { type: Boolean, default: !1 },
38
- singleAppSelection: { type: Boolean, default: !1 },
39
- brandIconType: { default: null },
40
- displayValue: null,
41
- optionNameKey: { default: null },
42
- optionImageKey: { default: null },
43
- optionIconKey: { default: null },
44
- optionIconType: { default: null },
45
- optionEndIconKey: { default: null },
46
- optionEndIconType: { default: null }
47
- },
48
- emits: ["click", "copyToClipboard"],
49
- setup(o, { emit: T }) {
50
- const e = o, { copy: x, copied: K } = P({}), A = y(
51
- () => e.feedbackVariant ? `state-${e.feedbackVariant}` : ""
52
- ), $ = () => {
53
- T("click");
54
- }, v = R(e.testId, g), h = "All apps selected", p = y(() => e.multi ? !Array.isArray(e.selectedOption) || !e.selectedOption?.length ? e.placeholder : e.options?.length === e.selectedOption.length ? `${h} (${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), n = y(() => {
55
- if (!e.selectedOption)
56
- return null;
57
- if (!e.multi)
58
- return e.selectedOption;
59
- if (Array.isArray(e.selectedOption))
60
- return e.selectedOption.length === 1 ? e.selectedOption[0] : null;
61
- }), E = async () => {
62
- await x(e.valueToCopy), K.value && (U({
63
- title: "Copied successfully",
64
- type: "success",
65
- duration: 2e3
66
- }), T("copyToClipboard"));
67
- }, k = O(""), u = O(null);
68
- w(
69
- [p, () => e.open],
70
- async () => {
71
- await z(), V();
72
- },
73
- {
74
- immediate: !0
75
- }
76
- );
77
- const V = () => {
78
- const l = u.value && L(u.value);
79
- k.value = l && !e.open ? p.value : "";
80
- };
81
- return (l, I) => (a(), i("div", {
82
- class: N(["app-trigger-wrapper", { "with-copy": !!o.valueToCopy }])
83
- }, [
84
- d("div", C({
85
- class: ["app-trigger", [o.size, t(A), { open: o.open, disabled: o.disabled }]],
86
- style: {
87
- paddingLeft: l.$slots.image || t(n) && o.optionImageKey ? "8px" : "12px"
88
- }
89
- }, t(v)[t(g).BUTTON_WRAPPER], {
90
- onClick: I[0] || (I[0] = (Y) => $())
91
- }), [
92
- d("div", M, [
93
- l.$slots.image || t(n) && o.optionImageKey ? (a(), i("div", W, [
94
- f(l.$slots, "image", {}, () => [
95
- o.optionImageKey ? (a(), i("img", {
96
- key: 0,
97
- src: t(n)[o.optionImageKey]
98
- }, null, 8, j)) : c("", !0)
99
- ], !0)
100
- ])) : c("", !0),
101
- l.$slots["icon-start"] || t(n) && o.optionIconKey ? (a(), i("div", q, [
102
- f(l.$slots, "icon-start", {}, () => [
103
- s(t(r), {
104
- type: o.optionIconType,
105
- name: t(n)[o.optionIconKey],
106
- size: "20px"
107
- }, null, 8, ["type", "name"])
108
- ], !0)
109
- ])) : c("", !0),
110
- s(t(D), C({ variant: "button" }, t(v)[t(g).BUTTON_CONTENT], { class: "displayed-value" }), {
111
- default: m(() => [
112
- d("div", F, [
113
- t(p) === h ? (a(), i("span", G, [
114
- s(t(r), {
115
- name: "cube",
116
- size: "20px",
117
- type: "fill"
118
- })
119
- ])) : c("", !0),
120
- d("div", H, [
121
- s(t(b), {
122
- text: k.value,
123
- placement: "bottom",
124
- class: "value-tooltip"
125
- }, {
126
- default: m(() => [
127
- d("div", {
128
- ref_key: "textContainerRef",
129
- ref: u,
130
- class: "text-content-value"
131
- }, S(t(p)), 513)
132
- ]),
133
- _: 1
134
- }, 8, ["text"]),
135
- o.mandatory && (Array.isArray(o.selectedOption) ? !o.selectedOption.length : !o.selectedOption) ? (a(), i("span", J, "*")) : c("", !0)
136
- ])
137
- ])
138
- ]),
139
- _: 1
140
- }, 16),
141
- l.$slots["icon-end"] || t(n) && o.optionEndIconKey && t(n)[o.optionEndIconKey] ? (a(), i("div", Q, [
142
- f(l.$slots, "icon-end", {}, () => [
143
- s(t(r), {
144
- type: o.optionEndIconType,
145
- name: t(n)[o.optionEndIconKey],
146
- size: "24px"
147
- }, null, 8, ["type", "name"])
148
- ], !0)
149
- ])) : c("", !0)
150
- ]),
151
- d("div", null, [
152
- s(t(r), {
153
- name: "caret-down",
154
- size: "20px",
155
- class: "app-trigger--icon"
156
- })
157
- ])
158
- ], 16),
159
- o.valueToCopy ? (a(), i("div", {
160
- key: 0,
161
- class: "app-trigger-key",
162
- onClick: E
163
- }, [
164
- s(t(b), {
165
- text: o.valueToCopy,
166
- header: "Copy app key",
167
- placement: "bottom"
168
- }, {
169
- default: m(() => [
170
- d("div", X, [
171
- s(t(r), {
172
- name: "copy",
173
- size: "20px"
174
- })
175
- ])
176
- ]),
177
- _: 1
178
- }, 8, ["text"])
179
- ])) : c("", !0)
180
- ], 2));
181
- }
182
- });
183
- export {
184
- de as default
185
- };
1
+ import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_f86477a9_lang.css";
@@ -1,70 +1 @@
1
- import "../../../ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_adb49e50_lang.css"; import { defineComponent as s, openBlock as u, createBlock as m, unref as i, normalizeClass as f, withCtx as e, renderSlot as d, createElementVNode as p, normalizeStyle as y, createVNode as b, createTextVNode as h, toDisplayString as x } from "vue";
2
- import T from "../../button/v4/ButtonV4.vue.js";
3
- import "../../button/v4/IconButtonV4.vue.js";
4
- import "../../button/v4/ButtonGroup.vue.js";
5
- import "../../button/v4/ToggleButtonGroupAB.vue.js";
6
- import B from "../../typography/v4/Typography.vue.js";
7
- const W = /* @__PURE__ */ s({
8
- __name: "ButtonDropdownTrigger",
9
- props: {
10
- label: null,
11
- variant: { default: "outlined" },
12
- size: { default: "medium" },
13
- open: { type: Boolean, default: !1 },
14
- disabled: { type: Boolean, default: !1 },
15
- startIconName: { default: null },
16
- startIconType: { default: "regular" },
17
- hideEndIcon: { type: Boolean, default: !1 },
18
- testId: { default: "" },
19
- maxWidth: { default: 0 },
20
- withTooltip: { type: Boolean, default: !0 },
21
- tooltipPlacement: { default: "top" }
22
- },
23
- emits: ["click"],
24
- setup(t, { emit: r }) {
25
- const a = t, l = 40, c = a.maxWidth > l ? { maxWidth: `${a.maxWidth - l}px` } : {};
26
- return (o, n) => (u(), m(i(T), {
27
- class: f(["button-trigger", { open: t.open }]),
28
- disabled: t.disabled,
29
- color: "default",
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: n[0] || (n[0] = (g) => r("click"))
38
- }, {
39
- "after-label": e(() => [
40
- d(o.$slots, "after-label", {}, void 0, !0)
41
- ]),
42
- default: e(() => [
43
- d(o.$slots, "default", {}, () => [
44
- p("div", {
45
- style: y(i(c)),
46
- class: "label-wrapper"
47
- }, [
48
- b(B, {
49
- variant: "button",
50
- class: "label-text",
51
- "is-truncated": "",
52
- "with-tooltip": t.withTooltip,
53
- "tooltip-text": t.label,
54
- "tooltip-placement": t.tooltipPlacement
55
- }, {
56
- default: e(() => [
57
- h(x(t.label), 1)
58
- ]),
59
- _: 1
60
- }, 8, ["with-tooltip", "tooltip-text", "tooltip-placement"])
61
- ], 4)
62
- ], !0)
63
- ]),
64
- _: 3
65
- }, 8, ["class", "disabled", "variant", "size", "start-icon-name", "start-icon-type", "end-icon-name", "content", "test-id"]));
66
- }
67
- });
68
- export {
69
- W as default
70
- };
1
+ import "../../../ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_adb49e50_lang.css";
@@ -1,54 +1 @@
1
- import "../../../ButtonFilterDropdownTrigger.vue_vue_type_style_index_0_scoped_0198fee8_lang.css"; import { defineComponent as m, openBlock as o, createElementBlock as u, mergeProps as l, unref as t, createBlock as d, createCommentVNode as i, createVNode as f, withCtx as p, createTextVNode as I, toDisplayString as T } from "vue";
2
- import y from "../../typography/v4/Typography.vue.js";
3
- import s from "../../icon/v4/IconV4.vue.js";
4
- import "../../icon/v4/IconFlag.vue.js";
5
- import { useTestIdAttrs as N } from "../../../utils/testIds.js";
6
- import { DropdownTestIdModifiers as a } from "../../../testids/index.js";
7
- const E = /* @__PURE__ */ m({
8
- __name: "ButtonFilterDropdownTrigger",
9
- props: {
10
- label: null,
11
- variant: { default: "outlined" },
12
- open: { type: Boolean, default: !1 },
13
- disabled: { type: Boolean, default: !1 },
14
- startIconName: { default: null },
15
- startIconType: { default: "regular" },
16
- hideEndIcon: { type: Boolean, default: !1 },
17
- testId: { default: "" }
18
- },
19
- emits: ["click"],
20
- setup(e, { emit: c }) {
21
- const n = N(e.testId, a);
22
- return (g, r) => (o(), u("div", l({
23
- class: ["button-filter-dropdown-trigger", [e.variant, { disabled: e.disabled, open: e.open }]]
24
- }, t(n)[t(a).BUTTON], {
25
- onClick: r[0] || (r[0] = (k) => c("click"))
26
- }), [
27
- e.startIconName ? (o(), d(t(s), {
28
- key: 0,
29
- name: e.startIconName,
30
- type: e.startIconType,
31
- size: "16px",
32
- class: "start-icon"
33
- }, null, 8, ["name", "type"])) : i("", !0),
34
- f(t(y), l({
35
- variant: "chipLabel",
36
- class: "content"
37
- }, t(n)[t(a).BUTTON_CONTENT]), {
38
- default: p(() => [
39
- I(T(e.label), 1)
40
- ]),
41
- _: 1
42
- }, 16),
43
- e.hideEndIcon ? i("", !0) : (o(), d(t(s), {
44
- key: 1,
45
- name: "caret-down",
46
- size: "16px",
47
- class: "end-icon"
48
- }))
49
- ], 16));
50
- }
51
- });
52
- export {
53
- E as default
54
- };
1
+ import "../../../ButtonFilterDropdownTrigger.vue_vue_type_style_index_0_scoped_0198fee8_lang.css";
@@ -1,126 +1 @@
1
- import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_38354f10_lang.css"; import { defineComponent as k, ref as m, computed as y, watch as S, openBlock as $, createBlock as D, unref as t, withCtx as h, createElementVNode as p, mergeProps as d, createVNode as u, createTextVNode as O, toDisplayString as C, withDirectives as b, vShow as x, withModifiers as E } from "vue";
2
- import v from "../../icon/v4/IconV4.vue.js";
3
- import "../../icon/v4/IconFlag.vue.js";
4
- import _ from "../../typography/v4/Typography.vue.js";
5
- import { DropdownTestIdModifiers as i } from "../../../testids/index.js";
6
- import { useTestIdAttrs as U } from "../../../utils/testIds.js";
7
- import { isElementTruncated as F } from "../../../utils/text.js";
8
- import { promiseTimeout as L } from "@vueuse/core";
9
- import R from "../../tooltip/v4/TooltipV4.vue.js";
10
- const z = { class: "chip-trigger--icon" }, M = ["onClick"], W = /* @__PURE__ */ k({
11
- __name: "ChipDropdownTrigger",
12
- props: {
13
- label: { default: "Status" },
14
- open: { type: Boolean, default: !1 },
15
- testId: { default: "" },
16
- disabled: { type: Boolean, default: !1 },
17
- feedbackVariant: { default: "" },
18
- displayedValue: { default: "" },
19
- allSelected: { type: Boolean, default: !1 },
20
- options: null,
21
- selectedOption: null,
22
- displayValue: null,
23
- multi: { type: Boolean },
24
- cancelAllSelectedDisplay: { type: Boolean, default: !1 },
25
- displayValueInQuotes: { type: Boolean, default: !1 },
26
- shownValuesCount: { default: 1 }
27
- },
28
- emits: ["clear"],
29
- setup(f, { emit: w }) {
30
- const e = f, A = () => {
31
- w("clear");
32
- }, o = m(null), r = m(!0), T = m(!1), g = (l) => {
33
- let a = l;
34
- Array.isArray(l) && (l.length > 1 ? a = `${l.filter((I) => typeof I == "string").join(", ")}` : a = l[0] ? `${l[0]}` : ""), r.value = !!a;
35
- let c = a;
36
- return e.displayValueInQuotes && (c = `"${a}"`), a ? `${e.label}: ${c}` : e.label;
37
- }, V = (l) => {
38
- if (Array.isArray(l) && l.length > 1) {
39
- const a = l[l.length - 1];
40
- if (typeof a == "number" && a > 0)
41
- return `, +${a}`;
42
- }
43
- return "";
44
- }, B = y(
45
- () => e.feedbackVariant ? `state-${e.feedbackVariant}` : ""
46
- ), n = U(e.testId, i), s = y(() => {
47
- if (!e.multi)
48
- return e.selectedOption ? e.displayValue(e.selectedOption) : "";
49
- if (!Array.isArray(e.selectedOption))
50
- return;
51
- if (!e.selectedOption.length)
52
- return [];
53
- if (e.allSelected && !e.cancelAllSelectedDisplay)
54
- return ["All"];
55
- if (e.selectedOption.length === 1 && e.displayValue)
56
- return [e.displayValue(e.selectedOption[0])];
57
- const l = e.selectedOption.slice(0, e.shownValuesCount).map((c) => e.displayValue(c)), a = e.selectedOption.length - l.length;
58
- return [...l, a];
59
- });
60
- S([() => e.selectedOption, o], async () => {
61
- await L(100), T.value = o.value && F(o.value);
62
- });
63
- const N = y(() => T.value ? `${g(s.value)}${V(
64
- s.value
65
- )}` : "");
66
- return (l, a) => ($(), D(t(R), {
67
- text: t(N),
68
- class: "tooltip-option",
69
- placement: "top"
70
- }, {
71
- default: h(() => [
72
- p("div", d({
73
- class: ["chip-trigger", [t(B), { active: r.value, disabled: f.disabled, open: f.open }]]
74
- }, t(n)[t(i).BUTTON]), [
75
- p("div", {
76
- ref_key: "textContainerRef",
77
- ref: o,
78
- class: "chip-trigger--content"
79
- }, [
80
- u(t(_), d({
81
- class: "chip-trigger--text",
82
- variant: "chipLabel"
83
- }, t(n)[t(i).BUTTON_CONTENT]), {
84
- default: h(() => [
85
- O(C(g(t(s))), 1)
86
- ]),
87
- _: 1
88
- }, 16),
89
- u(t(_), d({
90
- class: "chip-trigger--suffix",
91
- variant: "chipLabel"
92
- }, t(n)[t(i).BUTTON_CONTENT_SUFFIX]), {
93
- default: h(() => [
94
- O(C(V(t(s))), 1)
95
- ]),
96
- _: 1
97
- }, 16),
98
- b(p("div", z, [
99
- u(t(v), {
100
- name: "caret-down",
101
- size: "16px"
102
- })
103
- ], 512), [
104
- [x, !r.value]
105
- ]),
106
- b(p("div", d({ class: "x-circle-wrapper" }, t(n)[t(i).BUTTON_CLEAR], {
107
- onClick: E(A, ["stop"])
108
- }), [
109
- u(t(v), {
110
- name: "x-circle",
111
- size: "16px",
112
- type: "fill"
113
- })
114
- ], 16, M), [
115
- [x, r.value]
116
- ])
117
- ], 512)
118
- ], 16)
119
- ]),
120
- _: 1
121
- }, 8, ["text"]));
122
- }
123
- });
124
- export {
125
- W as default
126
- };
1
+ import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_38354f10_lang.css";