@fundamental-ngx/core 0.35.2-rc.0 → 0.35.2-rc.3

package/fesm2020/fundamental-ngx-core-fixed-card-layout.mjs

@@ -8,7 +8,7 @@ import * as i1 from '@fundamental-ngx/core/utils';
 import { resizeObservable, DragAndDropModule } from '@fundamental-ngx/core/utils';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { Subject } from 'rxjs';
-import { takeUntil, debounceTime } from 'rxjs/operators';
+import { takeUntil, debounceTime, delay } from 'rxjs/operators';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 
 class FixedCardLayoutItemComponent {
@@ -165,14 +165,6 @@ class FixedCardLayoutComponent {
         this._accessibilitySetup();
     }
     /** @hidden */
-    ngAfterViewChecked() {
-        /**
-         * Update column layout when orientation of screen changes.
-         * actual width is returned when view is stable. In AfterViewInit, correct value does not come.
-         */
-        this.updateLayout();
-    }
-    /** @hidden */
     ngOnChanges(changes) {
         if (!this._cards?.length) {
             return;
@@ -198,7 +190,7 @@ class FixedCardLayoutComponent {
     }
     /** Distribute cards on window resize */
     updateLayout() {
-        if (!this._cards.length) {
+        if (!this._cards.length || !this._availableWidth) {
             return;
         }
         const possibleNumberOfColumns = getNumberOfColumns(this._availableWidth, this.cardMinimumWidth);
@@ -214,19 +206,6 @@ class FixedCardLayoutComponent {
         }
         this._setColumnsWidth();
     }
-    /** @hidden Calculate container height basing on the card wrapper columns */
-    _calculateContainerHeight(additionalSpace = 0) {
-        this._changeDetector.detectChanges();
-        const wrapperColumns = this._cardColumns.map((column) => column
-            .map((card) => this._cardWrappers.find((wrapper) => wrapper.getSortedItems()[0].data === card)?.element)
-            .filter((v) => !!v));
-        const columnsHeights = wrapperColumns
-            .map((column) => column.map((card) => card.nativeElement.getBoundingClientRect().height))
-            .map((column) => column.reduce((height, cardHeight) => (height += cardHeight), 0));
-        // +4px because it's the top & bottom borders of card placeholder
-        this._containerHeight = Math.max(...columnsHeights) + 4 + additionalSpace;
-        this._changeDetector.detectChanges();
-    }
     /** @hidden */
     _onDropListExited() {
         this._shouldCalculateContainerHeight = true;
@@ -297,7 +276,7 @@ class FixedCardLayoutComponent {
     }
     /** @hidden Listen card change and distribute cards on column change */
     _listenOnCardsChange() {
-        this._cards.changes.subscribe(() => {
+        this._cards.changes.pipe(delay(0)).subscribe(() => {
             this._processCards();
             this._updateColumns();
         });
@@ -313,7 +292,6 @@ class FixedCardLayoutComponent {
         this._cardsArray = this._cards
             .toArray()
             .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);
-        this._changeDetector.detectChanges();
         this.updateLayout();
     }
     /** @hidden Distribute cards among columns to arrange them in "Z" flow */
@@ -356,6 +334,19 @@ class FixedCardLayoutComponent {
             this._changeDetector.detectChanges();
         }
     }
+    /** @hidden Calculate container height basing on the card wrapper columns */
+    _calculateContainerHeight(additionalSpace = 0) {
+        this._changeDetector.detectChanges();
+        const wrapperColumns = this._cardColumns.map((column) => column
+            .map((card) => this._cardWrappers.find((wrapper) => wrapper.getSortedItems()[0].data === card)?.element)
+            .filter((v) => !!v));
+        const columnsHeights = wrapperColumns
+            .map((column) => column.map((card) => card.nativeElement.getBoundingClientRect().height))
+            .map((column) => column.reduce((height, cardHeight) => (height += cardHeight), 0));
+        // +4px because it's the top & bottom borders of card placeholder
+        this._containerHeight = Math.max(...columnsHeights) + 4 + additionalSpace;
+        this._changeDetector.detectChanges();
+    }
 }
 FixedCardLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FixedCardLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 FixedCardLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: FixedCardLayoutComponent, selector: "fd-fixed-card-layout", inputs: { disableDragDrop: "disableDragDrop", dragStartDelay: "dragStartDelay", cardMinimumWidth: "cardMinimumWidth", columnsWidthConfig: "columnsWidthConfig", maxColumns: "maxColumns" }, outputs: { layoutChange: "layoutChange", cardDraggedDropped: "cardDraggedDropped" }, host: { listeners: { "keydown": "handleKeydown($event)" }, classAttribute: "fd-fixed-card-layout" }, queries: [{ propertyName: "_cards", predicate: CardDefinitionDirective }], viewQueries: [{ propertyName: "_layout", first: true, predicate: ["layout"], descendants: true }, { propertyName: "_cardContainers", predicate: FixedCardLayoutItemComponent, descendants: true }, { propertyName: "_cardWrappers", predicate: ["dropList"], descendants: true, read: CdkDropList }], usesOnChanges: true, ngImport: i0, template: "<div\n    #layout\n    cdkDropListGroup\n    fdDndKeyboardGroup\n    class=\"fd-fixed-card-layout__card-layout fd-fixed-card-layout__card-layout--columns-{{ this._numberOfColumns }}\"\n    [style.height]=\"_containerHeight + 'px'\"\n    [groups]=\"_cardColumns\"\n    orientation=\"horizontal\"\n    [customMoveFn]=\"_customMoveFn\"\n    [customTransferFn]=\"_customTransferFn\"\n    [disableKeyboardDragDrop]=\"disableDragDrop\"\n    [cdkDropListGroupDisabled]=\"disableDragDrop\"\n    [attr.dir]=\"_dir\"\n>\n    <div\n        #dropList\n        *ngFor=\"let card of _cardsArray; let cardIndex = index\"\n        cdkDropList\n        cdkDropListSortingDisabled\n        class=\"fd-fixed-card-layout__card\"\n        [class.fd-fixed-card-layout__card--single]=\"_singleItemColumns.has(card.fdCardDef)\"\n        [style.min-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [style.max-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [cdkDropListData]=\"cardIndex\"\n        [cdkDropListEnterPredicate]=\"_enterPredicate\"\n        (cdkDropListEntered)=\"_onDropListEntered($event)\"\n        (cdkDropListExited)=\"_onDropListExited()\"\n    >\n        <div\n            cdkDrag\n            fdDndKeyboardItem\n            tabindex=\"0\"\n            cdkDragPreviewClass=\"fd-fixed-card-layout__card-preview\"\n            [cdkDragData]=\"card\"\n            [cdkDragStartDelay]=\"dragStartDelay\"\n            [itemIndex]=\"_itemIndexes.get(card.fdCardDef)!\"\n            [groupIndex]=\"_groupIndexes.get(card.fdCardDef)!\"\n            (cdkDragDropped)=\"_onDragDropped($event)\"\n            (cdkDragStarted)=\"_setPlaceholderStyle(false)\"\n        >\n            <fd-fixed-card-layout-item>\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"> </ng-container>\n            </fd-fixed-card-layout-item>\n\n            <div *cdkDragPlaceholder class=\"fd-fixed-card-layout__card-placeholder\" [style]=\"_placeholderMargin\">\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"></ng-container>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngFor=\"let column of _cardColumns; let last = last; let index = index\">\n        <div *ngIf=\"!last\" class=\"fd-fixed-card-layout__clearfix\" [style.order]=\"index + 1\"></div>\n    </ng-container>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\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-fixed-card-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-fixed-card-layout:before,.fd-fixed-card-layout:after{box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;margin-left:-1rem;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;flex-direction:column;margin-top:-1rem}.fd-fixed-card-layout__card-layout:before,.fd-fixed-card-layout__card-layout:after{box-sizing:inherit;font-size:inherit}[dir=rtl] .fd-fixed-card-layout__card-layout,.fd-fixed-card-layout__card-layout[dir=rtl]{margin-right:-1rem;margin-left:0}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-2 .fd-fixed-card-layout__card{width:50%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-2 .fd-fixed-card-layout__card:nth-of-type(2n){order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-2 .fd-fixed-card-layout__card:nth-of-type(2n + 1){order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card{width:33.3333333333%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card:nth-of-type(3n){order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card:nth-of-type(3n + 1){order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-3 .fd-fixed-card-layout__card:nth-of-type(3n + 2){order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card{width:25%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n){order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n + 1){order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n + 2){order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-4 .fd-fixed-card-layout__card:nth-of-type(4n + 3){order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card{width:20%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n){order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n + 1){order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n + 2){order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n + 3){order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-5 .fd-fixed-card-layout__card:nth-of-type(5n + 4){order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card{width:16.6666666667%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n){order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n + 1){order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n + 2){order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n + 3){order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n + 4){order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-6 .fd-fixed-card-layout__card:nth-of-type(6n + 5){order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card{width:14.2857142857%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n){order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n + 1){order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n + 2){order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n + 3){order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n + 4){order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n + 5){order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-7 .fd-fixed-card-layout__card:nth-of-type(7n + 6){order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card{width:12.5%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n){order:8}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n + 1){order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n + 2){order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n + 3){order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n + 4){order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n + 5){order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n + 6){order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-8 .fd-fixed-card-layout__card:nth-of-type(8n + 7){order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card{width:11.1111111111%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n){order:9}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n + 1){order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n + 2){order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n + 3){order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n + 4){order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n + 5){order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n + 6){order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n + 7){order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-9 .fd-fixed-card-layout__card:nth-of-type(9n + 8){order:8}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card{width:10%}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n){order:10}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n + 1){order:1}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n + 2){order:2}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n + 3){order:3}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n + 4){order:4}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n + 5){order:5}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n + 6){order:6}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n + 7){order:7}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n + 8){order:8}.fd-fixed-card-layout__card-layout.fd-fixed-card-layout__card-layout--columns-10 .fd-fixed-card-layout__card:nth-of-type(10n + 9){order:9}.fd-fixed-card-layout__card,.fd-fixed-card-layout__card-placeholder{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;min-width:20rem;min-height:.0625rem}.fd-fixed-card-layout__card:before,.fd-fixed-card-layout__card:after,.fd-fixed-card-layout__card-placeholder:before,.fd-fixed-card-layout__card-placeholder:after{box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card{padding-left:1rem;order:1;padding-top:1rem}[dir=rtl] .fd-fixed-card-layout__card,.fd-fixed-card-layout__card[dir=rtl]{padding-right:1rem;padding-left:0}.fd-fixed-card-layout__card--single{flex-basis:100%}.fd-fixed-card-layout__card:empty{padding-top:0}.fd-fixed-card-layout__card-placeholder{opacity:.3;border:.125rem dashed var(--sapContent_DragAndDropActiveColor);cursor:grabbing}.fd-fixed-card-layout__card-preview{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;padding:0;margin:0;border:0;box-sizing:border-box;border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow2)}.fd-fixed-card-layout__card-preview:before,.fd-fixed-card-layout__card-preview:after{box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__clearfix{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;width:0;flex-basis:100%}.fd-fixed-card-layout__clearfix:before,.fd-fixed-card-layout__clearfix:after{box-sizing:inherit;font-size:inherit}.fd-fixed-card-layout__card{width:100%}.fd-fixed-card-layout__card-placeholder{width:100%;min-width:100%;max-width:100%}\n"], components: [{ type: FixedCardLayoutItemComponent, selector: "fd-fixed-card-layout-item" }], directives: [{ type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i1.DndKeyboardGroupDirective, selector: "[fdDndKeyboardGroup]", inputs: ["groups", "disableKeyboardDragDrop", "orientation", "customMoveFn", "customTransferFn"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.DndKeyboardItemDirective, selector: "[fdDndKeyboardItem]", inputs: ["itemIndex", "groupIndex"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });

package/fesm2020/fundamental-ngx-core-fixed-card-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-fixed-card-layout.mjs","sources":["../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout-item/fixed-card-layout-item.component.ts","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.ts","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.html","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.module.ts","../../../../libs/core/src/lib/fixed-card-layout/fundamental-ngx-core-fixed-card-layout.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';\nimport { FocusableOption } from '@angular/cdk/a11y';\n\n@Component({\n    selector: 'fd-fixed-card-layout-item',\n    template: `<ng-content></ng-content>`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: block'\n    }\n})\nexport class FixedCardLayoutItemComponent implements FocusableOption {\n    constructor(private _elementRef: ElementRef) {}\n\n    /** Set focus on the element. */\n    focus(): void {\n        const header = this._elementRef.nativeElement.querySelector('.fd-card__header');\n        if (header) {\n            header.focus();\n        }\n    }\n}\n","import {\n    AfterContentInit,\n    AfterViewChecked,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    QueryList,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewChildren,\n    ViewEncapsulation\n} from '@angular/core';\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { CdkDrag, CdkDragDrop, CdkDragEnter, CdkDropList } from '@angular/cdk/drag-drop';\nimport { Subject } from 'rxjs';\nimport { debounceTime, takeUntil } from 'rxjs/operators';\n\nimport { resizeObservable, RtlService } from '@fundamental-ngx/core/utils';\nimport { FixedCardLayoutItemComponent } from './fixed-card-layout-item/fixed-card-layout-item.component';\nimport { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\n\nconst PX_IN_REM = 16;\nconst CARD_MINIMUM_WIDTH = 320; // 320px = 20rem\nconst CARD_GAP_WIDTH = 16; // 16px = 1rem\nconst DRAG_START_DELAY = 200; // in ms\nconst MAX_COLUMNS = 10;\n\nlet cardRank = 1;\n\n@Directive({ selector: '[fdCardDef]' })\nexport class CardDefinitionDirective {\n    /**\n     * Behaves like rank of card.\n     * Useful in creating layout again after drag and drop.\n     */\n    @Input()\n    set fdCardDef(value: NumberInput) {\n        if (!value) {\n            return;\n        }\n\n        this._fdCardDef = coerceNumberProperty(value);\n    }\n    get fdCardDef(): number {\n        return this._fdCardDef;\n    }\n\n    /** @hidden */\n    private _fdCardDef: number = cardRank++;\n\n    /** @hidden */\n    constructor(public template: TemplateRef<any>) {}\n}\n\nexport interface Layout {\n    numberOfColumns?: number;\n    screenSize: number;\n}\n\nexport interface CardDropped {\n    previousIndex: number;\n    currentIndex: number;\n    layoutColumns: number;\n    items: CardDefinitionDirective[];\n}\n\ntype Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n\nexport type ColumnsWidthConfig = { [C in Columns]?: number };\n\ntype CardColumn = CardDefinitionDirective[];\n\n@Component({\n    selector: 'fd-fixed-card-layout',\n    templateUrl: './fixed-card-layout.component.html',\n    styleUrls: ['./fixed-card-layout.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'fd-fixed-card-layout'\n    }\n})\nexport class FixedCardLayoutComponent\n    implements OnInit, AfterContentInit, AfterViewInit, AfterViewChecked, OnChanges, OnDestroy\n{\n    /** Drag drop behavior can be disabled */\n    @Input()\n    disableDragDrop: boolean;\n\n    /** Drag start delay in milliseconds, default to 200ms for safe scrolling on mobile with touchscreen */\n    @Input()\n    dragStartDelay = DRAG_START_DELAY;\n\n    /** Card's minimum width in pixels. */\n    @Input()\n    set cardMinimumWidth(value: NumberInput) {\n        const coercedValue = coerceNumberProperty(value);\n\n        if (coercedValue < CARD_MINIMUM_WIDTH) {\n            return;\n        }\n\n        this._cardMinimumWidth = coercedValue;\n\n        // If component is ready, do the recalculation.\n        if (this._layout) {\n            this.updateLayout();\n        }\n    }\n    get cardMinimumWidth(): number {\n        return this._cardMinimumWidth;\n    }\n\n    /** Config with the width ratios that should take every column. Flex-grow principe. Missed values set to 0. s*/\n    @Input()\n    columnsWidthConfig: ColumnsWidthConfig;\n\n    /** Limit the number of columns. Default is 10. */\n    @Input()\n    maxColumns = MAX_COLUMNS;\n\n    /** Event to emit, when layout changes */\n    @Output()\n    layoutChange: EventEmitter<Layout> = new EventEmitter<Layout>();\n\n    /** Event to emit on Card dragged and dropped */\n    @Output()\n    cardDraggedDropped: EventEmitter<CardDropped> = new EventEmitter<CardDropped>();\n\n    /** @hidden */\n    @ContentChildren(CardDefinitionDirective)\n    _cards: QueryList<CardDefinitionDirective>;\n\n    /** @hidden */\n    @ViewChildren(FixedCardLayoutItemComponent)\n    _cardContainers: QueryList<FixedCardLayoutItemComponent>;\n\n    /** @hidden */\n    @ViewChildren('dropList', { read: CdkDropList })\n    _cardWrappers: QueryList<CdkDropList>;\n\n    /** @hidden */\n    @ViewChild('layout')\n    _layout: ElementRef;\n\n    /** @hidden */\n    _cardsArray: Array<CardDefinitionDirective>;\n\n    /** @hidden Number of Columns in layout */\n    _numberOfColumns: number;\n\n    /** @hidden */\n    _cardColumns: CardColumn[];\n\n    /** @hidden*/\n    _containerHeight: number;\n\n    /** @hidden handles rtl service */\n    _dir = 'ltr';\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _groupIndexes = new Map<number, number>();\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _itemIndexes = new Map<number, number>();\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _singleItemColumns = new Set<number>();\n\n    /** @hidden */\n    _columnsWidth = new Map<number, number>();\n\n    /** @hidden Return available width for fixed card layout */\n    get _availableWidth(): number {\n        return this._layout.nativeElement.getBoundingClientRect().width;\n    }\n\n    /** @hidden */\n    _placeholderMargin: { [klass: string]: string };\n\n    /** @hidden */\n    private _previousNumberOfColumns: number;\n\n    /** @hidden FocusKeyManager instance */\n    private _keyboardEventsManager: FocusKeyManager<FixedCardLayoutItemComponent>;\n\n    /** @hidden */\n    private _cardMinimumWidth = CARD_MINIMUM_WIDTH;\n\n    /** @hidden */\n    private _shouldCalculateContainerHeight = false;\n\n    /** @hidden An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */\n    private readonly _onDestroy$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    constructor(\n        private readonly _changeDetector: ChangeDetectorRef,\n        @Optional() private readonly _rtlService: RtlService\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._subscribeToRtl();\n    }\n\n    /** @hidden */\n    ngAfterContentInit(): void {\n        this._listenOnCardsChange();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._processCards();\n        this._listenOnResize();\n        this._accessibilitySetup();\n    }\n\n    /** @hidden */\n    ngAfterViewChecked(): void {\n        /**\n         * Update column layout when orientation of screen changes.\n         * actual width is returned when view is stable. In AfterViewInit, correct value does not come.\n         */\n        this.updateLayout();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if (!this._cards?.length) {\n            return;\n        }\n\n        if ('maxColumns' in changes) {\n            this.updateLayout();\n        } else if ('columnsWidthConfig' in changes) {\n            this._setColumnsWidth();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._onDestroy$.next();\n        this._onDestroy$.complete();\n    }\n\n    /** @hidden */\n    @HostListener('keydown', ['$event'])\n    handleKeydown(event: KeyboardEvent): void {\n        event.stopImmediatePropagation();\n\n        if (this._keyboardEventsManager) {\n            this._keyboardEventsManager.onKeydown(event);\n        }\n    }\n\n    /** Distribute cards on window resize */\n    updateLayout(): void {\n        if (!this._cards.length) {\n            return;\n        }\n\n        const possibleNumberOfColumns = getNumberOfColumns(this._availableWidth, this.cardMinimumWidth);\n\n        this._numberOfColumns = Math.min(\n            possibleNumberOfColumns,\n            this._cards.length,\n            this.maxColumns || MAX_COLUMNS,\n            MAX_COLUMNS\n        );\n\n        this.layoutChange.emit({\n            numberOfColumns: this._numberOfColumns,\n            screenSize: this._availableWidth\n        });\n\n        if (this._previousNumberOfColumns !== this._numberOfColumns) {\n            this._previousNumberOfColumns = this._numberOfColumns;\n            this._updateColumns();\n            return;\n        }\n\n        this._setColumnsWidth();\n    }\n\n    /** @hidden Calculate container height basing on the card wrapper columns */\n    _calculateContainerHeight(additionalSpace: number = 0): void {\n        this._changeDetector.detectChanges();\n\n        const wrapperColumns = this._cardColumns.map((column) =>\n            column\n                .map((card) => this._cardWrappers.find((wrapper) => wrapper.getSortedItems()[0].data === card)?.element)\n                .filter((v): v is ElementRef<HTMLElement> => !!v)\n        );\n\n        const columnsHeights = wrapperColumns\n            .map((column) => column.map((card) => card.nativeElement.getBoundingClientRect().height))\n            .map((column) => column.reduce((height, cardHeight) => (height += cardHeight), 0));\n\n        // +4px because it's the top & bottom borders of card placeholder\n        this._containerHeight = Math.max(...columnsHeights) + 4 + additionalSpace;\n\n        this._changeDetector.detectChanges();\n    }\n\n    /** @hidden */\n    _enterPredicate = (_: CdkDrag, drop: CdkDropList): boolean => {\n        // We should update container's height & its children rects (to react when drag moves into the list) before we entered any drop list.\n        // That's why it's done here instead of cdkDropListEntered. As this predicate being called many times here is the optimization.\n        if (this._shouldCalculateContainerHeight) {\n            this._shouldCalculateContainerHeight = false;\n\n            // Placeholder doesn't have margin set yet but we need to count it\n            // Margin will be set only if there are already items in container\n            const additionalSpace = drop.getSortedItems().length ? PX_IN_REM : 0;\n\n            this._calculateContainerHeight(additionalSpace);\n        }\n\n        return true;\n    };\n\n    /** @hidden */\n    _onDropListExited(): void {\n        this._shouldCalculateContainerHeight = true;\n    }\n\n    /** @hidden */\n    _onDropListEntered(event: CdkDragEnter): void {\n        const containerItemCardDef = (event.container.getSortedItems()[0].data as CardDefinitionDirective).fdCardDef;\n        const dragItemCardDef = (event.item.data as CardDefinitionDirective).fdCardDef;\n\n        this._setPlaceholderStyle(containerItemCardDef !== dragItemCardDef);\n    }\n\n    /** @hidden */\n    _onDragDropped(event: CdkDragDrop<number, number>): void {\n        if (event.container.data === event.previousContainer.data) {\n            return;\n        }\n\n        const movedCard = event.previousContainer.getSortedItems()[0].data;\n        const replacedCard = event.container.getSortedItems()[0].data;\n\n        const movedCardColumn = this._cardColumns.find((column) =>\n            column.find((card) => card.fdCardDef === movedCard.fdCardDef)\n        );\n        const replacedCardColumn = this._cardColumns.find((column) =>\n            column.find((card) => card.fdCardDef === replacedCard.fdCardDef)\n        );\n\n        // If we dragged the card from the same column as the column we're dropping into\n        // There may be a situation where the order shouldn't change but since there are a different drop lists it will change\n        // We should prevent this\n        if (movedCardColumn === replacedCardColumn && movedCardColumn?.length === 2) {\n            if (movedCard.fdCardDef < replacedCard.fdCardDef && event.previousContainer.data < event.container.data) {\n                return;\n            }\n\n            if (movedCard.fdCardDef > replacedCard.fdCardDef && event.previousContainer.data > event.container.data) {\n                return;\n            }\n        }\n\n        this._processDragDrop(event.previousContainer.data, event.container.data, movedCard, replacedCard);\n    }\n\n    /** @hidden For the keyboard drag&drop directive */\n    _customMoveFn = (group: CardColumn, indexFrom: number, indexTo: number): void => {\n        const movedCard = group[indexFrom];\n        const replacedCard = group[indexTo];\n\n        const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);\n        const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);\n\n        this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);\n    };\n\n    /** @hidden For the keyboard drag&drop directive */\n    _customTransferFn = (prevGroup: CardColumn, nextGroup: CardColumn, indexFrom: number, indexTo: number): void => {\n        const movedCard = prevGroup[indexFrom];\n        const replacedCard = nextGroup[indexTo];\n\n        const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);\n        const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);\n\n        this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);\n    };\n\n    /** @hidden */\n    _setPlaceholderStyle(value: boolean): void {\n        this._placeholderMargin = value ? { 'margin-bottom': '1rem' } : {};\n    }\n\n    /** @hidden Arranges cards on drop of dragged card */\n    private _processDragDrop(\n        prevIndex: number,\n        newIndex: number,\n        prevCard: CardDefinitionDirective,\n        newCard: CardDefinitionDirective\n    ): void {\n        // moveItemInArray from CDK won't work as it changes order of other cards\n        const replacedCard = this._cardsArray[newIndex];\n        this._cardsArray[newIndex] = this._cardsArray[prevIndex];\n        this._cardsArray[prevIndex] = replacedCard;\n\n        adjustCardRank(prevCard, newCard);\n\n        this.cardDraggedDropped.emit({\n            previousIndex: prevIndex,\n            currentIndex: newIndex,\n            layoutColumns: this._numberOfColumns,\n            items: this._cards.toArray()\n        });\n\n        this._updateColumns();\n    }\n\n    /** @hidden */\n    private _accessibilitySetup(): void {\n        this._keyboardEventsManager = new FocusKeyManager(this._cardContainers).withWrap();\n    }\n\n    /** @hidden Rtl change subscription */\n    private _subscribeToRtl(): void {\n        this._rtlService?.rtl.pipe(takeUntil(this._onDestroy$)).subscribe((isRtl) => {\n            this._dir = isRtl ? 'rtl' : 'ltr';\n            this._changeDetector.detectChanges();\n        });\n    }\n\n    /** @hidden Listen window resize and distribute cards on column change */\n    private _listenOnResize(): void {\n        resizeObservable(this._layout.nativeElement)\n            .pipe(debounceTime(60), takeUntil(this._onDestroy$))\n            .subscribe(() => this.updateLayout());\n    }\n\n    /** @hidden Listen card change and distribute cards on column change */\n    private _listenOnCardsChange(): void {\n        this._cards.changes.subscribe(() => {\n            this._processCards();\n            this._updateColumns();\n        });\n    }\n\n    /** @hidden Renders layout on column changes */\n    private _updateColumns(): void {\n        this._setCardColumns();\n        this._setColumnsWidth(false);\n        this._calculateContainerHeight();\n    }\n\n    /** @hidden */\n    private _processCards(): void {\n        this._cardsArray = this._cards\n            .toArray()\n            .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);\n\n        this._changeDetector.detectChanges();\n\n        this.updateLayout();\n    }\n\n    /** @hidden Distribute cards among columns to arrange them in \"Z\" flow */\n    private _setCardColumns(): void {\n        this._groupIndexes = new Map<number, number>();\n        this._itemIndexes = new Map<number, number>();\n        this._singleItemColumns = new Set<number>();\n\n        const columns: CardColumn[] = new Array(this._numberOfColumns).fill(0).map(() => new Array(0));\n\n        this._cardsArray.forEach((card, i) => {\n            const currColumnIndex = i % this._numberOfColumns;\n            const itemIndex = columns[currColumnIndex].length;\n\n            columns[currColumnIndex].push(card);\n\n            this._groupIndexes.set(card.fdCardDef, currColumnIndex);\n            this._itemIndexes.set(card.fdCardDef, itemIndex);\n        });\n\n        this._cardColumns = columns;\n\n        this._cardColumns.forEach((column) => {\n            if (column.length > 0 && column.length < 2) {\n                this._singleItemColumns.add(column[0].fdCardDef);\n            }\n        });\n    }\n\n    /** @hidden */\n    private _setColumnsWidth(detectChanges = true): void {\n        this._columnsWidth = new Map();\n\n        const configPresent =\n            this.columnsWidthConfig &&\n            typeof this.columnsWidthConfig === 'object' &&\n            Object.keys(this.columnsWidthConfig).length;\n\n        if (!configPresent || !this._layout || this._numberOfColumns === 1) {\n            return;\n        }\n\n        const fixedWidthModifiers = fixWidthModifiers(this.columnsWidthConfig, this._numberOfColumns);\n        const totalWidthModifiers = fixedWidthModifiers.reduce((sum, width) => (sum += width), 0);\n        const freeSpace = this._availableWidth - this.cardMinimumWidth * this._numberOfColumns;\n\n        this._cardColumns.forEach((column, index) => {\n            const columnWidth = Math.round(\n                this.cardMinimumWidth + (freeSpace / totalWidthModifiers) * fixedWidthModifiers[index]\n            );\n\n            column.forEach((card) => this._columnsWidth.set(card.fdCardDef, columnWidth));\n        });\n\n        if (detectChanges) {\n            this._changeDetector.detectChanges();\n        }\n    }\n}\n\n/** @hidden */\nfunction fixWidthModifiers(config: ColumnsWidthConfig, numberOfColumns: number): number[] {\n    const modifiers = new Array(numberOfColumns).fill(0);\n\n    return modifiers.map((_, index) => {\n        const columnWidthModifier = config[index + 1];\n\n        if (!columnWidthModifier || columnWidthModifier < 0) {\n            return 0;\n        }\n\n        return columnWidthModifier;\n    });\n}\n\n/** @hidden Returns number of columns that can fit in current available width for fd-card-layout */\nfunction getNumberOfColumns(containerWidth: number, cardWidth: number): number {\n    containerWidth = containerWidth || 1;\n    cardWidth = cardWidth || 1;\n\n    const numberOfCardsWithNoGap = Math.max(Math.floor(containerWidth / cardWidth), 1); // Example: 960 / 320 = 3\n    const requiredWidthWithGap = numberOfCardsWithNoGap * cardWidth + (numberOfCardsWithNoGap - 1) * CARD_GAP_WIDTH;\n    const columnCount = requiredWidthWithGap > containerWidth ? numberOfCardsWithNoGap - 1 : numberOfCardsWithNoGap;\n\n    return Math.max(columnCount, 1);\n}\n\n/** @hidden Method to update rank after cards are dragged */\nfunction adjustCardRank(draggedCard: CardDefinitionDirective, replacedCard: CardDefinitionDirective): void {\n    const draggedCardRank = draggedCard.fdCardDef;\n    draggedCard.fdCardDef = replacedCard.fdCardDef;\n    replacedCard.fdCardDef = draggedCardRank;\n}\n","<div\n    #layout\n    cdkDropListGroup\n    fdDndKeyboardGroup\n    class=\"fd-fixed-card-layout__card-layout fd-fixed-card-layout__card-layout--columns-{{ this._numberOfColumns }}\"\n    [style.height]=\"_containerHeight + 'px'\"\n    [groups]=\"_cardColumns\"\n    orientation=\"horizontal\"\n    [customMoveFn]=\"_customMoveFn\"\n    [customTransferFn]=\"_customTransferFn\"\n    [disableKeyboardDragDrop]=\"disableDragDrop\"\n    [cdkDropListGroupDisabled]=\"disableDragDrop\"\n    [attr.dir]=\"_dir\"\n>\n    <div\n        #dropList\n        *ngFor=\"let card of _cardsArray; let cardIndex = index\"\n        cdkDropList\n        cdkDropListSortingDisabled\n        class=\"fd-fixed-card-layout__card\"\n        [class.fd-fixed-card-layout__card--single]=\"_singleItemColumns.has(card.fdCardDef)\"\n        [style.min-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [style.max-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [cdkDropListData]=\"cardIndex\"\n        [cdkDropListEnterPredicate]=\"_enterPredicate\"\n        (cdkDropListEntered)=\"_onDropListEntered($event)\"\n        (cdkDropListExited)=\"_onDropListExited()\"\n    >\n        <div\n            cdkDrag\n            fdDndKeyboardItem\n            tabindex=\"0\"\n            cdkDragPreviewClass=\"fd-fixed-card-layout__card-preview\"\n            [cdkDragData]=\"card\"\n            [cdkDragStartDelay]=\"dragStartDelay\"\n            [itemIndex]=\"_itemIndexes.get(card.fdCardDef)!\"\n            [groupIndex]=\"_groupIndexes.get(card.fdCardDef)!\"\n            (cdkDragDropped)=\"_onDragDropped($event)\"\n            (cdkDragStarted)=\"_setPlaceholderStyle(false)\"\n        >\n            <fd-fixed-card-layout-item>\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"> </ng-container>\n            </fd-fixed-card-layout-item>\n\n            <div *cdkDragPlaceholder class=\"fd-fixed-card-layout__card-placeholder\" [style]=\"_placeholderMargin\">\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"></ng-container>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngFor=\"let column of _cardColumns; let last = last; let index = index\">\n        <div *ngIf=\"!last\" class=\"fd-fixed-card-layout__clearfix\" [style.order]=\"index + 1\"></div>\n    </ng-container>\n</div>\n","import { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FixedCardLayoutItemComponent } from './fixed-card-layout-item/fixed-card-layout-item.component';\nimport { DragAndDropModule } from '@fundamental-ngx/core/utils';\nimport { CardDefinitionDirective, FixedCardLayoutComponent } from './fixed-card-layout.component';\n\n@NgModule({\n    declarations: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent],\n    imports: [CommonModule, DragDropModule, DragAndDropModule],\n    exports: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent]\n})\nexport class FixedCardLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-fixed-card-layout.mjs","sources":["../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout-item/fixed-card-layout-item.component.ts","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.ts","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.component.html","../../../../libs/core/src/lib/fixed-card-layout/fixed-card-layout.module.ts","../../../../libs/core/src/lib/fixed-card-layout/fundamental-ngx-core-fixed-card-layout.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';\nimport { FocusableOption } from '@angular/cdk/a11y';\n\n@Component({\n    selector: 'fd-fixed-card-layout-item',\n    template: `<ng-content></ng-content>`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        style: 'display: block'\n    }\n})\nexport class FixedCardLayoutItemComponent implements FocusableOption {\n    constructor(private _elementRef: ElementRef) {}\n\n    /** Set focus on the element. */\n    focus(): void {\n        const header = this._elementRef.nativeElement.querySelector('.fd-card__header');\n        if (header) {\n            header.focus();\n        }\n    }\n}\n","import {\n    AfterContentInit,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    QueryList,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewChildren,\n    ViewEncapsulation\n} from '@angular/core';\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { CdkDrag, CdkDragDrop, CdkDragEnter, CdkDropList } from '@angular/cdk/drag-drop';\nimport { Subject } from 'rxjs';\nimport { debounceTime, delay, takeUntil } from 'rxjs/operators';\n\nimport { resizeObservable, RtlService } from '@fundamental-ngx/core/utils';\nimport { FixedCardLayoutItemComponent } from './fixed-card-layout-item/fixed-card-layout-item.component';\nimport { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\n\nconst PX_IN_REM = 16;\nconst CARD_MINIMUM_WIDTH = 320; // 320px = 20rem\nconst CARD_GAP_WIDTH = 16; // 16px = 1rem\nconst DRAG_START_DELAY = 200; // in ms\nconst MAX_COLUMNS = 10;\n\nlet cardRank = 1;\n\n@Directive({ selector: '[fdCardDef]' })\nexport class CardDefinitionDirective {\n    /**\n     * Behaves like rank of card.\n     * Useful in creating layout again after drag and drop.\n     */\n    @Input()\n    set fdCardDef(value: NumberInput) {\n        if (!value) {\n            return;\n        }\n\n        this._fdCardDef = coerceNumberProperty(value);\n    }\n    get fdCardDef(): number {\n        return this._fdCardDef;\n    }\n\n    /** @hidden */\n    private _fdCardDef: number = cardRank++;\n\n    /** @hidden */\n    constructor(public template: TemplateRef<any>) {}\n}\n\nexport interface Layout {\n    numberOfColumns?: number;\n    screenSize: number;\n}\n\nexport interface CardDropped {\n    previousIndex: number;\n    currentIndex: number;\n    layoutColumns: number;\n    items: CardDefinitionDirective[];\n}\n\ntype Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n\nexport type ColumnsWidthConfig = { [C in Columns]?: number };\n\ntype CardColumn = CardDefinitionDirective[];\n\n@Component({\n    selector: 'fd-fixed-card-layout',\n    templateUrl: './fixed-card-layout.component.html',\n    styleUrls: ['./fixed-card-layout.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'fd-fixed-card-layout'\n    }\n})\nexport class FixedCardLayoutComponent implements OnInit, AfterContentInit, AfterViewInit, OnChanges, OnDestroy {\n    /** Drag drop behavior can be disabled */\n    @Input()\n    disableDragDrop: boolean;\n\n    /** Drag start delay in milliseconds, default to 200ms for safe scrolling on mobile with touchscreen */\n    @Input()\n    dragStartDelay = DRAG_START_DELAY;\n\n    /** Card's minimum width in pixels. */\n    @Input()\n    set cardMinimumWidth(value: NumberInput) {\n        const coercedValue = coerceNumberProperty(value);\n\n        if (coercedValue < CARD_MINIMUM_WIDTH) {\n            return;\n        }\n\n        this._cardMinimumWidth = coercedValue;\n\n        // If component is ready, do the recalculation.\n        if (this._layout) {\n            this.updateLayout();\n        }\n    }\n    get cardMinimumWidth(): number {\n        return this._cardMinimumWidth;\n    }\n\n    /** Config with the width ratios that should take every column. Flex-grow principe. Missed values set to 0. s*/\n    @Input()\n    columnsWidthConfig: ColumnsWidthConfig;\n\n    /** Limit the number of columns. Default is 10. */\n    @Input()\n    maxColumns = MAX_COLUMNS;\n\n    /** Event to emit, when layout changes */\n    @Output()\n    layoutChange: EventEmitter<Layout> = new EventEmitter<Layout>();\n\n    /** Event to emit on Card dragged and dropped */\n    @Output()\n    cardDraggedDropped: EventEmitter<CardDropped> = new EventEmitter<CardDropped>();\n\n    /** @hidden */\n    @ContentChildren(CardDefinitionDirective)\n    _cards: QueryList<CardDefinitionDirective>;\n\n    /** @hidden */\n    @ViewChildren(FixedCardLayoutItemComponent)\n    _cardContainers: QueryList<FixedCardLayoutItemComponent>;\n\n    /** @hidden */\n    @ViewChildren('dropList', { read: CdkDropList })\n    _cardWrappers: QueryList<CdkDropList>;\n\n    /** @hidden */\n    @ViewChild('layout')\n    _layout: ElementRef;\n\n    /** @hidden */\n    _cardsArray: Array<CardDefinitionDirective>;\n\n    /** @hidden Number of Columns in layout */\n    _numberOfColumns: number;\n\n    /** @hidden */\n    _cardColumns: CardColumn[];\n\n    /** @hidden*/\n    _containerHeight: number;\n\n    /** @hidden handles rtl service */\n    _dir = 'ltr';\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _groupIndexes = new Map<number, number>();\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _itemIndexes = new Map<number, number>();\n\n    /** @hidden first number is the CardDefinition rank, i.e. id */\n    _singleItemColumns = new Set<number>();\n\n    /** @hidden */\n    _columnsWidth = new Map<number, number>();\n\n    /** @hidden Return available width for fixed card layout */\n    get _availableWidth(): number {\n        return this._layout.nativeElement.getBoundingClientRect().width;\n    }\n\n    /** @hidden */\n    _placeholderMargin: { [klass: string]: string };\n\n    /** @hidden */\n    private _previousNumberOfColumns: number;\n\n    /** @hidden FocusKeyManager instance */\n    private _keyboardEventsManager: FocusKeyManager<FixedCardLayoutItemComponent>;\n\n    /** @hidden */\n    private _cardMinimumWidth = CARD_MINIMUM_WIDTH;\n\n    /** @hidden */\n    private _shouldCalculateContainerHeight = false;\n\n    /** @hidden An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */\n    private readonly _onDestroy$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    constructor(\n        private readonly _changeDetector: ChangeDetectorRef,\n        @Optional() private readonly _rtlService: RtlService\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._subscribeToRtl();\n    }\n\n    /** @hidden */\n    ngAfterContentInit(): void {\n        this._listenOnCardsChange();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._processCards();\n        this._listenOnResize();\n        this._accessibilitySetup();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if (!this._cards?.length) {\n            return;\n        }\n\n        if ('maxColumns' in changes) {\n            this.updateLayout();\n        } else if ('columnsWidthConfig' in changes) {\n            this._setColumnsWidth();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._onDestroy$.next();\n        this._onDestroy$.complete();\n    }\n\n    /** @hidden */\n    @HostListener('keydown', ['$event'])\n    handleKeydown(event: KeyboardEvent): void {\n        event.stopImmediatePropagation();\n\n        if (this._keyboardEventsManager) {\n            this._keyboardEventsManager.onKeydown(event);\n        }\n    }\n\n    /** Distribute cards on window resize */\n    updateLayout(): void {\n        if (!this._cards.length || !this._availableWidth) {\n            return;\n        }\n\n        const possibleNumberOfColumns = getNumberOfColumns(this._availableWidth, this.cardMinimumWidth);\n\n        this._numberOfColumns = Math.min(\n            possibleNumberOfColumns,\n            this._cards.length,\n            this.maxColumns || MAX_COLUMNS,\n            MAX_COLUMNS\n        );\n\n        this.layoutChange.emit({\n            numberOfColumns: this._numberOfColumns,\n            screenSize: this._availableWidth\n        });\n\n        if (this._previousNumberOfColumns !== this._numberOfColumns) {\n            this._previousNumberOfColumns = this._numberOfColumns;\n            this._updateColumns();\n            return;\n        }\n\n        this._setColumnsWidth();\n    }\n\n    /** @hidden */\n    _enterPredicate = (_: CdkDrag, drop: CdkDropList): boolean => {\n        // We should update container's height & its children rects (to react when drag moves into the list) before we entered any drop list.\n        // That's why it's done here instead of cdkDropListEntered. As this predicate being called many times here is the optimization.\n        if (this._shouldCalculateContainerHeight) {\n            this._shouldCalculateContainerHeight = false;\n\n            // Placeholder doesn't have margin set yet but we need to count it\n            // Margin will be set only if there are already items in container\n            const additionalSpace = drop.getSortedItems().length ? PX_IN_REM : 0;\n\n            this._calculateContainerHeight(additionalSpace);\n        }\n\n        return true;\n    };\n\n    /** @hidden */\n    _onDropListExited(): void {\n        this._shouldCalculateContainerHeight = true;\n    }\n\n    /** @hidden */\n    _onDropListEntered(event: CdkDragEnter): void {\n        const containerItemCardDef = (event.container.getSortedItems()[0].data as CardDefinitionDirective).fdCardDef;\n        const dragItemCardDef = (event.item.data as CardDefinitionDirective).fdCardDef;\n\n        this._setPlaceholderStyle(containerItemCardDef !== dragItemCardDef);\n    }\n\n    /** @hidden */\n    _onDragDropped(event: CdkDragDrop<number, number>): void {\n        if (event.container.data === event.previousContainer.data) {\n            return;\n        }\n\n        const movedCard = event.previousContainer.getSortedItems()[0].data;\n        const replacedCard = event.container.getSortedItems()[0].data;\n\n        const movedCardColumn = this._cardColumns.find((column) =>\n            column.find((card) => card.fdCardDef === movedCard.fdCardDef)\n        );\n        const replacedCardColumn = this._cardColumns.find((column) =>\n            column.find((card) => card.fdCardDef === replacedCard.fdCardDef)\n        );\n\n        // If we dragged the card from the same column as the column we're dropping into\n        // There may be a situation where the order shouldn't change but since there are a different drop lists it will change\n        // We should prevent this\n        if (movedCardColumn === replacedCardColumn && movedCardColumn?.length === 2) {\n            if (movedCard.fdCardDef < replacedCard.fdCardDef && event.previousContainer.data < event.container.data) {\n                return;\n            }\n\n            if (movedCard.fdCardDef > replacedCard.fdCardDef && event.previousContainer.data > event.container.data) {\n                return;\n            }\n        }\n\n        this._processDragDrop(event.previousContainer.data, event.container.data, movedCard, replacedCard);\n    }\n\n    /** @hidden For the keyboard drag&drop directive */\n    _customMoveFn = (group: CardColumn, indexFrom: number, indexTo: number): void => {\n        const movedCard = group[indexFrom];\n        const replacedCard = group[indexTo];\n\n        const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);\n        const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);\n\n        this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);\n    };\n\n    /** @hidden For the keyboard drag&drop directive */\n    _customTransferFn = (prevGroup: CardColumn, nextGroup: CardColumn, indexFrom: number, indexTo: number): void => {\n        const movedCard = prevGroup[indexFrom];\n        const replacedCard = nextGroup[indexTo];\n\n        const indexFromArray = this._cardsArray.findIndex((card) => card.fdCardDef === movedCard.fdCardDef);\n        const indexToArray = this._cardsArray.findIndex((card) => card.fdCardDef === replacedCard.fdCardDef);\n\n        this._processDragDrop(indexFromArray, indexToArray, movedCard, replacedCard);\n    };\n\n    /** @hidden */\n    _setPlaceholderStyle(value: boolean): void {\n        this._placeholderMargin = value ? { 'margin-bottom': '1rem' } : {};\n    }\n\n    /** @hidden Arranges cards on drop of dragged card */\n    private _processDragDrop(\n        prevIndex: number,\n        newIndex: number,\n        prevCard: CardDefinitionDirective,\n        newCard: CardDefinitionDirective\n    ): void {\n        // moveItemInArray from CDK won't work as it changes order of other cards\n        const replacedCard = this._cardsArray[newIndex];\n        this._cardsArray[newIndex] = this._cardsArray[prevIndex];\n        this._cardsArray[prevIndex] = replacedCard;\n\n        adjustCardRank(prevCard, newCard);\n\n        this.cardDraggedDropped.emit({\n            previousIndex: prevIndex,\n            currentIndex: newIndex,\n            layoutColumns: this._numberOfColumns,\n            items: this._cards.toArray()\n        });\n\n        this._updateColumns();\n    }\n\n    /** @hidden */\n    private _accessibilitySetup(): void {\n        this._keyboardEventsManager = new FocusKeyManager(this._cardContainers).withWrap();\n    }\n\n    /** @hidden Rtl change subscription */\n    private _subscribeToRtl(): void {\n        this._rtlService?.rtl.pipe(takeUntil(this._onDestroy$)).subscribe((isRtl) => {\n            this._dir = isRtl ? 'rtl' : 'ltr';\n            this._changeDetector.detectChanges();\n        });\n    }\n\n    /** @hidden Listen window resize and distribute cards on column change */\n    private _listenOnResize(): void {\n        resizeObservable(this._layout.nativeElement)\n            .pipe(debounceTime(60), takeUntil(this._onDestroy$))\n            .subscribe(() => this.updateLayout());\n    }\n\n    /** @hidden Listen card change and distribute cards on column change */\n    private _listenOnCardsChange(): void {\n        this._cards.changes.pipe(delay(0)).subscribe(() => {\n            this._processCards();\n            this._updateColumns();\n        });\n    }\n\n    /** @hidden Renders layout on column changes */\n    private _updateColumns(): void {\n        this._setCardColumns();\n        this._setColumnsWidth(false);\n        this._calculateContainerHeight();\n    }\n\n    /** @hidden */\n    private _processCards(): void {\n        this._cardsArray = this._cards\n            .toArray()\n            .sort((firstCard, secondCard) => firstCard.fdCardDef - secondCard.fdCardDef);\n\n        this.updateLayout();\n    }\n\n    /** @hidden Distribute cards among columns to arrange them in \"Z\" flow */\n    private _setCardColumns(): void {\n        this._groupIndexes = new Map<number, number>();\n        this._itemIndexes = new Map<number, number>();\n        this._singleItemColumns = new Set<number>();\n\n        const columns: CardColumn[] = new Array(this._numberOfColumns).fill(0).map(() => new Array(0));\n\n        this._cardsArray.forEach((card, i) => {\n            const currColumnIndex = i % this._numberOfColumns;\n            const itemIndex = columns[currColumnIndex].length;\n\n            columns[currColumnIndex].push(card);\n\n            this._groupIndexes.set(card.fdCardDef, currColumnIndex);\n            this._itemIndexes.set(card.fdCardDef, itemIndex);\n        });\n\n        this._cardColumns = columns;\n\n        this._cardColumns.forEach((column) => {\n            if (column.length > 0 && column.length < 2) {\n                this._singleItemColumns.add(column[0].fdCardDef);\n            }\n        });\n    }\n\n    /** @hidden */\n    private _setColumnsWidth(detectChanges = true): void {\n        this._columnsWidth = new Map();\n\n        const configPresent =\n            this.columnsWidthConfig &&\n            typeof this.columnsWidthConfig === 'object' &&\n            Object.keys(this.columnsWidthConfig).length;\n\n        if (!configPresent || !this._layout || this._numberOfColumns === 1) {\n            return;\n        }\n\n        const fixedWidthModifiers = fixWidthModifiers(this.columnsWidthConfig, this._numberOfColumns);\n        const totalWidthModifiers = fixedWidthModifiers.reduce((sum, width) => (sum += width), 0);\n        const freeSpace = this._availableWidth - this.cardMinimumWidth * this._numberOfColumns;\n\n        this._cardColumns.forEach((column, index) => {\n            const columnWidth = Math.round(\n                this.cardMinimumWidth + (freeSpace / totalWidthModifiers) * fixedWidthModifiers[index]\n            );\n\n            column.forEach((card) => this._columnsWidth.set(card.fdCardDef, columnWidth));\n        });\n\n        if (detectChanges) {\n            this._changeDetector.detectChanges();\n        }\n    }\n\n    /** @hidden Calculate container height basing on the card wrapper columns */\n    private _calculateContainerHeight(additionalSpace: number = 0): void {\n        this._changeDetector.detectChanges();\n\n        const wrapperColumns = this._cardColumns.map((column) =>\n            column\n                .map((card) => this._cardWrappers.find((wrapper) => wrapper.getSortedItems()[0].data === card)?.element)\n                .filter((v): v is ElementRef<HTMLElement> => !!v)\n        );\n\n        const columnsHeights = wrapperColumns\n            .map((column) => column.map((card) => card.nativeElement.getBoundingClientRect().height))\n            .map((column) => column.reduce((height, cardHeight) => (height += cardHeight), 0));\n\n        // +4px because it's the top & bottom borders of card placeholder\n        this._containerHeight = Math.max(...columnsHeights) + 4 + additionalSpace;\n\n        this._changeDetector.detectChanges();\n    }\n}\n\n/** @hidden */\nfunction fixWidthModifiers(config: ColumnsWidthConfig, numberOfColumns: number): number[] {\n    const modifiers = new Array(numberOfColumns).fill(0);\n\n    return modifiers.map((_, index) => {\n        const columnWidthModifier = config[index + 1];\n\n        if (!columnWidthModifier || columnWidthModifier < 0) {\n            return 0;\n        }\n\n        return columnWidthModifier;\n    });\n}\n\n/** @hidden Returns number of columns that can fit in current available width for fd-card-layout */\nfunction getNumberOfColumns(containerWidth: number, cardWidth: number): number {\n    containerWidth = containerWidth || 1;\n    cardWidth = cardWidth || 1;\n\n    const numberOfCardsWithNoGap = Math.max(Math.floor(containerWidth / cardWidth), 1); // Example: 960 / 320 = 3\n    const requiredWidthWithGap = numberOfCardsWithNoGap * cardWidth + (numberOfCardsWithNoGap - 1) * CARD_GAP_WIDTH;\n    const columnCount = requiredWidthWithGap > containerWidth ? numberOfCardsWithNoGap - 1 : numberOfCardsWithNoGap;\n\n    return Math.max(columnCount, 1);\n}\n\n/** @hidden Method to update rank after cards are dragged */\nfunction adjustCardRank(draggedCard: CardDefinitionDirective, replacedCard: CardDefinitionDirective): void {\n    const draggedCardRank = draggedCard.fdCardDef;\n    draggedCard.fdCardDef = replacedCard.fdCardDef;\n    replacedCard.fdCardDef = draggedCardRank;\n}\n","<div\n    #layout\n    cdkDropListGroup\n    fdDndKeyboardGroup\n    class=\"fd-fixed-card-layout__card-layout fd-fixed-card-layout__card-layout--columns-{{ this._numberOfColumns }}\"\n    [style.height]=\"_containerHeight + 'px'\"\n    [groups]=\"_cardColumns\"\n    orientation=\"horizontal\"\n    [customMoveFn]=\"_customMoveFn\"\n    [customTransferFn]=\"_customTransferFn\"\n    [disableKeyboardDragDrop]=\"disableDragDrop\"\n    [cdkDropListGroupDisabled]=\"disableDragDrop\"\n    [attr.dir]=\"_dir\"\n>\n    <div\n        #dropList\n        *ngFor=\"let card of _cardsArray; let cardIndex = index\"\n        cdkDropList\n        cdkDropListSortingDisabled\n        class=\"fd-fixed-card-layout__card\"\n        [class.fd-fixed-card-layout__card--single]=\"_singleItemColumns.has(card.fdCardDef)\"\n        [style.min-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [style.max-width.px]=\"_columnsWidth.get(card.fdCardDef)\"\n        [cdkDropListData]=\"cardIndex\"\n        [cdkDropListEnterPredicate]=\"_enterPredicate\"\n        (cdkDropListEntered)=\"_onDropListEntered($event)\"\n        (cdkDropListExited)=\"_onDropListExited()\"\n    >\n        <div\n            cdkDrag\n            fdDndKeyboardItem\n            tabindex=\"0\"\n            cdkDragPreviewClass=\"fd-fixed-card-layout__card-preview\"\n            [cdkDragData]=\"card\"\n            [cdkDragStartDelay]=\"dragStartDelay\"\n            [itemIndex]=\"_itemIndexes.get(card.fdCardDef)!\"\n            [groupIndex]=\"_groupIndexes.get(card.fdCardDef)!\"\n            (cdkDragDropped)=\"_onDragDropped($event)\"\n            (cdkDragStarted)=\"_setPlaceholderStyle(false)\"\n        >\n            <fd-fixed-card-layout-item>\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"> </ng-container>\n            </fd-fixed-card-layout-item>\n\n            <div *cdkDragPlaceholder class=\"fd-fixed-card-layout__card-placeholder\" [style]=\"_placeholderMargin\">\n                <ng-container *ngTemplateOutlet=\"card?.template || null\"></ng-container>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngFor=\"let column of _cardColumns; let last = last; let index = index\">\n        <div *ngIf=\"!last\" class=\"fd-fixed-card-layout__clearfix\" [style.order]=\"index + 1\"></div>\n    </ng-container>\n</div>\n","import { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FixedCardLayoutItemComponent } from './fixed-card-layout-item/fixed-card-layout-item.component';\nimport { DragAndDropModule } from '@fundamental-ngx/core/utils';\nimport { CardDefinitionDirective, FixedCardLayoutComponent } from './fixed-card-layout.component';\n\n@NgModule({\n    declarations: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent],\n    imports: [CommonModule, DragDropModule, DragAndDropModule],\n    exports: [FixedCardLayoutComponent, CardDefinitionDirective, FixedCardLayoutItemComponent]\n})\nexport class FixedCardLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/fundamental-ngx-core-input-group.mjs

@@ -364,7 +364,7 @@ InputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             multi: true
         },
         registerFormItemControl(InputGroupComponent)
-    ], queries: [{ propertyName: "inputElement", first: true, predicate: InputGroupInputDirective, descendants: true }, { propertyName: "addOnElement", first: true, predicate: InputGroupAddOnDirective, descendants: true }], viewQueries: [{ propertyName: "localInputElement", first: true, predicate: InputGroupInputDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [compact]=\"compact\"\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [compact]=\"compact\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"input\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [compact]=\"compact\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [compact]=\"compact\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\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-input{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;width:100%;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;overflow:hidden;appearance:none;-moz-appearance:none;-webkit-appearance:none}.fd-input:before,.fd-input:after{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input::-ms-clear{display:none}.fd-input:hover,.fd-input.is-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-input:focus,.fd-input.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input[aria-expanded=true],.fd-input.is-expanded{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{min-width:2rem;height:1.625rem;margin:.1875rem 0;padding:0 .5rem;box-sizing:border-box}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-outer-spin-button,.fd-input--no-number-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success:hover,.fd-input.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success:focus,.fd-input.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input.is-success:focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success.is-focus.is-hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error:hover,.fd-input.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error:focus,.fd-input.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input.is-error:focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error.is-focus.is-hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning:hover,.fd-input.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning:focus,.fd-input.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-warning:focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning.is-focus.is-hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert:hover,.fd-input.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert:focus,.fd-input.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-alert:focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert.is-focus.is-hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information:hover,.fd-input.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input.is-information:focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information.is-focus.is-hover{box-shadow:none}.fd-input.is-error,.fd-input.is-warning,.fd-input.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder,.fd-input.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error:focus,.fd-input.is-error.is-focus,.fd-input.is-warning:focus,.fd-input.is-warning.is-focus,.fd-input.is-alert:focus,.fd-input.is-alert.is-focus,.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input[aria-disabled=true],.fd-input.is-disabled,.fd-input:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input[aria-disabled=true]::placeholder,.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true],.fd-input.is-readonly,.fd-input[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input[aria-readonly=true]::placeholder,.fd-input.is-readonly::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true]:hover,.fd-input[aria-readonly=true].is-hover,.fd-input.is-readonly:hover,.fd-input.is-readonly.is-hover,.fd-input[readonly]:hover,.fd-input[readonly].is-hover{box-shadow:none}.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true].is-focus,.fd-input.is-readonly:focus,.fd-input.is-readonly.is-focus,.fd-input[readonly]:focus,.fd-input[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}/*!\n * Fundamental Library Styles v0.24.1-rc.1\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-input-group+(--inline, --control)\n    .fd-input-group__addon+(--button)\n*/.fd-input-group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;padding:0;width:100%;height:auto;display:flex;overflow:hidden}.fd-input-group:before,.fd-input-group:after{box-sizing:inherit;font-size:inherit}.fd-input-group::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input-group::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input-group::-ms-clear{display:none}.fd-input-group:hover,.fd-input-group.is-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-input-group:focus,.fd-input-group.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input-group.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input-group.is-success:hover,.fd-input-group.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input-group.is-success:focus,.fd-input-group.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input-group.is-success:focus:hover,.fd-input-group.is-success:focus.is-hover,.fd-input-group.is-success.is-focus:hover,.fd-input-group.is-success.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input-group.is-error:hover,.fd-input-group.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input-group.is-error:focus:hover,.fd-input-group.is-error:focus.is-hover,.fd-input-group.is-error.is-focus:hover,.fd-input-group.is-error.is-focus.is-hover{box-shadow:none}.fd-input-group.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-warning:hover,.fd-input-group.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-warning:focus:hover,.fd-input-group.is-warning:focus.is-hover,.fd-input-group.is-warning.is-focus:hover,.fd-input-group.is-warning.is-focus.is-hover{box-shadow:none}.fd-input-group.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-alert:hover,.fd-input-group.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-alert:focus:hover,.fd-input-group.is-alert:focus.is-hover,.fd-input-group.is-alert.is-focus:hover,.fd-input-group.is-alert.is-focus.is-hover{box-shadow:none}.fd-input-group.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input-group.is-information:hover,.fd-input-group.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input-group.is-information:focus:hover,.fd-input-group.is-information:focus.is-hover,.fd-input-group.is-information.is-focus:hover,.fd-input-group.is-information.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error,.fd-input-group.is-warning,.fd-input-group.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error::placeholder,.fd-input-group.is-warning::placeholder,.fd-input-group.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus,.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus,.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus,.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input-group.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input-group[aria-disabled=true],.fd-input-group.is-disabled,.fd-input-group:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input-group[aria-disabled=true]::placeholder,.fd-input-group.is-disabled::placeholder,.fd-input-group:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true],.fd-input-group.is-readonly,.fd-input-group[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input-group[aria-readonly=true]::placeholder,.fd-input-group.is-readonly::placeholder,.fd-input-group[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true]:hover,.fd-input-group[aria-readonly=true].is-hover,.fd-input-group.is-readonly:hover,.fd-input-group.is-readonly.is-hover,.fd-input-group[readonly]:hover,.fd-input-group[readonly].is-hover{box-shadow:none}.fd-input-group[aria-readonly=true]:focus,.fd-input-group[aria-readonly=true].is-focus,.fd-input-group.is-readonly:focus,.fd-input-group.is-readonly.is-focus,.fd-input-group[readonly]:focus,.fd-input-group[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-input-group .fd-input-group__button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;z-index:auto!important;position:static!important;border-radius:var(--fdInput_Group_Button_Border_Raduis);background:var(--fdInput_Group_Button_Background);color:var(--fdInput_Group_Button_Text_Color);border-left:var(--sapButton_BorderWidth) solid transparent}[dir=rtl] .fd-input-group .fd-input-group__button,.fd-input-group .fd-input-group__button[dir=rtl]{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-input-group .fd-input-group__button:before{display:none!important}.fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button.is-hover{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Hover_Background);color:var(--fdInput_Group_Button_Hover_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button:hover[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-hover,.fd-input-group .fd-input-group__button.is-hover[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button.is-active{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Active_Background);color:var(--fdInput_Group_Button_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button:active[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-active,.fd-input-group .fd-input-group__button.is-active[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group.is-success .fd-input-group__button:hover,.fd-input-group.is-success .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-success .fd-input-group__button:active,.fd-input-group.is-success .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Success_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:hover,.fd-input-group.is-error .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:active,.fd-input-group.is-error .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Error_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:hover,.fd-input-group.is-warning .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:active,.fd-input-group.is-warning .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:hover,.fd-input-group.is-alert .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:active,.fd-input-group.is-alert .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:hover,.fd-input-group.is-information .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:active,.fd-input-group.is-information .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Information_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group .fd-input-group__input{border:none;flex:1 1 10rem;background:none;background-color:transparent;padding-left:.25rem;padding-right:.25rem;text-shadow:var(--fdInputGroup_Text_Shadow)}.fd-input-group .fd-input-group__input:nth-child(n+1){margin:0}.fd-input-group .fd-input-group__input:hover,.fd-input-group .fd-input-group__input.is-hover{box-shadow:none}.fd-input-group .fd-input-group__input:focus,.fd-input-group .fd-input-group__input.is-focus{z-index:5;outline:none;box-shadow:none;background:none;border-radius:0}.fd-input-group .fd-input-group__input:nth-child(1){padding-left:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-child(1),.fd-input-group .fd-input-group__input:nth-child(1)[dir=rtl]{padding-right:.625rem;padding-left:0}.fd-input-group .fd-input-group__input:nth-last-child(1){padding-right:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-last-child(1),.fd-input-group .fd-input-group__input:nth-last-child(1)[dir=rtl]{padding-right:0;padding-left:.625rem}.fd-input-group--inline{display:inline-flex;vertical-align:bottom;width:auto}.fd-input-group__addon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapContent_NonInteractiveIconColor);background:none!important;font-size:var(--sapFontLargeSize);min-width:2.25rem;min-height:2.25rem;padding-left:.625rem;padding-right:.625rem}.fd-input-group__addon:before,.fd-input-group__addon:after{box-sizing:inherit;font-size:inherit}.fd-input-group__addon span[class*=sap-icon--]:before{font-size:var(--sapFontLargeSize)}.fd-input-group__addon--compact{min-width:2rem;min-height:1.625rem}.fd-input-group__addon--readonly{opacity:.4}.fd-input-group__addon--button{padding:0;overflow:visible}.fd-input-group--control[aria-expanded=true]{margin-bottom:0}.fd-input-group .fd-textarea{resize:vertical}.fd-input-group *[aria-disabled=true],.fd-input-group *.is-disabled,.fd-input-group *:disabled{opacity:1}.fd-input-group[readonly],.fd-input-group.is-readonly{overflow:visible}.fd-input-group .fd-tokenizer,.fd-input-group .fd-tokenizer:hover,.fd-input-group .fd-tokenizer.is-hover{box-shadow:none;background:none;background-color:transparent}.fd-input-group .fd-tokenizer:focus,.fd-input-group .fd-tokenizer.is-focus{z-index:5;box-shadow:none;background:none;background-color:transparent;outline:none}fd-input-group .fd-input-group__addon--button.fd-input-group__addon--textarea>*{max-height:100%;height:100%}\n"], components: [{ type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "compact", "type", "state", "button"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class", "compact"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "inputElement", first: true, predicate: InputGroupInputDirective, descendants: true }, { propertyName: "addOnElement", first: true, predicate: InputGroupAddOnDirective, descendants: true }], viewQueries: [{ propertyName: "localInputElement", first: true, predicate: InputGroupInputDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [compact]=\"compact\"\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [compact]=\"compact\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"_inputId\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [compact]=\"compact\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [compact]=\"compact\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\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-input{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;width:100%;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;overflow:hidden;appearance:none;-moz-appearance:none;-webkit-appearance:none}.fd-input:before,.fd-input:after{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input::-ms-clear{display:none}.fd-input:hover,.fd-input.is-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-input:focus,.fd-input.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input[aria-expanded=true],.fd-input.is-expanded{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{min-width:2rem;height:1.625rem;margin:.1875rem 0;padding:0 .5rem;box-sizing:border-box}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-outer-spin-button,.fd-input--no-number-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success:hover,.fd-input.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success:focus,.fd-input.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input.is-success:focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success.is-focus.is-hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error:hover,.fd-input.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error:focus,.fd-input.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input.is-error:focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error.is-focus.is-hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning:hover,.fd-input.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning:focus,.fd-input.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-warning:focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning.is-focus.is-hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert:hover,.fd-input.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert:focus,.fd-input.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-alert:focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert.is-focus.is-hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information:hover,.fd-input.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input.is-information:focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information.is-focus.is-hover{box-shadow:none}.fd-input.is-error,.fd-input.is-warning,.fd-input.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder,.fd-input.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error:focus,.fd-input.is-error.is-focus,.fd-input.is-warning:focus,.fd-input.is-warning.is-focus,.fd-input.is-alert:focus,.fd-input.is-alert.is-focus,.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input[aria-disabled=true],.fd-input.is-disabled,.fd-input:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input[aria-disabled=true]::placeholder,.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true],.fd-input.is-readonly,.fd-input[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input[aria-readonly=true]::placeholder,.fd-input.is-readonly::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true]:hover,.fd-input[aria-readonly=true].is-hover,.fd-input.is-readonly:hover,.fd-input.is-readonly.is-hover,.fd-input[readonly]:hover,.fd-input[readonly].is-hover{box-shadow:none}.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true].is-focus,.fd-input.is-readonly:focus,.fd-input.is-readonly.is-focus,.fd-input[readonly]:focus,.fd-input[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}/*!\n * Fundamental Library Styles v0.24.1-rc.1\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-input-group+(--inline, --control)\n    .fd-input-group__addon+(--button)\n*/.fd-input-group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;padding:0;width:100%;height:auto;display:flex;overflow:hidden}.fd-input-group:before,.fd-input-group:after{box-sizing:inherit;font-size:inherit}.fd-input-group::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input-group::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input-group::-ms-clear{display:none}.fd-input-group:hover,.fd-input-group.is-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-input-group:focus,.fd-input-group.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input-group.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input-group.is-success:hover,.fd-input-group.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input-group.is-success:focus,.fd-input-group.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input-group.is-success:focus:hover,.fd-input-group.is-success:focus.is-hover,.fd-input-group.is-success.is-focus:hover,.fd-input-group.is-success.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input-group.is-error:hover,.fd-input-group.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input-group.is-error:focus:hover,.fd-input-group.is-error:focus.is-hover,.fd-input-group.is-error.is-focus:hover,.fd-input-group.is-error.is-focus.is-hover{box-shadow:none}.fd-input-group.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-warning:hover,.fd-input-group.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-warning:focus:hover,.fd-input-group.is-warning:focus.is-hover,.fd-input-group.is-warning.is-focus:hover,.fd-input-group.is-warning.is-focus.is-hover{box-shadow:none}.fd-input-group.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-alert:hover,.fd-input-group.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-alert:focus:hover,.fd-input-group.is-alert:focus.is-hover,.fd-input-group.is-alert.is-focus:hover,.fd-input-group.is-alert.is-focus.is-hover{box-shadow:none}.fd-input-group.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input-group.is-information:hover,.fd-input-group.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input-group.is-information:focus:hover,.fd-input-group.is-information:focus.is-hover,.fd-input-group.is-information.is-focus:hover,.fd-input-group.is-information.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error,.fd-input-group.is-warning,.fd-input-group.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error::placeholder,.fd-input-group.is-warning::placeholder,.fd-input-group.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus,.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus,.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus,.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input-group.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input-group[aria-disabled=true],.fd-input-group.is-disabled,.fd-input-group:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input-group[aria-disabled=true]::placeholder,.fd-input-group.is-disabled::placeholder,.fd-input-group:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true],.fd-input-group.is-readonly,.fd-input-group[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input-group[aria-readonly=true]::placeholder,.fd-input-group.is-readonly::placeholder,.fd-input-group[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true]:hover,.fd-input-group[aria-readonly=true].is-hover,.fd-input-group.is-readonly:hover,.fd-input-group.is-readonly.is-hover,.fd-input-group[readonly]:hover,.fd-input-group[readonly].is-hover{box-shadow:none}.fd-input-group[aria-readonly=true]:focus,.fd-input-group[aria-readonly=true].is-focus,.fd-input-group.is-readonly:focus,.fd-input-group.is-readonly.is-focus,.fd-input-group[readonly]:focus,.fd-input-group[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-input-group .fd-input-group__button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;z-index:auto!important;position:static!important;border-radius:var(--fdInput_Group_Button_Border_Raduis);background:var(--fdInput_Group_Button_Background);color:var(--fdInput_Group_Button_Text_Color);border-left:var(--sapButton_BorderWidth) solid transparent}[dir=rtl] .fd-input-group .fd-input-group__button,.fd-input-group .fd-input-group__button[dir=rtl]{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-input-group .fd-input-group__button:before{display:none!important}.fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button.is-hover{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Hover_Background);color:var(--fdInput_Group_Button_Hover_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button:hover[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-hover,.fd-input-group .fd-input-group__button.is-hover[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button.is-active{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Active_Background);color:var(--fdInput_Group_Button_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button:active[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-active,.fd-input-group .fd-input-group__button.is-active[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group.is-success .fd-input-group__button:hover,.fd-input-group.is-success .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-success .fd-input-group__button:active,.fd-input-group.is-success .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Success_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:hover,.fd-input-group.is-error .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:active,.fd-input-group.is-error .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Error_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:hover,.fd-input-group.is-warning .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:active,.fd-input-group.is-warning .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:hover,.fd-input-group.is-alert .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:active,.fd-input-group.is-alert .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:hover,.fd-input-group.is-information .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:active,.fd-input-group.is-information .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Information_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group .fd-input-group__input{border:none;flex:1 1 10rem;background:none;background-color:transparent;padding-left:.25rem;padding-right:.25rem;text-shadow:var(--fdInputGroup_Text_Shadow)}.fd-input-group .fd-input-group__input:nth-child(n+1){margin:0}.fd-input-group .fd-input-group__input:hover,.fd-input-group .fd-input-group__input.is-hover{box-shadow:none}.fd-input-group .fd-input-group__input:focus,.fd-input-group .fd-input-group__input.is-focus{z-index:5;outline:none;box-shadow:none;background:none;border-radius:0}.fd-input-group .fd-input-group__input:nth-child(1){padding-left:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-child(1),.fd-input-group .fd-input-group__input:nth-child(1)[dir=rtl]{padding-right:.625rem;padding-left:0}.fd-input-group .fd-input-group__input:nth-last-child(1){padding-right:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-last-child(1),.fd-input-group .fd-input-group__input:nth-last-child(1)[dir=rtl]{padding-right:0;padding-left:.625rem}.fd-input-group--inline{display:inline-flex;vertical-align:bottom;width:auto}.fd-input-group__addon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapContent_NonInteractiveIconColor);background:none!important;font-size:var(--sapFontLargeSize);min-width:2.25rem;min-height:2.25rem;padding-left:.625rem;padding-right:.625rem}.fd-input-group__addon:before,.fd-input-group__addon:after{box-sizing:inherit;font-size:inherit}.fd-input-group__addon span[class*=sap-icon--]:before{font-size:var(--sapFontLargeSize)}.fd-input-group__addon--compact{min-width:2rem;min-height:1.625rem}.fd-input-group__addon--readonly{opacity:.4}.fd-input-group__addon--button{padding:0;overflow:visible}.fd-input-group--control[aria-expanded=true]{margin-bottom:0}.fd-input-group .fd-textarea{resize:vertical}.fd-input-group *[aria-disabled=true],.fd-input-group *.is-disabled,.fd-input-group *:disabled{opacity:1}.fd-input-group[readonly],.fd-input-group.is-readonly{overflow:visible}.fd-input-group .fd-tokenizer,.fd-input-group .fd-tokenizer:hover,.fd-input-group .fd-tokenizer.is-hover{box-shadow:none;background:none;background-color:transparent}.fd-input-group .fd-tokenizer:focus,.fd-input-group .fd-tokenizer.is-focus{z-index:5;box-shadow:none;background:none;background-color:transparent;outline:none}fd-input-group .fd-input-group__addon--button.fd-input-group__addon--textarea>*{max-height:100%;height:100%}fd-input-group .fd-button.fd-button--transparent{background:transparent}\n"], components: [{ type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "compact", "type", "state", "button"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class", "compact"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: InputGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-input-group', providers: [
@@ -374,7 +374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             multi: true
                         },
                         registerFormItemControl(InputGroupComponent)
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [compact]=\"compact\"\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [compact]=\"compact\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"input\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [compact]=\"compact\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [compact]=\"compact\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\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-input{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;width:100%;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;overflow:hidden;appearance:none;-moz-appearance:none;-webkit-appearance:none}.fd-input:before,.fd-input:after{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input::-ms-clear{display:none}.fd-input:hover,.fd-input.is-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-input:focus,.fd-input.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input[aria-expanded=true],.fd-input.is-expanded{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{min-width:2rem;height:1.625rem;margin:.1875rem 0;padding:0 .5rem;box-sizing:border-box}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-outer-spin-button,.fd-input--no-number-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success:hover,.fd-input.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success:focus,.fd-input.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input.is-success:focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success.is-focus.is-hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error:hover,.fd-input.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error:focus,.fd-input.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input.is-error:focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error.is-focus.is-hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning:hover,.fd-input.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning:focus,.fd-input.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-warning:focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning.is-focus.is-hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert:hover,.fd-input.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert:focus,.fd-input.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-alert:focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert.is-focus.is-hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information:hover,.fd-input.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input.is-information:focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information.is-focus.is-hover{box-shadow:none}.fd-input.is-error,.fd-input.is-warning,.fd-input.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder,.fd-input.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error:focus,.fd-input.is-error.is-focus,.fd-input.is-warning:focus,.fd-input.is-warning.is-focus,.fd-input.is-alert:focus,.fd-input.is-alert.is-focus,.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input[aria-disabled=true],.fd-input.is-disabled,.fd-input:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input[aria-disabled=true]::placeholder,.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true],.fd-input.is-readonly,.fd-input[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input[aria-readonly=true]::placeholder,.fd-input.is-readonly::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true]:hover,.fd-input[aria-readonly=true].is-hover,.fd-input.is-readonly:hover,.fd-input.is-readonly.is-hover,.fd-input[readonly]:hover,.fd-input[readonly].is-hover{box-shadow:none}.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true].is-focus,.fd-input.is-readonly:focus,.fd-input.is-readonly.is-focus,.fd-input[readonly]:focus,.fd-input[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}/*!\n * Fundamental Library Styles v0.24.1-rc.1\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-input-group+(--inline, --control)\n    .fd-input-group__addon+(--button)\n*/.fd-input-group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;padding:0;width:100%;height:auto;display:flex;overflow:hidden}.fd-input-group:before,.fd-input-group:after{box-sizing:inherit;font-size:inherit}.fd-input-group::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input-group::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input-group::-ms-clear{display:none}.fd-input-group:hover,.fd-input-group.is-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-input-group:focus,.fd-input-group.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input-group.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input-group.is-success:hover,.fd-input-group.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input-group.is-success:focus,.fd-input-group.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input-group.is-success:focus:hover,.fd-input-group.is-success:focus.is-hover,.fd-input-group.is-success.is-focus:hover,.fd-input-group.is-success.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input-group.is-error:hover,.fd-input-group.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input-group.is-error:focus:hover,.fd-input-group.is-error:focus.is-hover,.fd-input-group.is-error.is-focus:hover,.fd-input-group.is-error.is-focus.is-hover{box-shadow:none}.fd-input-group.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-warning:hover,.fd-input-group.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-warning:focus:hover,.fd-input-group.is-warning:focus.is-hover,.fd-input-group.is-warning.is-focus:hover,.fd-input-group.is-warning.is-focus.is-hover{box-shadow:none}.fd-input-group.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-alert:hover,.fd-input-group.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-alert:focus:hover,.fd-input-group.is-alert:focus.is-hover,.fd-input-group.is-alert.is-focus:hover,.fd-input-group.is-alert.is-focus.is-hover{box-shadow:none}.fd-input-group.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input-group.is-information:hover,.fd-input-group.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input-group.is-information:focus:hover,.fd-input-group.is-information:focus.is-hover,.fd-input-group.is-information.is-focus:hover,.fd-input-group.is-information.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error,.fd-input-group.is-warning,.fd-input-group.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error::placeholder,.fd-input-group.is-warning::placeholder,.fd-input-group.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus,.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus,.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus,.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input-group.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input-group[aria-disabled=true],.fd-input-group.is-disabled,.fd-input-group:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input-group[aria-disabled=true]::placeholder,.fd-input-group.is-disabled::placeholder,.fd-input-group:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true],.fd-input-group.is-readonly,.fd-input-group[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input-group[aria-readonly=true]::placeholder,.fd-input-group.is-readonly::placeholder,.fd-input-group[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true]:hover,.fd-input-group[aria-readonly=true].is-hover,.fd-input-group.is-readonly:hover,.fd-input-group.is-readonly.is-hover,.fd-input-group[readonly]:hover,.fd-input-group[readonly].is-hover{box-shadow:none}.fd-input-group[aria-readonly=true]:focus,.fd-input-group[aria-readonly=true].is-focus,.fd-input-group.is-readonly:focus,.fd-input-group.is-readonly.is-focus,.fd-input-group[readonly]:focus,.fd-input-group[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-input-group .fd-input-group__button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;z-index:auto!important;position:static!important;border-radius:var(--fdInput_Group_Button_Border_Raduis);background:var(--fdInput_Group_Button_Background);color:var(--fdInput_Group_Button_Text_Color);border-left:var(--sapButton_BorderWidth) solid transparent}[dir=rtl] .fd-input-group .fd-input-group__button,.fd-input-group .fd-input-group__button[dir=rtl]{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-input-group .fd-input-group__button:before{display:none!important}.fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button.is-hover{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Hover_Background);color:var(--fdInput_Group_Button_Hover_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button:hover[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-hover,.fd-input-group .fd-input-group__button.is-hover[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button.is-active{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Active_Background);color:var(--fdInput_Group_Button_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button:active[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-active,.fd-input-group .fd-input-group__button.is-active[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group.is-success .fd-input-group__button:hover,.fd-input-group.is-success .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-success .fd-input-group__button:active,.fd-input-group.is-success .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Success_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:hover,.fd-input-group.is-error .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:active,.fd-input-group.is-error .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Error_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:hover,.fd-input-group.is-warning .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:active,.fd-input-group.is-warning .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:hover,.fd-input-group.is-alert .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:active,.fd-input-group.is-alert .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:hover,.fd-input-group.is-information .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:active,.fd-input-group.is-information .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Information_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group .fd-input-group__input{border:none;flex:1 1 10rem;background:none;background-color:transparent;padding-left:.25rem;padding-right:.25rem;text-shadow:var(--fdInputGroup_Text_Shadow)}.fd-input-group .fd-input-group__input:nth-child(n+1){margin:0}.fd-input-group .fd-input-group__input:hover,.fd-input-group .fd-input-group__input.is-hover{box-shadow:none}.fd-input-group .fd-input-group__input:focus,.fd-input-group .fd-input-group__input.is-focus{z-index:5;outline:none;box-shadow:none;background:none;border-radius:0}.fd-input-group .fd-input-group__input:nth-child(1){padding-left:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-child(1),.fd-input-group .fd-input-group__input:nth-child(1)[dir=rtl]{padding-right:.625rem;padding-left:0}.fd-input-group .fd-input-group__input:nth-last-child(1){padding-right:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-last-child(1),.fd-input-group .fd-input-group__input:nth-last-child(1)[dir=rtl]{padding-right:0;padding-left:.625rem}.fd-input-group--inline{display:inline-flex;vertical-align:bottom;width:auto}.fd-input-group__addon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapContent_NonInteractiveIconColor);background:none!important;font-size:var(--sapFontLargeSize);min-width:2.25rem;min-height:2.25rem;padding-left:.625rem;padding-right:.625rem}.fd-input-group__addon:before,.fd-input-group__addon:after{box-sizing:inherit;font-size:inherit}.fd-input-group__addon span[class*=sap-icon--]:before{font-size:var(--sapFontLargeSize)}.fd-input-group__addon--compact{min-width:2rem;min-height:1.625rem}.fd-input-group__addon--readonly{opacity:.4}.fd-input-group__addon--button{padding:0;overflow:visible}.fd-input-group--control[aria-expanded=true]{margin-bottom:0}.fd-input-group .fd-textarea{resize:vertical}.fd-input-group *[aria-disabled=true],.fd-input-group *.is-disabled,.fd-input-group *:disabled{opacity:1}.fd-input-group[readonly],.fd-input-group.is-readonly{overflow:visible}.fd-input-group .fd-tokenizer,.fd-input-group .fd-tokenizer:hover,.fd-input-group .fd-tokenizer.is-hover{box-shadow:none;background:none;background-color:transparent}.fd-input-group .fd-tokenizer:focus,.fd-input-group .fd-tokenizer.is-focus{z-index:5;box-shadow:none;background:none;background-color:transparent;outline:none}fd-input-group .fd-input-group__addon--button.fd-input-group__addon--textarea>*{max-height:100%;height:100%}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [compact]=\"compact\"\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [compact]=\"compact\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"_inputId\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [compact]=\"compact\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [compact]=\"compact\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\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-input{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;width:100%;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;overflow:hidden;appearance:none;-moz-appearance:none;-webkit-appearance:none}.fd-input:before,.fd-input:after{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input::-ms-clear{display:none}.fd-input:hover,.fd-input.is-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-input:focus,.fd-input.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input[aria-expanded=true],.fd-input.is-expanded{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{min-width:2rem;height:1.625rem;margin:.1875rem 0;padding:0 .5rem;box-sizing:border-box}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-outer-spin-button,.fd-input--no-number-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success:hover,.fd-input.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success:focus,.fd-input.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input.is-success:focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success.is-focus.is-hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error:hover,.fd-input.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error:focus,.fd-input.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input.is-error:focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error.is-focus.is-hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning:hover,.fd-input.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning:focus,.fd-input.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-warning:focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning.is-focus.is-hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert:hover,.fd-input.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert:focus,.fd-input.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-alert:focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert.is-focus.is-hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information:hover,.fd-input.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input.is-information:focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information.is-focus.is-hover{box-shadow:none}.fd-input.is-error,.fd-input.is-warning,.fd-input.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder,.fd-input.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error:focus,.fd-input.is-error.is-focus,.fd-input.is-warning:focus,.fd-input.is-warning.is-focus,.fd-input.is-alert:focus,.fd-input.is-alert.is-focus,.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input[aria-disabled=true],.fd-input.is-disabled,.fd-input:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input[aria-disabled=true]::placeholder,.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true],.fd-input.is-readonly,.fd-input[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input[aria-readonly=true]::placeholder,.fd-input.is-readonly::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true]:hover,.fd-input[aria-readonly=true].is-hover,.fd-input.is-readonly:hover,.fd-input.is-readonly.is-hover,.fd-input[readonly]:hover,.fd-input[readonly].is-hover{box-shadow:none}.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true].is-focus,.fd-input.is-readonly:focus,.fd-input.is-readonly.is-focus,.fd-input[readonly]:focus,.fd-input[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}/*!\n * Fundamental Library Styles v0.24.1-rc.1\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-input-group+(--inline, --control)\n    .fd-input-group__addon+(--button)\n*/.fd-input-group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;padding:0;width:100%;height:auto;display:flex;overflow:hidden}.fd-input-group:before,.fd-input-group:after{box-sizing:inherit;font-size:inherit}.fd-input-group::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input-group::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input-group::-ms-clear{display:none}.fd-input-group:hover,.fd-input-group.is-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-input-group:focus,.fd-input-group.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input-group.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input-group.is-success:hover,.fd-input-group.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input-group.is-success:focus,.fd-input-group.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input-group.is-success:focus:hover,.fd-input-group.is-success:focus.is-hover,.fd-input-group.is-success.is-focus:hover,.fd-input-group.is-success.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input-group.is-error:hover,.fd-input-group.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input-group.is-error:focus:hover,.fd-input-group.is-error:focus.is-hover,.fd-input-group.is-error.is-focus:hover,.fd-input-group.is-error.is-focus.is-hover{box-shadow:none}.fd-input-group.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-warning:hover,.fd-input-group.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-warning:focus:hover,.fd-input-group.is-warning:focus.is-hover,.fd-input-group.is-warning.is-focus:hover,.fd-input-group.is-warning.is-focus.is-hover{box-shadow:none}.fd-input-group.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-alert:hover,.fd-input-group.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-alert:focus:hover,.fd-input-group.is-alert:focus.is-hover,.fd-input-group.is-alert.is-focus:hover,.fd-input-group.is-alert.is-focus.is-hover{box-shadow:none}.fd-input-group.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input-group.is-information:hover,.fd-input-group.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input-group.is-information:focus:hover,.fd-input-group.is-information:focus.is-hover,.fd-input-group.is-information.is-focus:hover,.fd-input-group.is-information.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error,.fd-input-group.is-warning,.fd-input-group.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error::placeholder,.fd-input-group.is-warning::placeholder,.fd-input-group.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus,.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus,.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus,.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input-group.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input-group[aria-disabled=true],.fd-input-group.is-disabled,.fd-input-group:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input-group[aria-disabled=true]::placeholder,.fd-input-group.is-disabled::placeholder,.fd-input-group:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true],.fd-input-group.is-readonly,.fd-input-group[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input-group[aria-readonly=true]::placeholder,.fd-input-group.is-readonly::placeholder,.fd-input-group[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true]:hover,.fd-input-group[aria-readonly=true].is-hover,.fd-input-group.is-readonly:hover,.fd-input-group.is-readonly.is-hover,.fd-input-group[readonly]:hover,.fd-input-group[readonly].is-hover{box-shadow:none}.fd-input-group[aria-readonly=true]:focus,.fd-input-group[aria-readonly=true].is-focus,.fd-input-group.is-readonly:focus,.fd-input-group.is-readonly.is-focus,.fd-input-group[readonly]:focus,.fd-input-group[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-input-group .fd-input-group__button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;z-index:auto!important;position:static!important;border-radius:var(--fdInput_Group_Button_Border_Raduis);background:var(--fdInput_Group_Button_Background);color:var(--fdInput_Group_Button_Text_Color);border-left:var(--sapButton_BorderWidth) solid transparent}[dir=rtl] .fd-input-group .fd-input-group__button,.fd-input-group .fd-input-group__button[dir=rtl]{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-input-group .fd-input-group__button:before{display:none!important}.fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button.is-hover{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Hover_Background);color:var(--fdInput_Group_Button_Hover_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button:hover[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-hover,.fd-input-group .fd-input-group__button.is-hover[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button.is-active{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Active_Background);color:var(--fdInput_Group_Button_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button:active[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-active,.fd-input-group .fd-input-group__button.is-active[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group.is-success .fd-input-group__button:hover,.fd-input-group.is-success .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-success .fd-input-group__button:active,.fd-input-group.is-success .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Success_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:hover,.fd-input-group.is-error .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:active,.fd-input-group.is-error .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Error_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:hover,.fd-input-group.is-warning .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:active,.fd-input-group.is-warning .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:hover,.fd-input-group.is-alert .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:active,.fd-input-group.is-alert .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:hover,.fd-input-group.is-information .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:active,.fd-input-group.is-information .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Information_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group .fd-input-group__input{border:none;flex:1 1 10rem;background:none;background-color:transparent;padding-left:.25rem;padding-right:.25rem;text-shadow:var(--fdInputGroup_Text_Shadow)}.fd-input-group .fd-input-group__input:nth-child(n+1){margin:0}.fd-input-group .fd-input-group__input:hover,.fd-input-group .fd-input-group__input.is-hover{box-shadow:none}.fd-input-group .fd-input-group__input:focus,.fd-input-group .fd-input-group__input.is-focus{z-index:5;outline:none;box-shadow:none;background:none;border-radius:0}.fd-input-group .fd-input-group__input:nth-child(1){padding-left:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-child(1),.fd-input-group .fd-input-group__input:nth-child(1)[dir=rtl]{padding-right:.625rem;padding-left:0}.fd-input-group .fd-input-group__input:nth-last-child(1){padding-right:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-last-child(1),.fd-input-group .fd-input-group__input:nth-last-child(1)[dir=rtl]{padding-right:0;padding-left:.625rem}.fd-input-group--inline{display:inline-flex;vertical-align:bottom;width:auto}.fd-input-group__addon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapContent_NonInteractiveIconColor);background:none!important;font-size:var(--sapFontLargeSize);min-width:2.25rem;min-height:2.25rem;padding-left:.625rem;padding-right:.625rem}.fd-input-group__addon:before,.fd-input-group__addon:after{box-sizing:inherit;font-size:inherit}.fd-input-group__addon span[class*=sap-icon--]:before{font-size:var(--sapFontLargeSize)}.fd-input-group__addon--compact{min-width:2rem;min-height:1.625rem}.fd-input-group__addon--readonly{opacity:.4}.fd-input-group__addon--button{padding:0;overflow:visible}.fd-input-group--control[aria-expanded=true]{margin-bottom:0}.fd-input-group .fd-textarea{resize:vertical}.fd-input-group *[aria-disabled=true],.fd-input-group *.is-disabled,.fd-input-group *:disabled{opacity:1}.fd-input-group[readonly],.fd-input-group.is-readonly{overflow:visible}.fd-input-group .fd-tokenizer,.fd-input-group .fd-tokenizer:hover,.fd-input-group .fd-tokenizer.is-hover{box-shadow:none;background:none;background-color:transparent}.fd-input-group .fd-tokenizer:focus,.fd-input-group .fd-tokenizer.is-focus{z-index:5;box-shadow:none;background:none;background-color:transparent;outline:none}fd-input-group .fd-input-group__addon--button.fd-input-group__addon--textarea>*{max-height:100%;height:100%}fd-input-group .fd-button.fd-button--transparent{background:transparent}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ContentDensityService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { inputTemplate: [{