@lucca-front/ng 20.1.1 → 20.1.2

package/fesm2022/lucca-front-ng-horizontal-navigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lucca-front-ng-horizontal-navigation.mjs","sources":["../../../packages/ng/horizontal-navigation/horizontal-navigation-link.directive.ts","../../../packages/ng/horizontal-navigation/horizontal-navigation.component.ts","../../../packages/ng/horizontal-navigation/horizontal-navigation.component.html","../../../packages/ng/horizontal-navigation/lucca-front-ng-horizontal-navigation.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n\tselector: '[luHorizontalNavigationLink]',\n})\nexport class HorizontalNavigationLinkDirective {\n\tpublic template = inject(TemplateRef);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, Component, contentChildren, HostBinding, input, ViewEncapsulation } from '@angular/core';\nimport { HorizontalNavigationLinkDirective } from './horizontal-navigation-link.directive';\n\n@Component({\n\tselector: 'lu-horizontal-navigation',\n\tstandalone: true,\n\ttemplateUrl: './horizontal-navigation.component.html',\n\tstyleUrls: ['./horizontal-navigation.component.scss'],\n\tencapsulation: ViewEncapsulation.None,\n\timports: [NgTemplateOutlet],\n\thost: {\n\t\tclass: 'horizontalNavigation',\n\t},\n})\nexport class HorizontalNavigationComponent {\n\tlinks = contentChildren(HorizontalNavigationLinkDirective);\n\n\tnoBorder = input(false, { transform: booleanAttribute });\n\tcontainer = input(false, { transform: booleanAttribute });\n\tvertical = input(false, { transform: booleanAttribute });\n\tsize = input<null | 'S'>(null);\n\n\t@HostBinding('class.mod-noBorder')\n\tget hasNoBorder() {\n\t\treturn this.noBorder();\n\t}\n\n\t@HostBinding('class.mod-S')\n\tget isSizeS() {\n\t\treturn this.size() === 'S';\n\t}\n\n\t@HostBinding('class.mod-vertical')\n\tget isVertical() {\n\t\treturn this.vertical();\n\t}\n}\n","@if (container()) {\n\t<div class=\"horizontalNavigation-containerOptional\">\n\t\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n\t</div>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n}\n\n<ng-template #horizontalNavigationList>\n\t<ul class=\"horizontalNavigation-list\">\n\t\t@for (link of links(); track $index) {\n\t\t\t<li class=\"horizontalNavigation-list-item\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"link.template\" />\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lucca-front-ng-horizontal-navigation.mjs","sources":["../../../packages/ng/horizontal-navigation/horizontal-navigation-link.directive.ts","../../../packages/ng/horizontal-navigation/horizontal-navigation.component.ts","../../../packages/ng/horizontal-navigation/horizontal-navigation.component.html","../../../packages/ng/horizontal-navigation/lucca-front-ng-horizontal-navigation.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n\tselector: '[luHorizontalNavigationLink]',\n})\nexport class HorizontalNavigationLinkDirective {\n\tpublic template = inject(TemplateRef);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, Component, contentChildren, HostBinding, input, ViewEncapsulation } from '@angular/core';\nimport { HorizontalNavigationLinkDirective } from './horizontal-navigation-link.directive';\n\n@Component({\n\tselector: 'lu-horizontal-navigation',\n\tstandalone: true,\n\ttemplateUrl: './horizontal-navigation.component.html',\n\tstyleUrls: ['./horizontal-navigation.component.scss'],\n\tencapsulation: ViewEncapsulation.None,\n\timports: [NgTemplateOutlet],\n\thost: {\n\t\tclass: 'horizontalNavigation',\n\t},\n})\nexport class HorizontalNavigationComponent {\n\tlinks = contentChildren(HorizontalNavigationLinkDirective);\n\n\tnoBorder = input(false, { transform: booleanAttribute });\n\tcontainer = input(false, { transform: booleanAttribute });\n\tvertical = input(false, { transform: booleanAttribute });\n\tsize = input<null | 'S'>(null);\n\n\t@HostBinding('class.mod-noBorder')\n\tget hasNoBorder() {\n\t\treturn this.noBorder();\n\t}\n\n\t@HostBinding('class.mod-S')\n\tget isSizeS() {\n\t\treturn this.size() === 'S';\n\t}\n\n\t@HostBinding('class.mod-vertical')\n\tget isVertical() {\n\t\treturn this.vertical();\n\t}\n}\n","@if (container()) {\n\t<div class=\"horizontalNavigation-containerOptional\">\n\t\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n\t</div>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n}\n\n<ng-template #horizontalNavigationList>\n\t<ul class=\"horizontalNavigation-list\">\n\t\t@for (link of links(); track $index) {\n\t\t\t<li class=\"horizontalNavigation-list-item\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"link.template\" />\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -271,7 +271,7 @@ class LuMultiSelectPanelComponent {
                 provide: SELECT_PANEL_INSTANCE,
                 useExisting: forwardRef(() => LuMultiSelectPanelComponent),
             },
-        ], ngImport: i0, template: "<div\n\tclass=\"lu-picker-panel lu-option-picker-panel mod-multiple\"\n\trole=\"dialog\"\n\t*ngIf=\"{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t} as ctx\"\n>\n\t<div\n\t\tclass=\"lu-picker-content\"\n\t\t[class.is-loading]=\"loading$ | async\"\n\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\ttabindex=\"0\"\n\t\trole=\"listbox\"\n\t\taria-multiselectable=\"true\"\n\t\t(scroll)=\"onScroll($event)\"\n\t>\n\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t<div>\n\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t</div>\n\t\t}\n\n\t\t<div class=\"lu-picker-content-option\">\n\t\t\t<ng-container *ngIf=\"grouping && ctx.groupTemplateLocation === 'group-header'\">\n\t\t\t\t<div\n\t\t\t\t\t*ngFor=\"let group of ctx.options | luOptionGroup: grouping.selector; trackBy: trackGroupsBy; let groupIndex = index\"\n\t\t\t\t\tclass=\"lu-picker-content-group\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\tattr.aria-labelledby=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t>\n\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer;\n\t\t\t\t\t<div\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\telementId=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t\t\tclass=\"lu-picker-content-option-group-title\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl.unselectAll : intl.selectAll }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\" />\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!grouping || ctx.groupTemplateLocation !== 'group-header'\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t</ng-container>\n\n\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t<lu-select-option\n\t\t\t\t\t*ngFor=\"let option of options; let index = index; trackBy: trackOptionsBy\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selectedOptions\"\n\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t\t<div class=\"lu-picker-content-option-emptyState\" *ngIf=\"ctx.options.length === 0 && (loading$ | async) === false\">\n\t\t\t\t{{ intl.emptyResults }}\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"loading$ | async\" class=\"lu-picker-content-loading\">\n\t\t\t<div class=\"loading\">{{ intl.loading }}</div>\n\t\t</div>\n\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t<div\n\t\t\t\tclass=\"addOption palette-product\"\n\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\tluCoreSelectPanelElement\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [".optionItem-groupKey{padding-block:var(--components-options-item-padding-vertical) var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);font:var(--pr-t-font-body-S);inline-size:100%;text-align:start;color:var(--palettes-neutral-600);margin:0}.addOption{--components-button-font: var(--pr-t-font-body-M);--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: none;--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--commons-borderRadius-M);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0;--components-button-width: 100%;--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));justify-content:left}.addOption,.addOption:is(a){color:var(--components-button-color)}.addOption .lucca-icon{display:block}.addOption .button-icon{--icon-size: 1.5rem}.addOption:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.addOption:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption:disabled .numericBadge{background-color:var(--palettes-neutral-200);color:var(--palettes-neutral-500)}.addOption:hover,.addOption:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.addOption:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.addOption.is-highlighted{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["optionTpl", "option", "grouping", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"] }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "pipe", type: LuOptionsGroupContextPipe, name: "luOptionsGroupContext" }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div\n\tclass=\"lu-picker-panel lu-option-picker-panel mod-multiple\"\n\trole=\"dialog\"\n\t*ngIf=\"{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t} as ctx\"\n>\n\t<div\n\t\tclass=\"lu-picker-content\"\n\t\t[class.is-loading]=\"loading$ | async\"\n\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\ttabindex=\"0\"\n\t\trole=\"listbox\"\n\t\taria-multiselectable=\"true\"\n\t\t(scroll)=\"onScroll($event)\"\n\t>\n\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t<div>\n\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t</div>\n\t\t}\n\n\t\t<div class=\"lu-picker-content-option\">\n\t\t\t<ng-container *ngIf=\"grouping && ctx.groupTemplateLocation === 'group-header'\">\n\t\t\t\t<div\n\t\t\t\t\t*ngFor=\"let group of ctx.options | luOptionGroup: grouping.selector; trackBy: trackGroupsBy; let groupIndex = index\"\n\t\t\t\t\tclass=\"lu-picker-content-group\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\tattr.aria-labelledby=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t>\n\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer;\n\t\t\t\t\t<div\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\telementId=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t\t\tclass=\"lu-picker-content-option-group-title\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl.unselectAll : intl.selectAll }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\" />\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!grouping || ctx.groupTemplateLocation !== 'group-header'\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t</ng-container>\n\n\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t<lu-select-option\n\t\t\t\t\t*ngFor=\"let option of options; let index = index; trackBy: trackOptionsBy\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selectedOptions\"\n\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t\t<div class=\"lu-picker-content-option-emptyState\" *ngIf=\"ctx.options.length === 0 && (loading$ | async) === false\">\n\t\t\t\t{{ intl.emptyResults }}\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"loading$ | async\" class=\"lu-picker-content-loading\">\n\t\t\t<div class=\"loading\">{{ intl.loading }}</div>\n\t\t</div>\n\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t<div\n\t\t\t\tclass=\"addOption palette-product\"\n\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\tluCoreSelectPanelElement\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [".optionItem-groupKey{padding-block:var(--components-options-item-padding-vertical) var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);font:var(--pr-t-font-body-S);inline-size:100%;text-align:start;color:var(--palettes-neutral-600);margin:0}.addOption{--components-button-font: var(--pr-t-font-body-M);--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: none;--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--commons-borderRadius-M);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0;--components-button-width: 100%;--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));justify-content:left}.addOption,.addOption:is(a){color:var(--components-button-color)}.addOption .lucca-icon{display:block}.addOption .button-icon{--icon-size: 1.5rem}.addOption:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.addOption:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption:hover,.addOption:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.addOption:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.addOption.is-highlighted{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["optionTpl", "option", "grouping", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"] }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "pipe", type: LuOptionsGroupContextPipe, name: "luOptionsGroupContext" }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
             type: Component,
@@ -295,7 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                             provide: SELECT_PANEL_INSTANCE,
                             useExisting: forwardRef(() => LuMultiSelectPanelComponent),
                         },
-                    ], template: "<div\n\tclass=\"lu-picker-panel lu-option-picker-panel mod-multiple\"\n\trole=\"dialog\"\n\t*ngIf=\"{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t} as ctx\"\n>\n\t<div\n\t\tclass=\"lu-picker-content\"\n\t\t[class.is-loading]=\"loading$ | async\"\n\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\ttabindex=\"0\"\n\t\trole=\"listbox\"\n\t\taria-multiselectable=\"true\"\n\t\t(scroll)=\"onScroll($event)\"\n\t>\n\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t<div>\n\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t</div>\n\t\t}\n\n\t\t<div class=\"lu-picker-content-option\">\n\t\t\t<ng-container *ngIf=\"grouping && ctx.groupTemplateLocation === 'group-header'\">\n\t\t\t\t<div\n\t\t\t\t\t*ngFor=\"let group of ctx.options | luOptionGroup: grouping.selector; trackBy: trackGroupsBy; let groupIndex = index\"\n\t\t\t\t\tclass=\"lu-picker-content-group\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\tattr.aria-labelledby=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t>\n\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer;\n\t\t\t\t\t<div\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\telementId=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t\t\tclass=\"lu-picker-content-option-group-title\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl.unselectAll : intl.selectAll }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\" />\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!grouping || ctx.groupTemplateLocation !== 'group-header'\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t</ng-container>\n\n\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t<lu-select-option\n\t\t\t\t\t*ngFor=\"let option of options; let index = index; trackBy: trackOptionsBy\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selectedOptions\"\n\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t\t<div class=\"lu-picker-content-option-emptyState\" *ngIf=\"ctx.options.length === 0 && (loading$ | async) === false\">\n\t\t\t\t{{ intl.emptyResults }}\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"loading$ | async\" class=\"lu-picker-content-loading\">\n\t\t\t<div class=\"loading\">{{ intl.loading }}</div>\n\t\t</div>\n\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t<div\n\t\t\t\tclass=\"addOption palette-product\"\n\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\tluCoreSelectPanelElement\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [".optionItem-groupKey{padding-block:var(--components-options-item-padding-vertical) var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);font:var(--pr-t-font-body-S);inline-size:100%;text-align:start;color:var(--palettes-neutral-600);margin:0}.addOption{--components-button-font: var(--pr-t-font-body-M);--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: none;--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--commons-borderRadius-M);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0;--components-button-width: 100%;--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));justify-content:left}.addOption,.addOption:is(a){color:var(--components-button-color)}.addOption .lucca-icon{display:block}.addOption .button-icon{--icon-size: 1.5rem}.addOption:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.addOption:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption:disabled .numericBadge{background-color:var(--palettes-neutral-200);color:var(--palettes-neutral-500)}.addOption:hover,.addOption:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.addOption:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.addOption.is-highlighted{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}\n"] }]
+                    ], template: "<div\n\tclass=\"lu-picker-panel lu-option-picker-panel mod-multiple\"\n\trole=\"dialog\"\n\t*ngIf=\"{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t} as ctx\"\n>\n\t<div\n\t\tclass=\"lu-picker-content\"\n\t\t[class.is-loading]=\"loading$ | async\"\n\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\ttabindex=\"0\"\n\t\trole=\"listbox\"\n\t\taria-multiselectable=\"true\"\n\t\t(scroll)=\"onScroll($event)\"\n\t>\n\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t<div>\n\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t</div>\n\t\t}\n\n\t\t<div class=\"lu-picker-content-option\">\n\t\t\t<ng-container *ngIf=\"grouping && ctx.groupTemplateLocation === 'group-header'\">\n\t\t\t\t<div\n\t\t\t\t\t*ngFor=\"let group of ctx.options | luOptionGroup: grouping.selector; trackBy: trackGroupsBy; let groupIndex = index\"\n\t\t\t\t\tclass=\"lu-picker-content-group\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\tattr.aria-labelledby=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t>\n\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer;\n\t\t\t\t\t<div\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\telementId=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t\t\tclass=\"lu-picker-content-option-group-title\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl.unselectAll : intl.selectAll }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\" />\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!grouping || ctx.groupTemplateLocation !== 'group-header'\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t</ng-container>\n\n\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t<lu-select-option\n\t\t\t\t\t*ngFor=\"let option of options; let index = index; trackBy: trackOptionsBy\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selectedOptions\"\n\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t\t<div class=\"lu-picker-content-option-emptyState\" *ngIf=\"ctx.options.length === 0 && (loading$ | async) === false\">\n\t\t\t\t{{ intl.emptyResults }}\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"loading$ | async\" class=\"lu-picker-content-loading\">\n\t\t\t<div class=\"loading\">{{ intl.loading }}</div>\n\t\t</div>\n\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t<div\n\t\t\t\tclass=\"addOption palette-product\"\n\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\tluCoreSelectPanelElement\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [".optionItem-groupKey{padding-block:var(--components-options-item-padding-vertical) var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);font:var(--pr-t-font-body-S);inline-size:100%;text-align:start;color:var(--palettes-neutral-600);margin:0}.addOption{--components-button-font: var(--pr-t-font-body-M);--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: none;--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--commons-borderRadius-M);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0;--components-button-width: 100%;--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700));justify-content:left}.addOption,.addOption:is(a){color:var(--components-button-color)}.addOption .lucca-icon{display:block}.addOption .button-icon{--icon-size: 1.5rem}.addOption:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.addOption:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption:hover,.addOption:focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption:active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.addOption:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.addOption.is-highlighted{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}\n"] }]
         }] });
 
 class BaseMultiSelectPanelRef extends LuMultiSelectPanelRef {