@lucca-front/ng 21.4.1 → 21.4.2

package/fesm2022/lucca-front-ng-impersonation.mjs

@@ -98,7 +98,7 @@ class ImpersonationComponent {
             // Because ref appears only when opening the panel, we're going to call the impersonation opened hook too
             if (ref) {
                 untracked(() => {
-                    ref.enableFilterPillMode();
+                    ref.enableFilterPillMode?.();
                     ref.registerFilterPillClosePopover(this.closePopover);
                     ref.registerFilterPillUpdatePosition?.(this.updatePosition);
                     ref.onFilterPillOpened?.();

package/fesm2022/lucca-front-ng-impersonation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lucca-front-ng-impersonation.mjs","sources":["../../../packages/ng/impersonation/impersonation/translations.ts","../../../packages/ng/impersonation/impersonation/impersonation.translate.ts","../../../packages/ng/impersonation/impersonation/impersonation.component.ts","../../../packages/ng/impersonation/impersonation/impersonation.component.html","../../../packages/ng/impersonation/lucca-front-ng-impersonation.ts"],"sourcesContent":["export const Translations = {\n\t'nl-BE': {\n\t\ta11yNavigationDescription: '– De inhoud van de pagina wordt bijgewerkt zodra dit filter wordt gewijzigd',\n\t\tswitchProfile: 'Profiel wijzigen:',\n\t\tclear: 'Terug naar standaardprofiel',\n\t},\n\tnl: {\n\t\ta11yNavigationDescription: '– De inhoud van de pagina wordt bijgewerkt zodra dit filter wordt gewijzigd',\n\t\tswitchProfile: 'Profiel wijzigen:',\n\t\tclear: 'Terug naar standaardprofiel',\n\t},\n\tit: {\n\t\ta11yNavigationDescription: '– Il contenuto della pagina si aggiorna non appena questo filtro viene modificato',\n\t\tswitchProfile: 'Cambia profilo:',\n\t\tclear: 'Torna al profilo predefinito',\n\t},\n\tfr: {\n\t\ta11yNavigationDescription: '– Le contenu de la page s’actualise dès que ce filtre est modifié',\n\t\tswitchProfile: 'Changer de profil :',\n\t\tclear: 'Revenir au profil par défaut',\n\t},\n\tpt: {\n\t\ta11yNavigationDescription: '– O conteúdo da página é atualizado assim que este filtro é alterado',\n\t\tswitchProfile: 'Alterar perfil:',\n\t\tclear: 'Voltar ao perfil predefinido',\n\t},\n\tes: {\n\t\ta11yNavigationDescription: '– El contenido de la página se actualiza en cuanto se cambia este filtro',\n\t\tswitchProfile: 'Cambiar de perfil:',\n\t\tclear: 'Volver al perfil predeterminado',\n\t},\n\tde: {\n\t\ta11yNavigationDescription: '– Der Seiteninhalt wird aktualisiert, sobald dieser Filter geändert wird',\n\t\tswitchProfile: 'Profil wechseln:',\n\t\tclear: 'Zurück zum Standardprofil',\n\t},\n\ten: {\n\t\ta11yNavigationDescription: '– Page content updates as soon as this filter is changed',\n\t\tswitchProfile: 'Switch profile:',\n\t\tclear: 'Back to default profile',\n\t},\n};\n","import { InjectionToken } from '@angular/core';\nimport { LuTranslation } from '@lucca-front/ng/core';\nimport { Translations } from './translations';\n\nexport const LU_IMPERSONATION_TRANSLATIONS = new InjectionToken('LuImpersonationTranslations', {\n\tfactory: () => luImpersonationTranslations,\n});\n\nexport interface LuImpersonationTranslations {\n\ta11yNavigationDescription: string;\n\tswitchProfile: string;\n\tclear: string;\n}\n\nexport const luImpersonationTranslations: LuTranslation<LuImpersonationTranslations> = Translations;\n","import { ConnectionPositionPair } from '@angular/cdk/overlay';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, model, output, untracked, viewChild, ViewEncapsulation } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ClearComponent } from '@lucca-front/ng/clear';\nimport { LuOptionDirective } from '@lucca-front/ng/core-select';\nimport { LU_CORE_SELECT_USER_TRANSLATIONS, LuCoreSelectUsersDirective, ɵLU_CORE_SELECT_CURRENT_USER_ID } from '@lucca-front/ng/core-select/user';\nimport { PopoverDirective } from '@lucca-front/ng/popover2';\nimport { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';\nimport { ILuUser, LuUserDisplayPipe, LuUserPictureComponent } from '@lucca-front/ng/user';\nimport { IconComponent } from '@lucca/prisme/icon';\nimport { LU_IMPERSONATION_TRANSLATIONS } from './impersonation.translate';\nimport { intlInputOptions } from '@lucca-front/ng/core';\n\n@Component({\n\tselector: 'lu-impersonation',\n\timports: [PopoverDirective, FormsModule, LuSimpleSelectInputComponent, LuCoreSelectUsersDirective, LuUserDisplayPipe, LuOptionDirective, LuUserPictureComponent, IconComponent, ClearComponent],\n\ttemplateUrl: './impersonation.component.html',\n\tstyleUrl: './impersonation.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'impersonation',\n\t},\n})\nexport class ImpersonationComponent {\n\tprotected readonly elementRef = inject(ElementRef);\n\treadonly intl = input(...intlInputOptions(LU_CORE_SELECT_USER_TRANSLATIONS, LU_IMPERSONATION_TRANSLATIONS));\n\tprotected readonly currentUserId = inject(ɵLU_CORE_SELECT_CURRENT_USER_ID);\n\n\treadonly inputComponentRef = viewChild<LuSimpleSelectInputComponent<ILuUser>>(LuSimpleSelectInputComponent);\n\n\treadonly popoverRef = viewChild(PopoverDirective);\n\n\treadonly selectedUser = model<ILuUser>();\n\n\treadonly enableFormerEmployees = input(false, { transform: booleanAttribute });\n\n\treadonly isNotMe = computed(() => this.selectedUser()?.id !== this.currentUserId);\n\treadonly clear = output<void>();\n\n\treadonly popoverPositions: ConnectionPositionPair[] = [\n\t\tnew ConnectionPositionPair(\n\t\t\t{ originX: 'start', originY: 'bottom' },\n\t\t\t{\n\t\t\t\toverlayX: 'start',\n\t\t\t\toverlayY: 'top',\n\t\t\t},\n\t\t\t-4,\n\t\t\t0,\n\t\t),\n\t\tnew ConnectionPositionPair(\n\t\t\t{ originX: 'start', originY: 'top' },\n\t\t\t{\n\t\t\t\toverlayX: 'start',\n\t\t\t\toverlayY: 'bottom',\n\t\t\t},\n\t\t\t-4,\n\t\t\t0,\n\t\t),\n\t];\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tconst ref = this.inputComponentRef();\n\t\t\t// Because ref appears only when opening the panel, we're going to call the impersonation opened hook too\n\t\t\tif (ref) {\n\t\t\t\tuntracked(() => {\n\t\t\t\t\tref.enableFilterPillMode();\n\t\t\t\t\tref.registerFilterPillClosePopover(this.closePopover);\n\t\t\t\t\tref.registerFilterPillUpdatePosition?.(this.updatePosition);\n\t\t\t\t\tref.onFilterPillOpened?.();\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}\n\n\tclosePopover = () => {\n\t\tthis.popoverRef()?.close();\n\t\tthis.inputComponentRef()?.onFilterPillClosed?.();\n\t};\n\n\tupdatePosition = () => {\n\t\tthis.popoverRef()?.updatePosition();\n\t};\n}\n","<button\n\ttype=\"button\"\n\tclass=\"impersonation-trigger\"\n\t[class.is-active]=\"isNotMe() && selectedUser()\"\n\t[luPopover2]=\"impersonationPopover\"\n\t[luPopoverNoCloseButton]=\"true\"\n\t[customPositions]=\"popoverPositions\"\n\t[luPopoverAnchor]=\"elementRef\"\n\t#popoverRef=\"luPopover2\"\n\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n>\n\t<span class=\"pr-u-mask\">{{ intl().switchProfile }}</span>\n\n\t@let user = selectedUser();\n\t@if (user) {\n\t\t<lu-user-picture aria-hidden=\"true\" [user]=\"user\" size=\"S\" softRounded />\n\t\t{{ user | luUserDisplay }}\n\t} @else {\n\t\t<lu-user-picture placeholder aria-hidden=\"true\" size=\"S\" softRounded />\n\t\t<div class=\"skeleton is-loading\" style=\"inline-size: 5.5rem\">\n\t\t\t<span class=\"skeleton-item\"></span>\n\t\t</div>\n\t}\n\t<span class=\"pr-u-mask\">{{ intl().a11yNavigationDescription }}</span>\n\t<lu-icon class=\"impersonation-trigger-icon\" icon=\"chevronBottom\" />\n</button>\n<lu-clear class=\"impersonation-clear\" (onClear)=\"clear.emit()\" [intl]=\"{ clear: intl().clear }\" />\n\n<ng-template #impersonationPopover>\n\t<div class=\"impersonation_popover-content popover-contentOptional\">\n\t\t<lu-simple-select impersonation [(ngModel)]=\"selectedUser\" users [enableFormerEmployees]=\"enableFormerEmployees()\" #selectRef>\n\t\t\t<ng-container *luOption=\"let user; select: selectRef\">\n\t\t\t\t<div class=\"impersonation_popover-content-option\" [class.mod-me]=\"currentUserId === user.id\">\n\t\t\t\t\t<lu-user-picture aria-hidden=\"true\" [user]=\"user\" size=\"XS\" softRounded />\n\t\t\t\t\t<div>\n\t\t\t\t\t\t@if (currentUserId === user.id) {\n\t\t\t\t\t\t\t{{ intl().me }} <span translate=\"no\">{{ user | luUserDisplay }}</span>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span translate=\"no\">{{ user | luUserDisplay }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Handle homonyms -->\n\t\t\t\t\t\t@if (user.additionalInformation) {\n\t\t\t\t\t\t\t<div class=\"option-additional\">\n\t\t\t\t\t\t\t\t{{ user.additionalInformation }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</lu-simple-select>\n\t</div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["ɵLU_CORE_SELECT_CURRENT_USER_ID"],"mappings":"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"}
+{"version":3,"file":"lucca-front-ng-impersonation.mjs","sources":["../../../packages/ng/impersonation/impersonation/translations.ts","../../../packages/ng/impersonation/impersonation/impersonation.translate.ts","../../../packages/ng/impersonation/impersonation/impersonation.component.ts","../../../packages/ng/impersonation/impersonation/impersonation.component.html","../../../packages/ng/impersonation/lucca-front-ng-impersonation.ts"],"sourcesContent":["export const Translations = {\n\t'nl-BE': {\n\t\ta11yNavigationDescription: '– De inhoud van de pagina wordt bijgewerkt zodra dit filter wordt gewijzigd',\n\t\tswitchProfile: 'Profiel wijzigen:',\n\t\tclear: 'Terug naar standaardprofiel',\n\t},\n\tnl: {\n\t\ta11yNavigationDescription: '– De inhoud van de pagina wordt bijgewerkt zodra dit filter wordt gewijzigd',\n\t\tswitchProfile: 'Profiel wijzigen:',\n\t\tclear: 'Terug naar standaardprofiel',\n\t},\n\tit: {\n\t\ta11yNavigationDescription: '– Il contenuto della pagina si aggiorna non appena questo filtro viene modificato',\n\t\tswitchProfile: 'Cambia profilo:',\n\t\tclear: 'Torna al profilo predefinito',\n\t},\n\tfr: {\n\t\ta11yNavigationDescription: '– Le contenu de la page s’actualise dès que ce filtre est modifié',\n\t\tswitchProfile: 'Changer de profil :',\n\t\tclear: 'Revenir au profil par défaut',\n\t},\n\tpt: {\n\t\ta11yNavigationDescription: '– O conteúdo da página é atualizado assim que este filtro é alterado',\n\t\tswitchProfile: 'Alterar perfil:',\n\t\tclear: 'Voltar ao perfil predefinido',\n\t},\n\tes: {\n\t\ta11yNavigationDescription: '– El contenido de la página se actualiza en cuanto se cambia este filtro',\n\t\tswitchProfile: 'Cambiar de perfil:',\n\t\tclear: 'Volver al perfil predeterminado',\n\t},\n\tde: {\n\t\ta11yNavigationDescription: '– Der Seiteninhalt wird aktualisiert, sobald dieser Filter geändert wird',\n\t\tswitchProfile: 'Profil wechseln:',\n\t\tclear: 'Zurück zum Standardprofil',\n\t},\n\ten: {\n\t\ta11yNavigationDescription: '– Page content updates as soon as this filter is changed',\n\t\tswitchProfile: 'Switch profile:',\n\t\tclear: 'Back to default profile',\n\t},\n};\n","import { InjectionToken } from '@angular/core';\nimport { LuTranslation } from '@lucca-front/ng/core';\nimport { Translations } from './translations';\n\nexport const LU_IMPERSONATION_TRANSLATIONS = new InjectionToken('LuImpersonationTranslations', {\n\tfactory: () => luImpersonationTranslations,\n});\n\nexport interface LuImpersonationTranslations {\n\ta11yNavigationDescription: string;\n\tswitchProfile: string;\n\tclear: string;\n}\n\nexport const luImpersonationTranslations: LuTranslation<LuImpersonationTranslations> = Translations;\n","import { ConnectionPositionPair } from '@angular/cdk/overlay';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, model, output, untracked, viewChild, ViewEncapsulation } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ClearComponent } from '@lucca-front/ng/clear';\nimport { LuOptionDirective } from '@lucca-front/ng/core-select';\nimport { LU_CORE_SELECT_USER_TRANSLATIONS, LuCoreSelectUsersDirective, ɵLU_CORE_SELECT_CURRENT_USER_ID } from '@lucca-front/ng/core-select/user';\nimport { PopoverDirective } from '@lucca-front/ng/popover2';\nimport { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';\nimport { ILuUser, LuUserDisplayPipe, LuUserPictureComponent } from '@lucca-front/ng/user';\nimport { IconComponent } from '@lucca/prisme/icon';\nimport { LU_IMPERSONATION_TRANSLATIONS } from './impersonation.translate';\nimport { intlInputOptions } from '@lucca-front/ng/core';\n\n@Component({\n\tselector: 'lu-impersonation',\n\timports: [PopoverDirective, FormsModule, LuSimpleSelectInputComponent, LuCoreSelectUsersDirective, LuUserDisplayPipe, LuOptionDirective, LuUserPictureComponent, IconComponent, ClearComponent],\n\ttemplateUrl: './impersonation.component.html',\n\tstyleUrl: './impersonation.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'impersonation',\n\t},\n})\nexport class ImpersonationComponent {\n\tprotected readonly elementRef = inject(ElementRef);\n\treadonly intl = input(...intlInputOptions(LU_CORE_SELECT_USER_TRANSLATIONS, LU_IMPERSONATION_TRANSLATIONS));\n\tprotected readonly currentUserId = inject(ɵLU_CORE_SELECT_CURRENT_USER_ID);\n\n\treadonly inputComponentRef = viewChild<LuSimpleSelectInputComponent<ILuUser>>(LuSimpleSelectInputComponent);\n\n\treadonly popoverRef = viewChild(PopoverDirective);\n\n\treadonly selectedUser = model<ILuUser>();\n\n\treadonly enableFormerEmployees = input(false, { transform: booleanAttribute });\n\n\treadonly isNotMe = computed(() => this.selectedUser()?.id !== this.currentUserId);\n\treadonly clear = output<void>();\n\n\treadonly popoverPositions: ConnectionPositionPair[] = [\n\t\tnew ConnectionPositionPair(\n\t\t\t{ originX: 'start', originY: 'bottom' },\n\t\t\t{\n\t\t\t\toverlayX: 'start',\n\t\t\t\toverlayY: 'top',\n\t\t\t},\n\t\t\t-4,\n\t\t\t0,\n\t\t),\n\t\tnew ConnectionPositionPair(\n\t\t\t{ originX: 'start', originY: 'top' },\n\t\t\t{\n\t\t\t\toverlayX: 'start',\n\t\t\t\toverlayY: 'bottom',\n\t\t\t},\n\t\t\t-4,\n\t\t\t0,\n\t\t),\n\t];\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tconst ref = this.inputComponentRef();\n\t\t\t// Because ref appears only when opening the panel, we're going to call the impersonation opened hook too\n\t\t\tif (ref) {\n\t\t\t\tuntracked(() => {\n\t\t\t\t\tref.enableFilterPillMode?.();\n\t\t\t\t\tref.registerFilterPillClosePopover(this.closePopover);\n\t\t\t\t\tref.registerFilterPillUpdatePosition?.(this.updatePosition);\n\t\t\t\t\tref.onFilterPillOpened?.();\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}\n\n\tclosePopover = () => {\n\t\tthis.popoverRef()?.close();\n\t\tthis.inputComponentRef()?.onFilterPillClosed?.();\n\t};\n\n\tupdatePosition = () => {\n\t\tthis.popoverRef()?.updatePosition();\n\t};\n}\n","<button\n\ttype=\"button\"\n\tclass=\"impersonation-trigger\"\n\t[class.is-active]=\"isNotMe() && selectedUser()\"\n\t[luPopover2]=\"impersonationPopover\"\n\t[luPopoverNoCloseButton]=\"true\"\n\t[customPositions]=\"popoverPositions\"\n\t[luPopoverAnchor]=\"elementRef\"\n\t#popoverRef=\"luPopover2\"\n\t[attr.aria-expanded]=\"popoverRef.opened()\"\n\t(keydown.arrowDown)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n\t(keydown.arrowUp)=\"$event.preventDefault(); popoverRef.openPopover(true)\"\n>\n\t<span class=\"pr-u-mask\">{{ intl().switchProfile }}</span>\n\n\t@let user = selectedUser();\n\t@if (user) {\n\t\t<lu-user-picture aria-hidden=\"true\" [user]=\"user\" size=\"S\" softRounded />\n\t\t{{ user | luUserDisplay }}\n\t} @else {\n\t\t<lu-user-picture placeholder aria-hidden=\"true\" size=\"S\" softRounded />\n\t\t<div class=\"skeleton is-loading\" style=\"inline-size: 5.5rem\">\n\t\t\t<span class=\"skeleton-item\"></span>\n\t\t</div>\n\t}\n\t<span class=\"pr-u-mask\">{{ intl().a11yNavigationDescription }}</span>\n\t<lu-icon class=\"impersonation-trigger-icon\" icon=\"chevronBottom\" />\n</button>\n<lu-clear class=\"impersonation-clear\" (onClear)=\"clear.emit()\" [intl]=\"{ clear: intl().clear }\" />\n\n<ng-template #impersonationPopover>\n\t<div class=\"impersonation_popover-content popover-contentOptional\">\n\t\t<lu-simple-select impersonation [(ngModel)]=\"selectedUser\" users [enableFormerEmployees]=\"enableFormerEmployees()\" #selectRef>\n\t\t\t<ng-container *luOption=\"let user; select: selectRef\">\n\t\t\t\t<div class=\"impersonation_popover-content-option\" [class.mod-me]=\"currentUserId === user.id\">\n\t\t\t\t\t<lu-user-picture aria-hidden=\"true\" [user]=\"user\" size=\"XS\" softRounded />\n\t\t\t\t\t<div>\n\t\t\t\t\t\t@if (currentUserId === user.id) {\n\t\t\t\t\t\t\t{{ intl().me }} <span translate=\"no\">{{ user | luUserDisplay }}</span>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span translate=\"no\">{{ user | luUserDisplay }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Handle homonyms -->\n\t\t\t\t\t\t@if (user.additionalInformation) {\n\t\t\t\t\t\t\t<div class=\"option-additional\">\n\t\t\t\t\t\t\t\t{{ user.additionalInformation }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</lu-simple-select>\n\t</div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["ɵLU_CORE_SELECT_CURRENT_USER_ID"],"mappings":"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"}

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

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Pipe, signal, computed, forwardRef, HostListener, ChangeDetectionStrategy, Component, Injector, ChangeDetectorRef, ElementRef, Injectable, input, model, viewChild, ViewContainerRef, LOCALE_ID, booleanAttribute, numberAttribute, HostBinding, Input, ViewEncapsulation, DestroyRef, Directive, effect, ViewChild } from '@angular/core';
+import { InjectionToken, inject, Pipe, signal, computed, forwardRef, ChangeDetectionStrategy, Component, Injector, ChangeDetectorRef, ElementRef, Injectable, input, model, viewChild, ViewContainerRef, LOCALE_ID, booleanAttribute, numberAttribute, HostListener, HostBinding, Input, ViewEncapsulation, DestroyRef, Directive, effect, ViewChild } from '@angular/core';
 import { toSignal, toObservable, takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
 import { PortalDirective, getPushPanelViewportMargin, intlInputOptions, isNotNil, ɵeffectWithDeps as _effectWithDeps, isNil } from '@lucca-front/ng/core';
 import * as i1$1 from '@lucca-front/ng/core-select';
-import { LuSelectPanelRef, ɵIsSelectedStrategy as _IsSelectedStrategy, SELECT_ID, CoreSelectKeyManager, ɵgetGroupTemplateLocation as _getGroupTemplateLocation, ɵLuOptionComponent as _LuOptionComponent, ɵCoreSelectPanelElement as _CoreSelectPanelElement, LuIsOptionSelectedPipe, ɵLuOptionGroupPipe as _LuOptionGroupPipe, TreeDisplayPipe, SELECT_PANEL_INSTANCE, SELECT_LABEL_ID, addAttributesOnCdkContainer, ALuSelectInputComponent, LU_CORE_SELECT_TRANSLATIONS, ɵLuOptionOutletDirective as _LuOptionOutletDirective, provideLuSelectLabelsAndIds, LU_OPTION_CONTEXT, CORE_SELECT_API_TOTAL_COUNT_PROVIDER } from '@lucca-front/ng/core-select';
-import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { LuSelectPanelRef, ɵIsSelectedStrategy as _IsSelectedStrategy, SELECT_ID, ɵinjectPointerNavigation as _injectPointerNavigation, CoreSelectKeyManager, ɵgetGroupTemplateLocation as _getGroupTemplateLocation, ɵLuOptionComponent as _LuOptionComponent, ɵCoreSelectPanelElement as _CoreSelectPanelElement, LuIsOptionSelectedPipe, ɵLuOptionGroupPipe as _LuOptionGroupPipe, TreeDisplayPipe, SELECT_PANEL_INSTANCE, SELECT_LABEL_ID, addAttributesOnCdkContainer, ALuSelectInputComponent, LU_CORE_SELECT_TRANSLATIONS, ɵLuOptionOutletDirective as _LuOptionOutletDirective, provideLuSelectLabelsAndIds, LU_OPTION_CONTEXT, CORE_SELECT_API_TOTAL_COUNT_PROVIDER } from '@lucca-front/ng/core-select';
+import { NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ClearComponent } from '@lucca-front/ng/clear';
 import { FilterPillDisplayerDirective, FilterPillLabelDirective, FILTER_PILL_INPUT_COMPONENT } from '@lucca-front/ng/filter-pills';
 import * as i1 from '@lucca-front/ng/form-field';
-import { ɵPresentationDisplayDefaultDirective as _PresentationDisplayDefaultDirective, PresentationDisplayDirective, InputDirective, FormFieldComponent } from '@lucca-front/ng/form-field';
+import { ɵPresentationDisplayDefaultDirective as _PresentationDisplayDefaultDirective, InputDirective, FormFieldComponent } from '@lucca-front/ng/form-field';
 import { LuTooltipModule } from '@lucca-front/ng/tooltip';
 import { IconComponent as IconComponent$1 } from '@lucca/prisme/icon';
 import { EMPTY, takeUntil, Subject, of, BehaviorSubject } from 'rxjs';
@@ -259,8 +259,7 @@ class LuMultiSelectPanelComponent {
         this.optionTpl = this.selectInput.optionTpl;
         this.options = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.pointerNavigation = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pointerNavigation" }] : /* istanbul ignore next */ []));
+        this.pointerNavigation = _injectPointerNavigation();
         this.keyManager = inject(CoreSelectKeyManager);
         this.someGroupOptionEnabled = computed(() => {
             return (groupOptions) => {
@@ -276,12 +275,6 @@ class LuMultiSelectPanelComponent {
         this.shouldDisplayAddOption$ = this.selectInput.shouldDisplayAddOption$;
         this.groupTemplateLocation$ = _getGroupTemplateLocation(this.hasGrouping$, this.clueChange$, this.options$, this.searchable);
     }
-    onKeydown() {
-        this.pointerNavigation.set(false);
-    }
-    onMousemove() {
-        this.pointerNavigation.set(true);
-    }
     onScroll(evt) {
         if (!(evt.target instanceof HTMLElement)) {
             return;
@@ -337,7 +330,7 @@ class LuMultiSelectPanelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", host: { listeners: { "document:keydown": "onKeydown()", "document:mousemove": "onMousemove()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", providers: [
             CoreSelectKeyManager,
             {
                 provide: SELECT_PANEL_INSTANCE,
@@ -368,13 +361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: forwardRef(() => LuMultiSelectPanelComponent),
                         },
                     ], template: "@if (\n\t{\n\t\toptions: (options$ | async) || [],\n\t\tclueChange: (clueChange$ | async) || \"\",\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t};\n\tas ctx\n) {\n\t<div class=\"lu-picker-panel lu-option-picker-panel mod-multiple\" data-testid=\"dialog-panel\">\n\t\t<div\n\t\t\tclass=\"lu-picker-content\"\n\t\t\t[class.is-loading]=\"loading()\"\n\t\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\t\ttabindex=\"0\"\n\t\t\trole=\"listbox\"\n\t\t\taria-multiselectable=\"true\"\n\t\t\t(scroll)=\"onScroll($event)\"\n\t\t>\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\t<div class=\"lu-picker-content-option\">\n\t\t\t\t@if (grouping() && ctx.groupTemplateLocation === \"group-header\") {\n\t\t\t\t\t@for (\n\t\t\t\t\t\tgroup of ctx.options | luOptionGroup: grouping().selector;\n\t\t\t\t\t\ttrack trackGroupsBy(groupIndex, group);\n\t\t\t\t\t\tlet groupIndex = $index\n\t\t\t\t\t) {\n\t\t\t\t\t\t<div class=\"lu-picker-content-group\" role=\"group\" attr.aria-labelledby=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\">\n\t\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer;\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\telementId=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t\t\t\t\tclass=\"lu-picker-content-option-group-title\"\n\t\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ groupingTitleRef.innerText }}\u00A0\u2013 </span\n\t\t\t\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl().unselectAll : intl().selectAll }}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (!grouping() || ctx.groupTemplateLocation !== \"group-header\") {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t\t}\n\t\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) {\n\t\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t\t\t[optionComparer]=\"optionComparer\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (option of options; track trackOptionsBy(index, option); let index = $index) {\n\t\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selectedOptions\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</ng-template>\n\t\t\t\t@if (ctx.options.length === 0 && !loading()) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t\t{{ ctx.clueChange.length ? intl().emptyResults : intl().emptyOptions }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@if (loading()) {\n\t\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t\t<div class=\"loading\">{{ intl().loading }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"addOption palette-product\"\n\t\t\t\t\t[class.is-stuck]=\"true\"\n\t\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t>\n\t\t\t\t\t<div class=\"addOption-content\">\n\t\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\n", styles: ["@layer components{.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}}@layer components{.addOption{position:sticky;inset-block-end:0;background-color:var(--pr-t-elevation-surface-raised)}}@layer mods{.addOption.is-highlighted .addOption-content{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption.is-stuck{margin-block-start:var(--pr-t-spacings-100);box-shadow:0 0 0 4px var(--pr-t-elevation-surface-raised),0 0 0 1px color-mix(in srgb,var(--palettes-neutral-400) 8%,transparent),0 0 4px 4px color-mix(in srgb,var(--palettes-neutral-400) 32%,transparent),0 0 8px 4px color-mix(in srgb,var(--palettes-neutral-400) 24%,transparent)}}@layer components{.addOption-content{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--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: var(--pr-t-elevation-shadow-button);--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-AI-background-opacity: 25%;--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(--components-button-borderRadius);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}.addOption-content,.addOption-content:is(a){color:var(--components-button-color)}.addOption-content .lucca-icon{display:block}.addOption-content .button-icon{--icon-size: 1.5rem}.addOption-content: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-content: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-content:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption-content:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption-content:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption-content:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption-content{--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption-content:hover,.addOption-content:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption-content:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption-content:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption-content{justify-content:left;--components-button-padding: var(--pr-t-spacings-50)}}\n"] }]
-        }], propDecorators: { onKeydown: [{
-                type: HostListener,
-                args: ['document:keydown']
-            }], onMousemove: [{
-                type: HostListener,
-                args: ['document:mousemove']
-            }] } });
+        }] });
 
 class BaseMultiSelectPanelRef extends LuMultiSelectPanelRef {
     constructor(parentInjector, selectInput) {
@@ -522,6 +509,22 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
         ...(ngDevMode ? [{ debugName: "valuesTpl" }] : /* istanbul ignore next */ []));
         this.maxValuesShown = 500;
         this.keepSearchAfterSelection = false;
+        /**
+         * @deprecated use filterPillLabelPluralFn
+         */
+        this.filterPillLabelPlural = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPillLabelPlural" }] : /* istanbul ignore next */ []));
+        this.filterPillLabelPluralFn = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPillLabelPluralFn" }] : /* istanbul ignore next */ []));
+        this.filterPillLabelPluralValue = computed(() => {
+            const label = this.filterPillLabelPluralFn();
+            const count = this.valueLength();
+            if (label) {
+                return label(count);
+            }
+            return `${count} ${this.filterPillLabelPlural()}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPillLabelPluralValue" }] : /* istanbul ignore next */ []));
         this.selectParent$ = new Subject();
         this.selectChildren$ = new Subject();
         this.hideCombobox = computed(() => this.valueSignal()?.length > 1, /* @ts-ignore */
@@ -536,6 +539,8 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
         ...(ngDevMode ? [{ debugName: "valueLength" }] : /* istanbul ignore next */ []));
         this.useSingleOptionDisplayer = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "useSingleOptionDisplayer" }] : /* istanbul ignore next */ []));
+        this.singleOptionForDisplay = computed(() => this.valueSignal()?.[0], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "singleOptionForDisplay" }] : /* istanbul ignore next */ []));
         this._value = [];
         this.#listFormat = new Intl.ListFormat(inject(LOCALE_ID));
         this.presentationSeparators = computed(() => listSeparators(this.#listFormat, this.valueSignal()?.length ?? 0), /* @ts-ignore */
@@ -609,7 +614,7 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
         this.focusInput$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuMultiSelectInputComponent, isStandalone: true, selector: "lu-multi-select", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, valuesTpl: { classPropertyName: "valuesTpl", publicName: "valuesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxValuesShown: { classPropertyName: "maxValuesShown", publicName: "maxValuesShown", isSignal: false, isRequired: false, transformFunction: numberAttribute }, keepSearchAfterSelection: { classPropertyName: "keepSearchAfterSelection", publicName: "keepSearchAfterSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterPillLabelPlural: { classPropertyName: "filterPillLabelPlural", publicName: "filterPillLabelPlural", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valuesTpl: "valuesTplChange" }, host: { listeners: { "keydown.control.enter": "selectParentOnly()", "keydown.shift.enter": "selectChildrenOnly()" }, properties: { "class.mod-filterPill": "this.filterPillClass" }, classAttribute: "multiSelect" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuMultiSelectInputComponent, isStandalone: true, selector: "lu-multi-select", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, valuesTpl: { classPropertyName: "valuesTpl", publicName: "valuesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxValuesShown: { classPropertyName: "maxValuesShown", publicName: "maxValuesShown", isSignal: false, isRequired: false, transformFunction: numberAttribute }, keepSearchAfterSelection: { classPropertyName: "keepSearchAfterSelection", publicName: "keepSearchAfterSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterPillLabelPlural: { classPropertyName: "filterPillLabelPlural", publicName: "filterPillLabelPlural", isSignal: true, isRequired: false, transformFunction: null }, filterPillLabelPluralFn: { classPropertyName: "filterPillLabelPluralFn", publicName: "filterPillLabelPluralFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesTpl: "valuesTplChange" }, host: { listeners: { "keydown.control.enter": "selectParentOnly()", "keydown.shift.enter": "selectChildrenOnly()" }, properties: { "class.mod-filterPill": "this.filterPillClass" }, classAttribute: "multiSelect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LuMultiSelectInputComponent),
@@ -625,7 +630,7 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
                 provide: FILTER_PILL_INPUT_COMPONENT,
                 useExisting: forwardRef(() => LuMultiSelectInputComponent),
             },
-        ], viewQueries: [{ propertyName: "filterPillPanelAnchorRef", first: true, predicate: ["filterPillPanelAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *luOptionOutlet=\"valuesTpl(); value: value || []\" />\n\n@if (!filterPillMode) {\n\t@if (hasValue() && clearable && (disabled$ | async) === false) {\n\t\t<lu-clear class=\"multipleSelect-clear\" (onClear)=\"clearValue($event)\">{{ intl().clear }}</lu-clear>\n\t}\n\n\t<lu-icon icon=\"arrowChevronBottom\" class=\"multipleSelect-arrow\" />\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"multipleSelect-searchIcon\" />\n}\n\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<div class=\"multipleSelect-displayer-filter\">\n\t\t@if (useSingleOptionDisplayer() && valueLength() === 1) {\n\t\t\t<div class=\"multipleSelect-pill-displayer-chip\">\n\t\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value[0]\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-container>\n<ng-container *luFilterPillLabel=\"let label = label; let colon = colon\">\n\t@let minCount = useSingleOptionDisplayer() ? 1 : 0;\n\t@if (valueLength() > minCount) {\n\t\t<span class=\"multipleSelect-pill-displayer-label\">{{ valueLength() }}\u00A0{{ filterPillLabelPlural }}</span>\n\t} @else {\n\t\t{{ label }}{{ valueLength() === 1 ? colon : \"\" }}\n\t}\n</ng-container>\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@for (v of value; track $index) {\n\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: v\" />\n\n\t\t\t@let separator = presentationSeparators()[$index];\n\n\t\t\t@if (separator) {\n\t\t\t\t<ng-container>{{ separator }}</ng-container>\n\t\t\t}\n\t\t} @empty {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.multiSelect{--components-multiSelect-font: var(--pr-t-font-body-M);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--pr-t-color-input-background);--components-multiSelect-border-color: var(--pr-t-color-input-border);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);--components-multiSelect-displayer-suffix-display: contents;display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--pr-t-color-input-border-hover)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-suffix{display:var(--components-multiSelect-displayer-suffix-display);gap:var(--pr-t-spacings-50);flex:1;order:1}.multipleSelect-displayer-chip.chip{min-inline-size:0;--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}.multipleSelect-displayer-chip-value{max-inline-size:8.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-inline-size:2rem;inline-size:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--pr-t-color-input-text);font:var(--components-multiSelect-font);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font:var(--components-multiSelect-font)}.multipleSelect-clear{margin-block-end:var(--pr-t-spacings-50)}.multipleSelect-arrow,.multipleSelect-searchIcon{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multipleSelect-searchIcon{display:none}.multipleSelect-pill-displayer-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multipleSelect-pill-displayer-label{font-weight:var(--pr-t-font-fontWeight-semibold)}.multiSelect-field-icon{order:1}}@layer mods{.multiSelect.mod-S{--components-multiSelect-font: var(--pr-t-font-body-S);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow,.multiSelect.mod-S .multipleSelect-searchIcon{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.multiSelect.mod-S .multipleSelect-displayer-chip.chip .lucca-icon,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip) .lucca-icon{--icon-size: .75rem}.multiSelect.mod-filterPill{--components-multiSelect-displayer-suffix-display: flex;flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:26.5rem;max-inline-size:calc(100vw - 2.5rem)}.multiSelect.mod-filterPill .multipleSelect-displayer{box-shadow:0 0 0 1px var(--components-multiSelect-border-color);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);z-index:1;position:relative;max-block-size:min(14rem,80vh);overflow:auto}.multiSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.multiSelect.mod-filterPill .lu-picker-content lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.multiSelect.mod-filterPill:has(.multipleSelect-displayer-search:focus-visible){outline:none}.multiSelect.mod-filterPill .multipleSelect-displayer:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect.mod-filterPill.is-selected .multipleSelect-displayer-search[readonly]{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}.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search:not(:focus),.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search[readonly]{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}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);--components-multiSelect-background: var(--pr-t-color-input-background-critical);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-background: var(--commons-disabled-background);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);pointer-events:none}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip .chip-kill{display:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(180deg)}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow{display:none}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon{display:inline-flex;transform:none}}@layer components{.multipleSelect-displayer-filter{min-inline-size:0;display:flex;gap:.5ch}.multipleSelect-displayer-filter:empty{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.chip.mod-product{--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}}\n"], dependencies: [{ kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: FilterPillDisplayerDirective, selector: "[luFilterPillDisplayer]" }, { kind: "directive", type: FilterPillLabelDirective, selector: "[luFilterPillLabel]" }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "component", type: IconComponent$1, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "filterPillPanelAnchorRef", first: true, predicate: ["filterPillPanelAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *luOptionOutlet=\"valuesTpl(); value: value || []\" />\n\n@if (!filterPillMode) {\n\t@if (hasValue() && clearable && (disabled$ | async) === false) {\n\t\t<lu-clear class=\"multipleSelect-clear\" (onClear)=\"clearValue($event)\">{{ intl().clear }}</lu-clear>\n\t}\n\n\t<lu-icon icon=\"arrowChevronBottom\" class=\"multipleSelect-arrow\" />\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"multipleSelect-searchIcon\" />\n}\n\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<div class=\"multipleSelect-displayer-filter\">\n\t\t@if (useSingleOptionDisplayer() && valueLength() === 1 && singleOptionForDisplay() !== undefined) {\n\t\t\t<div class=\"multipleSelect-pill-displayer-chip\">\n\t\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: singleOptionForDisplay()\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-container>\n<ng-container *luFilterPillLabel=\"let label = label; let colon = colon\">\n\t@let minCount = useSingleOptionDisplayer() ? 1 : 0;\n\t@if (valueLength() > minCount) {\n\t\t<span class=\"multipleSelect-pill-displayer-label\">{{ filterPillLabelPluralValue() }}</span>\n\t} @else {\n\t\t{{ label }}{{ valueLength() === 1 ? colon : \"\" }}\n\t}\n</ng-container>\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@for (v of value; track $index) {\n\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: v\" />\n\n\t\t\t@let separator = presentationSeparators()[$index];\n\n\t\t\t@if (separator) {\n\t\t\t\t<ng-container>{{ separator }}</ng-container>\n\t\t\t}\n\t\t} @empty {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.multiSelect{--components-multiSelect-font: var(--pr-t-font-body-M);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--pr-t-color-input-background);--components-multiSelect-border-color: var(--pr-t-color-input-border);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);--components-multiSelect-displayer-suffix-display: contents;display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--pr-t-color-input-border-hover)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-suffix{display:var(--components-multiSelect-displayer-suffix-display);gap:var(--pr-t-spacings-50);flex:1;order:1}.multipleSelect-displayer-chip.chip{min-inline-size:0;--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}.multipleSelect-displayer-chip-value{max-inline-size:8.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-inline-size:2rem;inline-size:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--pr-t-color-input-text);font:var(--components-multiSelect-font);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font:var(--components-multiSelect-font)}.multipleSelect-clear{margin-block-end:var(--pr-t-spacings-50)}.multipleSelect-arrow,.multipleSelect-searchIcon{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multipleSelect-searchIcon{display:none}.multipleSelect-pill-displayer-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multipleSelect-pill-displayer-label{font-weight:var(--pr-t-font-fontWeight-semibold)}.multiSelect-field-icon{order:1}}@layer mods{.multiSelect.mod-S{--components-multiSelect-font: var(--pr-t-font-body-S);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow,.multiSelect.mod-S .multipleSelect-searchIcon{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.multiSelect.mod-S .multipleSelect-displayer-chip.chip .lucca-icon,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip) .lucca-icon{--icon-size: .75rem}.multiSelect.mod-filterPill{--components-multiSelect-displayer-suffix-display: flex;flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:26.5rem;max-inline-size:calc(100vw - 2.5rem)}.multiSelect.mod-filterPill .multipleSelect-displayer{box-shadow:0 0 0 1px var(--components-multiSelect-border-color);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);z-index:1;position:relative;max-block-size:min(14rem,80vh);overflow:auto}.multiSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.multiSelect.mod-filterPill .lu-picker-content lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.multiSelect.mod-filterPill:has(.multipleSelect-displayer-search:focus-visible){outline:none}.multiSelect.mod-filterPill .multipleSelect-displayer:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect.mod-filterPill.is-selected .multipleSelect-displayer-search[readonly]{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}.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search:not(:focus),.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search[readonly]{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}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);--components-multiSelect-background: var(--pr-t-color-input-background-critical);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-background: var(--pr-t-color-input-background-disabled);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);pointer-events:none}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip .chip-kill{display:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(180deg)}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow{display:none}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon{display:inline-flex;transform:none}}@layer components{.multipleSelect-displayer-filter{min-inline-size:0;display:flex;gap:.5ch}.multipleSelect-displayer-filter:empty{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.chip.mod-product{--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}}\n"], dependencies: [{ kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: FilterPillDisplayerDirective, selector: "[luFilterPillDisplayer]" }, { kind: "directive", type: FilterPillLabelDirective, selector: "[luFilterPillLabel]" }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "component", type: IconComponent$1, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectInputComponent, decorators: [{
             type: Component,
@@ -636,7 +641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         FilterPillDisplayerDirective,
                         FilterPillLabelDirective,
                         ClearComponent,
-                        PresentationDisplayDirective,
+                        CommonModule,
                         _PresentationDisplayDefaultDirective,
                         IconComponent$1,
                     ], providers: [
@@ -657,16 +662,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         },
                     ], host: {
                         class: 'multiSelect',
-                    }, encapsulation: ViewEncapsulation.None, template: "<ng-container *luOptionOutlet=\"valuesTpl(); value: value || []\" />\n\n@if (!filterPillMode) {\n\t@if (hasValue() && clearable && (disabled$ | async) === false) {\n\t\t<lu-clear class=\"multipleSelect-clear\" (onClear)=\"clearValue($event)\">{{ intl().clear }}</lu-clear>\n\t}\n\n\t<lu-icon icon=\"arrowChevronBottom\" class=\"multipleSelect-arrow\" />\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"multipleSelect-searchIcon\" />\n}\n\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<div class=\"multipleSelect-displayer-filter\">\n\t\t@if (useSingleOptionDisplayer() && valueLength() === 1) {\n\t\t\t<div class=\"multipleSelect-pill-displayer-chip\">\n\t\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value[0]\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-container>\n<ng-container *luFilterPillLabel=\"let label = label; let colon = colon\">\n\t@let minCount = useSingleOptionDisplayer() ? 1 : 0;\n\t@if (valueLength() > minCount) {\n\t\t<span class=\"multipleSelect-pill-displayer-label\">{{ valueLength() }}\u00A0{{ filterPillLabelPlural }}</span>\n\t} @else {\n\t\t{{ label }}{{ valueLength() === 1 ? colon : \"\" }}\n\t}\n</ng-container>\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@for (v of value; track $index) {\n\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: v\" />\n\n\t\t\t@let separator = presentationSeparators()[$index];\n\n\t\t\t@if (separator) {\n\t\t\t\t<ng-container>{{ separator }}</ng-container>\n\t\t\t}\n\t\t} @empty {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.multiSelect{--components-multiSelect-font: var(--pr-t-font-body-M);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--pr-t-color-input-background);--components-multiSelect-border-color: var(--pr-t-color-input-border);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);--components-multiSelect-displayer-suffix-display: contents;display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--pr-t-color-input-border-hover)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-suffix{display:var(--components-multiSelect-displayer-suffix-display);gap:var(--pr-t-spacings-50);flex:1;order:1}.multipleSelect-displayer-chip.chip{min-inline-size:0;--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}.multipleSelect-displayer-chip-value{max-inline-size:8.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-inline-size:2rem;inline-size:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--pr-t-color-input-text);font:var(--components-multiSelect-font);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font:var(--components-multiSelect-font)}.multipleSelect-clear{margin-block-end:var(--pr-t-spacings-50)}.multipleSelect-arrow,.multipleSelect-searchIcon{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multipleSelect-searchIcon{display:none}.multipleSelect-pill-displayer-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multipleSelect-pill-displayer-label{font-weight:var(--pr-t-font-fontWeight-semibold)}.multiSelect-field-icon{order:1}}@layer mods{.multiSelect.mod-S{--components-multiSelect-font: var(--pr-t-font-body-S);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow,.multiSelect.mod-S .multipleSelect-searchIcon{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.multiSelect.mod-S .multipleSelect-displayer-chip.chip .lucca-icon,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip) .lucca-icon{--icon-size: .75rem}.multiSelect.mod-filterPill{--components-multiSelect-displayer-suffix-display: flex;flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:26.5rem;max-inline-size:calc(100vw - 2.5rem)}.multiSelect.mod-filterPill .multipleSelect-displayer{box-shadow:0 0 0 1px var(--components-multiSelect-border-color);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);z-index:1;position:relative;max-block-size:min(14rem,80vh);overflow:auto}.multiSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.multiSelect.mod-filterPill .lu-picker-content lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.multiSelect.mod-filterPill:has(.multipleSelect-displayer-search:focus-visible){outline:none}.multiSelect.mod-filterPill .multipleSelect-displayer:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect.mod-filterPill.is-selected .multipleSelect-displayer-search[readonly]{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}.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search:not(:focus),.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search[readonly]{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}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);--components-multiSelect-background: var(--pr-t-color-input-background-critical);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-background: var(--commons-disabled-background);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);pointer-events:none}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip .chip-kill{display:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(180deg)}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow{display:none}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon{display:inline-flex;transform:none}}@layer components{.multipleSelect-displayer-filter{min-inline-size:0;display:flex;gap:.5ch}.multipleSelect-displayer-filter:empty{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.chip.mod-product{--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, template: "<ng-container *luOptionOutlet=\"valuesTpl(); value: value || []\" />\n\n@if (!filterPillMode) {\n\t@if (hasValue() && clearable && (disabled$ | async) === false) {\n\t\t<lu-clear class=\"multipleSelect-clear\" (onClear)=\"clearValue($event)\">{{ intl().clear }}</lu-clear>\n\t}\n\n\t<lu-icon icon=\"arrowChevronBottom\" class=\"multipleSelect-arrow\" />\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"multipleSelect-searchIcon\" />\n}\n\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<div class=\"multipleSelect-displayer-filter\">\n\t\t@if (useSingleOptionDisplayer() && valueLength() === 1 && singleOptionForDisplay() !== undefined) {\n\t\t\t<div class=\"multipleSelect-pill-displayer-chip\">\n\t\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: singleOptionForDisplay()\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-container>\n<ng-container *luFilterPillLabel=\"let label = label; let colon = colon\">\n\t@let minCount = useSingleOptionDisplayer() ? 1 : 0;\n\t@if (valueLength() > minCount) {\n\t\t<span class=\"multipleSelect-pill-displayer-label\">{{ filterPillLabelPluralValue() }}</span>\n\t} @else {\n\t\t{{ label }}{{ valueLength() === 1 ? colon : \"\" }}\n\t}\n</ng-container>\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@for (v of value; track $index) {\n\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: v\" />\n\n\t\t\t@let separator = presentationSeparators()[$index];\n\n\t\t\t@if (separator) {\n\t\t\t\t<ng-container>{{ separator }}</ng-container>\n\t\t\t}\n\t\t} @empty {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.multiSelect{--components-multiSelect-font: var(--pr-t-font-body-M);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--pr-t-color-input-background);--components-multiSelect-border-color: var(--pr-t-color-input-border);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);--components-multiSelect-displayer-suffix-display: contents;display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--pr-t-color-input-border-hover)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-suffix{display:var(--components-multiSelect-displayer-suffix-display);gap:var(--pr-t-spacings-50);flex:1;order:1}.multipleSelect-displayer-chip.chip{min-inline-size:0;--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}.multipleSelect-displayer-chip-value{max-inline-size:8.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-inline-size:2rem;inline-size:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--pr-t-color-input-text);font:var(--components-multiSelect-font);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font:var(--components-multiSelect-font)}.multipleSelect-clear{margin-block-end:var(--pr-t-spacings-50)}.multipleSelect-arrow,.multipleSelect-searchIcon{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multipleSelect-searchIcon{display:none}.multipleSelect-pill-displayer-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multipleSelect-pill-displayer-label{font-weight:var(--pr-t-font-fontWeight-semibold)}.multiSelect-field-icon{order:1}}@layer mods{.multiSelect.mod-S{--components-multiSelect-font: var(--pr-t-font-body-S);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow,.multiSelect.mod-S .multipleSelect-searchIcon{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.multiSelect.mod-S .multipleSelect-displayer-chip.chip .lucca-icon,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip) .lucca-icon{--icon-size: .75rem}.multiSelect.mod-filterPill{--components-multiSelect-displayer-suffix-display: flex;flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:26.5rem;max-inline-size:calc(100vw - 2.5rem)}.multiSelect.mod-filterPill .multipleSelect-displayer{box-shadow:0 0 0 1px var(--components-multiSelect-border-color);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);z-index:1;position:relative;max-block-size:min(14rem,80vh);overflow:auto}.multiSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.multiSelect.mod-filterPill .lu-picker-content lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.multiSelect.mod-filterPill:has(.multipleSelect-displayer-search:focus-visible){outline:none}.multiSelect.mod-filterPill .multipleSelect-displayer:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect.mod-filterPill.is-selected .multipleSelect-displayer-search[readonly]{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}.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search:not(:focus),.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search[readonly]{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}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);--components-multiSelect-background: var(--pr-t-color-input-background-critical);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-background: var(--pr-t-color-input-background-disabled);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);pointer-events:none}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip .chip-kill{display:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(180deg)}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow{display:none}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon{display:inline-flex;transform:none}}@layer components{.multipleSelect-displayer-filter{min-inline-size:0;display:flex;gap:.5ch}.multipleSelect-displayer-filter:empty{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.chip.mod-product{--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}}\n"] }]
         }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], valuesTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuesTpl", required: false }] }, { type: i0.Output, args: ["valuesTplChange"] }], maxValuesShown: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], keepSearchAfterSelection: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], filterPillLabelPlural: [{
-                type: Input
-            }], filterPillClass: [{
+            }], filterPillLabelPlural: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPillLabelPlural", required: false }] }], filterPillLabelPluralFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPillLabelPluralFn", required: false }] }], filterPillClass: [{
                 type: HostBinding,
                 args: ['class.mod-filterPill']
             }], filterPillPanelAnchorRef: [{ type: i0.ViewChild, args: ['filterPillPanelAnchor', { ...{ read: ViewContainerRef }, isSignal: true }] }], selectParentOnly: [{
@@ -854,8 +857,9 @@ class LuMultiSelectAllDisplayerComponent {
         ...(ngDevMode ? [{ debugName: "isFilled" }] : /* istanbul ignore next */ []));
         this.isIncludeMode = computed(() => this.selectAllContext.mode() === 'include', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isIncludeMode" }] : /* istanbul ignore next */ []));
-        this.displayerLabel = this.selectAllContext.displayerLabel;
+        this.displayerLabelValue = this.selectAllContext.displayerLabelValue;
         this.displayerCount = this.selectAllContext.displayerCount;
+        this.displayedSingleOption = this.select.singleOptionForDisplay;
         this.intl = input(...intlInputOptions(LU_MULTI_SELECT_DISPLAYER_TRANSLATIONS), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
         this.disabled = toSignal(this.select.disabled$);
@@ -864,7 +868,7 @@ class LuMultiSelectAllDisplayerComponent {
     unselectOption(option, $event) {
         $event.stopPropagation();
         $event.preventDefault();
-        this.select.updateValue(this.select.value.filter((o) => o !== option), true);
+        this.select.updateValue(this.isIncludeMode() ? this.select.value.filter((o) => o !== option) : [...this.select.value, option], true);
         setTimeout(() => {
             this.select.panelRef?.updatePosition();
             this.inputElementRef().nativeElement.focus();
@@ -877,12 +881,12 @@ class LuMultiSelectAllDisplayerComponent {
 
 			@if (displayerCount() !== null) {
 				<div class="multipleSelect-displayer-filter">
-					@if (displayerCount() === 1 && isIncludeMode()) {
-						<lu-chip withEllipsis (kill)="unselectOption(select.value[0], $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled()">
-							<ng-template *luOptionOutlet="select.displayerTpl(); value: select.value[0]" />
+					@if (displayedSingleOption() !== undefined) {
+						<lu-chip withEllipsis (kill)="unselectOption(displayedSingleOption(), $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled()">
+							<ng-template *luOptionOutlet="select.displayerTpl(); value: displayedSingleOption()" />
 						</lu-chip>
 					} @else {
-						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ displayerCount() }} {{ displayerLabel() }}</lu-chip>
+						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ displayerLabelValue() }}</lu-chip>
 					}
 				</div>
 			}
@@ -897,12 +901,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 			@if (displayerCount() !== null) {
 				<div class="multipleSelect-displayer-filter">
-					@if (displayerCount() === 1 && isIncludeMode()) {
-						<lu-chip withEllipsis (kill)="unselectOption(select.value[0], $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled()">
-							<ng-template *luOptionOutlet="select.displayerTpl(); value: select.value[0]" />
+					@if (displayedSingleOption() !== undefined) {
+						<lu-chip withEllipsis (kill)="unselectOption(displayedSingleOption(), $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled()">
+							<ng-template *luOptionOutlet="select.displayerTpl(); value: displayedSingleOption()" />
 						</lu-chip>
 					} @else {
-						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ displayerCount() }} {{ displayerLabel() }}</lu-chip>
+						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ displayerLabelValue() }}</lu-chip>
 					}
 				</div>
 			}
@@ -974,6 +978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
     #mode;
     #values;
+    #options;
     // only show panel header when no clue && values not empty
     #showPanelHeader;
     #hasValue;
@@ -988,7 +993,20 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         super();
         this.select = inject(LuMultiSelectInputComponent);
         this.intl = this.select.intl;
-        this.displayerLabel = input.required({ ...(ngDevMode ? { debugName: "displayerLabel" } : /* istanbul ignore next */ {}), alias: 'withSelectAllDisplayerLabel' });
+        /**
+         * @deprecated use withSelectAllDisplayerLabelFn
+         */
+        this.displayerLabel = input(undefined, { ...(ngDevMode ? { debugName: "displayerLabel" } : /* istanbul ignore next */ {}), alias: 'withSelectAllDisplayerLabel' });
+        this.displayerLabelFn = input(undefined, { ...(ngDevMode ? { debugName: "displayerLabelFn" } : /* istanbul ignore next */ {}), alias: 'withSelectAllDisplayerLabelFn' });
+        this.displayerLabelValue = computed(() => {
+            const label = this.displayerLabelFn();
+            const count = this.displayerCount();
+            if (label) {
+                return label(count);
+            }
+            return `${count} ${this.displayerLabel()}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayerLabelValue" }] : /* istanbul ignore next */ []));
         this.#mode = signal('none', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#mode" }] : /* istanbul ignore next */ []));
         this.#values = signal([], /* @ts-ignore */
@@ -997,6 +1015,16 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         this.values = this.#values.asReadonly();
         this.totalCount = toSignal(inject(CORE_SELECT_API_TOTAL_COUNT_PROVIDER).totalCount$);
         this.clueChange = toSignal(this.select.clueChange$);
+        this.#options = toSignal(this.select.options$, { initialValue: [] });
+        this.singleRemainingOption = computed(() => {
+            const options = this.#options();
+            const excludedValues = this.#values();
+            if (this.#mode() !== 'exclude' || options.length !== this.totalCount() || options.length - excludedValues.length !== 1) {
+                return undefined;
+            }
+            return options.find((option) => !excludedValues.some((excluded) => this.select.optionComparer(excluded, option)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "singleRemainingOption" }] : /* istanbul ignore next */ []));
         // only show panel header when no clue && values not empty
         this.#showPanelHeader = computed(() => isNil(this.clueChange()) || (this.clueChange()?.length === 0 && this.totalCount() !== 0), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#showPanelHeader" }] : /* istanbul ignore next */ []));
@@ -1042,8 +1070,10 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         this.select.hasValue = () => this.#hasValue();
         this.select.isFilterPillEmpty = computed(() => !this.#hasValue(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFilterPillEmpty" }] : /* istanbul ignore next */ []));
-        this.select.useSingleOptionDisplayer = computed(() => this.#mode() === 'include', /* @ts-ignore */
+        this.select.useSingleOptionDisplayer = computed(() => this.#mode() === 'include' || this.singleRemainingOption() !== undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "useSingleOptionDisplayer" }] : /* istanbul ignore next */ []));
+        this.select.singleOptionForDisplay = computed(() => (this.#mode() === 'include' && this.#valuesCount() === 1 ? this.select.valueSignal()?.[0] : this.singleRemainingOption()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "singleOptionForDisplay" }] : /* istanbul ignore next */ []));
         this.select.valueLength = this.displayerCount;
     }
     setSelectAll(selectAll) {
@@ -1138,7 +1168,7 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         return fromMode;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuMultiSelectWithSelectAllDirective, isStandalone: true, selector: "lu-multi-select[withSelectAll]", inputs: { displayerLabel: { classPropertyName: "displayerLabel", publicName: "withSelectAllDisplayerLabel", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuMultiSelectWithSelectAllDirective, isStandalone: true, selector: "lu-multi-select[withSelectAll]", inputs: { displayerLabel: { classPropertyName: "displayerLabel", publicName: "withSelectAllDisplayerLabel", isSignal: true, isRequired: false, transformFunction: null }, displayerLabelFn: { classPropertyName: "displayerLabelFn", publicName: "withSelectAllDisplayerLabelFn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: _IsSelectedStrategy,
                 useExisting: forwardRef(() => LuMultiSelectWithSelectAllDirective),
@@ -1165,7 +1195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { displayerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelectAllDisplayerLabel", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { displayerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelectAllDisplayerLabel", required: false }] }], displayerLabelFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelectAllDisplayerLabelFn", required: false }] }] } });
 
 class LuMultiSelectContentDisplayerComponent {
     constructor() {