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

wabtec-internal-volt-basic-components 1.0.0

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

Files changed (1131) hide show

package/dist/components/vds-menu.js ADDED Viewed

@@ -0,0 +1,191 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { u as updateFloatingBoxPosition } from './floating-engine-utils.js';
+import { c as combineClasses } from './combine-classes.js';
+import { q as queryElementFromShadowRoot } from './node-utils.js';
+const vdsMenuCss = "@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:flex;width:fit-content;height:fit-content}:host .vds__menu--container{display:none;position:absolute;max-width:var(--menu-max-width, unset) !important;height:fit-content;max-height:var(--menu-max-height, unset) !important;flex-direction:column;align-self:stretch;background-color:var(--surface-medium);border-radius:var(--radius-medium);border:0px solid var(--color-border-low);z-index:var(--elevation-layer-2);box-shadow:var(--elevation-shadow-2);box-sizing:border-box;border:0.0625rem solid var(--color-border-lowest)}:host .vds__menu--container.has-scroll{padding-right:var(--spacing-01)}:host .vds__menu--submenu-right,:host .vds__menu--submenu-left,:host .vds__menu--submenu-top,:host .vds__menu--submenu-bottom{top:auto !important;white-space:nowrap}:host .vds__menu--submenu-right{left:100% !important}:host .vds__menu--submenu-left{left:auto !important;transform:translateX(-100%)}:host .vds__menu--submenu-top,:host .vds__menu--submenu-bottom{left:auto !important}";
+const VdsMenu$1 = /*@__PURE__*/ proxyCustomElement(class VdsMenu extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        /** Defines the position where the menu will be opened */
+        this.position = "bottom";
+        /** The type of event that will trigger the popover */
+        this.event = "click";
+        /** Toggles the floating container auto-positioning based on available window space.
+         * False by default as it may cause positioning issues in some situations, use with caution
+         * */
+        this.autoPosition = false;
+        /** Set backdrop when show the menu */
+        this.backdrop = false;
+        this.menuOpened = false;
+        this.isSubmenu = false;
+    }
+    async emitValue() {
+        if (this.menuOpened) {
+            this.opened.emit();
+            this.menuElementRef.style.display = "inline-flex";
+            this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);
+        }
+        else {
+            this.closeNestedMenus();
+            this.closed.emit();
+            this.menuElementRef.style.display = "none";
+            this.floatingCleanUp();
+        }
+    }
+    /* Close the menu when click outside */
+    handleClickOut(evt) {
+        const isClickInside = this.hostEl.contains(evt.target);
+        if (!isClickInside && !this.backdrop) {
+            this.menuOpened = false;
+        }
+    }
+    handleHoverOut(event) {
+        if (this.event === "hover") {
+            const hoveredElement = event.target;
+            if (hoveredElement) {
+                this.close();
+            }
+        }
+    }
+    /* Close all nested menus recursively */
+    closeNestedMenus() {
+        const menuContent = this.menuElementRef.querySelector('slot[name="menu-content"]');
+        if (menuContent) {
+            const elements = Array.from(menuContent.children);
+            for (const element of elements) {
+                const nestedMenu = element.querySelector('vds-menu');
+                if (nestedMenu) {
+                    nestedMenu.close();
+                }
+            }
+        }
+    }
+    /* Open the menu with click on the trigger element  */
+    async handleClick(evt) {
+        if (this.event === "click") {
+            const clickedElement = evt.target;
+            if (clickedElement && !this.menuOpened) {
+                this.menuOpened = true;
+            }
+        }
+    }
+    /* Listen when Menu Item element is clicked to close Menu window */
+    handleMenuItemClicked() {
+        this.close();
+    }
+    /* Open the menu from other element  */
+    async open() {
+        this.menuOpened = true;
+    }
+    /* Close the menu from other element  */
+    async close() {
+        this.closeNestedMenus();
+        this.menuOpened = false;
+    }
+    /**
+     *  Gets the target that will manage the menu
+     *  returns a promise with the target HTMLElement.
+     */
+    async getTarget() {
+        return document.querySelector(".vds__menu--trigger");
+    }
+    handleHover(event) {
+        if (this.event === "hover") {
+            const hoveredElement = event.target;
+            if (hoveredElement) {
+                this.menuOpened = true;
+            }
+        }
+    }
+    setMaxWidthAndHeight() {
+        return { "--menu-max-width": this.maxWidth, "--menu-max-height": this.maxHeight };
+    }
+    componentWillLoad() {
+        const triggerItem = Array.from(this.hostEl.children).find((child) => child.matches('vds-menu-item[slot="menu-trigger"]'));
+        if (triggerItem) {
+            this.isSubmenu = true;
+            this.backdrop = false;
+            this.autoPosition = false;
+        }
+    }
+    componentDidLoad() {
+        this.actionElementRef = queryElementFromShadowRoot(this.hostEl, ".vds__menu--trigger");
+        this.menuElementRef = queryElementFromShadowRoot(this.hostEl, ".vds__menu--container");
+        if (this.event === "click") {
+            this.actionElementRef.addEventListener("click", this.handleClick.bind(this));
+        }
+        else if (this.event === "hover") {
+            this.actionElementRef.addEventListener("mouseenter", this.handleHover.bind(this));
+            this.menuElementRef.addEventListener("mouseleave", this.handleHoverOut.bind(this));
+        }
+    }
+    componentDidRender() {
+        updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("click", this.handleClickOut.bind(this));
+        if (this.event === "click") {
+            this.actionElementRef.removeEventListener("click", this.handleClick.bind(this));
+        }
+        else if (this.event === "hover") {
+            this.actionElementRef.removeEventListener("mouseenter", this.handleHover.bind(this));
+            this.menuElementRef.removeEventListener("mouseleave", this.handleHoverOut.bind(this));
+        }
+    }
+    render() {
+        return (h(Host, { key: 'ed0e9ffe864186b2e99dda4e6c68a674af3ca5a7', style: this.setMaxWidthAndHeight() }, this.backdrop && this.menuOpened ? h("div", { class: "vds__menu--backdrop", onClick: () => this.close() }) : null, h("div", { key: 'c922235e1586d9cf41ec3e62b9ef86d15c06e739', class: "vds__menu--trigger", onClick: (evt) => {
+                this.handleClick(evt);
+            }, ref: (triggerEl) => {
+                if (triggerEl)
+                    this.actionElementRef = triggerEl;
+            } }, h("slot", { key: '177d2bef3e6266bf12156ffc5fe824f3892c2098', name: "menu-trigger" })), h("div", { key: '2559753887f2fba3b5b3bfcfb439019a7b0e1ff1', class: combineClasses("vds__menu--container", this.maxHeight ? "has-scroll" : "", this.isSubmenu ? `vds__menu--submenu-${this.position}` : ""), ref: (menuEl) => {
+                if (menuEl)
+                    this.menuElementRef = menuEl;
+            } }, h("slot", { key: 'bbcbed245686b7806bca7dd5358fd4bd2be3c6de', name: "menu-content" }))));
+    }
+    get hostEl() { return this; }
+    static get watchers() { return {
+        "menuOpened": ["emitValue"]
+    }; }
+    static get style() { return vdsMenuCss; }
+}, [1, "vds-menu", {
+        "position": [1025],
+        "maxWidth": [1025, "max-width"],
+        "maxHeight": [1025, "max-height"],
+        "event": [1025],
+        "autoPosition": [1028, "auto-position"],
+        "backdrop": [1028],
+        "menuOpened": [32],
+        "open": [64],
+        "close": [64],
+        "getTarget": [64]
+    }, [[8, "click", "handleClickOut"], [0, "clicked", "handleMenuItemClicked"]], {
+        "menuOpened": ["emitValue"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["vds-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "vds-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VdsMenu$1);
+            }
+            break;
+    } });
+}
+const VdsMenu = VdsMenu$1;
+const defineCustomElement = defineCustomElement$1;
+export { VdsMenu, defineCustomElement };
+//# sourceMappingURL=vds-menu.js.map
+//# sourceMappingURL=vds-menu.js.map

package/dist/components/vds-menu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"vds-menu.js","mappings":"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","names":["VdsMenu","__stencil_proxyCustomElement"],"sources":["src/components/menu/vds-menu.scss?tag=vds-menu&encapsulation=shadow","src/components/menu/vds-menu.tsx"],"sourcesContent":[":host {\n display: flex;\n width: fit-content;\n height: fit-content;\n\n .vds__menu--container {\n display: none;\n position: absolute;\n max-width: var(--menu-max-width, unset) !important;\n height: fit-content;\n max-height: var(--menu-max-height, unset) !important;\n flex-direction: column;\n align-self: stretch;\n background-color: var(--surface-medium);\n border-radius: var(--radius-medium);\n border: 0px solid var(--color-border-low);\n z-index: var(--elevation-layer-2);\n box-shadow: var(--elevation-shadow-2);\n box-sizing: border-box;\n border: 0.0625rem solid var(--color-border-lowest);\n &.has-scroll {\n padding-right: var(--spacing-01);\n }\n }\n .vds__menu--submenu {\n &-right,\n &-left,\n &-top,\n &-bottom {\n top: auto !important;\n white-space: nowrap;\n }\n &-right {\n left: 100% !important;\n }\n &-left {\n left: auto !important;\n transform: translateX(-100%);\n }\n &-top,\n &-bottom {\n left: auto !important;\n }\n }\n}\n","import { Component, Host, Listen, Prop, State, h, Element, EventEmitter, Event, Method } from \"@stencil/core\";\nimport { HTMLStencilElement, Watch } from \"@stencil/core/internal\";\nimport { updateFloatingBoxPosition } from \"../../utils/floating-engine-utils\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { queryElementFromShadowRoot } from \"../../utils/node-utils\";\n\n@Component({\n tag: \"vds-menu\",\n styleUrl: \"vds-menu.scss\",\n shadow: true,\n})\nexport class VdsMenu {\n\n @Element() hostEl: HTMLElement;\n /** Defines the position where the menu will be opened */\n @Prop({ mutable: true }) position: \"top\" | \"bottom\" | \"right\" | \"left\" = \"bottom\";\n /** Sets the maximum width of the menu\"s content */\n @Prop({ mutable: true }) maxWidth: string;\n /** Sets the maximum height of the menu\"s content */\n @Prop({ mutable: true }) maxHeight: string;\n /** The type of event that will trigger the popover */\n @Prop({ mutable: true }) event: \"hover\" | \"click\" = \"click\";\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 /** Set backdrop when show the menu */\n @Prop({ mutable: true }) backdrop: boolean = false;\n\n @State() menuOpened: boolean = false;\n /** Emits event when menu gets opens */\n @Event() opened: EventEmitter<void>;\n /** Emits event when menu gets closes */\n @Event() closed: EventEmitter<void>;\n\n private actionElementRef: HTMLElement;\n private menuElementRef: HTMLElement;\n private floatingCleanUp: () => void;\n\n private isSubmenu: boolean = false;\n\n @Watch(\"menuOpened\")\n async emitValue(): Promise<void> {\n if (this.menuOpened) {\n this.opened.emit();\n this.menuElementRef.style.display = \"inline-flex\";\n this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\n } else {\n this.closeNestedMenus();\n this.closed.emit();\n this.menuElementRef.style.display = \"none\";\n this.floatingCleanUp();\n }\n }\n\n /* Close the menu when click outside */\n @Listen(\"click\", { target: \"window\" })\n handleClickOut(evt: MouseEvent): void {\n const isClickInside = this.hostEl.contains(evt.target as Node);\n if (!isClickInside && !this.backdrop) {\n this.menuOpened = false;\n }\n }\n \n handleHoverOut(event: Event): void {\n if (this.event === \"hover\") {\n const hoveredElement = event.target as HTMLElement;\n if (hoveredElement) {\n this.close();\n }\n }\n }\n \n /* Close all nested menus recursively */\n private closeNestedMenus(): void {\n const menuContent = this.menuElementRef.querySelector('slot[name=\"menu-content\"]') as HTMLSlotElement;\n if (menuContent) {\n const elements = Array.from(menuContent.children);\n for (const element of elements) {\n const nestedMenu = element.querySelector('vds-menu');\n if (nestedMenu) {\n nestedMenu.close();\n }\n }\n }\n }\n \n /* Open the menu with click on the trigger element */\n async handleClick(evt: Event): Promise<void> {\n if (this.event === \"click\") {\n const clickedElement = evt.target as HTMLElement;\n if (clickedElement && !this.menuOpened) {\n this.menuOpened = true;\n }\n }\n }\n\n /* Listen when Menu Item element is clicked to close Menu window */\n @Listen(\"clicked\")\n handleMenuItemClicked(): void {\n this.close();\n }\n\n /* Open the menu from other element */\n @Method()\n public async open(): Promise<void> {\n this.menuOpened = true;\n }\n\n /* Close the menu from other element */\n @Method()\n public async close(): Promise<void> {\n this.closeNestedMenus();\n this.menuOpened = false;\n }\n /**\n * Gets the target that will manage the menu\n * returns a promise with the target HTMLElement.\n */\n @Method()\n public async getTarget(): Promise<HTMLElement | null> {\n return document.querySelector(\".vds__menu--trigger\") as HTMLElement;\n }\n\n private handleHover(event: Event): void {\n if (this.event === \"hover\") {\n const hoveredElement = event.target as HTMLElement;\n if (hoveredElement) {\n this.menuOpened = true;\n }\n }\n }\n\n private setMaxWidthAndHeight() {\n return { \"--menu-max-width\": this.maxWidth, \"--menu-max-height\": this.maxHeight }\n }\n\n componentWillLoad() {\n const triggerItem = Array.from(this.hostEl.children).find(\n (child) => child.matches('vds-menu-item[slot=\"menu-trigger\"]')\n );\n if (triggerItem) {\n this.isSubmenu = true;\n this.backdrop = false;\n this.autoPosition = false;\n }\n }\n\n componentDidLoad() {\n this.actionElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--trigger\");\n this.menuElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--container\");\n if (this.event === \"click\") {\n this.actionElementRef.addEventListener(\"click\", this.handleClick.bind(this));\n } else if (this.event === \"hover\") {\n this.actionElementRef.addEventListener(\"mouseenter\", this.handleHover.bind(this));\n this.menuElementRef.addEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n }\n }\n\n componentDidRender() {\n updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\n }\n\n disconnectedCallback() {\n window.removeEventListener(\"click\", this.handleClickOut.bind(this));\n if (this.event === \"click\") {\n this.actionElementRef.removeEventListener(\"click\", this.handleClick.bind(this));\n } else if (this.event === \"hover\") {\n this.actionElementRef.removeEventListener(\"mouseenter\", this.handleHover.bind(this));\n this.menuElementRef.removeEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n }\n }\n\n render(): HTMLStencilElement {\n return (\n <Host style={this.setMaxWidthAndHeight()}>\n {this.backdrop && this.menuOpened ? <div class=\"vds__menu--backdrop\" onClick={() => this.close()}></div> : null}\n <div class=\"vds__menu--trigger\"\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n ref={(triggerEl) => { if (triggerEl) this.actionElementRef = triggerEl; }}\n >\n <slot name=\"menu-trigger\"></slot>\n </div>\n <div\n class={combineClasses(\n \"vds__menu--container\",\n this.maxHeight ? \"has-scroll\" : \"\",\n this.isSubmenu ? `vds__menu--submenu-${this.position}` : \"\"\n )}\n ref={(menuEl) => { if (menuEl) this.menuElementRef = menuEl; }}\n >\n <slot name=\"menu-content\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-notification.d.ts ADDED Viewed

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

package/dist/components/vds-notification.js ADDED Viewed

@@ -0,0 +1,136 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as combineClasses } from './combine-classes.js';
+import { d as defineCustomElement$3 } from './vds-icon2.js';
+import { d as defineCustomElement$2 } from './vds-icon-button2.js';
+const vdsNotificationCss = "@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__notification--container{display:flex;justify-content:space-between;gap:var(--spacing-03);padding:var(--spacing-04) var(--spacing-05) var(--spacing-04) var(--spacing-03);border-radius:var(--radius-medium);min-width:fit-content}:host .vds__notification--container-body{display:flex;gap:var(--spacing-03)}:host .vds__notification--information{display:flex;align-items:center;align-content:center;flex:1 1 auto;flex-wrap:wrap}:host .vds__notification--information.vds-notification__information--toast{flex-direction:column;align-items:start}:host .vds__notification--information.vds-notification__information--toast .vds__notification--message,:host .vds__notification--information.vds-notification__information--toast .vds__notification--title{width:100%}:host .vds__notification--information .vds__notification--title{font-family:\"Roboto Flex\", sans-serif;font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal;padding-right:var(--spacing-02);align-self:flex-start}:host .vds__notification--information .vds__notification--title ::slotted(h1),:host .vds__notification--information .vds__notification--title ::slotted(h2),:host .vds__notification--information .vds__notification--title ::slotted(h3),:host .vds__notification--information .vds__notification--title ::slotted(h4),:host .vds__notification--information .vds__notification--title ::slotted(h5),:host .vds__notification--information .vds__notification--title ::slotted(h6){margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}:host .vds__notification--information .vds__notification--message{flex:1 1 auto;overflow-wrap:break-word;font-family:\"Roboto Flex\", sans-serif;font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal;color:var(--color-text-medium);box-sizing:border-box;min-height:var(--spacing-06)}:host .vds__notification--icon{align-self:flex-start}:host .vds__notification--content{display:flex;flex-direction:column}:host .vds__notification--content ::slotted([slot=actions]){padding-top:var(--spacing-07)}:host .vds__notification--actions{color:var(--color-text-medium);padding:var(--spacing-00) var(--spacing-03) var(--spacing-00) var(--spacing-05);align-self:flex-start;font-family:\"Roboto Flex\", sans-serif;font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:host .vds__notification--actions.vds-notification__actions--toast{padding:var(--spacing-00)}:host .vds__notification--close-btn{color:var(--color-text-medium);padding:0;align-self:flex-start;display:flex}:host .vds__notification--status-informative{background-color:var(--color-background-information-lowest-default);box-shadow:inset 0 0 0 0.0625rem var(--color-border-information)}:host .vds__notification--status-informative .vds__notification--title{color:var(--color-text-information-high)}:host .vds__notification--status-warning{background-color:var(--color-background-warning-lowest-default);box-shadow:inset 0 0 0 0.0625rem var(--color-border-warning)}:host .vds__notification--status-warning .vds__notification--title{color:var(--color-text-warning-high)}:host .vds__notification--status-danger{background-color:var(--color-background-danger-lowest-default);box-shadow:inset 0 0 0 0.0625rem var(--color-border-danger)}:host .vds__notification--status-danger .vds__notification--title{color:var(--color-text-danger-high)}:host .vds__notification--status-healthy{background-color:var(--color-background-healthy-lowest-default);box-shadow:inset 0 0 0 0.0625rem var(--color-border-healthy)}:host .vds__notification--status-healthy .vds__notification--title{color:var(--color-text-healthy-high)}:host .vds__notification--status-custom{background-color:var(--notification-background);box-shadow:inset 0 0 0 0.0625rem var(--notification-border)}:host .vds-notification__close-area{display:flex}";
+const VdsNotification$1 = /*@__PURE__*/ proxyCustomElement(class VdsNotification extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closed = createEvent(this, "closed", 7);
+        /** Define variant of the notification */
+        this.variant = "inline";
+        /** Define status type of the notification */
+        this.status = "informative";
+        /** Show / Hide the notification close button */
+        this.showCloseButton = true;
+        /** When set to true, the element will be removed from DOM when pressing the close button. */
+        this.removeOnClose = true;
+        this.currentIcon = undefined;
+        this.currentColor = undefined;
+    }
+    setCustomBackground(customization) {
+        return (customization === null || customization === void 0 ? void 0 : customization.background) ? { '--notification-background': `var(--${customization.background})` } : {};
+    }
+    setCustomBorder(customization) {
+        return (customization === null || customization === void 0 ? void 0 : customization.border) ? { '--notification-border': `var(--${customization.border})` } : {};
+    }
+    setCustomIcon(customization) {
+        return (customization === null || customization === void 0 ? void 0 : customization.icon) ? { '--notification-icon-color': `var(--${customization.icon})` } : {};
+    }
+    setCustomColors() {
+        const customization = this.colors;
+        if (!customization) {
+            return null;
+        }
+        return Object.assign(Object.assign(Object.assign({}, this.setCustomBackground(customization)), this.setCustomBorder(customization)), this.setCustomIcon(customization));
+    }
+    setIcon() {
+        var _a;
+        switch (this.status) {
+            case 'informative':
+                this.currentIcon = 'information';
+                this.currentColor = "color-icon-information";
+                break;
+            case 'danger':
+                this.currentIcon = 'information';
+                this.currentColor = 'color-icon-danger';
+                break;
+            case 'warning':
+                this.currentIcon = 'caution';
+                this.currentColor = 'color-icon-warning';
+                break;
+            case 'healthy':
+                this.currentIcon = 'healthy';
+                this.currentColor = 'color-icon-healthy';
+                break;
+            case 'custom':
+                this.currentIcon = this.icon;
+                this.currentColor = ((_a = this.colors) === null || _a === void 0 ? void 0 : _a.icon) ? this.colors.icon : null;
+                break;
+            default:
+                this.currentIcon = 'unknown';
+                this.currentColor = 'color-icon-information';
+                break;
+        }
+    }
+    handleClose() {
+        this.closed.emit();
+        if (this.removeOnClose) {
+            this.hostEl.remove();
+        }
+    }
+    /* Close the Notification from other element  */
+    async close() {
+        this.handleClose();
+    }
+    showCloseBtn() {
+        return (this.showCloseButton ?
+            (h("div", { class: "vds__notification--close-btn" }, h("vds-icon-button", { size: "medium", variant: "secondary", icon: 'close', setAriaLabel: 'close', onClick: () => this.handleClose() })))
+            : null);
+    }
+    renderActions() {
+        return (h("div", { class: `vds__notification--actions ${this.variant === "toast" ? "vds-notification__actions--toast" : ""}` }, h("slot", { name: "actions" })));
+    }
+    render() {
+        const custom = this.colors ? this.setCustomColors() : null;
+        this.setIcon();
+        return (h(Host, { key: '34a9cc0d1aa39e81409fd7b002d358548e11365b', style: custom }, h("div", { key: '6804c9a9938e8ddc654b192b9a6c69db1f246157', class: combineClasses('vds__notification--container', 'vds__notification--status-' + this.status) }, h("div", { key: '1cdb8e02d564d8fa67fcbc7dabede906cf259cbf', class: "vds__notification--container-body" }, h("div", { key: '789fa386981325f569b6f2a47aa9522d0174b11f', class: "vds__notification--icon" }, h("vds-icon", { key: 'c0183258cded2a0cc2641bbf84785ce17771433d', size: "1.5rem", svgIcon: this.currentIcon, color: this.currentColor })), h("div", { key: '621a8a173b820030162db668b9279977b39e6885', class: "vds__notification--content" }, h("div", { key: '61d004a8104ce79ef0ab5d207f8deba68b3f1182', class: `vds__notification--information ${this.variant === "toast" ? "vds-notification__information--toast" : ""}` }, h("div", { key: 'bf48b7e1c1230a2f0f50de8cf2c0706bfe5a1343', class: "vds__notification--title" }, h("slot", { key: 'e6be9e59f243758191ac60280e388d915d196706', name: "header" })), h("div", { key: '66543b96d6ad825c841738157f0a7a97999f4cb4', class: "vds__notification--message" }, h("slot", { key: '3c8be0959ecef894664edf0e054db783e054a5d8', name: "body" }))), this.variant === "toast" && this.renderActions())), h("div", { key: '279a75abe9ad12f6c6cde6dfb7754e0ee35bc27e', class: "vds-notification__close-area" }, this.variant === "inline" && this.renderActions(), this.showCloseBtn()))));
+    }
+    get hostEl() { return this; }
+    static get style() { return vdsNotificationCss; }
+}, [1, "vds-notification", {
+        "variant": [1025],
+        "status": [1025],
+        "colors": [1040],
+        "icon": [1025],
+        "showCloseButton": [1028, "show-close-button"],
+        "removeOnClose": [1028, "remove-on-close"],
+        "currentIcon": [32],
+        "currentColor": [32],
+        "close": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["vds-notification", "vds-icon", "vds-icon-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "vds-notification":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VdsNotification$1);
+            }
+            break;
+        case "vds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "vds-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const VdsNotification = VdsNotification$1;
+const defineCustomElement = defineCustomElement$1;
+export { VdsNotification, defineCustomElement };
+//# sourceMappingURL=vds-notification.js.map
+//# sourceMappingURL=vds-notification.js.map

package/dist/components/vds-notification.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"vds-notification.js","mappings":"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","names":["VdsNotification","__stencil_proxyCustomElement"],"sources":["src/components/notification/vds-notification.scss?tag=vds-notification&encapsulation=shadow","src/components/notification/vds-notification.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n .vds__notification--container {\n display: flex;\n justify-content: space-between;\n gap: var(--spacing-03);\n padding: var(--spacing-04) var(--spacing-05) var(--spacing-04) var(--spacing-03);\n border-radius: var(--radius-medium);\n min-width: fit-content;\n }\n .vds__notification--container-body {\n display: flex;\n gap: var(--spacing-03);\n }\n .vds__notification--information{\n display: flex;\n align-items: center;\n align-content: center;\n flex: 1 1 auto;\n flex-wrap: wrap;\n\n &.vds-notification__information--toast {\n flex-direction: column;\n align-items: start;\n .vds__notification--message,\n .vds__notification--title {\n width: 100%;\n }\n }\n .vds__notification--title{ \n @include font-style(title, medium);\n padding-right: var(--spacing-02);\n align-self: flex-start;\n ::slotted(h1),\n ::slotted(h2),\n ::slotted(h3),\n ::slotted(h4),\n ::slotted(h5),\n ::slotted(h6) {\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n }\n .vds__notification--message{\n flex: 1 1 auto;\n overflow-wrap: break-word;\n @include font-style(body, medium);\n color: var(--color-text-medium);\n box-sizing: border-box;\n min-height: var(--spacing-06);\n }\n }\n .vds__notification--icon{\n align-self: flex-start;\n }\n .vds__notification--content{\n display: flex;\n flex-direction: column;\n\n ::slotted([slot=\"actions\"]) {\n padding-top: var(--spacing-07);\n }\n }\n .vds__notification--actions{\n color: var(--color-text-medium);\n padding: var(--spacing-00) var(--spacing-03) var(--spacing-00) var(--spacing-05);\n align-self: flex-start;\n @include font-style(body, medium);\n\n &.vds-notification__actions--toast {\n padding: var(--spacing-00);\n }\n }\n .vds__notification--close-btn{\n color: var(--color-text-medium);\n padding: 0;\n align-self: flex-start;\n display: flex;\n }\n .vds__notification--status-informative{\n background-color: var(--color-background-information-lowest-default);\n box-shadow: inset 0 0 0 0.0625rem var(--color-border-information);\n .vds__notification--title{\n color: var(--color-text-information-high);\n }\n }\n .vds__notification--status-warning{\n background-color: var(--color-background-warning-lowest-default);\n box-shadow: inset 0 0 0 0.0625rem var(--color-border-warning);\n .vds__notification--title{\n color: var(--color-text-warning-high);\n }\n }\n .vds__notification--status-danger{\n background-color: var(--color-background-danger-lowest-default);\n box-shadow: inset 0 0 0 0.0625rem var(--color-border-danger);\n\n .vds__notification--title{\n color: var(--color-text-danger-high);\n }\n }\n .vds__notification--status-healthy{\n background-color: var(--color-background-healthy-lowest-default);\n box-shadow: inset 0 0 0 0.0625rem var(--color-border-healthy);\n .vds__notification--title{\n color: var(--color-text-healthy-high);\n }\n }\n .vds__notification--status-custom{\n background-color: var(--notification-background);\n box-shadow: inset 0 0 0 0.0625rem var(--notification-border);\n }\n .vds-notification__close-area {\n display: flex;\n }\n}","import { Component, Host, h, Prop, State,Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { NotificationsCustomColors, NotificationStatus } from './vds-notification-utils';\n\n@Component({\n tag: 'vds-notification',\n styleUrl: 'vds-notification.scss',\n shadow: true,\n})\nexport class VdsNotification {\n/** Define variant of the notification */\n@Prop({mutable: true}) variant: \"toast\" | \"inline\" = \"inline\";\n/** Define status type of the notification */\n@Prop({mutable: true}) status: NotificationStatus = \"informative\";\n/** Define custom status color of notification */\n@Prop({mutable: true}) colors?: NotificationsCustomColors;\n/** Define custom Icon for the notification */ \n@Prop({mutable: true}) icon?: string;\n/** Show / Hide the notification close button */\n@Prop({mutable: true}) showCloseButton: boolean = true;\n/** When set to true, the element will be removed from DOM when pressing the close button. */\n@Prop({mutable: true}) removeOnClose: boolean = true;\n\n@State() currentIcon: string = undefined;\n@State() currentColor: Colors = undefined;\n\n@Element() hostEl: HTMLElement;\n\n/** Emits event when popover gets closed */\n@Event() closed: EventEmitter<void>;\n\n\nprivate setCustomBackground(customization): { [key: string]: string } {\n return customization?.background ? { '--notification-background': `var(--${customization.background})` } : {};\n}\n\nprivate setCustomBorder(customization): { [key: string]: string } {\n return customization?.border ? { '--notification-border': `var(--${customization.border})` } : {};\n}\nprivate setCustomIcon(customization): { [key: string]: string } {\n return customization?.icon ? { '--notification-icon-color': `var(--${customization.icon})` } : {};\n}\nprivate setCustomColors(): { [key: string]: string } {\n const customization = this.colors;\n if (!customization) {\n return null;\n }\n return {\n ...this.setCustomBackground(customization),\n ...this.setCustomBorder(customization),\n ...this.setCustomIcon(customization)\n };\n}\n\nprivate setIcon(){\n switch (this.status) {\n case 'informative':\n this.currentIcon = 'information';\n this.currentColor = \"color-icon-information\";\n break;\n case 'danger':\n this.currentIcon = 'information';\n this.currentColor= 'color-icon-danger';\n break;\n case 'warning':\n this.currentIcon = 'caution';\n this.currentColor= 'color-icon-warning';\n break;\n case 'healthy':\n this.currentIcon = 'healthy';\n this.currentColor= 'color-icon-healthy';\n break;\n case 'custom':\n this.currentIcon = this.icon;\n this.currentColor= this.colors?.icon? this.colors.icon : null;\n break;\n default:\n this.currentIcon = 'unknown';\n this.currentColor= 'color-icon-information';\n break;\n }\n}\n\nprivate handleClose(){\n this.closed.emit();\n if (this.removeOnClose) {\n this.hostEl.remove();\n }\n}\n/* Close the Notification from other element */ \n@Method()\npublic async close(): Promise<void> {\n this.handleClose();\n}\n\nprivate showCloseBtn(){\n return (this.showCloseButton ?\n (<div class=\"vds__notification--close-btn\">\n <vds-icon-button \n size=\"medium\" \n variant=\"secondary\" \n icon='close'\n setAriaLabel='close'\n onClick={() => this.handleClose()}\n > \n </vds-icon-button>\n </div>)\n :null);\n}\n private renderActions(): HTMLStencilElement {\n return (\n <div\n class={`vds__notification--actions ${this.variant === \"toast\" ? \"vds-notification__actions--toast\" : \"\"}`}\n >\n <slot name=\"actions\"></slot>\n </div>\n );\n }\n\nrender(): HTMLStencilElement {\n const custom = this.colors? this.setCustomColors() : null;\n this.setIcon();\n\n return (\n <Host style={custom}>\n <div class={combineClasses(\n 'vds__notification--container',\n 'vds__notification--status-'+ this.status,\n )}\n >\n <div class={\"vds__notification--container-body\"}>\n <div class=\"vds__notification--icon\">\n <vds-icon size=\"1.5rem\" svgIcon={this.currentIcon} color={this.currentColor}></vds-icon>\n </div>\n <div class=\"vds__notification--content\">\n <div class={`vds__notification--information ${this.variant === \"toast\" ? \"vds-notification__information--toast\" : \"\"}`}>\n <div class=\"vds__notification--title\">\n <slot name=\"header\"></slot>\n </div>\n <div class=\"vds__notification--message\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n {this.variant === \"toast\" && this.renderActions()}\n </div>\n </div>\n <div class=\"vds-notification__close-area\">\n {this.variant === \"inline\" && this.renderActions()}\n {this.showCloseBtn()}\n </div>\n </div>\n </Host>\n );\n}\n}"],"version":3}

package/dist/components/vds-popover.d.ts ADDED Viewed

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