npm - @fundamental-ngx/core - Versions diffs - 0.36.1-rc.31 → 0.36.1-rc.32 - Mend

@fundamental-ngx/core 0.36.1-rc.31 → 0.36.1-rc.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/esm2020/message-toast/message-toast.component.mjs CHANGED Viewed

@@ -139,7 +139,7 @@ export class MessageToastComponent {
     }
 }
 MessageToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MessageToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.NgZone }, { token: i1.MessageToastConfig, optional: true }, { token: i2.MessageToastRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MessageToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MessageToastComponent, selector: "fd-message-toast", inputs: { id: "id", duration: "duration", mousePersist: "mousePersist", ariaLabel: "ariaLabel", message: "message", width: "width", minWidth: "minWidth", maxWidth: "maxWidth" }, outputs: { onHide: "onHide" }, host: { listeners: { "mouseenter": "handleMessageToastMouseEnterEvent()", "mouseleave": "handleMessageToastMouseLeaveEvent()" }, properties: { "attr.aria-label": "ariaLabel", "attr.aria-live": "\"polite\"", "attr.id": "id", "style.width": "width", "style.min-width": "minWidth", "style.max-width": "maxWidth", "class.fd-message-toast": "this.messageToastClass" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<ng-container #container>{{ message }}</ng-container>`, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-message-toast{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow2);background-color:var(--sapList_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow2);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:15rem;padding:1rem;text-align:center;width:auto}.fd-message-toast:after,.fd-message-toast:before{box-sizing:inherit;font-size:inherit}.fd-message-toast,.fd-has-display-block{display:block}.fd-has-display-none{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MessageToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MessageToastComponent, selector: "fd-message-toast", inputs: { id: "id", duration: "duration", mousePersist: "mousePersist", ariaLabel: "ariaLabel", message: "message", width: "width", minWidth: "minWidth", maxWidth: "maxWidth" }, outputs: { onHide: "onHide" }, host: { listeners: { "mouseenter": "handleMessageToastMouseEnterEvent()", "mouseleave": "handleMessageToastMouseLeaveEvent()" }, properties: { "attr.aria-label": "ariaLabel", "attr.aria-live": "\"polite\"", "attr.id": "id", "style.width": "width", "style.min-width": "minWidth", "style.max-width": "maxWidth", "class.fd-message-toast": "this.messageToastClass" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<ng-container #container>{{ message }}</ng-container>`, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-message-toast{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow2);background-color:var(--sapList_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow2);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:15rem;padding:1rem;text-align:center;width:auto}.fd-message-toast:after,.fd-message-toast:before{box-sizing:inherit;font-size:inherit}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-message-toast,.fd-has-display-block{display:block}.fd-has-display-none{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MessageToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-message-toast', template: `<ng-container #container>{{ message }}</ng-container>`, host: {
@@ -149,7 +149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         '[style.width]': 'width',
                         '[style.min-width]': 'minWidth',
                         '[style.max-width]': 'maxWidth'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-message-toast{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow2);background-color:var(--sapList_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow2);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:15rem;padding:1rem;text-align:center;width:auto}.fd-message-toast:after,.fd-message-toast:before{box-sizing:inherit;font-size:inherit}.fd-message-toast,.fd-has-display-block{display:block}.fd-has-display-none{display:none}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-message-toast{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow2);background-color:var(--sapList_Background);border:0;border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow2);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:15rem;padding:1rem;text-align:center;width:auto}.fd-message-toast:after,.fd-message-toast:before{box-sizing:inherit;font-size:inherit}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-message-toast,.fd-has-display-block{display:block}.fd-has-display-none{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.NgZone }, { type: i1.MessageToastConfig, decorators: [{
                     type: Optional
                 }] }, { type: i2.MessageToastRef, decorators: [{

package/esm2020/pagination/pagination.component.mjs CHANGED Viewed

@@ -285,14 +285,14 @@ export class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PaginationComponent, deps: [{ token: i1.PaginationService }, { token: i0.ChangeDetectorRef }, { token: i2.LiveAnnouncer }, { token: FD_LANGUAGE }, { token: i3.RtlService, optional: true }, { token: i4.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PaginationComponent, selector: "fd-pagination", inputs: { id: "id", mobile: "mobile", totalItems: "totalItems", currentPage: "currentPage", itemsPerPage: "itemsPerPage", itemsPerPageTemplate: "itemsPerPageTemplate", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", displayTotalItems: "displayTotalItems", displayTextTemplate: "displayTextTemplate", firstLabel: "firstLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", lastLabel: "lastLabel", ariaLabel: "ariaLabel", pageLabel: "pageLabel", currentPageAriaLabel: "currentPageAriaLabel", labelBeforeInputMobile: "labelBeforeInputMobile", labelAfterInputMobile: "labelAfterInputMobile", inputAriaLabel: "inputAriaLabel" }, outputs: { pageChangeStart: "pageChangeStart", itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class.fd-pagination--mobile": "mobile", "class.fd-pagination--short": "_lastPage <= 9" }, classAttribute: "fd-pagination" }, providers: [PaginationService, contentDensityObserverProviders()], viewQueries: [{ propertyName: "_focusKeyManagerList", first: true, predicate: FocusKeyManagerListDirective, descendants: true }, { propertyName: "_pageInputElement", first: true, predicate: ["pageInputElement"], descendants: true, read: ElementRef }, { propertyName: "_currentPageElement", first: true, predicate: ["currentPageElement"], descendants: true, read: ElementRef }, { propertyName: "_focusKeyManagerItems", predicate: FocusKeyManagerItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalItems\">\n    <div class=\"fd-pagination__per-page\" *ngIf=\"itemsPerPageTemplate || itemsPerPageOptions?.length\">\n        <!-- note, that we're checking for the length of \"itemsPerPageOptions\", but using \"_displayedPageSizeOptions\" as \"pageOptions\" -->\n        <!-- these 2 can be different, as \"_displayedPageSizeOptions\" may also include \"itemsPerPage\" if it's not included in options -->\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel || ('corePagination.ariaLabel' | fdTranslate)\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            [title]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            [title]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage()\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\n                \"\n                [title]=\"pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [ariaLabel]=\"\n                pageLabel\n                    ? pageLabel(currentPage)\n                    : ('corePagination.pageLabel' | fdTranslate: { pageNumber: currentPage })\n            \"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{\n                labelBeforeInputMobile\n                    ? labelBeforeInputMobile + ':'\n                    : ('corePagination.labelBeforeInputMobile'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            }}\n        </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"\n                inputAriaLabel\n                    ? inputAriaLabel(currentPage, totalItems)\n                    : ('corePagination.inputAriaLabel'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            \"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{\n                labelAfterInputMobile\n                    ? labelAfterInputMobile(_lastPage)\n                    : ('corePagination.labelAfterInputMobile'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\n                \"\n                [title]=\"pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            [title]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            [title]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"_contentDensityObserver.isCompact$ | async\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\">\n        {{ 'corePagination.totalResultsLabel' | fdTranslate: _currentShowing }}\n    </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ itemsPerPageLabel ? itemsPerPageLabel + ':' : ('corePagination.itemsPerPageLabel' | fdTranslate) }}\n    </label>\n\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        <li fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</li>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-pagination\n*/.fd-pagination{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 auto;padding:0}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;text-align:center;width:2.25rem}.fd-pagination__more--compact:before{width:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{-moz-appearance:textfield;min-width:2.5rem;text-align:center;width:auto}.fd-pagination .fd-pagination__input::-webkit-inner-spin-button,.fd-pagination .fd-pagination__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{-ms-flex-negative:0;align-self:center;flex-shrink:0}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-active{display:none}.fd-pagination .fd-pagination__button [class*=sap-icon][dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__button [class*=sap-icon]{transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination--mobile .fd-pagination__link,.fd-pagination--mobile .fd-pagination__more,.fd-pagination--mobile .fd-pagination__per-page-label,.fd-pagination--mobile .fd-pagination__total{display:none}.fd-pagination--mobile .fd-pagination__button--mobile,.fd-pagination--mobile .fd-pagination__input,.fd-pagination--mobile .fd-pagination__label{display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (max-width: 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (min-width: 600px) and (max-width: 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7.SelectComponent, selector: "fd-select", inputs: ["controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "extendedBodyTemplate", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i7.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "directive", type: i3.OnlyDigitsDirective, selector: "[fdOnlyDigits], [fd-only-digits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "directive", type: i3.FocusKeyManagerItemDirective, selector: "[fd-focus-key-manager-item], [fdFocusKeyManagerItem]", inputs: ["initialFocus", "_tabindex"] }, { kind: "directive", type: i3.FocusKeyManagerListDirective, selector: "[fd-focus-key-manager-list], [fdFocusKeyManagerList]", inputs: ["orientation", "skipPredicate"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, preserveWhitespaces: true });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PaginationComponent, selector: "fd-pagination", inputs: { id: "id", mobile: "mobile", totalItems: "totalItems", currentPage: "currentPage", itemsPerPage: "itemsPerPage", itemsPerPageTemplate: "itemsPerPageTemplate", itemsPerPageLabel: "itemsPerPageLabel", itemsPerPageOptions: "itemsPerPageOptions", displayTotalItems: "displayTotalItems", displayTextTemplate: "displayTextTemplate", firstLabel: "firstLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", lastLabel: "lastLabel", ariaLabel: "ariaLabel", pageLabel: "pageLabel", currentPageAriaLabel: "currentPageAriaLabel", labelBeforeInputMobile: "labelBeforeInputMobile", labelAfterInputMobile: "labelAfterInputMobile", inputAriaLabel: "inputAriaLabel" }, outputs: { pageChangeStart: "pageChangeStart", itemsPerPageChange: "itemsPerPageChange" }, host: { properties: { "class.fd-pagination--mobile": "mobile", "class.fd-pagination--short": "_lastPage <= 9" }, classAttribute: "fd-pagination" }, providers: [PaginationService, contentDensityObserverProviders()], viewQueries: [{ propertyName: "_focusKeyManagerList", first: true, predicate: FocusKeyManagerListDirective, descendants: true }, { propertyName: "_pageInputElement", first: true, predicate: ["pageInputElement"], descendants: true, read: ElementRef }, { propertyName: "_currentPageElement", first: true, predicate: ["currentPageElement"], descendants: true, read: ElementRef }, { propertyName: "_focusKeyManagerItems", predicate: FocusKeyManagerItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"totalItems\">\n    <div class=\"fd-pagination__per-page\" *ngIf=\"itemsPerPageTemplate || itemsPerPageOptions?.length\">\n        <!-- note, that we're checking for the length of \"itemsPerPageOptions\", but using \"_displayedPageSizeOptions\" as \"pageOptions\" -->\n        <!-- these 2 can be different, as \"_displayedPageSizeOptions\" may also include \"itemsPerPage\" if it's not included in options -->\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel || ('corePagination.ariaLabel' | fdTranslate)\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            [title]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            [title]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage()\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\n                \"\n                [title]=\"pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [ariaLabel]=\"\n                pageLabel\n                    ? pageLabel(currentPage)\n                    : ('corePagination.pageLabel' | fdTranslate: { pageNumber: currentPage })\n            \"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{\n                labelBeforeInputMobile\n                    ? labelBeforeInputMobile + ':'\n                    : ('corePagination.labelBeforeInputMobile'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            }}\n        </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"\n                inputAriaLabel\n                    ? inputAriaLabel(currentPage, totalItems)\n                    : ('corePagination.inputAriaLabel'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            \"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{\n                labelAfterInputMobile\n                    ? labelAfterInputMobile(_lastPage)\n                    : ('corePagination.labelAfterInputMobile'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\n                \"\n                [title]=\"pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            [title]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            [title]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"_contentDensityObserver.isCompact$ | async\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\">\n        {{ 'corePagination.totalResultsLabel' | fdTranslate: _currentShowing }}\n    </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ itemsPerPageLabel ? itemsPerPageLabel + ':' : ('corePagination.itemsPerPageLabel' | fdTranslate) }}\n    </label>\n\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        <li fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</li>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-pagination\n*/.fd-pagination{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 auto;padding:0}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;text-align:center;width:2.25rem}.fd-pagination__more--compact:before{width:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{-moz-appearance:textfield;min-width:2.5rem;text-align:center;width:auto}.fd-pagination .fd-pagination__input::-webkit-inner-spin-button,.fd-pagination .fd-pagination__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{-ms-flex-negative:0;align-self:center;flex-shrink:0}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-active{display:none}.fd-pagination .fd-pagination__button [class*=sap-icon][dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__button [class*=sap-icon]{transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination--mobile .fd-pagination__link,.fd-pagination--mobile .fd-pagination__more,.fd-pagination--mobile .fd-pagination__per-page-label,.fd-pagination--mobile .fd-pagination__total{display:none}.fd-pagination--mobile .fd-pagination__button--mobile,.fd-pagination--mobile .fd-pagination__input,.fd-pagination--mobile .fd-pagination__label{display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (max-width: 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (min-width: 600px) and (max-width: 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7.SelectComponent, selector: "fd-select", inputs: ["controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "extendedBodyTemplate", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i7.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "id"] }, { kind: "directive", type: i3.OnlyDigitsDirective, selector: "[fdOnlyDigits], [fd-only-digits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "directive", type: i3.FocusKeyManagerItemDirective, selector: "[fd-focus-key-manager-item], [fdFocusKeyManagerItem]", inputs: ["initialFocus", "_tabindex"] }, { kind: "directive", type: i3.FocusKeyManagerListDirective, selector: "[fd-focus-key-manager-list], [fdFocusKeyManagerList]", inputs: ["orientation", "skipPredicate"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, preserveWhitespaces: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-pagination', providers: [PaginationService, contentDensityObserverProviders()], host: {
                         class: 'fd-pagination',
                         '[class.fd-pagination--mobile]': 'mobile',
                         '[class.fd-pagination--short]': '_lastPage <= 9'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, template: "<ng-container *ngIf=\"totalItems\">\n    <div class=\"fd-pagination__per-page\" *ngIf=\"itemsPerPageTemplate || itemsPerPageOptions?.length\">\n        <!-- note, that we're checking for the length of \"itemsPerPageOptions\", but using \"_displayedPageSizeOptions\" as \"pageOptions\" -->\n        <!-- these 2 can be different, as \"_displayedPageSizeOptions\" may also include \"itemsPerPage\" if it's not included in options -->\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel || ('corePagination.ariaLabel' | fdTranslate)\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            [title]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            [title]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage()\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\n                \"\n                [title]=\"pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [ariaLabel]=\"\n                pageLabel\n                    ? pageLabel(currentPage)\n                    : ('corePagination.pageLabel' | fdTranslate: { pageNumber: currentPage })\n            \"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{\n                labelBeforeInputMobile\n                    ? labelBeforeInputMobile + ':'\n                    : ('corePagination.labelBeforeInputMobile'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            }}\n        </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"\n                inputAriaLabel\n                    ? inputAriaLabel(currentPage, totalItems)\n                    : ('corePagination.inputAriaLabel'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            \"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{\n                labelAfterInputMobile\n                    ? labelAfterInputMobile(_lastPage)\n                    : ('corePagination.labelAfterInputMobile'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\n                \"\n                [title]=\"pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            [title]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            [title]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"_contentDensityObserver.isCompact$ | async\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\">\n        {{ 'corePagination.totalResultsLabel' | fdTranslate: _currentShowing }}\n    </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ itemsPerPageLabel ? itemsPerPageLabel + ':' : ('corePagination.itemsPerPageLabel' | fdTranslate) }}\n    </label>\n\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        <li fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</li>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-pagination\n*/.fd-pagination{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 auto;padding:0}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;text-align:center;width:2.25rem}.fd-pagination__more--compact:before{width:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{-moz-appearance:textfield;min-width:2.5rem;text-align:center;width:auto}.fd-pagination .fd-pagination__input::-webkit-inner-spin-button,.fd-pagination .fd-pagination__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{-ms-flex-negative:0;align-self:center;flex-shrink:0}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-active{display:none}.fd-pagination .fd-pagination__button [class*=sap-icon][dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__button [class*=sap-icon]{transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination--mobile .fd-pagination__link,.fd-pagination--mobile .fd-pagination__more,.fd-pagination--mobile .fd-pagination__per-page-label,.fd-pagination--mobile .fd-pagination__total{display:none}.fd-pagination--mobile .fd-pagination__button--mobile,.fd-pagination--mobile .fd-pagination__input,.fd-pagination--mobile .fd-pagination__label{display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (max-width: 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (min-width: 600px) and (max-width: 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, template: "<ng-container *ngIf=\"totalItems\">\n    <div class=\"fd-pagination__per-page\" *ngIf=\"itemsPerPageTemplate || itemsPerPageOptions?.length\">\n        <!-- note, that we're checking for the length of \"itemsPerPageOptions\", but using \"_displayedPageSizeOptions\" as \"pageOptions\" -->\n        <!-- these 2 can be different, as \"_displayedPageSizeOptions\" may also include \"itemsPerPage\" if it's not included in options -->\n        <ng-container\n            [ngTemplateOutlet]=\"itemsPerPageTemplate || perPage\"\n            [ngTemplateOutletContext]=\"{ onSelect: _onChangePerPage, pageOptions: _displayedPageSizeOptions }\"\n        ></ng-container>\n    </div>\n\n    <nav\n        fd-focus-key-manager-list\n        orientation=\"horizontal\"\n        [skipPredicate]=\"skipItemPredicate\"\n        class=\"fd-pagination__nav\"\n        [attr.aria-label]=\"ariaLabel || ('corePagination.ariaLabel' | fdTranslate)\"\n        [attr.aria-labelledby]=\"displayTotalItems ? _totalPagesElementId : null\"\n        *ngIf=\"totalItems >= itemsPerPage\"\n    >\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-rewind\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            [title]=\"firstLabel || ('corePagination.firstLabel' | fdTranslate)\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"goToFirstPage()\"\n            (keyup.enter)=\"goToFirstPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToFirstPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-left-arrow\"\n            [disabled]=\"isFirstPage\"\n            [ariaLabel]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            [title]=\"previousLabel || ('corePagination.previousLabel' | fdTranslate)\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isFirstPage\"\n            (click)=\"previousPage()\"\n            (keyup.enter)=\"previousPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"previousPage()\"\n        ></button>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesBeforeCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\n                \"\n                [title]=\"pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            #currentPageElement\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            [ariaLabel]=\"\n                pageLabel\n                    ? pageLabel(currentPage)\n                    : ('corePagination.pageLabel' | fdTranslate: { pageNumber: currentPage })\n            \"\n            class=\"fd-pagination__link is-active\"\n            [attr.aria-current]=\"true\"\n        >\n            {{ currentPage }}\n        </button>\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{\n                labelBeforeInputMobile\n                    ? labelBeforeInputMobile + ':'\n                    : ('corePagination.labelBeforeInputMobile'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            }}\n        </label>\n\n        <input\n            #pageInputElement\n            fd-focus-key-manager-item\n            fd-form-control\n            fd-only-digits\n            required\n            size=\"1\"\n            min=\"1\"\n            type=\"number\"\n            [max]=\"_lastPage\"\n            [state]=\"currentPageModel.invalid ? 'error' : null\"\n            class=\"fd-pagination__input\"\n            #currentPageModel=\"ngModel\"\n            [ngModel]=\"currentPage\"\n            [attr.aria-label]=\"\n                inputAriaLabel\n                    ? inputAriaLabel(currentPage, totalItems)\n                    : ('corePagination.inputAriaLabel'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            \"\n            (keydown.enter)=\"goToPage(currentPageModel.value)\"\n            (keydown.space)=\"goToPage(currentPageModel.value)\"\n            (blur)=\"_restoreInputValue(currentPageModel)\"\n        />\n\n        <label fd-form-label class=\"fd-pagination__label\">\n            {{\n                labelAfterInputMobile\n                    ? labelAfterInputMobile(_lastPage)\n                    : ('corePagination.labelAfterInputMobile'\n                      | fdTranslate: { pageNumber: currentPage, totalCount: totalItems })\n            }}\n        </label>\n\n        <!-- Duplicated to preserve the items order for keyboard navigation -->\n        <ng-container *ngFor=\"let page of _pagesAfterCurrent\">\n            <button\n                *ngIf=\"page !== _moreElementValue; else more\"\n                fd-focus-key-manager-item\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"\n                    pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\n                \"\n                [title]=\"pageLabel ? pageLabel(page) : ('corePagination.pageLabel' | fdTranslate: { pageNumber: page })\"\n                class=\"fd-pagination__link\"\n                (click)=\"goToPage(page)\"\n                (keyup.enter)=\"goToPage(page, $event)\"\n                (keydown.space)=\"$event.preventDefault()\"\n                (keyup.space)=\"goToPage(page, $event)\"\n            >\n                {{ page }}\n            </button>\n        </ng-container>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"navigation-right-arrow\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            [title]=\"nextLabel || ('corePagination.nextLabel' | fdTranslate)\"\n            class=\"fd-pagination__button\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"nextPage()\"\n            (keyup.enter)=\"nextPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"nextPage()\"\n        ></button>\n\n        <button\n            fd-focus-key-manager-item\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"media-forward\"\n            [disabled]=\"isLastPage\"\n            [ariaLabel]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            [title]=\"lastLabel || ('corePagination.lastLabel' | fdTranslate)\"\n            class=\"fd-pagination__button fd-pagination__button--mobile\"\n            [attr.aria-disabled]=\"isLastPage\"\n            (click)=\"goToLastPage()\"\n            (keyup.enter)=\"goToLastPage()\"\n            (keydown.space)=\"$event.preventDefault()\"\n            (keyup.space)=\"goToLastPage()\"\n        ></button>\n    </nav>\n\n    <span *ngIf=\"displayTotalItems\" class=\"fd-pagination__total\" [attr.id]=\"_totalPagesElementId\">\n        <ng-container\n            [ngTemplateOutlet]=\"displayTextTemplate || total\"\n            [ngTemplateOutletContext]=\"{ showing: _currentShowing }\"\n        ></ng-container>\n    </span>\n</ng-container>\n\n<ng-template #more>\n    <span\n        class=\"fd-pagination__more\"\n        [class.fd-pagination__more--compact]=\"_contentDensityObserver.isCompact$ | async\"\n        aria-hidden=\"true\"\n        aria-label=\"...\"\n        role=\"presentation\"\n    ></span>\n</ng-template>\n\n<ng-template #total let-showing=\"showing\">\n    <span fd-form-label class=\"fd-pagination__total-label\">\n        {{ 'corePagination.totalResultsLabel' | fdTranslate: _currentShowing }}\n    </span>\n</ng-template>\n\n<ng-template #perPage let-pageOptions=\"pageOptions\">\n    <label fd-form-label class=\"fd-pagination__per-page-label\">\n        {{ itemsPerPageLabel ? itemsPerPageLabel + ':' : ('corePagination.itemsPerPageLabel' | fdTranslate) }}\n    </label>\n\n    <fd-select class=\"fd-pagination__per-page-select\" [value]=\"itemsPerPage\" (valueChange)=\"_onChangePerPage($event)\">\n        <li fd-option *ngFor=\"let option of pageOptions\" [value]=\"option\">{{ option }}</li>\n    </fd-select>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-pagination\n*/.fd-pagination{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem;width:100%}.fd-pagination:after,.fd-pagination:before{box-sizing:inherit;font-size:inherit}.fd-pagination__per-page{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__per-page:after,.fd-pagination__per-page:before{box-sizing:inherit;font-size:inherit}.fd-pagination__nav{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 auto;padding:0}.fd-pagination__nav:after,.fd-pagination__nav:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-pagination__more:after,.fd-pagination__more:before{box-sizing:inherit;font-size:inherit}.fd-pagination__more:before{content:\"...\";display:block;text-align:center;width:2.25rem}.fd-pagination__more--compact:before{width:2rem}.fd-pagination .fd-pagination__button,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__link,.fd-pagination__more{margin-left:.125rem;margin-right:.125rem}.fd-pagination .fd-pagination__input{-moz-appearance:textfield;min-width:2.5rem;text-align:center;width:auto}.fd-pagination .fd-pagination__input::-webkit-inner-spin-button,.fd-pagination .fd-pagination__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-pagination .fd-pagination__label,.fd-pagination .fd-pagination__per-page-label{-ms-flex-negative:0;align-self:center;flex-shrink:0}.fd-pagination .fd-pagination__label{display:none}.fd-pagination .fd-pagination__total-label{margin:0}.fd-pagination .fd-pagination__link.is-active{display:none}.fd-pagination .fd-pagination__button [class*=sap-icon][dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__button [class*=sap-icon]{transform:rotate(180deg)}.fd-pagination .fd-pagination__button--mobile{display:none}.fd-pagination--short .fd-pagination__link.is-active,.fd-pagination--short .fd-pagination__link:active{display:flex}.fd-pagination--short .fd-pagination__input{display:none}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination--mobile .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination--mobile .fd-pagination__link,.fd-pagination--mobile .fd-pagination__more,.fd-pagination--mobile .fd-pagination__per-page-label,.fd-pagination--mobile .fd-pagination__total{display:none}.fd-pagination--mobile .fd-pagination__button--mobile,.fd-pagination--mobile .fd-pagination__input,.fd-pagination--mobile .fd-pagination__label{display:flex}.fd-pagination--mobile .fd-pagination__link.is-active,.fd-pagination--mobile .fd-pagination__link:active{display:none}@media (max-width: 599px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}@media (min-width: 600px) and (max-width: 1023px){.fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:auto;margin-right:0}.fd-pagination .fd-pagination__per-page+.fd-pagination__nav[dir=rtl],[dir=rtl] .fd-pagination .fd-pagination__per-page+.fd-pagination__nav{margin-left:0;margin-right:auto}.fd-pagination .fd-pagination__link,.fd-pagination .fd-pagination__more,.fd-pagination .fd-pagination__per-page-label,.fd-pagination .fd-pagination__total{display:none}.fd-pagination .fd-pagination__button--mobile,.fd-pagination .fd-pagination__input,.fd-pagination .fd-pagination__label{display:flex}.fd-pagination .fd-pagination__link.is-active,.fd-pagination .fd-pagination__link:active{display:none}}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-pagination__label .fd-form-label,.fd-pagination__total-label .fd-form-label{margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.PaginationService }, { type: i0.ChangeDetectorRef }, { type: i2.LiveAnnouncer }, { type: i11.Observable, decorators: [{
                     type: Inject,
                     args: [FD_LANGUAGE]

package/esm2020/select/select.component.mjs CHANGED Viewed

@@ -514,7 +514,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         registerFormItemControl(SelectComponent),
         SelectKeyManagerService,
         contentDensityObserverProviders()
-    ], queries: [{ propertyName: "_options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "_controlElementRef", first: true, predicate: ["selectControl"], descendants: true }, { propertyName: "selectOptionsListTemplate", first: true, predicate: ["selectOptionsListTemplate"], descendants: true }, { propertyName: "_dialogContainerElementRef", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "_optionPanel", first: true, predicate: ["optionPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list\"\n            [isOpen]=\"_isOpen\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [appendTo]=\"appendTo\"\n            [closeOnEscapeKey]=\"true\"\n            [fillControlMode]=\"fillControlMode\"\n            [maxWidth]=\"600\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n            (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        >\n            <fd-popover-control>\n                <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n            </fd-popover-control>\n\n            <fd-popover-body class=\"fd-popover-custom-select-body\">\n                <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected?.selected\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-readonly]=\"readonly\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n    </div>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control .fd-select__button .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button .fd-select__button.is-hover,.fd-select__control .fd-select__button .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button .fd-select__button.is-active,.fd-select__control .fd-select__button .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-active,.fd-select__control .fd-select__button.is-success .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-active,.fd-select__control .fd-select__button.is-error .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-active,.fd-select__control .fd-select__button.is-warning .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-active,.fd-select__control .fd-select__button.is-alert .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-active,.fd-select__control .fd-select__button.is-information .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{min-width:calc(5rem - var(--sapField_BorderWidth) * 2);padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(2.5rem - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{min-width:calc(2.75rem - var(--sapField_BorderWidth) * 2);padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.fd-popover__body>:first-child{border-radius:0}.fd-select__text-content{overflow:hidden;text-overflow:ellipsis;line-height:1rem;display:block}.fd-select-custom-class{display:inline-block;max-width:100%}.fd-popover-custom-select-body{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i8.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "_controlElementRef", first: true, predicate: ["selectControl"], descendants: true }, { propertyName: "selectOptionsListTemplate", first: true, predicate: ["selectOptionsListTemplate"], descendants: true }, { propertyName: "_dialogContainerElementRef", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "_optionPanel", first: true, predicate: ["optionPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list\"\n            [isOpen]=\"_isOpen\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [appendTo]=\"appendTo\"\n            [closeOnEscapeKey]=\"true\"\n            [fillControlMode]=\"fillControlMode\"\n            [maxWidth]=\"600\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n            (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        >\n            <fd-popover-control>\n                <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n            </fd-popover-control>\n\n            <fd-popover-body class=\"fd-popover-custom-select-body\">\n                <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected?.selected\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-readonly]=\"readonly\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n    </div>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control .fd-select__button .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button .fd-select__button.is-hover,.fd-select__control .fd-select__button .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button .fd-select__button.is-active,.fd-select__control .fd-select__button .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-active,.fd-select__control .fd-select__button.is-success .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-active,.fd-select__control .fd-select__button.is-error .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-active,.fd-select__control .fd-select__button.is-warning .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-active,.fd-select__control .fd-select__button.is-alert .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-active,.fd-select__control .fd-select__button.is-information .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{min-width:calc(5rem - var(--sapField_BorderWidth) * 2);padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(2.5rem - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{min-width:calc(2.75rem - var(--sapField_BorderWidth) * 2);padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover__body>:first-child{border-radius:0}.fd-select__text-content{overflow:hidden;text-overflow:ellipsis;line-height:1rem;display:block}.fd-select-custom-class{display:inline-block;max-width:100%}.fd-popover-custom-select-body{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i8.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
@@ -528,7 +528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         registerFormItemControl(SelectComponent),
                         SelectKeyManagerService,
                         contentDensityObserverProviders()
-                    ], template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list\"\n            [isOpen]=\"_isOpen\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [appendTo]=\"appendTo\"\n            [closeOnEscapeKey]=\"true\"\n            [fillControlMode]=\"fillControlMode\"\n            [maxWidth]=\"600\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n            (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        >\n            <fd-popover-control>\n                <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n            </fd-popover-control>\n\n            <fd-popover-body class=\"fd-popover-custom-select-body\">\n                <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected?.selected\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-readonly]=\"readonly\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n    </div>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control .fd-select__button .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button .fd-select__button.is-hover,.fd-select__control .fd-select__button .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button .fd-select__button.is-active,.fd-select__control .fd-select__button .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-active,.fd-select__control .fd-select__button.is-success .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-active,.fd-select__control .fd-select__button.is-error .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-active,.fd-select__control .fd-select__button.is-warning .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-active,.fd-select__control .fd-select__button.is-alert .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-active,.fd-select__control .fd-select__button.is-information .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{min-width:calc(5rem - var(--sapField_BorderWidth) * 2);padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(2.5rem - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{min-width:calc(2.75rem - var(--sapField_BorderWidth) * 2);padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.fd-popover__body>:first-child{border-radius:0}.fd-select__text-content{overflow:hidden;text-overflow:ellipsis;line-height:1rem;display:block}.fd-select-custom-class{display:inline-block;max-width:100%}.fd-popover-custom-select-body{max-width:100%}\n"] }]
+                    ], template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list\"\n            [isOpen]=\"_isOpen\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [appendTo]=\"appendTo\"\n            [closeOnEscapeKey]=\"true\"\n            [fillControlMode]=\"fillControlMode\"\n            [maxWidth]=\"600\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n            (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        >\n            <fd-popover-control>\n                <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n            </fd-popover-control>\n\n            <fd-popover-body class=\"fd-popover-custom-select-body\">\n                <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected?.selected\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-readonly]=\"readonly\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n    </div>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.0-rc.23\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control .fd-select__button .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button .fd-select__button.is-hover,.fd-select__control .fd-select__button .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button .fd-select__button.is-active,.fd-select__control .fd-select__button .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-active,.fd-select__control .fd-select__button.is-success .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-active,.fd-select__control .fd-select__button.is-error .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-active,.fd-select__control .fd-select__button.is-warning .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-active,.fd-select__control .fd-select__button.is-alert .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-active,.fd-select__control .fd-select__button.is-information .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{min-width:calc(5rem - var(--sapField_BorderWidth) * 2);padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(2.5rem - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{min-width:calc(2.75rem - var(--sapField_BorderWidth) * 2);padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover__body>:first-child{border-radius:0}.fd-select__text-content{overflow:hidden;text-overflow:ellipsis;line-height:1rem;display:block}.fd-select-custom-class{display:inline-block;max-width:100%}.fd-popover-custom-select-body{max-width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']