@ironsource/shared-ui 1.4.2-test.9 → 1.4.2

package/components/dropdown/Dropdown.vue.js

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed, watch, useSlots, nextTick, toRaw, provide, onMounted, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, unref, withCtx, Transition, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, createBlock, mergeProps, withModifiers, Fragment, renderList, pushScopeId, popScopeId } from 'vue';
+import { defineComponent, ref, computed, watch, useSlots, nextTick, toRaw, provide, onMounted, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createVNode, withCtx, Transition, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, createBlock, mergeProps, withModifiers, Fragment, renderList, pushScopeId, popScopeId } from 'vue';
 import Button from '../button/Button.vue.js';
 import Icon from '../icon/Icon.vue.js';
+import { DropdownTestIdModifiers } from '../../testids/index.vue.js';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
 /* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                               */import { Dropdown as Dropdown$1 } from 'floating-vue';
@@ -11,10 +12,11 @@ import { isObjectInArray } from '../../utils/array.vue.js';
 import { objectsEqual } from '../../utils/object.vue.js';
 import { useClamp, useVirtualList, onClickOutside } from '@vueuse/core';
 import { Mode, Type, DropdownContext } from './DropdownContext.vue.js';
+import { pxToRem } from '../../utils/style.vue.js';
 /* empty css                                                          *//* empty css                                              */
 import "../../Dropdown.vue_vue_type_style_index_0_scoped_true_lang.css";import "../../Dropdown.vue_vue_type_style_index_1_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-49790baa"), n = n(), popScopeId(), n);
-const _hoisted_1 = ["tabindex"];
+const _withScopeId = (n) => (pushScopeId("data-v-6b0dd6db"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["tabindex", "data-testid"];
 const _hoisted_2 = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"];
 const _hoisted_3 = {
   key: 0,
@@ -25,19 +27,17 @@ const _hoisted_5 = {
   key: 0,
   class: "dropdown-title"
 };
-const _hoisted_6 = {
-  key: 0,
-  class: "dropdown-title__text"
-};
-const _hoisted_7 = {
+const _hoisted_6 = ["data-testid"];
+const _hoisted_7 = ["data-testid"];
+const _hoisted_8 = {
   key: 0,
   class: "no-result-container"
 };
-const _hoisted_8 = {
+const _hoisted_9 = {
   key: 1,
   class: "loader"
 };
-const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_10 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
   width: "100",
   height: "100",
   viewBox: "0 0 100 100"
@@ -61,9 +61,9 @@ const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElem
     })
   ])
 ], -1));
-const _hoisted_10 = { key: 2 };
-const _hoisted_11 = ["aria-selected", "aria-disabled", "onClick"];
-const _hoisted_12 = {
+const _hoisted_11 = { key: 2 };
+const _hoisted_12 = ["aria-selected", "aria-disabled", "onClick"];
+const _hoisted_13 = {
   key: 0,
   class: "actions"
 };
@@ -105,7 +105,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autoSize: { type: Boolean, default: false },
     disableKeyboardEvents: { type: Boolean, default: false },
     multiOptionsPlaceholderPrefix: { default: "" },
-    multiOptionsPlaceholderSuffix: { default: "" }
+    multiOptionsPlaceholderSuffix: { default: "" },
+    testId: { default: "" }
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
   setup(__props, { expose, emit }) {
@@ -222,13 +223,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const hasSubtitle = computed(() => optionsIds.value[0]?.hasSubtitle);
     const isMulti = computed(() => api.mode === Mode.Multi);
+    const itemHeight = computed(
+      () => hasSubtitle.value ? MULTILINE_LIST_HEIGHT : LIST_HEIGHT
+    );
     const {
       list: virtualOptions,
       containerProps,
       wrapperProps,
       scrollTo
     } = useVirtualList(filteredOptions, {
-      itemHeight: () => hasSubtitle.value ? MULTILINE_LIST_HEIGHT : LIST_HEIGHT
+      itemHeight: itemHeight.value
     });
     watch(
       () => props.isOpen,
@@ -506,6 +510,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     };
+    const calculateTableHeight = computed(() => {
+      const MAX_NUMBER_OF_OPTIONS = 7;
+      const PADDING_PX = 8;
+      const optionsLength = virtualOptions.value.length;
+      const showSelectAllAddition = props.showSelectAll ? 1 : 0;
+      const isThereMoreOptionsThenMax = optionsLength > MAX_NUMBER_OF_OPTIONS;
+      const numberOfRows = optionsLength + showSelectAllAddition;
+      const numToCalculate = isThereMoreOptionsThenMax ? MAX_NUMBER_OF_OPTIONS + 0.5 : numberOfRows;
+      return pxToRem(numToCalculate * itemHeight.value + PADDING_PX);
+    });
     expose({
       selectItem: onSelect,
       scrollTo
@@ -516,6 +530,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref: el,
         class: normalizeClass(["dropdown", { "dropdown--disabled": __props.disabled }]),
         tabindex: __props.disabled ? -1 : 0,
+        "data-testid": `${__props.testId}-${unref(DropdownTestIdModifiers).WRAPPER}`,
         onKeydown
       }, [
         renderSlot(_ctx.$slots, "label", {}, void 0, true),
@@ -533,7 +548,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           shown: !!unref(open),
           "auto-hide": false,
           container: __props.container,
-          "auto-size": __props.autoSize
+          "auto-size": __props.autoSize,
+          "data-testid": `${__props.testId}-${unref(DropdownTestIdModifiers).TRIGGER}`
         }, {
           popper: withCtx(() => [
             createVNode(Transition, null, {
@@ -543,14 +559,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ref: listRef
                 }, [
                   __props.inlineSearch || __props.title ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                    __props.title ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                    __props.title ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "dropdown-title__text",
+                      "data-testid": `${__props.testId}-${unref(DropdownTestIdModifiers).TITLE}`
+                    }, [
                       createVNode(unref(Text), { strong: "" }, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(__props.title), 1)
                         ]),
                         _: 1
                       })
-                    ])) : createCommentVNode("", true),
+                    ], 8, _hoisted_6)) : createCommentVNode("", true),
                     __props.inlineSearch ? (openBlock(), createBlock(unref(Search), {
                       key: 1,
                       modelValue: query.value,
@@ -559,8 +579,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: "dropdown-title__search",
                       variant: "transparent",
                       size: "md",
+                      "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).SEARCH}`,
                       onKeydown
-                    }, null, 8, ["modelValue", "placeholder"])) : createCommentVNode("", true)
+                    }, null, 8, ["modelValue", "placeholder", "test-id"])) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true),
                   unref(open) ? (openBlock(), createElementBlock("div", {
                     key: 1,
@@ -569,13 +590,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, [
                     renderSlot(_ctx.$slots, "input-list", { open: unref(open) }, void 0, true),
                     createElementVNode("div", mergeProps(unref(containerProps), {
-                      class: ["list-container", { "list-container--multi": __props.multi }]
+                      class: ["list-container", { "list-container--multi": __props.multi }],
+                      style: { height: `${unref(calculateTableHeight)}rem` },
+                      "data-testid": `${__props.testId}-${unref(DropdownTestIdModifiers).LIST_CONTAINER}`
                     }), [
                       createElementVNode("ul", mergeProps(unref(wrapperProps), {
                         role: "listbox",
                         class: ["list", { "list--multi": __props.multi }]
                       }), [
-                        !unref(filteredOptions).length && !__props.loading ? (openBlock(), createElementBlock("li", _hoisted_7, [
+                        !unref(filteredOptions).length && !__props.loading ? (openBlock(), createElementBlock("li", _hoisted_8, [
                           createVNode(unref(Text), {
                             size: "sm",
                             class: "no-result"
@@ -586,13 +609,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             _: 1
                           })
                         ])) : createCommentVNode("", true),
-                        __props.loading ? (openBlock(), createElementBlock("li", _hoisted_8, [
+                        __props.loading ? (openBlock(), createElementBlock("li", _hoisted_9, [
                           createVNode(unref(Icon), {
                             "font-size": "md",
                             class: "loader-icon"
                           }, {
                             default: withCtx(() => [
-                              _hoisted_9
+                              _hoisted_10
                             ]),
                             _: 1
                           }),
@@ -603,7 +626,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             _: 1
                           })
                         ])) : createCommentVNode("", true),
-                        __props.showSelectAll ? (openBlock(), createElementBlock("li", _hoisted_10, [
+                        __props.showSelectAll ? (openBlock(), createElementBlock("li", _hoisted_11, [
                           createVNode(Option, {
                             "aria-selected": unref(allSelected),
                             "aria-disabled": !!__props.disabled,
@@ -630,37 +653,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               selected: isSelected(toRaw(unref(selectedOption)), data),
                               active: toRaw(unref(activeIndex)) === index
                             }, void 0, true)
-                          ], 8, _hoisted_11);
+                          ], 8, _hoisted_12);
                         }), 128)) : createCommentVNode("", true)
                       ], 16)
-                    ], 16),
-                    __props.multi ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                    ], 16, _hoisted_7),
+                    __props.multi ? (openBlock(), createElementBlock("div", _hoisted_13, [
                       createVNode(unref(Button), {
                         ref_key: "cancel",
                         ref: cancel,
                         size: "sm",
                         variant: "border",
                         theme: "third",
+                        "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).ACTION_CANCEL}`,
                         onClick: onCancel
                       }, {
                         default: withCtx(() => [
                           createTextVNode(" Cancel ")
                         ]),
                         _: 1
-                      }, 512),
+                      }, 8, ["test-id"]),
                       createVNode(unref(Button), {
                         ref_key: "apply",
                         ref: apply,
                         "data-testid": "mutli-apply",
                         size: "sm",
                         class: "apply-button",
+                        "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).ACTION_APPLY}`,
                         onClick: onApply
                       }, {
                         default: withCtx(() => [
                           createTextVNode("Apply ")
                         ]),
                         _: 1
-                      }, 512)
+                      }, 8, ["test-id"])
                     ])) : createCommentVNode("", true)
                   ], 32)) : createCommentVNode("", true)
                 ], 512)
@@ -728,31 +753,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ], 2)
           ]),
           _: 3
-        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size"]),
+        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size", "data-testid"]),
         !__props.error && __props.helperText ? (openBlock(), createBlock(unref(Text), {
           key: 0,
           size: "caption",
-          class: "helper-text"
+          class: "helper-text",
+          "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).HELPER_TEXT}`
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(__props.helperText), 1)
           ]),
           _: 1
-        })) : createCommentVNode("", true),
+        }, 8, ["test-id"])) : createCommentVNode("", true),
         __props.error ? (openBlock(), createBlock(unref(Text), {
           key: 1,
           size: "caption",
-          class: "helper-text helper-text--error"
+          class: "helper-text helper-text--error",
+          "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).HELPER_TEXT_ERROR}`
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(__props.error), 1)
           ]),
           _: 1
-        })) : createCommentVNode("", true)
+        }, 8, ["test-id"])) : createCommentVNode("", true)
       ], 42, _hoisted_1);
     };
   }
 });
-var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-49790baa"]]);
+var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6b0dd6db"]]);
 
 export { Dropdown as default };

package/components/dropdown/index.d.ts

@@ -18,6 +18,11 @@ declare const DropdownTypes: () => (import("vue").DefineComponent<{
     } & {
         default: string;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     theme: {
         type: import("vue").PropType<string>;
     } & {
@@ -204,6 +209,11 @@ declare const DropdownTypes: () => (import("vue").DefineComponent<{
     } & {
         default: string;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     theme: {
         type: import("vue").PropType<string>;
     } & {
@@ -371,6 +381,7 @@ declare const DropdownTypes: () => (import("vue").DefineComponent<{
     size: "sm" | "lg";
     title: string;
     error: string;
+    testId: string;
     theme: string;
     placement: import("floating-vue").Placement;
     disabled: boolean;

package/components/emptyState/index.d.ts

@@ -15,7 +15,7 @@ declare const EmptyStateTypes: () => import("vue").DefineComponent<{
         default: string;
     };
     iconName: {
-        type: import("vue").PropType<"search" | "link" | "filter" | "a" | "b" | "style" | "image" | "switch" | "a-2" | "ab-test" | "ab-test-2" | "a-circle" | "account-balance-wallet" | "account-circle" | "account-circle-outline" | "add" | "analytics" | "android" | "angle-down" | "angle-left" | "angle-right" | "angle-up" | "app-store" | "area-chart" | "arrow-back" | "arrow-downward" | "arrow-forward" | "arrow-left" | "arrow-right" | "arrow-sort-down" | "arrow-sort-up" | "arrow-upward" | "auto-awesome" | "auto-mode" | "autorenew" | "b-2" | "b-circle" | "banner" | "bidding" | "bidding-2" | "block" | "border-color" | "bug" | "bullhorn" | "bullseye-arrow" | "cached" | "calendar" | "calendar-today" | "cancel" | "chart-bar" | "chart-line" | "chart-mixed" | "check" | "check-bold" | "close" | "close-bold" | "computer-mouse" | "copy-to-clipboard" | "widgets-flat-squares" | "adjust" | "copy-to-clipboard-filled" | "cube" | "cube-background" | "marketing" | "create" | "creative" | "cross" | "crown-fill" | "cup" | "cup-a" | "cup-b" | "delete" | "diamond" | "dots" | "download" | "download-2" | "download-done" | "drag-indicator" | "ecpi" | "email" | "email-envelope" | "error" | "eye" | "favorite-border" | "filter-list" | "frame" | "fullscreen" | "fullscreen-exit" | "functions" | "gamepad-alt" | "games" | "gavel" | "gift" | "git-hub" | "globe-stand" | "google-play" | "group" | "hand-pointer" | "hands" | "heartbeat" | "help" | "help-outline" | "history" | "ios" | "image-not-supported" | "image-slash" | "import-export" | "import-export-2" | "importent" | "info" | "info-outline" | "insights" | "interstitial" | "ios-14" | "js" | "landscape" | "launch" | "levelplay" | "limit-circle" | "limit-octagon" | "loading-clean" | "lock" | "lock-open" | "login" | "logout" | "military-tech" | "mix" | "mix-2" | "mobile-landscape" | "mobile-portrait" | "money-check" | "more-horiz" | "more-vert" | "mouse" | "mouse-pointer" | "moving-up" | "notifications-none" | "offerwall" | "palyable" | "paper-plane-off" | "paper-plane" | "pause" | "pause-circle-filled" | "pause-circle-outline" | "phone-iphone" | "photo" | "photo-2" | "play-arrow" | "play-circle-filled-white" | "play-circle-outline" | "qrcode" | "quick-ab" | "quick-ab-2" | "react" | "redo" | "refresh" | "remove" | "replay" | "rewarded-video" | "rocket-launch" | "rotate" | "route" | "sack-dollar" | "schedule" | "search-bold" | "share" | "slack" | "sports-esports" | "star" | "star-fill" | "status-banner" | "status-interstitial" | "status-offerwall" | "status-rewarded-video" | "stop-circle-filled" | "stop-circle-outline" | "success" | "success-full" | "table-edit" | "tablet-landscape" | "tablet-mac" | "tablet-portrait" | "texture" | "theme-dark" | "theme-light" | "timelapse" | "timeline" | "trending-down" | "trending-flat" | "trending-up" | "tune" | "two-tone-banner" | "two-tone-interstitial" | "two-tone-offerwall" | "two-tone-rewarded-video" | "undo" | "unfold-less" | "unfold-more" | "vertical-align-top" | "vertical-align-top-2" | "vibration" | "video-round" | "view-carousel" | "visibility" | "visibility-off" | "visibility-off-strok" | "visibility-strok" | "volume-off" | "volume-up" | "warning" | "warning-2" | "web-app" | "widgets" | "widgets-fill" | "widgetsz" | "wifi-protected-setup" | "native-ad" | "status-native-ad" | "two-tone-native-ad">;
+        type: import("vue").PropType<"search" | "link" | "filter" | "a" | "b" | "style" | "image" | "switch" | "a-2" | "ab-test" | "ab-test-2" | "a-circle" | "account-balance-wallet" | "account-circle" | "account-circle-outline" | "add" | "analytics" | "android" | "angle-down" | "angle-left" | "angle-right" | "angle-up" | "app-store" | "area-chart" | "arrow-back" | "arrow-downward" | "arrow-forward" | "arrow-left" | "arrow-right" | "arrow-sort-down" | "arrow-sort-up" | "arrow-upward" | "auto-awesome" | "auto-mode" | "autorenew" | "b-2" | "b-circle" | "banner" | "bidding" | "bidding-2" | "block" | "border-color" | "bug" | "bullhorn" | "bullseye-arrow" | "cached" | "calendar" | "calendar-today" | "cancel" | "chart-bar" | "chart-line" | "chart-mixed" | "check" | "check-bold" | "close" | "close-bold" | "computer-mouse" | "copy-to-clipboard" | "widgets-flat-squares" | "adjust" | "copy-to-clipboard-filled" | "cube" | "cube-background" | "marketing" | "create" | "creative" | "cross" | "crown-fill" | "cup" | "cup-a" | "cup-b" | "delete" | "diamond" | "dots" | "download" | "download-2" | "download-done" | "drag-indicator" | "ecpi" | "email" | "email-envelope" | "error" | "eye" | "favorite-border" | "filter-list" | "frame" | "fullscreen" | "fullscreen-exit" | "functions" | "gamepad-alt" | "games" | "gavel" | "gift" | "git-hub" | "globe-stand" | "google-play" | "group" | "hand-pointer" | "hands" | "heartbeat" | "help" | "help-outline" | "history" | "ios" | "image-not-supported" | "image-slash" | "import-export" | "import-export-2" | "importent" | "info" | "info-outline" | "insights" | "interstitial" | "ios-14" | "js" | "landscape" | "launch" | "levelplay" | "limit-circle" | "limit-octagon" | "loading-clean" | "lock" | "lock-open" | "login" | "logout" | "military-tech" | "mix" | "mix-2" | "mobile-landscape" | "mobile-portrait" | "money-check" | "more-horiz" | "more-vert" | "mouse" | "mouse-pointer" | "moving-up" | "notifications-none" | "offerwall" | "palyable" | "paper-plane-off" | "paper-plane" | "pause" | "pause-circle-filled" | "pause-circle-outline" | "phone-iphone" | "photo" | "photo-2" | "play-arrow" | "play-circle-filled-white" | "play-circle-outline" | "qrcode" | "quick-ab" | "quick-ab-2" | "react" | "redo" | "refresh" | "remove" | "replay" | "rewarded-video" | "rocket-launch" | "rotate" | "route" | "sack-dollar" | "schedule" | "search-bold" | "share" | "slack" | "sports-esports" | "star" | "star-fill" | "status-banner" | "status-interstitial" | "status-offerwall" | "status-rewarded-video" | "stop-circle-filled" | "stop-circle-outline" | "success" | "success-full" | "tablet-landscape" | "tablet-mac" | "tablet-portrait" | "texture" | "theme-dark" | "theme-light" | "timelapse" | "timeline" | "trending-down" | "trending-flat" | "trending-up" | "tune" | "two-tone-banner" | "two-tone-interstitial" | "two-tone-offerwall" | "two-tone-rewarded-video" | "undo" | "unfold-less" | "unfold-more" | "vertical-align-top" | "vertical-align-top-2" | "vibration" | "video-round" | "view-carousel" | "visibility" | "visibility-off" | "visibility-off-strok" | "visibility-strok" | "volume-off" | "volume-up" | "warning" | "warning-2" | "web-app" | "widgets" | "widgets-fill" | "widgetsz" | "wifi-protected-setup" | "native-ad" | "status-native-ad" | "two-tone-native-ad">;
     } & {
         default: any;
     };
@@ -75,7 +75,7 @@ declare const EmptyStateTypes: () => import("vue").DefineComponent<{
         default: string;
     };
     iconName: {
-        type: import("vue").PropType<"search" | "link" | "filter" | "a" | "b" | "style" | "image" | "switch" | "a-2" | "ab-test" | "ab-test-2" | "a-circle" | "account-balance-wallet" | "account-circle" | "account-circle-outline" | "add" | "analytics" | "android" | "angle-down" | "angle-left" | "angle-right" | "angle-up" | "app-store" | "area-chart" | "arrow-back" | "arrow-downward" | "arrow-forward" | "arrow-left" | "arrow-right" | "arrow-sort-down" | "arrow-sort-up" | "arrow-upward" | "auto-awesome" | "auto-mode" | "autorenew" | "b-2" | "b-circle" | "banner" | "bidding" | "bidding-2" | "block" | "border-color" | "bug" | "bullhorn" | "bullseye-arrow" | "cached" | "calendar" | "calendar-today" | "cancel" | "chart-bar" | "chart-line" | "chart-mixed" | "check" | "check-bold" | "close" | "close-bold" | "computer-mouse" | "copy-to-clipboard" | "widgets-flat-squares" | "adjust" | "copy-to-clipboard-filled" | "cube" | "cube-background" | "marketing" | "create" | "creative" | "cross" | "crown-fill" | "cup" | "cup-a" | "cup-b" | "delete" | "diamond" | "dots" | "download" | "download-2" | "download-done" | "drag-indicator" | "ecpi" | "email" | "email-envelope" | "error" | "eye" | "favorite-border" | "filter-list" | "frame" | "fullscreen" | "fullscreen-exit" | "functions" | "gamepad-alt" | "games" | "gavel" | "gift" | "git-hub" | "globe-stand" | "google-play" | "group" | "hand-pointer" | "hands" | "heartbeat" | "help" | "help-outline" | "history" | "ios" | "image-not-supported" | "image-slash" | "import-export" | "import-export-2" | "importent" | "info" | "info-outline" | "insights" | "interstitial" | "ios-14" | "js" | "landscape" | "launch" | "levelplay" | "limit-circle" | "limit-octagon" | "loading-clean" | "lock" | "lock-open" | "login" | "logout" | "military-tech" | "mix" | "mix-2" | "mobile-landscape" | "mobile-portrait" | "money-check" | "more-horiz" | "more-vert" | "mouse" | "mouse-pointer" | "moving-up" | "notifications-none" | "offerwall" | "palyable" | "paper-plane-off" | "paper-plane" | "pause" | "pause-circle-filled" | "pause-circle-outline" | "phone-iphone" | "photo" | "photo-2" | "play-arrow" | "play-circle-filled-white" | "play-circle-outline" | "qrcode" | "quick-ab" | "quick-ab-2" | "react" | "redo" | "refresh" | "remove" | "replay" | "rewarded-video" | "rocket-launch" | "rotate" | "route" | "sack-dollar" | "schedule" | "search-bold" | "share" | "slack" | "sports-esports" | "star" | "star-fill" | "status-banner" | "status-interstitial" | "status-offerwall" | "status-rewarded-video" | "stop-circle-filled" | "stop-circle-outline" | "success" | "success-full" | "table-edit" | "tablet-landscape" | "tablet-mac" | "tablet-portrait" | "texture" | "theme-dark" | "theme-light" | "timelapse" | "timeline" | "trending-down" | "trending-flat" | "trending-up" | "tune" | "two-tone-banner" | "two-tone-interstitial" | "two-tone-offerwall" | "two-tone-rewarded-video" | "undo" | "unfold-less" | "unfold-more" | "vertical-align-top" | "vertical-align-top-2" | "vibration" | "video-round" | "view-carousel" | "visibility" | "visibility-off" | "visibility-off-strok" | "visibility-strok" | "volume-off" | "volume-up" | "warning" | "warning-2" | "web-app" | "widgets" | "widgets-fill" | "widgetsz" | "wifi-protected-setup" | "native-ad" | "status-native-ad" | "two-tone-native-ad">;
+        type: import("vue").PropType<"search" | "link" | "filter" | "a" | "b" | "style" | "image" | "switch" | "a-2" | "ab-test" | "ab-test-2" | "a-circle" | "account-balance-wallet" | "account-circle" | "account-circle-outline" | "add" | "analytics" | "android" | "angle-down" | "angle-left" | "angle-right" | "angle-up" | "app-store" | "area-chart" | "arrow-back" | "arrow-downward" | "arrow-forward" | "arrow-left" | "arrow-right" | "arrow-sort-down" | "arrow-sort-up" | "arrow-upward" | "auto-awesome" | "auto-mode" | "autorenew" | "b-2" | "b-circle" | "banner" | "bidding" | "bidding-2" | "block" | "border-color" | "bug" | "bullhorn" | "bullseye-arrow" | "cached" | "calendar" | "calendar-today" | "cancel" | "chart-bar" | "chart-line" | "chart-mixed" | "check" | "check-bold" | "close" | "close-bold" | "computer-mouse" | "copy-to-clipboard" | "widgets-flat-squares" | "adjust" | "copy-to-clipboard-filled" | "cube" | "cube-background" | "marketing" | "create" | "creative" | "cross" | "crown-fill" | "cup" | "cup-a" | "cup-b" | "delete" | "diamond" | "dots" | "download" | "download-2" | "download-done" | "drag-indicator" | "ecpi" | "email" | "email-envelope" | "error" | "eye" | "favorite-border" | "filter-list" | "frame" | "fullscreen" | "fullscreen-exit" | "functions" | "gamepad-alt" | "games" | "gavel" | "gift" | "git-hub" | "globe-stand" | "google-play" | "group" | "hand-pointer" | "hands" | "heartbeat" | "help" | "help-outline" | "history" | "ios" | "image-not-supported" | "image-slash" | "import-export" | "import-export-2" | "importent" | "info" | "info-outline" | "insights" | "interstitial" | "ios-14" | "js" | "landscape" | "launch" | "levelplay" | "limit-circle" | "limit-octagon" | "loading-clean" | "lock" | "lock-open" | "login" | "logout" | "military-tech" | "mix" | "mix-2" | "mobile-landscape" | "mobile-portrait" | "money-check" | "more-horiz" | "more-vert" | "mouse" | "mouse-pointer" | "moving-up" | "notifications-none" | "offerwall" | "palyable" | "paper-plane-off" | "paper-plane" | "pause" | "pause-circle-filled" | "pause-circle-outline" | "phone-iphone" | "photo" | "photo-2" | "play-arrow" | "play-circle-filled-white" | "play-circle-outline" | "qrcode" | "quick-ab" | "quick-ab-2" | "react" | "redo" | "refresh" | "remove" | "replay" | "rewarded-video" | "rocket-launch" | "rotate" | "route" | "sack-dollar" | "schedule" | "search-bold" | "share" | "slack" | "sports-esports" | "star" | "star-fill" | "status-banner" | "status-interstitial" | "status-offerwall" | "status-rewarded-video" | "stop-circle-filled" | "stop-circle-outline" | "success" | "success-full" | "tablet-landscape" | "tablet-mac" | "tablet-portrait" | "texture" | "theme-dark" | "theme-light" | "timelapse" | "timeline" | "trending-down" | "trending-flat" | "trending-up" | "tune" | "two-tone-banner" | "two-tone-interstitial" | "two-tone-offerwall" | "two-tone-rewarded-video" | "undo" | "unfold-less" | "unfold-more" | "vertical-align-top" | "vertical-align-top-2" | "vibration" | "video-round" | "view-carousel" | "visibility" | "visibility-off" | "visibility-off-strok" | "visibility-strok" | "volume-off" | "volume-up" | "warning" | "warning-2" | "web-app" | "widgets" | "widgets-fill" | "widgetsz" | "wifi-protected-setup" | "native-ad" | "status-native-ad" | "two-tone-native-ad">;
     } & {
         default: any;
     };
@@ -122,7 +122,7 @@ declare const EmptyStateTypes: () => import("vue").DefineComponent<{
     size: "sm" | "lg";
     title: string;
     fontSize: string;
-    iconName: "search" | "link" | "filter" | "a" | "b" | "style" | "image" | "switch" | "a-2" | "ab-test" | "ab-test-2" | "a-circle" | "account-balance-wallet" | "account-circle" | "account-circle-outline" | "add" | "analytics" | "android" | "angle-down" | "angle-left" | "angle-right" | "angle-up" | "app-store" | "area-chart" | "arrow-back" | "arrow-downward" | "arrow-forward" | "arrow-left" | "arrow-right" | "arrow-sort-down" | "arrow-sort-up" | "arrow-upward" | "auto-awesome" | "auto-mode" | "autorenew" | "b-2" | "b-circle" | "banner" | "bidding" | "bidding-2" | "block" | "border-color" | "bug" | "bullhorn" | "bullseye-arrow" | "cached" | "calendar" | "calendar-today" | "cancel" | "chart-bar" | "chart-line" | "chart-mixed" | "check" | "check-bold" | "close" | "close-bold" | "computer-mouse" | "copy-to-clipboard" | "widgets-flat-squares" | "adjust" | "copy-to-clipboard-filled" | "cube" | "cube-background" | "marketing" | "create" | "creative" | "cross" | "crown-fill" | "cup" | "cup-a" | "cup-b" | "delete" | "diamond" | "dots" | "download" | "download-2" | "download-done" | "drag-indicator" | "ecpi" | "email" | "email-envelope" | "error" | "eye" | "favorite-border" | "filter-list" | "frame" | "fullscreen" | "fullscreen-exit" | "functions" | "gamepad-alt" | "games" | "gavel" | "gift" | "git-hub" | "globe-stand" | "google-play" | "group" | "hand-pointer" | "hands" | "heartbeat" | "help" | "help-outline" | "history" | "ios" | "image-not-supported" | "image-slash" | "import-export" | "import-export-2" | "importent" | "info" | "info-outline" | "insights" | "interstitial" | "ios-14" | "js" | "landscape" | "launch" | "levelplay" | "limit-circle" | "limit-octagon" | "loading-clean" | "lock" | "lock-open" | "login" | "logout" | "military-tech" | "mix" | "mix-2" | "mobile-landscape" | "mobile-portrait" | "money-check" | "more-horiz" | "more-vert" | "mouse" | "mouse-pointer" | "moving-up" | "notifications-none" | "offerwall" | "palyable" | "paper-plane-off" | "paper-plane" | "pause" | "pause-circle-filled" | "pause-circle-outline" | "phone-iphone" | "photo" | "photo-2" | "play-arrow" | "play-circle-filled-white" | "play-circle-outline" | "qrcode" | "quick-ab" | "quick-ab-2" | "react" | "redo" | "refresh" | "remove" | "replay" | "rewarded-video" | "rocket-launch" | "rotate" | "route" | "sack-dollar" | "schedule" | "search-bold" | "share" | "slack" | "sports-esports" | "star" | "star-fill" | "status-banner" | "status-interstitial" | "status-offerwall" | "status-rewarded-video" | "stop-circle-filled" | "stop-circle-outline" | "success" | "success-full" | "table-edit" | "tablet-landscape" | "tablet-mac" | "tablet-portrait" | "texture" | "theme-dark" | "theme-light" | "timelapse" | "timeline" | "trending-down" | "trending-flat" | "trending-up" | "tune" | "two-tone-banner" | "two-tone-interstitial" | "two-tone-offerwall" | "two-tone-rewarded-video" | "undo" | "unfold-less" | "unfold-more" | "vertical-align-top" | "vertical-align-top-2" | "vibration" | "video-round" | "view-carousel" | "visibility" | "visibility-off" | "visibility-off-strok" | "visibility-strok" | "volume-off" | "volume-up" | "warning" | "warning-2" | "web-app" | "widgets" | "widgets-fill" | "widgetsz" | "wifi-protected-setup" | "native-ad" | "status-native-ad" | "two-tone-native-ad";
+    iconName: "search" | "link" | "filter" | "a" | "b" | "style" | "image" | "switch" | "a-2" | "ab-test" | "ab-test-2" | "a-circle" | "account-balance-wallet" | "account-circle" | "account-circle-outline" | "add" | "analytics" | "android" | "angle-down" | "angle-left" | "angle-right" | "angle-up" | "app-store" | "area-chart" | "arrow-back" | "arrow-downward" | "arrow-forward" | "arrow-left" | "arrow-right" | "arrow-sort-down" | "arrow-sort-up" | "arrow-upward" | "auto-awesome" | "auto-mode" | "autorenew" | "b-2" | "b-circle" | "banner" | "bidding" | "bidding-2" | "block" | "border-color" | "bug" | "bullhorn" | "bullseye-arrow" | "cached" | "calendar" | "calendar-today" | "cancel" | "chart-bar" | "chart-line" | "chart-mixed" | "check" | "check-bold" | "close" | "close-bold" | "computer-mouse" | "copy-to-clipboard" | "widgets-flat-squares" | "adjust" | "copy-to-clipboard-filled" | "cube" | "cube-background" | "marketing" | "create" | "creative" | "cross" | "crown-fill" | "cup" | "cup-a" | "cup-b" | "delete" | "diamond" | "dots" | "download" | "download-2" | "download-done" | "drag-indicator" | "ecpi" | "email" | "email-envelope" | "error" | "eye" | "favorite-border" | "filter-list" | "frame" | "fullscreen" | "fullscreen-exit" | "functions" | "gamepad-alt" | "games" | "gavel" | "gift" | "git-hub" | "globe-stand" | "google-play" | "group" | "hand-pointer" | "hands" | "heartbeat" | "help" | "help-outline" | "history" | "ios" | "image-not-supported" | "image-slash" | "import-export" | "import-export-2" | "importent" | "info" | "info-outline" | "insights" | "interstitial" | "ios-14" | "js" | "landscape" | "launch" | "levelplay" | "limit-circle" | "limit-octagon" | "loading-clean" | "lock" | "lock-open" | "login" | "logout" | "military-tech" | "mix" | "mix-2" | "mobile-landscape" | "mobile-portrait" | "money-check" | "more-horiz" | "more-vert" | "mouse" | "mouse-pointer" | "moving-up" | "notifications-none" | "offerwall" | "palyable" | "paper-plane-off" | "paper-plane" | "pause" | "pause-circle-filled" | "pause-circle-outline" | "phone-iphone" | "photo" | "photo-2" | "play-arrow" | "play-circle-filled-white" | "play-circle-outline" | "qrcode" | "quick-ab" | "quick-ab-2" | "react" | "redo" | "refresh" | "remove" | "replay" | "rewarded-video" | "rocket-launch" | "rotate" | "route" | "sack-dollar" | "schedule" | "search-bold" | "share" | "slack" | "sports-esports" | "star" | "star-fill" | "status-banner" | "status-interstitial" | "status-offerwall" | "status-rewarded-video" | "stop-circle-filled" | "stop-circle-outline" | "success" | "success-full" | "tablet-landscape" | "tablet-mac" | "tablet-portrait" | "texture" | "theme-dark" | "theme-light" | "timelapse" | "timeline" | "trending-down" | "trending-flat" | "trending-up" | "tune" | "two-tone-banner" | "two-tone-interstitial" | "two-tone-offerwall" | "two-tone-rewarded-video" | "undo" | "unfold-less" | "unfold-more" | "vertical-align-top" | "vertical-align-top-2" | "vibration" | "video-round" | "view-carousel" | "visibility" | "visibility-off" | "visibility-off-strok" | "visibility-strok" | "volume-off" | "volume-up" | "warning" | "warning-2" | "web-app" | "widgets" | "widgets-fill" | "widgetsz" | "wifi-protected-setup" | "native-ad" | "status-native-ad" | "two-tone-native-ad";
     subtitle: string;
     buttonText: string;
     isHorizontal: boolean;

package/components/filterDropdown/AddFilterButton.vue.d.ts

@@ -2,10 +2,12 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     selected?: boolean;
     disabled?: boolean;
     prefix?: string;
+    testId?: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     selected?: boolean;
     disabled?: boolean;
     prefix?: string;
+    testId?: string;
 }>>>, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/filterDropdown/AddFilterButton.vue.js

@@ -10,7 +10,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     selected: { type: Boolean },
     disabled: { type: Boolean },
-    prefix: null
+    prefix: null,
+    testId: null
   },
   setup(__props) {
     return (_ctx, _cache) => {
@@ -19,7 +20,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["add-filter", { disabled: __props.disabled }]),
         selected: __props.selected,
         disabled: __props.disabled,
-        prefix: __props.prefix
+        prefix: __props.prefix,
+        "test-id": __props.testId
       }, createSlots({
         default: withCtx(() => [
           createVNode(Text, {
@@ -44,10 +46,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["class", "selected", "disabled", "prefix"]);
+      ]), 1032, ["class", "selected", "disabled", "prefix", "test-id"]);
     };
   }
 });
-var AddFilterButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-aef29636"]]);
+var AddFilterButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-44051188"]]);
 
 export { AddFilterButton as default };

package/components/filterDropdown/FilterDropdown.vue.d.ts

@@ -6,9 +6,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onSearch: (item: unknown) => boolean;
     options: unknown[];
     addNewFilter: (filter: Filter) => void;
+    testId?: string;
 }>, {
     text: string;
     disabled: boolean;
+    testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     displayValue: (item: unknown) => string;
     text?: string;
@@ -16,11 +18,14 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onSearch: (item: unknown) => boolean;
     options: unknown[];
     addNewFilter: (filter: Filter) => void;
+    testId?: string;
 }>, {
     text: string;
     disabled: boolean;
+    testId: string;
 }>>>, {
     text: string;
+    testId: string;
     disabled: boolean;
 }>;
 export default _default;

package/components/filterDropdown/FilterDropdown.vue.js

@@ -13,7 +13,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false },
     onSearch: null,
     options: null,
-    addNewFilter: null
+    addNewFilter: null,
+    testId: { default: "" }
   },
   setup(__props) {
     return (_ctx, _cache) => {
@@ -25,18 +26,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         skidding: 0,
         "is-on-top": "",
         options: __props.options,
+        "test-id": __props.testId,
         "onUpdate:selected": __props.addNewFilter
       }, {
         input: withCtx(() => [
           createVNode(AddFilterButton, {
             class: "add-filter-button",
-            disabled: __props.disabled
+            disabled: __props.disabled,
+            "test-id": __props.testId
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(__props.text), 1)
             ]),
             _: 1
-          }, 8, ["disabled"])
+          }, 8, ["disabled", "test-id"])
         ]),
         default: withCtx(({ option }) => [
           createVNode(unref(Option), { option }, {
@@ -47,10 +50,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 1032, ["option"])
         ]),
         _: 1
-      }, 8, ["display-value", "disabled", "on-search", "options", "onUpdate:selected"]);
+      }, 8, ["display-value", "disabled", "on-search", "options", "test-id", "onUpdate:selected"]);
     };
   }
 });
-var FilterDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-439b9823"]]);
+var FilterDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-59e42a26"]]);
 
 export { FilterDropdown as default };

package/components/filterDropdown/index.d.ts

@@ -9,6 +9,9 @@ declare const FilterDropdownTypes: () => (import("vue").DefineComponent<{
     prefix: {
         type: import("vue").PropType<string>;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     selected: {
         type: import("vue").PropType<boolean>;
@@ -19,12 +22,20 @@ declare const FilterDropdownTypes: () => (import("vue").DefineComponent<{
     prefix: {
         type: import("vue").PropType<string>;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+    };
 }>>, {}> | import("vue").DefineComponent<{
     text: {
         type: import("vue").PropType<string>;
     } & {
         default: string;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     disabled: {
         type: import("vue").PropType<boolean>;
     } & {
@@ -52,6 +63,11 @@ declare const FilterDropdownTypes: () => (import("vue").DefineComponent<{
     } & {
         default: string;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     disabled: {
         type: import("vue").PropType<boolean>;
     } & {
@@ -75,6 +91,7 @@ declare const FilterDropdownTypes: () => (import("vue").DefineComponent<{
     };
 }>>, {
     text: string;
+    testId: string;
     disabled: boolean;
 }>)[];
 export { default as FilterDropdown } from './FilterDropdown.vue';

package/components/filtersPanel/FiltersPanel.vue.d.ts

@@ -4,16 +4,21 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     isOpen?: boolean;
     selected: Record<string, Filter> | Record<string, Filter>[];
     isMultiSelect?: boolean;
+    testId?: string;
 }>, {
     isOpen: boolean;
+    testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     filters: Filter[];
     isOpen?: boolean;
     selected: Record<string, Filter> | Record<string, Filter>[];
     isMultiSelect?: boolean;
+    testId?: string;
 }>, {
     isOpen: boolean;
+    testId: string;
 }>>>, {
+    testId: string;
     isOpen: boolean;
 }>;
 export default _default;

package/components/filtersPanel/FiltersPanel.vue.js

@@ -3,13 +3,15 @@ import { defineComponent, computed, openBlock, createElementBlock, Fragment, ren
 
 import "../../FiltersPanel.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _hoisted_1 = { class: "filter-panel" };
+const _hoisted_2 = ["data-testid"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "FiltersPanel",
   props: {
     filters: null,
     isOpen: { type: Boolean, default: false },
     selected: null,
-    isMultiSelect: { type: Boolean }
+    isMultiSelect: { type: Boolean },
+    testId: { default: "" }
   },
   setup(__props) {
     const props = __props;
@@ -38,10 +40,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               hidden: filter.hidden,
               selected: props.isMultiSelect ? __props.selected[filter.id].length > 0 : !!__props.selected[filter.id],
               exposed: !filter.hidden
-            }])
+            }]),
+            "data-testid": `${props.testId}-filter-${filter.id}`
           }, [
             renderSlot(_ctx.$slots, filter.id, normalizeProps(guardReactiveProps(filter)), void 0, true)
-          ], 2);
+          ], 10, _hoisted_2);
         }), 128)),
         !__props.isOpen ? renderSlot(_ctx.$slots, "add", {
           key: 0,
@@ -51,6 +54,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var FiltersPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3ee9d4c0"]]);
+var FiltersPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7bb724f2"]]);
 
 export { FiltersPanel as default };