@lucca-front/ng 22.1.0 → 22.1.1

package/fesm2022/lucca-front-ng-priority-level.mjs

@@ -0,0 +1,128 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { luNumberAttribute, intlInputOptions } from '@lucca-front/ng/core';
+import { IconComponent } from '@lucca-front/ng/icon';
+import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
+
+const Translations = {
+    en: {
+        low: 'Low',
+        medium: 'Medium',
+        high: 'High',
+    },
+    de: {
+        low: 'Niedrig',
+        medium: 'Mittel',
+        high: 'Hoch',
+    },
+    fr: {
+        low: 'Basse',
+        medium: 'Moyenne',
+        high: 'Haute',
+    },
+    it: {
+        low: 'Bassa',
+        medium: 'Media',
+        high: 'Alta',
+    },
+    nl: {
+        low: 'Laag',
+        medium: 'Gemiddeld',
+        high: 'Hoog',
+    },
+    'nl-BE': {
+        low: 'Laag',
+        medium: 'Gemiddeld',
+        high: 'Hoog',
+    },
+    es: {
+        low: 'Baja',
+        medium: 'Media',
+        high: 'Alta',
+    },
+    pt: {
+        low: 'Baixa',
+        medium: 'Média',
+        high: 'Alta',
+    },
+    pl: {
+        low: 'Niski',
+        medium: 'Średni',
+        high: 'Wysoki',
+    },
+};
+
+const LU_PRIORITY_LEVEL_TRANSLATIONS = new InjectionToken('luPriorityLevelTranslations', {
+    factory: () => luPriorityLevelTranslations,
+});
+const luPriorityLevelTranslations = Translations;
+
+const LEVEL_TRANSLATION_KEYS = {
+    1: 'low',
+    2: 'medium',
+    3: 'high',
+};
+class PriorityLevelComponent {
+    constructor() {
+        /**
+         * Which priority level should be displayed (1 = low, 2 = medium, 3 = high)
+         */
+        this.level = input.required({ ...(ngDevMode ? { debugName: "level" } : /* istanbul ignore next */ {}), transform: (luNumberAttribute) });
+        /**
+         * Which size should the component be? Defaults to M
+         */
+        this.size = input('M', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * Overrides for the default translations
+         */
+        this.intl = input(...intlInputOptions(LU_PRIORITY_LEVEL_TRANSLATIONS), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
+        /**
+         * Visually hides the label while keeping it in the DOM for screen readers, and shows it in a tooltip on the icon instead
+         */
+        this.hiddenLabel = input(false, { ...(ngDevMode ? { debugName: "hiddenLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.label = computed(() => this.intl()[LEVEL_TRANSLATION_KEYS[this.level()]], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.iconSize = computed(() => {
+            switch (this.size()) {
+                case 'S':
+                    return 'XXS';
+                case 'L':
+                    return 'S';
+                default:
+                    return 'XS';
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PriorityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: PriorityLevelComponent, isStandalone: true, selector: "lu-priority-level", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, hiddenLabel: { classPropertyName: "hiddenLabel", publicName: "hiddenLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-low": "level() === 1", "class.mod-medium": "level() === 2", "class.mod-high": "level() === 3", "class.mod-S": "size() === 'S'", "class.mod-L": "size() === 'L'" }, classAttribute: "priorityLevel" }, ngImport: i0, template: "<lu-icon\n\ticon=\"priorityLevels\"\n\tclass=\"priorityLevel-icon\"\n\t[size]=\"iconSize()\"\n\t[luTooltip]=\"label()\"\n\tluTooltipOnlyForDisplay\n\t[luTooltipDisabled]=\"!hiddenLabel()\"\n/>\n<span class=\"priorityLevel-label\" [class.pr-u-mask]=\"hiddenLabel()\">{{ label() }}</span>\n", styles: ["@layer components{.priorityLevel{--components-priorityLevel-font: var(--pr-t-font-body-S);--components-priorityLevel-minBlockSize: var(--pr-t-font-body-S-lineHeight);--components-priorityLevel-gap: var(--pr-t-spacings-50);--components-priorityLevel-icon-color1: var(--palettes-neutral-400);--components-priorityLevel-icon-color2: var(--palettes-neutral-400);--components-priorityLevel-icon-color3: var(--palettes-neutral-400);display:flex;align-items:center;color:var(--pr-t-color-text);font:var(--components-priorityLevel-font);gap:var(--components-priorityLevel-gap);min-block-size:var(--components-priorityLevel-minBlockSize)}.priorityLevel-icon{display:inline-flex}.priorityLevel-icon:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.priorityLevel-icon .lucca-icon:before{background:linear-gradient(to right,var(--components-priorityLevel-icon-color1) 0%,var(--components-priorityLevel-icon-color1) 33.3333333333%,var(--components-priorityLevel-icon-color2) 33.3333333333%,var(--components-priorityLevel-icon-color2) 66.6666666667%,var(--components-priorityLevel-icon-color3) 66.6666666667%,var(--components-priorityLevel-icon-color3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}}@layer mods{.priorityLevel.mod-low{--components-priorityLevel-icon-color1: var(--pr-t-color-text);--components-priorityLevel-icon-color2: var(--palettes-neutral-400);--components-priorityLevel-icon-color3: var(--palettes-neutral-400)}.priorityLevel.mod-medium{--components-priorityLevel-icon-color1: var(--palettes-warning-800);--components-priorityLevel-icon-color2: var(--palettes-warning-800);--components-priorityLevel-icon-color3: var(--palettes-neutral-400)}.priorityLevel.mod-high{--components-priorityLevel-icon-color1: var(--palettes-critical-800);--components-priorityLevel-icon-color2: var(--palettes-critical-800);--components-priorityLevel-icon-color3: var(--palettes-critical-800)}.priorityLevel.mod-S{--components-priorityLevel-font: var(--pr-t-font-body-XS);--components-priorityLevel-minBlockSize: var(--pr-t-font-body-XS-lineHeight);--components-priorityLevel-gap: var(--pr-t-spacings-25)}.priorityLevel.mod-L{--components-priorityLevel-font: var(--pr-t-font-body-M);--components-priorityLevel-minBlockSize: var(--pr-t-font-body-M-lineHeight)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "luTooltipTriggerAnchor", "prTooltipTriggerAnchor", "id"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PriorityLevelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-priority-level', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconComponent, LuTooltipTriggerDirective], host: {
+                        class: 'priorityLevel',
+                        '[class.mod-low]': 'level() === 1',
+                        '[class.mod-medium]': 'level() === 2',
+                        '[class.mod-high]': 'level() === 3',
+                        '[class.mod-S]': "size() === 'S'",
+                        '[class.mod-L]': "size() === 'L'",
+                    }, template: "<lu-icon\n\ticon=\"priorityLevels\"\n\tclass=\"priorityLevel-icon\"\n\t[size]=\"iconSize()\"\n\t[luTooltip]=\"label()\"\n\tluTooltipOnlyForDisplay\n\t[luTooltipDisabled]=\"!hiddenLabel()\"\n/>\n<span class=\"priorityLevel-label\" [class.pr-u-mask]=\"hiddenLabel()\">{{ label() }}</span>\n", styles: ["@layer components{.priorityLevel{--components-priorityLevel-font: var(--pr-t-font-body-S);--components-priorityLevel-minBlockSize: var(--pr-t-font-body-S-lineHeight);--components-priorityLevel-gap: var(--pr-t-spacings-50);--components-priorityLevel-icon-color1: var(--palettes-neutral-400);--components-priorityLevel-icon-color2: var(--palettes-neutral-400);--components-priorityLevel-icon-color3: var(--palettes-neutral-400);display:flex;align-items:center;color:var(--pr-t-color-text);font:var(--components-priorityLevel-font);gap:var(--components-priorityLevel-gap);min-block-size:var(--components-priorityLevel-minBlockSize)}.priorityLevel-icon{display:inline-flex}.priorityLevel-icon:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.priorityLevel-icon .lucca-icon:before{background:linear-gradient(to right,var(--components-priorityLevel-icon-color1) 0%,var(--components-priorityLevel-icon-color1) 33.3333333333%,var(--components-priorityLevel-icon-color2) 33.3333333333%,var(--components-priorityLevel-icon-color2) 66.6666666667%,var(--components-priorityLevel-icon-color3) 66.6666666667%,var(--components-priorityLevel-icon-color3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}}@layer mods{.priorityLevel.mod-low{--components-priorityLevel-icon-color1: var(--pr-t-color-text);--components-priorityLevel-icon-color2: var(--palettes-neutral-400);--components-priorityLevel-icon-color3: var(--palettes-neutral-400)}.priorityLevel.mod-medium{--components-priorityLevel-icon-color1: var(--palettes-warning-800);--components-priorityLevel-icon-color2: var(--palettes-warning-800);--components-priorityLevel-icon-color3: var(--palettes-neutral-400)}.priorityLevel.mod-high{--components-priorityLevel-icon-color1: var(--palettes-critical-800);--components-priorityLevel-icon-color2: var(--palettes-critical-800);--components-priorityLevel-icon-color3: var(--palettes-critical-800)}.priorityLevel.mod-S{--components-priorityLevel-font: var(--pr-t-font-body-XS);--components-priorityLevel-minBlockSize: var(--pr-t-font-body-XS-lineHeight);--components-priorityLevel-gap: var(--pr-t-spacings-25)}.priorityLevel.mod-L{--components-priorityLevel-font: var(--pr-t-font-body-M);--components-priorityLevel-minBlockSize: var(--pr-t-font-body-M-lineHeight)}}\n"] }]
+        }], propDecorators: { level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], hiddenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenLabel", required: false }] }] } });
+
+/**
+ * Available PriorityLevelComponent levels (1 = low, 2 = medium, 3 = high)
+ */
+const PRIORITY_LEVELS = [1, 2, 3];
+/**
+ * Available PriorityLevelComponent sizes
+ */
+const PRIORITY_LEVEL_SIZES = ['S', 'M', 'L'];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PRIORITY_LEVELS, PRIORITY_LEVEL_SIZES, PriorityLevelComponent };
+//# sourceMappingURL=lucca-front-ng-priority-level.mjs.map

package/fesm2022/lucca-front-ng-priority-level.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lucca-front-ng-priority-level.mjs","sources":["../../../packages/ng/priority-level/translations.ts","../../../packages/ng/priority-level/priority-level.translate.ts","../../../packages/ng/priority-level/priority-level.component.ts","../../../packages/ng/priority-level/priority-level.component.html","../../../packages/ng/priority-level/priority-level.type.ts","../../../packages/ng/priority-level/lucca-front-ng-priority-level.ts"],"sourcesContent":["export const Translations = {\n\ten: {\n\t\tlow: 'Low',\n\t\tmedium: 'Medium',\n\t\thigh: 'High',\n\t},\n\tde: {\n\t\tlow: 'Niedrig',\n\t\tmedium: 'Mittel',\n\t\thigh: 'Hoch',\n\t},\n\tfr: {\n\t\tlow: 'Basse',\n\t\tmedium: 'Moyenne',\n\t\thigh: 'Haute',\n\t},\n\tit: {\n\t\tlow: 'Bassa',\n\t\tmedium: 'Media',\n\t\thigh: 'Alta',\n\t},\n\tnl: {\n\t\tlow: 'Laag',\n\t\tmedium: 'Gemiddeld',\n\t\thigh: 'Hoog',\n\t},\n\t'nl-BE': {\n\t\tlow: 'Laag',\n\t\tmedium: 'Gemiddeld',\n\t\thigh: 'Hoog',\n\t},\n\tes: {\n\t\tlow: 'Baja',\n\t\tmedium: 'Media',\n\t\thigh: 'Alta',\n\t},\n\tpt: {\n\t\tlow: 'Baixa',\n\t\tmedium: 'Média',\n\t\thigh: 'Alta',\n\t},\n\tpl: {\n\t\tlow: 'Niski',\n\t\tmedium: 'Średni',\n\t\thigh: 'Wysoki',\n\t},\n};\n","import { InjectionToken } from '@angular/core';\nimport { LuTranslation } from '@lucca-front/ng/core';\nimport { Translations } from './translations';\n\nexport const LU_PRIORITY_LEVEL_TRANSLATIONS = new InjectionToken('luPriorityLevelTranslations', {\n\tfactory: () => luPriorityLevelTranslations,\n});\n\nexport interface PriorityLevelTranslate {\n\tlow: string;\n\tmedium: string;\n\thigh: string;\n}\n\nexport const luPriorityLevelTranslations: LuTranslation<PriorityLevelTranslate> = Translations;\n","import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { intlInputOptions, luNumberAttribute } from '@lucca-front/ng/core';\nimport { IconComponent, IconSize } from '@lucca-front/ng/icon';\nimport { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';\nimport { LU_PRIORITY_LEVEL_TRANSLATIONS } from './priority-level.translate';\nimport { PriorityLevel, PriorityLevelSize } from './priority-level.type';\n\nconst LEVEL_TRANSLATION_KEYS = {\n\t1: 'low',\n\t2: 'medium',\n\t3: 'high',\n} as const;\n\n@Component({\n\tselector: 'lu-priority-level',\n\ttemplateUrl: './priority-level.component.html',\n\tstyleUrl: './priority-level.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n\timports: [IconComponent, LuTooltipTriggerDirective],\n\thost: {\n\t\tclass: 'priorityLevel',\n\t\t'[class.mod-low]': 'level() === 1',\n\t\t'[class.mod-medium]': 'level() === 2',\n\t\t'[class.mod-high]': 'level() === 3',\n\t\t'[class.mod-S]': \"size() === 'S'\",\n\t\t'[class.mod-L]': \"size() === 'L'\",\n\t},\n})\nexport class PriorityLevelComponent {\n\t/**\n\t * Which priority level should be displayed (1 = low, 2 = medium, 3 = high)\n\t */\n\treadonly level = input.required({ transform: luNumberAttribute<PriorityLevel> });\n\n\t/**\n\t * Which size should the component be? Defaults to M\n\t */\n\treadonly size = input<PriorityLevelSize>('M');\n\n\t/**\n\t * Overrides for the default translations\n\t */\n\treadonly intl = input(...intlInputOptions(LU_PRIORITY_LEVEL_TRANSLATIONS));\n\n\t/**\n\t * Visually hides the label while keeping it in the DOM for screen readers, and shows it in a tooltip on the icon instead\n\t */\n\treadonly hiddenLabel = input(false, { transform: booleanAttribute });\n\n\treadonly label = computed(() => this.intl()[LEVEL_TRANSLATION_KEYS[this.level()]]);\n\n\treadonly iconSize = computed<IconSize>(() => {\n\t\tswitch (this.size()) {\n\t\t\tcase 'S':\n\t\t\t\treturn 'XXS';\n\t\t\tcase 'L':\n\t\t\t\treturn 'S';\n\t\t\tdefault:\n\t\t\t\treturn 'XS';\n\t\t}\n\t});\n}\n","<lu-icon\n\ticon=\"priorityLevels\"\n\tclass=\"priorityLevel-icon\"\n\t[size]=\"iconSize()\"\n\t[luTooltip]=\"label()\"\n\tluTooltipOnlyForDisplay\n\t[luTooltipDisabled]=\"!hiddenLabel()\"\n/>\n<span class=\"priorityLevel-label\" [class.pr-u-mask]=\"hiddenLabel()\">{{ label() }}</span>\n","/**\n * Available PriorityLevelComponent levels (1 = low, 2 = medium, 3 = high)\n */\n\nexport const PRIORITY_LEVELS = [1, 2, 3] as const;\nexport type PriorityLevel = (typeof PRIORITY_LEVELS)[number];\n\n/**\n * Available PriorityLevelComponent sizes\n */\n\nexport const PRIORITY_LEVEL_SIZES = ['S', 'M', 'L'] as const;\nexport type PriorityLevelSize = (typeof PRIORITY_LEVEL_SIZES)[number];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAAO,MAAM,YAAY,GAAG;AAC3B,IAAA,EAAE,EAAE;AACH,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,IAAI,EAAE,MAAM;AACZ,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,IAAI,EAAE,MAAM;AACZ,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,GAAG,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,IAAI,EAAE,OAAO;AACb,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,GAAG,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE,OAAO;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,GAAG,EAAE,MAAM;AACX,QAAA,MAAM,EAAE,WAAW;AACnB,QAAA,IAAI,EAAE,MAAM;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;AACR,QAAA,GAAG,EAAE,MAAM;AACX,QAAA,MAAM,EAAE,WAAW;AACnB,QAAA,IAAI,EAAE,MAAM;AACZ,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,GAAG,EAAE,MAAM;AACX,QAAA,MAAM,EAAE,OAAO;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,GAAG,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE,OAAO;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,GAAG,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,IAAI,EAAE,QAAQ;AACd,KAAA;CACD;;AC1CM,MAAM,8BAA8B,GAAG,IAAI,cAAc,CAAC,6BAA6B,EAAE;AAC/F,IAAA,OAAO,EAAE,MAAM,2BAA2B;AAC1C,CAAA,CAAC;AAQK,MAAM,2BAA2B,GAA0C,YAAY;;ACP9F,MAAM,sBAAsB,GAAG;AAC9B,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,QAAQ;AACX,IAAA,CAAC,EAAE,MAAM;CACA;MAkBG,sBAAsB,CAAA;AAhBnC,IAAA,WAAA,GAAA;AAiBC;;AAEG;QACM,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,OAAA,EAAA,8BAAA,EAAA,CAAA,EAAG,SAAS,GAAE,iBAAgC,CAAA,EAAA,CAAG;AAEhF;;AAEG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK,CAAoB,GAAG;iFAAC;AAE7C;;AAEG;AACM,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,GAAG,gBAAgB,CAAC,8BAA8B,CAAC;iFAAC;AAE1E;;AAEG;QACM,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,KAAK,mFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE3D,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;kFAAC;AAEzE,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAW,MAAK;AAC3C,YAAA,QAAQ,IAAI,CAAC,IAAI,EAAE;AAClB,gBAAA,KAAK,GAAG;AACP,oBAAA,OAAO,KAAK;AACb,gBAAA,KAAK,GAAG;AACP,oBAAA,OAAO,GAAG;AACX,gBAAA;AACC,oBAAA,OAAO,IAAI;;QAEd,CAAC;qFAAC;AACF,IAAA;8GAjCY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,eAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,EAAA,cAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7BnC,kSASA,EAAA,MAAA,EAAA,CAAA,00EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDUW,aAAa,6GAAE,yBAAyB,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,yBAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAUtC,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAhBlC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,aAAa,EAAE,yBAAyB,CAAC,EAAA,IAAA,EAC7C;AACL,wBAAA,KAAK,EAAE,eAAe;AACtB,wBAAA,iBAAiB,EAAE,eAAe;AAClC,wBAAA,oBAAoB,EAAE,eAAe;AACrC,wBAAA,kBAAkB,EAAE,eAAe;AACnC,wBAAA,eAAe,EAAE,gBAAgB;AACjC,wBAAA,eAAe,EAAE,gBAAgB;AACjC,qBAAA,EAAA,QAAA,EAAA,kSAAA,EAAA,MAAA,EAAA,CAAA,00EAAA,CAAA,EAAA;;;AE3BF;;AAEG;AAEI,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;AAGvC;;AAEG;AAEI,MAAM,oBAAoB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG;;ACXlD;;AAEG;;"}

package/fesm2022/lucca-front-ng-segmented-control-tabs.mjs

@@ -132,7 +132,7 @@ class SegmentedControlTabsComponent {
                 provide: LU_SEGMENTEDCONTROLTABS_INSTANCE,
                 useExisting: forwardRef(() => SegmentedControlTabsComponent),
             },
-        ], queries: [{ propertyName: "tabs", predicate: SegmentedControlTabsPanelComponent, isSignal: true }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "tablistTemplate", first: true, predicate: ["tablist"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.NoopValueAccessorDirective }], ngImport: i0, template: "@if (!externalTablist()) {\n\t<ng-container *ngTemplateOutlet=\"tablistTemplate()\" />\n}\n<ng-content />\n\n<ng-template #tablist>\n\t<ul class=\"segmentedControl\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t\t@for (panel of tabs(); track panel.id) {\n\t\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t\t<button\n\t\t\t\t\t#tabButton\n\t\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t\t[attr.aria-controls]=\"panel.panelId\"\n\t\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t\t\t(keydown.home)=\"$event.preventDefault(); first()\"\n\t\t\t\t\t(keydown.end)=\"$event.preventDefault(); last()\"\n\t\t\t\t>\n\t\t\t\t\t@if (panel.icon(); as icon) {\n\t\t\t\t\t\t<lu-icon [icon]=\"icon\" />\n\t\t\t\t\t}\n\t\t\t\t\t@if (panel.hiddenLabelText(); as hiddenLabelText) {\n\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ hiddenLabelText }}</span>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass=\"segmentedControl-item-action-tooltip\"\n\t\t\t\t\t\t\t[luTooltip]=\"hiddenLabelText\"\n\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t[luTooltipAnchor]=\"tabButton\"\n\t\t\t\t\t\t\t[luTooltipTriggerAnchor]=\"tabButton\"\n\t\t\t\t\t\t></span>\n\t\t\t\t\t} @else if (panel.label(); as label) {\n\t\t\t\t\t\t<ng-container *luPortal=\"label\" />\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n", styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl .button.mod-disclosure,.viewTabs .button.mod-disclosure{margin-block:calc(var(--pr-t-spacings-25) * -1)}.segmentedControl .button.mod-disclosure:focus-visible,.viewTabs .button.mod-disclosure:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:0}.segmentedControl .button.mod-disclosure:last-child,.viewTabs .button.mod-disclosure:last-child{margin-inline-end:calc(var(--pr-t-spacings-100) * -1)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl-item-action-tooltip{display:contents}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "luTooltipTriggerAnchor", "prTooltipTriggerAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "tabs", predicate: SegmentedControlTabsPanelComponent, isSignal: true }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "tablistTemplate", first: true, predicate: ["tablist"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.NoopValueAccessorDirective }], ngImport: i0, template: "@if (!externalTablist()) {\n\t<ng-container *ngTemplateOutlet=\"tablistTemplate()\" />\n}\n<ng-content />\n\n<ng-template #tablist>\n\t<ul class=\"segmentedControl\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t\t@for (panel of tabs(); track panel.id) {\n\t\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t\t<button\n\t\t\t\t\t#tabButton\n\t\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t\t[attr.aria-controls]=\"panel.panelId\"\n\t\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t\t\t(keydown.home)=\"$event.preventDefault(); first()\"\n\t\t\t\t\t(keydown.end)=\"$event.preventDefault(); last()\"\n\t\t\t\t>\n\t\t\t\t\t@if (panel.icon(); as icon) {\n\t\t\t\t\t\t<lu-icon [icon]=\"icon\" />\n\t\t\t\t\t}\n\t\t\t\t\t@if (panel.hiddenLabelText(); as hiddenLabelText) {\n\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ hiddenLabelText }}</span>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass=\"segmentedControl-item-action-tooltip\"\n\t\t\t\t\t\t\t[luTooltip]=\"hiddenLabelText\"\n\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t[luTooltipAnchor]=\"tabButton\"\n\t\t\t\t\t\t\t[luTooltipTriggerAnchor]=\"tabButton\"\n\t\t\t\t\t\t></span>\n\t\t\t\t\t} @else if (panel.label(); as label) {\n\t\t\t\t\t\t<ng-container *luPortal=\"label\" />\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n", styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl .button.mod-disclosure,.viewTabs .button.mod-disclosure{margin-block:calc(var(--pr-t-spacings-25) * -1)}.segmentedControl .button.mod-disclosure:focus-visible,.viewTabs .button.mod-disclosure:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:0}.segmentedControl .button.mod-disclosure:last-child,.viewTabs .button.mod-disclosure:last-child{margin-inline-end:calc(var(--pr-t-spacings-100) * -1)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl-item-action-tooltip{display:contents}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "luTooltipTriggerAnchor", "prTooltipTriggerAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: SegmentedControlTabsComponent, decorators: [{
             type: Component,
@@ -141,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                             provide: LU_SEGMENTEDCONTROLTABS_INSTANCE,
                             useExisting: forwardRef(() => SegmentedControlTabsComponent),
                         },
-                    ], template: "@if (!externalTablist()) {\n\t<ng-container *ngTemplateOutlet=\"tablistTemplate()\" />\n}\n<ng-content />\n\n<ng-template #tablist>\n\t<ul class=\"segmentedControl\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t\t@for (panel of tabs(); track panel.id) {\n\t\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t\t<button\n\t\t\t\t\t#tabButton\n\t\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t\t[attr.aria-controls]=\"panel.panelId\"\n\t\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t\t\t(keydown.home)=\"$event.preventDefault(); first()\"\n\t\t\t\t\t(keydown.end)=\"$event.preventDefault(); last()\"\n\t\t\t\t>\n\t\t\t\t\t@if (panel.icon(); as icon) {\n\t\t\t\t\t\t<lu-icon [icon]=\"icon\" />\n\t\t\t\t\t}\n\t\t\t\t\t@if (panel.hiddenLabelText(); as hiddenLabelText) {\n\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ hiddenLabelText }}</span>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass=\"segmentedControl-item-action-tooltip\"\n\t\t\t\t\t\t\t[luTooltip]=\"hiddenLabelText\"\n\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t[luTooltipAnchor]=\"tabButton\"\n\t\t\t\t\t\t\t[luTooltipTriggerAnchor]=\"tabButton\"\n\t\t\t\t\t\t></span>\n\t\t\t\t\t} @else if (panel.label(); as label) {\n\t\t\t\t\t\t<ng-container *luPortal=\"label\" />\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n", styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl .button.mod-disclosure,.viewTabs .button.mod-disclosure{margin-block:calc(var(--pr-t-spacings-25) * -1)}.segmentedControl .button.mod-disclosure:focus-visible,.viewTabs .button.mod-disclosure:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:0}.segmentedControl .button.mod-disclosure:last-child,.viewTabs .button.mod-disclosure:last-child{margin-inline-end:calc(var(--pr-t-spacings-100) * -1)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl-item-action-tooltip{display:contents}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"] }]
+                    ], template: "@if (!externalTablist()) {\n\t<ng-container *ngTemplateOutlet=\"tablistTemplate()\" />\n}\n<ng-content />\n\n<ng-template #tablist>\n\t<ul class=\"segmentedControl\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t\t@for (panel of tabs(); track panel.id) {\n\t\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t\t<button\n\t\t\t\t\t#tabButton\n\t\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t\t[attr.aria-controls]=\"panel.panelId\"\n\t\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t\t\t(keydown.home)=\"$event.preventDefault(); first()\"\n\t\t\t\t\t(keydown.end)=\"$event.preventDefault(); last()\"\n\t\t\t\t>\n\t\t\t\t\t@if (panel.icon(); as icon) {\n\t\t\t\t\t\t<lu-icon [icon]=\"icon\" />\n\t\t\t\t\t}\n\t\t\t\t\t@if (panel.hiddenLabelText(); as hiddenLabelText) {\n\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ hiddenLabelText }}</span>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass=\"segmentedControl-item-action-tooltip\"\n\t\t\t\t\t\t\t[luTooltip]=\"hiddenLabelText\"\n\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t[luTooltipAnchor]=\"tabButton\"\n\t\t\t\t\t\t\t[luTooltipTriggerAnchor]=\"tabButton\"\n\t\t\t\t\t\t></span>\n\t\t\t\t\t} @else if (panel.label(); as label) {\n\t\t\t\t\t\t<ng-container *luPortal=\"label\" />\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n", styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl .button.mod-disclosure,.viewTabs .button.mod-disclosure{margin-block:calc(var(--pr-t-spacings-25) * -1)}.segmentedControl .button.mod-disclosure:focus-visible,.viewTabs .button.mod-disclosure:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:0}.segmentedControl .button.mod-disclosure:last-child,.viewTabs .button.mod-disclosure:last-child{margin-inline-end:calc(var(--pr-t-spacings-100) * -1)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl-item-action-tooltip{display:contents}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"] }]
         }], propDecorators: { small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SegmentedControlTabsPanelComponent), { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }], tablistTemplate: [{ type: i0.ViewChild, args: ['tablist', { isSignal: true }] }] } });
 
 /**

package/fesm2022/lucca-front-ng-segmented-control.mjs

@@ -69,7 +69,7 @@ class SegmentedControlComponent {
                 provide: LU_SEGMENTEDCONTROL_INSTANCE,
                 useExisting: forwardRef(() => SegmentedControlComponent),
             },
-        ], hostDirectives: [{ directive: i1$1.NoopValueAccessorDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl .button.mod-disclosure,.viewTabs .button.mod-disclosure{margin-block:calc(var(--pr-t-spacings-25) * -1)}.segmentedControl .button.mod-disclosure:focus-visible,.viewTabs .button.mod-disclosure:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:0}.segmentedControl .button.mod-disclosure:last-child,.viewTabs .button.mod-disclosure:last-child{margin-inline-end:calc(var(--pr-t-spacings-100) * -1)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl-item-action-tooltip{display:contents}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], hostDirectives: [{ directive: i1$1.NoopValueAccessorDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl .button.mod-disclosure,.viewTabs .button.mod-disclosure{margin-block:calc(var(--pr-t-spacings-25) * -1)}.segmentedControl .button.mod-disclosure:focus-visible,.viewTabs .button.mod-disclosure:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:0}.segmentedControl .button.mod-disclosure:last-child,.viewTabs .button.mod-disclosure:last-child{margin-inline-end:calc(var(--pr-t-spacings-100) * -1)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl-item-action-tooltip{display:contents}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
@@ -85,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                             provide: LU_SEGMENTEDCONTROL_INSTANCE,
                             useExisting: forwardRef(() => SegmentedControlComponent),
                         },
-                    ], styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl .button.mod-disclosure,.viewTabs .button.mod-disclosure{margin-block:calc(var(--pr-t-spacings-25) * -1)}.segmentedControl .button.mod-disclosure:focus-visible,.viewTabs .button.mod-disclosure:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:0}.segmentedControl .button.mod-disclosure:last-child,.viewTabs .button.mod-disclosure:last-child{margin-inline-end:calc(var(--pr-t-spacings-100) * -1)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl-item-action-tooltip{display:contents}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"] }]
+                    ], styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl .button.mod-disclosure,.viewTabs .button.mod-disclosure{margin-block:calc(var(--pr-t-spacings-25) * -1)}.segmentedControl .button.mod-disclosure:focus-visible,.viewTabs .button.mod-disclosure:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:0}.segmentedControl .button.mod-disclosure:last-child,.viewTabs .button.mod-disclosure:last-child{margin-inline-end:calc(var(--pr-t-spacings-100) * -1)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl-item-action-tooltip{display:contents}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--icon-size: 1.25rem;--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"] }]
         }], propDecorators: { small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**

package/fesm2022/lucca-front-ng-simple-select.mjs

@@ -200,7 +200,7 @@ class LuSelectPanelComponent {
                 provide: SELECT_PANEL_INSTANCE,
                 useExisting: forwardRef(() => LuSelectPanelComponent),
             },
-        ], viewQueries: [{ propertyName: "sheetViewport", first: true, predicate: ["sheetViewport"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the S breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the field it covers is no longer reachable \u2014 and its content. -->\n\t<lu-dialog>\n\t\t<lu-dialog-header>\n\t\t\t@if (selectInput.panelTitle(); as title) {\n\t\t\t\t<!-- The interpolation and the marker must stay adjacent in the source: any whitespace between\n\t\t\t\tthem (even just a line break) renders as a literal space, pushing the asterisk away from the\n\t\t\t\ttitle instead of hugging it the way `.formLabel-required`'s own margin expects. -->\n\t\t\t\t@if (selectInput.panelTitleRequired()) {\n\t\t\t\t\t<h1>{{ title }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup></h1>\n\t\t\t\t} @else {\n\t\t\t\t\t<h1>{{ title }}</h1>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div dialogHeaderContent>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"sheetSearch\" />\n\t\t\t</div>\n\t\t</lu-dialog-header>\n\t\t<lu-dialog-content #sheetViewport (scroll)=\"onScroll($event)\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t\t</lu-dialog-content>\n\t</lu-dialog>\n} @else {\n\t<lu-select-panel-layout [loading]=\"loading()\" trapFocus (scrolled)=\"onScroll($event)\">\n\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t</lu-select-panel-layout>\n}\n\n<ng-template #sheetSearch>\n\t<!-- A select with no search has nothing to type into, so its field is masked rather than rendered as a\n\tdead read-only input. It stays in the DOM: it carries the combobox semantics, it is the element\n\t`openSelectPanelSheet` focuses, and its `keydown` handler is what drives keyboard navigation. -->\n\t<div class=\"textField\" [class.pr-u-mask]=\"!searchable\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\ttype=\"text\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.aria-expanded]=\"true\"\n\t\t\t\t[attr.aria-controls]=\"selectId\"\n\t\t\t\t[attr.placeholder]=\"intl().placeholder\"\n\t\t\t\t[ngModel]=\"clue()\"\n\t\t\t\t(ngModelChange)=\"selectInput.clueChanged($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[readonly]=\"!searchable\"\n\t\t\t\t(keydown)=\"selectInput.onKeyDownNavigation($event)\"\n\t\t\t/>\n\t\t\t<div class=\"textField-input-affix\">\n\t\t\t\t<lu-icon class=\"textField-input-affix-icon\" icon=\"searchMagnifyingGlass\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #panelContent>\n\t<lu-listbox [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\tthat are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selected()\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t<div>\n\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}\n"], dependencies: [{ kind: "component", type: LuSelectPanelLayoutComponent, selector: "lu-select-panel-layout", inputs: ["loading", "trapFocus", "contentTabIndex"], outputs: ["scrolled"] }, { kind: "component", type: DialogComponent, selector: "lu-dialog", inputs: ["stacked", "fancyIllustration", "fancyIllustrationUrl"] }, { kind: "component", type: DialogHeaderComponent, selector: "lu-dialog-header", inputs: ["intl"] }, { kind: "component", type: DialogContentComponent, selector: "lu-dialog-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: ListboxComponent, selector: "lu-listbox", inputs: ["multiple", "tree", "state", "statusMsg"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["elementId", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll", "treeitemLevel"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "sheetViewport", first: true, predicate: ["sheetViewport"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the XS breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the field it covers is no longer reachable \u2014 and its content. -->\n\t<lu-dialog>\n\t\t<lu-dialog-header>\n\t\t\t@if (selectInput.panelTitle(); as title) {\n\t\t\t\t<!-- The interpolation and the marker must stay adjacent in the source: any whitespace between\n\t\t\t\tthem (even just a line break) renders as a literal space, pushing the asterisk away from the\n\t\t\t\ttitle instead of hugging it the way `.formLabel-required`'s own margin expects. -->\n\t\t\t\t@if (selectInput.panelTitleRequired()) {\n\t\t\t\t\t<h1>{{ title }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup></h1>\n\t\t\t\t} @else {\n\t\t\t\t\t<h1>{{ title }}</h1>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div dialogHeaderContent>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"sheetSearch\" />\n\t\t\t</div>\n\t\t</lu-dialog-header>\n\t\t<lu-dialog-content #sheetViewport (scroll)=\"onScroll($event)\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t\t</lu-dialog-content>\n\t</lu-dialog>\n} @else {\n\t<lu-select-panel-layout [loading]=\"loading()\" trapFocus (scrolled)=\"onScroll($event)\">\n\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t</lu-select-panel-layout>\n}\n\n<ng-template #sheetSearch>\n\t<!-- A select with no search has nothing to type into, so its field is masked rather than rendered as a\n\tdead read-only input. It stays in the DOM: it carries the combobox semantics, it is the element\n\t`openSelectPanelSheet` focuses, and its `keydown` handler is what drives keyboard navigation. -->\n\t<div class=\"textField\" [class.pr-u-mask]=\"!searchable\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\ttype=\"text\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.aria-expanded]=\"true\"\n\t\t\t\t[attr.aria-controls]=\"selectId\"\n\t\t\t\t[attr.placeholder]=\"intl().placeholder\"\n\t\t\t\t[ngModel]=\"clue()\"\n\t\t\t\t(ngModelChange)=\"selectInput.clueChanged($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[readonly]=\"!searchable\"\n\t\t\t\t(keydown)=\"selectInput.onKeyDownNavigation($event)\"\n\t\t\t/>\n\t\t\t<div class=\"textField-input-affix\">\n\t\t\t\t<lu-icon class=\"textField-input-affix-icon\" icon=\"searchMagnifyingGlass\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #panelContent>\n\t<lu-listbox [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\tthat are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (groupTemplateLocation() === \"group-header\" && grouping(); as groupingConfig) {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: groupingConfig.selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<ng-container *luPortal=\"groupingConfig.content; context: { $implicit: group }\" />\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selected()\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t<div>\n\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}\n"], dependencies: [{ kind: "component", type: LuSelectPanelLayoutComponent, selector: "lu-select-panel-layout", inputs: ["loading", "trapFocus", "contentTabIndex"], outputs: ["scrolled"] }, { kind: "component", type: DialogComponent, selector: "lu-dialog", inputs: ["stacked", "fancyIllustration", "fancyIllustrationUrl"] }, { kind: "component", type: DialogHeaderComponent, selector: "lu-dialog-header", inputs: ["intl"] }, { kind: "component", type: DialogContentComponent, selector: "lu-dialog-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: ListboxComponent, selector: "lu-listbox", inputs: ["multiple", "tree", "state", "statusMsg"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["elementId", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll", "treeitemLevel"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuSelectPanelComponent, decorators: [{
             type: Component,
@@ -231,7 +231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                             provide: SELECT_PANEL_INSTANCE,
                             useExisting: forwardRef(() => LuSelectPanelComponent),
                         },
-                    ], template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the S breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the field it covers is no longer reachable \u2014 and its content. -->\n\t<lu-dialog>\n\t\t<lu-dialog-header>\n\t\t\t@if (selectInput.panelTitle(); as title) {\n\t\t\t\t<!-- The interpolation and the marker must stay adjacent in the source: any whitespace between\n\t\t\t\tthem (even just a line break) renders as a literal space, pushing the asterisk away from the\n\t\t\t\ttitle instead of hugging it the way `.formLabel-required`'s own margin expects. -->\n\t\t\t\t@if (selectInput.panelTitleRequired()) {\n\t\t\t\t\t<h1>{{ title }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup></h1>\n\t\t\t\t} @else {\n\t\t\t\t\t<h1>{{ title }}</h1>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div dialogHeaderContent>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"sheetSearch\" />\n\t\t\t</div>\n\t\t</lu-dialog-header>\n\t\t<lu-dialog-content #sheetViewport (scroll)=\"onScroll($event)\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t\t</lu-dialog-content>\n\t</lu-dialog>\n} @else {\n\t<lu-select-panel-layout [loading]=\"loading()\" trapFocus (scrolled)=\"onScroll($event)\">\n\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t</lu-select-panel-layout>\n}\n\n<ng-template #sheetSearch>\n\t<!-- A select with no search has nothing to type into, so its field is masked rather than rendered as a\n\tdead read-only input. It stays in the DOM: it carries the combobox semantics, it is the element\n\t`openSelectPanelSheet` focuses, and its `keydown` handler is what drives keyboard navigation. -->\n\t<div class=\"textField\" [class.pr-u-mask]=\"!searchable\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\ttype=\"text\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.aria-expanded]=\"true\"\n\t\t\t\t[attr.aria-controls]=\"selectId\"\n\t\t\t\t[attr.placeholder]=\"intl().placeholder\"\n\t\t\t\t[ngModel]=\"clue()\"\n\t\t\t\t(ngModelChange)=\"selectInput.clueChanged($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[readonly]=\"!searchable\"\n\t\t\t\t(keydown)=\"selectInput.onKeyDownNavigation($event)\"\n\t\t\t/>\n\t\t\t<div class=\"textField-input-affix\">\n\t\t\t\t<lu-icon class=\"textField-input-affix-icon\" icon=\"searchMagnifyingGlass\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #panelContent>\n\t<lu-listbox [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\tthat are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selected()\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t<div>\n\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}\n"] }]
+                    ], template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the XS breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the field it covers is no longer reachable \u2014 and its content. -->\n\t<lu-dialog>\n\t\t<lu-dialog-header>\n\t\t\t@if (selectInput.panelTitle(); as title) {\n\t\t\t\t<!-- The interpolation and the marker must stay adjacent in the source: any whitespace between\n\t\t\t\tthem (even just a line break) renders as a literal space, pushing the asterisk away from the\n\t\t\t\ttitle instead of hugging it the way `.formLabel-required`'s own margin expects. -->\n\t\t\t\t@if (selectInput.panelTitleRequired()) {\n\t\t\t\t\t<h1>{{ title }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup></h1>\n\t\t\t\t} @else {\n\t\t\t\t\t<h1>{{ title }}</h1>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div dialogHeaderContent>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"sheetSearch\" />\n\t\t\t</div>\n\t\t</lu-dialog-header>\n\t\t<lu-dialog-content #sheetViewport (scroll)=\"onScroll($event)\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t\t</lu-dialog-content>\n\t</lu-dialog>\n} @else {\n\t<lu-select-panel-layout [loading]=\"loading()\" trapFocus (scrolled)=\"onScroll($event)\">\n\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t</lu-select-panel-layout>\n}\n\n<ng-template #sheetSearch>\n\t<!-- A select with no search has nothing to type into, so its field is masked rather than rendered as a\n\tdead read-only input. It stays in the DOM: it carries the combobox semantics, it is the element\n\t`openSelectPanelSheet` focuses, and its `keydown` handler is what drives keyboard navigation. -->\n\t<div class=\"textField\" [class.pr-u-mask]=\"!searchable\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\ttype=\"text\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.aria-expanded]=\"true\"\n\t\t\t\t[attr.aria-controls]=\"selectId\"\n\t\t\t\t[attr.placeholder]=\"intl().placeholder\"\n\t\t\t\t[ngModel]=\"clue()\"\n\t\t\t\t(ngModelChange)=\"selectInput.clueChanged($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[readonly]=\"!searchable\"\n\t\t\t\t(keydown)=\"selectInput.onKeyDownNavigation($event)\"\n\t\t\t/>\n\t\t\t<div class=\"textField-input-affix\">\n\t\t\t\t<lu-icon class=\"textField-input-affix-icon\" icon=\"searchMagnifyingGlass\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #panelContent>\n\t<lu-listbox [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\tthat are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (groupTemplateLocation() === \"group-header\" && grouping(); as groupingConfig) {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: groupingConfig.selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<ng-container *luPortal=\"groupingConfig.content; context: { $implicit: group }\" />\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selected()\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t<div>\n\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sheetViewport: [{ type: i0.ViewChild, args: ['sheetViewport', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 class BaseSelectPanelRef extends LuSelectPanelRef {
@@ -441,7 +441,7 @@ class LuSimpleSelectInputComponent extends ALuSelectInputComponent {
                 useExisting: forwardRef(() => LuSimpleSelectInputComponent),
             },
             LuSimpleSelectPanelRefFactory,
-            // Below the `S` breakpoint the panel opens as a dialog in `sheet` mode.
+            // Below the `XS` breakpoint the panel opens as a dialog in `sheet` mode.
             provideLuDialog(),
             provideLuSelectLabelsAndIds(),
             {
@@ -480,7 +480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                             useExisting: forwardRef(() => LuSimpleSelectInputComponent),
                         },
                         LuSimpleSelectPanelRefFactory,
-                        // Below the `S` breakpoint the panel opens as a dialog in `sheet` mode.
+                        // Below the `XS` breakpoint the panel opens as a dialog in `sheet` mode.
                         provideLuDialog(),
                         provideLuSelectLabelsAndIds(),
                         {