@ironsource/shared-ui 2.1.6-rc.7 → 2.1.6-rc.8

package/Autocomplete.vue_vue_type_style_index_0_scoped_a7bfd237_lang.css

@@ -0,0 +1 @@
+div[data-v-a7bfd237]{display:block}.autocomplete-dropdown[data-v-a7bfd237]{position:relative}.footer[data-v-a7bfd237]{display:flex;justify-content:flex-end;align-items:center;margin-top:var(--spacing-50)}

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_ad524750_lang.css

@@ -0,0 +1 @@
+.default-dropdown-wrapper[data-v-ad524750]{position:relative}.dropdown-trigger[data-v-ad524750]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.5rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-ad524750]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-ad524750]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-ad524750]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-ad524750]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-ad524750],.dropdown-trigger.disabled .caret-down[data-v-ad524750]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-ad524750]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-ad524750]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-ad524750]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-ad524750],.dropdown-trigger.state-success[data-v-ad524750],.dropdown-trigger.state-warning[data-v-ad524750]{padding:4px 6px}.dropdown-trigger.state-error.small[data-v-ad524750],.dropdown-trigger.state-success.small[data-v-ad524750],.dropdown-trigger.state-warning.small[data-v-ad524750]{padding:.1875rem .4375rem}.dropdown-trigger.state-error.large[data-v-ad524750],.dropdown-trigger.state-success.large[data-v-ad524750],.dropdown-trigger.state-warning.large[data-v-ad524750]{padding:.5625rem .4375rem}.dropdown-trigger.state-error[data-v-ad524750]{border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-ad524750]{border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-ad524750]{border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-ad524750]{color:var(--action-active)}.content[data-v-ad524750]{width:calc(100% - 28px);display:flex;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-ad524750]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-ad524750]{width:20px;height:20px;flex:none}.content .image img[data-v-ad524750]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-ad524750]{display:flex;color:var(--action-active)}.content .status-dot[data-v-ad524750]{padding-right:.25rem}.content .status-dot>div[data-v-ad524750]{position:relative;top:-1px}.dropdown-field-label[data-v-ad524750]{color:var(--text-primary)}.dropdown-field-help-text[data-v-ad524750]{margin-top:4px;position:absolute}

package/components/autocomplete/Autocomplete.vue.d.ts

@@ -13,6 +13,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showFeedbackTextIcon?: boolean;
     inlineError?: boolean;
     inlineErrorText?: string;
+    maxLength?: number;
     options: unknown[] | {
         id: string;
         text: string;
@@ -37,6 +38,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     feedbackText: string;
     feedbackVariant: any;
     showFeedbackTextIcon: boolean;
+    maxLength: any;
     onSearch: any;
     optionNameKey: string;
     optionsListWidth: any;
@@ -58,6 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showFeedbackTextIcon?: boolean;
     inlineError?: boolean;
     inlineErrorText?: string;
+    maxLength?: number;
     options: unknown[] | {
         id: string;
         text: string;
@@ -82,6 +85,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     feedbackText: string;
     feedbackVariant: any;
     showFeedbackTextIcon: boolean;
+    maxLength: any;
     onSearch: any;
     optionNameKey: string;
     optionsListWidth: any;
@@ -96,6 +100,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     testId: string;
     hoverHelpText: string;
     hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    maxLength: number;
     modelValue: string | number;
     placeholder: string;
     labelDirection: "top" | "inside";

package/components/autocomplete/Autocomplete.vue.js

@@ -1,7 +1,7 @@
 import o from "./Autocomplete.vue2.js";
 /* empty css                   */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Autocomplete.vue_vue_type_style_index_0_scoped_62faa8e0_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-62faa8e0"]]);
+// import "../../Autocomplete.vue_vue_type_style_index_0_scoped_a7bfd237_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a7bfd237"]]);
 export {
   s as default
 };

package/components/autocomplete/Autocomplete.vue2.js

@@ -1,5 +1,5 @@
- import "../../Autocomplete.vue_vue_type_style_index_0_scoped_62faa8e0_lang.css"; import { defineComponent as y, computed as w, ref as f, watchEffect as V, openBlock as s, createElementBlock as c, Fragment as T, createVNode as m, unref as r, withCtx as v, isRef as g, renderSlot as F, normalizeProps as I, guardReactiveProps as B, createBlock as C, createCommentVNode as h } from "vue";
-import E from "../dropdown/v4/DropdownV4.vue.js";
+ import "../../Autocomplete.vue_vue_type_style_index_0_scoped_a7bfd237_lang.css"; import { defineComponent as w, computed as c, ref as m, watchEffect as T, openBlock as r, createElementBlock as h, Fragment as F, createVNode as v, unref as d, withCtx as x, isRef as L, renderSlot as I, normalizeProps as S, guardReactiveProps as B, createBlock as b, createCommentVNode as f } from "vue";
+import C from "../dropdown/v4/DropdownV4.vue.js";
 import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ChipDropdownTrigger.vue.js";
@@ -7,13 +7,14 @@ import "../dropdown/v4/AppDropdownTrigger.vue.js";
 import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
 import "../dropdown/v4/OptionV4.vue.js";
-import S from "../input/v4/TextField.vue.js";
+import E from "../input/v4/TextField.vue.js";
 import { useVModel as z } from "@vueuse/core";
 import H from "../shared/FieldHelpText.vue.js";
-const P = {
+import P from "../shared/FieldMaxLength.vue.js";
+const N = {
   key: 0,
   class: "footer"
-}, q = /* @__PURE__ */ y({
+}, Q = /* @__PURE__ */ w({
   __name: "Autocomplete",
   props: {
     modelValue: { default: "" },
@@ -30,6 +31,7 @@ const P = {
     showFeedbackTextIcon: { type: Boolean, default: !1 },
     inlineError: { type: Boolean, default: !1 },
     inlineErrorText: { default: "" },
+    maxLength: { default: null },
     options: null,
     displayValue: null,
     optionNameKey: { default: "" },
@@ -38,40 +40,40 @@ const P = {
     testId: { default: "" }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: p }) {
-    const a = e, n = z(a, "modelValue", p), b = (l) => {
-      l !== void 0 && (n.value = a.displayValue(l));
-    }, x = (l, t) => a.displayValue(l).toLowerCase().replace(/\s+/g, "").includes(t.toLowerCase().replace(/\s+/g, "")), d = w(() => {
-      const l = n.value.toString();
+  setup(e, { emit: g }) {
+    const a = e, i = z(a, "modelValue", g), p = (l) => {
+      l !== void 0 && (i.value = a.displayValue(l));
+    }, k = c(() => (i.value || "").length), y = (l, t) => a.displayValue(l).toLowerCase().replace(/\s+/g, "").includes(t.toLowerCase().replace(/\s+/g, "")), u = c(() => {
+      const l = i.value.toString();
       return (a.options || []).filter(
-        (t) => a.onSearch !== null ? a.onSearch(t, l) : x(t, l)
+        (t) => a.onSearch !== null ? a.onSearch(t, l) : y(t, l)
       );
-    }), o = f(!1), u = f(!1);
-    V(() => {
-      a.disabled ? o.value = !1 : u.value && d.value.length ? o.value = !0 : d.value.length === 0 && (o.value = !1);
+    }), n = m(!1), s = m(!1);
+    T(() => {
+      a.disabled ? n.value = !1 : s.value && u.value.length ? n.value = !0 : u.value.length === 0 && (n.value = !1);
     });
-    const k = () => {
-      a.disabled || !o.value && d.value.length && (o.value = !0);
+    const V = () => {
+      a.disabled || !n.value && u.value.length && (n.value = !0);
     };
-    return (l, t) => (s(), c(T, null, [
-      m(r(E), {
-        "is-open": o.value,
-        "onUpdate:is-open": t[3] || (t[3] = (i) => o.value = i),
+    return (l, t) => (r(), h(F, null, [
+      v(d(C), {
+        "is-open": n.value,
+        "onUpdate:is-open": t[3] || (t[3] = (o) => n.value = o),
         class: "autocomplete-dropdown",
         "display-value": e.displayValue,
-        options: r(d),
+        options: d(u),
         "option-name-key": e.optionNameKey,
         "options-list-width": e.optionsListWidth,
         disabled: e.disabled,
         "search-auto-focus": !1,
         "full-width": !1,
         "test-id": e.testId,
-        "onUpdate:selected": b
+        "onUpdate:selected": p
       }, {
-        "dropdown-trigger": v(() => [
-          m(r(S), {
-            modelValue: r(n),
-            "onUpdate:modelValue": t[0] || (t[0] = (i) => g(n) ? n.value = i : null),
+        "dropdown-trigger": x(() => [
+          v(d(E), {
+            modelValue: d(i),
+            "onUpdate:modelValue": t[0] || (t[0] = (o) => L(i) ? i.value = o : null),
             class: "autocomplete-field",
             placeholder: e.placeholder,
             disabled: e.disabled,
@@ -86,29 +88,34 @@ const P = {
             "show-feedback-text-icon": e.showFeedbackTextIcon,
             "inline-error": e.inlineError,
             "inline-error-text": e.inlineErrorText,
-            onFocusin: t[1] || (t[1] = (i) => u.value = !0),
-            onFocusout: t[2] || (t[2] = (i) => u.value = !1),
-            onClick: k
-          }, null, 8, ["modelValue", "placeholder", "disabled", "size", "label", "label-direction", "mandatory", "hover-help-text", "hover-help-text-placemen", "test-id", "feedback-variant", "show-feedback-text-icon", "inline-error", "inline-error-text"])
+            maxlength: e.maxLength,
+            onFocusin: t[1] || (t[1] = (o) => s.value = !0),
+            onFocusout: t[2] || (t[2] = (o) => s.value = !1),
+            onClick: V
+          }, null, 8, ["modelValue", "placeholder", "disabled", "size", "label", "label-direction", "mandatory", "hover-help-text", "hover-help-text-placemen", "test-id", "feedback-variant", "show-feedback-text-icon", "inline-error", "inline-error-text", "maxlength"])
         ]),
-        default: v((i) => [
-          F(l.$slots, "default", I(B(i)), void 0, !0)
+        default: x((o) => [
+          I(l.$slots, "default", S(B(o)), void 0, !0)
         ]),
         _: 3
       }, 8, ["is-open", "display-value", "options", "option-name-key", "options-list-width", "disabled", "test-id"]),
-      e.feedbackText ? (s(), c("div", P, [
-        e.feedbackText ? (s(), C(H, {
+      e.feedbackText || e.maxLength ? (r(), h("div", N, [
+        e.feedbackText ? (r(), b(H, {
           key: 0,
           text: e.feedbackText,
           variant: e.feedbackVariant,
           "show-icon": e.showFeedbackTextIcon,
-          class: "field-help-text",
           "test-id": e.testId
-        }, null, 8, ["text", "variant", "show-icon", "test-id"])) : h("", !0)
-      ])) : h("", !0)
+        }, null, 8, ["text", "variant", "show-icon", "test-id"])) : f("", !0),
+        e.maxLength ? (r(), b(P, {
+          key: 1,
+          "current-length": d(k),
+          "max-length": e.maxLength
+        }, null, 8, ["current-length", "max-length"])) : f("", !0)
+      ])) : f("", !0)
     ], 64));
   }
 });
 export {
-  q as default
+  Q as default
 };

package/components/autocomplete/index.d.ts

@@ -11,6 +11,7 @@ declare const AutocompleteTypes: () => ({
             testId: string;
             hoverHelpText: string;
             hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+            maxLength: number;
             modelValue: string | number;
             placeholder: string;
             labelDirection: "top" | "inside";
@@ -58,6 +59,10 @@ declare const AutocompleteTypes: () => ({
                 type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
                 default: string;
             };
+            maxLength: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             modelValue: {
                 type: import("vue").PropType<string | number>;
                 default: string;
@@ -108,7 +113,7 @@ declare const AutocompleteTypes: () => ({
             };
         }>> & {
             "onUpdate:modelValue"?: (value: string | number) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "modelValue" | "placeholder" | "labelDirection" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "onSearch" | "optionNameKey" | "optionsListWidth">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "modelValue" | "placeholder" | "labelDirection" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "onSearch" | "optionNameKey" | "optionsListWidth">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -158,6 +163,10 @@ declare const AutocompleteTypes: () => ({
                 type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
                 default: string;
             };
+            maxLength: {
+                type: import("vue").PropType<number>;
+                default: any;
+            };
             modelValue: {
                 type: import("vue").PropType<string | number>;
                 default: string;
@@ -218,6 +227,7 @@ declare const AutocompleteTypes: () => ({
             testId: string;
             hoverHelpText: string;
             hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+            maxLength: number;
             modelValue: string | number;
             placeholder: string;
             labelDirection: "top" | "inside";
@@ -285,6 +295,10 @@ declare const AutocompleteTypes: () => ({
             type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
             default: string;
         };
+        maxLength: {
+            type: import("vue").PropType<number>;
+            default: any;
+        };
         modelValue: {
             type: import("vue").PropType<string | number>;
             default: string;
@@ -375,6 +389,10 @@ declare const AutocompleteTypes: () => ({
         type: import("vue").PropType<"auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
         default: string;
     };
+    maxLength: {
+        type: import("vue").PropType<number>;
+        default: any;
+    };
     modelValue: {
         type: import("vue").PropType<string | number>;
         default: string;
@@ -435,6 +453,7 @@ declare const AutocompleteTypes: () => ({
     testId: string;
     hoverHelpText: string;
     hoverHelpTextPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    maxLength: number;
     modelValue: string | number;
     placeholder: string;
     labelDirection: "top" | "inside";

package/components/dropdown/v4/DefaultDropdownTrigger.vue.js

@@ -1,7 +1,7 @@
 import o from "./DefaultDropdownTrigger.vue2.js";
 /* empty css                             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_c9783327_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-c9783327"]]);
+// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_ad524750_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-ad524750"]]);
 export {
   p as default
 };

package/components/dropdown/v4/DefaultDropdownTrigger.vue2.js

@@ -1,4 +1,4 @@
- import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_c9783327_lang.css"; import { defineComponent as v, computed as r, openBlock as o, createElementBlock as a, createBlock as k, createCommentVNode as n, createElementVNode as c, mergeProps as m, unref as l, renderSlot as y, createVNode as i, withCtx as I, createTextVNode as B, toDisplayString as V } from "vue";
+ import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_ad524750_lang.css"; import { defineComponent as v, computed as r, openBlock as o, createElementBlock as a, createBlock as k, createCommentVNode as n, createElementVNode as c, mergeProps as m, unref as l, renderSlot as y, createVNode as i, withCtx as I, createTextVNode as B, toDisplayString as V } from "vue";
 import x from "../../typography/v4/Typography.vue.js";
 import { DropdownTestIdModifiers as u } from "../../../testids/index.js";
 import h from "../../icon/v4/IconV4.vue.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.6-rc.7",
+  "version": "2.1.6-rc.8",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/Autocomplete.vue_vue_type_style_index_0_scoped_62faa8e0_lang.css

@@ -1 +0,0 @@
-div[data-v-62faa8e0]{display:block}.autocomplete-dropdown[data-v-62faa8e0]{position:relative}.field-help-text[data-v-62faa8e0]{margin-top:4px}

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_c9783327_lang.css

@@ -1 +0,0 @@
-.default-dropdown-wrapper[data-v-c9783327]{position:relative}.dropdown-trigger[data-v-c9783327]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.5rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-c9783327]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-c9783327]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-c9783327]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-c9783327]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-c9783327],.dropdown-trigger.disabled .caret-down[data-v-c9783327]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-c9783327]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-c9783327]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-c9783327]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-c9783327]{padding:4px 6px;border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-c9783327]{padding:4px 6px;border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-c9783327]{padding:4px 6px;border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-c9783327]{color:var(--action-active)}.content[data-v-c9783327]{width:calc(100% - 28px);display:flex;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-c9783327]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-c9783327]{width:20px;height:20px;flex:none}.content .image img[data-v-c9783327]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-c9783327]{display:flex;color:var(--action-active)}.content .status-dot[data-v-c9783327]{padding-right:.25rem}.content .status-dot>div[data-v-c9783327]{position:relative;top:-1px}.dropdown-field-label[data-v-c9783327]{color:var(--text-primary)}.dropdown-field-help-text[data-v-c9783327]{margin-top:4px;position:absolute}