@lucca-front/ng 22.1.0-rc.4 → 22.1.0

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

@@ -228,10 +228,10 @@ class LuOptionsGroupContextPipe {
             isGroupSelected: this.#selectionStrategy.isGroupSelected(groupOptions, notSelectedOptions),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuOptionsGroupContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: LuOptionsGroupContextPipe, isStandalone: true, name: "luOptionsGroupContext" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuOptionsGroupContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.1", ngImport: i0, type: LuOptionsGroupContextPipe, isStandalone: true, name: "luOptionsGroupContext" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuOptionsGroupContextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuOptionsGroupContextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luOptionsGroupContext',
@@ -381,16 +381,16 @@ class LuMultiSelectPanelComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", host: { properties: { "class.is-pointerNavigation": "pointerNavigation()" }, classAttribute: "selectPanel" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", host: { properties: { "class.is-pointerNavigation": "pointerNavigation()" }, classAttribute: "selectPanel" }, providers: [
             CoreSelectKeyManager,
             {
                 provide: SELECT_PANEL_INSTANCE,
                 useExisting: forwardRef(() => LuMultiSelectPanelComponent),
             },
-        ], viewQueries: [{ propertyName: "sheetViewport", first: true, predicate: ["sheetViewport"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the S breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the displayer it covers is no longer reachable \u2014 and its content. -->\n\t<lu-dialog>\n\t\t<lu-dialog-header>\n\t\t\t@if (selectInput.panelTitle(); as title) {\n\t\t\t\t<!-- The interpolation and the marker must stay adjacent in the source: any whitespace between\n\t\t\t\tthem (even just a line break) renders as a literal space, pushing the asterisk away from the\n\t\t\t\ttitle instead of hugging it the way `.formLabel-required`'s own margin expects. -->\n\t\t\t\t@if (selectInput.panelTitleRequired()) {\n\t\t\t\t\t<h1>{{ title }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup></h1>\n\t\t\t\t} @else {\n\t\t\t\t\t<h1>{{ title }}</h1>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div dialogHeaderContent>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"sheetSearch\" />\n\t\t\t</div>\n\t\t</lu-dialog-header>\n\t\t<lu-dialog-content #sheetViewport data-testid=\"dialog-panel\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t\t</lu-dialog-content>\n\t</lu-dialog>\n} @else {\n\t<lu-select-panel-layout\n\t\tclass=\"lu-option-picker-panel mod-multiple\"\n\t\tdata-testid=\"dialog-panel\"\n\t\t[loading]=\"loading()\"\n\t\t[contentTabIndex]=\"0\"\n\t\t(scrolled)=\"onScroll($event)\"\n\t>\n\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t</lu-select-panel-layout>\n}\n\n<ng-template #sheetSearch>\n\t<div class=\"textField\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\ttype=\"text\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.aria-expanded]=\"true\"\n\t\t\t\t[attr.aria-controls]=\"selectId\"\n\t\t\t\t[attr.placeholder]=\"intl().placeholder\"\n\t\t\t\t[ngModel]=\"clue()\"\n\t\t\t\t(ngModelChange)=\"selectInput.clueChanged($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[readonly]=\"!searchable\"\n\t\t\t\t(keydown)=\"selectInput.onKeyDownNavigation($event)\"\n\t\t\t/>\n\t\t\t<div class=\"textField-input-affix\">\n\t\t\t\t<lu-icon class=\"textField-input-affix-icon\" icon=\"searchMagnifyingGlass\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #panelContent>\n\t<lu-listbox multiple [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\t(e.g. the select-all checkbox) that are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer();\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tgroup-action\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t[elementId]=\"selectId + '-group-' + group.key + '-action'\"\n\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t\t[disabled]=\"groupLoadingKeys().has(group.key)\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (groupLoadingKeys().has(group.key)) {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-displayInlineBlock pr-u-colorTextSubtle\">{{ intl().loading }}</span>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl().unselectAll : intl().selectAll }}\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\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[grouping]=\"groupTemplateLocation() === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selectedOptions\"\n\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: LuSelectPanelLayoutComponent, selector: "lu-select-panel-layout", inputs: ["loading", "trapFocus", "contentTabIndex"], outputs: ["scrolled"] }, { kind: "component", type: DialogComponent, selector: "lu-dialog", inputs: ["stacked", "fancyIllustration", "fancyIllustrationUrl"] }, { kind: "component", type: DialogHeaderComponent, selector: "lu-dialog-header", inputs: ["intl"] }, { kind: "component", type: DialogContentComponent, selector: "lu-dialog-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: ListboxComponent, selector: "lu-listbox", inputs: ["multiple", "tree", "state", "statusMsg"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["elementId", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll", "treeitemLevel"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuOptionsGroupContextPipe, name: "luOptionsGroupContext" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "sheetViewport", first: true, predicate: ["sheetViewport"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the S breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the displayer it covers is no longer reachable \u2014 and its content. -->\n\t<lu-dialog>\n\t\t<lu-dialog-header>\n\t\t\t@if (selectInput.panelTitle(); as title) {\n\t\t\t\t<!-- The interpolation and the marker must stay adjacent in the source: any whitespace between\n\t\t\t\tthem (even just a line break) renders as a literal space, pushing the asterisk away from the\n\t\t\t\ttitle instead of hugging it the way `.formLabel-required`'s own margin expects. -->\n\t\t\t\t@if (selectInput.panelTitleRequired()) {\n\t\t\t\t\t<h1>{{ title }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup></h1>\n\t\t\t\t} @else {\n\t\t\t\t\t<h1>{{ title }}</h1>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div dialogHeaderContent>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"sheetSearch\" />\n\t\t\t</div>\n\t\t</lu-dialog-header>\n\t\t<lu-dialog-content #sheetViewport data-testid=\"dialog-panel\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t\t</lu-dialog-content>\n\t</lu-dialog>\n} @else {\n\t<lu-select-panel-layout\n\t\tclass=\"lu-option-picker-panel mod-multiple\"\n\t\tdata-testid=\"dialog-panel\"\n\t\t[loading]=\"loading()\"\n\t\t[contentTabIndex]=\"0\"\n\t\t(scrolled)=\"onScroll($event)\"\n\t>\n\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t</lu-select-panel-layout>\n}\n\n<ng-template #sheetSearch>\n\t<!-- A select with no search has nothing to type into, so its field is masked rather than rendered as a\n\tdead read-only input. It stays in the DOM: it carries the combobox semantics, it is the element\n\t`openSelectPanelSheet` focuses, and its `keydown` handler is what drives keyboard navigation. -->\n\t<div class=\"textField\" [class.pr-u-mask]=\"!searchable\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\ttype=\"text\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.aria-expanded]=\"true\"\n\t\t\t\t[attr.aria-controls]=\"selectId\"\n\t\t\t\t[attr.placeholder]=\"intl().placeholder\"\n\t\t\t\t[ngModel]=\"clue()\"\n\t\t\t\t(ngModelChange)=\"selectInput.clueChanged($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[readonly]=\"!searchable\"\n\t\t\t\t(keydown)=\"selectInput.onKeyDownNavigation($event)\"\n\t\t\t/>\n\t\t\t<div class=\"textField-input-affix\">\n\t\t\t\t<lu-icon class=\"textField-input-affix-icon\" icon=\"searchMagnifyingGlass\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #panelContent>\n\t<lu-listbox multiple [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\t(e.g. the select-all checkbox) that are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer();\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tgroup-action\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t[elementId]=\"selectId + '-group-' + group.key + '-action'\"\n\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t\t[disabled]=\"groupLoadingKeys().has(group.key)\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (groupLoadingKeys().has(group.key)) {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-displayInlineBlock pr-u-colorTextSubtle\">{{ intl().loading }}</span>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl().unselectAll : intl().selectAll }}\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\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[grouping]=\"groupTemplateLocation() === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selectedOptions\"\n\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: LuSelectPanelLayoutComponent, selector: "lu-select-panel-layout", inputs: ["loading", "trapFocus", "contentTabIndex"], outputs: ["scrolled"] }, { kind: "component", type: DialogComponent, selector: "lu-dialog", inputs: ["stacked", "fancyIllustration", "fancyIllustrationUrl"] }, { kind: "component", type: DialogHeaderComponent, selector: "lu-dialog-header", inputs: ["intl"] }, { kind: "component", type: DialogContentComponent, selector: "lu-dialog-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: ListboxComponent, selector: "lu-listbox", inputs: ["multiple", "tree", "state", "statusMsg"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["elementId", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll", "treeitemLevel"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuOptionsGroupContextPipe, name: "luOptionsGroupContext" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'selectPanel',
@@ -419,7 +419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                             provide: SELECT_PANEL_INSTANCE,
                             useExisting: forwardRef(() => LuMultiSelectPanelComponent),
                         },
-                    ], template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the S breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the displayer it covers is no longer reachable \u2014 and its content. -->\n\t<lu-dialog>\n\t\t<lu-dialog-header>\n\t\t\t@if (selectInput.panelTitle(); as title) {\n\t\t\t\t<!-- The interpolation and the marker must stay adjacent in the source: any whitespace between\n\t\t\t\tthem (even just a line break) renders as a literal space, pushing the asterisk away from the\n\t\t\t\ttitle instead of hugging it the way `.formLabel-required`'s own margin expects. -->\n\t\t\t\t@if (selectInput.panelTitleRequired()) {\n\t\t\t\t\t<h1>{{ title }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup></h1>\n\t\t\t\t} @else {\n\t\t\t\t\t<h1>{{ title }}</h1>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div dialogHeaderContent>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"sheetSearch\" />\n\t\t\t</div>\n\t\t</lu-dialog-header>\n\t\t<lu-dialog-content #sheetViewport data-testid=\"dialog-panel\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t\t</lu-dialog-content>\n\t</lu-dialog>\n} @else {\n\t<lu-select-panel-layout\n\t\tclass=\"lu-option-picker-panel mod-multiple\"\n\t\tdata-testid=\"dialog-panel\"\n\t\t[loading]=\"loading()\"\n\t\t[contentTabIndex]=\"0\"\n\t\t(scrolled)=\"onScroll($event)\"\n\t>\n\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t</lu-select-panel-layout>\n}\n\n<ng-template #sheetSearch>\n\t<div class=\"textField\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\ttype=\"text\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.aria-expanded]=\"true\"\n\t\t\t\t[attr.aria-controls]=\"selectId\"\n\t\t\t\t[attr.placeholder]=\"intl().placeholder\"\n\t\t\t\t[ngModel]=\"clue()\"\n\t\t\t\t(ngModelChange)=\"selectInput.clueChanged($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[readonly]=\"!searchable\"\n\t\t\t\t(keydown)=\"selectInput.onKeyDownNavigation($event)\"\n\t\t\t/>\n\t\t\t<div class=\"textField-input-affix\">\n\t\t\t\t<lu-icon class=\"textField-input-affix-icon\" icon=\"searchMagnifyingGlass\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #panelContent>\n\t<lu-listbox multiple [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\t(e.g. the select-all checkbox) that are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer();\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tgroup-action\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t[elementId]=\"selectId + '-group-' + group.key + '-action'\"\n\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t\t[disabled]=\"groupLoadingKeys().has(group.key)\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (groupLoadingKeys().has(group.key)) {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-displayInlineBlock pr-u-colorTextSubtle\">{{ intl().loading }}</span>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl().unselectAll : intl().selectAll }}\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\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[grouping]=\"groupTemplateLocation() === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selectedOptions\"\n\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n</ng-template>\n" }]
+                    ], template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the S breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the displayer it covers is no longer reachable \u2014 and its content. -->\n\t<lu-dialog>\n\t\t<lu-dialog-header>\n\t\t\t@if (selectInput.panelTitle(); as title) {\n\t\t\t\t<!-- The interpolation and the marker must stay adjacent in the source: any whitespace between\n\t\t\t\tthem (even just a line break) renders as a literal space, pushing the asterisk away from the\n\t\t\t\ttitle instead of hugging it the way `.formLabel-required`'s own margin expects. -->\n\t\t\t\t@if (selectInput.panelTitleRequired()) {\n\t\t\t\t\t<h1>{{ title }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup></h1>\n\t\t\t\t} @else {\n\t\t\t\t\t<h1>{{ title }}</h1>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div dialogHeaderContent>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"sheetSearch\" />\n\t\t\t</div>\n\t\t</lu-dialog-header>\n\t\t<lu-dialog-content #sheetViewport data-testid=\"dialog-panel\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t\t</lu-dialog-content>\n\t</lu-dialog>\n} @else {\n\t<lu-select-panel-layout\n\t\tclass=\"lu-option-picker-panel mod-multiple\"\n\t\tdata-testid=\"dialog-panel\"\n\t\t[loading]=\"loading()\"\n\t\t[contentTabIndex]=\"0\"\n\t\t(scrolled)=\"onScroll($event)\"\n\t>\n\t\t<ng-container [ngTemplateOutlet]=\"panelContent\" />\n\t</lu-select-panel-layout>\n}\n\n<ng-template #sheetSearch>\n\t<!-- A select with no search has nothing to type into, so its field is masked rather than rendered as a\n\tdead read-only input. It stays in the DOM: it carries the combobox semantics, it is the element\n\t`openSelectPanelSheet` focuses, and its `keydown` handler is what drives keyboard navigation. -->\n\t<div class=\"textField\" [class.pr-u-mask]=\"!searchable\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\ttype=\"text\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.aria-expanded]=\"true\"\n\t\t\t\t[attr.aria-controls]=\"selectId\"\n\t\t\t\t[attr.placeholder]=\"intl().placeholder\"\n\t\t\t\t[ngModel]=\"clue()\"\n\t\t\t\t(ngModelChange)=\"selectInput.clueChanged($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[readonly]=\"!searchable\"\n\t\t\t\t(keydown)=\"selectInput.onKeyDownNavigation($event)\"\n\t\t\t/>\n\t\t\t<div class=\"textField-input-affix\">\n\t\t\t\t<lu-icon class=\"textField-input-affix-icon\" icon=\"searchMagnifyingGlass\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #panelContent>\n\t<lu-listbox multiple [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\t(e.g. the select-all checkbox) that are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer();\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tgroup-action\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t[elementId]=\"selectId + '-group-' + group.key + '-action'\"\n\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t\t[disabled]=\"groupLoadingKeys().has(group.key)\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (groupLoadingKeys().has(group.key)) {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-displayInlineBlock pr-u-colorTextSubtle\">{{ intl().loading }}</span>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl().unselectAll : intl().selectAll }}\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\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[grouping]=\"groupTemplateLocation() === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selectedOptions\"\n\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { sheetViewport: [{ type: i0.ViewChild, args: ['sheetViewport', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 class BaseMultiSelectPanelRef extends LuMultiSelectPanelRef {
@@ -587,10 +587,10 @@ class LuMultiSelectPanelRefFactory {
             ...(config.offsetY ? { offsetY: yDirection === 'bottom' ? config.offsetY : -config.offsetY } : {}),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectPanelRefFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectPanelRefFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectPanelRefFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectPanelRefFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectPanelRefFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectPanelRefFactory, decorators: [{
             type: Injectable
         }] });
 
@@ -721,8 +721,8 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
         super.ngOnDestroy();
         this.focusInput$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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: true, isRequired: false, transformFunction: null }, keepSearchAfterSelection: { classPropertyName: "keepSearchAfterSelection", publicName: "keepSearchAfterSelection", isSignal: true, isRequired: false, transformFunction: null }, 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": "filterPillClass" }, classAttribute: "multiSelect" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", 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: true, isRequired: false, transformFunction: null }, keepSearchAfterSelection: { classPropertyName: "keepSearchAfterSelection", publicName: "keepSearchAfterSelection", isSignal: true, isRequired: false, transformFunction: null }, 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": "filterPillClass" }, classAttribute: "multiSelect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LuMultiSelectInputComponent),
@@ -742,7 +742,7 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
             },
         ], 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-width: auto;--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;inline-size:var(--components-multiSelect-width);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-search.mod-button{appearance:none;text-align:start;color:var(--components-multiSelect-placeholder);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search.mod-button:empty{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}.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-width10{--components-multiSelect-width: 5rem}.multiSelect.mod-width20{--components-multiSelect-width: 10rem}.multiSelect.mod-width30{--components-multiSelect-width: 15rem}.multiSelect.mod-width40{--components-multiSelect-width: 20rem}.multiSelect.mod-width50{--components-multiSelect-width: 25rem}.multiSelect.mod-width60{--components-multiSelect-width: 30rem}.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(100vi - 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,80vb);overflow:auto}.multiSelect.mod-filterPill .multiSelect-field-icon.mod-search{margin-inline-start: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[aria-invalid=true]):hover{--components-multiSelect-border-color: var(--pr-t-color-input-border-critical-hover)}.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 mods{.dialog.mod-select{--components-dialog-animationDuration: 0s;--components-dialog-insideHeaderTitleAlign: center;--components-dialog-insideHeaderTitleFont: var(--pr-t-font-heading-4);--components-dialog-insideHeaderColumns: 1fr auto 1fr;--components-dialog-inside-header-button-justifySelf: end;--components-dialog-insideHeaderAreas: \"spacer  container close  \" \"content content   content\";--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-200);--components-dialog-inside-header-content-paddingBlockStart: var(--pr-t-spacings-100);--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-50);--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50)}.dialog.mod-select .optionItem-icons{position:static;opacity:1}.dialog.mod-select .listboxOption-content{--components-listboxOption-content-link-opacity: 1}}@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.1.4", ngImport: i0, type: LuMultiSelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AsyncPipe,
@@ -936,10 +936,10 @@ class LuMultiSelectDisplayerInputDirective {
             this.select.clueChanged('');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: LuMultiSelectDisplayerInputDirective, isStandalone: true, selector: "[luMultiSelectDisplayerInput]", host: { listeners: { "input": "onInput()" }, properties: { "class.mod-button": "isButton", "attr.role": "isButton ? null : \"combobox\"", "attr.aria-haspopup": "isButton ? \"dialog\" : \"listbox\"", "attr.aria-expanded": "panelOpen", "attr.aria-activedescendant": "isButton ? null : activeDescendant", "attr.aria-controls": "controls", "attr.disabled": "disabled", "attr.placeholder": "isButton ? null : placeholder", "attr.readonly": "isButton ? null : readonly" }, classAttribute: "multipleSelect-displayer-search" }, exportAs: ["luMultiSelectDisplayerInput"], hostDirectives: [{ directive: i1$1.InputDirective, inputs: ["luInputLabelledBy", "luInputLabelledBy"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: LuMultiSelectDisplayerInputDirective, isStandalone: true, selector: "[luMultiSelectDisplayerInput]", host: { listeners: { "input": "onInput()" }, properties: { "class.mod-button": "isButton", "attr.role": "isButton ? null : \"combobox\"", "attr.aria-haspopup": "isButton ? \"dialog\" : \"listbox\"", "attr.aria-expanded": "panelOpen", "attr.aria-activedescendant": "isButton ? null : activeDescendant", "attr.aria-controls": "controls", "attr.disabled": "disabled", "attr.placeholder": "isButton ? null : placeholder", "attr.readonly": "isButton ? null : readonly" }, classAttribute: "multipleSelect-displayer-search" }, exportAs: ["luMultiSelectDisplayerInput"], hostDirectives: [{ directive: i1$1.InputDirective, inputs: ["luInputLabelledBy", "luInputLabelledBy"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luMultiSelectDisplayerInput]',
@@ -988,8 +988,8 @@ class LuMultiSelectAllDisplayerComponent {
             this.inputElementRef().nativeElement.focus();
         }, { injector: this.#injector });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LuMultiSelectAllDisplayerComponent, isStandalone: true, selector: "lu-multi-select-all-displayer", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: LuMultiSelectDisplayerInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: LuMultiSelectAllDisplayerComponent, isStandalone: true, selector: "lu-multi-select-all-displayer", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: LuMultiSelectDisplayerInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
 		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="isFilled()">
 			@if (select.bottomSheetMode()) {
 				<button type="button" luMultiSelectDisplayerInput #trigger="luMultiSelectDisplayerInput">{{ trigger.placeholder }}</button>
@@ -1011,7 +1011,7 @@ class LuMultiSelectAllDisplayerComponent {
 		</div>
 	`, isInline: true, styles: [":host{display:block;inline-size:100%}\n"], dependencies: [{ kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]", exportAs: ["luMultiSelectDisplayerInput"] }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "component", type: ChipComponent, selector: "lu-chip, button[luChip], a[luChip]", inputs: ["intl", "withEllipsis", "unkillable", "palette", "disabled", "size", "state", "icon"], outputs: ["kill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-all-displayer', imports: [LuMultiSelectDisplayerInputDirective, _LuOptionOutletDirective, ChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
 		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="isFilled()">
@@ -1067,8 +1067,8 @@ class LuMultiSelectAllHeaderComponent {
             this.selectAllContext.setSelectAll(!this.isSelected());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectAllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: LuMultiSelectAllHeaderComponent, isStandalone: true, selector: "lu-multi-select-all-header", hostDirectives: [{ directive: i1$2.ɵCoreSelectPanelElement }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectAllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: LuMultiSelectAllHeaderComponent, isStandalone: true, selector: "lu-multi-select-all-header", hostDirectives: [{ directive: i1$2.ɵCoreSelectPanelElement }], ngImport: i0, template: `
 		<div class="multiSelectAllDisplayer" role="option">
 			<lu-form-field [label]="intl().selectAll">
 				<lu-checkbox-input
@@ -1082,7 +1082,7 @@ class LuMultiSelectAllHeaderComponent {
 		</div>
 	`, isInline: true, styles: ["@layer components{:host{display:block;background-color:var(--palettes-neutral-0);border-block-end:1px solid var(--commons-border-200);padding-block:0 var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-vertical);margin-inline:calc(-1 * var(--pr-t-spacings-50));scroll-margin-block-start:var(--pr-t-spacings-50)}}@layer components{.multiSelectAllDisplayer{border-radius:var(--pr-t-border-radius-default);cursor:pointer}.multiSelectAllDisplayer ::ng-deep .formLabel{inline-size:100%;padding-block:var(--components-options-item-padding-vertical);padding-inline:0}}@layer mods{.multiSelectAllDisplayer:hover,:host(.is-highlighted) .multiSelectAllDisplayer{background-color:var(--palettes-neutral-50)}.multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-50, var(--palettes-product-50))}.multiSelectAllDisplayer:has(.checkboxField-input:checked):hover,:host(.is-highlighted) .multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-100, var(--palettes-product-100))}}@layer components{.multiSelectAllDisplayer-checkbox{margin-block:var(--components-options-item-padding-vertical) 0;margin-inline:var(--components-options-item-padding-horizontal) 0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxInputComponent, selector: "lu-checkbox-input", inputs: ["checklist", "mixed"] }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectAllHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectAllHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-all-header', imports: [FormsModule, CheckboxInputComponent, FormFieldComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [_CoreSelectPanelElement], template: `
 		<div class="multiSelectAllDisplayer" role="option">
@@ -1295,8 +1295,8 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         // No match, keep the same mode
         return fromMode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", 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),
@@ -1307,7 +1307,7 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
             },
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1329,8 +1329,8 @@ class LuMultiSelectContentDisplayerComponent {
     constructor() {
         this.select = inject(LuMultiSelectInputComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectContentDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LuMultiSelectContentDisplayerComponent, isStandalone: true, selector: "lu-multi-select-content-displayer", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectContentDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: LuMultiSelectContentDisplayerComponent, isStandalone: true, selector: "lu-multi-select-content-displayer", ngImport: i0, template: `
 		<div class="multipleSelect-displayer mod-filter">
 			@if (select.bottomSheetMode()) {
 				<button type="button" #inputElement luMultiSelectDisplayerInput #trigger="luMultiSelectDisplayerInput">{{ trigger.placeholder }}</button>
@@ -1343,7 +1343,7 @@ class LuMultiSelectContentDisplayerComponent {
 		</div>
 	`, isInline: true, styles: ["@layer components{:host{display:block;inline-size:100%}}\n"], dependencies: [{ kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]", exportAs: ["luMultiSelectDisplayerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectContentDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectContentDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-content-displayer', imports: [LuMultiSelectDisplayerInputDirective], template: `
 		<div class="multipleSelect-displayer mod-filter">
@@ -1399,8 +1399,8 @@ class LuMultiSelectCounterDisplayerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LuMultiSelectCounterDisplayerComponent, isStandalone: true, selector: "lu-multi-select-counter-displayer", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: LuMultiSelectCounterDisplayerComponent, isStandalone: true, selector: "lu-multi-select-counter-displayer", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="((selectedOptions$ | async)?.length ?? 0) > 0">
 			@if (select.bottomSheetMode()) {
 				<button type="button" #inputElement luMultiSelectDisplayerInput #trigger="luMultiSelectDisplayerInput">{{ trigger.placeholder }}</button>
@@ -1422,7 +1422,7 @@ class LuMultiSelectCounterDisplayerComponent {
 		</div>
 	`, isInline: true, styles: ["@layer components{:host{display:block;inline-size:100%;min-inline-size:0}}\n"], dependencies: [{ kind: "ngmodule", type: LuTooltipModule }, { kind: "component", type: ChipComponent, selector: "lu-chip, button[luChip], a[luChip]", inputs: ["intl", "withEllipsis", "unkillable", "palette", "disabled", "size", "state", "icon"], outputs: ["kill"] }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]", exportAs: ["luMultiSelectDisplayerInput"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-counter-displayer', imports: [AsyncPipe, LuTooltipModule, ChipComponent, _LuOptionOutletDirective, FormsModule, LuMultiSelectDisplayerInputDirective], template: `
 		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="((selectedOptions$ | async)?.length ?? 0) > 0">
@@ -1515,8 +1515,8 @@ class LuMultiSelectDefaultDisplayerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LuMultiSelectDefaultDisplayerComponent, isStandalone: true, selector: "lu-multi-select-default-displayer", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: LuMultiSelectDefaultDisplayerComponent, isStandalone: true, selector: "lu-multi-select-default-displayer", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div class="multipleSelect-displayer">
 			<div class="multipleSelect-displayer-suffix">
 				@if (select.bottomSheetMode()) {
@@ -1548,7 +1548,7 @@ class LuMultiSelectDefaultDisplayerComponent {
 		</div>
 	`, isInline: true, styles: ["@layer components{:host{display:block;inline-size:100%;min-inline-size:0}}\n"], dependencies: [{ kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]", exportAs: ["luMultiSelectDisplayerInput"] }, { kind: "component", type: ChipComponent, selector: "lu-chip, button[luChip], a[luChip]", inputs: ["intl", "withEllipsis", "unkillable", "palette", "disabled", "size", "state", "icon"], outputs: ["kill"] }, { 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-default-displayer', imports: [AsyncPipe, LuTooltipModule, _LuOptionOutletDirective, FormsModule, LuMultiSelectDisplayerInputDirective, ChipComponent, IconComponent$1], template: `
 		<div class="multipleSelect-displayer">
@@ -1594,10 +1594,10 @@ class LuMultiDisplayerDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: LuMultiDisplayerDirective, isStandalone: true, selector: "[luMultiDisplayer]", inputs: { select: { classPropertyName: "select", publicName: "luMultiDisplayerSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: LuMultiDisplayerDirective, isStandalone: true, selector: "[luMultiDisplayer]", inputs: { select: { classPropertyName: "select", publicName: "luMultiDisplayerSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuMultiDisplayerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: LuMultiDisplayerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luMultiDisplayer]',