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/volt-basic-components/p-4502d26c.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,f as r,h as e,H as a,a as t}from"./p-DTZC-zXo.js";import{c as i}from"./p-B23UkaEC.js";const c='@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__tabs-group{display:block}:host .vds__tabs-group--header{display:inline-flex;position:relative;top:0;left:0;width:100%;height:100%}:host .vds__tabs-group--header.vds__tabs-group--header-tabs-show-track:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--border-thickness-05);border-radius:var(--radius-medium);background-color:var(--color-border-lowest)}:host .vds__tabs-group--active-tab-indicator{position:absolute;bottom:0;left:0;height:var(--border-thickness-05);border-radius:var(--radius-medium);background-color:var(--color-border-brand);transition:150ms}:host .vds__tabs-group--header-tabs-flex-start{justify-content:flex-start}:host .vds__tabs-group--header-tabs-flex-end{justify-content:flex-end}:host .vds__tabs-group--header-tabs-center{justify-content:center}:host .vds__tabs-group--header-tabs-space-around{justify-content:space-around}:host .vds__tabs-group--header-tabs-space-between{justify-content:space-between}:host .vds__tabs-group--header-tabs-nav{display:inline-flex;gap:var(--spacing-07)}:host .vds__tabs-group--tab-view-content{padding:var(--spacing-04);position:relative}:host-context(.vds__tabs-group--disabled){pointer-events:none}';const s=class{constructor(r){o(this,r);this.type="default";this.tabAlignment="flex-start";this.showTrack=false;this.activeTabIndex=0;this.disabled=false;this.internalActiveTabIndex=0;this.tabs=[]}handleTabSelection(o){const r=o.target;this.internalActiveTabIndex=Number(r===null\|\|r===void 0?void 0:r.getAttribute("vds-tabindex"))\|\|0;this.activeTabIndex=this.internalActiveTabIndex;this.updateTabsState(this.tabs)}handleValueChanged(){this.updateIndicatorPosition();r(this)}componentWillLoad(){try{this.tabs=Array.from(this.hostEl.querySelectorAll("vds-tab"));if(this.tabs.length>0){this.internalActiveTabIndex=this.activeTabIndex>=0&&this.activeTabIndex<this.tabs.length?this.activeTabIndex:0;this.updateTabsState(this.tabs)}}catch(o){console.error("componentWillLoad Error: ",o)}}componentDidRender(){if(this.tabs.length>0){this.observeActiveTabContent()}}disconnectedCallback(){if(this.resizeObserver){this.resizeObserver.disconnect()}}observeActiveTabContent(){var o;if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.activeTab){const r=(o=this.activeTab.shadowRoot)===null\|\|o===void 0?void 0:o.querySelector(".vds__tab--content-active");if(r){this.resizeObserver=new ResizeObserver((()=>{this.defineAttributes();this.updateIndicatorPosition()}));this.resizeObserver.observe(r)}}}handleActiveTabIndexChange(){this.updateTabsState(this.tabs)}setDisabledState(){(this.tabs\|\|[]).forEach((o=>{o.disabled=this.disabled}))}async getActive(){return this.internalActiveTabIndex}async setActive(o){this.setActiveTab(o)}setActiveTab(o){if(this.tabs.length>0){this.internalActiveTabIndex=this.validateTabIndex(o);this.activeTabIndex=this.internalActiveTabIndex}}validateTabIndex(o){var r;const e=o>=0&&o<this.tabs.length;const a=e&&!((r=this.tabs[o])===null\|\|r===void 0?void 0:r.disabled);if(e&&a){return o}const t=this.tabs.findIndex((o=>!o.disabled));return t>=0?t:0}defineAttributes(){var o;if(this.activeTab&&this.tabsGroupContainer){const r=(o=this.activeTab.shadowRoot)===null\|\|o===void 0?void 0:o.querySelector(".vds__tab--content-active");if(r){this.hostEl.setAttribute("style",`height: ${this.tabsGroupContainer.offsetHeight+r.offsetHeight}px`)}}}updateIndicatorPosition(){if(this.activeTab&&this.indicatorEl){const o=this.activeTab.offsetLeft;const r=this.activeTab.offsetWidth;const e=this.indicatorEl.parentElement.offsetLeft;this.indicatorEl.style.left=`${o-e}px`;this.indicatorEl.style.width=`${r}px`}}renderActiveTabIndicator(){return this.activeTab&&e("div",{class:"vds__tabs-group--active-tab-indicator",ref:o=>this.indicatorEl=o})}updateTabsState(o){this.internalActiveTabIndex=this.validateTabIndex(this.activeTabIndex);o.forEach(((o,r)=>{const e=r===this.internalActiveTabIndex&&!o.disabled;o.isActive=e;if(e){this.activeTab=o;this.updateIndicatorPosition()}o.setAttribute("vds-tabindex",`${r}`);o.type=this.type;o.width=this.width;o.maxWidth=this.maxWidth}));this.defineAttributes()}render(){return e(a,{key:"76bdfd7b81e08a0b1dd0e728986f1b006d47680d",class:this.disabled?"vds__tabs-group--disabled":""},e("div",{key:"b1d420eb1c561e3d2b5edb7ce81dfc06cd077377",ref:o=>{if(!o)return;this.tabsGroupContainer=o},class:"vds__tabs-group"},e("div",{key:"3702b48c6dfa2757f8c31c7e6dda03ba578d302f",class:i("vds__tabs-group--header","vds__tabs-group--header-tabs-"+this.tabAlignment,this.showTrack?"vds__tabs-group--header-tabs-show-track":"")},e("div",{key:"cdc273f03dab09fb375ce2a809948ab45273b3bd",class:"vds__tabs-group--header-content"},e("slot",{key:"ffe7399a3d5f31121df4c2b1157763e5d5e4e0b5",name:"header-content"})),e("div",{key:"b1212f299317b12b48f12e6836963ae63a631a2a",class:"vds__tabs-group--header-tabs-nav",role:"tablist"},e("slot",{key:"d5ea7e292a327c8523aab29b299a4fab93a9eecb",name:"tab-list"})),this.renderActiveTabIndicator())))}get hostEl(){return t(this)}static get watchers(){return{activeTabIndex:["handleActiveTabIndexChange"],disabled:["setDisabledState"]}}};s.style=c;export{s as vds_tabs_group};
2	+ //# sourceMappingURL=p-4502d26c.entry.js.map

package/dist/volt-basic-components/p-4502d26c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["vdsTabsGroupCss","VdsTabsGroup","constructor","hostRef","this","type","tabAlignment","showTrack","activeTabIndex","disabled","internalActiveTabIndex","tabs","handleTabSelection","evt","target","Number","getAttribute","updateTabsState","handleValueChanged","updateIndicatorPosition","forceUpdate","componentWillLoad","Array","from","hostEl","querySelectorAll","length","e","console","error","componentDidRender","observeActiveTabContent","disconnectedCallback","resizeObserver","disconnect","activeTab","content","_a","shadowRoot","querySelector","ResizeObserver","defineAttributes","observe","handleActiveTabIndexChange","setDisabledState","forEach","tab","getActive","setActive","index","setActiveTab","validateTabIndex","isValidIndex","isEnabled","firstEnabledIndex","findIndex","tabsGroupContainer","setAttribute","offsetHeight","indicatorEl","tabLeft","offsetLeft","tabWidth","offsetWidth","parentLeft","parentElement","style","left","width","renderActiveTabIndicator","h","class","ref","el","tabIndex","isActiveTab","isActive","maxWidth","render","Host","key","combineClasses","name","role"],"sources":["src/components/tabs-group/vds-tabs-group.scss?tag=vds-tabs-group&encapsulation=shadow","src/components/tabs-group/vds-tabs-group.tsx"],"sourcesContent":[":host {\n display: block;\n .vds__tabs-group {\n display: block;\n }\n\n .vds__tabs-group--header {\n display: inline-flex;\n position: relative;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n &.vds__tabs-group--header-tabs-show-track:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--border-thickness-05);\n border-radius: var(--radius-medium);\n background-color: var(--color-border-lowest);\n }\n }\n .vds__tabs-group--active-tab-indicator {\n position: absolute;\n bottom: 0;\n left: 0;\n height: var(--border-thickness-05);\n border-radius: var(--radius-medium);\n background-color: var(--color-border-brand);\n transition: 150ms;\n }\n .vds__tabs-group--header-tabs-flex-start {\n justify-content: flex-start;\n }\n .vds__tabs-group--header-tabs-flex-end {\n justify-content: flex-end;\n }\n .vds__tabs-group--header-tabs-center {\n justify-content: center;\n }\n .vds__tabs-group--header-tabs-space-around {\n justify-content: space-around;\n }\n .vds__tabs-group--header-tabs-space-between {\n justify-content: space-between;\n }\n .vds__tabs-group--header-tabs-nav {\n display: inline-flex;\n gap: var(--spacing-07);\n }\n .vds__tabs-group--tab-view-content {\n padding: var(--spacing-04);\n position: relative;\n }\n}\n\n:host-context(.vds__tabs-group--disabled) {\n pointer-events: none;\n}","import { Component, Host, h, State, Element, Prop, Method, Listen, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\n\n@Component({\n tag: 'vds-tabs-group',\n styleUrl: 'vds-tabs-group.scss',\n shadow: true,\n})\nexport class VdsTabsGroup {\n @Element() hostEl: HTMLElement;\n /** Sets the type for the tabs group */\n @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom' = 'default';\n /** Sets the width for the tabs */\n @Prop({ mutable: true }) width?: string;\n /** Sets the max width for the tabs */\n @Prop({ reflect: true, mutable: true }) maxWidth?: string;\n /** Sets the alignment for the tabs */\n @Prop({ reflect: true, mutable: true }) tabAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' = 'flex-start';\n /** Shows the indicator track under the tab*/\n @Prop({ mutable: true }) showTrack: boolean = false;\n /** Sets the index to select the active tab inside the group.\n * If not specified, loads the first tab.\n */\n @Prop({ mutable: true }) activeTabIndex: number = 0;\n /** Sets tab group to disable state */\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n @State() internalActiveTabIndex: number = 0;\n\n private activeTab: HTMLVdsTabElement;\n private tabsGroupContainer: HTMLDivElement;\n private indicatorEl: HTMLDivElement;\n private tabs: HTMLVdsTabElement[] = [];\n private resizeObserver: ResizeObserver;\n\n @Listen('isSelected')\n handleTabSelection(evt: CustomEvent): void {\n const target = evt.target as HTMLElement;\n this.internalActiveTabIndex = Number(target?.getAttribute('vds-tabindex')) || 0;\n this.activeTabIndex = this.internalActiveTabIndex;\n this.updateTabsState(this.tabs);\n }\n\n @Listen('valueChanged')\n handleValueChanged(): void {\n this.updateIndicatorPosition();\n forceUpdate(this);\n }\n\n componentWillLoad() {\n try {\n this.tabs = Array.from(this.hostEl.querySelectorAll('vds-tab'));\n if (this.tabs.length > 0) {\n this.internalActiveTabIndex = this.activeTabIndex >= 0 && this.activeTabIndex < this.tabs.length\n ? this.activeTabIndex\n : 0;\n this.updateTabsState(this.tabs);\n }\n } catch (e) {\n console.error('componentWillLoad Error: ', e);\n }\n }\n\n componentDidRender(): void {\n if (this.tabs.length > 0) {\n this.observeActiveTabContent();\n }\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private observeActiveTabContent() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n if (this.activeTab) {\n const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active');\n if (content) {\n this.resizeObserver = new ResizeObserver(() => {\n this.defineAttributes();\n this.updateIndicatorPosition()\n });\n this.resizeObserver.observe(content);\n }\n }\n }\n\n @Watch('activeTabIndex')\n handleActiveTabIndexChange() {\n this.updateTabsState(this.tabs);\n }\n\n @Watch(\"disabled\")\n setDisabledState() {\n (this.tabs || []).forEach(tab => {\n tab.disabled = this.disabled;\n });\n }\n\n /**\n * Gets the currently active tab index\n * \n * @returns {Promise<number>} A promise that resolves with the active tab index.\n */\n @Method()\n public async getActive(): Promise<number> {\n return this.internalActiveTabIndex;\n }\n\n /**\n * Sets the active tab index\n * \n * @param {number} index - The index of the tab to set as active.\n */\n @Method()\n public async setActive(index: number) {\n this.setActiveTab(index);\n }\n\n private setActiveTab(index: number) {\n if (this.tabs.length > 0) {\n this.internalActiveTabIndex = this.validateTabIndex(index);\n this.activeTabIndex = this.internalActiveTabIndex;\n }\n }\n\n private validateTabIndex(index: number): number {\n const isValidIndex = index >= 0 && index < this.tabs.length;\n const isEnabled = isValidIndex && !this.tabs[index]?.disabled;\n if (isValidIndex && isEnabled) {\n return index;\n }\n const firstEnabledIndex = this.tabs.findIndex(tab => !tab.disabled);\n return firstEnabledIndex >= 0 ? firstEnabledIndex : 0;\n }\n\n private defineAttributes() {\n if (this.activeTab && this.tabsGroupContainer) {\n const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active') as HTMLElement;\n if (content) {\n this.hostEl.setAttribute('style', `height: ${this.tabsGroupContainer.offsetHeight + content.offsetHeight}px`);\n }\n }\n }\n\n private updateIndicatorPosition() {\n if (this.activeTab && this.indicatorEl) {\n const tabLeft = this.activeTab.offsetLeft;\n const tabWidth = this.activeTab.offsetWidth;\n const parentLeft = this.indicatorEl.parentElement.offsetLeft;\n\n this.indicatorEl.style.left = `${tabLeft - parentLeft}px`;\n this.indicatorEl.style.width = `${tabWidth}px`;\n }\n }\n\n private renderActiveTabIndicator() {\n return this.activeTab && (\n <div\n class=\"vds__tabs-group--active-tab-indicator\"\n ref={(el: HTMLDivElement) => (this.indicatorEl = el)}\n />\n );\n }\n\n private updateTabsState(tabs: HTMLVdsTabElement[]) {\n this.internalActiveTabIndex = this.validateTabIndex(this.activeTabIndex);\n tabs.forEach((tab, tabIndex) => {\n const isActiveTab = tabIndex === this.internalActiveTabIndex && !tab.disabled;\n tab.isActive = isActiveTab;\n if (isActiveTab) {\n this.activeTab = tab;\n this.updateIndicatorPosition();\n }\n tab.setAttribute('vds-tabindex', `${tabIndex}`);\n tab.type = this.type;\n tab.width = this.width;\n tab.maxWidth = this.maxWidth;\n });\n this.defineAttributes();\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={this.disabled ? 'vds__tabs-group--disabled' : ''}>\n <div\n ref={(el: HTMLDivElement): void => {\n if (!el) return;\n this.tabsGroupContainer = el;\n }}\n class=\"vds__tabs-group\"\n >\n <div class={\n combineClasses(\n 'vds__tabs-group--header',\n 'vds__tabs-group--header-tabs-' + this.tabAlignment,\n this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : ''\n )}\n >\n <div class=\"vds__tabs-group--header-content\">\n <slot name=\"header-content\"></slot>\n </div>\n <div class=\"vds__tabs-group--header-tabs-nav\" role=\"tablist\">\n <slot name=\"tab-list\"></slot>\n </div>\n {this.renderActiveTabIndicator()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAkB,21/B,MCSXC,EAAY,MALzB,WAAAC,CAAAC,G,UAQ2BC,KAAIC,KAA0D,UAM/CD,KAAYE,aAA4E,aAEvGF,KAASG,UAAY,MAIrBH,KAAcI,eAAW,EAEVJ,KAAQK,SAAY,MAEnDL,KAAsBM,uBAAW,EAKlCN,KAAIO,KAAwB,EAuLrC,CAnLC,kBAAAC,CAAmBC,GACjB,MAAMC,EAASD,EAAIC,OACnBV,KAAKM,uBAAyBK,OAAOD,IAAM,MAANA,SAAM,SAANA,EAAQE,aAAa,kBAAoB,EAC9EZ,KAAKI,eAAiBJ,KAAKM,uBAC3BN,KAAKa,gBAAgBb,KAAKO,K,CAI5B,kBAAAO,GACEd,KAAKe,0BACLC,EAAYhB,K,CAGd,iBAAAiB,GACE,IACEjB,KAAKO,KAAOW,MAAMC,KAAKnB,KAAKoB,OAAOC,iBAAiB,YACpD,GAAIrB,KAAKO,KAAKe,OAAS,EAAG,CACxBtB,KAAKM,uBAAyBN,KAAKI,gBAAkB,GAAKJ,KAAKI,eAAiBJ,KAAKO,KAAKe,OACtFtB,KAAKI,eACL,EACJJ,KAAKa,gBAAgBb,KAAKO,K,EAE5B,MAAOgB,GACPC,QAAQC,MAAM,4BAA6BF,E,EAI/C,kBAAAG,GACE,GAAI1B,KAAKO,KAAKe,OAAS,EAAG,CACxBtB,KAAK2B,yB,EAIT,oBAAAC,GACE,GAAI5B,KAAK6B,eAAgB,CACvB7B,KAAK6B,eAAeC,Y,EAIhB,uBAAAH,G,MACN,GAAI3B,KAAK6B,eAAgB,CACvB7B,KAAK6B,eAAeC,Y,CAEtB,GAAI9B,KAAK+B,UAAW,CAClB,MAAMC,GAAUC,EAAAjC,KAAK+B,UAAUG,cAAY,MAAAD,SAAA,SAAAA,EAAAE,cAAc,6BACzD,GAAIH,EAAS,CACXhC,KAAK6B,eAAiB,IAAIO,gBAAe,KACvCpC,KAAKqC,mBACLrC,KAAKe,yBAAyB,IAEhCf,KAAK6B,eAAeS,QAAQN,E,GAMlC,0BAAAO,GACEvC,KAAKa,gBAAgBb,KAAKO,K,CAI5B,gBAAAiC,IACGxC,KAAKO,MAAQ,IAAIkC,SAAQC,IACxBA,EAAIrC,SAAWL,KAAKK,QAAQ,G,CAUzB,eAAMsC,GACX,OAAO3C,KAAKM,sB,CASP,eAAMsC,CAAUC,GACrB7C,KAAK8C,aAAaD,E,CAGZ,YAAAC,CAAaD,GACnB,GAAI7C,KAAKO,KAAKe,OAAS,EAAG,CACxBtB,KAAKM,uBAAyBN,KAAK+C,iBAAiBF,GACpD7C,KAAKI,eAAiBJ,KAAKM,sB,EAIvB,gBAAAyC,CAAiBF,G,MACvB,MAAMG,EAAeH,GAAS,GAAKA,EAAQ7C,KAAKO,KAAKe,OACrD,MAAM2B,EAAYD,MAAiBf,EAAAjC,KAAKO,KAAKsC,MAAQ,MAAAZ,SAAA,SAAAA,EAAA5B,UACrD,GAAI2C,GAAgBC,EAAW,CAC7B,OAAOJ,C,CAET,MAAMK,EAAoBlD,KAAKO,KAAK4C,WAAUT,IAAQA,EAAIrC,WAC1D,OAAO6C,GAAqB,EAAIA,EAAoB,C,CAG9C,gBAAAb,G,MACN,GAAIrC,KAAK+B,WAAa/B,KAAKoD,mBAAoB,CAC7C,MAAMpB,GAAUC,EAAAjC,KAAK+B,UAAUG,cAAY,MAAAD,SAAA,SAAAA,EAAAE,cAAc,6BACzD,GAAIH,EAAS,CACXhC,KAAKoB,OAAOiC,aAAa,QAAS,WAAWrD,KAAKoD,mBAAmBE,aAAetB,EAAQsB,iB,GAK1F,uBAAAvC,GACN,GAAIf,KAAK+B,WAAa/B,KAAKuD,YAAa,CACtC,MAAMC,EAAUxD,KAAK+B,UAAU0B,WAC/B,MAAMC,EAAW1D,KAAK+B,UAAU4B,YAChC,MAAMC,EAAa5D,KAAKuD,YAAYM,cAAcJ,WAElDzD,KAAKuD,YAAYO,MAAMC,KAAO,GAAGP,EAAUI,MAC3C5D,KAAKuD,YAAYO,MAAME,MAAQ,GAAGN,K,EAI9B,wBAAAO,GACN,OAAOjE,KAAK+B,WACVmC,EACE,OAAAC,MAAM,wCACNC,IAAMC,GAAwBrE,KAAKuD,YAAcc,G,CAK/C,eAAAxD,CAAgBN,GACtBP,KAAKM,uBAAyBN,KAAK+C,iBAAiB/C,KAAKI,gBACzDG,EAAKkC,SAAQ,CAACC,EAAK4B,KACjB,MAAMC,EAAcD,IAAatE,KAAKM,yBAA2BoC,EAAIrC,SACrEqC,EAAI8B,SAAWD,EACf,GAAIA,EAAa,CACfvE,KAAK+B,UAAYW,EACjB1C,KAAKe,yB,CAEP2B,EAAIW,aAAa,eAAgB,GAAGiB,KACpC5B,EAAIzC,KAAOD,KAAKC,KAChByC,EAAIsB,MAAQhE,KAAKgE,MACjBtB,EAAI+B,SAAWzE,KAAKyE,QAAQ,IAE9BzE,KAAKqC,kB,CAGP,MAAAqC,GACE,OACER,EAACS,EAAK,CAAAC,IAAA,2CAAAT,MAAOnE,KAAKK,SAAW,4BAA8B,IACzD6D,EAAA,OAAAU,IAAA,2CACER,IAAMC,IACJ,IAAKA,EAAI,OACTrE,KAAKoD,mBAAqBiB,CAAE,EAE9BF,MAAM,mBAEND,EAAK,OAAAU,IAAA,2CAAAT,MACHU,EACE,0BACA,gCAAkC7E,KAAKE,aACvCF,KAAKG,UAAY,0CAA4C,KAG/D+D,EAAK,OAAAU,IAAA,2CAAAT,MAAM,mCACTD,EAAA,QAAAU,IAAA,2CAAME,KAAK,oBAEbZ,EAAA,OAAAU,IAAA,2CAAKT,MAAM,mCAAmCY,KAAK,WACjDb,EAAA,QAAAU,IAAA,2CAAME,KAAK,cAEZ9E,KAAKiE,6B","ignoreList":[]}

package/dist/volt-basic-components/p-703d9526.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as r,h as e,H as a,a as t}from"./p-DTZC-zXo.js";import{g as i}from"./p-C1rbpvgj.js";import{c}from"./p-B23UkaEC.js";const l='@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:inline-block}:host input{outline:none;border:0;appearance:none;margin:0;padding:0}:host label{cursor:pointer}:host .vds-switch__container{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:content-box;border:var(--spacing-01) solid transparent;appearance:none}:host .vds-switch__container .switch-label::part(label){cursor:pointer}:host .vds-switch__container .vds-switch{display:flex}:host .vds-switch__container:focus-within{outline:none;border-radius:var(--spacing-02);border:var(--spacing-01) solid var(--color-border-brand)}:host .vds-switch__container.vds-switch__container--label-alignment-start{flex-direction:row-reverse}:host .vds-switch__container.vds-switch__container--label-alignment-end{flex-direction:row}:host .vds-switch__container.vds-switch__container--size-medium{gap:var(--spacing-03);padding:calc(var(--spacing-03) - 0.125rem)}:host .vds-switch__container.vds-switch__container--size-medium .switch-icon{width:var(--spacing-06);height:var(--spacing-06)}:host .vds-switch__container.vds-switch__container--size-large{gap:var(--spacing-04);padding:calc(var(--spacing-04) - 0.125rem)}:host .vds-switch__container.vds-switch__container--size-large .switch-icon{width:var(--spacing-07);height:var(--spacing-07)}:host .vds-switch__container .switch-icon::part(svg-icon){color:var(--color-background-brand-press);fill:var(--color-background-brand-press)}:host .vds-switch__container.vds-switch--checked .switch-icon::part(svg-icon){color:var(--color-background-brand-default);fill:var(--color-background-brand-default)}:host .vds-switch__container.vds-switch--disabled .switch-icon::part(svg-icon){color:var(--color-icon-general);fill:var(--color-icon-general)}:host .switch-icon-off::part(svg-icon){color:var(--color-icon-general);fill:var(--color-icon-general)}:host-context(.vds-switch--disabled){pointer-events:none}';const s=class{constructor(e){o(this,e);this.check=r(this,"check");if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.checked=false;this.disabled=false;this.size="medium";this.isRequired=false;this.labelAlignment="end";this.state="unchecked"}componentWillRender(){this.setSwitchState()}componentDidLoad(){if(this.internals&&!!this.internals.setFormValue){this.internals.setFormValue(this.checked.toString())}}setCheckedStates(){if(this.internals&&!!this.internals.setFormValue){this.internals.setFormValue(this.checked.toString())}}handleClick(o){this.toggleCheck()}toggleCheck(){if(!this.disabled){const o=new InputEvent("input");this.checked=!this.checked;this.value=this.checked.toString();this.check.emit(this.checked);this.hostEl.dispatchEvent(o)}return Promise.resolve()}setSwitchState(){this.state=this.checked?"checked":"unchecked"}renderSwitch(){const o=i(this.size);switch(this.state){case"checked":return e("vds-icon",{class:"switch-icon",svgIcon:`switch-on`,size:o});default:return e("vds-icon",{class:"switch-icon switch-icon-off",svgIcon:`switch-off`,size:o})}}renderLabel(){return e("vds-label",{class:"switch-label",labelValue:this.labelValue,required:this.isRequired,size:this.size,disabled:this.disabled})}render(){var o;return e(a,{key:"620638faf864c1a4346d29c8d409c81bec18f624",state:this.state,class:this.disabled?"vds-switch--disabled":""},e("div",{key:"7fe299653ac969b4fb21a99dcf960c556086730e",onClick:o=>{this.handleClick(o)},class:c("vds-switch__container",`vds-switch__container--size-${this.size}`,`vds-switch__container--label-alignment-${this.labelAlignment}`,this.checked?"vds-switch--checked":"",this.disabled?"vds-switch--disabled":"")},e("div",{key:"e57f3c08ca8dbe7dacf681fa6a97a977634dbf4d",class:"vds-switch"},e("input",{key:"6d016b651732cdf6dbaa6eba8191b06e69f4341a",type:"checkbox",checked:this.checked,value:this.value,id:(o=this.hostEl)===null\|\|o===void 0?void 0:o.id,disabled:this.disabled}),this.renderSwitch()),this.labelValue&&this.renderLabel()))}static get formAssociated(){return true}get hostEl(){return t(this)}static get watchers(){return{checked:["setCheckedStates"]}}};s.style=l;export{s as vds_switch};
2	+ //# sourceMappingURL=p-703d9526.entry.js.map

package/dist/volt-basic-components/p-703d9526.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["vdsSwitchCss","VdsSwitch","constructor","hostRef","this","checked","disabled","size","isRequired","labelAlignment","state","componentWillRender","setSwitchState","componentDidLoad","internals","setFormValue","toString","setCheckedStates","handleClick","_","toggleCheck","inputEvent","InputEvent","value","check","emit","hostEl","dispatchEvent","Promise","resolve","renderSwitch","getIconSize","h","class","svgIcon","renderLabel","labelValue","required","render","Host","key","onClick","evt","combineClasses","type","id","_a"],"sources":["src/components/switch/vds-switch.scss?tag=vds-switch&encapsulation=shadow","src/components/switch/vds-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n input {\n outline: none;\n border: 0;\n appearance: none;\n margin: 0;\n padding: 0;\n }\n label {\n cursor: pointer;\n }\n\n .vds-switch__container {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-sizing: content-box;\n border: var(--spacing-01) solid transparent;\n appearance: none;\n\n .switch-label::part(label) {\n cursor: pointer;\n }\n\n .vds-switch {\n display: flex;\n }\n \n &:focus-within {\n outline: none;\n border-radius: var(--spacing-02);\n border: var(--spacing-01) solid var(--color-border-brand);\n }\n\n &.vds-switch__container--label-alignment-start {\n flex-direction: row-reverse;\n }\n\n &.vds-switch__container--label-alignment-end {\n flex-direction: row;\n }\n\n &.vds-switch__container--size-medium {\n gap: var(--spacing-03);\n padding: calc(var(--spacing-03) - 0.125rem);\n .switch-icon {\n width: var(--spacing-06);\n height: var(--spacing-06);\n }\n }\n &.vds-switch__container--size-large {\n gap: var(--spacing-04);\n padding: calc(var(--spacing-04) - 0.125rem);\n .switch-icon {\n width: var(--spacing-07);\n height: var(--spacing-07);\n }\n }\n\n .switch-icon::part(svg-icon) {\n color: var(--color-background-brand-press);\n fill: var(--color-background-brand-press);\n }\n &.vds-switch--checked {\n .switch-icon::part(svg-icon) {\n color: var(--color-background-brand-default);\n fill: var(--color-background-brand-default);\n }\n }\n &.vds-switch--disabled {\n .switch-icon::part(svg-icon) {\n color: var(--color-icon-general);\n fill: var(--color-icon-general);\n }\n }\n }\n\n .switch-icon-off::part(svg-icon) {\n color: var(--color-icon-general);\n fill: var(--color-icon-general);\n }\n}\n\n:host-context(.vds-switch--disabled) {\n pointer-events: none;\n}","import { Component, Host, Prop, h, Element, Event, EventEmitter, AttachInternals, Watch, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n tag: 'vds-switch',\n styleUrl: 'vds-switch.scss',\n shadow: true,\n formAssociated: true\n})\nexport class VdsSwitch {\n /** Sets the text to be shown in the switch */\n @Prop({ reflect: true, mutable: true }) labelValue: string;\n /** Sets the switch in checked state */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /** Sets the switch in disabled state */\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n /** Sets the switch's size */\n @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n /** Toggles the required sign in the field */\n @Prop({ mutable: true }) isRequired: boolean = false;\n /** Sets the value in the input. Usually uses checked prop as string. \n * Used to manage Reactive forms and other native functionality */\n @Prop({ reflect: true, mutable: true }) value: string;\n /** Aligns the label in relation to the switch*/\n @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n /** Makes a custom change to target property using checked (use for React components) */\n @Event() check: EventEmitter<boolean>;\n\n private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n componentWillRender(): void {\n this.setSwitchState();\n }\n\n componentDidLoad(): void {\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /**\n * Executes every time checked value changes.\n * Sets form value in order to work properly with native forms\n *\n * @returns void\n */\n @Watch(\"checked\")\n setCheckedStates(): void {\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /**\n * Executes every time the switch is being click.\n * Executes toggleCheck method.\n *\n * @param event - MouseEvent\n * @returns void\n */\n\thandleClick(_: MouseEvent): void {\n\t\tthis.toggleCheck();\n\t}\n\n /**\n * Toggles switch value.\n * Emits check event with checked value.\n *\n * @returns Promise<void>\n */\n @Method()\n toggleCheck(): Promise<void> {\n if (!this.disabled) {\n const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n this.value = this.checked.toString();\n\t\t\tthis.check.emit(this.checked);\n this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n return Promise.resolve();\n }\n\n /**\n * Determine state of the switch based on the checked property.\n * When checked is true, state is checked.\n * When checked is false, state is unchecked.\n *\n * @returns void\n */\n private setSwitchState(): void {\n this.state = this.checked ? \"checked\" : \"unchecked\";\n }\n\n /**\n * Returns the icon prop based on the state and calculate the size.\n *\n * @returns HTMLStencilElement\n */\n private renderSwitch(): HTMLStencilElement {\n const size = getIconSize(this.size);\n switch(this.state) {\n case \"checked\":\n return <vds-icon class=\"switch-icon\" svgIcon={`switch-on`} size={size}></vds-icon>;\n default:\n return <vds-icon class=\"switch-icon switch-icon-off\" svgIcon={`switch-off`} size={size}></vds-icon>;\n }\n }\n\n /**\n * Returns the vds-label for the switch when there is a label provided.\n *\n * @returns HTMLStencilElement\n */\n private renderLabel(): HTMLStencilElement {\n return <vds-label\n class={\"switch-label\"}\n labelValue={this.labelValue}\n required={this.isRequired}\n size={this.size}\n disabled={this.disabled}></vds-label>\n }\n\n\n render() {\n return (\n <Host state={this.state} class={this.disabled ? \"vds-switch--disabled\" : \"\"}>\n <div\n onClick={(evt): void => {this.handleClick(evt)}}\n class={combineClasses(\n \"vds-switch__container\",\n `vds-switch__container--size-${this.size}`,\n `vds-switch__container--label-alignment-${this.labelAlignment}`,\n this.checked ? \"vds-switch--checked\" : \"\",\n this.disabled ? \"vds-switch--disabled\" : \"\"\n )}\n >\n <div class=\"vds-switch\">\n <input\n type={\"checkbox\"}\n checked={this.checked}\n value={this.value}\n id={this.hostEl?.id}\n disabled={this.disabled} />\n {this.renderSwitch()}\n </div>\n {this.labelValue && this.renderLabel()}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"mIAAA,MAAMA,EAAe,s/gC,MCWRC,EAAS,MANtB,WAAAC,CAAAC,G,qMAU0CC,KAAOC,QAAY,MAEnBD,KAAQE,SAAY,MAEnCF,KAAIG,KAAuB,SAE3BH,KAAUI,WAAY,MAKvCJ,KAAcK,eAAoB,MASlCL,KAAKM,MAA4B,WA0H1C,CAxHC,mBAAAC,GACEP,KAAKQ,gB,CAGP,gBAAAC,GACE,GAAIT,KAAKU,aAAeV,KAAKU,UAAUC,aAAc,CACnDX,KAAKU,UAAUC,aAAaX,KAAKC,QAAQW,W,EAW7C,gBAAAC,GACE,GAAIb,KAAKU,aAAeV,KAAKU,UAAUC,aAAc,CACnDX,KAAKU,UAAUC,aAAaX,KAAKC,QAAQW,W,EAW9C,WAAAE,CAAYC,GACXf,KAAKgB,a,CAUL,WAAAA,GACE,IAAKhB,KAAKE,SAAU,CAClB,MAAMe,EAAa,IAAIC,WAAW,SACrClB,KAAKC,SAAWD,KAAKC,QAClBD,KAAKmB,MAAQnB,KAAKC,QAAQW,WAC7BZ,KAAKoB,MAAMC,KAAKrB,KAAKC,SAClBD,KAAKsB,OAAOC,cAAcN,E,CAE5B,OAAOO,QAAQC,S,CAUT,cAAAjB,GACNR,KAAKM,MAAQN,KAAKC,QAAU,UAAY,W,CAQlC,YAAAyB,GACN,MAAMvB,EAAOwB,EAAY3B,KAAKG,MAC9B,OAAOH,KAAKM,OACV,IAAK,UACH,OAAOsB,EAAU,YAAAC,MAAM,cAAcC,QAAS,YAAa3B,KAAMA,IACnE,QACE,OAAOyB,EAAU,YAAAC,MAAM,8BAA8BC,QAAS,aAAc3B,KAAMA,I,CAShF,WAAA4B,GACN,OAAOH,EACL,aAAAC,MAAO,eACPG,WAAYhC,KAAKgC,WACjBC,SAAUjC,KAAKI,WACfD,KAAMH,KAAKG,KACXD,SAAUF,KAAKE,U,CAInB,MAAAgC,G,MACE,OACEN,EAACO,EAAI,CAAAC,IAAA,2CAAC9B,MAAON,KAAKM,MAAOuB,MAAO7B,KAAKE,SAAW,uBAAyB,IACvE0B,EACE,OAAAQ,IAAA,2CAAAC,QAAUC,IAAetC,KAAKc,YAAYwB,EAAI,EAC9CT,MAAOU,EACL,wBACA,+BAA+BvC,KAAKG,OACpC,0CAA0CH,KAAKK,iBAC/CL,KAAKC,QAAU,sBAAwB,GACvCD,KAAKE,SAAW,uBAAyB,KAG3C0B,EAAK,OAAAQ,IAAA,2CAAAP,MAAM,cACTD,EAAA,SAAAQ,IAAA,2CACEI,KAAM,WACNvC,QAASD,KAAKC,QACdkB,MAAOnB,KAAKmB,MACZsB,IAAIC,EAAA1C,KAAKsB,UAAM,MAAAoB,SAAA,SAAAA,EAAED,GACjBvC,SAAUF,KAAKE,WAChBF,KAAK0B,gBAEP1B,KAAKgC,YAAchC,KAAK+B,e","ignoreList":[]}