@ironsource/shared-ui 2.1.12-rc.5 → 2.1.12-rc.50

package/components/chart/mockData.d.ts

@@ -1,13 +1,22 @@
 export declare const SINGLE_DATASET_DATE: {
+    id: string;
+    label: string;
+    data: {
+        date: string;
+        value: number;
+    }[];
+}[];
+export declare const SINGLE_DATASET_DATE_MONTHLY: {
+    id: string;
     label: string;
     data: {
         date: string;
         value: number;
     }[];
-    color: string;
 }[];
 export declare const SINGLE_DATASET_COUNTRY: {
     id: string;
+    countryFlag: string;
     label: string;
     data: {
         value: number;
@@ -15,10 +24,21 @@ export declare const SINGLE_DATASET_COUNTRY: {
         value3: number;
     }[];
 }[];
-export declare const MULTIPLE_DATASETS_DATE: ({
+export declare const SINGLE_DATASET_APP: {
     id: string;
     label: string;
+    icon: string;
+    image: string;
+    data: {
+        app: string;
+        value: number;
+    }[];
+}[];
+export declare const MULTIPLE_DATASETS_DATE: ({
+    id: number;
+    label: string;
     caption: string;
+    isTotal: boolean;
     icon: string;
     data: {
         date: string;
@@ -28,7 +48,7 @@ export declare const MULTIPLE_DATASETS_DATE: ({
     }[];
     iconType?: undefined;
 } | {
-    id: string;
+    id: number;
     label: string;
     caption: string;
     icon: string;
@@ -39,19 +59,23 @@ export declare const MULTIPLE_DATASETS_DATE: ({
         value2: number;
         value3: number;
     }[];
+    isTotal?: undefined;
 } | {
-    id: string;
+    id: number;
     label: string;
     caption: string;
     icon: string;
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
+    isTotal?: undefined;
     iconType?: undefined;
 })[];
 export declare const MULTIPLE_DATASETS_SINGLE_DATE: {
-    id: string;
+    id: number;
     label: string;
     data: {
         date: string;
@@ -69,3 +93,7 @@ export declare const breakdownsOptions: {
     id: string;
     label: string;
 }[];
+export declare const LEGEND_SORTING_OPTIONS: {
+    id: string;
+    label: string;
+}[];

package/components/chart/types.d.ts

@@ -1,22 +1,30 @@
 import { Ref } from 'vue';
 import { UseVirtualListItem } from '@vueuse/core';
 import { IconTypes } from '../icon/v4/Icon.types';
-import { ChartTypeRegistry, TooltipItem } from 'chart.js';
+import { ChartDataset, ChartTypeRegistry, TooltipItem } from 'chart.js';
 export declare enum ChartType {
     Line = "line",
     Bar = "bar",
     StackedLine = "stackedLine",
     StackedBar = "stackedBar"
 }
+export declare enum DateInterval {
+    DAILY = "daily",
+    WEEKLY = "weekly",
+    MONTHLY = "monthly"
+}
 export type ChartDataRecord = Record<string, unknown>;
 export type ChartDataSet = {
     id: string | number;
     label: string;
     data: ChartDataRecord[];
     caption?: string;
-    color?: string;
+    color?: HexColor;
     icon?: string;
     iconType?: IconTypes;
+    countryFlag?: string;
+    image?: string;
+    isTotal?: boolean;
 };
 export type ChartParsingConfig = {
     xAxisKey: string;
@@ -32,10 +40,7 @@ export type LegendItem = {
     iconType?: IconTypes;
 };
 export interface MyTooltipItem<T extends keyof ChartTypeRegistry = keyof ChartTypeRegistry> extends TooltipItem<T> {
-    dataset: {
-        icon?: string;
-        iconType?: IconTypes;
-    } & TooltipItem<T>['dataset'];
+    dataset: ChartDataSet & TooltipItem<T>['dataset'];
 }
 export type UseVirtualListResult = {
     list: Ref<UseVirtualListItem<LegendItem>[]>;
@@ -58,4 +63,28 @@ export type DropdownTypeOption = {
 export type UseChartHeightArgs = {
     chartPlanesCount: Ref<number>;
     useFullHeight: boolean;
+    bottomSpacing?: number;
 };
+export type HexColor = `#${string}`;
+export type DataSetConfig = ChartDataset<'line'> & ChartDataSet;
+export interface Font {
+    size: number;
+    weight: number;
+    family: string;
+}
+export type PrepareTicksLabelArgs = {
+    label: string;
+    format: ValueFormat;
+    availableSpace: number;
+    truncate?: boolean;
+};
+export declare enum TooltipOrder {
+    Legend = "legend",
+    YAxis = "yAxis"
+}
+export declare enum TrendDirection {
+    UP = "up",
+    DOWN = "down",
+    NEUTRAL = "neutral"
+}
+export type ColorVariant = 'default' | 'mediation';

package/components/chart/types.js

@@ -1,4 +1,7 @@
-var a = /* @__PURE__ */ ((e) => (e.Line = "line", e.Bar = "bar", e.StackedLine = "stackedLine", e.StackedBar = "stackedBar", e))(a || {});
+var L = /* @__PURE__ */ ((e) => (e.Line = "line", e.Bar = "bar", e.StackedLine = "stackedLine", e.StackedBar = "stackedBar", e))(L || {}), a = /* @__PURE__ */ ((e) => (e.DAILY = "daily", e.WEEKLY = "weekly", e.MONTHLY = "monthly", e))(a || {}), n = /* @__PURE__ */ ((e) => (e.Legend = "legend", e.YAxis = "yAxis", e))(n || {}), r = /* @__PURE__ */ ((e) => (e.UP = "up", e.DOWN = "down", e.NEUTRAL = "neutral", e))(r || {});
 export {
-  a as ChartType
+  L as ChartType,
+  a as DateInterval,
+  n as TooltipOrder,
+  r as TrendDirection
 };

package/components/chart/utils/highlightUtils.d.ts

@@ -0,0 +1,3 @@
+import { DataSetConfig } from '@/components/chart/types';
+export declare const storeOriginalDatasetColors: (dataset: DataSetConfig) => void;
+export declare const restoreOriginalDatasetColors: (dataset: DataSetConfig) => void;

package/components/chart/utils/highlightUtils.js

@@ -0,0 +1,18 @@
+const _ = [
+  "borderColor",
+  "backgroundColor",
+  "pointBackgroundColor",
+  "pointHoverBorderColor"
+], l = (o) => {
+  _.forEach((r) => {
+    o[`___${r}`] = o[r];
+  });
+}, n = (o) => {
+  _.forEach((r) => {
+    o[`___${r}`] && (o[r] = o[`___${r}`], delete o[`___${r}`]);
+  });
+};
+export {
+  n as restoreOriginalDatasetColors,
+  l as storeOriginalDatasetColors
+};

package/components/chart/utils/utils.d.ts

@@ -1,3 +1,3 @@
-import { ValueFormat } from '@/components/chart/types';
-export declare const calcStepSize: (min: number, max: number, tickCount: number) => number;
-export declare const formatValue: (value: number | string, valueFormat: ValueFormat) => string;
+import { PrepareTicksLabelArgs, ValueFormat } from '@/components/chart/types';
+export declare const formatValue: (value: number | string | Date, valueFormat: ValueFormat, formatLowDigits?: boolean, withSuffixSpace?: boolean) => string;
+export declare const prepareTickLabel: ({ label, format, availableSpace, truncate, }: PrepareTicksLabelArgs) => string | string[];

package/components/chart/utils/utils.js

@@ -1,12 +1,27 @@
-import { format as n } from "date-fns";
-import { nFormatter as d } from "../../../utils/formatNumbers.js";
-const M = (r, t, e) => {
-  if (e === 0)
-    return 0;
-  const f = t - r, o = f / e * 0.4;
-  return (f + o) / e;
-}, c = (r, t) => t === "day" ? n(new Date(r), "EEEE") : t === "number" ? d(r) : t === "date" ? n(new Date(r), "MMM dd") : t === "dateLong" ? n(new Date(r), "MMM dd, yyyy") : String(r);
+import { getUTCDate as e } from "../../../utils/date.js";
+import { format as f } from "date-fns";
+import { TICK_LABEL_FONT as d } from "../consts.js";
+import { nFormatter as L, DEFAULT_FALLBACK as T } from "../../../utils/formatNumbers.js";
+import { truncateTextToFit as c } from "../../../utils/text.js";
+import { REGEX_LINEBREAK as s } from "../../../consts/regex.js";
+const u = (r, t, o = !1, n = !0) => t === "day" ? f(e(r), "EEEE") : t === "number" ? L(
+  r,
+  o,
+  T,
+  n
+) : t === "date" ? f(e(r), "MMM dd") : t === "dateLong" ? f(e(r), "MMM dd, yyyy") : String(r), B = ({
+  label: r,
+  format: t,
+  availableSpace: o,
+  truncate: n = !1
+}) => {
+  const p = s.test(r), m = (E) => {
+    const i = u(E, t);
+    return n && o > 0 ? c(i, d, o) : i;
+  };
+  return p ? r.split(s).map(m) : m(r);
+};
 export {
-  M as calcStepSize,
-  c as formatValue
+  u as formatValue,
+  B as prepareTickLabel
 };

package/components/checkbox/v3/Checkbox.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isChecked: boolean;
     isIndeterminate?: boolean;
     disabled?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "md" | "sm" | "lg";
     label?: string;
     testId?: string;
 }>, {
@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isChecked: boolean;
     isIndeterminate?: boolean;
     disabled?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "md" | "sm" | "lg";
     label?: string;
     testId?: string;
 }>, {
@@ -29,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     label: string;
     testId: string;
-    size: "sm" | "md" | "lg";
+    size: "md" | "sm" | "lg";
 }>, {
     default?(_: {}): any;
 }>;

package/components/checkbox/v3/index.d.ts

@@ -5,7 +5,7 @@ declare const CheckboxTypes: () => ({
         $props: Partial<{
             label: string;
             testId: string;
-            size: "sm" | "md" | "lg";
+            size: "md" | "sm" | "lg";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             label: {
                 type: import("vue").PropType<string>;
@@ -19,7 +19,7 @@ declare const CheckboxTypes: () => ({
                 type: import("vue").PropType<boolean>;
             };
             size: {
-                type: import("vue").PropType<"sm" | "md" | "lg">;
+                type: import("vue").PropType<"md" | "sm" | "lg">;
                 default: string;
             };
             isIndeterminate: {
@@ -59,7 +59,7 @@ declare const CheckboxTypes: () => ({
                 type: import("vue").PropType<boolean>;
             };
             size: {
-                type: import("vue").PropType<"sm" | "md" | "lg">;
+                type: import("vue").PropType<"md" | "sm" | "lg">;
                 default: string;
             };
             isIndeterminate: {
@@ -78,7 +78,7 @@ declare const CheckboxTypes: () => ({
         }, string, {
             label: string;
             testId: string;
-            size: "sm" | "md" | "lg";
+            size: "md" | "sm" | "lg";
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -112,7 +112,7 @@ declare const CheckboxTypes: () => ({
             type: import("vue").PropType<boolean>;
         };
         size: {
-            type: import("vue").PropType<"sm" | "md" | "lg">;
+            type: import("vue").PropType<"md" | "sm" | "lg">;
             default: string;
         };
         isIndeterminate: {
@@ -142,7 +142,7 @@ declare const CheckboxTypes: () => ({
         type: import("vue").PropType<boolean>;
     };
     size: {
-        type: import("vue").PropType<"sm" | "md" | "lg">;
+        type: import("vue").PropType<"md" | "sm" | "lg">;
         default: string;
     };
     isIndeterminate: {
@@ -161,7 +161,7 @@ declare const CheckboxTypes: () => ({
 }, string, {
     label: string;
     testId: string;
-    size: "sm" | "md" | "lg";
+    size: "md" | "sm" | "lg";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;

package/components/columnConfigurator/ColumnConfigurator.types.d.ts

@@ -0,0 +1,12 @@
+import { SortableListItem } from '@/components/sortableList/SortableList.types';
+export type ColumnConfigSection = {
+    sectionId: string;
+    title: string;
+    isGrouped: boolean;
+    maxSelections?: number;
+    sectionOptions: SortableListItem[] | SectionOptionsGroup[];
+};
+export type SectionOptionsGroup = {
+    displayText: string;
+    options: SortableListItem[];
+};

package/components/columnConfigurator/ColumnConfigurator.vue.d.ts

@@ -0,0 +1,61 @@
+import { ColumnConfigSection } from '@/components/columnConfigurator/ColumnConfigurator.types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    columnsConfig: ColumnConfigSection[];
+    selection: (string | number)[];
+    childSelection: Record<string, string | number>;
+    alwaysVisibleCount?: number;
+    loading?: boolean;
+    testId?: string;
+}>, {
+    columnsConfig: () => any[];
+    selection: () => any[];
+    childSelection: () => {};
+    alwaysVisibleCount: number;
+    loading: boolean;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selection": (value: unknown[]) => void;
+    "update:childSelection": (value: Record<string, string | number>) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    columnsConfig: ColumnConfigSection[];
+    selection: (string | number)[];
+    childSelection: Record<string, string | number>;
+    alwaysVisibleCount?: number;
+    loading?: boolean;
+    testId?: string;
+}>, {
+    columnsConfig: () => any[];
+    selection: () => any[];
+    childSelection: () => {};
+    alwaysVisibleCount: number;
+    loading: boolean;
+    testId: string;
+}>>> & {
+    "onUpdate:selection"?: (value: unknown[]) => any;
+    "onUpdate:childSelection"?: (value: Record<string, string | number>) => any;
+}, {
+    testId: string;
+    loading: boolean;
+    selection: (string | number)[];
+    alwaysVisibleCount: number;
+    columnsConfig: ColumnConfigSection[];
+    childSelection: Record<string, string | number>;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/columnConfigurator/ColumnConfigurator.vue.js

@@ -0,0 +1,7 @@
+import o from "./ColumnConfigurator.vue2.js";
+/* empty css                         */import _ from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../ColumnConfigurator.vue_vue_type_style_index_0_scoped_c13770d4_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-c13770d4"]]);
+export {
+  s as default
+};

package/components/columnConfigurator/ColumnConfigurator.vue2.js

@@ -0,0 +1,113 @@
+ import "../../ColumnConfigurator.vue_vue_type_style_index_0_scoped_c13770d4_lang.css"; import { defineComponent as E, ref as g, computed as f, watch as I, openBlock as p, createElementBlock as v, mergeProps as O, unref as s, Fragment as w, renderList as T, createVNode as u, isRef as U, withCtx as h, createElementVNode as x } from "vue";
+import N from "./SectionHeaderText.vue.js";
+import R from "../sortableList/SortableSelectableList.vue.js";
+import k from "../columnPicker/RemoveButton.vue.js";
+import { mapOverObject as B, omitKeys as A } from "../../utils/object.js";
+import { findOptionInSection as P } from "./utils.js";
+import { useTestIdAttrs as V } from "../../utils/testIds.js";
+import { ColumnConfiguratorTestIdModifiers as c } from "../../testids/index.js";
+import L from "./SectionDropdown.vue.js";
+const M = { class: "section-header" }, Q = /* @__PURE__ */ E({
+  __name: "ColumnConfigurator",
+  props: {
+    columnsConfig: { default: () => [] },
+    selection: { default: () => [] },
+    childSelection: { default: () => ({}) },
+    alwaysVisibleCount: { default: 6 },
+    loading: { type: Boolean, default: !1 },
+    testId: { default: "" }
+  },
+  emits: ["update:selection", "update:childSelection"],
+  setup(n, { emit: m }) {
+    const i = n, r = g(null), d = f({
+      get: () => i.childSelection,
+      set: (t) => {
+        m("update:childSelection", t);
+      }
+    }), C = f(
+      () => B(a.value, (t) => t?.length ?? 0)
+    ), a = g({});
+    I(
+      [() => i.selection, () => i.columnsConfig],
+      () => {
+        a.value = i.columnsConfig.reduce((t, l) => (t[l.sectionId] = (i.selection ?? []).map((e) => P(l, e)).filter((e) => e), t), {});
+      },
+      {
+        immediate: !0
+      }
+    );
+    const S = (t, l) => {
+      const e = l;
+      a.value[t] = e, e.forEach((o) => {
+        o.children?.length > 0 && (d.value = {
+          ...d.value,
+          [o.id]: o.children[0].id
+        });
+      });
+    }, $ = f(
+      () => Object.values(a.value).reduce(
+        (t, l) => t.concat(l.map(({ id: e }) => e)),
+        []
+      )
+    );
+    I($, (t, l) => {
+      JSON.stringify(t) !== JSON.stringify(l) && m("update:selection", t);
+    });
+    const b = (t) => {
+      m(
+        "update:selection",
+        i.selection.filter((l) => l !== t)
+      ), r.value === t && (r.value = null), d.value = A(d.value, [String(t)]);
+    }, y = V(
+      i.testId,
+      c
+    );
+    return (t, l) => (p(), v("div", O({ class: "column-configurator" }, s(y)[s(c).WRAPPER]), [
+      (p(!0), v(w, null, T(n.columnsConfig, (e) => (p(), v("div", {
+        key: e.sectionId,
+        class: "column-section"
+      }, [
+        u(R, {
+          items: a.value[e.sectionId],
+          "onUpdate:items": (o) => a.value[e.sectionId] = o,
+          "open-id": r.value,
+          "onUpdate:open-id": l[0] || (l[0] = (o) => r.value = o),
+          "selected-child-per-item": s(d),
+          "onUpdate:selected-child-per-item": l[1] || (l[1] = (o) => U(d) ? d.value = o : null),
+          "always-visible-count": n.alwaysVisibleCount,
+          "is-loading": n.loading,
+          variant: "compact",
+          "draggable-area": "full",
+          "loading-row-count": 3,
+          "test-id": `${n.testId}-${s(c).LIST}-${e.sectionId}`
+        }, {
+          header: h(() => [
+            x("div", M, [
+              u(N, {
+                "header-text": e.title,
+                "records-count": n.loading ? null : s(C)[e.sectionId],
+                "data-testid": `${n.testId}-${s(c).SECTION_HEADER}-${e.sectionId}`
+              }, null, 8, ["header-text", "records-count", "data-testid"]),
+              u(L, {
+                selected: a.value[e.sectionId],
+                section: e,
+                "test-id": n.testId,
+                "onUpdate:selected": (o) => S(e.sectionId, o)
+              }, null, 8, ["selected", "section", "test-id", "onUpdate:selected"])
+            ])
+          ]),
+          menu: h(({ item: o }) => [
+            u(k, {
+              "test-id": `${n.testId}-${s(c).REMOVE_BUTTON}-${o.id}`,
+              onClick: (j) => b(o.id)
+            }, null, 8, ["test-id", "onClick"])
+          ]),
+          _: 2
+        }, 1032, ["items", "onUpdate:items", "open-id", "selected-child-per-item", "always-visible-count", "is-loading", "test-id"])
+      ]))), 128))
+    ], 16));
+  }
+});
+export {
+  Q as default
+};

package/components/columnConfigurator/SectionDropdown.vue.d.ts

@@ -0,0 +1,39 @@
+import { ColumnConfigSection } from '@/components/columnConfigurator/ColumnConfigurator.types';
+import { SortableListItem } from '@/components/sortableList/SortableList.types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    selected: SortableListItem[];
+    section: ColumnConfigSection;
+    testId?: string;
+}>, {
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: SortableListItem[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    selected: SortableListItem[];
+    section: ColumnConfigSection;
+    testId?: string;
+}>, {
+    testId: string;
+}>>> & {
+    "onUpdate:selected"?: (value: SortableListItem[]) => any;
+}, {
+    testId: string;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/columnConfigurator/SectionDropdown.vue.js

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

package/components/columnConfigurator/SectionDropdown.vue2.js

@@ -0,0 +1,57 @@
+ import "../../SectionDropdown.vue_vue_type_style_index_0_scoped_cfad60a8_lang.css"; import { defineComponent as c, openBlock as m, createBlock as a, unref as t, withCtx as p, createVNode as u, mergeProps as f } from "vue";
+import { DISPLAY_FIELD_NAME as n } from "./consts.js";
+import g from "../dropdown/v4/DropdownV4.vue.js";
+import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
+import D from "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
+import "../dropdown/v4/ChipDropdownTrigger.vue.js";
+import "../dropdown/v4/AppDropdownTrigger.vue.js";
+import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
+import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
+import "../dropdown/v4/TreeDropdown.vue.js";
+import "../dropdown/v4/OptionV4.vue.js";
+import "../dropdown/v4/ConditionalDropdown.vue.js";
+import { ColumnConfiguratorTestIdModifiers as r } from "../../testids/index.js";
+import { matchString as I } from "../../utils/search.js";
+const v = /* @__PURE__ */ c({
+  __name: "SectionDropdown",
+  props: {
+    selected: null,
+    section: null,
+    testId: { default: "" }
+  },
+  emits: ["update:selected"],
+  setup(e, { emit: l }) {
+    const d = (s, i) => I(s[n], i);
+    return (s, i) => (m(), a(t(g), {
+      selected: e.selected,
+      class: "section-dropdown",
+      "display-value": (o) => o[t(n)],
+      options: e.section.sectionOptions,
+      "grouped-options": e.section.isGrouped,
+      "max-selections": e.section.maxSelections,
+      "option-name-key": t(n),
+      "comparing-key": "id",
+      multi: "",
+      "inline-search": "",
+      "show-select-all": !1,
+      "show-clear-all": !1,
+      "on-search": d,
+      placement: "bottom-end",
+      "test-id": `${e.testId}-${t(r).DROPDOWN}-${e.section.sectionId}`,
+      "onUpdate:selected": i[0] || (i[0] = (o) => l("update:selected", o))
+    }, {
+      "dropdown-trigger": p(({ buttonTriggerProps: o }) => [
+        u(t(D), f({
+          "icon-name": "plus",
+          "icon-type": "regular",
+          size: "extraSmall",
+          "test-id": `${e.testId}-${t(r).ADD_BUTTON}-${e.section.sectionId}`
+        }, o), null, 16, ["test-id"])
+      ]),
+      _: 1
+    }, 8, ["selected", "display-value", "options", "grouped-options", "max-selections", "option-name-key", "test-id"]));
+  }
+});
+export {
+  v as default
+};