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

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 (8) hide show
  1. package/Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_lang.css +1 -0
  2. package/components/tag/Tag.vue.d.ts +14 -0
  3. package/components/tag/Tag.vue.js +5 -5
  4. package/components/tag/Tag.vue2.js +125 -92
  5. package/components/tag/index.d.ts +22 -0
  6. package/index.js +1 -1
  7. package/package.json +1 -1
  8. package/Tag.vue_vue_type_style_index_0_scoped_11fee894_lang.css +0 -1
package/Tag.vue_vue_type_style_index_0_scoped_3a5abbc4_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-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)}
package/components/tag/Tag.vue.d.ts CHANGED
@@ -16,6 +16,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
16
16
  selectable?: boolean;
17
17
  maxLength?: number;
18
18
  maxLengthTooltip?: string;
19
+ validationPattern?: string;
20
+ validationErrorText?: string;
19
21
  }>, {
20
22
  isInvalid: boolean;
21
23
  label: string;
@@ -32,11 +34,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
32
34
  maxLength: any;
33
35
  iconType: string;
34
36
  maxLengthTooltip: string;
37
+ validationPattern: string;
38
+ validationErrorText: string;
35
39
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
36
40
  "update:label": (value: string) => void;
37
41
  remove: () => void;
38
42
  stopEditing: () => void;
39
43
  "update:isSelected": (value: boolean) => void;
44
+ validationError: (value: string) => void;
45
+ validationSuccess: () => void;
40
46
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
41
47
  label: string;
42
48
  isSelected: boolean;
@@ -54,6 +60,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
54
60
  selectable?: boolean;
55
61
  maxLength?: number;
56
62
  maxLengthTooltip?: string;
63
+ validationPattern?: string;
64
+ validationErrorText?: string;
57
65
  }>, {
58
66
  isInvalid: boolean;
59
67
  label: string;
@@ -70,11 +78,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
70
78
  maxLength: any;
71
79
  iconType: string;
72
80
  maxLengthTooltip: string;
81
+ validationPattern: string;
82
+ validationErrorText: string;
73
83
  }>>> & {
74
84
  onRemove?: () => any;
75
85
  "onUpdate:label"?: (value: string) => any;
76
86
  onStopEditing?: () => any;
77
87
  "onUpdate:isSelected"?: (value: boolean) => any;
88
+ onValidationError?: (value: string) => any;
89
+ onValidationSuccess?: () => any;
78
90
  }, {
79
91
  label: string;
80
92
  testId: string;
@@ -91,6 +103,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
91
103
  isInvalid: boolean;
92
104
  selectable: boolean;
93
105
  maxLengthTooltip: string;
106
+ validationPattern: string;
107
+ validationErrorText: string;
94
108
  }>;
95
109
  export default _default;
96
110
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
package/components/tag/Tag.vue.js CHANGED
@@ -1,7 +1,7 @@
1
- import e from "./Tag.vue2.js";
2
- /* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../Tag.vue_vue_type_style_index_0_scoped_11fee894_lang.css"; //*');
4
- const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-11fee894"]]);
1
+ import o from "./Tag.vue2.js";
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"]]);
5
5
  export {
6
- p as default
6
+ t 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_11fee894_lang.css"; import { defineComponent as P, ref as s, computed as d, watch as L, nextTick as N, openBlock as f, createBlock as C, unref as l, withCtx as m, createVNode as w, createTextVNode as E, toDisplayString as T, normalizeClass as p, normalizeStyle as V, withModifiers as b, createElementVNode as Q, createCommentVNode as R, withDirectives as $, createElementBlock as H, isRef as X, withKeys as K, vModelText as Y, vShow as Z } from "vue";
2
- import O from "../typography/v4/Typography.vue.js";
3
- import D from "../icon/v4/IconV4.vue.js";
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";
4
4
  import "../icon/v4/IconFlag.vue.js";
5
- import _ from "../chip/v4/ChipV4.vue.js";
6
- import ee from "../tooltip/v4/TooltipV4.vue.js";
7
- const ae = { class: "tag-content" }, le = ["placeholder", "maxlength", "onKeyup"], ue = /* @__PURE__ */ P({
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({
8
8
  __name: "Tag",
9
9
  props: {
10
10
  label: { default: "" },
@@ -22,35 +22,66 @@ const ae = { class: "tag-content" }, le = ["placeholder", "maxlength", "onKeyup"
22
22
  editable: { type: Boolean, default: !1 },
23
23
  selectable: { type: Boolean, default: !0 },
24
24
  maxLength: { default: void 0 },
25
- maxLengthTooltip: { default: "Character limit reached" }
25
+ maxLengthTooltip: { default: "Character limit reached" },
26
+ validationPattern: { default: "" },
27
+ validationErrorText: { default: "Invalid format" }
26
28
  },
27
- emits: ["update:label", "remove", "stopEditing", "update:isSelected"],
28
- setup(a, { emit: v }) {
29
- const e = a, r = s(!1), y = s(null), k = s(void 0), h = s(!1), u = s(!1), i = s(e.isSelected || e.editable), z = d(() => !e.label && !r.value && e.placeholder), I = d(() => e.maxLength && o.value.length >= e.maxLength && r.value), g = d(() => e.disabled || !e.selectable || r.value ? "outlined" : u.value ? "filled" : !i.value && !e.editable ? "outlined" : e.variant), W = d(() => e.disabled ? "default" : e.isInvalid ? "error" : i.value || !i.value && e.editable || !e.selectable ? e.color : "default"), o = d({
29
+ 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)
33
+ return !0;
34
+ try {
35
+ return new RegExp(e.validationPattern).test(l.value);
36
+ } catch {
37
+ return !0;
38
+ }
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({
30
40
  get: () => e.label,
31
41
  set: (n) => {
32
- v("update:label", n);
42
+ u("update:label", n);
43
+ }
44
+ });
45
+ I(
46
+ () => [l.value, r.value],
47
+ () => {
48
+ e.validationPattern && r.value && l.value && (y.value ? u("validationSuccess") : u("validationError", e.validationErrorText));
49
+ }
50
+ );
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) {
57
+ setTimeout(() => {
58
+ C();
59
+ }, 0);
60
+ return;
61
+ }
62
+ E();
63
+ }, E = () => {
64
+ if (e.validationPattern && l.value && !y.value) {
65
+ setTimeout(() => {
66
+ C();
67
+ }, 0);
68
+ return;
33
69
  }
34
- }), M = s(null), F = () => M.value?.focus(), U = async () => {
35
- e.disabled || !e.selectable || (e.editable ? (r.value = !0, await N(), F()) : (i.value = !i.value, v("update:isSelected", i.value)));
36
- }, j = () => {
37
- v("stopEditing"), x();
38
- }, x = () => {
39
- r.value = !1, !o.value && !e.placeholder && v("remove");
70
+ r.value = !1, !l.value && !e.placeholder && u("remove"), u("stopEditing");
40
71
  };
41
- L(
42
- () => [o.value, e.placeholder, r.value],
72
+ I(
73
+ () => [l.value, e.placeholder, r.value],
43
74
  async () => {
44
- await N(), r.value && y.value ? k.value = y.value.offsetWidth + "px" : k.value = void 0;
75
+ await R(), r.value && k.value ? x.value = k.value.offsetWidth + "px" : x.value = void 0;
45
76
  },
46
77
  { immediate: !0 }
47
- ), L(
78
+ ), I(
48
79
  () => e.editable,
49
80
  () => {
50
- e.editable && (i.value = !0);
81
+ e.editable && (o.value = !0);
51
82
  }
52
83
  );
53
- const B = {
84
+ const V = {
54
85
  default: "var(--default-outlined-border)",
55
86
  primary: "var(--primary-main)",
56
87
  info: "var(--info-dark)",
@@ -58,7 +89,7 @@ const ae = { class: "tag-content" }, le = ["placeholder", "maxlength", "onKeyup"
58
89
  warning: "var(--warning-main)",
59
90
  success: "var(--success-main)",
60
91
  dark: "var(--common-divider)"
61
- }, S = {
92
+ }, N = {
62
93
  default: "var(--action-active)",
63
94
  primary: "var(--primary-dark)",
64
95
  info: "var(--info-dark)",
@@ -66,7 +97,7 @@ const ae = { class: "tag-content" }, le = ["placeholder", "maxlength", "onKeyup"
66
97
  warning: "var(--warning-dark)",
67
98
  success: "var(--success-dark)",
68
99
  dark: "var(--common-divider)"
69
- }, q = {
100
+ }, G = {
70
101
  default: "var(--action-active)",
71
102
  primary: "var(--primary-darker)",
72
103
  info: "var(--info-darker)",
@@ -74,143 +105,145 @@ const ae = { class: "tag-content" }, le = ["placeholder", "maxlength", "onKeyup"
74
105
  warning: "var(--warning-darker)",
75
106
  success: "var(--success-darker)",
76
107
  dark: "var(--common-divider)"
77
- }, A = d(() => {
108
+ }, J = d(() => {
78
109
  if (e.disabled)
79
110
  return "var(--action-disabled)";
80
111
  const n = e.isInvalid ? "error" : e.color;
81
- return h.value ? q[n] : S[n];
82
- }), G = d(() => {
112
+ return T.value ? G[n] : N[n];
113
+ }), Q = d(() => {
83
114
  if (e.disabled)
84
115
  return "var(--action-disabled)";
85
116
  const n = e.isInvalid ? "error" : e.color;
86
- return i.value || !e.selectable ? S[n] : "var(--action-active)";
87
- }), J = d(() => {
117
+ return o.value || !e.selectable ? N[n] : "var(--action-active)";
118
+ }), X = d(() => {
88
119
  if (e.editable && e.variant !== "outlined" || !e.selectable) {
89
- const n = r.value ? B[e.color] : "var(--primary-main-50-p)";
120
+ const n = r.value ? V[e.color] : "var(--primary-main-50-p)";
90
121
  return {
91
- "--outline-color": e.isInvalid ? B.error : n
122
+ "--outline-color": e.isInvalid ? V.error : n
92
123
  };
93
124
  }
94
- return u.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
95
- "--outline-color": i.value ? "var(--primary-main-50-p)" : "var(--action-active)"
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)"
96
127
  } : {};
97
128
  });
98
- return (n, t) => (f(), C(l(ee), {
129
+ return (n, i) => (m(), M(t(le), {
99
130
  placement: "top",
100
- text: a.maxLengthTooltip,
101
- "is-open": l(I),
102
- disabled: !l(I),
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),
135
+ trigger: "click",
103
136
  distance: 10,
104
137
  skidding: 10
105
138
  }, {
106
- tooltip: m(() => [
107
- w(l(O), { variant: "body2" }, {
108
- default: m(() => [
109
- E(T(a.maxLengthTooltip), 1)
139
+ tooltip: b(() => [
140
+ z(t(W), { variant: "body2" }, {
141
+ default: b(() => [
142
+ P(S(t(v) ? a.validationErrorText : a.maxLengthTooltip), 1)
110
143
  ]),
111
144
  _: 1
112
145
  })
113
146
  ]),
114
- default: m(() => [
115
- w(l(_), {
116
- class: p({
147
+ default: b(() => [
148
+ z(t(te), {
149
+ class: h({
117
150
  "rounded-tag": a.rounded,
118
- "tag-editing": r.value && l(g) !== "outlined",
151
+ "tag-editing": r.value && t(p) !== "outlined",
119
152
  // outlined chips have an outline
120
- "tag-hover-outline": a.label && u.value && l(g) !== "outlined",
153
+ "tag-hover-outline": a.label && s.value && t(p) !== "outlined",
121
154
  // outlined chips have an outline
122
- "unselected-tag-hover-outline": a.label && u.value && l(g) !== "outlined" && !i.value && !a.editable,
155
+ "unselected-tag-hover-outline": a.label && s.value && t(p) !== "outlined" && !o.value && !a.editable,
123
156
  // for unselected tags that are not editable, we want to show a hover outline
124
157
  "tag-disabled": a.disabled,
125
- "empty-tag": l(z),
126
- "unselected-tag": !i.value && a.selectable && a.label && !u.value,
158
+ "empty-tag": t(B),
159
+ "unselected-tag": !o.value && a.selectable && a.label && !s.value,
127
160
  "editable-tag": a.editable && !a.disabled
128
161
  }),
129
- label: l(o),
162
+ label: t(l),
130
163
  "test-id": a.testId,
131
- color: l(W),
164
+ color: t(U),
132
165
  size: a.size,
133
- variant: l(g),
166
+ variant: t(p),
134
167
  disabled: a.disabled,
135
- style: V(l(J)),
136
- onMouseover: t[5] || (t[5] = (c) => u.value = !0),
137
- onMouseleave: t[6] || (t[6] = (c) => u.value = !1),
138
- onClick: b(U, ["stop"])
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"])
139
172
  }, {
140
- default: m(() => [
141
- Q("div", ae, [
142
- a.iconName ? (f(), C(l(D), {
173
+ default: b(() => [
174
+ Z("div", re, [
175
+ a.iconName ? (m(), M(t(F), {
143
176
  key: 0,
144
177
  name: a.iconName,
145
178
  size: "16px",
146
- color: l(G),
179
+ color: t(Q),
147
180
  class: "tag-icon",
148
181
  type: a.iconType
149
- }, null, 8, ["name", "color", "type"])) : R("", !0),
150
- r.value ? $((f(), H("input", {
182
+ }, null, 8, ["name", "color", "type"])) : H("", !0),
183
+ r.value ? K((m(), O("input", {
151
184
  key: 2,
152
185
  ref_key: "inputRef",
153
- ref: M,
154
- "onUpdate:modelValue": t[0] || (t[0] = (c) => X(o) ? o.value = c : null),
186
+ ref: L,
187
+ "onUpdate:modelValue": i[0] || (i[0] = (f) => _(l) ? l.value = f : null),
155
188
  placeholder: a.placeholder,
156
- class: p(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
189
+ class: h(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
157
190
  spellcheck: "false",
158
- style: V({ width: k.value }),
191
+ style: $({ width: x.value }),
159
192
  maxlength: a.maxLength,
160
- onBlur: j,
193
+ onBlur: A,
161
194
  onKeyup: [
162
- K(b(x, ["prevent"]), ["enter"]),
163
- K(b(x, ["prevent"]), ["esc"])
195
+ D(g(E, ["prevent"]), ["enter"]),
196
+ D(g(E, ["prevent"]), ["esc"])
164
197
  ]
165
- }, null, 46, le)), [
198
+ }, null, 46, ie)), [
166
199
  [
167
- Y,
168
- l(o),
200
+ ee,
201
+ t(l),
169
202
  void 0,
170
203
  { trim: !0 }
171
204
  ]
172
- ]) : (f(), C(l(O), {
205
+ ]) : (m(), M(t(W), {
173
206
  key: 1,
174
207
  variant: "chipLabel",
175
- class: p(["tag-label", {
176
- "tag-label--placeholder": !l(o) && a.placeholder,
208
+ class: h(["tag-label", {
209
+ "tag-label--placeholder": !t(l) && a.placeholder,
177
210
  "tag-label--disabled": a.disabled
178
211
  }])
179
212
  }, {
180
- default: m(() => [
181
- E(T(l(o) || a.placeholder), 1)
213
+ default: b(() => [
214
+ P(S(t(l) || a.placeholder), 1)
182
215
  ]),
183
216
  _: 1
184
217
  }, 8, ["class"])),
185
- r.value ? (f(), H("span", {
218
+ r.value ? (m(), O("span", {
186
219
  key: 3,
187
220
  ref_key: "sizerRef",
188
- ref: y,
221
+ ref: k,
189
222
  class: "tag-input-sizer"
190
- }, T(l(o) || a.placeholder || ""), 513)) : R("", !0)
223
+ }, S(t(l) || a.placeholder || ""), 513)) : H("", !0)
191
224
  ]),
192
- $(w(l(D), {
193
- class: p(["clear-button", { "clear-button--invalid": a.isInvalid }]),
225
+ K(z(t(F), {
226
+ class: h(["clear-button", { "clear-button--invalid": a.isInvalid || t(v) }]),
194
227
  name: "x-circle",
195
228
  size: "16px",
196
229
  type: "fill",
197
- color: l(A),
198
- onMousedown: t[1] || (t[1] = b(() => {
230
+ color: t(J),
231
+ onMousedown: i[1] || (i[1] = g(() => {
199
232
  }, ["prevent"])),
200
- onMouseover: t[2] || (t[2] = (c) => h.value = !0),
201
- onMouseleave: t[3] || (t[3] = (c) => h.value = !1),
202
- onClick: t[4] || (t[4] = b((c) => v("remove"), ["stop"]))
203
- }, null, 8, ["class", "color"]), [
204
- [Z, a.editable && !l(z) && a.selectable]
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))]
205
238
  ])
206
239
  ]),
207
240
  _: 1
208
241
  }, 8, ["class", "label", "test-id", "color", "size", "variant", "disabled", "style", "onClick"])
209
242
  ]),
210
243
  _: 1
211
- }, 8, ["text", "is-open", "disabled"]));
244
+ }, 8, ["text", "is-open", "shown", "disabled"]));
212
245
  }
213
246
  });
214
247
  export {
215
- ue as default
248
+ ce as default
216
249
  };
package/components/tag/index.d.ts CHANGED
@@ -65,11 +65,21 @@ declare const TagTypes: () => import("vue").DefineComponent<{
65
65
  type: import("vue").PropType<string>;
66
66
  default: string;
67
67
  };
68
+ validationPattern: {
69
+ type: import("vue").PropType<string>;
70
+ default: string;
71
+ };
72
+ validationErrorText: {
73
+ type: import("vue").PropType<string>;
74
+ default: string;
75
+ };
68
76
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
69
77
  "update:label": (value: string) => void;
70
78
  remove: () => void;
71
79
  stopEditing: () => void;
72
80
  "update:isSelected": (value: boolean) => void;
81
+ validationError: (value: string) => void;
82
+ validationSuccess: () => void;
73
83
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
74
84
  label: {
75
85
  type: import("vue").PropType<string>;
@@ -136,11 +146,21 @@ declare const TagTypes: () => import("vue").DefineComponent<{
136
146
  type: import("vue").PropType<string>;
137
147
  default: string;
138
148
  };
149
+ validationPattern: {
150
+ type: import("vue").PropType<string>;
151
+ default: string;
152
+ };
153
+ validationErrorText: {
154
+ type: import("vue").PropType<string>;
155
+ default: string;
156
+ };
139
157
  }>> & {
140
158
  onRemove?: () => any;
141
159
  "onUpdate:label"?: (value: string) => any;
142
160
  onStopEditing?: () => any;
143
161
  "onUpdate:isSelected"?: (value: boolean) => any;
162
+ onValidationError?: (value: string) => any;
163
+ onValidationSuccess?: () => any;
144
164
  }, {
145
165
  label: string;
146
166
  testId: string;
@@ -157,5 +177,7 @@ declare const TagTypes: () => import("vue").DefineComponent<{
157
177
  isInvalid: boolean;
158
178
  selectable: boolean;
159
179
  maxLengthTooltip: string;
180
+ validationPattern: string;
181
+ validationErrorText: string;
160
182
  }>[];
161
183
  export { Tag, TagTypes };
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import './IncludeExcludeAppHeader.vue_vue_type_style_index_0_scoped_947cb1fc_lang.css';
1
+ import './IncludeExclude.vue_vue_type_style_index_0_scoped_cc2adbf5_lang.css';
2
2
  import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
3
3
  import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
4
4
  import { MenuItemTypes as ao } from "./components/menuItem/index.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ironsource/shared-ui",
3
- "version": "2.2.0-rc.39",
3
+ "version": "2.2.0-rc.40",
4
4
  "engines": {
5
5
  "npm": ">=7.0.0",
6
6
  "node": ">=16.0.0"
package/Tag.vue_vue_type_style_index_0_scoped_11fee894_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-11fee894],.font-chart-2[data-v-11fee894],.font-chart-1[data-v-11fee894]{font-family:Inter,sans-serif;font-weight:700}.tag-input-sizer[data-v-11fee894],.tag-input[data-v-11fee894],.font-chip-label[data-v-11fee894],.font-table-label[data-v-11fee894],.font-button[data-v-11fee894],.font-heading-6[data-v-11fee894],.font-heading-5[data-v-11fee894],.font-heading-4[data-v-11fee894],.font-heading-3[data-v-11fee894],.font-heading-2[data-v-11fee894],.font-heading-1[data-v-11fee894],.font-title[data-v-11fee894]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-11fee894],.font-input-label[data-v-11fee894],.font-overline[data-v-11fee894],.font-subtitle-2[data-v-11fee894],.font-subtitle-1[data-v-11fee894]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-11fee894],.font-body-2[data-v-11fee894],.font-body-1[data-v-11fee894]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-11fee894]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-11fee894]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-11fee894]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-11fee894]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-11fee894]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-11fee894]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-11fee894]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-11fee894]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-11fee894]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-11fee894]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-11fee894]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-11fee894]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-11fee894]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-11fee894]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-11fee894]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-11fee894]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-11fee894]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-11fee894]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-11fee894],.font-tab-label2[data-v-11fee894]{font-size:.875rem;line-height:1rem}.tag-input-sizer[data-v-11fee894],.tag-input[data-v-11fee894],.font-chip-label[data-v-11fee894]{font-size:.75rem;line-height:1rem}h1[data-v-11fee894],h2[data-v-11fee894],h3[data-v-11fee894],h4[data-v-11fee894],h5[data-v-11fee894],h6[data-v-11fee894]{margin:0}.rounded-tag[data-v-11fee894]{border-radius:100px}.tag-editing[data-v-11fee894]{outline:1px solid var(--outline-color)}.unselected-tag-hover-outline[data-v-11fee894]{background-color:var(--action-hover)}.tag-hover-outline[data-v-11fee894]{outline:1px solid var(--outline-color);cursor:pointer}.unselected-tag[data-v-11fee894]{outline:1px solid var(--action-outlined-border)}.tag-disabled[data-v-11fee894]{background-color:transparent;outline:1px solid var(--action-disabled)}.tag-content[data-v-11fee894]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.tag-icon[data-v-11fee894]{margin-right:.25rem}.tag-label[data-v-11fee894]{user-select:none;min-width:.5rem}.tag-label--disabled[data-v-11fee894]{color:var(--action-disabled)}.tag-label--hidden[data-v-11fee894]{visibility:hidden}.tag-input[data-v-11fee894]{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-11fee894]:focus{outline:none}.tag-input-outline[data-v-11fee894]::placeholder{color:var(--action-disabled)}.clear-button[data-v-11fee894]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-11fee894]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-11fee894]{color:var(--error-dark)}.clear-button--invalid[data-v-11fee894]:hover{color:var(--error-darker)}.tag-input-sizer[data-v-11fee894]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}.editable-tag[data-v-11fee894]{cursor:text}.empty-tag[data-v-11fee894]{background-color:transparent;outline:1px dashed var(--action-outlined-border);color:var(--text-secondary)}.empty-tag[data-v-11fee894]:hover:not(.tag-disabled){outline:1px dashed var(--action-active)}