npm - wabtec-internal-volt-basic-components - Versions diffs - 1.0.0 - Mend

wabtec-internal-volt-basic-components 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1131) hide show

package/dist/components/vds-basic-dropdown-multiselect.js ADDED Viewed

@@ -0,0 +1,325 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as combineClasses } from './combine-classes.js';
+import { b as getIconSize, a as getIconColor } from './icon-attr.utils.js';
+import { u as updateFloatingBoxPosition } from './floating-engine-utils.js';
+import { c as selectSelectedItems, e as getValidOptions, b as unselectNonSelectedItems, u as unselectAllItems, a as updateContainerWidth, t as toggleContainerDisplay, f as emitNativeInputEvent, h as getSelectedItemsText, d as setDropdownStyles } from './vds-basic-dropdown.utils.js';
+import { d as defineCustomElement$3 } from './vds-icon2.js';
+import { d as defineCustomElement$2 } from './vds-icon-button2.js';
+/**
+ * Compares two arrays for equality, taking into account their elements and order.
+ *
+ * @param {any[]} a The first array to compare.
+ * @param {any[]} b The second array to compare.
+ * @returns {boolean} True if the arrays are equal, false otherwise.
+ *
+ * **Comparison criteria:**
+ * - **Reference equality:** If both arrays are the same reference, they are considered equal.
+ * - **Null or undefined:** If either array is null or undefined, they are considered unequal.
+ * - **Length:** If the arrays have different lengths, they are considered unequal.
+ * - **Element equality:** If the arrays have the same length, each corresponding element is compared for equality using strict comparison (`===`).
+ */
+const arrayIsEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (a == null || b == null)
+        return false;
+    if (a.length !== b.length)
+        return false;
+    for (var i = 0; i < a.length; ++i) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+};
+const vdsBasicDropdownMultiselectCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap\");:root{font-family:\"Roboto Flex\", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-black:#000000;--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{display:block;width:100%}:host .vds-dropdown-multiselect__container{display:block}:host .vds-dropdown-multiselect___trigger{box-sizing:border-box;display:flex;width:100%;text-align:left;align-items:center;justify-content:space-between;gap:var(--spacing-02);align-self:stretch;border-radius:var(--radius-medium);border:none;box-shadow:0 0 0 0.0625rem inset var(--color-border-low);background:var(--surface-medium)}:host .vds-dropdown-multiselect___trigger:active,:host .vds-dropdown-multiselect___trigger:hover{cursor:pointer;box-shadow:0 0 0 0.0625rem inset var(--color-border-brand)}:host .vds-dropdown-multiselect___trigger:focus-visible{outline:0.125rem solid var(--color-border-focus-2);outline-offset:0.125rem}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--size-small{padding:var(--spacing-02) var(--spacing-03);height:var(--spacing-07);font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--size-medium{padding:var(--spacing-03) var(--spacing-04);height:var(--spacing-10);font-family:\"Roboto Flex\", sans-serif;font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--size-large{padding:var(--spacing-04) var(--spacing-05);height:var(--spacing-13);gap:var(--spacing-03);font-family:\"Roboto Flex\", sans-serif;font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--disabled{pointer-events:none;color:var(--color-text-disabled);box-shadow:0 0 0 0.0625rem inset var(--color-border-disabled)}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--disabled .vds-dropdown-multiselect__label--value{color:var(--color-text-disabled)}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--disabled .vds-dropdown-multiselect__label--placeholder{color:var(--color-text-disabled)}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--error{box-shadow:0 0 0 0.0625rem inset var(--color-border-danger)}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--error .vds-dropdown-multiselect__label--value{color:var(--color-text-danger-medium)}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly{pointer-events:none;box-shadow:0 0 0 0.0625rem inset var(--color-border-low)}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly:focus,:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly:active,:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly:hover{box-shadow:0 0 0 0.0625rem inset var(--color-border-low)}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly:focus-visible{outline:none}:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly .vds-dropdown-multiselect__label--value{color:var(--color-text-medium)}:host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__label{display:block;text-align:left;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__label--value{color:var(--color-text-high)}:host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__label--placeholder{color:var(--color-text-medium)}:host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__trigger-icons{display:flex;align-items:center}:host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__trigger-icons vds-icon{margin-left:var(--spacing-02);cursor:pointer;padding:0.125rem}:host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__trigger-icons vds-icon:hover{background:var(--color-interaction-black-lowest);border-radius:var(--radius-medium)}:host .vds-dropdown-multiselect__content{display:none;flex-direction:column;align-items:flex-start;align-self:stretch;min-width:max-content;max-height:fit-content !important;border-radius:var(--radius-medium);background:var(--surface-medium);box-shadow:var(--elevation-shadow-2);box-sizing:border-box;border:0.0625rem solid var(--color-border-lowest);z-index:var(--elevation-layer-5)}:host .vds-dropdown-multiselect__content.no-shadow{box-shadow:none;border:none}:host .vds-dropdown-multiselect__content.has-scroll{padding-right:var(--spacing-01)}:host .vds-dropdown-multiselect__content.match-width{width:var(--trigger-width);min-width:var(--trigger-width)}:host .vds-dropdown-multiselect__content .vds-dropdown-multiselect__content-options{overflow-y:auto;display:flex;flex-direction:column;border-radius:var(--radius-medium)}:host .vds-dropdown-multiselect__content .vds-dropdown-multiselect__content-options.scrollable{padding-right:var(--spacing-01)}:host .vds-dropdown-multiselect__content .vds-dropdown-multiselect__content-options::-webkit-scrollbar{background-color:var(--surface-medium);width:0.375rem}:host .vds-dropdown-multiselect__content .vds-dropdown-multiselect__content-options::-webkit-scrollbar-thumb{background-color:var(--color-background-neutral-press);border-radius:1rem}:host .vds-floating-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-interaction-black-lower);opacity:0.06;z-index:var(--elevation-layer-4)}:host-context(.vds-basic-dropdown-multiselect--disabled){pointer-events:none}";
+const VdsBasicDropdownMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class VdsBasicDropdownMultiselect extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.cleared = createEvent(this, "cleared", 7);
+        this.internals = this.attachInternals();
+        /** Sets the dropdown's size. */
+        this.size = "medium";
+        /** Sets the dropdown's value. */
+        this.value = [];
+        /** Sets the dropdown's trigger event. */
+        this.event = "click";
+        /** Sets displaySelectionLimit text */
+        this.displaySelectionLimitText = "Items selected";
+        /** Sets the dropdown's clear button visibility. */
+        this.showClearButton = true;
+        /** Sets the width value for the floating container of the items to match the dropdown width */
+        this.matchWidth = false;
+        /** Toggles the floating container auto-positioning based on available window space.
+         * False by default as it may cause positioning issues in some situations, use with caution
+         */
+        this.autoPosition = false;
+        /** Toggles the overlay element, allowing interaction only with this element when active */
+        this.backdrop = false;
+        this.isOpened = false;
+        this.options = [];
+    }
+    componentDidLoad() {
+        var _a, _b;
+        this.setValueHandler(this.value);
+        selectSelectedItems(this.dropdownContent, this.value);
+        (_a = this.dropdownTrigger) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        (_b = this.dropdownContent) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        this.setListenerForChildren();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.dropdownTrigger.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        this.dropdownContent.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));
+        window.removeEventListener('click', this.handleClickOut.bind(this));
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    setListenerForChildren() {
+        const config = {
+            childList: true,
+            subtree: true
+        };
+        this.observer = new MutationObserver(() => {
+            this.options = Array.from(this.hostEl.querySelectorAll("vds-dropdown-item"));
+        });
+        this.observer.observe(this.hostEl, config);
+    }
+    // Sets the value prop validating whether the newValue is string or array.
+    setValueHandler(newValue) {
+        if (!newValue) {
+            this.value = [];
+            return;
+        }
+        if (typeof newValue === "string") {
+            this.value = getValidOptions(this.dropdownContent, newValue.split(","));
+        }
+        if (Array.isArray(newValue)) {
+            const uniqueValues = [...new Set(newValue)];
+            const selectedOptions = getValidOptions(this.dropdownContent, uniqueValues);
+            this.value = arrayIsEqual(this.value, selectedOptions) ? this.value : selectedOptions;
+        }
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.value.join(","));
+        }
+        unselectNonSelectedItems(this.dropdownContent, this.value);
+        selectSelectedItems(this.dropdownContent, this.value);
+        if (this.value && this.value.length === 0) {
+            unselectAllItems(this.dropdownContent);
+        }
+    }
+    componentDidRender() {
+        this.options = Array.from(this.hostEl.querySelectorAll("vds-dropdown-item"));
+        updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, 'bottom', false);
+        updateContainerWidth(this.dropdownTrigger, this.matchWidth, this.dropdownContent);
+    }
+    async toggleDropdown() {
+        if (this.isOpened) {
+            toggleContainerDisplay(this.dropdownContent, true);
+            this.opened.emit();
+            this.floatingCleanUp = await updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, "bottom", this.autoPosition);
+        }
+        else {
+            toggleContainerDisplay(this.dropdownContent, false);
+            this.closed.emit();
+            this.floatingCleanUp();
+        }
+    }
+    /* Open the floating element(menu) of the Dropdown. */
+    async open() {
+        this.isOpened = true;
+    }
+    /* Close the floating element(menu) of the Dropdown. */
+    async close() {
+        this.isOpened = false;
+    }
+    /**
+     * Clears the selected options and resets the value of the dropdown.
+     *
+     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.
+     */
+    async clear() {
+        this.value = [];
+        unselectAllItems(this.dropdownContent);
+        this.cleared.emit(true);
+    }
+    /**
+     *  Gets the target that will manage the menu
+     *  returns a promise with the target HTMLElement.
+     *
+     *  @returns {Promise<HTMLElement>} A promise that resolves with the target html element.
+     */
+    async getTarget() {
+        return this.dropdownTrigger;
+    }
+    /**
+     *  Gets the selected value of the dropdown
+     *  returns a promise with the value.
+     *
+     *  @returns {Promise<string[]>} A promise that resolves with the value as string[].
+     */
+    async getValue() {
+        return this.value;
+    }
+    /**
+     * Sets the selected value(s) for the dropdown.
+     *
+     * @param {string[] | string} value The new value or array of values to select.
+     * @returns {Promise<void>} A promise that resolves when the value is set.
+     */
+    async setValue(value) {
+        this.setValueHandler(value);
+    }
+    /* Close the floating element when click outside */
+    handleClickOut(evt) {
+        evt.stopPropagation();
+        const target = evt.target;
+        const isClickInside = this.hostEl.contains(target);
+        const isClickInsideParentDropdown = target.nodeName === "VDS-DROPDOWN-MULTISELECT" && target.shadowRoot && evt.target.shadowRoot.contains(this.hostEl);
+        if (!isClickInside && !isClickInsideParentDropdown) {
+            this.close();
+        }
+    }
+    /**
+     * Listen when Dropdown Item element is clicked to close Dropdown Items window, set the value and emit the changes.
+     *
+     * @param {CustomEvent<DropdownItemClickedEvent>} event The dropdown item clicked event.
+     */
+    handleDropdownSelection(event) {
+        const item = event.target;
+        const value = event.detail.value;
+        item.isSelected = !item.isSelected;
+        if (item.isSelected) {
+            this.value = [...this.value, value];
+        }
+        else {
+            this.value = this.value.filter(v => v !== value);
+        }
+        this.valueChanged.emit(this.value);
+        emitNativeInputEvent(this.hostEl);
+    }
+    /* Open the floating element with click on the trigger element  */
+    handleClick(evt) {
+        evt.stopImmediatePropagation();
+        if (this.event === "click" && !this.disabled && !this.isReadonly) {
+            this.isOpened = !this.isOpened;
+        }
+    }
+    /* Close the floating element with keydown on the trigger element  */
+    handleFloatingKeydown(event) {
+        event.stopImmediatePropagation();
+        if (event.key === 'Escape' || event.key === 'Esc') {
+            this.close();
+        }
+    }
+    clearIconClick(evt) {
+        evt.stopImmediatePropagation();
+        this.clear();
+        this.close();
+    }
+    renderLabelValue() {
+        const selectedValue = this.getTextValue();
+        return h("span", { class: combineClasses("vds-dropdown-multiselect__label", `vds-dropdown-multiselect__label--${this.hasValue() ? "value" : "placeholder"}`) }, selectedValue);
+    }
+    getTextValue() {
+        if (this.displaySelectionLimit > 0 && this.value.length > this.displaySelectionLimit) {
+            return `${this.value.length} ${this.displaySelectionLimitText}`;
+        }
+        return this.hasValue() ? getSelectedItemsText(this.dropdownContent, this.value).join(", ") : this.placeholder;
+    }
+    renderInformativeIcon() {
+        return h("vds-icon", { svgIcon: this.informativeIcon, color: getIconColor(this.disabled), size: getIconSize(this.size) });
+    }
+    renderClearIcon() {
+        return h("vds-icon-button", { icon: "close", variant: "secondary", size: this.size, onClick: (evt) => {
+                this.clearIconClick(evt);
+            }, disabled: this.disabled, setAriaLabel: "clear" });
+    }
+    renderDropdownIcon() {
+        return h("vds-icon", { svgIcon: this.isOpened ? "chevron-up" : "chevron-down", color: getIconColor(this.disabled), size: getIconSize(this.size) });
+    }
+    hasValue() {
+        return Array.isArray(this.value) && this.value && this.value.length > 0;
+    }
+    render() {
+        return (h(Host, { key: '3fd565dcb815b39f8fd788b29876436817c7f322', class: combineClasses(this.disabled ? "vds-basic-dropdown-multiselect--disabled" : ""), title: this.getTextValue() }, h("div", { key: 'b0726a7feaa942de1b108be126235c5c4d7b2f16', class: "vds-dropdown-multiselect__container" }, h("button", { key: '21eeb4220d3468de485db8558527997cf726fe7a', disabled: this.disabled, ref: (el) => {
+                if (el)
+                    this.dropdownTrigger = el;
+            }, class: combineClasses("vds-dropdown-multiselect___trigger", `vds-dropdown-multiselect___trigger--size-${this.size}`, this.disabled ? "vds-dropdown-multiselect___trigger--disabled" : "", this.isReadonly ? "vds-dropdown-multiselect___trigger--readonly" : "", this.error ? "vds-dropdown-multiselect___trigger--error" : ""), onClick: (evt) => {
+                this.handleClick(evt);
+            } }, this.informativeIcon && this.renderInformativeIcon(), this.renderLabelValue(), h("div", { key: 'bd72c134929ca8af2df97ba4b7015f9bd862f7a3', class: "vds-dropdown-multiselect__trigger-icons" }, this.hasValue() && this.showClearButton && this.renderClearIcon(), this.renderDropdownIcon())), this.backdrop && this.isOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: 'c1af10efe4fa450dbb91520b0eb10ef36c87bd11', ref: (el) => {
+                if (el)
+                    this.dropdownContent = el;
+            }, class: combineClasses("vds-dropdown-multiselect__content", this.maxHeight ? "has-scroll" : "", this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: '8e8d60d2e410b3aa221543bc4ddc6e65bcb15d64', class: combineClasses('vds-dropdown-multiselect__content-options', (this.maxHeight ? 'scrollable' : '')), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: '4022c802efa4d0d68024317905f538940b8eddb9' }))))));
+    }
+    static get formAssociated() { return true; }
+    get hostEl() { return this; }
+    static get watchers() { return {
+        "value": ["setValueHandler"],
+        "isOpened": ["toggleDropdown"]
+    }; }
+    static get style() { return vdsBasicDropdownMultiselectCss; }
+}, [65, "vds-basic-dropdown-multiselect", {
+        "size": [1025],
+        "value": [1025],
+        "informativeIcon": [1025, "informative-icon"],
+        "placeholder": [1025],
+        "disabled": [1540],
+        "isReadonly": [1540, "is-readonly"],
+        "error": [1540],
+        "event": [1025],
+        "displaySelectionLimit": [2, "display-selection-limit"],
+        "displaySelectionLimitText": [1, "display-selection-limit-text"],
+        "showClearButton": [1028, "show-clear-button"],
+        "maxHeight": [1025, "max-height"],
+        "matchWidth": [1028, "match-width"],
+        "autoPosition": [1028, "auto-position"],
+        "backdrop": [4],
+        "isOpened": [32],
+        "open": [64],
+        "close": [64],
+        "clear": [64],
+        "getTarget": [64],
+        "getValue": [64],
+        "setValue": [64]
+    }, [[8, "click", "handleClickOut"], [0, "dropdownItemClicked", "handleDropdownSelection"]], {
+        "value": ["setValueHandler"],
+        "isOpened": ["toggleDropdown"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["vds-basic-dropdown-multiselect", "vds-icon", "vds-icon-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "vds-basic-dropdown-multiselect":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VdsBasicDropdownMultiselect$1);
+            }
+            break;
+        case "vds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "vds-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const VdsBasicDropdownMultiselect = VdsBasicDropdownMultiselect$1;
+const defineCustomElement = defineCustomElement$1;
+export { VdsBasicDropdownMultiselect, defineCustomElement };
+//# sourceMappingURL=vds-basic-dropdown-multiselect.js.map
+//# sourceMappingURL=vds-basic-dropdown-multiselect.js.map

package/dist/components/vds-basic-dropdown-multiselect.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"vds-basic-dropdown-multiselect.js","mappings":"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","names":["VdsBasicDropdownMultiselect","__stencil_proxyCustomElement"],"sources":["src/utils/array-utils.ts","src/components/dropdown-multiselect/vds-basic-dropdown-multiselect.scss?tag=vds-basic-dropdown-multiselect&encapsulation=shadow","src/components/dropdown-multiselect/vds-basic-dropdown-multiselect.tsx"],"sourcesContent":["/**\n * Compares two arrays for equality, taking into account their elements and order.\n *\n * @param {any[]} a The first array to compare.\n * @param {any[]} b The second array to compare.\n * @returns {boolean} True if the arrays are equal, false otherwise.\n *\n * **Comparison criteria:**\n * - **Reference equality:** If both arrays are the same reference, they are considered equal.\n * - **Null or undefined:** If either array is null or undefined, they are considered unequal.\n * - **Length:** If the arrays have different lengths, they are considered unequal.\n * - **Element equality:** If the arrays have the same length, each corresponding element is compared for equality using strict comparison (`===`).\n */\nexport const arrayIsEqual = (a: any[], b: any[]): boolean => {\n if (a === b) return true;\n if (a == null || b == null) return false;\n if (a.length !== b.length) return false;\n \n for (var i = 0; i < a.length; ++i) {\n if (a[i] !== b[i]) return false;\n }\n return true;\n}",":host {\n display: block;\n width: 100%;\n\n .vds-dropdown-multiselect__container {\n display: block;\n }\n .vds-dropdown-multiselect___trigger {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n text-align: left;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-02);\n align-self: stretch;\n border-radius: var(--radius-medium);\n border: none;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);\n background: var(--surface-medium);\n &:active, &:hover {\n cursor: pointer;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-brand);\n }\n &:focus-visible{\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n }\n &.vds-dropdown-multiselect___trigger--size-small {\n padding: var(--spacing-02) var(--spacing-03);\n height: var(--spacing-07);\n @include font-style(body, small);\n }\n &.vds-dropdown-multiselect___trigger--size-medium {\n padding: var(--spacing-03) var(--spacing-04);\n height: var(--spacing-10);\n @include font-style(body, medium);\n }\n &.vds-dropdown-multiselect___trigger--size-large {\n padding: var(--spacing-04) var(--spacing-05);\n height: var(--spacing-13);\n gap: var(--spacing-03);\n @include font-style(body, large);\n }\n &.vds-dropdown-multiselect___trigger--disabled {\n pointer-events: none;\n color: var(--color-text-disabled);\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n .vds-dropdown-multiselect__label--value {\n color: var(--color-text-disabled);\n }\n .vds-dropdown-multiselect__label--placeholder {\n color: var(--color-text-disabled);\n }\n }\n\n &.vds-dropdown-multiselect___trigger--error {\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-danger);\n .vds-dropdown-multiselect__label--value {\n color: var(--color-text-danger-medium);\n }\n }\n\n &.vds-dropdown-multiselect___trigger--readonly {\n pointer-events: none;\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);\n &:focus, &:active, &:hover {\n box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);\n }\n &:focus-visible {\n outline: none;\n }\n .vds-dropdown-multiselect__label--value {\n color: var(--color-text-medium);\n }\n }\n .vds-dropdown-multiselect__label {\n display: block;\n text-align: left;\n width: 100%;\n white-space: nowrap; \n overflow: hidden;\n text-overflow: ellipsis; \n }\n .vds-dropdown-multiselect__label--value{\n color: var(--color-text-high);\n } \n .vds-dropdown-multiselect__label--placeholder{\n color: var(--color-text-medium);\n } \n .vds-dropdown-multiselect__trigger-icons {\n display: flex;\n align-items: center;\n vds-icon {\n margin-left: var(--spacing-02);\n cursor: pointer;\n padding: 0.125rem;\n &:hover {\n background: var(--color-interaction-black-lowest);\n border-radius: var(--radius-medium);\n }\n }\n }\n }\n .vds-dropdown-multiselect__content {\n display: none;\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n min-width: max-content;\n max-height: fit-content !important;\n border-radius: var(--radius-medium);\n background: var(--surface-medium);\n box-shadow: var(--elevation-shadow-2);\n box-sizing: border-box;\n border: 0.0625rem solid var(--color-border-lowest);\n z-index: var(--elevation-layer-5);\n &.no-shadow {\n box-shadow: none;\n border: none;\n }\n &.has-scroll {\n padding-right: var(--spacing-01);\n }\n &.match-width {\n width: var(--trigger-width);\n min-width: var(--trigger-width);\n }\n .vds-dropdown-multiselect__content-options {\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n border-radius: var(--radius-medium);\n &.scrollable {\n padding-right: var(--spacing-01);\n }\n &::-webkit-scrollbar {\n background-color: var(--surface-medium);\n width: 0.375rem;\n }\n &::-webkit-scrollbar-thumb {\n background-color: var(--color-background-neutral-press);\n border-radius: 1rem;\n }\n }\n }\n .vds-floating-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-interaction-black-lower);\n opacity: 0.06;\n z-index: var(--elevation-layer-4);\n }\n}\n\n:host-context(.vds-basic-dropdown-multiselect--disabled) {\n pointer-events: none;\n}","import { Component, Host, Method, Prop, h, Event, EventEmitter, Element } from \"@stencil/core\";\nimport { AttachInternals, HTMLStencilElement, Listen, State, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { getIconSize, getIconColor } from \"../../utils/icon-attr.utils\";\nimport { updateFloatingBoxPosition } from \"../../utils/floating-engine-utils\";\nimport { emitNativeInputEvent, getSelectedItemsText, getValidOptions, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from \"../basic-dropdown/vds-basic-dropdown.utils\";\nimport { DropdownItemClickedEvent } from \"../dropdown-item/vds-dropdown-item-clicked-event\";\nimport { arrayIsEqual } from \"../../utils/array-utils\";\n\n@Component({\n tag: \"vds-basic-dropdown-multiselect\",\n styleUrl: \"vds-basic-dropdown-multiselect.scss\",\n shadow: true,\n formAssociated: true\n})\nexport class VdsBasicDropdownMultiselect {\n /** Sets the dropdown's size. */\n @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n /** Sets the dropdown's value. */\n @Prop({ mutable: true }) value: string[] | string = [];\n /** Allows user to define a information icon to the left of the dropdown. */\n @Prop({ mutable: true }) informativeIcon: string;\n /** Sets the dropdown's placeholder. */\n @Prop({ mutable: true }) placeholder: string;\n /** Sets the dropdown in disabled state. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean;\n /** Sets the dropdown in readonly state. */\n @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n /** Sets the dropdown in error state. */\n @Prop({ mutable: true, reflect: true }) error: boolean;\n /** Sets the dropdown's trigger event. */\n @Prop({ mutable: true }) event: \"click\" = \"click\";\n /** Sets the dropdown's value max items selected in plain text. */\n @Prop() displaySelectionLimit: number;\n /** Sets displaySelectionLimit text */\n @Prop() displaySelectionLimitText: string = \"Items selected\";\n /** Sets the dropdown's clear button visibility. */\n @Prop({ mutable: true }) showClearButton: boolean = true;\n /** Set the max height value for the floating container of the items */\n @Prop({ mutable: true }) maxHeight: string;\n /** Sets the width value for the floating container of the items to match the dropdown width */\n @Prop({ mutable: true }) matchWidth: boolean = false;\n /** Toggles the floating container auto-positioning based on available window space. \n * False by default as it may cause positioning issues in some situations, use with caution \n */\n @Prop({mutable: true}) autoPosition: boolean = false;\n /** Toggles the overlay element, allowing interaction only with this element when active */\n @Prop() backdrop: boolean = false;\n\n /** Emits event when floating element gets opens */\n @Event() opened: EventEmitter<void>;\n /** Emits event when floating element gets closes */\n @Event() closed: EventEmitter<void>;\n /** Emits event when an item is selected, this event contains the value of the selected item */\n @Event() valueChanged: EventEmitter<string[]>;\n /** Emits an event when the clear button is clicked */\n @Event() cleared: EventEmitter<boolean>;\n\n @State() isOpened: boolean = false;\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n private dropdownTrigger: HTMLButtonElement;\n private dropdownContent: HTMLDivElement;\n private options: HTMLVdsDropdownItemElement[] = [];\n private observer: MutationObserver;\n\n private floatingCleanUp: () => void;\n\n componentDidLoad(): void {\n this.setValueHandler(this.value);\n selectSelectedItems(this.dropdownContent, this.value);\n this.dropdownTrigger?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n this.dropdownContent?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n this.setListenerForChildren();\n }\n\n disconnectedCallback() {\n this.dropdownTrigger.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n this.dropdownContent.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n window.removeEventListener('click', this.handleClickOut.bind(this));\n this.observer?.disconnect();\n }\n private setListenerForChildren(): void {\n const config = {\n childList: true,\n subtree: true\n };\n this.observer = new MutationObserver(() => {\n this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n });\n this.observer.observe(this.hostEl, config);\n }\n\n // Sets the value prop validating whether the newValue is string or array.\n @Watch(\"value\")\n setValueHandler(newValue: string[] | string) {\n if (!newValue) {\n this.value = [];\n return;\n }\n if (typeof newValue === \"string\") {\n this.value = getValidOptions(this.dropdownContent, newValue.split(\",\"));\n }\n if (Array.isArray(newValue)) {\n const uniqueValues = [...new Set(newValue)];\n const selectedOptions = getValidOptions(this.dropdownContent, uniqueValues);\n this.value = arrayIsEqual(this.value as string[], selectedOptions) ? this.value : selectedOptions;\n }\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue((this.value as string[]).join(\",\"));\n }\n\n unselectNonSelectedItems(this.dropdownContent, this.value);\n selectSelectedItems(this.dropdownContent, this.value);\n\n if (this.value && this.value.length === 0) {\n unselectAllItems(this.dropdownContent);\n }\n }\n\n componentDidRender() {\n this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, 'bottom', false);\n updateContainerWidth(this.dropdownTrigger, this.matchWidth, this.dropdownContent);\n }\n\n @Watch(\"isOpened\")\n async toggleDropdown(): Promise<void> {\n if (this.isOpened) {\n toggleContainerDisplay(this.dropdownContent, true);\n this.opened.emit();\n this.floatingCleanUp = await updateFloatingBoxPosition(this.dropdownTrigger, this.dropdownContent, null, \"bottom\", this.autoPosition);\n } else {\n toggleContainerDisplay(this.dropdownContent, false);\n this.closed.emit();\n this.floatingCleanUp();\n }\n }\n\n /* Open the floating element(menu) of the Dropdown. */\n @Method()\n public async open(): Promise<void> {\n this.isOpened = true;\n }\n\n /* Close the floating element(menu) of the Dropdown. */\n @Method()\n public async close(): Promise<void> {\n this.isOpened = false;\n }\n \n /**\n * Clears the selected options and resets the value of the dropdown.\n *\n * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.\n */\n @Method()\n public async clear(): Promise<void> {\n this.value = [];\n unselectAllItems(this.dropdownContent);\n this.cleared.emit(true);\n }\n\n /**\n * Gets the target that will manage the menu\n * returns a promise with the target HTMLElement.\n * \n * @returns {Promise<HTMLElement>} A promise that resolves with the target html element.\n */\n @Method()\n public async getTarget(): Promise<HTMLElement | null> {\n return this.dropdownTrigger;\n }\n /**\n * Gets the selected value of the dropdown\n * returns a promise with the value.\n * \n * @returns {Promise<string[]>} A promise that resolves with the value as string[].\n */\n @Method()\n public async getValue(): Promise<string[]> {\n return this.value as string[];\n }\n \n /**\n * Sets the selected value(s) for the dropdown.\n *\n * @param {string[] | string} value The new value or array of values to select.\n * @returns {Promise<void>} A promise that resolves when the value is set.\n */\n @Method()\n public async setValue(value: string[] | string): Promise<void> {\n this.setValueHandler(value);\n }\n\n /* Close the floating element when click outside */\n @Listen('click', { target: 'window' })\n private handleClickOut(evt: MouseEvent): void {\n evt.stopPropagation();\n const target = evt.target as HTMLElement;\n const isClickInside = this.hostEl.contains(target as Node);\n const isClickInsideParentDropdown = target.nodeName === \"VDS-DROPDOWN-MULTISELECT\" && target.shadowRoot && (evt.target as HTMLElement).shadowRoot.contains(this.hostEl);\n if (!isClickInside && !isClickInsideParentDropdown) {\n this.close();\n }\n }\n\n /**\n * Listen when Dropdown Item element is clicked to close Dropdown Items window, set the value and emit the changes.\n *\n * @param {CustomEvent<DropdownItemClickedEvent>} event The dropdown item clicked event.\n */\n @Listen(\"dropdownItemClicked\")\n handleDropdownSelection(event: CustomEvent<DropdownItemClickedEvent>): void {\n const item = event.target as HTMLVdsDropdownItemElement;\n const value = event.detail.value;\n item.isSelected = !item.isSelected;\n if (item.isSelected) {\n this.value = [...this.value, value];\n } else{\n this.value = (this.value as string[]).filter(v => v !== value)\n }\n \n this.valueChanged.emit(this.value);\n emitNativeInputEvent(this.hostEl);\n }\n\n /* Open the floating element with click on the trigger element */\n private handleClick(evt: Event): void {\n evt.stopImmediatePropagation();\n if (this.event === \"click\" && !this.disabled && !this.isReadonly) {\n this.isOpened = !this.isOpened\n }\n }\n\n /* Close the floating element with keydown on the trigger element */\n private handleFloatingKeydown(event: KeyboardEvent): void {\n event.stopImmediatePropagation();\n if (event.key === 'Escape' || event.key === 'Esc') {\n this.close();\n }\n }\n\n private clearIconClick(evt: Event): void {\n evt.stopImmediatePropagation();\n this.clear();\n this.close();\n }\n\n private renderLabelValue(): HTMLStencilElement {\n const selectedValue = this.getTextValue();\n return <span class={combineClasses(\n \"vds-dropdown-multiselect__label\",\n `vds-dropdown-multiselect__label--${this.hasValue() ? \"value\" : \"placeholder\"}`)}\n >{selectedValue}</span>\n }\n\n private getTextValue(): string {\n if (this.displaySelectionLimit > 0 && this.value.length > this.displaySelectionLimit) {\n return `${this.value.length} ${this.displaySelectionLimitText}`;\n }\n\n return this.hasValue() ? getSelectedItemsText(this.dropdownContent, this.value as string[]).join(\", \") : this.placeholder;\n }\n \n private renderInformativeIcon(): HTMLStencilElement {\n return <vds-icon svgIcon={this.informativeIcon} color={getIconColor(this.disabled)} size={getIconSize(this.size)}></vds-icon>\n }\n\n private renderClearIcon(): HTMLStencilElement {\n return <vds-icon-button\n icon=\"close\"\n variant=\"secondary\"\n size={this.size}\n onClick={(evt) => {\n this.clearIconClick(evt);\n }}\n disabled={this.disabled}\n setAriaLabel=\"clear\"\n ></vds-icon-button>\n }\n\n private renderDropdownIcon(): HTMLStencilElement {\n return <vds-icon\n svgIcon={this.isOpened ? \"chevron-up\" : \"chevron-down\"}\n color={getIconColor(this.disabled)}\n size={getIconSize(this.size)}\n ></vds-icon>\n }\n\n private hasValue(): boolean {\n return Array.isArray(this.value) && this.value && this.value.length > 0;\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={combineClasses(this.disabled ? \"vds-basic-dropdown-multiselect--disabled\" : \"\")} title={this.getTextValue()}>\n <div class={\"vds-dropdown-multiselect__container\"}>\n <button\n disabled={this.disabled}\n ref={(el): void => {\n if (el) this.dropdownTrigger = el;\n }}\n class={combineClasses(\n \"vds-dropdown-multiselect___trigger\",\n `vds-dropdown-multiselect___trigger--size-${this.size}`,\n this.disabled ? \"vds-dropdown-multiselect___trigger--disabled\" : \"\",\n this.isReadonly ? \"vds-dropdown-multiselect___trigger--readonly\" : \"\",\n this.error ? \"vds-dropdown-multiselect___trigger--error\" : \"\" \n )}\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n >\n {this.informativeIcon && this.renderInformativeIcon()}\n {this.renderLabelValue()}\n <div class=\"vds-dropdown-multiselect__trigger-icons\">\n {this.hasValue() && this.showClearButton && this.renderClearIcon()}\n {this.renderDropdownIcon()}\n </div>\n </button>\n {this.backdrop && this.isOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n <div\n ref={(el): void => {\n if (el) this.dropdownContent = el;\n }}\n class={combineClasses(\n \"vds-dropdown-multiselect__content\",\n this.maxHeight ? \"has-scroll\" : \"\",\n this.options.length === 0 ? \"no-shadow\" : \"\"\n )}\n >\n <div \n class={combineClasses(\n 'vds-dropdown-multiselect__content-options', \n (this.maxHeight ? 'scrollable' : '')\n )}\n style={setDropdownStyles(this.maxHeight)}>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-basic-dropdown.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface VdsBasicDropdown extends Components.VdsBasicDropdown, HTMLElement {}
+export const VdsBasicDropdown: {
+    prototype: VdsBasicDropdown;
+    new (): VdsBasicDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;