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/cjs/vds-tab.cjs.entry.js ADDED Viewed

@@ -0,0 +1,136 @@
+'use strict';
+var index = require('./index-D6D5vqj8.js');
+var combineClasses = require('./combine-classes-Cs05zl1M.js');
+const vdsTabCss = "@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;box-sizing:border-box;border-radius:var(--radius-medium);height:2.25rem;width:var(--tab-width, fit-content);max-width:var(--tab-max-width)}:host .vds__tab{display:flex;flex-direction:column;align-items:center;height:2.25rem;width:var(--tab-width, fit-content);max-width:var(--tab-max-width);box-sizing:border-box;border:none;box-shadow:0 0 0 0.125rem inset transparent}:host .vds__tab:focus-visible{border-radius:var(--radius-medium);outline:0.125rem solid var(--color-border-focus-2);outline-offset:0.125rem}:host .vds__tab:hover{background-color:transparent;border-radius:var(--radius-medium)}:host .vds__tab:hover .vds__tab--label{color:var(--color-text-high)}:host .vds__tab:hover vds-icon{fill:var(--color-icon-high)}:host .vds__tab--with-action-content:focus-within~.vds__tab--with-action~.vds__tab-container~.vds__tab{border-radius:var(--radius-medium);outline:0.125rem solid var(--color-border-focus-2);outline-offset:0.125rem}:host .vds__tab--with-action-actionable{height:1.25rem;width:1.25rem}:host .vds__tab--active{border-radius:var(--radius-medium)}:host .vds__tab--active:hover{background-color:transparent}:host .vds__tab--active:hover .vds__tab--label{color:var(--color-link-default)}:host .vds__tab--active:hover vds-icon{fill:var(--color-icon-brand-default)}:host .vds__tab--disabled{pointer-events:none}:host .vds__tab--spacing{padding:var(--spacing-03) var(--spacing-00) var(--spacing-03) var(--spacing-00)}:host .vds__tab--content{display:none}:host .vds__tab--content-active{display:block;position:absolute;left:0;width:100%;cursor:auto}:host .vds__tab--spacing-between-content{padding-left:var(--spacing-03)}:host .vds__tab--label{font-family:\"Roboto Flex\", sans-serif;font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal;font-feature-settings:\"clig\" off, \"liga\" off;font-style:normal;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-wrap:nowrap}:host .vds__tab--label-default{max-width:calc(var(--tab-max-width) - 1.7rem)}:host .vds__tab--label-text{max-width:var(--tab-max-width)}:host .vds__tab--label-with-action{width:fit-content}:host .vds__tab--label-with-action-fixed-max-width{max-width:calc(var(--tab-max-width, 100%) - 3.5rem)}:host .vds__tab--label-with-action-fixed-width{width:calc(var(--tab-width, fit-content) - 3.5rem)}:host .vds__tab--label-disabled{color:var(--color-text-disabled)}:host .vds__tab--label-active{color:var(--color-link-default)}:host .vds__tab-container{align-self:flex-start;width:var(--tab-width, fit-content);height:1.25rem}:host .vds__tab--default{display:inline-flex;justify-content:center;color:var(--color-text-medium);background-color:transparent;line-height:1.25rem;width:var(--tab-width, fit-content)}:host .vds__tab--text{display:inline-flex;justify-content:center;color:var(--color-text-medium);background-color:transparent;line-height:1.25rem;width:var(--tab-width, fit-content)}:host .vds__tab--with-action{display:inline-flex;align-items:flex-start;justify-content:center;color:var(--color-text-medium);background-color:transparent;line-height:1.25rem;width:var(--tab-width, fit-content)}:host .vds__tab--with-action .vds__tab--with-action-content{display:inline-flex}:host .vds__tab--icon{display:inline-block;width:var(--tab-width, fit-content);height:1.25rem}:host .vds__tab--icon .vds__tab--icon-container{display:inline-block}:host .vds__tab--action-icon-button{display:inline-flex;height:1.25rem;width:1.25rem;box-sizing:border-box}:host .vds__tab--custom{display:inline-flex;padding:var(--spacing-01);width:var(--tab-width, fit-content)}:host(:hover){cursor:pointer}:host-context(.vds__tab--disabled){pointer-events:none}";
+const VdsTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isSelected = index.createEvent(this, "isSelected");
+        this.clicked = index.createEvent(this, "clicked");
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        /**
+         * @deprecated This property is now being overridden by the VdsTabsGroup,
+         * the activeTabIndex property is the new preferred way of setting the default tab.
+         * Sets tab to active state.
+         */
+        this.isActive = false;
+        /** Sets tab to disable state */
+        this.disabled = false;
+        /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */
+        this.type = 'default';
+    }
+    handleKeyDown(event) {
+        if (event.target.nodeName === "VDS-TAB" && event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (!this.isActive && !this.disabled) {
+                this.isActive = true;
+                this.isSelected.emit();
+            }
+        }
+    }
+    handleValueChange() {
+        this.valueChanged.emit(this.value);
+    }
+    generateIcon() {
+        const iconToUse = this.informativeIcon ? this.informativeIcon : this.icon ? this.icon : null;
+        if (iconToUse) {
+            return (index.h("span", { class: "vds__tab--icon-container" }, index.h("vds-icon", { svgIcon: iconToUse, color: this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-default' : 'color-icon-medium', size: "1.25rem" })));
+        }
+        else {
+            console.warn('Tab component warning: You must set the property informativeIcon to show the icon on the left side when you use default type.');
+        }
+    }
+    generateActionIconButton() {
+        if (this.actionIcon) {
+            return (index.h("span", { class: "vds__tab--action-icon-button" }, index.h("vds-icon-button", { icon: this.actionIcon, variant: "tertiary", size: "small", setAriaLabel: this.actionAriaLabel, onClick: (evt) => {
+                    this.handleActionIconClick(evt);
+                }, disabled: this.disabled })));
+        }
+        else {
+            console.warn('Tab component warning: You must set the property actionIcon to use the tab type withAction.');
+        }
+    }
+    generateLabel() {
+        if ((this.value === undefined || this.value === '') && this.type !== 'icon') {
+            console.warn('Tab component warning: You must set the property value to use the tab type default, text or withAction.');
+        }
+        return (index.h("span", { class: combineClasses.combineClasses('vds__tab--label', this.isActive ? 'vds__tab--label-active' : '', this.disabled ? 'vds__tab--label-disabled' : '', this.type === 'default' ? 'vds__tab--label-default' : '', this.type === 'text' ? 'vds__tab--label-text' : '', this.type === 'withAction' ? 'vds__tab--label-with-action' : '', this.type === 'withAction' && this.width ? 'vds__tab--label-with-action-fixed-width' : '', this.type === 'withAction' && this.maxWidth ? 'vds__tab--label-with-action-fixed-max-width' : '') }, this.value));
+    }
+    generateTypeDefault() {
+        return (index.h("div", { class: "vds__tab--default" }, this.generateIcon(), index.h("span", { class: "vds__tab--spacing-between-content" }), this.generateLabel()));
+    }
+    generateTypeIcon() {
+        return (index.h("div", { class: "vds__tab--icon" }, this.generateIcon()));
+    }
+    generateTypeWithAction() {
+        return (index.h("div", { class: "vds__tab--with-action" }, index.h("div", { class: "vds__tab--with-action-content", tabindex: this.disabled ? "-1" : "0" }, this.generateIcon(), index.h("span", { class: "vds__tab--spacing-between-content" }), this.generateLabel(), index.h("span", { class: "vds__tab--spacing-between-content" })), index.h("div", { class: "vds__tab--with-action-actionable" }, this.generateActionIconButton())));
+    }
+    generateTypeCustom() {
+        return (index.h("div", { class: "vds__tab--custom" }, index.h("slot", { name: "tab-header-content" })));
+    }
+    generateTypeText() {
+        return (index.h("div", { class: "vds__tab--text" }, this.generateLabel()));
+    }
+    // getType: return the formatted content
+    getType() {
+        switch (this.type) {
+            case 'default': {
+                return this.generateTypeDefault();
+            }
+            case 'icon': {
+                return this.generateTypeIcon();
+            }
+            case 'withAction': {
+                return this.generateTypeWithAction();
+            }
+            case 'custom': {
+                return this.generateTypeCustom();
+            }
+            case 'text': {
+                return this.generateTypeText();
+            }
+        }
+    }
+    handleClick(evt) {
+        if (!this.isActive && !this.disabled) {
+            this.isActive = true;
+            this.isSelected.emit(evt);
+        }
+    }
+    handleActionIconClick(evt) {
+        if (this.type === 'withAction') {
+            evt.stopPropagation();
+            this.clicked.emit(evt);
+        }
+    }
+    // setStyle define the width depending the properties prioritizing the width over the maxWidth
+    setStyle() {
+        if (this.width) {
+            return { '--tab-width': this.width };
+        }
+        else if (this.maxWidth) {
+            return { '--tab-max-width': this.maxWidth };
+        }
+        else {
+            return {};
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e2ee87ae6558616c2ede1684f748f3c08e4d2468', style: this.setStyle(), class: this.disabled ? 'vds__tab--disabled' : '' }, index.h("div", { key: '2a83cef4c92324ebb68f9551bb880e5d8b9ec782', class: combineClasses.combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : ''), role: "tab", "aria-label": this.setAriaLabel ? this.setAriaLabel : this.value, tabindex: this.disabled ? "-1" : "0", onClick: (evt) => {
+                this.handleClick(evt);
+            } }, index.h("div", { key: '084df0fbd0b43092f5dd9f902033dc505bdca23d', class: "vds__tab-container" }, this.getType())), index.h("div", { key: 'f394e57f852d59f257ddf263853409ca94707547', class: this.isActive ? 'vds__tab--content-active' : 'vds__tab--content' }, index.h("slot", { key: 'e1827ac7b7b81b4d11e4f30005d9015090349f85', name: "tab-content" }))));
+    }
+    get hostEl() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+VdsTab.style = vdsTabCss;
+exports.vds_tab = VdsTab;
+//# sourceMappingURL=vds-tab.entry.cjs.js.map
+//# sourceMappingURL=vds-tab.cjs.entry.js.map

package/dist/cjs/vds-tab.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"vds-tab.entry.cjs.js","mappings":"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","names":["h","combineClasses","Host"],"sources":["src/components/tab/vds-tab.scss?tag=vds-tab&encapsulation=shadow","src/components/tab/vds-tab.tsx"],"sourcesContent":["@import \"~@volt/volt-foundations/dist/volt-foundations/volt-foundations\";\n:host {\n display: block;\n box-sizing: border-box;\n border-radius: var(--radius-medium); \n height: 2.25rem;\n width: var(--tab-width, fit-content);\n @if (--tab-max-width) {\n max-width: var(--tab-max-width);\n }\n .vds__tab {\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 2.25rem;\n width: var(--tab-width, fit-content);\n @if (--tab-max-width) {\n max-width: var(--tab-max-width);\n } \n box-sizing: border-box;\n border: none;\n box-shadow: 0 0 0 0.125rem inset transparent;\n &:focus-visible {\n border-radius: var(--radius-medium);\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n }\n &:hover {\n background-color: transparent;\n border-radius: var(--radius-medium);\n .vds__tab--label{\n color: var(--color-text-high);\n }\n vds-icon {\n fill: var(--color-icon-high);\n }\n } \n }\n .vds__tab--with-action-content{\n &:focus-within{\n ~ .vds__tab--with-action ~ .vds__tab-container ~ .vds__tab {\n border-radius: var(--radius-medium);\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n }\n }\n }\n .vds__tab--with-action-actionable{\n height: 1.25rem;\n width: 1.25rem; \n }\n .vds__tab--active {\n border-radius: var(--radius-medium);\n &:hover {\n background-color: transparent;\n .vds__tab--label{\n color: var(--color-link-default);\n }\n vds-icon {\n fill: var(--color-icon-brand-default);\n }\n } \n }\n .vds__tab--disabled {\n pointer-events: none;\n }\n .vds__tab--spacing {\n padding: var(--spacing-03) var(--spacing-00) var(--spacing-03) var(--spacing-00);\n }\n .vds__tab--content {\n display: none;\n }\n .vds__tab--content-active {\n display: block;\n position: absolute;\n left: 0;\n width: 100%;\n cursor: auto;\n }\n .vds__tab--spacing-between-content {\n padding-left: var(--spacing-03);\n }\n .vds__tab--label {\n @include font-style(title, small);\n font-feature-settings: 'clig' off, 'liga' off;\n font-style: normal;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-wrap: nowrap;\n }\n .vds__tab--label-default {\n @if (--tab-max-width) {\n max-width: calc(var(--tab-max-width) - 1.70rem);\n }\n }\n .vds__tab--label-text {\n @if (--tab-max-width) {\n max-width: var(--tab-max-width);\n }\n }\n .vds__tab--label-with-action{\n width: fit-content;\n }\n .vds__tab--label-with-action-fixed-max-width{\n @if(--tab-max-width){\n max-width: calc(var(--tab-max-width, 100%) - 3.5rem);\n }\n }\n .vds__tab--label-with-action-fixed-width{\n @if(--tab-width) {\n width: calc(var(--tab-width, fit-content) - 3.5rem);\n }\n }\n .vds__tab--label-disabled {\n color: var(--color-text-disabled);\n }\n .vds__tab--label-active {\n color: var(--color-link-default);\n }\n .vds__tab-container {\n align-self: flex-start;\n width: var(--tab-width, fit-content);\n height: 1.25rem;\n }\n .vds__tab--default {\n display: inline-flex;\n justify-content: center;\n color: var(--color-text-medium);\n background-color: transparent;\n line-height: 1.25rem;\n width: var(--tab-width, fit-content);\n }\n\n .vds__tab--text {\n display: inline-flex;\n justify-content: center;\n color: var(--color-text-medium);\n background-color: transparent;\n line-height: 1.25rem;\n width: var(--tab-width, fit-content);\n }\n\n .vds__tab--with-action {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n color: var(--color-text-medium);\n background-color: transparent;\n line-height: 1.25rem;\n width: var(--tab-width, fit-content);\n .vds__tab--with-action-content {\n display: inline-flex;\n }\n }\n .vds__tab--icon {\n display: inline-block;\n width: var(--tab-width, fit-content);\n height: 1.25rem;\n .vds__tab--icon-container {\n display: inline-block;\n }\n }\n \n .vds__tab--action-icon-button {\n display: inline-flex;\n height: 1.25rem;\n width: 1.25rem;\n box-sizing: border-box;\n }\n\n .vds__tab--custom {\n display: inline-flex;\n padding: var(--spacing-01);\n width: var(--tab-width, fit-content);\n }\n}\n:host(:hover) {\n cursor: pointer;\n}\n\n:host-context(.vds__tab--disabled) {\n pointer-events: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Element, Listen, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n tag: 'vds-tab',\n styleUrl: 'vds-tab.scss',\n shadow: true,\n})\nexport class VdsTab {\n @Element() hostEl: HTMLElement;\n /** Sets tab title. The value of this property is used by default as an aria-label too. */\n @Prop() value: string;\n /** \n * @deprecated This property is now being overridden by the VdsTabsGroup, \n * the activeTabIndex property is the new preferred way of setting the default tab. \n * Sets tab to active state.\n */\n @Prop({ mutable: true, reflect: true }) isActive: boolean = false;\n /** Sets tab to disable state */\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n /** \n * @deprecated This property is being replaced by informativeIcon. \n * Sets tab icon. The tab icon is only a visual representation. \n */\n @Prop({ mutable: true }) icon?: string;\n /** Sets tab icon. The tab icon is only a visual representation. */\n @Prop({ mutable: true }) informativeIcon?: string;\n /** Sets tab fixed width. This property can't be used at the same time with the property maxWidth */\n @Prop({ mutable: true }) width: string;\n /** Sets tab maxWidth. This property can't be used at the same time with the property width */\n @Prop({ mutable: true }) maxWidth: string;\n /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */\n @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom'= 'default';\n /** Sets tab action icon button. Only available selecting withAction type. */\n @Prop({ mutable: true }) actionIcon: string;\n /** Sets tab action icon button aria-label*/\n @Prop({ mutable: true }) actionAriaLabel: string;\n /** Set aria-label for the tab. This property will be used only if the aria-label is required to be different from the value property. */\n @Prop({ mutable: true }) setAriaLabel: string;\n /** Emits event when the tab is selected (sets isActive prop to true) */\n @Event() isSelected: EventEmitter<MouseEvent>;\n /** Emits event when the action icon button is clicked */\n @Event() clicked: EventEmitter<MouseEvent>;\n /** Emits event when the value is changed */\n @Event() valueChanged: EventEmitter<string>;\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if ((event.target as HTMLElement).nodeName === \"VDS-TAB\" && event.key === 'Enter' || event.key === ' ') {\n event.preventDefault(); \n if (!this.isActive && !this.disabled) {\n this.isActive = true;\n this.isSelected.emit();\n }\n }\n }\n\n @Watch('value')\n handleValueChange() {\n this.valueChanged.emit(this.value);\n }\n\n private generateIcon() {\n const iconToUse = this.informativeIcon ? this.informativeIcon : this.icon? this.icon : null;\n if (iconToUse) {\n return (\n <span class=\"vds__tab--icon-container\">\n <vds-icon \n svgIcon={iconToUse} \n color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-default' : 'color-icon-medium'}\n size=\"1.25rem\">\n </vds-icon>\n </span>\n );\n } else {\n console.warn('Tab component warning: You must set the property informativeIcon to show the icon on the left side when you use default type.');\n }\n }\n\n private generateActionIconButton() {\n if (this.actionIcon) {\n return (\n <span class=\"vds__tab--action-icon-button\">\n <vds-icon-button\n icon={this.actionIcon}\n variant=\"tertiary\"\n size=\"small\"\n setAriaLabel={this.actionAriaLabel}\n onClick={(evt: MouseEvent) => {\n this.handleActionIconClick(evt);\n }}\n disabled={this.disabled}\n ></vds-icon-button>\n </span>\n );\n } else {\n console.warn('Tab component warning: You must set the property actionIcon to use the tab type withAction.');\n }\n }\n private generateLabel() {\n if ((this.value === undefined || this.value === '') && this.type !== 'icon') {\n console.warn('Tab component warning: You must set the property value to use the tab type default, text or withAction.');\n } \n return (\n <span class={\n combineClasses(\n 'vds__tab--label', this.isActive ? 'vds__tab--label-active' : '', this.disabled ? 'vds__tab--label-disabled' : '',\n this.type==='default' ? 'vds__tab--label-default' : '',\n this.type==='text' ? 'vds__tab--label-text' : '',\n this.type==='withAction' ? 'vds__tab--label-with-action' : '',\n this.type==='withAction' && this.width ? 'vds__tab--label-with-action-fixed-width' : '',\n this.type==='withAction' && this.maxWidth ? 'vds__tab--label-with-action-fixed-max-width' : ''\n )}\n >\n {this.value}\n </span>\n );\n }\n private generateTypeDefault() {\n return (\n <div class=\"vds__tab--default\">\n {this.generateIcon()}\n <span class=\"vds__tab--spacing-between-content\"></span>\n {this.generateLabel()}\n </div>\n );\n }\n private generateTypeIcon() {\n return (\n <div class=\"vds__tab--icon\">{this.generateIcon()}</div>\n );\n }\n\n private generateTypeWithAction() {\n return (\n <div class=\"vds__tab--with-action\">\n <div class=\"vds__tab--with-action-content\" tabindex={this.disabled ? \"-1\" :\"0\"}>\n {this.generateIcon()}\n <span class=\"vds__tab--spacing-between-content\"></span>\n {this.generateLabel()}\n <span class=\"vds__tab--spacing-between-content\"></span>\n </div>\n <div class=\"vds__tab--with-action-actionable\">\n {this.generateActionIconButton()}\n </div>\n </div>\n );\n }\n private generateTypeCustom() {\n return (\n <div class=\"vds__tab--custom\">\n <slot name=\"tab-header-content\"></slot>\n </div>\n );\n }\n private generateTypeText() {\n return (\n <div class=\"vds__tab--text\">\n {this.generateLabel()}\n </div>\n );\n }\n // getType: return the formatted content\n private getType() {\n switch (this.type) {\n case 'default': {\n return this.generateTypeDefault();\n }\n case 'icon': {\n return this.generateTypeIcon();\n }\n case 'withAction': {\n return this.generateTypeWithAction();\n }\n case 'custom': {\n return this.generateTypeCustom();\n }\n case 'text': {\n return this.generateTypeText();\n }\n }\n }\n private handleClick(evt: MouseEvent): void {\n if (!this.isActive && !this.disabled) {\n this.isActive = true;\n this.isSelected.emit(evt);\n }\n }\n private handleActionIconClick(evt: MouseEvent): void {\n if (this.type === 'withAction') {\n evt.stopPropagation();\n this.clicked.emit(evt);\n }\n }\n \n // setStyle define the width depending the properties prioritizing the width over the maxWidth\n private setStyle() {\n if (this.width) {\n return { '--tab-width': this.width };\n } else if (this.maxWidth) {\n return { '--tab-max-width': this.maxWidth };\n } else {\n return {};\n }\n }\n\n render() {\n return (\n <Host style={this.setStyle()} class={this.disabled ? 'vds__tab--disabled' : ''}>\n <div\n class={combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : '')}\n role=\"tab\"\n aria-label={this.setAriaLabel ? this.setAriaLabel : this.value}\n tabindex={this.disabled ? \"-1\" :\"0\"}\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n >\n <div class=\"vds__tab-container\">\n {this.getType()}\n </div>\n </div>\n <div class={this.isActive ? 'vds__tab--content-active' : 'vds__tab--content'}>\n <slot name=\"tab-content\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/vds-tab.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"vds-tab.entry.cjs.js","sources":["src/components/tab/vds-tab.scss?tag=vds-tab&encapsulation=shadow","src/components/tab/vds-tab.tsx"],"sourcesContent":["@import \"~@volt/volt-foundations/dist/volt-foundations/volt-foundations\";\n:host {\n display: block;\n box-sizing: border-box;\n border-radius: var(--radius-medium); \n height: 2.25rem;\n width: var(--tab-width, fit-content);\n @if (--tab-max-width) {\n max-width: var(--tab-max-width);\n }\n .vds__tab {\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 2.25rem;\n width: var(--tab-width, fit-content);\n @if (--tab-max-width) {\n max-width: var(--tab-max-width);\n } \n box-sizing: border-box;\n border: none;\n box-shadow: 0 0 0 0.125rem inset transparent;\n &:focus-visible {\n border-radius: var(--radius-medium);\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n }\n &:hover {\n background-color: transparent;\n border-radius: var(--radius-medium);\n .vds__tab--label{\n color: var(--color-text-high);\n }\n vds-icon {\n fill: var(--color-icon-high);\n }\n } \n }\n .vds__tab--with-action-content{\n &:focus-within{\n ~ .vds__tab--with-action ~ .vds__tab-container ~ .vds__tab {\n border-radius: var(--radius-medium);\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n }\n }\n }\n .vds__tab--with-action-actionable{\n height: 1.25rem;\n width: 1.25rem; \n }\n .vds__tab--active {\n border-radius: var(--radius-medium);\n &:hover {\n background-color: transparent;\n .vds__tab--label{\n color: var(--color-link-default);\n }\n vds-icon {\n fill: var(--color-icon-brand-default);\n }\n } \n }\n .vds__tab--disabled {\n pointer-events: none;\n }\n .vds__tab--spacing {\n padding: var(--spacing-03) var(--spacing-00) var(--spacing-03) var(--spacing-00);\n }\n .vds__tab--content {\n display: none;\n }\n .vds__tab--content-active {\n display: block;\n position: absolute;\n left: 0;\n width: 100%;\n cursor: auto;\n }\n .vds__tab--spacing-between-content {\n padding-left: var(--spacing-03);\n }\n .vds__tab--label {\n @include font-style(title, small);\n font-feature-settings: 'clig' off, 'liga' off;\n font-style: normal;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-wrap: nowrap;\n }\n .vds__tab--label-default {\n @if (--tab-max-width) {\n max-width: calc(var(--tab-max-width) - 1.70rem);\n }\n }\n .vds__tab--label-text {\n @if (--tab-max-width) {\n max-width: var(--tab-max-width);\n }\n }\n .vds__tab--label-with-action{\n width: fit-content;\n }\n .vds__tab--label-with-action-fixed-max-width{\n @if(--tab-max-width){\n max-width: calc(var(--tab-max-width, 100%) - 3.5rem);\n }\n }\n .vds__tab--label-with-action-fixed-width{\n @if(--tab-width) {\n width: calc(var(--tab-width, fit-content) - 3.5rem);\n }\n }\n .vds__tab--label-disabled {\n color: var(--color-text-disabled);\n }\n .vds__tab--label-active {\n color: var(--color-link-default);\n }\n .vds__tab-container {\n align-self: flex-start;\n width: var(--tab-width, fit-content);\n height: 1.25rem;\n }\n .vds__tab--default {\n display: inline-flex;\n justify-content: center;\n color: var(--color-text-medium);\n background-color: transparent;\n line-height: 1.25rem;\n width: var(--tab-width, fit-content);\n }\n\n .vds__tab--text {\n display: inline-flex;\n justify-content: center;\n color: var(--color-text-medium);\n background-color: transparent;\n line-height: 1.25rem;\n width: var(--tab-width, fit-content);\n }\n\n .vds__tab--with-action {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n color: var(--color-text-medium);\n background-color: transparent;\n line-height: 1.25rem;\n width: var(--tab-width, fit-content);\n .vds__tab--with-action-content {\n display: inline-flex;\n }\n }\n .vds__tab--icon {\n display: inline-block;\n width: var(--tab-width, fit-content);\n height: 1.25rem;\n .vds__tab--icon-container {\n display: inline-block;\n }\n }\n \n .vds__tab--action-icon-button {\n display: inline-flex;\n height: 1.25rem;\n width: 1.25rem;\n box-sizing: border-box;\n }\n\n .vds__tab--custom {\n display: inline-flex;\n padding: var(--spacing-01);\n width: var(--tab-width, fit-content);\n }\n}\n:host(:hover) {\n cursor: pointer;\n}\n\n:host-context(.vds__tab--disabled) {\n pointer-events: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Element, Listen, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n tag: 'vds-tab',\n styleUrl: 'vds-tab.scss',\n shadow: true,\n})\nexport class VdsTab {\n @Element() hostEl: HTMLElement;\n /** Sets tab title. The value of this property is used by default as an aria-label too. */\n @Prop() value: string;\n /** \n * @deprecated This property is now being overridden by the VdsTabsGroup, \n * the activeTabIndex property is the new preferred way of setting the default tab. \n * Sets tab to active state.\n */\n @Prop({ mutable: true, reflect: true }) isActive: boolean = false;\n /** Sets tab to disable state */\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n /** \n * @deprecated This property is being replaced by informativeIcon. \n * Sets tab icon. The tab icon is only a visual representation. \n */\n @Prop({ mutable: true }) icon?: string;\n /** Sets tab icon. The tab icon is only a visual representation. */\n @Prop({ mutable: true }) informativeIcon?: string;\n /** Sets tab fixed width. This property can't be used at the same time with the property maxWidth */\n @Prop({ mutable: true }) width: string;\n /** Sets tab maxWidth. This property can't be used at the same time with the property width */\n @Prop({ mutable: true }) maxWidth: string;\n /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */\n @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom'= 'default';\n /** Sets tab action icon button. Only available selecting withAction type. */\n @Prop({ mutable: true }) actionIcon: string;\n /** Sets tab action icon button aria-label*/\n @Prop({ mutable: true }) actionAriaLabel: string;\n /** Set aria-label for the tab. This property will be used only if the aria-label is required to be different from the value property. */\n @Prop({ mutable: true }) setAriaLabel: string;\n /** Emits event when the tab is selected (sets isActive prop to true) */\n @Event() isSelected: EventEmitter<MouseEvent>;\n /** Emits event when the action icon button is clicked */\n @Event() clicked: EventEmitter<MouseEvent>;\n /** Emits event when the value is changed */\n @Event() valueChanged: EventEmitter<string>;\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if ((event.target as HTMLElement).nodeName === \"VDS-TAB\" && event.key === 'Enter' || event.key === ' ') {\n event.preventDefault(); \n if (!this.isActive && !this.disabled) {\n this.isActive = true;\n this.isSelected.emit();\n }\n }\n }\n\n @Watch('value')\n handleValueChange() {\n this.valueChanged.emit(this.value);\n }\n\n private generateIcon() {\n const iconToUse = this.informativeIcon ? this.informativeIcon : this.icon? this.icon : null;\n if (iconToUse) {\n return (\n <span class=\"vds__tab--icon-container\">\n <vds-icon \n svgIcon={iconToUse} \n color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-default' : 'color-icon-medium'}\n size=\"1.25rem\">\n </vds-icon>\n </span>\n );\n } else {\n console.warn('Tab component warning: You must set the property informativeIcon to show the icon on the left side when you use default type.');\n }\n }\n\n private generateActionIconButton() {\n if (this.actionIcon) {\n return (\n <span class=\"vds__tab--action-icon-button\">\n <vds-icon-button\n icon={this.actionIcon}\n variant=\"tertiary\"\n size=\"small\"\n setAriaLabel={this.actionAriaLabel}\n onClick={(evt: MouseEvent) => {\n this.handleActionIconClick(evt);\n }}\n disabled={this.disabled}\n ></vds-icon-button>\n </span>\n );\n } else {\n console.warn('Tab component warning: You must set the property actionIcon to use the tab type withAction.');\n }\n }\n private generateLabel() {\n if ((this.value === undefined || this.value === '') && this.type !== 'icon') {\n console.warn('Tab component warning: You must set the property value to use the tab type default, text or withAction.');\n } \n return (\n <span class={\n combineClasses(\n 'vds__tab--label', this.isActive ? 'vds__tab--label-active' : '', this.disabled ? 'vds__tab--label-disabled' : '',\n this.type==='default' ? 'vds__tab--label-default' : '',\n this.type==='text' ? 'vds__tab--label-text' : '',\n this.type==='withAction' ? 'vds__tab--label-with-action' : '',\n this.type==='withAction' && this.width ? 'vds__tab--label-with-action-fixed-width' : '',\n this.type==='withAction' && this.maxWidth ? 'vds__tab--label-with-action-fixed-max-width' : ''\n )}\n >\n {this.value}\n </span>\n );\n }\n private generateTypeDefault() {\n return (\n <div class=\"vds__tab--default\">\n {this.generateIcon()}\n <span class=\"vds__tab--spacing-between-content\"></span>\n {this.generateLabel()}\n </div>\n );\n }\n private generateTypeIcon() {\n return (\n <div class=\"vds__tab--icon\">{this.generateIcon()}</div>\n );\n }\n\n private generateTypeWithAction() {\n return (\n <div class=\"vds__tab--with-action\">\n <div class=\"vds__tab--with-action-content\" tabindex={this.disabled ? \"-1\" :\"0\"}>\n {this.generateIcon()}\n <span class=\"vds__tab--spacing-between-content\"></span>\n {this.generateLabel()}\n <span class=\"vds__tab--spacing-between-content\"></span>\n </div>\n <div class=\"vds__tab--with-action-actionable\">\n {this.generateActionIconButton()}\n </div>\n </div>\n );\n }\n private generateTypeCustom() {\n return (\n <div class=\"vds__tab--custom\">\n <slot name=\"tab-header-content\"></slot>\n </div>\n );\n }\n private generateTypeText() {\n return (\n <div class=\"vds__tab--text\">\n {this.generateLabel()}\n </div>\n );\n }\n // getType: return the formatted content\n private getType() {\n switch (this.type) {\n case 'default': {\n return this.generateTypeDefault();\n }\n case 'icon': {\n return this.generateTypeIcon();\n }\n case 'withAction': {\n return this.generateTypeWithAction();\n }\n case 'custom': {\n return this.generateTypeCustom();\n }\n case 'text': {\n return this.generateTypeText();\n }\n }\n }\n private handleClick(evt: MouseEvent): void {\n if (!this.isActive && !this.disabled) {\n this.isActive = true;\n this.isSelected.emit(evt);\n }\n }\n private handleActionIconClick(evt: MouseEvent): void {\n if (this.type === 'withAction') {\n evt.stopPropagation();\n this.clicked.emit(evt);\n }\n }\n \n // setStyle define the width depending the properties prioritizing the width over the maxWidth\n private setStyle() {\n if (this.width) {\n return { '--tab-width': this.width };\n } else if (this.maxWidth) {\n return { '--tab-max-width': this.maxWidth };\n } else {\n return {};\n }\n }\n\n render() {\n return (\n <Host style={this.setStyle()} class={this.disabled ? 'vds__tab--disabled' : ''}>\n <div\n class={combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : '')}\n role=\"tab\"\n aria-label={this.setAriaLabel ? this.setAriaLabel : this.value}\n tabindex={this.disabled ? \"-1\" :\"0\"}\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n >\n <div class=\"vds__tab-container\">\n {this.getType()}\n </div>\n </div>\n <div class={this.isActive ? 'vds__tab--content-active' : 'vds__tab--content'}>\n <slot name=\"tab-content\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","combineClasses","Host"],"mappings":"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"}

package/dist/cjs/vds-tabs-group.cjs.entry.js ADDED Viewed

@@ -0,0 +1,171 @@
+'use strict';
+var index = require('./index-D6D5vqj8.js');
+var combineClasses = require('./combine-classes-Cs05zl1M.js');
+const vdsTabsGroupCss = "@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 VdsTabsGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Sets the type for the tabs group */
+        this.type = 'default';
+        /** Sets the alignment for the tabs */
+        this.tabAlignment = 'flex-start';
+        /** Shows the indicator track under the tab*/
+        this.showTrack = false;
+        /** Sets the index to select the active tab inside the group.
+         * If not specified, loads the first tab.
+         */
+        this.activeTabIndex = 0;
+        /** Sets tab group to disable state */
+        this.disabled = false;
+        this.internalActiveTabIndex = 0;
+        this.tabs = [];
+    }
+    handleTabSelection(evt) {
+        const target = evt.target;
+        this.internalActiveTabIndex = Number(target === null || target === void 0 ? void 0 : target.getAttribute('vds-tabindex')) || 0;
+        this.activeTabIndex = this.internalActiveTabIndex;
+        this.updateTabsState(this.tabs);
+    }
+    handleValueChanged() {
+        this.updateIndicatorPosition();
+        index.forceUpdate(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 (e) {
+            console.error('componentWillLoad Error: ', e);
+        }
+    }
+    componentDidRender() {
+        if (this.tabs.length > 0) {
+            this.observeActiveTabContent();
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    observeActiveTabContent() {
+        var _a;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.activeTab) {
+            const content = (_a = this.activeTab.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.vds__tab--content-active');
+            if (content) {
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.defineAttributes();
+                    this.updateIndicatorPosition();
+                });
+                this.resizeObserver.observe(content);
+            }
+        }
+    }
+    handleActiveTabIndexChange() {
+        this.updateTabsState(this.tabs);
+    }
+    setDisabledState() {
+        (this.tabs || []).forEach(tab => {
+            tab.disabled = this.disabled;
+        });
+    }
+    /**
+     * Gets the currently active tab index
+     *
+     * @returns {Promise<number>} A promise that resolves with the active tab index.
+     */
+    async getActive() {
+        return this.internalActiveTabIndex;
+    }
+    /**
+     * Sets the active tab index
+     *
+     * @param {number} index - The index of the tab to set as active.
+     */
+    async setActive(index) {
+        this.setActiveTab(index);
+    }
+    setActiveTab(index) {
+        if (this.tabs.length > 0) {
+            this.internalActiveTabIndex = this.validateTabIndex(index);
+            this.activeTabIndex = this.internalActiveTabIndex;
+        }
+    }
+    validateTabIndex(index) {
+        var _a;
+        const isValidIndex = index >= 0 && index < this.tabs.length;
+        const isEnabled = isValidIndex && !((_a = this.tabs[index]) === null || _a === void 0 ? void 0 : _a.disabled);
+        if (isValidIndex && isEnabled) {
+            return index;
+        }
+        const firstEnabledIndex = this.tabs.findIndex(tab => !tab.disabled);
+        return firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
+    }
+    defineAttributes() {
+        var _a;
+        if (this.activeTab && this.tabsGroupContainer) {
+            const content = (_a = this.activeTab.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.vds__tab--content-active');
+            if (content) {
+                this.hostEl.setAttribute('style', `height: ${this.tabsGroupContainer.offsetHeight + content.offsetHeight}px`);
+            }
+        }
+    }
+    updateIndicatorPosition() {
+        if (this.activeTab && this.indicatorEl) {
+            const tabLeft = this.activeTab.offsetLeft;
+            const tabWidth = this.activeTab.offsetWidth;
+            const parentLeft = this.indicatorEl.parentElement.offsetLeft;
+            this.indicatorEl.style.left = `${tabLeft - parentLeft}px`;
+            this.indicatorEl.style.width = `${tabWidth}px`;
+        }
+    }
+    renderActiveTabIndicator() {
+        return this.activeTab && (index.h("div", { class: "vds__tabs-group--active-tab-indicator", ref: (el) => (this.indicatorEl = el) }));
+    }
+    updateTabsState(tabs) {
+        this.internalActiveTabIndex = this.validateTabIndex(this.activeTabIndex);
+        tabs.forEach((tab, tabIndex) => {
+            const isActiveTab = tabIndex === this.internalActiveTabIndex && !tab.disabled;
+            tab.isActive = isActiveTab;
+            if (isActiveTab) {
+                this.activeTab = tab;
+                this.updateIndicatorPosition();
+            }
+            tab.setAttribute('vds-tabindex', `${tabIndex}`);
+            tab.type = this.type;
+            tab.width = this.width;
+            tab.maxWidth = this.maxWidth;
+        });
+        this.defineAttributes();
+    }
+    render() {
+        return (index.h(index.Host, { key: '76bdfd7b81e08a0b1dd0e728986f1b006d47680d', class: this.disabled ? 'vds__tabs-group--disabled' : '' }, index.h("div", { key: 'b1d420eb1c561e3d2b5edb7ce81dfc06cd077377', ref: (el) => {
+                if (!el)
+                    return;
+                this.tabsGroupContainer = el;
+            }, class: "vds__tabs-group" }, index.h("div", { key: '3702b48c6dfa2757f8c31c7e6dda03ba578d302f', class: combineClasses.combineClasses('vds__tabs-group--header', 'vds__tabs-group--header-tabs-' + this.tabAlignment, this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : '') }, index.h("div", { key: 'cdc273f03dab09fb375ce2a809948ab45273b3bd', class: "vds__tabs-group--header-content" }, index.h("slot", { key: 'ffe7399a3d5f31121df4c2b1157763e5d5e4e0b5', name: "header-content" })), index.h("div", { key: 'b1212f299317b12b48f12e6836963ae63a631a2a', class: "vds__tabs-group--header-tabs-nav", role: "tablist" }, index.h("slot", { key: 'd5ea7e292a327c8523aab29b299a4fab93a9eecb', name: "tab-list" })), this.renderActiveTabIndicator()))));
+    }
+    get hostEl() { return index.getElement(this); }
+    static get watchers() { return {
+        "activeTabIndex": ["handleActiveTabIndexChange"],
+        "disabled": ["setDisabledState"]
+    }; }
+};
+VdsTabsGroup.style = vdsTabsGroupCss;
+exports.vds_tabs_group = VdsTabsGroup;
+//# sourceMappingURL=vds-tabs-group.entry.cjs.js.map
+//# sourceMappingURL=vds-tabs-group.cjs.entry.js.map

package/dist/cjs/vds-tabs-group.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"vds-tabs-group.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host","combineClasses"],"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"],"version":3}

package/dist/cjs/vds-tabs-group.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"vds-tabs-group.entry.cjs.js","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"],"names":["forceUpdate","h","Host","combineClasses"],"mappings":"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"}