@ironsource/shared-ui 2.2.0-rc.4 → 2.2.0-rc.41

package/components/tag/Tag.vue2.js

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

package/components/tag/index.d.ts

@@ -0,0 +1,183 @@
+import Tag from './Tag.vue';
+declare const TagTypes: () => import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"filled" | "outlined">;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium">;
+        default: string;
+    };
+    iconName: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxLength: {
+        type: import("vue").PropType<number>;
+        default: any;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isSelected: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    iconType: {
+        type: import("vue").PropType<"fill" | "regular">;
+        default: string;
+    };
+    editable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    selectable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxLengthTooltip: {
+        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>;
+        required: true;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"filled" | "outlined">;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium">;
+        default: string;
+    };
+    iconName: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxLength: {
+        type: import("vue").PropType<number>;
+        default: any;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isSelected: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    iconType: {
+        type: import("vue").PropType<"fill" | "regular">;
+        default: string;
+    };
+    editable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    selectable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxLengthTooltip: {
+        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;
+    variant: "filled" | "outlined";
+    disabled: boolean;
+    color: "dark" | "default" | "primary" | "info" | "success" | "warning" | "error";
+    size: "small" | "medium";
+    iconName: string;
+    rounded: boolean;
+    maxLength: number;
+    placeholder: string;
+    iconType: "fill" | "regular";
+    editable: boolean;
+    isInvalid: boolean;
+    selectable: boolean;
+    maxLengthTooltip: string;
+    validationPattern: string;
+    validationErrorText: string;
+}>[];
+export { Tag, TagTypes };

package/components/tag/index.js

@@ -0,0 +1,6 @@
+import o from "./Tag.vue.js";
+const r = () => [o];
+export {
+  o as Tag,
+  r as TagTypes
+};

package/components/tagsField/index.d.ts

@@ -1,5 +1,44 @@
 import TagsField from './TagsField.vue';
-declare const TagsFieldTypes: () => import("vue").DefineComponent<{
+import TagsFieldChip from './TagsFieldChip.vue';
+declare const TagsFieldTypes: () => (import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:label": (value: string) => void;
+    remove: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onRemove?: () => any;
+    "onUpdate:label"?: (value: string) => any;
+}, {
+    label: string;
+    testId: string;
+    isInvalid: boolean;
+}> | import("vue").DefineComponent<{
     testId: {
         type: import("vue").PropType<string>;
         default: string;
@@ -71,5 +110,5 @@ declare const TagsFieldTypes: () => import("vue").DefineComponent<{
     feedbackText: string;
     feedbackVariant: "success" | "warning" | "error";
     showFeedbackTextIcon: boolean;
-}>[];
-export { TagsField, TagsFieldTypes };
+}>)[];
+export { TagsField, TagsFieldChip, TagsFieldTypes };

package/components/tagsField/index.js

@@ -1,6 +1,8 @@
-import e from "./TagsField.vue.js";
-const s = () => [e];
+import i from "./TagsField.vue.js";
+import o from "./TagsFieldChip.vue.js";
+const r = () => [i, o];
 export {
-  e as TagsField,
-  s as TagsFieldTypes
+  i as TagsField,
+  o as TagsFieldChip,
+  r as TagsFieldTypes
 };

package/components/textArea/v4/TextAreaV4.vue.js

@@ -1,7 +1,7 @@
 import e from "./TextAreaV4.vue2.js";
 /* empty css                 */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_4114ef89_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4114ef89"]]);
+// import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_0feea75e_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-0feea75e"]]);
 export {
-  p as default
+  a as default
 };

package/components/textArea/v4/TextAreaV4.vue2.js

@@ -1,4 +1,4 @@
- import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_4114ef89_lang.css"; import { defineComponent as f, computed as b, openBlock as t, createElementBlock as r, mergeProps as c, unref as a, createBlock as d, createCommentVNode as l, createElementVNode as g } from "vue";
+ import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_0feea75e_lang.css"; import { defineComponent as f, computed as b, openBlock as t, createElementBlock as r, mergeProps as c, unref as a, createBlock as d, createCommentVNode as l, createElementVNode as g } from "vue";
 import v from "../../shared/FieldLabel.vue.js";
 import k from "../../shared/FieldMaxLength.vue.js";
 import T from "../../shared/FieldHelpText.vue.js";

package/components/tooltip/v4/TooltipV4.vue.d.ts

@@ -14,6 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown?: boolean;
     autoHide?: boolean;
     dontWrapDisabled?: boolean;
+    maxWidth?: string;
 }>, {
     text: any;
     header: any;
@@ -29,6 +30,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown: any;
     autoHide: boolean;
     dontWrapDisabled: boolean;
+    maxWidth: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     show: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -46,6 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown?: boolean;
     autoHide?: boolean;
     dontWrapDisabled?: boolean;
+    maxWidth?: string;
 }>, {
     text: any;
     header: any;
@@ -61,6 +64,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown: any;
     autoHide: boolean;
     dontWrapDisabled: boolean;
+    maxWidth: string;
 }>>> & {
     onShow?: () => any;
 }, {
@@ -78,6 +82,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown: boolean;
     autoHide: boolean;
     dontWrapDisabled: boolean;
+    maxWidth: string;
 }>, {
     default?(_: {}): any;
     tooltip?(_: {

package/components/tooltip/v4/TooltipV4.vue.js

@@ -1,8 +1,8 @@
 import o from "./TooltipV4.vue2.js";
 /* empty css                *//* empty css                */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TooltipV4.vue_vue_type_style_index_0_scoped_8a451e54_lang.css"; //*');
+// import "../../../TooltipV4.vue_vue_type_style_index_0_scoped_a8aebfee_lang.css"; //*');
 // import "../../../TooltipV4.vue_vue_type_style_index_1_lang.css";  //');
-const l = /* @__PURE__ */ e(o, [["__scopeId", "data-v-8a451e54"]]);
+const l = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a8aebfee"]]);
 export {
   l as default
 };