wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

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

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, transformTag } 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 { a as getIconColor, c as getIconSize, b as getActionIconButtonSize } 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';
@@ -33,12 +33,14 @@ const arrayIsEqual = (a, b) => {
     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 vdsBasicDropdownMultiselectCss = () => `: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}@font-face{font-family:"Roboto Flex";src:url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");font-weight:100 1000;font-stretch:25% 151%;font-style:normal}: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-white-medium:rgba(255, 255, 255, 0.6392156863);--static-white-low:rgba(255, 255, 255, 0.3215686275);--static-white-lower:rgba(255, 255, 255, 0.1607843137);--static-white-lowest:rgba(255, 255, 255, 0.1215686275);--static-black:#000000;--static-black-medium:rgba(0, 0, 0, 0.6392156863);--static-black-low:rgba(0, 0, 0, 0.3215686275);--static-black-lower:rgba(0, 0, 0, 0.1607843137);--static-black-lowest:rgba(0, 0, 0, 0.1215686275);--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--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);background:var(--color-interaction-black-lowest)}: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___trigger--disabled{pointer-events:none;color:var(--color-text-disabled);box-shadow:0 0 0 0.0625rem inset var(--color-border-disabled);background:var(--surface-medium)}: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__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;gap:var(--spacing-02)}: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() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.opened = createEvent(this, "opened", 7);
         this.closed = createEvent(this, "closed", 7);
@@ -233,30 +235,33 @@ const VdsBasicDropdownMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class Vds
         }
         return this.hasValue() ? getSelectedItemsText(this.dropdownContent, this.value).join(", ") : this.placeholder;
     }
+    getIconColor() {
+        return getIconColor(this.disabled, this.isReadonly);
+    }
     renderInformativeIcon() {
-        return h("vds-icon", { svgIcon: this.informativeIcon, color: getIconColor(this.disabled), size: getIconSize(this.size) });
+        return h("vds-icon", { svgIcon: this.informativeIcon, color: this.getIconColor(), size: getIconSize(this.size) });
     }
     renderClearIcon() {
-        return h("vds-icon-button", { icon: "close", variant: "secondary", size: this.size, onClick: (evt) => {
+        return (h("vds-icon-button", { icon: "close", variant: "secondary", size: getActionIconButtonSize(this.size), onClick: evt => {
                 this.clearIconClick(evt);
-            }, disabled: this.disabled, setAriaLabel: "clear" });
+            }, disabled: this.disabled || this.isReadonly, setAriaLabel: "clear" }));
     }
     renderDropdownIcon() {
-        return h("vds-icon", { svgIcon: this.isOpened ? "chevron-up" : "chevron-down", color: getIconColor(this.disabled), size: getIconSize(this.size) });
+        return h("vds-icon", { svgIcon: this.isOpened ? 'chevron-up' : 'chevron-down', color: this.getIconColor(), 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) => {
+        return (h(Host, { key: '85fcf956865de41a71a6a9cc7838cb50515dfa4a', class: combineClasses(this.disabled ? "vds-basic-dropdown-multiselect--disabled" : ""), title: this.getTextValue() }, h("div", { key: 'e1d9b79ccbafb6891a9ce8ae7a6252287c074964', class: "vds-dropdown-multiselect__container" }, h("button", { key: '0c9d1d45a68d45f8f6448831ed5c72382dc2d6e7', 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) => {
+            } }, this.informativeIcon && this.renderInformativeIcon(), this.renderLabelValue(), h("div", { key: '38315d863f7e52d8287c468683b67278dc111ddc', 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: '60c860938493b6fa6c940ae449a5e672520c85a0', 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' }))))));
+            }, class: combineClasses("vds-dropdown-multiselect__content", this.maxHeight ? "has-scroll" : "", this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: '2285dd57fea471099951445dbc29caee1fbc8cf9', class: combineClasses('vds-dropdown-multiselect__content-options', (this.maxHeight ? 'scrollable' : '')), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: 'fd4eb53d5636a3d4675b5c3e637327a7d0f27275' }))))));
     }
     static get formAssociated() { return true; }
     get hostEl() { return this; }
@@ -264,8 +269,8 @@ const VdsBasicDropdownMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class Vds
         "value": ["setValueHandler"],
         "isOpened": ["toggleDropdown"]
     }; }
-    static get style() { return vdsBasicDropdownMultiselectCss; }
-}, [65, "vds-basic-dropdown-multiselect", {
+    static get style() { return vdsBasicDropdownMultiselectCss(); }
+}, [321, "vds-basic-dropdown-multiselect", {
         "size": [1025],
         "value": [1025],
         "informativeIcon": [1025, "informative-icon"],
@@ -299,17 +304,17 @@ function defineCustomElement$1() {
     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);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), VdsBasicDropdownMultiselect$1);
             }
             break;
         case "vds-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "vds-icon-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

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

@@ -1 +1 @@
-{"file":"vds-basic-dropdown-multiselect.js","mappings":";;;;;;;;AAAA;;;;;;;;;;;;AAYG;AACI,MAAM,YAAY,GAAG,CAAC,CAAQ,EAAE,CAAQ,KAAa;IACxD,IAAI,CAAC,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;AACxB,IAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI;AAAE,QAAA,OAAO,KAAK;AACxC,IAAA,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;AAEvC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE;QACjC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAAE,YAAA,OAAO,KAAK;;AAEjC,IAAA,OAAO,IAAI;AACf,CAAC;;ACtBD,MAAM,8BAA8B,GAAG,imoCAAimoC;;MCe3noCA,6BAA2B,iBAAAC,kBAAA,CAAA,MAAA,2BAAA,SAAA,WAAA,CAAA;AANxC,IAAA,WAAA,GAAA;;;;;;;;;;AAQ2B,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;AAE7C,QAAA,IAAK,CAAA,KAAA,GAAsB,EAAE;;AAY7B,QAAA,IAAK,CAAA,KAAA,GAAY,OAAO;;AAIzC,QAAA,IAAyB,CAAA,yBAAA,GAAW,gBAAgB;;AAEnC,QAAA,IAAe,CAAA,eAAA,GAAY,IAAI;;AAI/B,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AACpD;;AAEG;AACoB,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;;AAE5C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAWxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAQ1B,QAAA,IAAO,CAAA,OAAA,GAAiC,EAAE;AA0RnD;IArRC,gBAAgB,GAAA;;AACd,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;QAChC,mBAAmB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC;AACrD,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACxF,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxF,IAAI,CAAC,sBAAsB,EAAE;;IAG/B,oBAAoB,GAAA;;AAClB,QAAA,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1F,QAAA,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1F,QAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnE,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;IAErB,sBAAsB,GAAA;AAC5B,QAAA,MAAM,MAAM,GAAG;AACb,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE;SACV;AACD,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACxC,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AAC9E,SAAC,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;;;AAK5C,IAAA,eAAe,CAAC,QAA2B,EAAA;QACzC,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;YACf;;AAEF,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;;AAEzE,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC3B,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC3C,MAAM,eAAe,GAAG,eAAe,CAAC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;YAC3E,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,KAAiB,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,eAAe;;AAEnG,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;AACnD,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAE,IAAI,CAAC,KAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;QAGjE,wBAAwB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC;QAC1D,mBAAmB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC;AAErD,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACzC,YAAA,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC;;;IAI1C,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AAC5E,QAAA,yBAAyB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC;AAC5F,QAAA,oBAAoB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC;;AAInF,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,sBAAsB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;AAClD,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAClB,IAAI,CAAC,eAAe,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;aAChI;AACL,YAAA,sBAAsB,CAAC,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;AACnD,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAClB,IAAI,CAAC,eAAe,EAAE;;;;AAMnB,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;;;AAKf,IAAA,MAAM,KAAK,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;AAGvB;;;;AAIG;AAEI,IAAA,MAAM,KAAK,GAAA;AAChB,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,QAAA,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC;AACtC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGzB;;;;;AAKG;AAEI,IAAA,MAAM,SAAS,GAAA;QACpB,OAAO,IAAI,CAAC,eAAe;;AAE7B;;;;;AAKG;AAEI,IAAA,MAAM,QAAQ,GAAA;QACnB,OAAO,IAAI,CAAC,KAAiB;;AAG/B;;;;;AAKG;IAEI,MAAM,QAAQ,CAAC,KAAwB,EAAA;AAC5C,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;;;AAKrB,IAAA,cAAc,CAAC,GAAe,EAAA;QACpC,GAAG,CAAC,eAAe,EAAE;AACrB,QAAA,MAAM,MAAM,GAAG,GAAG,CAAC,MAAqB;QACxC,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAc,CAAC;QAC1D,MAAM,2BAA2B,GAAG,MAAM,CAAC,QAAQ,KAAK,0BAA0B,IAAI,MAAM,CAAC,UAAU,IAAK,GAAG,CAAC,MAAsB,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;AACvK,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,2BAA2B,EAAE;YAClD,IAAI,CAAC,KAAK,EAAE;;;AAIhB;;;;AAIG;AAEH,IAAA,uBAAuB,CAAC,KAA4C,EAAA;AAClE,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAoC;AACvD,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;AAClC,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC;;aAC/B;AACJ,YAAA,IAAI,CAAC,KAAK,GAAI,IAAI,CAAC,KAAkB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC;;QAGhE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,QAAA,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC;;;AAI3B,IAAA,WAAW,CAAC,GAAU,EAAA;QAC5B,GAAG,CAAC,wBAAwB,EAAE;AAC9B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;AAChE,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;;;;AAK1B,IAAA,qBAAqB,CAAC,KAAoB,EAAA;QAChD,KAAK,CAAC,wBAAwB,EAAE;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACjD,IAAI,CAAC,KAAK,EAAE;;;AAIR,IAAA,cAAc,CAAC,GAAU,EAAA;QAC/B,GAAG,CAAC,wBAAwB,EAAE;QAC9B,IAAI,CAAC,KAAK,EAAE;QACZ,IAAI,CAAC,KAAK,EAAE;;IAGN,gBAAgB,GAAA;AACtB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE;AACzC,QAAA,OAAO,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,cAAc,CAChC,iCAAiC,EACjC,CAAA,iCAAA,EAAoC,IAAI,CAAC,QAAQ,EAAE,GAAG,OAAO,GAAG,aAAa,CAAA,CAAE,CAAC,EAAA,EAChF,aAAa,CAAQ;;IAGjB,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,qBAAqB,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE;YACpF,OAAO,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA,CAAA,EAAI,IAAI,CAAC,yBAAyB,CAAA,CAAE;;AAGjE,QAAA,OAAO,IAAI,CAAC,QAAQ,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,KAAiB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW;;IAGnH,qBAAqB,GAAA;AAC3B,QAAA,OAAO,CAAA,CAAA,UAAA,EAAA,EAAU,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,CAAa;;IAGvH,eAAe,GAAA;QACrB,OAAO,CAAA,CAAA,iBAAA,EAAA,EACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,GAAG,KAAI;AACf,gBAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;AAC1B,aAAC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAC,OAAO,EAAA,CACH;;IAGb,kBAAkB,GAAA;AACxB,QAAA,OAAO,CACL,CAAA,UAAA,EAAA,EAAA,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,cAAc,EACtD,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAClC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAClB;;IAGN,QAAQ,GAAA;QACd,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;;IAGzE,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,GAAG,0CAA0C,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EACtH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qCAAqC,EAAA,EAC/C,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,KAAU;AAChB,gBAAA,IAAI,EAAE;AAAE,oBAAA,IAAI,CAAC,eAAe,GAAG,EAAE;aAClC,EACD,KAAK,EAAE,cAAc,CACnB,oCAAoC,EACpC,CAAA,yCAAA,EAA4C,IAAI,CAAC,IAAI,CAAA,CAAE,EACvD,IAAI,CAAC,QAAQ,GAAG,8CAA8C,GAAG,EAAE,EACnE,IAAI,CAAC,UAAU,GAAG,8CAA8C,GAAG,EAAE,EACrE,IAAI,CAAC,KAAK,GAAG,2CAA2C,GAAG,EAAE,CAC9D,EACD,OAAO,EAAE,CAAC,GAAe,KAAI;AAC3B,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;aACtB,EAAA,EAEA,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,qBAAqB,EAAE,EACpD,IAAI,CAAC,gBAAgB,EAAE,EACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yCAAyC,EAAA,EACjD,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE,EACjE,IAAI,CAAC,kBAAkB,EAAE,CACtB,CACC,EACR,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAQ,CAAA,GAAG,EAAE,EAChH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAU;AAChB,gBAAA,IAAI,EAAE;AAAE,oBAAA,IAAI,CAAC,eAAe,GAAG,EAAE;aAClC,EACD,KAAK,EAAE,cAAc,CACnB,mCAAmC,EACnC,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,EAAE,EAClC,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,GAAG,WAAW,GAAG,EAAE,CAC7C,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACA,KAAK,EAAE,cAAc,CACnB,2CAA2C,GAC1C,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,EAAE,EACpC,EACD,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}
+{"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,\n    &: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--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    &.vds-dropdown-multiselect___trigger--readonly {\n      pointer-events: none;\n      box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);\n      background: var(--color-interaction-black-lowest);\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___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      background: var(--surface-medium);\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    .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      gap: var(--spacing-02);\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}\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, getActionIconButtonSize } 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 getIconColor() {\n    return getIconColor(this.disabled, this.isReadonly);\n  }\n  \n  private renderInformativeIcon(): HTMLStencilElement {\n    return <vds-icon svgIcon={this.informativeIcon} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>\n  }\n\n  private renderClearIcon(): HTMLStencilElement {\n    return (\n      <vds-icon-button\n        icon=\"close\"\n        variant=\"secondary\"\n        size={getActionIconButtonSize(this.size)}\n        onClick={evt => {\n          this.clearIconClick(evt);\n        }}\n        disabled={this.disabled || this.isReadonly}\n        setAriaLabel=\"clear\"\n      ></vds-icon-button>\n    );\n  }\n\n  private renderDropdownIcon(): HTMLStencilElement {\n    return <vds-icon svgIcon={this.isOpened ? 'chevron-up' : 'chevron-down'} color={this.getIconColor()} size={getIconSize(this.size)}></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}