@coreui/angular-pro 5.7.6 → 5.7.7

package/fesm2022/coreui-angular-pro.mjs

@@ -2008,6 +2008,20 @@ class MultiSelectComponent {
      * @since 4.5.11
      */
     allowCreateOptions = input(false, { ...(ngDevMode ? { debugName: "allowCreateOptions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Sets the accessible label (`aria-label`) for the button that clears the current selection. This label is read by screen readers.
+     * @return string
+     * @since 5.7.7
+     */
+    ariaCleanerLabel = input('Clear selection', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaCleanerLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the accessible label (`aria-label`) for the indicator button that toggles the options menu. This label is read by screen readers.
+     * @return string
+     * @since 5.7.7
+     */
+    ariaIndicatorLabel = input('Toggle visibility of options menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaIndicatorLabel" }] : /* istanbul ignore next */ []));
     /**
      * Enables selection cleaner element
      * @return boolean
@@ -3054,7 +3068,7 @@ class MultiSelectComponent {
         this.visible.update((visible) => !visible);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MultiSelectComponent, isStandalone: true, selector: "c-multi-select", inputs: { allowCreateOptions: { classPropertyName: "allowCreateOptions", publicName: "allowCreateOptions", isSignal: true, isRequired: false, transformFunction: null }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, optionsMaxHeightInput: { classPropertyName: "optionsMaxHeightInput", publicName: "optionsMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsStyle: { classPropertyName: "optionsStyle", publicName: "optionsStyle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, resetSelectionOnOptionsChange: { classPropertyName: "resetSelectionOnOptionsChange", publicName: "resetSelectionOnOptionsChange", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchNoResultsLabel: { classPropertyName: "searchNoResultsLabel", publicName: "searchNoResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: false, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectionType: { classPropertyName: "selectionType", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, selectionTypeCounterText: { classPropertyName: "selectionTypeCounterText", publicName: "selectionTypeCounterText", isSignal: true, isRequired: false, transformFunction: null }, selectionTypeCounterTextPluralMap: { classPropertyName: "selectionTypeCounterTextPluralMap", publicName: "selectionTypeCounterTextPluralMap", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, virtualScroller: { classPropertyName: "virtualScroller", publicName: "virtualScroller", isSignal: true, isRequired: false, transformFunction: null }, visibleItemsInput: { classPropertyName: "visibleItemsInput", publicName: "visibleItems", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, itemMinWidthInput: { classPropertyName: "itemMinWidthInput", publicName: "itemMinWidth", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, popperOptionsInput: { classPropertyName: "popperOptionsInput", publicName: "popperOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValueChange: "searchValueChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "hostClasses()", "attr.aria-multiselectable": "multiple()", "attr.aria-expanded": "visible()", "attr.aria-disabled": "disabled()", "attr.tabindex": "tabIndex" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MultiSelectComponent, isStandalone: true, selector: "c-multi-select", inputs: { allowCreateOptions: { classPropertyName: "allowCreateOptions", publicName: "allowCreateOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaCleanerLabel: { classPropertyName: "ariaCleanerLabel", publicName: "ariaCleanerLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaIndicatorLabel: { classPropertyName: "ariaIndicatorLabel", publicName: "ariaIndicatorLabel", isSignal: true, isRequired: false, transformFunction: null }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, optionsMaxHeightInput: { classPropertyName: "optionsMaxHeightInput", publicName: "optionsMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsStyle: { classPropertyName: "optionsStyle", publicName: "optionsStyle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, resetSelectionOnOptionsChange: { classPropertyName: "resetSelectionOnOptionsChange", publicName: "resetSelectionOnOptionsChange", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchNoResultsLabel: { classPropertyName: "searchNoResultsLabel", publicName: "searchNoResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: false, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectionType: { classPropertyName: "selectionType", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, selectionTypeCounterText: { classPropertyName: "selectionTypeCounterText", publicName: "selectionTypeCounterText", isSignal: true, isRequired: false, transformFunction: null }, selectionTypeCounterTextPluralMap: { classPropertyName: "selectionTypeCounterTextPluralMap", publicName: "selectionTypeCounterTextPluralMap", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, virtualScroller: { classPropertyName: "virtualScroller", publicName: "virtualScroller", isSignal: true, isRequired: false, transformFunction: null }, visibleItemsInput: { classPropertyName: "visibleItemsInput", publicName: "visibleItems", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, itemMinWidthInput: { classPropertyName: "itemMinWidthInput", publicName: "itemMinWidth", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, popperOptionsInput: { classPropertyName: "popperOptionsInput", publicName: "popperOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValueChange: "searchValueChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "hostClasses()", "attr.aria-multiselectable": "multiple()", "attr.aria-expanded": "visible()", "attr.aria-disabled": "disabled()", "attr.tabindex": "tabIndex" } }, providers: [
             I18nPluralPipe,
             MultiSelectService,
             {
@@ -3062,7 +3076,7 @@ class MultiSelectComponent {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown\n  #dropdown=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [class]=\"multiselectClasses()\"\n  [popperOptions]=\"popperOptions()\"\n>\n  <div\n    #dropdownToggle=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    role=\"button\"\n    class=\"form-multi-select-input-group\"\n  >\n    <span\n      [class]=\"multiselectSelectionClasses()\"\n      [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n    >\n      @if (selType === 'tags') {\n        @for (option of optionTags(); track option.value; let i = $index) {\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            [disabled]=\"isDisabled || (option.disabled ?? false)\"\n            [label]=\"option.label ?? option.value?.toString()\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag text-truncate\"\n            tabindex=\"-1\"\n          />\n        }\n      } @else if (selType === 'text' && !!selectedOpts.length) {\n        @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!searchOn) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n        </span>\n      } @else {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n          [disabled]=\"isDisabled || !searchOn\"\n          [class]=\"{ 'form-multi-select-search': true, disabled: isDisabled || !searchOn, 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n          type=\"text\"\n        />\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button\n        (click)=\"handleIndicatorClick($event)\"\n        [disabled]=\"isDisabled\"\n        class=\"form-multi-select-indicator\"\n        type=\"button\"\n      ></button>\n    </div>\n  </div>\n  @if (!isDisabled) {\n    <div\n      #dropdownMenu=\"cDropdownMenu\"\n      [visible]=\"dropdown.visible()\"\n      cDropdownMenu\n      class=\"form-multi-select-dropdown\"\n      role=\"menu\"\n    >\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll() && multiple() && !vScroller) {\n          <div class=\"form-multi-select-dropdown-header\">\n            <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n              {{ selectAllLabel() }}\n            </button>\n          </div>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || loading()) {\n        <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel() }}</div>\n      }\n      @if (loading()) {\n        <c-element-cover [style]=\"{ 'border-radius': '6px', 'z-index': 2 }\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @let itemSizePx = itemSize();\n  @let bufferPx = itemSizePx * visibleItems();\n  @defer (on immediate) {\n    @let optionsArray = $safeNavigationMigration(multiSelectService?.optionsArray$) | async;\n    @if (optionsArray) {\n      @let optMaxHeight = optionsMaxHeight();\n      @let optMinWidth = minWidth();\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSizePx\"\n        [ngStyle]=\"\n          optMaxHeight !== 'auto'\n            ? {\n                'height.px': optMaxHeight,\n                'maxHeight.px': optMaxHeight,\n                'minWidth.px': optMinWidth,\n                overflowX: 'hidden'\n              }\n            : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n        \"\n        maxBufferPx=\"{{ bufferPx }}\"\n        minBufferPx=\"{{ bufferPx }}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"\n            let option of optionsArray;\n            trackBy: trackByFn;\n            templateCacheSize: 0;\n            even as even;\n            odd as odd;\n            index as index;\n            count as count;\n            first as first;\n            last as last\n          \"\n          [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  @let optMaxHeight = optionsMaxHeight();\n  <div\n    [class.form-multi-select-options]=\"visibleOptions()\"\n    [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (\n    option of userOptionsArray$ | async;\n    track option;\n    let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n  ) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n    />\n  }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{display:contents}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
+        ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown\n  #dropdown=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [class]=\"multiselectClasses()\"\n  [popperOptions]=\"popperOptions()\"\n>\n  <div\n    #dropdownToggle=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    role=\"button\"\n    class=\"form-multi-select-input-group\"\n  >\n    <span\n      [class]=\"multiselectSelectionClasses()\"\n      [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n    >\n      @if (selType === 'tags') {\n        @for (option of optionTags(); track option.value; let i = $index) {\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            [disabled]=\"isDisabled || (option.disabled ?? false)\"\n            [label]=\"option.label ?? option.value?.toString()\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag text-truncate\"\n            tabindex=\"-1\"\n          />\n        }\n      } @else if (selType === 'text' && !!selectedOpts.length) {\n        @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!searchOn) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n        </span>\n      } @else {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n          [disabled]=\"isDisabled || !searchOn\"\n          [class]=\"{ 'form-multi-select-search': true, disabled: isDisabled || !searchOn, 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n          type=\"text\"\n        />\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n          [attr.aria-label]=\"ariaCleanerLabel()\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button\n        (click)=\"handleIndicatorClick($event)\"\n        [disabled]=\"isDisabled\"\n        [attr.aria-label]=\"ariaIndicatorLabel()\"\n        class=\"form-multi-select-indicator\"\n        type=\"button\"\n      ></button>\n    </div>\n  </div>\n  @if (!isDisabled) {\n    <div\n      #dropdownMenu=\"cDropdownMenu\"\n      [visible]=\"dropdown.visible()\"\n      cDropdownMenu\n      class=\"form-multi-select-dropdown\"\n      role=\"menu\"\n    >\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll() && multiple() && !vScroller) {\n          <div class=\"form-multi-select-dropdown-header\">\n            <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n              {{ selectAllLabel() }}\n            </button>\n          </div>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || loading()) {\n        <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\" role=\"status\">{{ searchNoResultsLabel() }}</div>\n      }\n      @if (loading()) {\n        <c-element-cover [style]=\"{ 'border-radius': '6px', 'z-index': 2 }\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @let itemSizePx = itemSize();\n  @let bufferPx = itemSizePx * visibleItems();\n  @defer (on immediate) {\n    @let optionsArray = $safeNavigationMigration(multiSelectService?.optionsArray$) | async;\n    @if (optionsArray) {\n      @let optMaxHeight = optionsMaxHeight();\n      @let optMinWidth = minWidth();\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSizePx\"\n        [ngStyle]=\"\n          optMaxHeight !== 'auto'\n            ? {\n                'height.px': optMaxHeight,\n                'maxHeight.px': optMaxHeight,\n                'minWidth.px': optMinWidth,\n                overflowX: 'hidden'\n              }\n            : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n        \"\n        maxBufferPx=\"{{ bufferPx }}\"\n        minBufferPx=\"{{ bufferPx }}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"\n            let option of optionsArray;\n            trackBy: trackByFn;\n            templateCacheSize: 0;\n            even as even;\n            odd as odd;\n            index as index;\n            count as count;\n            first as first;\n            last as last\n          \"\n          [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  @let optMaxHeight = optionsMaxHeight();\n  <div\n    [class.form-multi-select-options]=\"visibleOptions()\"\n    [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (\n    option of userOptionsArray$ | async;\n    track option;\n    let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n  ) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n    />\n  }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{display:contents}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
                 import('@angular/cdk/scrolling').then(m => m.CdkFixedSizeVirtualScroll), /* @ts-ignore */
                 import('@angular/cdk/scrolling').then(m => m.CdkVirtualScrollViewport), /* @ts-ignore */
                 import('@angular/cdk/scrolling').then(m => m.CdkVirtualForOf), NgStyle,
@@ -3105,8 +3119,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.7", ng
                             '[attr.aria-expanded]': 'visible()',
                             '[attr.aria-disabled]': 'disabled()',
                             '[attr.tabindex]': 'tabIndex'
-                        }, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown\n  #dropdown=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [class]=\"multiselectClasses()\"\n  [popperOptions]=\"popperOptions()\"\n>\n  <div\n    #dropdownToggle=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    role=\"button\"\n    class=\"form-multi-select-input-group\"\n  >\n    <span\n      [class]=\"multiselectSelectionClasses()\"\n      [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n    >\n      @if (selType === 'tags') {\n        @for (option of optionTags(); track option.value; let i = $index) {\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            [disabled]=\"isDisabled || (option.disabled ?? false)\"\n            [label]=\"option.label ?? option.value?.toString()\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag text-truncate\"\n            tabindex=\"-1\"\n          />\n        }\n      } @else if (selType === 'text' && !!selectedOpts.length) {\n        @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!searchOn) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n        </span>\n      } @else {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n          [disabled]=\"isDisabled || !searchOn\"\n          [class]=\"{ 'form-multi-select-search': true, disabled: isDisabled || !searchOn, 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n          type=\"text\"\n        />\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button\n        (click)=\"handleIndicatorClick($event)\"\n        [disabled]=\"isDisabled\"\n        class=\"form-multi-select-indicator\"\n        type=\"button\"\n      ></button>\n    </div>\n  </div>\n  @if (!isDisabled) {\n    <div\n      #dropdownMenu=\"cDropdownMenu\"\n      [visible]=\"dropdown.visible()\"\n      cDropdownMenu\n      class=\"form-multi-select-dropdown\"\n      role=\"menu\"\n    >\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll() && multiple() && !vScroller) {\n          <div class=\"form-multi-select-dropdown-header\">\n            <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n              {{ selectAllLabel() }}\n            </button>\n          </div>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || loading()) {\n        <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel() }}</div>\n      }\n      @if (loading()) {\n        <c-element-cover [style]=\"{ 'border-radius': '6px', 'z-index': 2 }\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @let itemSizePx = itemSize();\n  @let bufferPx = itemSizePx * visibleItems();\n  @defer (on immediate) {\n    @let optionsArray = $safeNavigationMigration(multiSelectService?.optionsArray$) | async;\n    @if (optionsArray) {\n      @let optMaxHeight = optionsMaxHeight();\n      @let optMinWidth = minWidth();\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSizePx\"\n        [ngStyle]=\"\n          optMaxHeight !== 'auto'\n            ? {\n                'height.px': optMaxHeight,\n                'maxHeight.px': optMaxHeight,\n                'minWidth.px': optMinWidth,\n                overflowX: 'hidden'\n              }\n            : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n        \"\n        maxBufferPx=\"{{ bufferPx }}\"\n        minBufferPx=\"{{ bufferPx }}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"\n            let option of optionsArray;\n            trackBy: trackByFn;\n            templateCacheSize: 0;\n            even as even;\n            odd as odd;\n            index as index;\n            count as count;\n            first as first;\n            last as last\n          \"\n          [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  @let optMaxHeight = optionsMaxHeight();\n  <div\n    [class.form-multi-select-options]=\"visibleOptions()\"\n    [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (\n    option of userOptionsArray$ | async;\n    track option;\n    let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n  ) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n    />\n  }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{display:contents}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\n"] }]
-            }], ctorParameters: () => [], propDecorators: { allowCreateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreateOptions", required: false }] }], cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{
+                        }, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown\n  #dropdown=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [class]=\"multiselectClasses()\"\n  [popperOptions]=\"popperOptions()\"\n>\n  <div\n    #dropdownToggle=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    role=\"button\"\n    class=\"form-multi-select-input-group\"\n  >\n    <span\n      [class]=\"multiselectSelectionClasses()\"\n      [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n    >\n      @if (selType === 'tags') {\n        @for (option of optionTags(); track option.value; let i = $index) {\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            [disabled]=\"isDisabled || (option.disabled ?? false)\"\n            [label]=\"option.label ?? option.value?.toString()\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag text-truncate\"\n            tabindex=\"-1\"\n          />\n        }\n      } @else if (selType === 'text' && !!selectedOpts.length) {\n        @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!searchOn) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n        </span>\n      } @else {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n          [disabled]=\"isDisabled || !searchOn\"\n          [class]=\"{ 'form-multi-select-search': true, disabled: isDisabled || !searchOn, 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n          type=\"text\"\n        />\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n          [attr.aria-label]=\"ariaCleanerLabel()\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button\n        (click)=\"handleIndicatorClick($event)\"\n        [disabled]=\"isDisabled\"\n        [attr.aria-label]=\"ariaIndicatorLabel()\"\n        class=\"form-multi-select-indicator\"\n        type=\"button\"\n      ></button>\n    </div>\n  </div>\n  @if (!isDisabled) {\n    <div\n      #dropdownMenu=\"cDropdownMenu\"\n      [visible]=\"dropdown.visible()\"\n      cDropdownMenu\n      class=\"form-multi-select-dropdown\"\n      role=\"menu\"\n    >\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll() && multiple() && !vScroller) {\n          <div class=\"form-multi-select-dropdown-header\">\n            <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n              {{ selectAllLabel() }}\n            </button>\n          </div>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || loading()) {\n        <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\" role=\"status\">{{ searchNoResultsLabel() }}</div>\n      }\n      @if (loading()) {\n        <c-element-cover [style]=\"{ 'border-radius': '6px', 'z-index': 2 }\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @let itemSizePx = itemSize();\n  @let bufferPx = itemSizePx * visibleItems();\n  @defer (on immediate) {\n    @let optionsArray = $safeNavigationMigration(multiSelectService?.optionsArray$) | async;\n    @if (optionsArray) {\n      @let optMaxHeight = optionsMaxHeight();\n      @let optMinWidth = minWidth();\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSizePx\"\n        [ngStyle]=\"\n          optMaxHeight !== 'auto'\n            ? {\n                'height.px': optMaxHeight,\n                'maxHeight.px': optMaxHeight,\n                'minWidth.px': optMinWidth,\n                overflowX: 'hidden'\n              }\n            : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n        \"\n        maxBufferPx=\"{{ bufferPx }}\"\n        minBufferPx=\"{{ bufferPx }}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"\n            let option of optionsArray;\n            trackBy: trackByFn;\n            templateCacheSize: 0;\n            even as even;\n            odd as odd;\n            index as index;\n            count as count;\n            first as first;\n            last as last\n          \"\n          [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  @let optMaxHeight = optionsMaxHeight();\n  <div\n    [class.form-multi-select-options]=\"visibleOptions()\"\n    [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (\n    option of userOptionsArray$ | async;\n    track option;\n    let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n  ) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n    />\n  }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{display:contents}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\n"] }]
+            }], ctorParameters: () => [], propDecorators: { allowCreateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreateOptions", required: false }] }], ariaCleanerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaCleanerLabel", required: false }] }], ariaIndicatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaIndicatorLabel", required: false }] }], cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{
                     type: Input
                 }], optionsMaxHeightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsMaxHeight", required: false }] }], optionsStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsStyle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], resetSelectionOnOptionsChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetSelectionOnOptionsChange", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchNoResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchNoResultsLabel", required: false }] }], searchValue: [{
                     type: Input
@@ -3484,7 +3498,7 @@ class AutocompleteOptionComponent {
         return this.#elementRef.nativeElement.innerText ?? this.option()?.label ?? '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: AutocompleteOptionComponent, isStandalone: true, selector: "c-autocomplete-option", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, properties: { "class": "hostClasses()", "attr.role": "\"option\"" }, classAttribute: "autocomplete-option" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: AutocompleteOptionComponent, isStandalone: true, selector: "c-autocomplete-option", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, properties: { "class": "hostClasses()", "attr.role": "\"option\"", "attr.aria-selected": "selected()" }, classAttribute: "autocomplete-option" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteOptionComponent, decorators: [{
             type: Component,
@@ -3492,6 +3506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'autocomplete-option',
                         '[class]': 'hostClasses()',
                         '[attr.role]': '"option"',
+                        '[attr.aria-selected]': 'selected()',
                         tabindex: '-1'
                     }, styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}\n"] }]
         }], propDecorators: { disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
@@ -3753,6 +3768,20 @@ class AutocompleteComponent {
      * @default false
      */
     allowOnlyDefinedOptions = input(false, { ...(ngDevMode ? { debugName: "allowOnlyDefinedOptions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Sets the accessible label (`aria-label`) for the button that clears the current selection. This improves accessibility for screen readers.
+     * @return string
+     * @since 5.7.7
+     */
+    ariaCleanerLabel = input('Clear selection', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaCleanerLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the accessible label (`aria-label`) for the dropdown toggle indicator button. This improves accessibility for screen readers.
+     * @return string
+     * @since 5.7.7
+     */
+    ariaIndicatorLabel = input('Toggle visibility of options menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaIndicatorLabel" }] : /* istanbul ignore next */ []));
     /**
      * Enables selection cleaner element.
      * When `true`, displays a clear button that allows users to reset the selection.
@@ -4055,7 +4084,7 @@ class AutocompleteComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#hintsEffect" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: AutocompleteComponent, isStandalone: true, selector: "c-autocomplete", inputs: { inputPortalContent: { classPropertyName: "inputPortalContent", publicName: "inputPortalContent", isSignal: true, isRequired: true, transformFunction: null }, allowOnlyDefinedOptions: { classPropertyName: "allowOnlyDefinedOptions", publicName: "allowOnlyDefinedOptions", isSignal: true, isRequired: false, transformFunction: null }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, highlightOptionsOnSearch: { classPropertyName: "highlightOptionsOnSearch", publicName: "highlightOptionsOnSearch", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionsMaxHeight: { classPropertyName: "optionsMaxHeight", publicName: "optionsMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionGroupTemplate: { classPropertyName: "optionGroupTemplate", publicName: "optionGroupTemplate", isSignal: true, isRequired: false, transformFunction: null }, popperOptions: { classPropertyName: "popperOptions", publicName: "popperOptions", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchNoResultsLabel: { classPropertyName: "searchNoResultsLabel", publicName: "searchNoResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, showHints: { classPropertyName: "showHints", publicName: "showHints", isSignal: true, isRequired: false, transformFunction: null }, sizing: { classPropertyName: "sizing", publicName: "sizing", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, virtualScroller: { classPropertyName: "virtualScroller", publicName: "virtualScroller", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, visibleItems: { classPropertyName: "visibleItems", publicName: "visibleItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", optionChange: "optionChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown": "handleGlobalSearch($event)" }, properties: { "class": "hostClasses()" }, classAttribute: "autocomplete" }, providers: [AutocompleteService], viewQueries: [{ propertyName: "dropdownMenuRef", first: true, predicate: ["dropdownMenuRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "togglerRef", first: true, predicate: ["dropdownToggleRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cleanerRef", first: true, predicate: ["cleanerRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "indicatorRef", first: true, predicate: ["indicatorRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: AutocompleteOptionsComponent, descendants: true, isSignal: true }], exportAs: ["cAutocompleteWrapper"], ngImport: i0, template: "@let inputElementId = inputPortalContent().nativeElement.getAttribute('id');\n@let allOptions = options();\n@let isDisabled = disabled();\n@let searchVal = searchValue();\n@let selectedVal = selected() ?? null;\n@let hint = hintValue();\n@let hasCleaner = cleaner();\n@let hasIndicator = indicator();\n\n<ng-template [cdkPortalOutlet]=\"domTogglerPortal()\" />\n<ng-template [cdkPortalOutlet]=\"domDropdownMenuPortal()\" />\n\n<c-dropdown\n  #dropdownRef=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [popperOptions]=\"popperOptions()\"\n  class=\"d-flex\"\n>\n  <div\n    #dropdownToggleRef=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    class=\"autocomplete-input-group\"\n    role=\"button\"\n  >\n    @if (showHints() && (!!searchVal || (hint && !searchVal && !selectedVal))) {\n      <input\n        #inputHintRef\n        [id]=\"`${inputElementId}-hint`\"\n        [value]=\"hint\"\n        aria-hidden=\"true\"\n        autoComplete=\"off\"\n        class=\"autocomplete-input autocomplete-input-hint\"\n        readOnly\n        tabIndex=\"-1\"\n      />\n    }\n\n    <span style=\"display: contents\">\n      <ng-template [cdkPortalOutlet]=\"domInputPortal()\" />\n    </span>\n\n    @if (hasCleaner || hasIndicator) {\n      <div class=\"autocomplete-buttons\">\n        @if (!isDisabled && !readOnly() && hasCleaner && selectedVal) {\n          <button\n            #cleanerRef\n            (click)=\"handleClear($event)\"\n            class=\"autocomplete-cleaner\"\n            tabindex=\"-1\"\n            type=\"button\"\n          ></button>\n        }\n        @if (hasIndicator) {\n          <button\n            #indicatorRef\n            (click)=\"handleIndicatorClick($event)\"\n            [disabled]=\"isDisabled || !(searchNoResultsLabel() || allOptions.length > 0) && isExternalSearch(search())\"\n            class=\"autocomplete-indicator\"\n            tabindex=\"-1\"\n            type=\"button\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n\n  <div #dropdownMenuRef>\n    @let showDropdown = show();\n    @let noResultsLabel = searchNoResultsLabel();\n    @let isLoading = loading();\n    @let isVisible = dropdownRef.visible();\n    @let showOptions = allOptions.length && !isLoading;\n    @let showLoadingWithResults = isLoading && searchVal && allOptions.length;\n    @let showNoResults = !isLoading && noResultsLabel && searchVal && !allOptions.length;\n    @if (!isDisabled) {\n      <div\n        #dropdownMenu=\"cDropdownMenu\"\n        [attr.aria-labelledby]=\"inputElementId\"\n        [class]=\"dropdownMenuClasses()\"\n        [id]=\"`${inputElementId}-listbox`\"\n        [class.show]=\"isVisible && (showOptions || showLoadingWithResults || showNoResults)\"\n        cDropdownMenu\n        role=\"listbox\"\n      >\n        @if (showDropdown) {\n          <c-autocomplete-options\n            #optionsRef\n            [delay]=\"delay()\"\n            [highlightOptionsOnSearch]=\"highlightOptionsOnSearch()\"\n            [itemSize]=\"itemSize()\"\n            [loading]=\"isLoading\"\n            [optionGroupTemplate]=\"optionGroupTemplate()\"\n            [optionTemplate]=\"optionTemplate()\"\n            [optionsMaxHeight]=\"optionsMaxHeight()\"\n            [options]=\"allOptions\"\n            [searchNoResultsLabel]=\"searchNoResultsLabel()\"\n            [searchValue]=\"searchVal\"\n            [search]=\"search()\"\n            [selected]=\"selectedVal\"\n            [virtualScroller]=\"virtualScroller()\"\n            [visibleItems]=\"visibleItems()\"\n            tabindex=\"-1\"\n          />\n        } @else if (showNoResults) {\n          <div class=\"autocomplete-options-empty\">{{ noResultsLabel }}</div>\n        }\n        @if (showLoadingWithResults) {\n          <c-element-cover [style]=\"{'border-radius': '6px', 'z-index': 2}\" />\n        }\n      </div>\n    }\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .autocomplete-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .autocomplete-input-group{border-start-end-radius:var(--cui-autocomplete-border-radius);border-end-end-radius:var(--cui-autocomplete-border-radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: AutocompleteOptionsComponent, selector: "c-autocomplete-options", inputs: ["delay", "highlightOptionsOnSearch", "loading", "itemSize", "options", "optionsMaxHeight", "optionTemplate", "optionGroupTemplate", "search", "searchNoResultsLabel", "searchValue", "selected", "virtualScroller", "visibleItems"], outputs: ["optionClick"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: AutocompleteComponent, isStandalone: true, selector: "c-autocomplete", inputs: { inputPortalContent: { classPropertyName: "inputPortalContent", publicName: "inputPortalContent", isSignal: true, isRequired: true, transformFunction: null }, allowOnlyDefinedOptions: { classPropertyName: "allowOnlyDefinedOptions", publicName: "allowOnlyDefinedOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaCleanerLabel: { classPropertyName: "ariaCleanerLabel", publicName: "ariaCleanerLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaIndicatorLabel: { classPropertyName: "ariaIndicatorLabel", publicName: "ariaIndicatorLabel", isSignal: true, isRequired: false, transformFunction: null }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, highlightOptionsOnSearch: { classPropertyName: "highlightOptionsOnSearch", publicName: "highlightOptionsOnSearch", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionsMaxHeight: { classPropertyName: "optionsMaxHeight", publicName: "optionsMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionGroupTemplate: { classPropertyName: "optionGroupTemplate", publicName: "optionGroupTemplate", isSignal: true, isRequired: false, transformFunction: null }, popperOptions: { classPropertyName: "popperOptions", publicName: "popperOptions", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchNoResultsLabel: { classPropertyName: "searchNoResultsLabel", publicName: "searchNoResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, showHints: { classPropertyName: "showHints", publicName: "showHints", isSignal: true, isRequired: false, transformFunction: null }, sizing: { classPropertyName: "sizing", publicName: "sizing", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, virtualScroller: { classPropertyName: "virtualScroller", publicName: "virtualScroller", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, visibleItems: { classPropertyName: "visibleItems", publicName: "visibleItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", optionChange: "optionChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown": "handleGlobalSearch($event)" }, properties: { "class": "hostClasses()" }, classAttribute: "autocomplete" }, providers: [AutocompleteService], viewQueries: [{ propertyName: "dropdownMenuRef", first: true, predicate: ["dropdownMenuRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "togglerRef", first: true, predicate: ["dropdownToggleRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cleanerRef", first: true, predicate: ["cleanerRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "indicatorRef", first: true, predicate: ["indicatorRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: AutocompleteOptionsComponent, descendants: true, isSignal: true }], exportAs: ["cAutocompleteWrapper"], ngImport: i0, template: "@let inputElementId = inputPortalContent().nativeElement.getAttribute('id');\n@let allOptions = options();\n@let isDisabled = disabled();\n@let searchVal = searchValue();\n@let selectedVal = selected() ?? null;\n@let hint = hintValue();\n@let hasCleaner = cleaner();\n@let hasIndicator = indicator();\n\n<ng-template [cdkPortalOutlet]=\"domTogglerPortal()\" />\n<ng-template [cdkPortalOutlet]=\"domDropdownMenuPortal()\" />\n\n<c-dropdown\n  #dropdownRef=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [popperOptions]=\"popperOptions()\"\n  class=\"d-flex\"\n>\n  <div\n    #dropdownToggleRef=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    class=\"autocomplete-input-group\"\n    role=\"button\"\n  >\n    @if (showHints() && (!!searchVal || (hint && !searchVal && !selectedVal))) {\n      <input\n        #inputHintRef\n        [id]=\"`${inputElementId}-hint`\"\n        [value]=\"hint\"\n        aria-hidden=\"true\"\n        autoComplete=\"off\"\n        class=\"autocomplete-input autocomplete-input-hint\"\n        readOnly\n        tabIndex=\"-1\"\n      />\n    }\n\n    <span style=\"display: contents\">\n      <ng-template [cdkPortalOutlet]=\"domInputPortal()\" />\n    </span>\n\n    @if (hasCleaner || hasIndicator) {\n      <div class=\"autocomplete-buttons\">\n        @if (!isDisabled && !readOnly() && hasCleaner && selectedVal) {\n          <button\n            #cleanerRef\n            (click)=\"handleClear($event)\"\n            [attr.aria-label]=\"ariaCleanerLabel()\"\n            class=\"autocomplete-cleaner\"\n            tabindex=\"-1\"\n            type=\"button\"\n          ></button>\n        }\n        @if (hasIndicator) {\n          <button\n            #indicatorRef\n            (click)=\"handleIndicatorClick($event)\"\n            [disabled]=\"isDisabled || !(searchNoResultsLabel() || allOptions.length > 0) && isExternalSearch(search())\"\n            [attr.aria-label]=\"ariaIndicatorLabel()\"\n            class=\"autocomplete-indicator\"\n            tabindex=\"-1\"\n            type=\"button\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n\n  <div #dropdownMenuRef>\n    @let showDropdown = show();\n    @let noResultsLabel = searchNoResultsLabel();\n    @let isLoading = loading();\n    @let isVisible = dropdownRef.visible();\n    @let showOptions = allOptions.length && !isLoading;\n    @let showLoadingWithResults = isLoading && searchVal && allOptions.length;\n    @let showNoResults = !isLoading && noResultsLabel && searchVal && !allOptions.length;\n    @if (!isDisabled) {\n      <div\n        #dropdownMenu=\"cDropdownMenu\"\n        [attr.aria-labelledby]=\"inputElementId\"\n        [class]=\"dropdownMenuClasses()\"\n        [id]=\"`${inputElementId}-listbox`\"\n        [class.show]=\"isVisible && (showOptions || showLoadingWithResults || showNoResults)\"\n        cDropdownMenu\n        role=\"listbox\"\n      >\n        @if (showDropdown) {\n          <c-autocomplete-options\n            #optionsRef\n            [delay]=\"delay()\"\n            [highlightOptionsOnSearch]=\"highlightOptionsOnSearch()\"\n            [itemSize]=\"itemSize()\"\n            [loading]=\"isLoading\"\n            [optionGroupTemplate]=\"optionGroupTemplate()\"\n            [optionTemplate]=\"optionTemplate()\"\n            [optionsMaxHeight]=\"optionsMaxHeight()\"\n            [options]=\"allOptions\"\n            [searchNoResultsLabel]=\"searchNoResultsLabel()\"\n            [searchValue]=\"searchVal\"\n            [search]=\"search()\"\n            [selected]=\"selectedVal\"\n            [virtualScroller]=\"virtualScroller()\"\n            [visibleItems]=\"visibleItems()\"\n            tabindex=\"-1\"\n          />\n        } @else if (showNoResults) {\n          <div class=\"autocomplete-options-empty\" role=\"status\">{{ noResultsLabel }}</div>\n        }\n        @if (showLoadingWithResults) {\n          <c-element-cover [style]=\"{'border-radius': '6px', 'z-index': 2}\" />\n        }\n      </div>\n    }\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .autocomplete-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .autocomplete-input-group{border-start-end-radius:var(--cui-autocomplete-border-radius);border-end-end-radius:var(--cui-autocomplete-border-radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: AutocompleteOptionsComponent, selector: "c-autocomplete-options", inputs: ["delay", "highlightOptionsOnSearch", "loading", "itemSize", "options", "optionsMaxHeight", "optionTemplate", "optionGroupTemplate", "search", "searchNoResultsLabel", "searchValue", "selected", "virtualScroller", "visibleItems"], outputs: ["optionClick"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -4071,8 +4100,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class]': 'hostClasses()',
                         '(keydown)': 'handleGlobalSearch($event)',
                         ngSkipHydration: 'true'
-                    }, changeDetection: ChangeDetectionStrategy.Eager, providers: [AutocompleteService], template: "@let inputElementId = inputPortalContent().nativeElement.getAttribute('id');\n@let allOptions = options();\n@let isDisabled = disabled();\n@let searchVal = searchValue();\n@let selectedVal = selected() ?? null;\n@let hint = hintValue();\n@let hasCleaner = cleaner();\n@let hasIndicator = indicator();\n\n<ng-template [cdkPortalOutlet]=\"domTogglerPortal()\" />\n<ng-template [cdkPortalOutlet]=\"domDropdownMenuPortal()\" />\n\n<c-dropdown\n  #dropdownRef=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [popperOptions]=\"popperOptions()\"\n  class=\"d-flex\"\n>\n  <div\n    #dropdownToggleRef=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    class=\"autocomplete-input-group\"\n    role=\"button\"\n  >\n    @if (showHints() && (!!searchVal || (hint && !searchVal && !selectedVal))) {\n      <input\n        #inputHintRef\n        [id]=\"`${inputElementId}-hint`\"\n        [value]=\"hint\"\n        aria-hidden=\"true\"\n        autoComplete=\"off\"\n        class=\"autocomplete-input autocomplete-input-hint\"\n        readOnly\n        tabIndex=\"-1\"\n      />\n    }\n\n    <span style=\"display: contents\">\n      <ng-template [cdkPortalOutlet]=\"domInputPortal()\" />\n    </span>\n\n    @if (hasCleaner || hasIndicator) {\n      <div class=\"autocomplete-buttons\">\n        @if (!isDisabled && !readOnly() && hasCleaner && selectedVal) {\n          <button\n            #cleanerRef\n            (click)=\"handleClear($event)\"\n            class=\"autocomplete-cleaner\"\n            tabindex=\"-1\"\n            type=\"button\"\n          ></button>\n        }\n        @if (hasIndicator) {\n          <button\n            #indicatorRef\n            (click)=\"handleIndicatorClick($event)\"\n            [disabled]=\"isDisabled || !(searchNoResultsLabel() || allOptions.length > 0) && isExternalSearch(search())\"\n            class=\"autocomplete-indicator\"\n            tabindex=\"-1\"\n            type=\"button\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n\n  <div #dropdownMenuRef>\n    @let showDropdown = show();\n    @let noResultsLabel = searchNoResultsLabel();\n    @let isLoading = loading();\n    @let isVisible = dropdownRef.visible();\n    @let showOptions = allOptions.length && !isLoading;\n    @let showLoadingWithResults = isLoading && searchVal && allOptions.length;\n    @let showNoResults = !isLoading && noResultsLabel && searchVal && !allOptions.length;\n    @if (!isDisabled) {\n      <div\n        #dropdownMenu=\"cDropdownMenu\"\n        [attr.aria-labelledby]=\"inputElementId\"\n        [class]=\"dropdownMenuClasses()\"\n        [id]=\"`${inputElementId}-listbox`\"\n        [class.show]=\"isVisible && (showOptions || showLoadingWithResults || showNoResults)\"\n        cDropdownMenu\n        role=\"listbox\"\n      >\n        @if (showDropdown) {\n          <c-autocomplete-options\n            #optionsRef\n            [delay]=\"delay()\"\n            [highlightOptionsOnSearch]=\"highlightOptionsOnSearch()\"\n            [itemSize]=\"itemSize()\"\n            [loading]=\"isLoading\"\n            [optionGroupTemplate]=\"optionGroupTemplate()\"\n            [optionTemplate]=\"optionTemplate()\"\n            [optionsMaxHeight]=\"optionsMaxHeight()\"\n            [options]=\"allOptions\"\n            [searchNoResultsLabel]=\"searchNoResultsLabel()\"\n            [searchValue]=\"searchVal\"\n            [search]=\"search()\"\n            [selected]=\"selectedVal\"\n            [virtualScroller]=\"virtualScroller()\"\n            [visibleItems]=\"visibleItems()\"\n            tabindex=\"-1\"\n          />\n        } @else if (showNoResults) {\n          <div class=\"autocomplete-options-empty\">{{ noResultsLabel }}</div>\n        }\n        @if (showLoadingWithResults) {\n          <c-element-cover [style]=\"{'border-radius': '6px', 'z-index': 2}\" />\n        }\n      </div>\n    }\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .autocomplete-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .autocomplete-input-group{border-start-end-radius:var(--cui-autocomplete-border-radius);border-end-end-radius:var(--cui-autocomplete-border-radius)}\n"] }]
-        }], propDecorators: { dropdownMenuRef: [{ type: i0.ViewChild, args: ['dropdownMenuRef', { ...{ read: ElementRef }, isSignal: true }] }], togglerRef: [{ type: i0.ViewChild, args: ['dropdownToggleRef', { ...{ read: ElementRef }, isSignal: true }] }], cleanerRef: [{ type: i0.ViewChild, args: ['cleanerRef', { ...{ read: ElementRef }, isSignal: true }] }], indicatorRef: [{ type: i0.ViewChild, args: ['indicatorRef', { ...{ read: ElementRef }, isSignal: true }] }], optionsRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AutocompleteOptionsComponent), { isSignal: true }] }], inputPortalContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPortalContent", required: true }] }], allowOnlyDefinedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyDefinedOptions", required: false }] }], cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], highlightOptionsOnSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightOptionsOnSearch", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionsMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsMaxHeight", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], optionGroupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupTemplate", required: false }] }], popperOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "popperOptions", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchNoResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchNoResultsLabel", required: false }] }], showHints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHints", required: false }] }], sizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizing", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], virtualScroller: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroller", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleItems", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.Eager, providers: [AutocompleteService], template: "@let inputElementId = inputPortalContent().nativeElement.getAttribute('id');\n@let allOptions = options();\n@let isDisabled = disabled();\n@let searchVal = searchValue();\n@let selectedVal = selected() ?? null;\n@let hint = hintValue();\n@let hasCleaner = cleaner();\n@let hasIndicator = indicator();\n\n<ng-template [cdkPortalOutlet]=\"domTogglerPortal()\" />\n<ng-template [cdkPortalOutlet]=\"domDropdownMenuPortal()\" />\n\n<c-dropdown\n  #dropdownRef=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [popperOptions]=\"popperOptions()\"\n  class=\"d-flex\"\n>\n  <div\n    #dropdownToggleRef=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    class=\"autocomplete-input-group\"\n    role=\"button\"\n  >\n    @if (showHints() && (!!searchVal || (hint && !searchVal && !selectedVal))) {\n      <input\n        #inputHintRef\n        [id]=\"`${inputElementId}-hint`\"\n        [value]=\"hint\"\n        aria-hidden=\"true\"\n        autoComplete=\"off\"\n        class=\"autocomplete-input autocomplete-input-hint\"\n        readOnly\n        tabIndex=\"-1\"\n      />\n    }\n\n    <span style=\"display: contents\">\n      <ng-template [cdkPortalOutlet]=\"domInputPortal()\" />\n    </span>\n\n    @if (hasCleaner || hasIndicator) {\n      <div class=\"autocomplete-buttons\">\n        @if (!isDisabled && !readOnly() && hasCleaner && selectedVal) {\n          <button\n            #cleanerRef\n            (click)=\"handleClear($event)\"\n            [attr.aria-label]=\"ariaCleanerLabel()\"\n            class=\"autocomplete-cleaner\"\n            tabindex=\"-1\"\n            type=\"button\"\n          ></button>\n        }\n        @if (hasIndicator) {\n          <button\n            #indicatorRef\n            (click)=\"handleIndicatorClick($event)\"\n            [disabled]=\"isDisabled || !(searchNoResultsLabel() || allOptions.length > 0) && isExternalSearch(search())\"\n            [attr.aria-label]=\"ariaIndicatorLabel()\"\n            class=\"autocomplete-indicator\"\n            tabindex=\"-1\"\n            type=\"button\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n\n  <div #dropdownMenuRef>\n    @let showDropdown = show();\n    @let noResultsLabel = searchNoResultsLabel();\n    @let isLoading = loading();\n    @let isVisible = dropdownRef.visible();\n    @let showOptions = allOptions.length && !isLoading;\n    @let showLoadingWithResults = isLoading && searchVal && allOptions.length;\n    @let showNoResults = !isLoading && noResultsLabel && searchVal && !allOptions.length;\n    @if (!isDisabled) {\n      <div\n        #dropdownMenu=\"cDropdownMenu\"\n        [attr.aria-labelledby]=\"inputElementId\"\n        [class]=\"dropdownMenuClasses()\"\n        [id]=\"`${inputElementId}-listbox`\"\n        [class.show]=\"isVisible && (showOptions || showLoadingWithResults || showNoResults)\"\n        cDropdownMenu\n        role=\"listbox\"\n      >\n        @if (showDropdown) {\n          <c-autocomplete-options\n            #optionsRef\n            [delay]=\"delay()\"\n            [highlightOptionsOnSearch]=\"highlightOptionsOnSearch()\"\n            [itemSize]=\"itemSize()\"\n            [loading]=\"isLoading\"\n            [optionGroupTemplate]=\"optionGroupTemplate()\"\n            [optionTemplate]=\"optionTemplate()\"\n            [optionsMaxHeight]=\"optionsMaxHeight()\"\n            [options]=\"allOptions\"\n            [searchNoResultsLabel]=\"searchNoResultsLabel()\"\n            [searchValue]=\"searchVal\"\n            [search]=\"search()\"\n            [selected]=\"selectedVal\"\n            [virtualScroller]=\"virtualScroller()\"\n            [visibleItems]=\"visibleItems()\"\n            tabindex=\"-1\"\n          />\n        } @else if (showNoResults) {\n          <div class=\"autocomplete-options-empty\" role=\"status\">{{ noResultsLabel }}</div>\n        }\n        @if (showLoadingWithResults) {\n          <c-element-cover [style]=\"{'border-radius': '6px', 'z-index': 2}\" />\n        }\n      </div>\n    }\n  </div>\n</c-dropdown>\n", styles: [":host{display:block}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .autocomplete-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .autocomplete-input-group{border-start-end-radius:var(--cui-autocomplete-border-radius);border-end-end-radius:var(--cui-autocomplete-border-radius)}\n"] }]
+        }], propDecorators: { dropdownMenuRef: [{ type: i0.ViewChild, args: ['dropdownMenuRef', { ...{ read: ElementRef }, isSignal: true }] }], togglerRef: [{ type: i0.ViewChild, args: ['dropdownToggleRef', { ...{ read: ElementRef }, isSignal: true }] }], cleanerRef: [{ type: i0.ViewChild, args: ['cleanerRef', { ...{ read: ElementRef }, isSignal: true }] }], indicatorRef: [{ type: i0.ViewChild, args: ['indicatorRef', { ...{ read: ElementRef }, isSignal: true }] }], optionsRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AutocompleteOptionsComponent), { isSignal: true }] }], inputPortalContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPortalContent", required: true }] }], allowOnlyDefinedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyDefinedOptions", required: false }] }], ariaCleanerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaCleanerLabel", required: false }] }], ariaIndicatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaIndicatorLabel", required: false }] }], cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], highlightOptionsOnSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightOptionsOnSearch", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionsMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsMaxHeight", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], optionGroupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupTemplate", required: false }] }], popperOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "popperOptions", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchNoResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchNoResultsLabel", required: false }] }], showHints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHints", required: false }] }], sizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizing", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], virtualScroller: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroller", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleItems", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
 
 class AutocompleteDirective {
     writeValue(value) {
@@ -4150,6 +4179,20 @@ class AutocompleteDirective {
      * @default false
      */
     allowOnlyDefinedOptions = input(false, { ...(ngDevMode ? { debugName: "allowOnlyDefinedOptions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Sets the accessible label (`aria-label`) for the button that clears the current selection. This improves accessibility for screen readers.
+     * @return string
+     * @since 5.7.7
+     */
+    ariaCleanerLabel = input('Clear selection', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaCleanerLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the accessible label (`aria-label`) for the dropdown toggle indicator button. This improves accessibility for screen readers.
+     * @return string
+     * @since 5.7.7
+     */
+    ariaIndicatorLabel = input('Toggle visibility of options menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaIndicatorLabel" }] : /* istanbul ignore next */ []));
     /**
      * Enables selection cleaner element.
      * When `true`, displays a clear button that allows users to reset the selection.
@@ -4476,6 +4519,8 @@ class AutocompleteDirective {
             bindings: [
                 inputBinding('inputPortalContent', () => this.#hostElement),
                 inputBinding('allowOnlyDefinedOptions', this.allowOnlyDefinedOptions),
+                inputBinding('ariaCleanerLabel', this.ariaCleanerLabel),
+                inputBinding('ariaIndicatorLabel', this.ariaIndicatorLabel),
                 inputBinding('cleaner', this.cleaner),
                 inputBinding('clearSearchOnSelect', this.clearSearchOnSelect),
                 inputBinding('delay', this.delay),
@@ -4708,7 +4753,7 @@ class AutocompleteDirective {
         this.#hostElement.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: AutocompleteDirective, isStandalone: true, selector: "input[cAutocomplete]", inputs: { popperOptionsInput: { classPropertyName: "popperOptionsInput", publicName: "popperOptions", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyDefinedOptions: { classPropertyName: "allowOnlyDefinedOptions", publicName: "allowOnlyDefinedOptions", isSignal: true, isRequired: false, transformFunction: null }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, highlightOptionsOnSearch: { classPropertyName: "highlightOptionsOnSearch", publicName: "highlightOptionsOnSearch", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionsMaxHeightInput: { classPropertyName: "optionsMaxHeightInput", publicName: "optionsMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionGroupTemplate: { classPropertyName: "optionGroupTemplate", publicName: "optionGroupTemplate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, resetSelectionOnOptionsChange: { classPropertyName: "resetSelectionOnOptionsChange", publicName: "resetSelectionOnOptionsChange", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchNoResultsLabel: { classPropertyName: "searchNoResultsLabel", publicName: "searchNoResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, showHints: { classPropertyName: "showHints", publicName: "showHints", isSignal: true, isRequired: false, transformFunction: null }, sizing: { classPropertyName: "sizing", publicName: "sizing", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, virtualScroller: { classPropertyName: "virtualScroller", publicName: "virtualScroller", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, visibleItemsInput: { classPropertyName: "visibleItemsInput", publicName: "visibleItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", optionChange: "optionChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { attributes: { "type": "text" }, properties: { "attr.autocomplete": "\"off\"", "attr.aria-autocomplete": "\"list\"", "attr.aria-haspopup": "\"listbox\"", "attr.aria-expanded": "visible()", "attr.aria-controls": "`${id()}-listbox`", "attr.aria-activedescendant": "null", "attr.aria-owns": "`${id()}-listbox`", "attr.disabled": "disabledState() || null", "attr.id": "id()", "attr.readonly": "readOnly() || null", "attr.role": "\"combobox\"" }, classAttribute: "autocomplete-input" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: AutocompleteDirective, isStandalone: true, selector: "input[cAutocomplete]", inputs: { popperOptionsInput: { classPropertyName: "popperOptionsInput", publicName: "popperOptions", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyDefinedOptions: { classPropertyName: "allowOnlyDefinedOptions", publicName: "allowOnlyDefinedOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaCleanerLabel: { classPropertyName: "ariaCleanerLabel", publicName: "ariaCleanerLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaIndicatorLabel: { classPropertyName: "ariaIndicatorLabel", publicName: "ariaIndicatorLabel", isSignal: true, isRequired: false, transformFunction: null }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, highlightOptionsOnSearch: { classPropertyName: "highlightOptionsOnSearch", publicName: "highlightOptionsOnSearch", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionsMaxHeightInput: { classPropertyName: "optionsMaxHeightInput", publicName: "optionsMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionGroupTemplate: { classPropertyName: "optionGroupTemplate", publicName: "optionGroupTemplate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, resetSelectionOnOptionsChange: { classPropertyName: "resetSelectionOnOptionsChange", publicName: "resetSelectionOnOptionsChange", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchNoResultsLabel: { classPropertyName: "searchNoResultsLabel", publicName: "searchNoResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, showHints: { classPropertyName: "showHints", publicName: "showHints", isSignal: true, isRequired: false, transformFunction: null }, sizing: { classPropertyName: "sizing", publicName: "sizing", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, virtualScroller: { classPropertyName: "virtualScroller", publicName: "virtualScroller", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, visibleItemsInput: { classPropertyName: "visibleItemsInput", publicName: "visibleItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", optionChange: "optionChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { attributes: { "type": "text" }, properties: { "attr.autocomplete": "\"off\"", "attr.aria-autocomplete": "\"list\"", "attr.aria-haspopup": "\"listbox\"", "attr.aria-expanded": "visible()", "attr.aria-controls": "`${id()}-listbox`", "attr.aria-activedescendant": "null", "attr.aria-owns": "`${id()}-listbox`", "attr.disabled": "disabledState() || null", "attr.id": "id()", "attr.readonly": "readOnly() || null", "attr.role": "\"combobox\"" }, classAttribute: "autocomplete-input" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutocompleteDirective),
@@ -4747,7 +4792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         }
                     ]
                 }]
-        }], propDecorators: { popperOptionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "popperOptions", required: false }] }], allowOnlyDefinedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyDefinedOptions", required: false }] }], cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], highlightOptionsOnSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightOptionsOnSearch", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], optionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionsMaxHeightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsMaxHeight", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], optionGroupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupTemplate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], resetSelectionOnOptionsChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetSelectionOnOptionsChange", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchNoResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchNoResultsLabel", required: false }] }], showHints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHints", required: false }] }], sizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizing", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], virtualScroller: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroller", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleItemsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleItems", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
+        }], propDecorators: { popperOptionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "popperOptions", required: false }] }], allowOnlyDefinedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyDefinedOptions", required: false }] }], ariaCleanerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaCleanerLabel", required: false }] }], ariaIndicatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaIndicatorLabel", required: false }] }], cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], highlightOptionsOnSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightOptionsOnSearch", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], optionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionsMaxHeightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsMaxHeight", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], optionGroupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupTemplate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], resetSelectionOnOptionsChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetSelectionOnOptionsChange", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchNoResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchNoResultsLabel", required: false }] }], showHints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHints", required: false }] }], sizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizing", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], virtualScroller: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroller", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleItemsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleItems", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
 
 class AutocompleteModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -9082,6 +9127,13 @@ class FormPasswordActionComponent {
      */
     ariaLabelToggler = input('Toggle password visibility', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabelToggler" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the `aria-pressed` state for the toggle password visibility button, reflecting whether the password is currently visible.
+     * @default false
+     * @since 5.7.7
+     */
+    ariaPressed = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaPressed" }] : /* istanbul ignore next */ []));
     /**
      * Sets disabled state of the toggle password visibility button. When `true`, the user cannot interact with the button.
      * @default false
@@ -9093,12 +9145,12 @@ class FormPasswordActionComponent {
         $event.currentTarget?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormPasswordActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: FormPasswordActionComponent, isStandalone: true, selector: "c-form-password-action", inputs: { ariaLabelToggler: { classPropertyName: "ariaLabelToggler", publicName: "ariaLabelToggler", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  [attr.aria-label]=\"ariaLabelToggler()\"\n  class=\"form-password-action\"\n  data-coreui-toggle=\"password\"\n  type=\"button\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick($event)\"\n>\n  <span class=\"form-password-action-icon\"></span>\n</button>\n", styles: [":host{display:none}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: FormPasswordActionComponent, isStandalone: true, selector: "c-form-password-action", inputs: { ariaLabelToggler: { classPropertyName: "ariaLabelToggler", publicName: "ariaLabelToggler", isSignal: true, isRequired: false, transformFunction: null }, ariaPressed: { classPropertyName: "ariaPressed", publicName: "ariaPressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  [attr.aria-label]=\"ariaLabelToggler()\"\n  [attr.aria-pressed]=\"ariaPressed()\"\n  class=\"form-password-action\"\n  data-coreui-toggle=\"password\"\n  type=\"button\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick($event)\"\n>\n  <span class=\"form-password-action-icon\"></span>\n</button>\n", styles: [":host{display:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormPasswordActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-form-password-action', template: "<button\n  [attr.aria-label]=\"ariaLabelToggler()\"\n  class=\"form-password-action\"\n  data-coreui-toggle=\"password\"\n  type=\"button\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick($event)\"\n>\n  <span class=\"form-password-action-icon\"></span>\n</button>\n", styles: [":host{display:none}\n"] }]
-        }], propDecorators: { ariaLabelToggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelToggler", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+            args: [{ selector: 'c-form-password-action', template: "<button\n  [attr.aria-label]=\"ariaLabelToggler()\"\n  [attr.aria-pressed]=\"ariaPressed()\"\n  class=\"form-password-action\"\n  data-coreui-toggle=\"password\"\n  type=\"button\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick($event)\"\n>\n  <span class=\"form-password-action-icon\"></span>\n</button>\n", styles: [":host{display:none}\n"] }]
+        }], propDecorators: { ariaLabelToggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelToggler", required: false }] }], ariaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaPressed", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class FormPasswordDirective {
     static ngAcceptInputType_disabled;
@@ -9192,6 +9244,10 @@ class FormPasswordDirective {
     showPassword = input(false, { ...(ngDevMode ? { debugName: "showPassword" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     #passwordVisible = linkedSignal(this.showPassword, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#passwordVisible" }] : /* istanbul ignore next */ []));
+    #ariaPressedEffect = effect(() => {
+        this.#actionButtonRef.setInput('ariaPressed', this.#passwordVisible());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#ariaPressedEffect" }] : /* istanbul ignore next */ []));
     /**
      * Specifies the type of input element.
      */
@@ -15378,6 +15434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 const coerceStringArray = (value) => (Array.isArray(value) ? [...value] : [value]);
 const coerceRatingPrecision = (value) => [1, 0.5, 0.25].includes(numberAttribute(value)) ? numberAttribute(value) : 1;
 const coerceNumber = (value) => Number(value ?? 0);
+const coerceRatingValue = (value) => value === null || value === undefined ? null : numberAttribute(value);
 class RatingComponent {
     // Treats input as boolean value, even if provided as string or other types. Uses angular coercion mechanism
     static ngAcceptInputType_itemCount;
@@ -15403,6 +15460,14 @@ class RatingComponent {
      * @returns: string | string[]
      */
     activeIcon = input([], { ...(ngDevMode ? { debugName: "activeIcon" } : /* istanbul ignore next */ {}), transform: coerceStringArray });
+    /**
+     * Function that returns the accessible label (`aria-label`) for each rating item. Receives the item's value and the total item count.
+     * @returns: (value: number, itemCount: number) => string
+     * @default: (value, itemCount) => `${value} of ${itemCount}`
+     * @since: 5.7.7
+     */
+    ariaLabel = input((value, itemCount) => `${value} of ${itemCount}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Enables the clearing upon clicking the selected item again.
      * @returns: boolean
@@ -15473,7 +15538,9 @@ class RatingComponent {
      * @default: null
      * Emits `valueChange` on value change
      */
-    value = model(null, /* @ts-ignore */
+    valueInput = model(null, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+    // Ensures `value` is always a number (or null), even if a string is passed in, e.g. via attribute binding.
+    value = linkedSignal(() => coerceRatingValue(this.valueInput()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * Event emitted on hoverValue change.
@@ -15624,7 +15691,7 @@ class RatingComponent {
         this.#disabledState.set(isDisabled);
     }
     writeValue(value) {
-        this.value.set(value);
+        this.valueInput.set(value);
     }
     isItemActive(value) {
         const localValue = this.hoverValue() ?? this.value() ?? -1;
@@ -15648,11 +15715,11 @@ class RatingComponent {
         }
         if (this.allowClear() && value === this.value()) {
             this.#cleared.set(true);
-            this.value.set(null);
+            this.valueInput.set(null);
             this.hoverValue.set(null);
         }
         else {
-            this.value.set(value);
+            this.valueInput.set(value);
         }
     }
     handleMouseEnter($event, value) {
@@ -15701,13 +15768,13 @@ class RatingComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#valueEffect" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RatingComponent, isStandalone: true, selector: "c-rating", inputs: { activeIcon: { classPropertyName: "activeIcon", publicName: "activeIcon", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, highlightOnlySelected: { classPropertyName: "highlightOnlySelected", publicName: "highlightOnlySelected", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, itemCount: { classPropertyName: "itemCount", publicName: "itemCount", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltips: { classPropertyName: "tooltips", publicName: "tooltips", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", hoverValueChange: "hoverValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-disabled": "ratingDisabled()", "attr.aria-valueNow": "value()", "attr.aria-valuemax": "itemCount()", "class": "hostClasses()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RatingComponent, isStandalone: true, selector: "c-rating", inputs: { activeIcon: { classPropertyName: "activeIcon", publicName: "activeIcon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, highlightOnlySelected: { classPropertyName: "highlightOnlySelected", publicName: "highlightOnlySelected", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, itemCount: { classPropertyName: "itemCount", publicName: "itemCount", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltips: { classPropertyName: "tooltips", publicName: "tooltips", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueInput: "valueChange", hoverValueChange: "hoverValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-disabled": "ratingDisabled()", "attr.aria-valueNow": "value()", "attr.aria-valuemax": "itemCount()", "class": "hostClasses()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RatingComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, isSignal: true }], viewQueries: [{ propertyName: "ratingItemLabels", predicate: RatingItemLabelComponent, descendants: true, isSignal: true }], exportAs: ["cRating"], ngImport: i0, template: "@for (item of ratingItems(); track item; let itemIndex = $index, last = $last) {\n  @if (tooltips()) {\n    <div\n      class=\"rating-item\"\n      [cTooltip]=\"getTooltipValue(itemIndex)\"\n      [cTooltipTrigger]=\"['hover', 'focusin']\"\n      (mouseenter)=\"hoveredItem.set(itemIndex)\"\n      (focusin)=\"hoveredItem.set(itemIndex)\"\n    >\n      <ng-container *ngTemplateOutlet=\"ratingItemLabel; context: { $implicit: item, itemIndex }\" />\n    </div>\n  } @else {\n    <div class=\"rating-item\">\n      <ng-container *ngTemplateOutlet=\"ratingItemLabel; context: { $implicit: item, itemIndex }\" />\n    </div>\n  }\n}\n\n<ng-template let-item let-itemIndex=\"itemIndex\" #ratingItemLabel>\n  @for (itemValue of item; track radioIndex; let radioIndex = $index, last = $last) {\n    <c-rating-item-label\n      class=\"rating-item-label d-inline-block\"\n      role=\"radio\"\n      (click)=\"handleClick(itemValue)\"\n      (focus)=\"handleFocusIn($event, itemValue)\"\n      [class.active]=\"isItemActive(itemValue)\"\n      (mouseenter)=\"handleMouseEnter($event, itemValue)\"\n      [style]=\"radioIndex + 1 < numberOfSubItems() ? notLastItemStyle(radioIndex) : {}\"\n      [value]=\"itemValue\"\n      [attr.aria-label]=\"itemValue\"\n      [attr.aria-checked]=\"itemValue === value()\"\n    >\n      @if (iconTemplates()[icon()[itemIndex] ?? icon()]) {\n        <ng-container *ngTemplateOutlet=\"customIconTemplate; context: { $implicit: icon()?.[itemIndex] ?? icon() }\" />\n      } @else {\n        <ng-container *ngTemplateOutlet=\"defaultIconTemplate\" />\n      }\n      @if (iconTemplates()[activeIcon()[itemIndex] ?? activeIcon()]) {\n        <ng-container *ngTemplateOutlet=\"customIconActiveTemplate; context: { $implicit: activeIcon()?.[itemIndex] ?? activeIcon() }\" />\n      }\n    </c-rating-item-label>\n  }\n</ng-template>\n\n<ng-template #tooltipContent>\n  <span>{{ hoverValue() }}</span>\n</ng-template>\n\n<ng-template #defaultIconTemplate>\n  <div class=\"rating-item-icon\"></div>\n</ng-template>\n\n<ng-template #customIconTemplate let-icon>\n  <div class=\"rating-item-custom-icon\">\n    <ng-container *ngTemplateOutlet=\"iconTemplates()?.[icon] || defaultIconTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #customIconActiveTemplate let-icon>\n  <div class=\"rating-item-custom-icon-active\">\n    <ng-container *ngTemplateOutlet=\"iconTemplates()?.[icon] || customIconTemplate\" />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex}:is(:host.disabled,:host.readonly) .rating-item-label{cursor:default}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "component", type: i0.forwardRef(() => RatingItemLabelComponent), selector: "c-rating-item-label", inputs: ["label", "value"] }] });
+        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, isSignal: true }], viewQueries: [{ propertyName: "ratingItemLabels", predicate: RatingItemLabelComponent, descendants: true, isSignal: true }], exportAs: ["cRating"], ngImport: i0, template: "@for (item of ratingItems(); track item; let itemIndex = $index, last = $last) {\n  @if (tooltips()) {\n    <div\n      class=\"rating-item\"\n      [cTooltip]=\"getTooltipValue(itemIndex)\"\n      [cTooltipTrigger]=\"['hover', 'focusin']\"\n      (mouseenter)=\"hoveredItem.set(itemIndex)\"\n      (focusin)=\"hoveredItem.set(itemIndex)\"\n    >\n      <ng-container *ngTemplateOutlet=\"ratingItemLabel; context: { $implicit: item, itemIndex }\" />\n    </div>\n  } @else {\n    <div class=\"rating-item\">\n      <ng-container *ngTemplateOutlet=\"ratingItemLabel; context: { $implicit: item, itemIndex }\" />\n    </div>\n  }\n}\n\n<ng-template let-item let-itemIndex=\"itemIndex\" #ratingItemLabel>\n  @for (itemValue of item; track radioIndex; let radioIndex = $index, last = $last) {\n    <c-rating-item-label\n      class=\"rating-item-label d-inline-block\"\n      role=\"radio\"\n      (click)=\"handleClick(itemValue)\"\n      (focus)=\"handleFocusIn($event, itemValue)\"\n      [class.active]=\"isItemActive(itemValue)\"\n      (mouseenter)=\"handleMouseEnter($event, itemValue)\"\n      [style]=\"radioIndex + 1 < numberOfSubItems() ? notLastItemStyle(radioIndex) : {}\"\n      [value]=\"itemValue\"\n      [attr.aria-label]=\"ariaLabel()(itemValue, itemCount())\"\n      [attr.aria-checked]=\"itemValue === value()\"\n    >\n      @if (iconTemplates()[icon()[itemIndex] ?? icon()]) {\n        <ng-container *ngTemplateOutlet=\"customIconTemplate; context: { $implicit: icon()?.[itemIndex] ?? icon() }\" />\n      } @else {\n        <ng-container *ngTemplateOutlet=\"defaultIconTemplate\" />\n      }\n      @if (iconTemplates()[activeIcon()[itemIndex] ?? activeIcon()]) {\n        <ng-container *ngTemplateOutlet=\"customIconActiveTemplate; context: { $implicit: activeIcon()?.[itemIndex] ?? activeIcon() }\" />\n      }\n    </c-rating-item-label>\n  }\n</ng-template>\n\n<ng-template #tooltipContent>\n  <span>{{ hoverValue() }}</span>\n</ng-template>\n\n<ng-template #defaultIconTemplate>\n  <div class=\"rating-item-icon\"></div>\n</ng-template>\n\n<ng-template #customIconTemplate let-icon>\n  <div class=\"rating-item-custom-icon\">\n    <ng-container *ngTemplateOutlet=\"iconTemplates()?.[icon] || defaultIconTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #customIconActiveTemplate let-icon>\n  <div class=\"rating-item-custom-icon-active\">\n    <ng-container *ngTemplateOutlet=\"iconTemplates()?.[icon] || customIconTemplate\" />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex}:is(:host.disabled,:host.readonly) .rating-item-label{cursor:default}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "component", type: i0.forwardRef(() => RatingItemLabelComponent), selector: "c-rating-item-label", inputs: ["label", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RatingComponent, decorators: [{
             type: Component,
@@ -15724,8 +15791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class]': 'hostClasses()',
                         '(keydown)': 'onKeyDown($event)',
                         role: 'radiogroup'
-                    }, template: "@for (item of ratingItems(); track item; let itemIndex = $index, last = $last) {\n  @if (tooltips()) {\n    <div\n      class=\"rating-item\"\n      [cTooltip]=\"getTooltipValue(itemIndex)\"\n      [cTooltipTrigger]=\"['hover', 'focusin']\"\n      (mouseenter)=\"hoveredItem.set(itemIndex)\"\n      (focusin)=\"hoveredItem.set(itemIndex)\"\n    >\n      <ng-container *ngTemplateOutlet=\"ratingItemLabel; context: { $implicit: item, itemIndex }\" />\n    </div>\n  } @else {\n    <div class=\"rating-item\">\n      <ng-container *ngTemplateOutlet=\"ratingItemLabel; context: { $implicit: item, itemIndex }\" />\n    </div>\n  }\n}\n\n<ng-template let-item let-itemIndex=\"itemIndex\" #ratingItemLabel>\n  @for (itemValue of item; track radioIndex; let radioIndex = $index, last = $last) {\n    <c-rating-item-label\n      class=\"rating-item-label d-inline-block\"\n      role=\"radio\"\n      (click)=\"handleClick(itemValue)\"\n      (focus)=\"handleFocusIn($event, itemValue)\"\n      [class.active]=\"isItemActive(itemValue)\"\n      (mouseenter)=\"handleMouseEnter($event, itemValue)\"\n      [style]=\"radioIndex + 1 < numberOfSubItems() ? notLastItemStyle(radioIndex) : {}\"\n      [value]=\"itemValue\"\n      [attr.aria-label]=\"itemValue\"\n      [attr.aria-checked]=\"itemValue === value()\"\n    >\n      @if (iconTemplates()[icon()[itemIndex] ?? icon()]) {\n        <ng-container *ngTemplateOutlet=\"customIconTemplate; context: { $implicit: icon()?.[itemIndex] ?? icon() }\" />\n      } @else {\n        <ng-container *ngTemplateOutlet=\"defaultIconTemplate\" />\n      }\n      @if (iconTemplates()[activeIcon()[itemIndex] ?? activeIcon()]) {\n        <ng-container *ngTemplateOutlet=\"customIconActiveTemplate; context: { $implicit: activeIcon()?.[itemIndex] ?? activeIcon() }\" />\n      }\n    </c-rating-item-label>\n  }\n</ng-template>\n\n<ng-template #tooltipContent>\n  <span>{{ hoverValue() }}</span>\n</ng-template>\n\n<ng-template #defaultIconTemplate>\n  <div class=\"rating-item-icon\"></div>\n</ng-template>\n\n<ng-template #customIconTemplate let-icon>\n  <div class=\"rating-item-custom-icon\">\n    <ng-container *ngTemplateOutlet=\"iconTemplates()?.[icon] || defaultIconTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #customIconActiveTemplate let-icon>\n  <div class=\"rating-item-custom-icon-active\">\n    <ng-container *ngTemplateOutlet=\"iconTemplates()?.[icon] || customIconTemplate\" />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex}:is(:host.disabled,:host.readonly) .rating-item-label{cursor:default}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { activeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIcon", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], highlightOnlySelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightOnlySelected", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], itemCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCount", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltips", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hoverValueChange: [{ type: i0.Output, args: ["hoverValueChange"] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateIdDirective), { isSignal: true }] }], ratingItemLabels: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RatingItemLabelComponent), { isSignal: true }] }] } });
+                    }, template: "@for (item of ratingItems(); track item; let itemIndex = $index, last = $last) {\n  @if (tooltips()) {\n    <div\n      class=\"rating-item\"\n      [cTooltip]=\"getTooltipValue(itemIndex)\"\n      [cTooltipTrigger]=\"['hover', 'focusin']\"\n      (mouseenter)=\"hoveredItem.set(itemIndex)\"\n      (focusin)=\"hoveredItem.set(itemIndex)\"\n    >\n      <ng-container *ngTemplateOutlet=\"ratingItemLabel; context: { $implicit: item, itemIndex }\" />\n    </div>\n  } @else {\n    <div class=\"rating-item\">\n      <ng-container *ngTemplateOutlet=\"ratingItemLabel; context: { $implicit: item, itemIndex }\" />\n    </div>\n  }\n}\n\n<ng-template let-item let-itemIndex=\"itemIndex\" #ratingItemLabel>\n  @for (itemValue of item; track radioIndex; let radioIndex = $index, last = $last) {\n    <c-rating-item-label\n      class=\"rating-item-label d-inline-block\"\n      role=\"radio\"\n      (click)=\"handleClick(itemValue)\"\n      (focus)=\"handleFocusIn($event, itemValue)\"\n      [class.active]=\"isItemActive(itemValue)\"\n      (mouseenter)=\"handleMouseEnter($event, itemValue)\"\n      [style]=\"radioIndex + 1 < numberOfSubItems() ? notLastItemStyle(radioIndex) : {}\"\n      [value]=\"itemValue\"\n      [attr.aria-label]=\"ariaLabel()(itemValue, itemCount())\"\n      [attr.aria-checked]=\"itemValue === value()\"\n    >\n      @if (iconTemplates()[icon()[itemIndex] ?? icon()]) {\n        <ng-container *ngTemplateOutlet=\"customIconTemplate; context: { $implicit: icon()?.[itemIndex] ?? icon() }\" />\n      } @else {\n        <ng-container *ngTemplateOutlet=\"defaultIconTemplate\" />\n      }\n      @if (iconTemplates()[activeIcon()[itemIndex] ?? activeIcon()]) {\n        <ng-container *ngTemplateOutlet=\"customIconActiveTemplate; context: { $implicit: activeIcon()?.[itemIndex] ?? activeIcon() }\" />\n      }\n    </c-rating-item-label>\n  }\n</ng-template>\n\n<ng-template #tooltipContent>\n  <span>{{ hoverValue() }}</span>\n</ng-template>\n\n<ng-template #defaultIconTemplate>\n  <div class=\"rating-item-icon\"></div>\n</ng-template>\n\n<ng-template #customIconTemplate let-icon>\n  <div class=\"rating-item-custom-icon\">\n    <ng-container *ngTemplateOutlet=\"iconTemplates()?.[icon] || defaultIconTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #customIconActiveTemplate let-icon>\n  <div class=\"rating-item-custom-icon-active\">\n    <ng-container *ngTemplateOutlet=\"iconTemplates()?.[icon] || customIconTemplate\" />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex}:is(:host.disabled,:host.readonly) .rating-item-label{cursor:default}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { activeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIcon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], highlightOnlySelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightOnlySelected", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], itemCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCount", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltips", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hoverValueChange: [{ type: i0.Output, args: ["hoverValueChange"] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateIdDirective), { isSignal: true }] }], ratingItemLabels: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RatingItemLabelComponent), { isSignal: true }] }] } });
 
 class RatingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -15967,6 +16034,13 @@ class RangeSliderComponent {
     #elementRef = inject(ElementRef);
     #UIDService = inject(UIDService);
     #RtlService = inject(RtlService);
+    /**
+     * Accessible labels (`aria-label`) for the slider handles, one per thumb, applied only to multi-thumb sliders to distinguish otherwise identically-announced handles.
+     * When omitted, two-thumb sliders default to `"Minimum value"` / `"Maximum value"` and sliders with more thumbs to `"Value {n}"`.
+     * @since 5.7.7
+     */
+    ariaLabels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
     /**
      * Enable or disable clickable labels in the Angular Range Slider.
      * When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.
@@ -16067,11 +16141,6 @@ class RangeSliderComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueEffect" }] : /* istanbul ignore next */ []));
     #value$ = new BehaviorSubject(this.currentValue());
-    valueNow = computed(() => {
-        const value = this.currentValue();
-        return value.length === 1 ? value[0] : [...value];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueNow" }] : /* istanbul ignore next */ []));
     inputIds = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputIds" }] : /* istanbul ignore next */ []));
     inputIdsEffect = effect(() => {
@@ -16220,6 +16289,15 @@ class RangeSliderComponent {
     getLabel(label) {
         return typeof label === 'object' && 'label' in label ? label.label : label;
     }
+    getThumbAriaLabel(index) {
+        const currentValue = this.currentValue();
+        if (currentValue.length <= 1) {
+            return undefined;
+        }
+        const ariaLabels = this.ariaLabels();
+        return (ariaLabels?.[index] ??
+            (currentValue.length === 2 ? (index === 0 ? 'Minimum value' : 'Maximum value') : `Value ${index + 1}`));
+    }
     handleMouseMove($event) {
         if (!this.isDragging() || !this.trackRef() || this.disabledState()) {
             return;
@@ -16232,13 +16310,13 @@ class RangeSliderComponent {
         this.isDragging.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RangeSliderComponent, isStandalone: true, selector: "c-range-slider", inputs: { clickableLabels: { classPropertyName: "clickableLabels", publicName: "clickableLabels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tooltips: { classPropertyName: "tooltips", publicName: "tooltips", isSignal: true, isRequired: false, transformFunction: null }, tooltipsFormat: { classPropertyName: "tooltipsFormat", publicName: "tooltipsFormat", isSignal: true, isRequired: false, transformFunction: null }, track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "hostClasses()", "attr.disabled": "disabledState() || null", "attr.aria-disabled": "disabledState() || null", "attr.aria-orientation": "vertical() ? \"vertical\" : \"horizontal\"", "attr.aria-valuemax": "max()", "attr.aria-valuemin": "min()", "attr.aria-valuenow": "valueNow()", "attr.role": "role()" }, classAttribute: "range-slider" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RangeSliderComponent, isStandalone: true, selector: "c-range-slider", inputs: { ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, clickableLabels: { classPropertyName: "clickableLabels", publicName: "clickableLabels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tooltips: { classPropertyName: "tooltips", publicName: "tooltips", isSignal: true, isRequired: false, transformFunction: null }, tooltipsFormat: { classPropertyName: "tooltipsFormat", publicName: "tooltipsFormat", isSignal: true, isRequired: false, transformFunction: null }, track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "hostClasses()", "attr.disabled": "disabledState() || null", "attr.aria-disabled": "disabledState() || null" }, classAttribute: "range-slider" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RangeSliderComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputRefs", predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div (mousedown)=\"handleInputsContainerMouseDown($event)\" class=\"range-slider-inputs-container\">\n  @for (value of currentValue(); track index; let index = $index) {\n    <input\n      class=\"range-slider-input\"\n      type=\"range\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"value\"\n      [attr.value]=\"value\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"value\"\n      [attr.aria-orientation]=\"vertical() ? 'vertical' : 'horizontal'\"\n      [disabled]=\"disabledState()\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"handleInputChange($event, index)\"\n      [attr.id]=\"inputIds()[index]\"\n      role=\"slider\"\n      #inputRef\n    />\n    @if (tooltips()) {\n      <div\n        class=\"range-slider-tooltip\"\n        [style]=\"value | rangeSliderTooltipPositionStyle: min() : max() : vertical() : thumbSize() : isRtl\"\n      >\n        <div class=\"range-slider-tooltip-inner\">\n          @let tooltipsFn = tooltipsFormat();\n          <label for=\"{{inputIds()[index]}}\">\n            {{ tooltipsFn?.(value) ?? value }}\n          </label>\n        </div>\n        <div class=\"range-slider-tooltip-arrow\"></div>\n      </div>\n    }\n  }\n  @if (track()) {\n    <div\n      class=\"range-slider-track\"\n      [style]=\"currentValue() | rangeSliderTrack: min() : max() : vertical() : isRtl\"\n      #trackRef\n    ></div>\n  } @else {\n    <div class=\"range-slider-track\" #trackRef></div>\n  }\n</div>\n\n@if (labels()) {\n  <div class=\"range-slider-labels-container\" #labelsContainerRef>\n    @for (label of labels(); track index; let index = $index) {\n      @let labelValue = getLabel(label);\n      <div\n        #labelRef\n        [class]=\"label | rangeSliderLabelClass: clickableLabels()\"\n        [style]=\"label | rangeSliderLabelStyle: min() : max() : vertical() : labels() : index: isRtl\"\n        (mousedown)=\"handleLabelClick($event, label)\"\n      >\n        {{ labelValue }}\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: RangeSliderTrackPipe, name: "rangeSliderTrack" }, { kind: "pipe", type: RangeSliderLabelStylePipe, name: "rangeSliderLabelStyle" }, { kind: "pipe", type: RangeSliderLabelClassPipe, name: "rangeSliderLabelClass" }, { kind: "pipe", type: RangeSliderTooltipPositionStylePipe, name: "rangeSliderTooltipPositionStyle" }] });
+        ], viewQueries: [{ propertyName: "inputRefs", predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div (mousedown)=\"handleInputsContainerMouseDown($event)\" class=\"range-slider-inputs-container\">\n  @for (value of currentValue(); track index; let index = $index) {\n    <input\n      class=\"range-slider-input\"\n      type=\"range\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"value\"\n      [attr.value]=\"value\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"value\"\n      [attr.aria-valuetext]=\"tooltipsFormat()?.(value)\"\n      [attr.aria-orientation]=\"vertical() ? 'vertical' : 'horizontal'\"\n      [attr.aria-label]=\"getThumbAriaLabel(index)\"\n      [disabled]=\"disabledState()\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"handleInputChange($event, index)\"\n      [attr.id]=\"inputIds()[index]\"\n      [attr.role]=\"role()\"\n      #inputRef\n    />\n    @if (tooltips()) {\n      <div\n        class=\"range-slider-tooltip\"\n        [style]=\"value | rangeSliderTooltipPositionStyle: min() : max() : vertical() : thumbSize() : isRtl\"\n      >\n        <div class=\"range-slider-tooltip-inner\">\n          @let tooltipsFn = tooltipsFormat();\n          <label for=\"{{inputIds()[index]}}\">\n            {{ tooltipsFn?.(value) ?? value }}\n          </label>\n        </div>\n        <div class=\"range-slider-tooltip-arrow\"></div>\n      </div>\n    }\n  }\n  @if (track()) {\n    <div\n      class=\"range-slider-track\"\n      [style]=\"currentValue() | rangeSliderTrack: min() : max() : vertical() : isRtl\"\n      #trackRef\n    ></div>\n  } @else {\n    <div class=\"range-slider-track\" #trackRef></div>\n  }\n</div>\n\n@if (labels()) {\n  <div class=\"range-slider-labels-container\" #labelsContainerRef>\n    @for (label of labels(); track index; let index = $index) {\n      @let labelValue = getLabel(label);\n      <div\n        #labelRef\n        [class]=\"label | rangeSliderLabelClass: clickableLabels()\"\n        [style]=\"label | rangeSliderLabelStyle: min() : max() : vertical() : labels() : index: isRtl\"\n        (mousedown)=\"handleLabelClick($event, label)\"\n      >\n        {{ labelValue }}\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: RangeSliderTrackPipe, name: "rangeSliderTrack" }, { kind: "pipe", type: RangeSliderLabelStylePipe, name: "rangeSliderLabelStyle" }, { kind: "pipe", type: RangeSliderLabelClassPipe, name: "rangeSliderLabelClass" }, { kind: "pipe", type: RangeSliderTooltipPositionStylePipe, name: "rangeSliderTooltipPositionStyle" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RangeSliderComponent, decorators: [{
             type: Component,
@@ -16259,14 +16337,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         class: 'range-slider',
                         '[class]': 'hostClasses()',
                         '[attr.disabled]': 'disabledState() || null',
-                        '[attr.aria-disabled]': 'disabledState() || null',
-                        '[attr.aria-orientation]': 'vertical() ? "vertical" : "horizontal"',
-                        '[attr.aria-valuemax]': 'max()',
-                        '[attr.aria-valuemin]': 'min()',
-                        '[attr.aria-valuenow]': 'valueNow()',
-                        '[attr.role]': 'role()'
-                    }, template: "<div (mousedown)=\"handleInputsContainerMouseDown($event)\" class=\"range-slider-inputs-container\">\n  @for (value of currentValue(); track index; let index = $index) {\n    <input\n      class=\"range-slider-input\"\n      type=\"range\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"value\"\n      [attr.value]=\"value\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"value\"\n      [attr.aria-orientation]=\"vertical() ? 'vertical' : 'horizontal'\"\n      [disabled]=\"disabledState()\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"handleInputChange($event, index)\"\n      [attr.id]=\"inputIds()[index]\"\n      role=\"slider\"\n      #inputRef\n    />\n    @if (tooltips()) {\n      <div\n        class=\"range-slider-tooltip\"\n        [style]=\"value | rangeSliderTooltipPositionStyle: min() : max() : vertical() : thumbSize() : isRtl\"\n      >\n        <div class=\"range-slider-tooltip-inner\">\n          @let tooltipsFn = tooltipsFormat();\n          <label for=\"{{inputIds()[index]}}\">\n            {{ tooltipsFn?.(value) ?? value }}\n          </label>\n        </div>\n        <div class=\"range-slider-tooltip-arrow\"></div>\n      </div>\n    }\n  }\n  @if (track()) {\n    <div\n      class=\"range-slider-track\"\n      [style]=\"currentValue() | rangeSliderTrack: min() : max() : vertical() : isRtl\"\n      #trackRef\n    ></div>\n  } @else {\n    <div class=\"range-slider-track\" #trackRef></div>\n  }\n</div>\n\n@if (labels()) {\n  <div class=\"range-slider-labels-container\" #labelsContainerRef>\n    @for (label of labels(); track index; let index = $index) {\n      @let labelValue = getLabel(label);\n      <div\n        #labelRef\n        [class]=\"label | rangeSliderLabelClass: clickableLabels()\"\n        [style]=\"label | rangeSliderLabelStyle: min() : max() : vertical() : labels() : index: isRtl\"\n        (mousedown)=\"handleLabelClick($event, label)\"\n      >\n        {{ labelValue }}\n      </div>\n    }\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { clickableLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableLabels", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], distance: [{ type: i0.Input, args: [{ isSignal: true, alias: "distance", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], tooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltips", required: false }] }], tooltipsFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipsFormat", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], inputRefs: [{ type: i0.ViewChildren, args: ['inputRef', { isSignal: true }] }], trackRef: [{ type: i0.ViewChild, args: ['trackRef', { isSignal: true }] }] } });
+                        '[attr.aria-disabled]': 'disabledState() || null'
+                    }, template: "<div (mousedown)=\"handleInputsContainerMouseDown($event)\" class=\"range-slider-inputs-container\">\n  @for (value of currentValue(); track index; let index = $index) {\n    <input\n      class=\"range-slider-input\"\n      type=\"range\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"value\"\n      [attr.value]=\"value\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"value\"\n      [attr.aria-valuetext]=\"tooltipsFormat()?.(value)\"\n      [attr.aria-orientation]=\"vertical() ? 'vertical' : 'horizontal'\"\n      [attr.aria-label]=\"getThumbAriaLabel(index)\"\n      [disabled]=\"disabledState()\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"handleInputChange($event, index)\"\n      [attr.id]=\"inputIds()[index]\"\n      [attr.role]=\"role()\"\n      #inputRef\n    />\n    @if (tooltips()) {\n      <div\n        class=\"range-slider-tooltip\"\n        [style]=\"value | rangeSliderTooltipPositionStyle: min() : max() : vertical() : thumbSize() : isRtl\"\n      >\n        <div class=\"range-slider-tooltip-inner\">\n          @let tooltipsFn = tooltipsFormat();\n          <label for=\"{{inputIds()[index]}}\">\n            {{ tooltipsFn?.(value) ?? value }}\n          </label>\n        </div>\n        <div class=\"range-slider-tooltip-arrow\"></div>\n      </div>\n    }\n  }\n  @if (track()) {\n    <div\n      class=\"range-slider-track\"\n      [style]=\"currentValue() | rangeSliderTrack: min() : max() : vertical() : isRtl\"\n      #trackRef\n    ></div>\n  } @else {\n    <div class=\"range-slider-track\" #trackRef></div>\n  }\n</div>\n\n@if (labels()) {\n  <div class=\"range-slider-labels-container\" #labelsContainerRef>\n    @for (label of labels(); track index; let index = $index) {\n      @let labelValue = getLabel(label);\n      <div\n        #labelRef\n        [class]=\"label | rangeSliderLabelClass: clickableLabels()\"\n        [style]=\"label | rangeSliderLabelStyle: min() : max() : vertical() : labels() : index: isRtl\"\n        (mousedown)=\"handleLabelClick($event, label)\"\n      >\n        {{ labelValue }}\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], clickableLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableLabels", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], distance: [{ type: i0.Input, args: [{ isSignal: true, alias: "distance", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], tooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltips", required: false }] }], tooltipsFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipsFormat", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], inputRefs: [{ type: i0.ViewChildren, args: ['inputRef', { isSignal: true }] }], trackRef: [{ type: i0.ViewChild, args: ['trackRef', { isSignal: true }] }] } });
 
 class RangeSliderModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });