@ironsource/shared-ui 2.2.0-test.9 → 2.2.0-test.90

package/components/tag/Tag.vue2.js

@@ -1,10 +1,10 @@
- import "../../Tag.vue_vue_type_style_index_0_scoped_043adaf5_lang.css"; import { defineComponent as J, ref as u, computed as d, watch as S, nextTick as E, openBlock as v, createElementBlock as C, normalizeStyle as T, createVNode as y, unref as l, withCtx as f, createElementVNode as V, createTextVNode as R, toDisplayString as z, normalizeClass as h, withModifiers as m, createBlock as $, createCommentVNode as O, withDirectives as H, isRef as Q, withKeys as K, vModelText as X, vShow as Z } from "vue";
-import D from "../typography/v4/Typography.vue.js";
-import W from "../icon/v4/IconV4.vue.js";
+ 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";
+import R from "../typography/v4/Typography.vue.js";
+import P from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import _ from "../chip/v4/ChipV4.vue.js";
-import ee from "../popover/v4/PopoverV4.vue.js";
-const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, te = ["placeholder", "maxlength", "onKeyup"], se = /* @__PURE__ */ J({
+import te from "../chip/v4/ChipV4.vue.js";
+import G from "../tooltip/v4/TooltipV4.vue.js";
+const ie = { class: "tag-content" }, re = ["placeholder", "maxlength", "onKeyup"], ce = /* @__PURE__ */ _({
   __name: "Tag",
   props: {
     label: { default: "" },
@@ -18,41 +18,76 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
     variant: { default: "filled" },
     placeholder: { default: "" },
     iconName: { default: "" },
+    iconType: { default: "regular" },
     editable: { type: Boolean, default: !1 },
+    removable: { type: Boolean, default: !1 },
     selectable: { type: Boolean, default: !0 },
     maxLength: { default: void 0 },
-    maxLengthTooltip: { default: "You have reached the maximum number of characters" }
+    maxLengthTooltip: { default: "Character limit reached" },
+    validationPattern: { default: "" },
+    validationErrorText: { default: "Invalid format" }
   },
-  emits: ["update:label", "remove", "stopEditing"],
-  setup(a, { emit: b }) {
-    const e = a, r = u(!1), k = u(null), g = u(void 0), x = u(!1), s = u(!1), i = u(e.isSelected || e.editable), I = d(() => !e.label && !r.value && e.placeholder), M = d(() => (console.log(
-      "isTooltipOpen",
-      e.maxLength && o.value.length >= e.maxLength && r.value
-    ), e.maxLength && o.value.length >= e.maxLength && r.value)), p = d(() => e.disabled || !e.selectable || r.value ? "outlined" : s.value ? "filled" : !i.value && !e.editable ? "outlined" : e.variant), F = d(() => e.disabled ? "default" : e.isInvalid ? "error" : i.value || !i.value && e.editable || !e.selectable ? e.color : "default"), o = d({
+  emits: ["update:label", "remove", "stopEditing", "update:isSelected", "validationError", "validationSuccess"],
+  setup(a, { emit: d }) {
+    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(() => {
+      if (!e.validationPattern || !i.value)
+        return !0;
+      try {
+        return new RegExp(e.validationPattern).test(i.value);
+      } catch {
+        return !0;
+      }
+    }), 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({
       get: () => e.label,
-      set: (n) => {
-        b("update:label", n);
+      set: (o) => {
+        d("update:label", o);
+      }
+    });
+    C(
+      () => [i.value, r.value],
+      () => {
+        e.validationPattern && r.value && i.value && (x.value ? d("validationSuccess") : d("validationError", e.validationErrorText));
+      }
+    );
+    const $ = b(null), S = () => $.value?.focus(), D = () => {
+      d("remove");
+    }, Q = async () => {
+      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)));
+    }, X = () => {
+      if (e.validationPattern && i.value && !x.value) {
+        setTimeout(() => {
+          S();
+        }, 0);
+        return;
+      }
+      z();
+    }, z = () => {
+      if (e.validationPattern && i.value && !x.value) {
+        setTimeout(() => {
+          S();
+        }, 0);
+        return;
       }
-    }), B = u(null), P = () => B.value?.focus(), U = async () => {
-      e.disabled || !e.selectable || (e.editable ? (r.value = !0, await E(), P()) : i.value = !i.value);
-    }, Y = () => {
-      b("stopEditing"), w();
-    }, w = () => {
-      r.value = !1, !o.value && !e.placeholder && b("remove");
+      r.value = !1, !i.value && !e.placeholder && d("remove"), d("stopEditing");
     };
-    S(
-      () => [o.value, e.placeholder, r.value],
+    C(
+      () => [i.value, e.placeholder, r.value],
       async () => {
-        await E(), r.value && k.value ? g.value = k.value.offsetWidth + "px" : g.value = void 0;
+        await W(), r.value && T.value ? M.value = T.value.offsetWidth + "px" : M.value = void 0;
       },
       { immediate: !0 }
-    ), S(
+    ), C(
       () => e.editable,
       () => {
-        e.editable && (i.value = !0);
+        e.editable && (n.value = !0);
+      }
+    ), C(
+      () => e.isSelected,
+      (o) => {
+        n.value = o;
       }
     );
-    const L = {
+    const H = {
       default: "var(--default-outlined-border)",
       primary: "var(--primary-main)",
       info: "var(--info-dark)",
@@ -60,7 +95,7 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
       warning: "var(--warning-main)",
       success: "var(--success-main)",
       dark: "var(--common-divider)"
-    }, N = {
+    }, B = {
       default: "var(--action-active)",
       primary: "var(--primary-dark)",
       info: "var(--info-dark)",
@@ -68,7 +103,7 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
       warning: "var(--warning-dark)",
       success: "var(--success-dark)",
       dark: "var(--common-divider)"
-    }, j = {
+    }, K = {
       default: "var(--action-active)",
       primary: "var(--primary-darker)",
       info: "var(--info-darker)",
@@ -76,148 +111,185 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
       warning: "var(--warning-darker)",
       success: "var(--success-darker)",
       dark: "var(--common-divider)"
-    }, q = d(() => {
+    }, O = u(() => {
       if (e.disabled)
         return "var(--action-disabled)";
-      const n = e.isInvalid ? "error" : e.color;
-      return x.value ? j[n] : N[n];
-    }), A = d(() => {
+      const o = e.isInvalid ? "error" : e.color;
+      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];
+    }), Y = u(() => {
       if (e.disabled)
         return "var(--action-disabled)";
-      const n = e.isInvalid ? "error" : e.color;
-      return i.value || !e.selectable ? N[n] : "var(--action-active)";
-    }), G = d(() => {
+      const o = e.isInvalid ? "error" : e.color;
+      return n.value || !e.selectable ? B[o] : "var(--action-active)";
+    }), Z = u(() => {
       if (e.editable && e.variant !== "outlined" || !e.selectable) {
-        const n = r.value ? L[e.color] : "var(--primary-main-50-p)";
+        const o = r.value ? H[e.color] : "var(--primary-main-50-p)";
         return {
-          "--outline-color": e.isInvalid ? L.error : n
+          "--outline-color": e.isInvalid ? H.error : o
         };
       }
-      return s.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
-        "--outline-color": i.value ? "var(--primary-main-50-p)" : "var(--action-active)"
+      return f.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
+        "--outline-color": n.value ? "var(--primary-main-50-p)" : "var(--action-active)"
       } : {};
     });
-    return (n, t) => (v(), C("div", {
-      style: T(r.value ? { width: g.value } : void 0)
-    }, [
-      y(l(ee), {
-        placement: "top",
-        text: a.maxLengthTooltip,
-        "is-open": l(M),
-        disabled: !l(M),
-        distance: 10,
-        skidding: 10
-      }, {
-        content: f(() => [
-          V("div", ae, [
-            y(l(D), { variant: "body2" }, {
-              default: f(() => [
-                R(z(a.maxLengthTooltip), 1)
+    return (o, t) => (g(), k(l(G), {
+      placement: "top",
+      text: l(v) ? a.validationErrorText : a.maxLengthTooltip,
+      "is-open": l(I) || l(v),
+      shown: l(I) || l(v).length > 0,
+      disabled: !l(I) && !l(v),
+      trigger: "click",
+      distance: 10,
+      skidding: 10
+    }, {
+      tooltip: s(() => [
+        w(l(R), { variant: "body2" }, {
+          default: s(() => [
+            L(V(l(v) ? a.validationErrorText : a.maxLengthTooltip), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      default: s(() => [
+        w(l(te), {
+          class: h({
+            "rounded-tag": a.rounded,
+            "tag-editing": r.value && l(p) !== "outlined",
+            // outlined chips have an outline
+            "tag-hover-outline": a.label && f.value && l(p) !== "outlined",
+            // outlined chips have an outline
+            "unselected-tag-hover-outline": a.label && f.value && l(p) !== "outlined" && !n.value && !a.editable,
+            // for unselected tags that are not editable, we want to show a hover outline
+            "tag-disabled": a.disabled,
+            "empty-tag": l(E),
+            "unselected-tag": !n.value && a.selectable && a.label && !f.value,
+            "editable-tag": a.editable && !a.disabled && !a.removable
+          }),
+          label: l(i),
+          "test-id": a.testId,
+          color: l(J),
+          size: a.size,
+          variant: l(p),
+          disabled: a.disabled,
+          style: F(l(Z)),
+          onMouseover: t[7] || (t[7] = (m) => f.value = !0),
+          onMouseleave: t[8] || (t[8] = (m) => f.value = !1),
+          onClick: y(Q, ["stop"])
+        }, {
+          default: s(() => [
+            ee("div", ie, [
+              a.iconName ? (g(), k(l(P), {
+                key: 0,
+                name: a.iconName,
+                size: "16px",
+                color: l(Y),
+                class: "tag-icon",
+                type: a.iconType
+              }, null, 8, ["name", "color", "type"])) : U("", !0),
+              r.value ? N((g(), j("input", {
+                key: 2,
+                ref_key: "inputRef",
+                ref: $,
+                "onUpdate:modelValue": t[0] || (t[0] = (m) => ae(i) ? i.value = m : null),
+                placeholder: a.placeholder,
+                class: h(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
+                spellcheck: "false",
+                style: F({ width: M.value }),
+                maxlength: a.maxLength,
+                onBlur: X,
+                onKeyup: [
+                  q(y(z, ["prevent"]), ["enter"]),
+                  q(y(z, ["prevent"]), ["esc"])
+                ]
+              }, null, 46, re)), [
+                [
+                  le,
+                  l(i),
+                  void 0,
+                  { trim: !0 }
+                ]
+              ]) : (g(), k(l(R), {
+                key: 1,
+                variant: "chipLabel",
+                class: h(["tag-label", {
+                  "tag-label--placeholder": !l(i) && a.placeholder,
+                  "tag-label--disabled": a.disabled
+                }])
+              }, {
+                default: s(() => [
+                  L(V(l(i) || a.placeholder), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])),
+              r.value ? (g(), j("span", {
+                key: 3,
+                ref_key: "sizerRef",
+                ref: T,
+                class: "tag-input-sizer"
+              }, V(l(i) || a.placeholder || ""), 513)) : U("", !0)
+            ]),
+            a.removable && !a.editable && a.selectable ? (g(), k(l(G), {
+              key: 0,
+              placement: "top",
+              text: "Delete",
+              trigger: "hover",
+              distance: 8,
+              skidding: 0
+            }, {
+              tooltip: s(() => [
+                w(l(R), { variant: "body2" }, {
+                  default: s(() => [
+                    L("Delete")
+                  ]),
+                  _: 1
+                })
               ]),
-              _: 1
-            })
-          ])
-        ]),
-        trigger: f(() => [
-          y(l(_), {
-            class: h({
-              "rounded-tag": a.rounded,
-              "tag-editing": r.value && l(p) !== "outlined",
-              // outlined chips have an outline
-              "tag-hover-outline": a.label && s.value && l(p) !== "outlined",
-              // outlined chips have an outline
-              "unselected-tag-hover-outline": a.label && s.value && l(p) !== "outlined" && !i.value && !a.editable,
-              // for unselected tags that are not editable, we want to show a hover outline
-              "tag-disabled": a.disabled,
-              "empty-tag": l(I),
-              "unselected-tag": !i.value && a.selectable && a.label,
-              "editable-tag": a.editable
-            }),
-            label: l(o),
-            "test-id": a.testId,
-            color: l(F),
-            size: a.size,
-            variant: l(p),
-            disabled: a.disabled,
-            style: T(l(G)),
-            onMouseover: t[5] || (t[5] = (c) => s.value = !0),
-            onMouseleave: t[6] || (t[6] = (c) => s.value = !1),
-            onClick: m(U, ["stop"])
-          }, {
-            default: f(() => [
-              V("div", le, [
-                a.iconName ? (v(), $(l(W), {
-                  key: 0,
-                  name: a.iconName,
+              default: s(() => [
+                N(w(l(P), {
+                  class: h(["clear-button", { "clear-button--invalid": a.isInvalid || l(v) }]),
+                  name: a.editable ? "x-circle" : "trash-simple",
                   size: "16px",
-                  color: l(A),
-                  class: "tag-icon"
-                }, null, 8, ["name", "color"])) : O("", !0),
-                r.value ? H((v(), C("input", {
-                  key: 2,
-                  ref_key: "inputRef",
-                  ref: B,
-                  "onUpdate:modelValue": t[0] || (t[0] = (c) => Q(o) ? o.value = c : null),
-                  placeholder: a.placeholder,
-                  class: h(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
-                  spellcheck: "false",
-                  style: T({ width: g.value }),
-                  maxlength: a.maxLength,
-                  onBlur: Y,
-                  onKeyup: [
-                    K(m(w, ["prevent"]), ["enter"]),
-                    K(m(w, ["prevent"]), ["esc"])
-                  ]
-                }, null, 46, te)), [
+                  type: a.editable ? "fill" : "regular",
+                  color: l(O),
+                  onMousedown: t[1] || (t[1] = y(() => {
+                  }, ["prevent"])),
+                  onMouseover: t[2] || (t[2] = (m) => c.value = !0),
+                  onMouseleave: t[3] || (t[3] = (m) => c.value = !1),
+                  onClick: y(D, ["stop"])
+                }, null, 8, ["class", "name", "type", "color", "onClick"]), [
                   [
-                    X,
-                    l(o),
-                    void 0,
-                    { trim: !0 }
+                    A,
+                    a.editable && a.selectable && (r.value || !l(E)) || a.removable && !a.editable && a.selectable
                   ]
-                ]) : (v(), $(l(D), {
-                  key: 1,
-                  variant: "chipLabel",
-                  class: h(["tag-label", {
-                    "tag-label--placeholder": !l(o) && a.placeholder,
-                    "tag-label--disabled": a.disabled
-                  }])
-                }, {
-                  default: f(() => [
-                    R(z(l(o) || a.placeholder), 1)
-                  ]),
-                  _: 1
-                }, 8, ["class"])),
-                r.value ? (v(), C("span", {
-                  key: 3,
-                  ref_key: "sizerRef",
-                  ref: k,
-                  class: "tag-input-sizer"
-                }, z(l(o) || a.placeholder || ""), 513)) : O("", !0)
+                ])
               ]),
-              H(y(l(W), {
-                class: h(["clear-button", { "clear-button--invalid": a.isInvalid }]),
-                name: "x-circle",
-                size: "16px",
-                type: "fill",
-                color: l(q),
-                onMousedown: t[1] || (t[1] = m(() => {
-                }, ["prevent"])),
-                onMouseover: t[2] || (t[2] = (c) => x.value = !0),
-                onMouseleave: t[3] || (t[3] = (c) => x.value = !1),
-                onClick: t[4] || (t[4] = m((c) => b("remove"), ["stop"]))
-              }, null, 8, ["class", "color"]), [
-                [Z, a.editable && !l(I) && a.selectable]
-              ])
-            ]),
-            _: 1
-          }, 8, ["class", "label", "test-id", "color", "size", "variant", "disabled", "style", "onClick"])
-        ]),
-        _: 1
-      }, 8, ["text", "is-open", "disabled"])
-    ], 4));
+              _: 1
+            })) : N((g(), k(l(P), {
+              key: 1,
+              class: h(["clear-button", { "clear-button--invalid": a.isInvalid || l(v) }]),
+              name: a.editable ? "x-circle" : "trash-simple",
+              size: "16px",
+              type: a.editable ? "fill" : "regular",
+              color: l(O),
+              onMousedown: t[4] || (t[4] = y(() => {
+              }, ["prevent"])),
+              onMouseover: t[5] || (t[5] = (m) => c.value = !0),
+              onMouseleave: t[6] || (t[6] = (m) => c.value = !1),
+              onClick: y(D, ["stop"])
+            }, null, 8, ["class", "name", "type", "color", "onClick"])), [
+              [
+                A,
+                a.editable && a.selectable && (r.value || !l(E)) || a.removable && !a.editable && a.selectable
+              ]
+            ])
+          ]),
+          _: 1
+        }, 8, ["class", "label", "test-id", "color", "size", "variant", "disabled", "style", "onClick"])
+      ]),
+      _: 1
+    }, 8, ["text", "is-open", "shown", "disabled"]));
   }
 });
 export {
-  se as default
+  ce as default
 };

package/components/tag/index.d.ts

@@ -45,6 +45,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         required: true;
     };
+    iconType: {
+        type: import("vue").PropType<"fill" | "regular">;
+        default: string;
+    };
     editable: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -53,6 +57,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    removable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     selectable: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -61,10 +69,21 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    validationPattern: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    validationErrorText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:label": (value: string) => void;
     remove: () => void;
     stopEditing: () => void;
+    "update:isSelected": (value: boolean) => void;
+    validationError: (value: string) => void;
+    validationSuccess: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: import("vue").PropType<string>;
@@ -111,6 +130,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         required: true;
     };
+    iconType: {
+        type: import("vue").PropType<"fill" | "regular">;
+        default: string;
+    };
     editable: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -119,6 +142,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    removable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     selectable: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -127,10 +154,21 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    validationPattern: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    validationErrorText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
     onStopEditing?: () => any;
+    "onUpdate:isSelected"?: (value: boolean) => any;
+    onValidationError?: (value: string) => any;
+    onValidationSuccess?: () => any;
 }, {
     label: string;
     testId: string;
@@ -142,9 +180,13 @@ declare const TagTypes: () => import("vue").DefineComponent<{
     rounded: boolean;
     maxLength: number;
     placeholder: string;
+    iconType: "fill" | "regular";
     editable: boolean;
     isInvalid: boolean;
+    removable: boolean;
     selectable: boolean;
     maxLengthTooltip: string;
+    validationPattern: string;
+    validationErrorText: string;
 }>[];
 export { Tag, TagTypes };

package/components/tooltip/v3/Tooltip.vue.d.ts

@@ -40,9 +40,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     disabled: boolean;
     testId: string;
 }>>>, {
+    theme: string;
     header: string;
     text: string;
-    theme: string;
     testId: string;
     delay: number;
     triggers: TooltipTriggers[];