@lucca-front/ng 22.1.0 → 22.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"lucca-front-ng-listing.mjs","sources":["../../../packages/ng/listing/listing.token.ts","../../../packages/ng/listing/listing-item/listing-item.component.ts","../../../packages/ng/listing/listing-item/listing-item.component.html","../../../packages/ng/listing/listing.component.ts","../../../packages/ng/listing/listing.component.html","../../../packages/ng/listing/lucca-front-ng-listing.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { ListingComponent } from './listing.component';\n\nexport const LU_LISTING_INSTANCE = new InjectionToken<ListingComponent>('LU_LISTING_INSTANCE');\n","import { ChangeDetectionStrategy, Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { LuccaIcon } from '@lucca-front/icons';\nimport { luBooleanAttribute } from '@lucca-front/ng/core';\nimport { IconComponent } from '@lucca-front/ng/icon';\nimport { LU_LISTING_INSTANCE } from '../listing.token';\n\n@Component({\n\tselector: 'lu-listing-item',\n\ttemplateUrl: './listing-item.component.html',\n\timports: [IconComponent],\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'listing-item',\n\t\trole: 'listitem',\n\t},\n})\nexport class ListingItemComponent {\n\tprotected listingRef = inject(LU_LISTING_INSTANCE);\n\n\t/**\n\t * Adds an icon to the listing item\n\t */\n\treadonly icon = input<LuccaIcon | null>(null);\n\n\treadonly critical = input(false, { transform: luBooleanAttribute });\n}\n","@if (listingRef.orderedFancy()) {\n\t<div class=\"listing-item-number\" aria-hidden=\"true\"></div>\n}\n@if (listingRef.checklist() || listingRef.icons()) {\n\t@if (critical()) {\n\t\t<lu-icon class=\"listing-item-icon palette-critical\" size=\"S\" icon=\"signClose\" />\n\t} @else {\n\t\t<lu-icon class=\"listing-item-icon\" size=\"S\" [icon]=\"icon() || listingRef.defaultIcon()\" />\n\t}\n}\n<div class=\"listing-item-content\">\n\t<ng-content />\n</div>\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, input, ViewEncapsulation } from '@angular/core';\nimport { LuccaIcon } from '@lucca-front/icons';\nimport { luBooleanAttribute, luNumberAttribute, Palette } from '@lucca-front/ng/core';\nimport { LU_LISTING_INSTANCE } from './listing.token';\n\n@Component({\n\tselector: 'lu-listing',\n\ttemplateUrl: './listing.component.html',\n\tstyleUrl: './listing.component.scss',\n\timports: [NgTemplateOutlet],\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tproviders: [\n\t\t{\n\t\t\tprovide: LU_LISTING_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => ListingComponent),\n\t\t},\n\t],\n})\nexport class ListingComponent {\n\t/**\n\t * Create HTMLOListElement\n\t */\n\treadonly ordered = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Create HTMLOListElement with fancy numbers\n\t */\n\treadonly orderedFancy = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Applies checklist mod to the listing\n\t */\n\treadonly checklist = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Adds an icon to the listing\n\t */\n\treadonly icons = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Gives the desired icon.\n\t * If the icon input is not enabled it will not be displayed (signConfirm by default)\n\t */\n\treadonly defaultIcon = input<LuccaIcon>('signConfirm');\n\n\t/**\n\t * Applies a color palette to the listing\n\t */\n\treadonly palette = input<Palette>('none');\n\n\t/**\n\t * Allows you to start a list at a value other than 1\n\t */\n\treadonly start = input(1, { transform: luNumberAttribute });\n\n\t/**\n\t * Applies inline mod to the listing\n\t */\n\treadonly inline = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Applies divider between list item\n\t */\n\treadonly divider = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Reversed the listing\n\t */\n\treadonly reversed = input(false, { transform: luBooleanAttribute });\n\n\treadonly paletteClass = computed(() => ({\n\t\t[`palette-${this.palette()}`]: !!this.palette(),\n\t}));\n}\n","@if (ordered() || orderedFancy()) {\n\t<ol\n\t\tclass=\"listing\"\n\t\t[class.mod-icons]=\"icons()\"\n\t\t[class.mod-checklist]=\"checklist()\"\n\t\t[class.mod-fancy]=\"orderedFancy()\"\n\t\t[class]=\"paletteClass()\"\n\t\t[attr.start]=\"start() !== 1 ? start() : null\"\n\t\t[attr.reversed]=\"reversed() ? 'reversed' : null\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t</ol>\n} @else {\n\t<ul\n\t\tclass=\"listing\"\n\t\t[class.mod-icons]=\"icons()\"\n\t\t[class.mod-checklist]=\"checklist()\"\n\t\t[class.mod-inline]=\"inline()\"\n\t\t[class.mod-divider]=\"divider()\"\n\t\t[class]=\"paletteClass()\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t</ul>\n}\n\n<ng-template #content><ng-content /></ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lucca-front-ng-listing.mjs","sources":["../../../packages/ng/listing/listing.token.ts","../../../packages/ng/listing/listing-item/listing-item.component.ts","../../../packages/ng/listing/listing-item/listing-item.component.html","../../../packages/ng/listing/listing.component.ts","../../../packages/ng/listing/listing.component.html","../../../packages/ng/listing/listing.type.ts","../../../packages/ng/listing/lucca-front-ng-listing.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { ListingComponent } from './listing.component';\n\nexport const LU_LISTING_INSTANCE = new InjectionToken<ListingComponent>('LU_LISTING_INSTANCE');\n","import { ChangeDetectionStrategy, Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { LuccaIcon } from '@lucca-front/icons';\nimport { luBooleanAttribute } from '@lucca-front/ng/core';\nimport { IconComponent } from '@lucca-front/ng/icon';\nimport { LU_LISTING_INSTANCE } from '../listing.token';\n\n@Component({\n\tselector: 'lu-listing-item',\n\ttemplateUrl: './listing-item.component.html',\n\timports: [IconComponent],\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'listing-item',\n\t\trole: 'listitem',\n\t},\n})\nexport class ListingItemComponent {\n\tprotected listingRef = inject(LU_LISTING_INSTANCE);\n\n\t/**\n\t * Adds an icon to the listing item\n\t */\n\treadonly icon = input<LuccaIcon | null>(null);\n\n\treadonly critical = input(false, { transform: luBooleanAttribute });\n}\n","@if (listingRef.orderedFancy()) {\n\t<div class=\"listing-item-number\" aria-hidden=\"true\"></div>\n}\n@if (listingRef.checklist() || listingRef.icons()) {\n\t@if (critical()) {\n\t\t<lu-icon class=\"listing-item-icon palette-critical\" icon=\"signClose\" />\n\t} @else {\n\t\t<lu-icon class=\"listing-item-icon\" [icon]=\"icon() || listingRef.defaultIcon()\" />\n\t}\n}\n<div class=\"listing-item-content\">\n\t<ng-content />\n</div>\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, input, ViewEncapsulation } from '@angular/core';\nimport { LuccaIcon } from '@lucca-front/icons';\nimport { luBooleanAttribute, luNumberAttribute, Palette } from '@lucca-front/ng/core';\nimport { LU_LISTING_INSTANCE } from './listing.token';\nimport { ListingSize } from './listing.type';\n\n@Component({\n\tselector: 'lu-listing',\n\ttemplateUrl: './listing.component.html',\n\tstyleUrl: './listing.component.scss',\n\timports: [NgTemplateOutlet],\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tproviders: [\n\t\t{\n\t\t\tprovide: LU_LISTING_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => ListingComponent),\n\t\t},\n\t],\n})\nexport class ListingComponent {\n\t/**\n\t * Create HTMLOListElement\n\t */\n\treadonly ordered = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Create HTMLOListElement with fancy numbers\n\t */\n\treadonly orderedFancy = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Applies checklist mod to the listing\n\t */\n\treadonly checklist = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Adds an icon to the listing\n\t */\n\treadonly icons = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Gives the desired icon.\n\t * If the icon input is not enabled it will not be displayed (signConfirm by default)\n\t */\n\treadonly defaultIcon = input<LuccaIcon>('signConfirm');\n\n\t/**\n\t * Applies a color palette to the listing\n\t */\n\treadonly palette = input<Palette>('none');\n\n\t/**\n\t * Allows you to start a list at a value other than 1\n\t */\n\treadonly start = input(1, { transform: luNumberAttribute });\n\n\t/**\n\t * Applies inline mod to the listing\n\t */\n\treadonly inline = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Applies divider between list item\n\t */\n\treadonly divider = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Reversed the listing\n\t */\n\treadonly reversed = input(false, { transform: luBooleanAttribute });\n\n\t/**\n\t * Modifies the size of the listing\n\t */\n\treadonly size = input<ListingSize | null>(null);\n\n\treadonly paletteClass = computed(() => ({\n\t\t[`palette-${this.palette()}`]: !!this.palette(),\n\t}));\n}\n","@if (ordered() || orderedFancy()) {\n\t<ol\n\t\tclass=\"listing\"\n\t\t[class.mod-icons]=\"icons()\"\n\t\t[class.mod-checklist]=\"checklist()\"\n\t\t[class.mod-fancy]=\"orderedFancy()\"\n\t\t[class.mod-S]=\"size() === 'S'\"\n\t\t[class]=\"paletteClass()\"\n\t\t[attr.start]=\"start() !== 1 ? start() : null\"\n\t\t[attr.reversed]=\"reversed() ? 'reversed' : null\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t</ol>\n} @else {\n\t<ul\n\t\tclass=\"listing\"\n\t\t[class.mod-icons]=\"icons()\"\n\t\t[class.mod-checklist]=\"checklist()\"\n\t\t[class.mod-inline]=\"inline()\"\n\t\t[class.mod-divider]=\"divider()\"\n\t\t[class.mod-S]=\"size() === 'S'\"\n\t\t[class]=\"paletteClass()\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t</ul>\n}\n\n<ng-template #content><ng-content /></ng-template>\n","/**\n * Available ListingComponent sizes\n */\nexport const LISTING_SIZE = ['S'] as const;\nexport type ListingSize = (typeof LISTING_SIZE)[number];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -388,7 +388,7 @@ class LuMultiSelectPanelComponent {
                 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<!-- 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 }); }
+        ], viewQueries: [{ propertyName: "sheetViewport", first: true, predicate: ["sheetViewport"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the XS breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the 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 (groupTemplateLocation() === \"group-header\" && grouping(); as groupingConfig) {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: groupingConfig.selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"groupingConfig.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.2.1", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
             type: Component,
@@ -419,7 +419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", 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<!-- 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" }]
+                    ], template: "@if (selectInput.panelBottomSheetMode()) {\n\t<!-- Below the XS breakpoint the panel is a dialog in `sheet` mode: the surface, the backdrop, the focus\n\ttrap, the close button and the focus restoration all come from the dialog, so the panel only fills in\n\tits title, its own search input \u2014 the 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 (groupTemplateLocation() === \"group-header\" && grouping(); as groupingConfig) {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: groupingConfig.selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"groupingConfig.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 {
@@ -734,7 +734,7 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
             },
             provideLuSelectLabelsAndIds(),
             LuMultiSelectPanelRefFactory,
-            // Below the `S` breakpoint the panel opens as a dialog in `sheet` mode.
+            // Below the `XS` breakpoint the panel opens as a dialog in `sheet` mode.
             provideLuDialog(),
             {
                 provide: FILTER_PILL_INPUT_COMPONENT,
@@ -766,7 +766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                         },
                         provideLuSelectLabelsAndIds(),
                         LuMultiSelectPanelRefFactory,
-                        // Below the `S` breakpoint the panel opens as a dialog in `sheet` mode.
+                        // Below the `XS` breakpoint the panel opens as a dialog in `sheet` mode.
                         provideLuDialog(),
                         {
                             provide: FILTER_PILL_INPUT_COMPONENT,
@@ -847,7 +847,7 @@ const MULTI_SELECT_WITH_SELECT_ALL_CONTEXT = new InjectionToken('LuMultiSelectWi
 class LuMultiSelectDisplayerInputDirective {
     #injector;
     /**
-     * Below the `S` breakpoint the panel opens as a modal sheet carrying its own search input, so this
+     * Below the `XS` breakpoint the panel opens as a modal sheet carrying its own search input, so this
      * element is only ever a trigger and the displayers render it as a `<button>`. Typing into it is
      * impossible by then, and an `<input>` would make iOS raise the software keyboard on a field the
      * sheet is about to cover.
@@ -1127,7 +1127,7 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
             const label = this.displayerLabelFn();
             const count = this.displayerCount();
             if (label) {
-                const result = label(count);
+                const result = label(count ?? 0);
                 return typeof result === 'string' ? result : getIntlPluralLabel(this.pluralRules, result, count ?? 0);
             }
             return `${count} ${this.displayerLabel()}`;