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-footer.js ADDED Viewed

@@ -0,0 +1,124 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as setNodeObserver } from './node-utils.js';
+import { d as defineCustomElement$4 } from './vds-divider2.js';
+import { d as defineCustomElement$3 } from './vds-icon2.js';
+import { d as defineCustomElement$2 } from './vds-icon-button2.js';
+const vdsFooterCss = "@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}:host .vds__footer--container{height:1.25rem;display:flex;align-items:center;gap:var(--spacing-05);padding:var(--spacing-03) var(--spacing-07);background-color:var(--surface-lower)}:host .vds__footer--container .vds__footer--app-version{color:var(--color-text-medium);font-family:\"Roboto Flex\", sans-serif;font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem;flex:1 0 0}:host .vds__footer--container .vds__footer--info{color:var(--color-text-medium);font-family:\"Roboto Flex\", sans-serif;font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem;display:flex;align-items:center;justify-content:center;flex:1 0 0}:host .vds__footer--container .vds__footer--info div{display:flex;align-items:center}:host .vds__footer--container .vds__footer--info div.vds__footer--powerby{margin-left:0.5rem}:host .vds__footer--container .vds__footer--info div.vds__footer--powerby span{margin-right:0.25rem}:host .vds__footer--container .vds__footer--slot{display:flex;align-items:center;justify-content:flex-end;flex:1 0 0}:host .vds__footer--expandable{height:auto;overflow:hidden;padding:var(--spacing-03) var(--spacing-07);background-color:var(--surface-lower)}:host .vds__footer--expandable.top{border-bottom:1px solid var(--color-border-low)}:host .vds__footer--expandable.bottom{border-top:1px solid var(--color-border-low)}:host .vds__footer--slot-start,:host .vds__footer--slot-center,:host .vds__footer--slot-end{display:flex;align-items:center;flex:1}:host .vds__footer--slot-start{justify-content:flex-start}:host .vds__footer--slot-center{justify-content:center}:host .vds__footer--slot-end{justify-content:flex-end}@media only screen and (max-width: 77.4375rem){:host>.vds__footer--container>.vds__footer--info>div.vds__footer--powerby{display:none}}@media only screen and (max-width: 56.5rem){:host .vds__footer--container .vds__footer--slot{flex:0}:host .vds__footer--container .vds__footer--slot>*:not(.vds__footer--expand-button){display:none}:host .vds__footer--container .vds__footer--slot:not(.has-expandable-button){display:none}:host .vds__footer--container .vds__footer--info,:host .vds__footer--container .vds__footer--slot-center{justify-content:flex-end}:host .vds__footer--container .vds__footer--slot-end{display:none}}";
+const VdsFooter$1 = /*@__PURE__*/ proxyCustomElement(class VdsFooter extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         *  Sets the type for the footer, expandable shows an extra layer of the footer.
+         *  Default is only what is visible.
+         *  and custom allows to set the content of the footer.
+         */
+        this.type = 'default';
+        /** Sets the expanded content position, default is bottom */
+        this.expandedContentPosition = 'bottom';
+        /** Defines the text in the central block of the footer */
+        this.centralText = 'Wabtec Corporation. All rights reserved.';
+        /** Modify the text in the "powered by" section of the footer */
+        this.poweredByText = 'Powered by';
+        this.isExpanded = false;
+    }
+    componentWillRender() {
+        this.setFooterOptions();
+    }
+    componentWillLoad() {
+        this.setCurrentYear();
+    }
+    componentDidLoad() {
+        this.observer = setNodeObserver(this.setFooterOptions, this.host, this);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    setFooterOptions() {
+        if (this.type !== 'custom') {
+            Array.from(this.host.children).forEach(child => {
+                if (child.nodeName !== 'VDS-LINK' && child.slot !== 'expandable-content') {
+                    child.remove();
+                }
+            });
+        }
+        this.setSeparators();
+    }
+    setSeparators() {
+        const linkElements = Array.from(this.host.children).filter((child) => child.nodeName === 'VDS-LINK');
+        if (linkElements.length <= 1)
+            return;
+        for (let i = linkElements.length - 1; i > 0; i--) {
+            const divider = document.createElement('vds-divider');
+            divider.setAttribute('orientation', 'vertical');
+            divider.setAttribute('padding', 'spacing-01');
+            divider.style.setProperty('height', '1.25rem');
+            this.host.insertBefore(divider, linkElements[i]);
+        }
+    }
+    setCurrentYear() {
+        this.currentYear = new Date().getFullYear();
+    }
+    toggleExpand() {
+        this.isExpanded = !this.isExpanded;
+    }
+    renderExpandableButton() {
+        if (this.type === 'expandable') {
+            return (h("vds-icon-button", { class: "vds__footer--expand-button", variant: "secondary", size: "small", onClick: () => this.toggleExpand(), icon: this.isExpanded ? 'chevron-up' : 'chevron-down' }));
+        }
+    }
+    renderCustomFooter() {
+        return (h("div", { class: "vds__footer--container" }, h("div", { class: "vds__footer--slot-start" }, h("slot", { name: "start" })), h("div", { class: "vds__footer--slot-center" }, h("slot", { name: "center" })), h("div", { class: "vds__footer--slot-end" }, h("slot", { name: "end" }))));
+    }
+    render() {
+        return (h(Host, { key: '129c009652b8c9afedd9c377fe6e9571602f991c' }, this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (h("div", { key: '209570fb5e2fc80db736341a05dabc63e0dc676f', class: "vds__footer--expandable top" }, h("slot", { key: 'dfa5f2cd517faab158479a04eb3ce8fbc6c41ea1', name: "expandable-content" }))), this.type === 'custom' ? (this.renderCustomFooter()) : (h("div", { class: 'vds__footer--container' }, h("div", { class: 'vds__footer--app-version' }, this.appVersion), h("div", { class: 'vds__footer--info' }, h("div", null, "\u00A9 ", this.currentYear, " ", this.centralText), h("div", { class: 'vds__footer--powerby' }, h("span", null, this.poweredByText), h("vds-icon", { size: "2.95775rem,1rem", color: "color-icon-medium", svgIcon: 'wabtec-grey-logo' }))), h("div", { class: `vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}` }, h("slot", null), this.renderExpandableButton()))), this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (h("div", { key: '2a4eebb4f378025fe2819a8b9fd3169dcb71fdef', class: "vds__footer--expandable bottom" }, h("slot", { key: '77b7d2479448eb462a1f1a3227a1e3fcc12034c1', name: "expandable-content" })))));
+    }
+    get host() { return this; }
+    static get style() { return vdsFooterCss; }
+}, [1, "vds-footer", {
+        "type": [1],
+        "appVersion": [1, "app-version"],
+        "expandedContentPosition": [1, "expanded-content-position"],
+        "centralText": [1025, "central-text"],
+        "poweredByText": [1, "powered-by-text"],
+        "isExpanded": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["vds-footer", "vds-divider", "vds-icon", "vds-icon-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "vds-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VdsFooter$1);
+            }
+            break;
+        case "vds-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "vds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "vds-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const VdsFooter = VdsFooter$1;
+const defineCustomElement = defineCustomElement$1;
+export { VdsFooter, defineCustomElement };
+//# sourceMappingURL=vds-footer.js.map
+//# sourceMappingURL=vds-footer.js.map

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

@@ -0,0 +1 @@

+ {"file":"vds-footer.js","mappings":"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","names":["VdsFooter","__stencil_proxyCustomElement"],"sources":["src/components/footer/vds-footer.scss?tag=vds-footer&encapsulation=shadow","src/components/footer/vds-footer.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n@mixin footerText() {\n color: var(--color-text-medium);\n @include font-style(title, 2x-small);\n}\n\n:host {\n display: block;\n\n .vds__footer--container {\n height: 1.25rem;\n display: flex;\n align-items: center;\n gap: var(--spacing-05);\n padding: var(--spacing-03) var(--spacing-07);\n background-color: var(--surface-lower);\n\n .vds__footer--app-version {\n @include footerText();\n flex: 1 0 0;\n }\n\n .vds__footer--info {\n @include footerText();\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 0 0;\n\n div {\n display: flex;\n align-items: center;\n }\n\n div.vds__footer--powerby {\n margin-left: 0.5rem;\n\n span {\n margin-right: 0.25rem;\n }\n }\n }\n\n .vds__footer--slot {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex: 1 0 0;\n }\n }\n\n .vds__footer--expandable {\n height: auto;\n overflow: hidden;\n padding: var(--spacing-03) var(--spacing-07);\n background-color: var(--surface-lower);\n\n &.top {\n border-bottom: 1px solid var(--color-border-low);\n }\n\n &.bottom {\n border-top: 1px solid var(--color-border-low);\n }\n }\n\n .vds__footer--slot-start,\n .vds__footer--slot-center,\n .vds__footer--slot-end {\n display: flex;\n align-items: center;\n flex: 1;\n }\n\n .vds__footer--slot-start {\n justify-content: flex-start;\n }\n\n .vds__footer--slot-center {\n justify-content: center;\n }\n\n .vds__footer--slot-end {\n justify-content: flex-end;\n }\n}\n\n@media only screen and (max-width: 77.4375rem) {\n :host > .vds__footer--container > .vds__footer--info > div.vds__footer--powerby {\n display: none;\n }\n}\n\n@media only screen and (max-width: 56.5rem) {\n :host {\n .vds__footer--container {\n .vds__footer--slot {\n flex: 0;\n\n > *:not(.vds__footer--expand-button) {\n display: none;\n }\n\n &:not(.has-expandable-button) {\n display: none;\n }\n }\n\n .vds__footer--info,\n .vds__footer--slot-center {\n justify-content: flex-end;\n }\n\n .vds__footer--slot-end {\n display: none;\n }\n }\n }\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Element, State } from '@stencil/core/internal';\nimport { setNodeObserver } from '../../utils/node-utils';\n\n@Component({\n tag: 'vds-footer',\n styleUrl: 'vds-footer.scss',\n shadow: true,\n})\nexport class VdsFooter {\n /**\n * Sets the type for the footer, expandable shows an extra layer of the footer.\n * Default is only what is visible.\n * and custom allows to set the content of the footer.\n */\n @Prop() type: 'default' | 'expandable' | 'custom' = 'default';\n /** Sets the app version to be display in the footer */\n @Prop() appVersion: string;\n /** Sets the expanded content position, default is bottom */\n @Prop() expandedContentPosition: 'top' | 'bottom' = 'bottom';\n /** Defines the text in the central block of the footer */\n @Prop({ mutable: true }) centralText: string = 'Wabtec Corporation. All rights reserved.';\n /** Modify the text in the \"powered by\" section of the footer */\n @Prop() poweredByText: string = 'Powered by';\n\n @Element() host: HTMLStencilElement;\n\n @State() isExpanded: boolean = false;\n\n private currentYear: number;\n private observer: MutationObserver;\n\n componentWillRender(): void {\n this.setFooterOptions();\n }\n\n componentWillLoad(): void {\n this.setCurrentYear();\n }\n\n componentDidLoad(): void {\n this.observer = setNodeObserver(this.setFooterOptions, this.host, this);\n }\n\n disconnectedCallback(): void {\n this.observer.disconnect();\n }\n\n private setFooterOptions(): void {\n if (this.type !== 'custom') {\n Array.from(this.host.children).forEach(child => {\n if (child.nodeName !== 'VDS-LINK' && child.slot !== 'expandable-content') {\n child.remove();\n }\n });\n }\n this.setSeparators();\n }\n\n private setSeparators(): void {\n const linkElements = Array.from(this.host.children).filter(\n (child: HTMLElement) => child.nodeName === 'VDS-LINK',\n );\n if (linkElements.length <= 1) return;\n for (let i = linkElements.length - 1; i > 0; i--) {\n const divider = document.createElement('vds-divider');\n divider.setAttribute('orientation', 'vertical');\n divider.setAttribute('padding', 'spacing-01');\n divider.style.setProperty('height', '1.25rem');\n this.host.insertBefore(divider, linkElements[i]);\n }\n }\n\n private setCurrentYear(): void {\n this.currentYear = new Date().getFullYear();\n }\n\n private toggleExpand(): void {\n this.isExpanded = !this.isExpanded;\n }\n\n private renderExpandableButton(): HTMLStencilElement {\n if (this.type === 'expandable') {\n return (\n <vds-icon-button\n class=\"vds__footer--expand-button\"\n variant=\"secondary\"\n size=\"small\"\n onClick={() => this.toggleExpand()}\n icon={this.isExpanded ? 'chevron-up' : 'chevron-down'}\n />\n );\n }\n }\n\n private renderCustomFooter(): HTMLElement {\n return (\n <div class=\"vds__footer--container\">\n <div class=\"vds__footer--slot-start\">\n <slot name=\"start\" />\n </div>\n <div class=\"vds__footer--slot-center\">\n <slot name=\"center\" />\n </div>\n <div class=\"vds__footer--slot-end\">\n <slot name=\"end\" />\n </div>\n </div>\n );\n }\n\n render(): HTMLStencilElement {\n return (\n <Host>\n {this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (\n <div class=\"vds__footer--expandable top\">\n <slot name=\"expandable-content\" />\n </div>\n )}\n {this.type === 'custom' ? (\n this.renderCustomFooter()\n ) : (\n <div class={'vds__footer--container'}>\n <div class={'vds__footer--app-version'}>{this.appVersion}</div>\n <div class={'vds__footer--info'}>\n <div>© {this.currentYear} {this.centralText}</div>\n <div class={'vds__footer--powerby'}>\n <span>{this.poweredByText}</span>\n <vds-icon size=\"2.95775rem,1rem\" color=\"color-icon-medium\" svgIcon={'wabtec-grey-logo'}></vds-icon>\n </div>\n </div>\n <div class={`vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}`}>\n <slot />\n {this.renderExpandableButton()}\n </div>\n </div>\n )}\n {this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (\n <div class=\"vds__footer--expandable bottom\">\n <slot name=\"expandable-content\" />\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { u as updateFloatingBoxPosition } from './floating-engine-utils.js';
+import { q as queryElementFromShadowRoot } from './node-utils.js';
+import { d as defineCustomElement$3 } from './vds-avatar2.js';
+import { d as defineCustomElement$2 } from './vds-icon2.js';
+const vdsHeaderCss = "@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}:host .vds__header{display:flex;padding:var(--spacing-02) var(--spacing-07);align-items:center;gap:var(--spacing-03);flex:1 0 0;align-self:stretch;border-radius:var(--radius-sharp);background:var(--surface-lower);justify-content:end}:host .vds__header--content-section{display:flex;width:100%;justify-content:end}:host .vds__header--content-section>*{color:var(--color-text-medium);font-feature-settings:\"clig\" off, \"liga\" off;font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:host .vds__header--app-name{display:flex;max-width:1110px;height:var(--spacing-09);padding:var(--spacing-00);justify-content:flex-start;align-items:center;gap:var(--spacing-00);flex-shrink:0}:host .vds__header--app-name--content{color:var(--color-text-medium);font-feature-settings:\"clig\" off, \"liga\" off;font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:host .vds__header--user-section{display:flex;position:relative;padding:var(--spacing-00) var(--spacing-02);align-items:center;justify-content:space-between;gap:var(--spacing-02);align-self:stretch;text-wrap:nowrap}:host .vds__header--user-section:hover{border-radius:var(--radius-medium);background:var(--color-interaction-black-lowest)}:host .vds__header--user-section:focus{border:solid;border-color:var(--color-border-focus-2);border-radius:var(--radius-medium)}:host .vds__header--user-section-username{align-items:center;display:flex;color:var(--color-text-medium);font-feature-settings:\"clig\" off, \"liga\" off;font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem;white-space:nowrap}:host .vds__header--user-section-avatar{cursor:pointer}:host .vds__header--user-section-action-icon{align-items:center;display:flex;width:var(--spacing-06);height:var(--spacing-06);border-radius:var(--radius-medium);cursor:pointer}:host .d-flex{display:flex}:host .vds__header--user-section-menu-container{display:none}:host .vds__header--user-section-menu-container-opened{display:block;position:absolute;right:-1.5rem;top:var(--spacing-08);z-index:3}:host .vds__header--user-section-menu-container-opened .vds__header--user-section-menu-container-content{margin-top:6px;background:var(--surface-neutral-default);padding:var(--spacing-06) var(--spacing-05);border-radius:var(--radius-medium);box-shadow:0px 6px 6px 0px rgba(29, 46, 64, 0.1019607843)}:host .vds__header--user-section-menu-container-opened span .triangle-rotated{transform:rotate(180deg);margin-right:24px;margin-bottom:6px}:host .vds__header--user-section-menu-container-opened .vds__header--arrow-right-align{display:flex;justify-content:flex-end;position:absolute;top:0;right:8px;z-index:1}";
+const VdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class VdsHeader extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Allow hide/show User-Section */
+        this.showUserSection = true;
+        this.popupOpened = false;
+    }
+    handleClickOut(evt) {
+        const isClickInside = this.hostEl.contains(evt.target);
+        if (!isClickInside) {
+            this.popupOpened = false;
+        }
+    }
+    componentDidLoad() {
+        this.actionElementRef = queryElementFromShadowRoot(this.hostEl, '.vds__header--user-section-action-icon');
+        this.arrowElementRef = queryElementFromShadowRoot(this.hostEl, '.vds__header--arrow-right-align');
+    }
+    handleClick(_evt) {
+        _evt.stopPropagation();
+        _evt.preventDefault();
+        this.popupOpened = !this.popupOpened;
+    }
+    async handlePopupOpened() {
+        if (this.popupOpened) {
+            this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.floatingMenuElementRef, this.arrowElementRef, "bottom-start", false);
+        }
+        else {
+            this.floatingCleanUp && this.floatingCleanUp();
+        }
+    }
+    render() {
+        const showUserSection = this.showUserSection;
+        return (h(Host, { key: '2ab98d90cc6d0db48ce8665a5a0734a044b15acf' }, h("header", { key: '640ef1418597996f3e6f0e5754e4964f8cb72ad6', class: `vds__header` }, h("div", { key: '8d1abb4afad7d25aa655b7ea088bd1efcfc5ef88', class: `vds__header--app-name` }, h("span", { key: '973fef9767a61c5f3f6239f65cc294e1313b0227', class: "vds__header--app-name--content" }, this.value)), h("div", { key: 'af9e2c93a0be51abfde37e9aa1687cf5066a4273', class: "vds__header--content-section" }, h("slot", { key: '2620a1e1fba0644027bd2114540d5865ef4f4e15', name: "contentSection" })), showUserSection && h("div", { key: 'a3229550a19113a2ded1434433d8c89950de30d8', class: `vds__header--user-section` }, h("span", { key: 'acc1e0fda13fd12eb33b06d2089d0b369c7761d4', class: "vds__header--user-section-username" }, this.username), h("div", { key: 'e72b9b15b8a27ad8d73d87d7a59344c624bda023', class: "d-flex", onClick: (evt) => {
+                this.handleClick(evt);
+            } }, h("vds-avatar", { key: 'f718bf3260a74098c4a24bc3396a0550ec81534e', class: "vds__header--user-section-avatar", size: "20px", value: this.avatar }), h("span", { key: '9d6847b3d21e7af9501a122d6bb16176b2688268', class: "vds__header--user-section-action-icon" }, h("vds-icon", { key: '50714c7282ad4dae0299962b1f541f39c8f4b603', svgIcon: "caret-down-filled", size: "20px", color: "color-icon-medium" }))), h("div", { key: '5e36afc403a1dc598f41a2c91840f4cf89582871', ref: (el) => {
+                if (el) {
+                    this.floatingMenuElementRef = el;
+                }
+            }, class: `${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}` }, h("span", { key: 'a5b53a11502e2207a3460d85275d74dae316ed61', class: "vds__header--arrow-right-align" }, h("svg", { key: '0bfa90892bb098069bc1097216a1482f65c67805', class: "triangle-rotated", width: "13", height: "6", viewBox: "0 0 13 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ed7dd36b4166f309431bccf154a037528b0f0c0c', id: "popover-carret-filled-large", d: "M0.5 0L6.5 6L12.5 0H0.5Z", fill: "var(--surface-neutral-default)" }))), h("div", { key: '2ea036d6d6ab6b35e15d54c7840e7679773845d6', class: "vds__header--user-section-menu-container-content" }, h("slot", { key: '29373a148a50776d4a7c2b20748a3c0423faaf68', name: "profilePopupContent" })))))));
+    }
+    get hostEl() { return this; }
+    static get watchers() { return {
+        "popupOpened": ["handlePopupOpened"]
+    }; }
+    static get style() { return vdsHeaderCss; }
+}, [1, "vds-header", {
+        "value": [1],
+        "avatar": [1],
+        "username": [1],
+        "showUserSection": [4, "show-user-section"],
+        "popupOpened": [32]
+    }, [[8, "click", "handleClickOut"]], {
+        "popupOpened": ["handlePopupOpened"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["vds-header", "vds-avatar", "vds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "vds-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VdsHeader$1);
+            }
+            break;
+        case "vds-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "vds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const VdsHeader = VdsHeader$1;
+const defineCustomElement = defineCustomElement$1;
+export { VdsHeader, defineCustomElement };
+//# sourceMappingURL=vds-header.js.map
+//# sourceMappingURL=vds-header.js.map

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

@@ -0,0 +1 @@

+ {"file":"vds-header.js","mappings":"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","names":["VdsHeader","__stencil_proxyCustomElement"],"sources":["src/components/header/vds-header.scss?tag=vds-header&encapsulation=shadow","src/components/header/vds-header.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n\n .vds__header {\n display: flex;\n padding: var(--spacing-02) var(--spacing-07);\n align-items: center;\n gap: var(--spacing-03);\n flex: 1 0 0;\n align-self: stretch;\n border-radius: var(--radius-sharp);\n background: var(--surface-lower);\n justify-content: end;\n\n &--content-section {\n display: flex;\n width: 100%;\n justify-content: end;\n & > * {\n color: var(--color-text-medium);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, extra-small);\n }\n }\n\n &--app-name {\n display: flex;\n max-width: 1110px;\n height: var(--spacing-09);\n padding: var(--spacing-00);\n justify-content: flex-start;\n align-items: center;\n gap: var(--spacing-00);\n flex-shrink: 0;\n }\n\n &--app-name--content {\n color: var(--color-text-medium);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, extra-small);\n }\n\n &--user-section {\n display: flex;\n position: relative;\n padding: var(--spacing-00) var(--spacing-02);\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-02);\n align-self: stretch;\n text-wrap: nowrap;\n \n &:hover {\n border-radius: var(--radius-medium);\n background: var(--color-interaction-black-lowest);\n }\n \n &:focus {\n border: solid;\n border-color: var(--color-border-focus-2);\n border-radius: var(--radius-medium);\n }\n }\n\n &--user-section-username {\n align-items: center;\n display: flex;\n color: var(--color-text-medium);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, extra-small);\n white-space: nowrap;\n }\n\n &--user-section-avatar {\n cursor: pointer;\n }\n\n &--user-section-action-icon {\n align-items: center;\n display: flex;\n width: var(--spacing-06);\n height: var(--spacing-06);\n border-radius: var(--radius-medium);\n cursor: pointer;\n }\n }\n .d-flex {\n display: flex;\n }\n\n .vds__header--user-section-menu-container {\n display: none;\n }\n\n .vds__header--user-section-menu-container-opened {\n display: block;\n position: absolute;\n right: -1.5rem;\n top: var(--spacing-08);\n z-index: 3;\n\n .vds__header--user-section-menu-container-content {\n margin-top: 6px;\n background: var(--surface-neutral-default);\n padding: var(--spacing-06) var(--spacing-05);\n border-radius: var(--radius-medium);\n box-shadow: 0px 6px 6px 0px #1D2E401A;\n }\n\n span .triangle-rotated {\n transform: rotate(180deg);\n margin-right: 24px;\n margin-bottom: 6px;\n }\n\n .vds__header--arrow-right-align {\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 0;\n right: 8px;\n z-index: 1;\n }\n }\n}","import { Component, Host, Listen, Prop, State, h, Element, Watch } from '@stencil/core';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\n\n@Component({\n tag: 'vds-header',\n styleUrl: 'vds-header.scss',\n shadow: true,\n})\nexport class VdsHeader {\n /** Defines app name for header */\n @Prop() value: string;\n /** Defines the value in the avatar component */\n @Prop() avatar: string;\n /** Defines the username at the left of the avatar */\n @Prop() username!: string;\n /** Allow hide/show User-Section */\n @Prop() showUserSection: boolean = true;\n\n @Element() hostEl: HTMLElement;\n\n @State() popupOpened: boolean = false;\n\n @Listen(\"click\", { target: \"window\" })\n\thandleClickOut(evt): void {\n const isClickInside = this.hostEl.contains(evt.target as Node);\n if (!isClickInside) {\n this.popupOpened = false;\n }\n\t}\n private actionElementRef: HTMLElement;\n private arrowElementRef: HTMLElement;\n private floatingMenuElementRef: HTMLElement;\n\n private floatingCleanUp: () => void;\n\n componentDidLoad(){\n this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--user-section-action-icon');\n this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--arrow-right-align');\n }\n\n private handleClick(_evt: MouseEvent): void {\n _evt.stopPropagation();\n _evt.preventDefault();\n this.popupOpened = !this.popupOpened;\n }\n\n @Watch(\"popupOpened\")\n async handlePopupOpened(): Promise<void> {\n if (this.popupOpened) {\n this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.floatingMenuElementRef, this.arrowElementRef, \"bottom-start\", false);\n } else {\n this.floatingCleanUp && this.floatingCleanUp();\n }\n }\n\n render() {\n const showUserSection = this.showUserSection;\n return (\n <Host>\n <header class={`vds__header`}>\n <div class={`vds__header--app-name`}>\n <span class=\"vds__header--app-name--content\">{this.value}</span>\n </div>\n <div class=\"vds__header--content-section\">\n <slot name=\"contentSection\"></slot>\n </div>\n { showUserSection && <div class={`vds__header--user-section`}>\n <span class=\"vds__header--user-section-username\">{this.username}</span>\n <div class=\"d-flex\" onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}>\n <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n <span class=\"vds__header--user-section-action-icon\">\n <vds-icon svgIcon=\"caret-down-filled\" size=\"20px\" color=\"color-icon-medium\"></vds-icon>\n </span>\n </div>\n\n <div\n ref={(el) => {\n if (el) {\n this.floatingMenuElementRef = el;\n }\n }}\n class={`${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}`}>\n <span class=\"vds__header--arrow-right-align\">\n <svg class=\"triangle-rotated\" width=\"13\" height=\"6\" viewBox=\"0 0 13 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"popover-carret-filled-large\" d=\"M0.5 0L6.5 6L12.5 0H0.5Z\" fill=\"var(--surface-neutral-default)\"/>\n </svg>\n </span>\n <div\n class=\"vds__header--user-section-menu-container-content\"\n >\n <slot name=\"profilePopupContent\"></slot>\n </div>\n </div>\n </div> }\n </header>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-icon-button.d.ts ADDED Viewed

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

package/dist/components/vds-icon-button.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { V as VdsIconButton$1, d as defineCustomElement$1 } from './vds-icon-button2.js';
+const VdsIconButton = VdsIconButton$1;
+const defineCustomElement = defineCustomElement$1;
+export { VdsIconButton, defineCustomElement };
+//# sourceMappingURL=vds-icon-button.js.map
+//# sourceMappingURL=vds-icon-button.js.map

package/dist/components/vds-icon-button.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"vds-icon-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/vds-icon-button.utils.js ADDED Viewed

@@ -0,0 +1,11 @@
+const ICON_SIZE = {
+    "extra-small": "0.75rem",
+    "small": "1rem",
+    "medium": "1.25rem",
+    "large": "1.5rem",
+};
+export { ICON_SIZE as I };
+//# sourceMappingURL=vds-icon-button.utils.js.map
+//# sourceMappingURL=vds-icon-button.utils.js.map

package/dist/components/vds-icon-button.utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"vds-icon-button.utils.js","mappings":"AAAa,MAAA,SAAS,GAAG;AACrB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,QAAQ,EAAE,SAAS;AACnB,IAAA,OAAO,EAAE,QAAQ;;;;;","names":[],"sources":["src/components/icon-button/vds-icon-button.utils.ts"],"sourcesContent":["export const ICON_SIZE = {\n \"extra-small\": \"0.75rem\",\n \"small\": \"1rem\",\n \"medium\": \"1.25rem\",\n \"large\": \"1.5rem\",\n};\n"],"version":3}