@ironsource/shared-ui 2.2.0-rc.40 → 2.2.0-rc.42

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 (11) hide show
  1. package/OptionV4.vue_vue_type_style_index_0_scoped_771e1980_lang.css +1 -0
  2. package/Tag.vue_vue_type_style_index_0_scoped_b0662035_lang.css +1 -0
  3. package/components/dropdown/v4/OptionV4.vue.js +3 -3
  4. package/components/dropdown/v4/OptionV4.vue2.js +13 -12
  5. package/components/tag/Tag.vue.d.ts +5 -0
  6. package/components/tag/Tag.vue.js +3 -3
  7. package/components/tag/Tag.vue2.js +149 -103
  8. package/components/tag/index.d.ts +9 -0
  9. package/package.json +1 -1
  10. package/OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css +0 -1
  11. package/Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_lang.css +0 -1
package/OptionV4.vue_vue_type_style_index_0_scoped_771e1980_lang.css ADDED
@@ -0,0 +1 @@
1
+ .label[data-v-771e1980]{color:#41454d}.item-container[data-v-771e1980]{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-771e1980]{cursor:not-allowed;color:var(--text-disabled)}.item-container--disabled .item .start-icon[data-v-771e1980],.item-container--disabled .item .end-icon[data-v-771e1980],.item-container--disabled .item .end-text-icon[data-v-771e1980]{color:var(--text-disabled)}.item-container--disabled .item .image img[data-v-771e1980]{opacity:.5}.item-container[data-v-771e1980]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-771e1980],.item-container[data-v-771e1980]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-771e1980]{background-color:var(--action-selected)}.item-container--filtered-out[data-v-771e1980]{color:var(--text-disabled)}.subtitle[data-v-771e1980]{color:#7b838c;line-height:1rem}.clear-button[data-v-771e1980]{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-771e1980]:hover{color:#3083ff}.item[data-v-771e1980]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-771e1980],.item--multi[data-v-771e1980]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-771e1980]{width:20px;height:20px;flex:none}.item .image img[data-v-771e1980]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-771e1980]{width:16px;height:16px}.item .flag img[data-v-771e1980]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-771e1980],.item .end-icon[data-v-771e1980]{display:flex;color:var(--action-active)}.item .end-text-icon[data-v-771e1980]{display:inline-flex}.item .option-text[data-v-771e1980]{line-height:1.1875rem}.text-container[data-v-771e1980]{width:100%;text-overflow:ellipsis;overflow:hidden}.v4-tooltip.tooltip-option[data-v-771e1980]{display:block}.tooltip-option[data-v-771e1980] .container{width:100%}.app-trigger--icon[data-v-771e1980]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-771e1980]{transform:rotate(0)}.option-warning[data-v-771e1980]{display:flex}.option-warning__icon[data-v-771e1980]{color:var(--warning-main)}.option-content[data-v-771e1980]{display:flex}.option-content[data-v-771e1980]:not(.option-content-vertical){gap:.5rem;align-items:center}.option-content-horizontal[data-v-771e1980]{justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-771e1980]{flex-direction:column}.option-text .main-text[data-v-771e1980]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .main-text .conditional-option-label[data-v-771e1980]{color:var(--text-secondary);display:inline-flex}.option-text .main-text .conditional-option-value[data-v-771e1980]{margin-left:4px;display:inline-flex;color:var(--primary-main)}.option-text .caption-text[data-v-771e1980]{color:var(--text-secondary)}.multiline-tooltip[data-v-771e1980]{display:flex;flex-direction:column}
package/Tag.vue_vue_type_style_index_0_scoped_b0662035_lang.css ADDED
@@ -0,0 +1 @@
1
+ @import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-b0662035],.font-chart-2[data-v-b0662035],.font-chart-1[data-v-b0662035]{font-family:Inter,sans-serif;font-weight:700}.tag-input-sizer[data-v-b0662035],.tag-input[data-v-b0662035],.font-chip-label[data-v-b0662035],.font-table-label[data-v-b0662035],.font-button[data-v-b0662035],.font-heading-6[data-v-b0662035],.font-heading-5[data-v-b0662035],.font-heading-4[data-v-b0662035],.font-heading-3[data-v-b0662035],.font-heading-2[data-v-b0662035],.font-heading-1[data-v-b0662035],.font-title[data-v-b0662035]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-b0662035],.font-input-label[data-v-b0662035],.font-overline[data-v-b0662035],.font-subtitle-2[data-v-b0662035],.font-subtitle-1[data-v-b0662035]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-b0662035],.font-body-2[data-v-b0662035],.font-body-1[data-v-b0662035]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-b0662035]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-b0662035]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-b0662035]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-b0662035]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-b0662035]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-b0662035]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-b0662035]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-b0662035]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-b0662035]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-b0662035]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-b0662035]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-b0662035]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-b0662035]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-b0662035]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-b0662035]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-b0662035]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-b0662035]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-b0662035]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-b0662035],.font-tab-label2[data-v-b0662035]{font-size:.875rem;line-height:1rem}.tag-input-sizer[data-v-b0662035],.tag-input[data-v-b0662035],.font-chip-label[data-v-b0662035]{font-size:.75rem;line-height:1rem}h1[data-v-b0662035],h2[data-v-b0662035],h3[data-v-b0662035],h4[data-v-b0662035],h5[data-v-b0662035],h6[data-v-b0662035]{margin:0}.rounded-tag[data-v-b0662035]{border-radius:100px}.tag-editing[data-v-b0662035]{outline:1px solid var(--outline-color)}.unselected-tag-hover-outline[data-v-b0662035]{background-color:var(--action-hover)}.tag-hover-outline[data-v-b0662035]{outline:1px solid var(--outline-color);cursor:pointer}.unselected-tag[data-v-b0662035]{outline:1px solid var(--action-outlined-border)}.tag-disabled[data-v-b0662035]{background-color:transparent;outline:1px solid var(--action-disabled)}.tag-content[data-v-b0662035]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.tag-icon[data-v-b0662035]{margin-right:.25rem}.tag-label[data-v-b0662035]{user-select:none;min-width:.5rem}.tag-label--disabled[data-v-b0662035]{color:var(--action-disabled)}.tag-label--hidden[data-v-b0662035]{visibility:hidden}.tag-input[data-v-b0662035]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.tag-input[data-v-b0662035]:focus{outline:none}.tag-input-outline[data-v-b0662035]::placeholder{color:var(--action-disabled)}.clear-button[data-v-b0662035]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-b0662035]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-b0662035]{color:var(--error-dark)}.clear-button--invalid[data-v-b0662035]:hover{color:var(--error-darker)}.tag-input-sizer[data-v-b0662035]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}.editable-tag[data-v-b0662035]{cursor:text}.empty-tag[data-v-b0662035]{background-color:transparent;outline:1px dashed var(--action-outlined-border);color:var(--text-secondary)}.empty-tag[data-v-b0662035]:hover:not(.tag-disabled){outline:1px dashed var(--action-active)}
package/components/dropdown/v4/OptionV4.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./OptionV4.vue2.js";
2
- /* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css"; //*');
4
- const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-752a357d"]]);
2
+ /* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../../OptionV4.vue_vue_type_style_index_0_scoped_771e1980_lang.css"; //*');
4
+ const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-771e1980"]]);
5
5
  export {
6
6
  s as default
7
7
  };
package/components/dropdown/v4/OptionV4.vue2.js CHANGED
@@ -1,4 +1,4 @@
1
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css"; import { defineComponent as V, ref as I, watch as F, computed as L, openBlock as i, createBlock as g, unref as n, createSlots as N, withCtx as s, createElementVNode as u, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as r, createVNode as a, toDisplayString as m, createTextVNode as T, withModifiers as O, Fragment as j, renderList as R } from "vue";
1
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_771e1980_lang.css"; import { defineComponent as V, ref as I, watch as F, computed as L, openBlock as i, createBlock as g, unref as n, createSlots as N, withCtx as s, createElementVNode as u, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as r, createVNode as a, toDisplayString as m, createTextVNode as T, withModifiers as O, Fragment as j, renderList as R } from "vue";
2
2
  import "../../typography/Heading.vue.js";
3
3
  import D from "../../typography/Text.vue.js";
4
4
  import q from "../../checkbox/v4/CheckboxV4.vue.js";
@@ -6,7 +6,7 @@ import y from "../../icon/v4/IconV4.vue.js";
6
6
  import G from "../../icon/v4/IconFlag.vue.js";
7
7
  import { NOOP as $ } from "@vue/shared";
8
8
  import { optionCommon as H } from "../common/Option.common.js";
9
- import p from "../../typography/v4/Typography.vue.js";
9
+ import x from "../../typography/v4/Typography.vue.js";
10
10
  import h from "../../tooltip/v4/TooltipV4.vue.js";
11
11
  import { isElementTruncated as J } from "../../../utils/text.js";
12
12
  import { promiseTimeout as Q } from "@vueuse/core";
@@ -71,11 +71,11 @@ const U = { class: "multiline-tooltip" }, W = {
71
71
  setup(e, { emit: M }) {
72
72
  const d = e, { selected: b, id: B, onClick: S, api: K } = H(d), z = (t) => {
73
73
  d.stopOptionClickEventPropagation && t.stopPropagation(), d.disabled ? $() : S(t);
74
- }, x = I(null), w = I(!1), A = (t) => {
74
+ }, p = I(null), w = I(!1), A = (t) => {
75
75
  d.disabled && (t.stopPropagation(), $());
76
76
  };
77
- F([() => d.treeChildShown, x], async () => {
78
- await Q(100), w.value = x.value && J(x.value);
77
+ F([() => d.treeChildShown, p], async () => {
78
+ await Q(100), w.value = p.value && J(p.value);
79
79
  });
80
80
  const P = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : w.value ? t[d.nameKey] : "", k = L(() => {
81
81
  const t = d.disabled && d.minMaxSelectionTooltipMessage || "", c = P(d.option);
@@ -97,7 +97,8 @@ const U = { class: "multiline-tooltip" }, W = {
97
97
  "item-container--disabled": e.disabled,
98
98
  "item-container--active": e.nameKey ? !1 : e.active,
99
99
  "item-container--selected": n(b),
100
- "item-container--multi": e.isMulti
100
+ "item-container--multi": e.isMulti,
101
+ "item-container--filtered-out": e.option?.filteredOut
101
102
  }]),
102
103
  onClick: A
103
104
  }, [
@@ -145,10 +146,10 @@ const U = { class: "multiline-tooltip" }, W = {
145
146
  ])) : o("", !0),
146
147
  u("div", {
147
148
  ref_key: "textContainerRef",
148
- ref: x,
149
+ ref: p,
149
150
  class: "text-container"
150
151
  }, [
151
- a(n(p), {
152
+ a(n(x), {
152
153
  class: "option-text",
153
154
  variant: "body2"
154
155
  }, {
@@ -166,7 +167,7 @@ const U = { class: "multiline-tooltip" }, W = {
166
167
  }, {
167
168
  default: s(() => [
168
169
  e.option?.conditionalOptions ? (i(), l("div", ee, [
169
- a(n(p), {
170
+ a(n(x), {
170
171
  variant: "body2",
171
172
  class: "conditional-option-label"
172
173
  }, {
@@ -175,7 +176,7 @@ const U = { class: "multiline-tooltip" }, W = {
175
176
  ]),
176
177
  _: 1
177
178
  }),
178
- a(n(p), {
179
+ a(n(x), {
179
180
  variant: "h5",
180
181
  class: "conditional-option-value"
181
182
  }, {
@@ -196,7 +197,7 @@ const U = { class: "multiline-tooltip" }, W = {
196
197
  }, null, 8, ["name"])
197
198
  ])) : o("", !0),
198
199
  e.optionTwoLinesKey ? (i(), l("div", ne, [
199
- a(n(p), { variant: "caption" }, {
200
+ a(n(x), { variant: "caption" }, {
200
201
  default: s(() => [
201
202
  T(m(e.option[e.optionTwoLinesKey]), 1)
202
203
  ]),
@@ -279,7 +280,7 @@ const U = { class: "multiline-tooltip" }, W = {
279
280
  name: "tooltip",
280
281
  fn: s(() => [
281
282
  u("div", U, [
282
- (i(!0), l(j, null, R(n(k), (f) => (i(), g(n(p), {
283
+ (i(!0), l(j, null, R(n(k), (f) => (i(), g(n(x), {
283
284
  key: f,
284
285
  variant: "body2"
285
286
  }, {
package/components/tag/Tag.vue.d.ts CHANGED
@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
13
13
  iconName?: string;
14
14
  iconType?: 'regular' | 'fill';
15
15
  editable?: boolean;
16
+ removable?: boolean;
16
17
  selectable?: boolean;
17
18
  maxLength?: number;
18
19
  maxLengthTooltip?: string;
@@ -30,6 +31,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
30
31
  placeholder: string;
31
32
  iconName: string;
32
33
  editable: boolean;
34
+ removable: boolean;
33
35
  selectable: boolean;
34
36
  maxLength: any;
35
37
  iconType: string;
@@ -57,6 +59,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
57
59
  iconName?: string;
58
60
  iconType?: 'regular' | 'fill';
59
61
  editable?: boolean;
62
+ removable?: boolean;
60
63
  selectable?: boolean;
61
64
  maxLength?: number;
62
65
  maxLengthTooltip?: string;
@@ -74,6 +77,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
74
77
  placeholder: string;
75
78
  iconName: string;
76
79
  editable: boolean;
80
+ removable: boolean;
77
81
  selectable: boolean;
78
82
  maxLength: any;
79
83
  iconType: string;
@@ -101,6 +105,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
101
105
  iconType: 'regular' | 'fill';
102
106
  editable: boolean;
103
107
  isInvalid: boolean;
108
+ removable: boolean;
104
109
  selectable: boolean;
105
110
  maxLengthTooltip: string;
106
111
  validationPattern: string;
package/components/tag/Tag.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./Tag.vue2.js";
2
2
  /* empty css */import _ from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_lang.css"; //*');
4
- const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-3a5abbc4"]]);
3
+ // import "../../Tag.vue_vue_type_style_index_0_scoped_b0662035_lang.css"; //*');
4
+ const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-b0662035"]]);
5
5
  export {
6
- t as default
6
+ p as default
7
7
  };
package/components/tag/Tag.vue2.js CHANGED
@@ -1,10 +1,10 @@
1
- import "../../Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_lang.css"; import { defineComponent as Y, ref as c, computed as d, watch as I, nextTick as R, openBlock as m, createBlock as M, unref as t, withCtx as b, createVNode as z, createTextVNode as P, toDisplayString as S, normalizeClass as h, normalizeStyle as $, withModifiers as g, createElementVNode as Z, createCommentVNode as H, withDirectives as K, createElementBlock as O, isRef as _, withKeys as D, vModelText as ee, vShow as ae } from "vue";
2
- import W from "../typography/v4/Typography.vue.js";
3
- import F from "../icon/v4/IconV4.vue.js";
1
+ import "../../Tag.vue_vue_type_style_index_0_scoped_b0662035_lang.css"; import { defineComponent as _, ref as b, computed as u, watch as C, nextTick as W, openBlock as g, createBlock as k, unref as l, withCtx as s, createVNode as w, createTextVNode as L, toDisplayString as V, normalizeClass as h, normalizeStyle as F, withModifiers as y, createElementVNode as ee, createCommentVNode as U, withDirectives as N, createElementBlock as j, isRef as ae, withKeys as q, vModelText as le, vShow as A } from "vue";
2
+ import R from "../typography/v4/Typography.vue.js";
3
+ import P from "../icon/v4/IconV4.vue.js";
4
4
  import "../icon/v4/IconFlag.vue.js";
5
5
  import te from "../chip/v4/ChipV4.vue.js";
6
- import le from "../tooltip/v4/TooltipV4.vue.js";
7
- const re = { class: "tag-content" }, ie = ["placeholder", "maxlength", "onKeyup"], ce = /* @__PURE__ */ Y({
6
+ import G from "../tooltip/v4/TooltipV4.vue.js";
7
+ const ie = { class: "tag-content" }, re = ["placeholder", "maxlength", "onKeyup"], ce = /* @__PURE__ */ _({
8
8
  __name: "Tag",
9
9
  props: {
10
10
  label: { default: "" },
@@ -20,6 +20,7 @@ const re = { class: "tag-content" }, ie = ["placeholder", "maxlength", "onKeyup"
20
20
  iconName: { default: "" },
21
21
  iconType: { default: "regular" },
22
22
  editable: { type: Boolean, default: !1 },
23
+ removable: { type: Boolean, default: !1 },
23
24
  selectable: { type: Boolean, default: !0 },
24
25
  maxLength: { default: void 0 },
25
26
  maxLengthTooltip: { default: "Character limit reached" },
@@ -27,61 +28,66 @@ const re = { class: "tag-content" }, ie = ["placeholder", "maxlength", "onKeyup"
27
28
  validationErrorText: { default: "Invalid format" }
28
29
  },
29
30
  emits: ["update:label", "remove", "stopEditing", "update:isSelected", "validationError", "validationSuccess"],
30
- setup(a, { emit: u }) {
31
- const e = a, r = c(!1), k = c(null), x = c(void 0), T = c(!1), s = c(!1), o = c(e.isSelected || e.editable), y = d(() => {
32
- if (!e.validationPattern || !l.value)
31
+ setup(a, { emit: d }) {
32
+ const e = a, r = b(!1), T = b(null), M = b(void 0), c = b(!1), f = b(!1), n = b(e.isSelected || e.editable), x = u(() => {
33
+ if (!e.validationPattern || !i.value)
33
34
  return !0;
34
35
  try {
35
- return new RegExp(e.validationPattern).test(l.value);
36
+ return new RegExp(e.validationPattern).test(i.value);
36
37
  } catch {
37
38
  return !0;
38
39
  }
39
- }), v = d(() => !y.value && r.value && l.value), B = d(() => !e.label && !r.value && e.placeholder), w = d(() => e.maxLength && l.value.length >= e.maxLength && r.value), p = d(() => e.disabled || !e.selectable || r.value ? "outlined" : s.value ? "filled" : !o.value && !e.editable ? "outlined" : e.variant), U = d(() => e.disabled ? "default" : e.isInvalid || v.value ? "error" : o.value || !o.value && e.editable || !e.selectable ? e.color : "default"), l = d({
40
+ }), v = u(() => !x.value && r.value && i.value), E = u(() => !e.label && !r.value && e.placeholder), I = u(() => e.maxLength && i.value.length >= e.maxLength && r.value), p = u(() => e.disabled || !e.selectable || r.value ? "outlined" : f.value ? "filled" : !n.value && !e.editable ? "outlined" : e.variant), J = u(() => e.disabled ? "default" : e.isInvalid || v.value ? "error" : n.value || !n.value && e.editable || !e.selectable ? e.color : "default"), i = u({
40
41
  get: () => e.label,
41
- set: (n) => {
42
- u("update:label", n);
42
+ set: (o) => {
43
+ d("update:label", o);
43
44
  }
44
45
  });
45
- I(
46
- () => [l.value, r.value],
46
+ C(
47
+ () => [i.value, r.value],
47
48
  () => {
48
- e.validationPattern && r.value && l.value && (y.value ? u("validationSuccess") : u("validationError", e.validationErrorText));
49
+ e.validationPattern && r.value && i.value && (x.value ? d("validationSuccess") : d("validationError", e.validationErrorText));
49
50
  }
50
51
  );
51
- const L = c(null), C = () => L.value?.focus(), j = () => {
52
- u("remove");
53
- }, q = async () => {
54
- e.disabled || !e.selectable || (e.editable ? (r.value = !0, await R(), C()) : (o.value = !o.value, u("update:isSelected", o.value)));
55
- }, A = () => {
56
- if (e.validationPattern && l.value && !y.value) {
52
+ const $ = b(null), S = () => $.value?.focus(), D = () => {
53
+ d("remove");
54
+ }, Q = async () => {
55
+ e.disabled || !e.selectable || (e.removable && !e.editable ? (n.value = !n.value, d("update:isSelected", n.value)) : e.editable ? (r.value = !0, await W(), S()) : (n.value = !n.value, d("update:isSelected", n.value)));
56
+ }, X = () => {
57
+ if (e.validationPattern && i.value && !x.value) {
57
58
  setTimeout(() => {
58
- C();
59
+ S();
59
60
  }, 0);
60
61
  return;
61
62
  }
62
- E();
63
- }, E = () => {
64
- if (e.validationPattern && l.value && !y.value) {
63
+ z();
64
+ }, z = () => {
65
+ if (e.validationPattern && i.value && !x.value) {
65
66
  setTimeout(() => {
66
- C();
67
+ S();
67
68
  }, 0);
68
69
  return;
69
70
  }
70
- r.value = !1, !l.value && !e.placeholder && u("remove"), u("stopEditing");
71
+ r.value = !1, !i.value && !e.placeholder && d("remove"), d("stopEditing");
71
72
  };
72
- I(
73
- () => [l.value, e.placeholder, r.value],
73
+ C(
74
+ () => [i.value, e.placeholder, r.value],
74
75
  async () => {
75
- await R(), r.value && k.value ? x.value = k.value.offsetWidth + "px" : x.value = void 0;
76
+ await W(), r.value && T.value ? M.value = T.value.offsetWidth + "px" : M.value = void 0;
76
77
  },
77
78
  { immediate: !0 }
78
- ), I(
79
+ ), C(
79
80
  () => e.editable,
80
81
  () => {
81
- e.editable && (o.value = !0);
82
+ e.editable && (n.value = !0);
83
+ }
84
+ ), C(
85
+ () => e.isSelected,
86
+ (o) => {
87
+ n.value = o;
82
88
  }
83
89
  );
84
- const V = {
90
+ const H = {
85
91
  default: "var(--default-outlined-border)",
86
92
  primary: "var(--primary-main)",
87
93
  info: "var(--info-dark)",
@@ -89,7 +95,7 @@ const re = { class: "tag-content" }, ie = ["placeholder", "maxlength", "onKeyup"
89
95
  warning: "var(--warning-main)",
90
96
  success: "var(--success-main)",
91
97
  dark: "var(--common-divider)"
92
- }, N = {
98
+ }, B = {
93
99
  default: "var(--action-active)",
94
100
  primary: "var(--primary-dark)",
95
101
  info: "var(--info-dark)",
@@ -97,7 +103,7 @@ const re = { class: "tag-content" }, ie = ["placeholder", "maxlength", "onKeyup"
97
103
  warning: "var(--warning-dark)",
98
104
  success: "var(--success-dark)",
99
105
  dark: "var(--common-divider)"
100
- }, G = {
106
+ }, K = {
101
107
  default: "var(--action-active)",
102
108
  primary: "var(--primary-darker)",
103
109
  info: "var(--info-darker)",
@@ -105,136 +111,176 @@ const re = { class: "tag-content" }, ie = ["placeholder", "maxlength", "onKeyup"
105
111
  warning: "var(--warning-darker)",
106
112
  success: "var(--success-darker)",
107
113
  dark: "var(--common-divider)"
108
- }, J = d(() => {
114
+ }, O = u(() => {
109
115
  if (e.disabled)
110
116
  return "var(--action-disabled)";
111
- const n = e.isInvalid ? "error" : e.color;
112
- return T.value ? G[n] : N[n];
113
- }), Q = d(() => {
117
+ const o = e.isInvalid ? "error" : e.color;
118
+ return e.removable && !e.editable ? n.value || !e.selectable ? c.value ? K[o] : o === "primary" ? "var(--primary-contrast-text)" : B[o] : c.value ? "var(--text-primary)" : "var(--action-active)" : c.value ? K[o] : B[o];
119
+ }), Y = u(() => {
114
120
  if (e.disabled)
115
121
  return "var(--action-disabled)";
116
- const n = e.isInvalid ? "error" : e.color;
117
- return o.value || !e.selectable ? N[n] : "var(--action-active)";
118
- }), X = d(() => {
122
+ const o = e.isInvalid ? "error" : e.color;
123
+ return n.value || !e.selectable ? B[o] : "var(--action-active)";
124
+ }), Z = u(() => {
119
125
  if (e.editable && e.variant !== "outlined" || !e.selectable) {
120
- const n = r.value ? V[e.color] : "var(--primary-main-50-p)";
126
+ const o = r.value ? H[e.color] : "var(--primary-main-50-p)";
121
127
  return {
122
- "--outline-color": e.isInvalid ? V.error : n
128
+ "--outline-color": e.isInvalid ? H.error : o
123
129
  };
124
130
  }
125
- return s.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
126
- "--outline-color": o.value ? "var(--primary-main-50-p)" : "var(--action-active)"
131
+ return f.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
132
+ "--outline-color": n.value ? "var(--primary-main-50-p)" : "var(--action-active)"
127
133
  } : {};
128
134
  });
129
- return (n, i) => (m(), M(t(le), {
135
+ return (o, t) => (g(), k(l(G), {
130
136
  placement: "top",
131
- text: t(v) ? a.validationErrorText : a.maxLengthTooltip,
132
- "is-open": t(w) || t(v),
133
- shown: t(w) || t(v).length > 0,
134
- disabled: !t(w) && !t(v),
137
+ text: l(v) ? a.validationErrorText : a.maxLengthTooltip,
138
+ "is-open": l(I) || l(v),
139
+ shown: l(I) || l(v).length > 0,
140
+ disabled: !l(I) && !l(v),
135
141
  trigger: "click",
136
142
  distance: 10,
137
143
  skidding: 10
138
144
  }, {
139
- tooltip: b(() => [
140
- z(t(W), { variant: "body2" }, {
141
- default: b(() => [
142
- P(S(t(v) ? a.validationErrorText : a.maxLengthTooltip), 1)
145
+ tooltip: s(() => [
146
+ w(l(R), { variant: "body2" }, {
147
+ default: s(() => [
148
+ L(V(l(v) ? a.validationErrorText : a.maxLengthTooltip), 1)
143
149
  ]),
144
150
  _: 1
145
151
  })
146
152
  ]),
147
- default: b(() => [
148
- z(t(te), {
153
+ default: s(() => [
154
+ w(l(te), {
149
155
  class: h({
150
156
  "rounded-tag": a.rounded,
151
- "tag-editing": r.value && t(p) !== "outlined",
157
+ "tag-editing": r.value && l(p) !== "outlined",
152
158
  // outlined chips have an outline
153
- "tag-hover-outline": a.label && s.value && t(p) !== "outlined",
159
+ "tag-hover-outline": a.label && f.value && l(p) !== "outlined",
154
160
  // outlined chips have an outline
155
- "unselected-tag-hover-outline": a.label && s.value && t(p) !== "outlined" && !o.value && !a.editable,
161
+ "unselected-tag-hover-outline": a.label && f.value && l(p) !== "outlined" && !n.value && !a.editable,
156
162
  // for unselected tags that are not editable, we want to show a hover outline
157
163
  "tag-disabled": a.disabled,
158
- "empty-tag": t(B),
159
- "unselected-tag": !o.value && a.selectable && a.label && !s.value,
160
- "editable-tag": a.editable && !a.disabled
164
+ "empty-tag": l(E),
165
+ "unselected-tag": !n.value && a.selectable && a.label && !f.value,
166
+ "editable-tag": a.editable && !a.disabled && !a.removable
161
167
  }),
162
- label: t(l),
168
+ label: l(i),
163
169
  "test-id": a.testId,
164
- color: t(U),
170
+ color: l(J),
165
171
  size: a.size,
166
- variant: t(p),
172
+ variant: l(p),
167
173
  disabled: a.disabled,
168
- style: $(t(X)),
169
- onMouseover: i[4] || (i[4] = (f) => s.value = !0),
170
- onMouseleave: i[5] || (i[5] = (f) => s.value = !1),
171
- onClick: g(q, ["stop"])
174
+ style: F(l(Z)),
175
+ onMouseover: t[7] || (t[7] = (m) => f.value = !0),
176
+ onMouseleave: t[8] || (t[8] = (m) => f.value = !1),
177
+ onClick: y(Q, ["stop"])
172
178
  }, {
173
- default: b(() => [
174
- Z("div", re, [
175
- a.iconName ? (m(), M(t(F), {
179
+ default: s(() => [
180
+ ee("div", ie, [
181
+ a.iconName ? (g(), k(l(P), {
176
182
  key: 0,
177
183
  name: a.iconName,
178
184
  size: "16px",
179
- color: t(Q),
185
+ color: l(Y),
180
186
  class: "tag-icon",
181
187
  type: a.iconType
182
- }, null, 8, ["name", "color", "type"])) : H("", !0),
183
- r.value ? K((m(), O("input", {
188
+ }, null, 8, ["name", "color", "type"])) : U("", !0),
189
+ r.value ? N((g(), j("input", {
184
190
  key: 2,
185
191
  ref_key: "inputRef",
186
- ref: L,
187
- "onUpdate:modelValue": i[0] || (i[0] = (f) => _(l) ? l.value = f : null),
192
+ ref: $,
193
+ "onUpdate:modelValue": t[0] || (t[0] = (m) => ae(i) ? i.value = m : null),
188
194
  placeholder: a.placeholder,
189
195
  class: h(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
190
196
  spellcheck: "false",
191
- style: $({ width: x.value }),
197
+ style: F({ width: M.value }),
192
198
  maxlength: a.maxLength,
193
- onBlur: A,
199
+ onBlur: X,
194
200
  onKeyup: [
195
- D(g(E, ["prevent"]), ["enter"]),
196
- D(g(E, ["prevent"]), ["esc"])
201
+ q(y(z, ["prevent"]), ["enter"]),
202
+ q(y(z, ["prevent"]), ["esc"])
197
203
  ]
198
- }, null, 46, ie)), [
204
+ }, null, 46, re)), [
199
205
  [
200
- ee,
201
- t(l),
206
+ le,
207
+ l(i),
202
208
  void 0,
203
209
  { trim: !0 }
204
210
  ]
205
- ]) : (m(), M(t(W), {
211
+ ]) : (g(), k(l(R), {
206
212
  key: 1,
207
213
  variant: "chipLabel",
208
214
  class: h(["tag-label", {
209
- "tag-label--placeholder": !t(l) && a.placeholder,
215
+ "tag-label--placeholder": !l(i) && a.placeholder,
210
216
  "tag-label--disabled": a.disabled
211
217
  }])
212
218
  }, {
213
- default: b(() => [
214
- P(S(t(l) || a.placeholder), 1)
219
+ default: s(() => [
220
+ L(V(l(i) || a.placeholder), 1)
215
221
  ]),
216
222
  _: 1
217
223
  }, 8, ["class"])),
218
- r.value ? (m(), O("span", {
224
+ r.value ? (g(), j("span", {
219
225
  key: 3,
220
226
  ref_key: "sizerRef",
221
- ref: k,
227
+ ref: T,
222
228
  class: "tag-input-sizer"
223
- }, S(t(l) || a.placeholder || ""), 513)) : H("", !0)
229
+ }, V(l(i) || a.placeholder || ""), 513)) : U("", !0)
224
230
  ]),
225
- K(z(t(F), {
226
- class: h(["clear-button", { "clear-button--invalid": a.isInvalid || t(v) }]),
227
- name: "x-circle",
231
+ a.removable && !a.editable && a.selectable ? (g(), k(l(G), {
232
+ key: 0,
233
+ placement: "top",
234
+ text: "Delete",
235
+ trigger: "hover",
236
+ distance: 8,
237
+ skidding: 0
238
+ }, {
239
+ tooltip: s(() => [
240
+ w(l(R), { variant: "body2" }, {
241
+ default: s(() => [
242
+ L("Delete")
243
+ ]),
244
+ _: 1
245
+ })
246
+ ]),
247
+ default: s(() => [
248
+ N(w(l(P), {
249
+ class: h(["clear-button", { "clear-button--invalid": a.isInvalid || l(v) }]),
250
+ name: a.editable ? "x-circle" : "trash-simple",
251
+ size: "16px",
252
+ type: a.editable ? "fill" : "regular",
253
+ color: l(O),
254
+ onMousedown: t[1] || (t[1] = y(() => {
255
+ }, ["prevent"])),
256
+ onMouseover: t[2] || (t[2] = (m) => c.value = !0),
257
+ onMouseleave: t[3] || (t[3] = (m) => c.value = !1),
258
+ onClick: y(D, ["stop"])
259
+ }, null, 8, ["class", "name", "type", "color", "onClick"]), [
260
+ [
261
+ A,
262
+ a.editable && a.selectable && (r.value || !l(E)) || a.removable && !a.editable && a.selectable
263
+ ]
264
+ ])
265
+ ]),
266
+ _: 1
267
+ })) : N((g(), k(l(P), {
268
+ key: 1,
269
+ class: h(["clear-button", { "clear-button--invalid": a.isInvalid || l(v) }]),
270
+ name: a.editable ? "x-circle" : "trash-simple",
228
271
  size: "16px",
229
- type: "fill",
230
- color: t(J),
231
- onMousedown: i[1] || (i[1] = g(() => {
272
+ type: a.editable ? "fill" : "regular",
273
+ color: l(O),
274
+ onMousedown: t[4] || (t[4] = y(() => {
232
275
  }, ["prevent"])),
233
- onMouseover: i[2] || (i[2] = (f) => T.value = !0),
234
- onMouseleave: i[3] || (i[3] = (f) => T.value = !1),
235
- onClick: g(j, ["stop"])
236
- }, null, 8, ["class", "color", "onClick"]), [
237
- [ae, a.editable && a.selectable && (r.value || !t(B))]
276
+ onMouseover: t[5] || (t[5] = (m) => c.value = !0),
277
+ onMouseleave: t[6] || (t[6] = (m) => c.value = !1),
278
+ onClick: y(D, ["stop"])
279
+ }, null, 8, ["class", "name", "type", "color", "onClick"])), [
280
+ [
281
+ A,
282
+ a.editable && a.selectable && (r.value || !l(E)) || a.removable && !a.editable && a.selectable
283
+ ]
238
284
  ])
239
285
  ]),
240
286
  _: 1
package/components/tag/index.d.ts CHANGED
@@ -57,6 +57,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
57
57
  type: import("vue").PropType<boolean>;
58
58
  default: boolean;
59
59
  };
60
+ removable: {
61
+ type: import("vue").PropType<boolean>;
62
+ default: boolean;
63
+ };
60
64
  selectable: {
61
65
  type: import("vue").PropType<boolean>;
62
66
  default: boolean;
@@ -138,6 +142,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
138
142
  type: import("vue").PropType<boolean>;
139
143
  default: boolean;
140
144
  };
145
+ removable: {
146
+ type: import("vue").PropType<boolean>;
147
+ default: boolean;
148
+ };
141
149
  selectable: {
142
150
  type: import("vue").PropType<boolean>;
143
151
  default: boolean;
@@ -175,6 +183,7 @@ declare const TagTypes: () => import("vue").DefineComponent<{
175
183
  iconType: "fill" | "regular";
176
184
  editable: boolean;
177
185
  isInvalid: boolean;
186
+ removable: boolean;
178
187
  selectable: boolean;
179
188
  maxLengthTooltip: string;
180
189
  validationPattern: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ironsource/shared-ui",
3
- "version": "2.2.0-rc.40",
3
+ "version": "2.2.0-rc.42",
4
4
  "engines": {
5
5
  "npm": ">=7.0.0",
6
6
  "node": ">=16.0.0"
package/OptionV4.vue_vue_type_style_index_0_scoped_752a357d_lang.css DELETED
@@ -1 +0,0 @@
1
- .label[data-v-752a357d]{color:#41454d}.item-container[data-v-752a357d]{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-752a357d]{cursor:not-allowed;color:var(--text-disabled)}.item-container--disabled .item .start-icon[data-v-752a357d],.item-container--disabled .item .end-icon[data-v-752a357d],.item-container--disabled .item .end-text-icon[data-v-752a357d]{color:var(--text-disabled)}.item-container--disabled .item .image img[data-v-752a357d]{opacity:.5}.item-container[data-v-752a357d]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-752a357d],.item-container[data-v-752a357d]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-752a357d]{background-color:var(--action-selected)}.subtitle[data-v-752a357d]{color:#7b838c;line-height:1rem}.clear-button[data-v-752a357d]{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-752a357d]:hover{color:#3083ff}.item[data-v-752a357d]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-752a357d],.item--multi[data-v-752a357d]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-752a357d]{width:20px;height:20px;flex:none}.item .image img[data-v-752a357d]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-752a357d]{width:16px;height:16px}.item .flag img[data-v-752a357d]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-752a357d],.item .end-icon[data-v-752a357d]{display:flex;color:var(--action-active)}.item .end-text-icon[data-v-752a357d]{display:inline-flex}.item .option-text[data-v-752a357d]{line-height:1.1875rem}.text-container[data-v-752a357d]{width:100%;text-overflow:ellipsis;overflow:hidden}.v4-tooltip.tooltip-option[data-v-752a357d]{display:block}.tooltip-option[data-v-752a357d] .container{width:100%}.app-trigger--icon[data-v-752a357d]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-752a357d]{transform:rotate(0)}.option-warning[data-v-752a357d]{display:flex}.option-warning__icon[data-v-752a357d]{color:var(--warning-main)}.option-content[data-v-752a357d]{display:flex}.option-content[data-v-752a357d]:not(.option-content-vertical){gap:.5rem;align-items:center}.option-content-horizontal[data-v-752a357d]{justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-752a357d]{flex-direction:column}.option-text .main-text[data-v-752a357d]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .main-text .conditional-option-label[data-v-752a357d]{color:var(--text-secondary);display:inline-flex}.option-text .main-text .conditional-option-value[data-v-752a357d]{margin-left:4px;display:inline-flex;color:var(--primary-main)}.option-text .caption-text[data-v-752a357d]{color:var(--text-secondary)}.multiline-tooltip[data-v-752a357d]{display:flex;flex-direction:column}
package/Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_lang.css DELETED
@@ -1 +0,0 @@
1
- @import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-3a5abbc4],.font-chart-2[data-v-3a5abbc4],.font-chart-1[data-v-3a5abbc4]{font-family:Inter,sans-serif;font-weight:700}.tag-input-sizer[data-v-3a5abbc4],.tag-input[data-v-3a5abbc4],.font-chip-label[data-v-3a5abbc4],.font-table-label[data-v-3a5abbc4],.font-button[data-v-3a5abbc4],.font-heading-6[data-v-3a5abbc4],.font-heading-5[data-v-3a5abbc4],.font-heading-4[data-v-3a5abbc4],.font-heading-3[data-v-3a5abbc4],.font-heading-2[data-v-3a5abbc4],.font-heading-1[data-v-3a5abbc4],.font-title[data-v-3a5abbc4]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-3a5abbc4],.font-input-label[data-v-3a5abbc4],.font-overline[data-v-3a5abbc4],.font-subtitle-2[data-v-3a5abbc4],.font-subtitle-1[data-v-3a5abbc4]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-3a5abbc4],.font-body-2[data-v-3a5abbc4],.font-body-1[data-v-3a5abbc4]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-3a5abbc4]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-3a5abbc4]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-3a5abbc4]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-3a5abbc4]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-3a5abbc4]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-3a5abbc4]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-3a5abbc4]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-3a5abbc4]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-3a5abbc4]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-3a5abbc4]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-3a5abbc4]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-3a5abbc4]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-3a5abbc4]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-3a5abbc4]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-3a5abbc4]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-3a5abbc4]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-3a5abbc4]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-3a5abbc4]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-3a5abbc4],.font-tab-label2[data-v-3a5abbc4]{font-size:.875rem;line-height:1rem}.tag-input-sizer[data-v-3a5abbc4],.tag-input[data-v-3a5abbc4],.font-chip-label[data-v-3a5abbc4]{font-size:.75rem;line-height:1rem}h1[data-v-3a5abbc4],h2[data-v-3a5abbc4],h3[data-v-3a5abbc4],h4[data-v-3a5abbc4],h5[data-v-3a5abbc4],h6[data-v-3a5abbc4]{margin:0}.rounded-tag[data-v-3a5abbc4]{border-radius:100px}.tag-editing[data-v-3a5abbc4]{outline:1px solid var(--outline-color)}.unselected-tag-hover-outline[data-v-3a5abbc4]{background-color:var(--action-hover)}.tag-hover-outline[data-v-3a5abbc4]{outline:1px solid var(--outline-color);cursor:pointer}.unselected-tag[data-v-3a5abbc4]{outline:1px solid var(--action-outlined-border)}.tag-disabled[data-v-3a5abbc4]{background-color:transparent;outline:1px solid var(--action-disabled)}.tag-content[data-v-3a5abbc4]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.tag-icon[data-v-3a5abbc4]{margin-right:.25rem}.tag-label[data-v-3a5abbc4]{user-select:none;min-width:.5rem}.tag-label--disabled[data-v-3a5abbc4]{color:var(--action-disabled)}.tag-label--hidden[data-v-3a5abbc4]{visibility:hidden}.tag-input[data-v-3a5abbc4]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.tag-input[data-v-3a5abbc4]:focus{outline:none}.tag-input-outline[data-v-3a5abbc4]::placeholder{color:var(--action-disabled)}.clear-button[data-v-3a5abbc4]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-3a5abbc4]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-3a5abbc4]{color:var(--error-dark)}.clear-button--invalid[data-v-3a5abbc4]:hover{color:var(--error-darker)}.tag-input-sizer[data-v-3a5abbc4]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}.editable-tag[data-v-3a5abbc4]{cursor:text}.empty-tag[data-v-3a5abbc4]{background-color:transparent;outline:1px dashed var(--action-outlined-border);color:var(--text-secondary)}.empty-tag[data-v-3a5abbc4]:hover:not(.tag-disabled){outline:1px dashed var(--action-active)}