@ironsource/shared-ui 2.1.6-rc.0 → 2.1.6-rc.10

package/components/dropdown/v4/index.d.ts

@@ -1368,6 +1368,7 @@ declare const DropdownTypes: () => (({
             distance: number;
             popperClass: string;
             selected: any;
+            onClear: () => void;
             modelValue: any;
             placeholder: string;
             multi: boolean;
@@ -1389,7 +1390,6 @@ declare const DropdownTypes: () => (({
             onSearch: (option: any, term: string) => boolean;
             noResultsText: string;
             searchAutoFocus: boolean;
-            onClear: () => void;
             optionNameKey: string;
             optionIconKey: string;
             optionImageKey: string;
@@ -1451,6 +1451,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<unknown[]>;
                 required: true;
             };
+            onClear: {
+                type: import("vue").PropType<() => void>;
+                default: () => true;
+            };
             modelValue: {
                 type: import("vue").PropType<unknown>;
                 default: any;
@@ -1538,10 +1542,6 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            onClear: {
-                type: import("vue").PropType<() => void>;
-                default: () => true;
-            };
             displayValue: {
                 type: import("vue").PropType<(option: unknown) => string>;
                 required: true;
@@ -1588,7 +1588,7 @@ declare const DropdownTypes: () => (({
             "onUpdate:isOpen"?: (value: unknown) => any;
             onOpened?: () => any;
             onClosed?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClear" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "valueToCopy" | "disabledOptionKey" | "fullWidth" | "optionsListWidth" | "statusType">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "onClear" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "valueToCopy" | "disabledOptionKey" | "fullWidth" | "optionsListWidth" | "statusType">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -1654,6 +1654,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<unknown[]>;
                 required: true;
             };
+            onClear: {
+                type: import("vue").PropType<() => void>;
+                default: () => true;
+            };
             modelValue: {
                 type: import("vue").PropType<unknown>;
                 default: any;
@@ -1741,10 +1745,6 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            onClear: {
-                type: import("vue").PropType<() => void>;
-                default: () => true;
-            };
             displayValue: {
                 type: import("vue").PropType<(option: unknown) => string>;
                 required: true;
@@ -1812,6 +1812,7 @@ declare const DropdownTypes: () => (({
             distance: number;
             popperClass: string;
             selected: any;
+            onClear: () => void;
             modelValue: any;
             placeholder: string;
             multi: boolean;
@@ -1833,7 +1834,6 @@ declare const DropdownTypes: () => (({
             onSearch: (option: any, term: string) => boolean;
             noResultsText: string;
             searchAutoFocus: boolean;
-            onClear: () => void;
             optionNameKey: string;
             optionIconKey: string;
             optionImageKey: string;
@@ -1915,6 +1915,10 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<unknown[]>;
             required: true;
         };
+        onClear: {
+            type: import("vue").PropType<() => void>;
+            default: () => true;
+        };
         modelValue: {
             type: import("vue").PropType<unknown>;
             default: any;
@@ -2002,10 +2006,6 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
-        onClear: {
-            type: import("vue").PropType<() => void>;
-            default: () => true;
-        };
         displayValue: {
             type: import("vue").PropType<(option: unknown) => string>;
             required: true;
@@ -2111,6 +2111,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<unknown[]>;
         required: true;
     };
+    onClear: {
+        type: import("vue").PropType<() => void>;
+        default: () => true;
+    };
     modelValue: {
         type: import("vue").PropType<unknown>;
         default: any;
@@ -2198,10 +2202,6 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    onClear: {
-        type: import("vue").PropType<() => void>;
-        default: () => true;
-    };
     displayValue: {
         type: import("vue").PropType<(option: unknown) => string>;
         required: true;
@@ -2269,6 +2269,7 @@ declare const DropdownTypes: () => (({
     distance: number;
     popperClass: string;
     selected: any;
+    onClear: () => void;
     modelValue: any;
     placeholder: string;
     multi: boolean;
@@ -2290,7 +2291,6 @@ declare const DropdownTypes: () => (({
     onSearch: (option: any, term: string) => boolean;
     noResultsText: string;
     searchAutoFocus: boolean;
-    onClear: () => void;
     optionNameKey: string;
     optionIconKey: string;
     optionImageKey: string;

package/components/forms/FormCard.vue.js

@@ -1,7 +1,7 @@
 import o from "./FormCard.vue2.js";
-/* empty css               */import _ from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../FormCard.vue_vue_type_style_index_0_scoped_d3abd36a_lang.css"; //*');
-const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-d3abd36a"]]);
+/* empty css               */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../FormCard.vue_vue_type_style_index_0_scoped_ef8b4e81_lang.css"; //*');
+const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-ef8b4e81"]]);
 export {
-  r as default
+  t as default
 };

package/components/forms/FormCard.vue2.js

@@ -1,4 +1,4 @@
- import "../../FormCard.vue_vue_type_style_index_0_scoped_d3abd36a_lang.css"; import { defineComponent as T, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as l, unref as e, renderSlot as u, createVNode as a, withCtx as m, createTextVNode as g, toDisplayString as v, createBlock as B, createCommentVNode as C } from "vue";
+ import "../../FormCard.vue_vue_type_style_index_0_scoped_ef8b4e81_lang.css"; import { defineComponent as T, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as l, unref as e, renderSlot as u, createVNode as a, withCtx as m, createTextVNode as g, toDisplayString as v, createBlock as B, createCommentVNode as C } from "vue";
 import p from "../typography/v4/Typography.vue.js";
 import y from "../button/v4/ButtonV4.vue.js";
 import "../button/v4/IconButtonV4.vue.js";

package/components/input/v4/TextField.vue.d.ts

@@ -12,6 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     mandatory?: boolean;
     feedbackVariant?: FeedbackVariant;
     feedbackText?: string;
+    feedbackPositionAbsolute?: boolean;
     showFeedbackTextIcon?: boolean;
     autoFocus?: boolean;
     type?: FieldType;
@@ -53,6 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     feedbackText: string;
     feedbackVariant: any;
     showFeedbackTextIcon: boolean;
+    feedbackPositionAbsolute: boolean;
 }>, {
     manualFocus: () => any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -69,6 +71,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     mandatory?: boolean;
     feedbackVariant?: FeedbackVariant;
     feedbackText?: string;
+    feedbackPositionAbsolute?: boolean;
     showFeedbackTextIcon?: boolean;
     autoFocus?: boolean;
     type?: FieldType;
@@ -110,6 +113,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     feedbackText: string;
     feedbackVariant: any;
     showFeedbackTextIcon: boolean;
+    feedbackPositionAbsolute: boolean;
 }>>> & {
     "onUpdate:modelValue"?: (value: string | number) => any;
     onApply?: () => any;
@@ -139,6 +143,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     feedbackText: string;
     feedbackVariant: FeedbackVariant;
     showFeedbackTextIcon: boolean;
+    feedbackPositionAbsolute: boolean;
 }>, {
     iconBefore?(_: {}): any;
     iconAfter?(_: {}): any;

package/components/input/v4/TextField.vue.js

@@ -1,7 +1,7 @@
 import e from "./TextField.vue2.js";
 /* empty css                */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TextField.vue_vue_type_style_index_0_scoped_95e25718_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-95e25718"]]);
+// import "../../../TextField.vue_vue_type_style_index_0_scoped_22c12586_lang.css"; //*');
+const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-22c12586"]]);
 export {
-  p as default
+  c as default
 };

package/components/input/v4/TextField.vue2.js

@@ -1,4 +1,4 @@
- import "../../../TextField.vue_vue_type_style_index_0_scoped_95e25718_lang.css"; import { defineComponent as K, computed as h, ref as M, openBlock as l, createElementBlock as r, mergeProps as y, unref as t, createBlock as d, createCommentVNode as n, createElementVNode as L, normalizeClass as G, renderSlot as V, withCtx as b, createTextVNode as C, toDisplayString as E, withKeys as W, withModifiers as F, createVNode as p } from "vue";
+ import "../../../TextField.vue_vue_type_style_index_0_scoped_22c12586_lang.css"; import { defineComponent as M, computed as b, ref as G, openBlock as l, createElementBlock as r, mergeProps as y, unref as t, createBlock as d, createCommentVNode as n, createElementVNode as L, normalizeClass as V, renderSlot as C, withCtx as h, createTextVNode as E, toDisplayString as F, withKeys as W, withModifiers as P, createVNode as p } from "vue";
 import v from "../../icon/v4/IconV4.vue.js";
 import j from "../../tooltip/v4/TooltipV4.vue.js";
 import $ from "../../typography/v4/Typography.vue.js";
@@ -11,19 +11,16 @@ import { useTestIdAttrs as X } from "../../../utils/testIds.js";
 const Y = {
   key: 0,
   class: "icon-container icon-before"
-}, Z = ["value", "placeholder", "disabled", "type", "step", "maxlength"], _ = ["onClick"], ee = {
+}, Z = ["maxlength", "value", "placeholder", "disabled", "type", "step"], _ = ["onClick"], ee = {
   key: 3,
   class: "inline-error"
 }, te = {
   key: 6,
   class: "icon-container icon-after"
 }, le = {
-  key: 1,
-  class: "footer"
-}, ae = {
   inheritAttrs: !1
-}, ye = /* @__PURE__ */ K({
-  ...ae,
+}, me = /* @__PURE__ */ M({
+  ...le,
   __name: "TextField",
   props: {
     modelValue: { default: "" },
@@ -36,6 +33,7 @@ const Y = {
     mandatory: { type: Boolean, default: !1 },
     feedbackVariant: { default: null },
     feedbackText: { default: "" },
+    feedbackPositionAbsolute: { type: Boolean, default: !1 },
     showFeedbackTextIcon: { type: Boolean, default: !1 },
     autoFocus: { type: Boolean, default: !1 },
     type: { default: "text" },
@@ -53,23 +51,23 @@ const Y = {
     inlineErrorText: { default: "" }
   },
   emits: ["update:modelValue", "apply"],
-  setup(e, { expose: P, emit: k }) {
-    const s = e, c = X(s.testId, f), z = () => {
-      s.showApply ? k("apply") : o?.confirmable && D();
-    }, O = () => T.value.focus(), {
-      onConfirm: D,
+  setup(e, { expose: z, emit: k }) {
+    const s = e, c = X(s.testId, f), O = () => {
+      s.showApply ? k("apply") : o?.confirmable && N();
+    }, D = () => T.value.focus(), {
+      onConfirm: N,
       onEnter: w,
       inputRef: T,
       isFocused: x,
       showLabelInside: g,
       api: o,
-      labelText: N,
-      sizeClass: S,
+      labelText: S,
+      sizeClass: H,
       handleInput: I,
       handleKeypress: B
-    } = q(s, k), A = h(() => o.value?.value ?? s.modelValue), H = h(() => (A.value || "").length), m = M(!1), R = h(() => m.value && s.type === "password" ? "text" : s.type);
-    return P({
-      manualFocus: O
+    } = q(s, k), A = b(() => o.value?.value ?? s.modelValue), R = b(() => (A.value || "").length), m = G(!1), K = b(() => m.value && s.type === "password" ? "text" : s.type);
+    return z({
+      manualFocus: D
     }), (u, a) => (l(), r("div", y({
       class: {
         "input-with-label-container": !0,
@@ -87,46 +85,47 @@ const Y = {
         "test-id": e.testId
       }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : n("", !0),
       L("div", {
-        class: G({
+        class: V({
           "input-container": !0,
           "label-inside": t(g),
           focused: t(x)
         })
       }, [
         u.$slots.iconBefore ? (l(), r("div", Y, [
-          V(u.$slots, "iconBefore", {}, void 0, !0)
+          C(u.$slots, "iconBefore", {}, void 0, !0)
         ])) : n("", !0),
         e.prefix ? (l(), d(t($), {
           key: 1,
           class: "prefix-text",
           variant: "body1"
         }, {
-          default: b(() => [
-            C(E(e.prefix), 1)
+          default: h(() => [
+            E(F(e.prefix), 1)
           ]),
           _: 1
         })) : n("", !0),
-        L("input", y({ ...u.$attrs, ...t(c)[t(f).FIELD] }, {
+        L("input", y({
           ref_key: "inputRef",
           ref: T,
+          maxlength: e.maxLength
+        }, { ...u.$attrs, ...t(c)[t(f).FIELD] }, {
           value: t(A),
-          placeholder: t(N),
+          placeholder: t(S),
           disabled: e.disabled || e.viewOnly,
-          type: t(R),
+          type: t(K),
           class: ["input", {
-            [t(S)]: !0,
+            [t(H)]: !0,
             "view-only": e.viewOnly,
             "label-inside": t(g),
             "hide-arrows": e.hideNumberArrows,
             "input-type": e.type
           }],
           step: e.step,
-          maxlength: e.maxLength,
           onInput: a[0] || (a[0] = //@ts-ignore
           (...i) => t(I) && t(I)(...i)),
           onFocus: a[1] || (a[1] = (i) => x.value = !0),
           onBlur: a[2] || (a[2] = (i) => x.value = !1),
-          onKeyup: a[3] || (a[3] = W(F(
+          onKeyup: a[3] || (a[3] = W(P(
             //@ts-ignore
             (...i) => t(w) && t(w)(...i),
             ["prevent"]
@@ -137,7 +136,7 @@ const Y = {
         e.showApply || t(o)?.confirmable && !t(o)?.error?.value ? (l(), r("div", {
           key: 2,
           class: "apply-button",
-          onClick: F(z, ["stop", "prevent"])
+          onClick: P(O, ["stop", "prevent"])
         }, [
           p(t(v), {
             name: "check",
@@ -150,7 +149,7 @@ const Y = {
             text: e.inlineErrorText || t(o)?.error?.value,
             "test-id": e.testId
           }, t(c)[t(f).TOOLTIP]), {
-            default: b(() => [
+            default: h(() => [
               p(t(v), {
                 name: "warning-circle",
                 size: "16px"
@@ -164,8 +163,8 @@ const Y = {
           class: "suffix-text",
           variant: "body1"
         }, {
-          default: b(() => [
-            C(E(e.suffix), 1)
+          default: h(() => [
+            E(F(e.suffix), 1)
           ]),
           _: 1
         })) : n("", !0),
@@ -186,10 +185,13 @@ const Y = {
           }))
         ], 16)) : n("", !0),
         u.$slots.iconAfter ? (l(), r("div", te, [
-          V(u.$slots, "iconAfter", {}, void 0, !0)
+          C(u.$slots, "iconAfter", {}, void 0, !0)
         ])) : n("", !0)
       ], 2),
-      e.feedbackText || e.maxLength ? (l(), r("div", le, [
+      e.feedbackText || e.maxLength ? (l(), r("div", {
+        key: 1,
+        class: V(["footer", e.feedbackPositionAbsolute && "footer-absolute"])
+      }, [
         e.feedbackText ? (l(), d(Q, {
           key: 0,
           text: e.feedbackText,
@@ -199,13 +201,13 @@ const Y = {
         }, null, 8, ["text", "variant", "show-icon", "test-id"])) : n("", !0),
         e.maxLength ? (l(), d(U, {
           key: 1,
-          "current-length": t(H),
+          "current-length": t(R),
           "max-length": e.maxLength
         }, null, 8, ["current-length", "max-length"])) : n("", !0)
-      ])) : n("", !0)
+      ], 2)) : n("", !0)
     ], 16));
   }
 });
 export {
-  ye as default
+  me as default
 };

package/components/input/v4/index.d.ts

@@ -29,6 +29,7 @@ declare const TextFieldTypes: () => ({
             feedbackText: string;
             feedbackVariant: "success" | "warning" | "error";
             showFeedbackTextIcon: boolean;
+            feedbackPositionAbsolute: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             type: {
                 type: import("vue").PropType<"number" | "text" | "password">;
@@ -130,10 +131,14 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            feedbackPositionAbsolute: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             "onUpdate:modelValue"?: (value: string | number) => any;
             onApply?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "modelValue" | "placeholder" | "viewOnly" | "labelDirection" | "autoFocus" | "hideNumberArrows" | "step" | "onlyDigits" | "prefix" | "suffix" | "showApply" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "modelValue" | "placeholder" | "viewOnly" | "labelDirection" | "autoFocus" | "hideNumberArrows" | "step" | "onlyDigits" | "prefix" | "suffix" | "showApply" | "inlineError" | "inlineErrorText" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "feedbackPositionAbsolute">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -248,6 +253,10 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            feedbackPositionAbsolute: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             "onUpdate:modelValue"?: (value: string | number) => any;
             onApply?: () => any;
@@ -282,6 +291,7 @@ declare const TextFieldTypes: () => ({
             feedbackText: string;
             feedbackVariant: "success" | "warning" | "error";
             showFeedbackTextIcon: boolean;
+            feedbackPositionAbsolute: boolean;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -403,6 +413,10 @@ declare const TextFieldTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        feedbackPositionAbsolute: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         "onUpdate:modelValue"?: (value: string | number) => any;
         onApply?: () => any;
@@ -513,6 +527,10 @@ declare const TextFieldTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    feedbackPositionAbsolute: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: (value: string | number) => any;
     onApply?: () => any;
@@ -547,6 +565,7 @@ declare const TextFieldTypes: () => ({
     feedbackText: string;
     feedbackVariant: "success" | "warning" | "error";
     showFeedbackTextIcon: boolean;
+    feedbackPositionAbsolute: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         iconBefore?(_: {}): any;

package/components/multibar/MultiBar.vue.js

@@ -1,7 +1,7 @@
 import o from "./MultiBar.vue2.js";
-/* empty css               */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../MultiBar.vue_vue_type_style_index_0_scoped_b473b35e_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-b473b35e"]]);
+/* empty css               */import _ from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../MultiBar.vue_vue_type_style_index_0_scoped_71617643_lang.css"; //*');
+const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-71617643"]]);
 export {
   p as default
 };

package/components/multibar/MultiBar.vue2.js

@@ -1,4 +1,4 @@
- import "../../MultiBar.vue_vue_type_style_index_0_scoped_b473b35e_lang.css"; import { defineComponent as k, computed as v, openBlock as l, createBlock as d, Teleport as x, createVNode as c, Transition as g, withCtx as u, unref as t, createElementBlock as r, mergeProps as B, createElementVNode as V, createTextVNode as h, toDisplayString as A, createCommentVNode as m, Fragment as z, renderList as M, normalizeClass as N } from "vue";
+ import "../../MultiBar.vue_vue_type_style_index_0_scoped_71617643_lang.css"; import { defineComponent as k, computed as v, openBlock as l, createBlock as d, Teleport as x, createVNode as u, Transition as g, withCtx as c, unref as e, createElementBlock as r, mergeProps as B, createElementVNode as V, createTextVNode as h, toDisplayString as A, createCommentVNode as m, Fragment as z, renderList as M, normalizeClass as N } from "vue";
 import { useVModel as $ } from "@vueuse/core";
 import E from "../typography/v4/Typography.vue.js";
 import S from "../button/v4/ButtonV4.vue.js";
@@ -27,67 +27,67 @@ const O = { class: "multi-bar-panel" }, R = {
   },
   emits: ["update:modelValue", "close", "action"],
   setup(o, { emit: s }) {
-    const e = o, f = $(e, "modelValue", s), I = () => {
+    const t = o, f = $(t, "modelValue", s), I = () => {
       f.value = !1, s("close");
     }, b = (a) => {
       s("action", a);
     }, p = v(
-      () => e.actions.length > e.visibleActionsCount ? e.actions.slice(0, e.visibleActionsCount) : e.actions
+      () => t.actions.length > t.visibleActionsCount ? t.actions.slice(0, t.visibleActionsCount) : t.actions
     ), C = v(
-      () => e.actions.length > e.visibleActionsCount ? e.actions.slice(e.visibleActionsCount) : []
-    ), y = L(e.testId, n);
+      () => t.actions.length > t.visibleActionsCount ? t.actions.slice(t.visibleActionsCount) : []
+    ), y = L(t.testId, n);
     return (a, F) => (l(), d(x, {
       to: "body",
       disabled: !o.appendToBody
     }, [
-      c(g, { name: "multi-bar" }, {
-        default: u(() => [
-          t(f) ? (l(), r("div", B({
+      u(g, { name: "multi-bar" }, {
+        default: c(() => [
+          e(f) ? (l(), r("div", B({
             key: 0,
             class: ["multi-bar", {
               "light-theme-v4": !0,
               "multi-bar--fixed": o.appendToBody,
-              "multi-bar--sticky": !o.appendToBody,
+              "multi-bar--absolute": !o.appendToBody,
               "multi-bar--small": o.size === "small",
               "multi-bar--medium": o.size === "medium",
               "multi-bar--left": o.position === "left"
             }],
             style: { zIndex: o.zIndex }
-          }, { ...a.$attrs, ...t(y)[t(n).WRAPPER] }), [
+          }, { ...a.$attrs, ...e(y)[e(n).WRAPPER] }), [
             V("div", O, [
-              c(t(P), B({
+              u(e(P), B({
                 "icon-name": "x",
                 class: "close-icon"
-              }, t(y)[t(n).CLOSE_BTN], { onClick: I }), null, 16),
+              }, e(y)[e(n).CLOSE_BTN], { onClick: I }), null, 16),
               o.selectedCount ? (l(), r("div", R, [
-                c(t(E), { variant: "body1" }, {
-                  default: u(() => [
+                u(e(E), { variant: "body1" }, {
+                  default: c(() => [
                     h(A(o.selectedCount) + " selected ", 1)
                   ]),
                   _: 1
                 })
               ])) : m("", !0),
-              (l(!0), r(z, null, M(t(p), (i, T) => (l(), d(t(S), {
+              (l(!0), r(z, null, M(e(p), (i, T) => (l(), d(e(S), {
                 key: i.id,
                 class: N(["action-button", {
-                  "action-button--last": T === t(p).length - 1
+                  "action-button--last": T === e(p).length - 1
                 }]),
                 variant: "text",
                 color: "default",
                 "start-icon-name": i.icon,
-                "data-testid": `${e.testId}-${t(n).ACTION}-${i.id}`,
+                "data-testid": `${t.testId}-${e(n).ACTION}-${i.id}`,
                 disabled: i.disabled,
                 onClick: (U) => b(i)
               }, {
-                default: u(() => [
+                default: c(() => [
                   h(A(i.title), 1)
                 ]),
                 _: 2
               }, 1032, ["class", "start-icon-name", "data-testid", "disabled", "onClick"]))), 128)),
-              t(C).length ? (l(), d(w, {
+              e(C).length ? (l(), d(w, {
                 key: 1,
-                "menu-items": t(C),
-                "test-id": `${e.testId}-${t(n).MENU}`,
+                "menu-items": e(C),
+                "test-id": `${t.testId}-${e(n).MENU}`,
                 onSelected: b
               }, null, 8, ["menu-items", "test-id"])) : m("", !0)
             ])

package/components/search/common/Search.common.js

@@ -1,20 +1,20 @@
-import { ref as d, computed as e } from "vue";
-const I = (a, u) => {
-  const t = d(), s = (m) => {
-    u("update:modelValue", m.target.value);
+import { ref as m, computed as e } from "vue";
+const I = (t, u) => {
+  const a = m(), s = (d) => {
+    u("update:modelValue", d.target.value);
   }, o = () => {
-    u("update:modelValue", ""), t.value.focus ? l() : t.value.manualFocus();
-  }, i = () => {
+    u("update:modelValue", ""), u("onClear"), a.value.focus ? l() : a.value.manualFocus();
+  }, v = () => {
     n.value ? o() : l();
-  }, l = () => t.value.focus(), n = e(() => a.modelValue !== ""), r = e(() => a.variant === "inline-table"), c = e(() => a.variant === "transparent"), v = e(() => ((r.value || c.value) && n.value, n.value)), f = e(() => c.value || r.value), h = e(() => n.value ? "cancel" : "search");
+  }, l = () => a.value.focus(), n = e(() => t.modelValue !== ""), r = e(() => t.variant === "inline-table"), c = e(() => t.variant === "transparent"), i = e(() => ((r.value || c.value) && n.value, n.value)), f = e(() => c.value || r.value), h = e(() => n.value ? "cancel" : "search");
   return {
     showLeftIcon: f,
     updateValue: s,
-    showRightIcon: v,
+    showRightIcon: i,
     showClear: n,
     rightIcon: h,
-    onRightIconClick: i,
-    inputRef: t,
+    onRightIconClick: v,
+    inputRef: a,
     clearValue: o
   };
 };

package/components/search/v4/SearchV4.vue.d.ts

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     inputRef: import("vue").Ref<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => void;
+    onClear: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue: string;
     placeholder: string;
@@ -26,6 +27,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     placeholder: string;
 }>>> & {
     "onUpdate:modelValue"?: (value: string | number) => any;
+    onOnClear?: () => any;
 }, {
     disabled: boolean;
     testId: string;

package/components/search/v4/SearchV4.vue.js

@@ -1,7 +1,7 @@
-import e from "./SearchV4.vue2.js";
-/* empty css               */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../SearchV4.vue_vue_type_style_index_0_scoped_1330ea8b_lang.css"; //*');
-const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-1330ea8b"]]);
+import o from "./SearchV4.vue2.js";
+/* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../SearchV4.vue_vue_type_style_index_0_scoped_a468fb4a_lang.css"; //*');
+const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a468fb4a"]]);
 export {
-  a as default
+  t as default
 };