@fundamental-ngx/platform 0.48.0-rc.2 → 0.48.0-rc.21

package/fesm2022/fundamental-ngx-platform-icon-tab-bar.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, isDevMode, Directive, Input, Output, ViewChild, Component, ViewChildren, ChangeDetectionStrategy, ViewEncapsulation, Optional, NgModule } from '@angular/core';
-import { NgClass, SlicePipe, NgTemplateOutlet } from '@angular/common';
-import * as i1$1 from '@fundamental-ngx/cdk/utils';
-import { KeyUtil, OverflowListDirective, OverflowListItemDirective } from '@fundamental-ngx/cdk/utils';
-import { ButtonComponent } from '@fundamental-ngx/core/button';
-import { IconComponent } from '@fundamental-ngx/core/icon';
 import { Subject, ReplaySubject } from 'rxjs';
 import { take, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { SPACE, ENTER, RIGHT_ARROW, DOWN_ARROW, LEFT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import * as i1$1 from '@fundamental-ngx/cdk/utils';
+import { KeyUtil, OverflowListDirective, OverflowListItemDirective } from '@fundamental-ngx/cdk/utils';
 import { cloneDeep } from 'lodash-es';
+import { NgClass, SlicePipe, NgTemplateOutlet } from '@angular/common';
+import { ButtonComponent } from '@fundamental-ngx/core/button';
+import { IconComponent } from '@fundamental-ngx/core/icon';
 import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
 import * as i1 from '@angular/cdk/drag-drop';
 
@@ -507,11 +507,11 @@ class IconTabBarPopoverComponent extends IconTabBarPopoverBase {
         this.label = 'more';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: IconTabBarPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: IconTabBarPopoverComponent, isStandalone: true, selector: "fdp-icon-tab-bar-popover", inputs: { leftSide: "leftSide", label: "label", showItemLabel: "showItemLabel" }, viewQueries: [{ propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n    <fd-popover-control>\n        <button class=\"fd-icon-tab-bar__overflow\">\n            <span class=\"fd-icon-tab-bar__overflow-text\">{{ label }}</span>\n            <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n        </button>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-icon-tab-bar\">\n        <ul class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\" role=\"list\">\n            @for (item of extraTabs; track item.uId; let idx = $index) {\n                @if (isSeparators) {\n                    <li tabindex=\"-1\" class=\"fd-icon-tab-bar__icon-separator\">\n                        <fd-icon glyph=\"process\"></fd-icon>\n                    </li>\n                }\n                <li\n                    class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n                    role=\"listitem\"\n                    [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n                    [ngClass]=\"item.cssClasses\"\n                    tabindex=\"-1\"\n                >\n                    <a\n                        class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                        #tabItem\n                        [attr.data-flatIndex]=\"item.flatIndex\"\n                        tabindex=\"0\"\n                        (click)=\"_selectItem(item)\"\n                        (keydown)=\"_keyDownHandler($event, item, idx)\"\n                    >\n                        <span class=\"fd-icon-tab-bar__list-item-icon-container\">\n                            <span class=\"fd-list__icon fd-icon-tab-bar__list-item-icon\">\n                                <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                            </span>\n                        </span>\n                        @if (showItemLabel && item.label) {\n                            <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                        }\n                        @if (item.badge) {\n                            <span class=\"fd-icon-tab-bar__badge\"></span>\n                        }\n                        @if (item.counter) {\n                            <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                                >({{ item.counter }})\n                            </span>\n                        }\n                        @if (item.color) {\n                            <div class=\"screenreader-only\">\n                                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                            </div>\n                        }\n                    </a>\n                    @if (item.closable) {\n                        <div class=\"fd-icon-tab-bar__button-container\">\n                            <button\n                                fd-button\n                                class=\"fd-icon-tab-bar__button\"\n                                fdType=\"transparent\"\n                                (click)=\"closeTab.emit(item.uId)\"\n                            >\n                                <fd-icon glyph=\"decline\"></fd-icon>\n                            </button>\n                        </div>\n                    }\n                </li>\n            }\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n", dependencies: [{ kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: IconTabBarPopoverComponent, isStandalone: true, selector: "fdp-icon-tab-bar-popover", inputs: { leftSide: "leftSide", label: "label", showItemLabel: "showItemLabel" }, viewQueries: [{ propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n    <fd-popover-control>\n        <button class=\"fd-icon-tab-bar__overflow\">\n            <span class=\"fd-icon-tab-bar__overflow-text\">{{ label }}</span>\n            <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n        </button>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-icon-tab-bar\">\n        <ul class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\" role=\"list\">\n            @for (item of extraTabs; track item.uId; let idx = $index) {\n                @if (isSeparators) {\n                    <li tabindex=\"-1\" class=\"fd-icon-tab-bar__icon-separator\">\n                        <fd-icon glyph=\"process\"></fd-icon>\n                    </li>\n                }\n                <li\n                    class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n                    role=\"listitem\"\n                    [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n                    [ngClass]=\"item.cssClasses\"\n                    tabindex=\"-1\"\n                >\n                    <a\n                        class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                        #tabItem\n                        [attr.data-flatIndex]=\"item.flatIndex\"\n                        tabindex=\"0\"\n                        (click)=\"_selectItem(item)\"\n                        (keydown)=\"_keyDownHandler($event, item, idx)\"\n                    >\n                        <span class=\"fd-icon-tab-bar__list-item-icon-container\">\n                            <span class=\"fd-list__icon fd-icon-tab-bar__list-item-icon\">\n                                <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                            </span>\n                        </span>\n                        @if (showItemLabel && item.label) {\n                            <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                        }\n                        @if (item.badge) {\n                            <span class=\"fd-icon-tab-bar__badge\"></span>\n                        }\n                        @if (item.counter) {\n                            <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                                >({{ item.counter }})\n                            </span>\n                        }\n                        @if (item.color) {\n                            <div class=\"screenreader-only\">\n                                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                            </div>\n                        }\n                    </a>\n                    @if (item.closable) {\n                        <div class=\"fd-icon-tab-bar__button-container\">\n                            <button\n                                fd-button\n                                class=\"fd-icon-tab-bar__button\"\n                                fdType=\"transparent\"\n                                (click)=\"closeTab.emit(item.uId)\"\n                            >\n                                <fd-icon glyph=\"decline\"></fd-icon>\n                            </button>\n                        </div>\n                    }\n                </li>\n            }\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n", dependencies: [{ kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: IconTabBarPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-icon-tab-bar-popover', standalone: true, imports: [PopoverComponent, PopoverControlComponent, PopoverBodyComponent, IconComponent, NgClass, ButtonComponent], template: "<fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n    <fd-popover-control>\n        <button class=\"fd-icon-tab-bar__overflow\">\n            <span class=\"fd-icon-tab-bar__overflow-text\">{{ label }}</span>\n            <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n        </button>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-icon-tab-bar\">\n        <ul class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\" role=\"list\">\n            @for (item of extraTabs; track item.uId; let idx = $index) {\n                @if (isSeparators) {\n                    <li tabindex=\"-1\" class=\"fd-icon-tab-bar__icon-separator\">\n                        <fd-icon glyph=\"process\"></fd-icon>\n                    </li>\n                }\n                <li\n                    class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n                    role=\"listitem\"\n                    [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n                    [ngClass]=\"item.cssClasses\"\n                    tabindex=\"-1\"\n                >\n                    <a\n                        class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                        #tabItem\n                        [attr.data-flatIndex]=\"item.flatIndex\"\n                        tabindex=\"0\"\n                        (click)=\"_selectItem(item)\"\n                        (keydown)=\"_keyDownHandler($event, item, idx)\"\n                    >\n                        <span class=\"fd-icon-tab-bar__list-item-icon-container\">\n                            <span class=\"fd-list__icon fd-icon-tab-bar__list-item-icon\">\n                                <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                            </span>\n                        </span>\n                        @if (showItemLabel && item.label) {\n                            <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                        }\n                        @if (item.badge) {\n                            <span class=\"fd-icon-tab-bar__badge\"></span>\n                        }\n                        @if (item.counter) {\n                            <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                                >({{ item.counter }})\n                            </span>\n                        }\n                        @if (item.color) {\n                            <div class=\"screenreader-only\">\n                                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                            </div>\n                        }\n                    </a>\n                    @if (item.closable) {\n                        <div class=\"fd-icon-tab-bar__button-container\">\n                            <button\n                                fd-button\n                                class=\"fd-icon-tab-bar__button\"\n                                fdType=\"transparent\"\n                                (click)=\"closeTab.emit(item.uId)\"\n                            >\n                                <fd-icon glyph=\"decline\"></fd-icon>\n                            </button>\n                        </div>\n                    }\n                </li>\n            }\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n" }]
+            args: [{ selector: 'fdp-icon-tab-bar-popover', standalone: true, imports: [PopoverComponent, PopoverControlComponent, PopoverBodyComponent, IconComponent, NgClass, ButtonComponent], template: "<fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n    <fd-popover-control>\n        <button class=\"fd-icon-tab-bar__overflow\">\n            <span class=\"fd-icon-tab-bar__overflow-text\">{{ label }}</span>\n            <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n        </button>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-icon-tab-bar\">\n        <ul class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\" role=\"list\">\n            @for (item of extraTabs; track item.uId; let idx = $index) {\n                @if (isSeparators) {\n                    <li tabindex=\"-1\" class=\"fd-icon-tab-bar__icon-separator\">\n                        <fd-icon glyph=\"process\"></fd-icon>\n                    </li>\n                }\n                <li\n                    class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n                    role=\"listitem\"\n                    [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n                    [ngClass]=\"item.cssClasses\"\n                    tabindex=\"-1\"\n                >\n                    <a\n                        class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                        #tabItem\n                        [attr.data-flatIndex]=\"item.flatIndex\"\n                        tabindex=\"0\"\n                        (click)=\"_selectItem(item)\"\n                        (keydown)=\"_keyDownHandler($event, item, idx)\"\n                    >\n                        <span class=\"fd-icon-tab-bar__list-item-icon-container\">\n                            <span class=\"fd-list__icon fd-icon-tab-bar__list-item-icon\">\n                                <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                            </span>\n                        </span>\n                        @if (showItemLabel && item.label) {\n                            <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                        }\n                        @if (item.badge) {\n                            <span class=\"fd-icon-tab-bar__badge\"></span>\n                        }\n                        @if (item.counter) {\n                            <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                                >({{ item.counter }})\n                            </span>\n                        }\n                        @if (item.color) {\n                            <div class=\"screenreader-only\">\n                                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                            </div>\n                        }\n                    </a>\n                    @if (item.closable) {\n                        <div class=\"fd-icon-tab-bar__button-container\">\n                            <button\n                                fd-button\n                                class=\"fd-icon-tab-bar__button\"\n                                fdType=\"transparent\"\n                                (click)=\"closeTab.emit(item.uId)\"\n                            >\n                                <fd-icon glyph=\"decline\"></fd-icon>\n                            </button>\n                        </div>\n                    }\n                </li>\n            }\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n" }]
         }], propDecorators: { _tabExtraUIElements: [{
                 type: ViewChildren,
                 args: ['tabItem']
@@ -1249,7 +1249,7 @@ class TextTypePopoverComponent extends IconTabBarPopoverBase {
         }, []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TextTypePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TextTypePopoverComponent, isStandalone: true, selector: "fdp-text-type-popover", inputs: { isExtraItemsMode: "isExtraItemsMode", parentTab: "parentTab", selectedSubItemUid: "selectedSubItemUid", tabindex: "tabindex" }, outputs: { selectedSubItem: "selectedSubItem" }, viewQueries: [{ propertyName: "_dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (isExtraItemsMode) {\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <button class=\"fd-icon-tab-bar__overflow\">\n                <span class=\"fd-icon-tab-bar__overflow-text\">More</span>\n                <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n            </button>\n        </fd-popover-control>\n        <fd-popover-body class=\"fd-icon-tab-bar\">\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-template [ngTemplateOutletContext]=\"{ level: 1, items: extraTabs }\" [ngTemplateOutlet]=\"subItem\">\n                </ng-template>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n}\n@if (!isExtraItemsMode && parentTab) {\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <a\n                [attr.aria-selected]=\"_containsSelected\"\n                class=\"fd-icon-tab-bar__tab\"\n                role=\"tab\"\n                [attr.tabindex]=\"tabindex\"\n                #dropdownTrigger\n            >\n                <div class=\"fd-icon-tab-bar__tab-container\">\n                    <span class=\"fd-icon-tab-bar__tag\">{{ parentTab.label }}</span>\n                    <span class=\"fd-icon-tab-bar__arrow\">\n                        <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n                    </span>\n                    @if (parentTab.badge) {\n                        <span class=\"fd-icon-tab-bar__badge\"></span>\n                    }\n                </div>\n            </a>\n        </fd-popover-control>\n        <fd-popover-body class=\"fd-icon-tab-bar\">\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container\n                    [ngTemplateOutletContext]=\"{ level: 1, items: parentTab.subItems }\"\n                    [ngTemplateOutlet]=\"subItem\"\n                ></ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n}\n<ng-template #subItem let-items=\"items\" let-level=\"level\">\n    @for (item of items; track item.uId) {\n        <li\n            [attr.aria-level]=\"level\"\n            class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n            [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n            [ngClass]=\"item.cssClasses\"\n            fdpIconBarDndItem\n            [dndItemData]=\"item\"\n            role=\"listitem\"\n            tabindex=\"-1\"\n        >\n            <a\n                class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                tabindex=\"0\"\n                #tabItem\n                [attr.data-flatIndex]=\"item.flatIndex\"\n                [attr.aria-selected]=\"item.uId === selectedSubItemUid\"\n                (click)=\"_selectItem(item)\"\n                (keydown)=\"_textPopoverKeyDownHandler($event, item)\"\n            >\n                <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                @if (item.badge) {\n                    <span class=\"fd-icon-tab-bar__badge\"></span>\n                }\n                @if (item.counter) {\n                    <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\">({{ item.counter }}) </span>\n                }\n                @if (item.color) {\n                    <div class=\"screenreader-only\">\n                        {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                    </div>\n                }\n            </a>\n            @if (item.closable) {\n                <div class=\"fd-icon-tab-bar__button-container\">\n                    <button\n                        fd-button\n                        class=\"fd-icon-tab-bar__button\"\n                        fdType=\"transparent\"\n                        (click)=\"closeTab.emit(item.uId)\"\n                    >\n                        <fd-icon glyph=\"decline\"></fd-icon>\n                    </button>\n                </div>\n            }\n        </li>\n        @if (item.subItems?.length) {\n            <ng-container\n                [ngTemplateOutletContext]=\"{ level: level + 1, items: item.subItems }\"\n                [ngTemplateOutlet]=\"subItem\"\n            ></ng-container>\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: IconBarDndListDirective, selector: "[fdpIconBarDndList], [fdp-icon-bar-dnd-list]", inputs: ["dndOrientation", "dndAutoScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconBarDndItemDirective, selector: "[fdpIconBarDndItem], [fdp-icon-bar-dnd-item]", inputs: ["dndItemData", "previewClass", "dndHoveredClass", "dndSeparatorClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TextTypePopoverComponent, isStandalone: true, selector: "fdp-text-type-popover", inputs: { isExtraItemsMode: "isExtraItemsMode", parentTab: "parentTab", selectedSubItemUid: "selectedSubItemUid", tabindex: "tabindex" }, outputs: { selectedSubItem: "selectedSubItem" }, viewQueries: [{ propertyName: "_dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (isExtraItemsMode) {\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <button class=\"fd-icon-tab-bar__overflow\">\n                <span class=\"fd-icon-tab-bar__overflow-text\">More</span>\n                <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n            </button>\n        </fd-popover-control>\n        <fd-popover-body class=\"fd-icon-tab-bar\">\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-template [ngTemplateOutletContext]=\"{ level: 1, items: extraTabs }\" [ngTemplateOutlet]=\"subItem\">\n                </ng-template>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n}\n@if (!isExtraItemsMode && parentTab) {\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <a\n                [attr.aria-selected]=\"_containsSelected\"\n                class=\"fd-icon-tab-bar__tab\"\n                role=\"tab\"\n                [attr.tabindex]=\"tabindex\"\n                #dropdownTrigger\n            >\n                <div class=\"fd-icon-tab-bar__tab-container\">\n                    <span class=\"fd-icon-tab-bar__tag\">{{ parentTab.label }}</span>\n                    <span class=\"fd-icon-tab-bar__arrow\">\n                        <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n                    </span>\n                    @if (parentTab.badge) {\n                        <span class=\"fd-icon-tab-bar__badge\"></span>\n                    }\n                </div>\n            </a>\n        </fd-popover-control>\n        <fd-popover-body class=\"fd-icon-tab-bar\">\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container\n                    [ngTemplateOutletContext]=\"{ level: 1, items: parentTab.subItems }\"\n                    [ngTemplateOutlet]=\"subItem\"\n                ></ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n}\n<ng-template #subItem let-items=\"items\" let-level=\"level\">\n    @for (item of items; track item.uId) {\n        <li\n            [attr.aria-level]=\"level\"\n            class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n            [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n            [ngClass]=\"item.cssClasses\"\n            fdpIconBarDndItem\n            [dndItemData]=\"item\"\n            role=\"listitem\"\n            tabindex=\"-1\"\n        >\n            <a\n                class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                tabindex=\"0\"\n                #tabItem\n                [attr.data-flatIndex]=\"item.flatIndex\"\n                [attr.aria-selected]=\"item.uId === selectedSubItemUid\"\n                (click)=\"_selectItem(item)\"\n                (keydown)=\"_textPopoverKeyDownHandler($event, item)\"\n            >\n                <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                @if (item.badge) {\n                    <span class=\"fd-icon-tab-bar__badge\"></span>\n                }\n                @if (item.counter) {\n                    <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\">({{ item.counter }}) </span>\n                }\n                @if (item.color) {\n                    <div class=\"screenreader-only\">\n                        {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                    </div>\n                }\n            </a>\n            @if (item.closable) {\n                <div class=\"fd-icon-tab-bar__button-container\">\n                    <button\n                        fd-button\n                        class=\"fd-icon-tab-bar__button\"\n                        fdType=\"transparent\"\n                        (click)=\"closeTab.emit(item.uId)\"\n                    >\n                        <fd-icon glyph=\"decline\"></fd-icon>\n                    </button>\n                </div>\n            }\n        </li>\n        @if (item.subItems?.length) {\n            <ng-container\n                [ngTemplateOutletContext]=\"{ level: level + 1, items: item.subItems }\"\n                [ngTemplateOutlet]=\"subItem\"\n            ></ng-container>\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: IconBarDndListDirective, selector: "[fdpIconBarDndList], [fdp-icon-bar-dnd-list]", inputs: ["dndOrientation", "dndAutoScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconBarDndItemDirective, selector: "[fdpIconBarDndItem], [fdp-icon-bar-dnd-item]", inputs: ["dndItemData", "previewClass", "dndHoveredClass", "dndSeparatorClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TextTypePopoverComponent, decorators: [{
             type: Component,
@@ -1263,7 +1263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         NgClass,
                         ButtonComponent,
                         IconComponent
-                    ], template: "@if (isExtraItemsMode) {\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <button class=\"fd-icon-tab-bar__overflow\">\n                <span class=\"fd-icon-tab-bar__overflow-text\">More</span>\n                <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n            </button>\n        </fd-popover-control>\n        <fd-popover-body class=\"fd-icon-tab-bar\">\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-template [ngTemplateOutletContext]=\"{ level: 1, items: extraTabs }\" [ngTemplateOutlet]=\"subItem\">\n                </ng-template>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n}\n@if (!isExtraItemsMode && parentTab) {\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <a\n                [attr.aria-selected]=\"_containsSelected\"\n                class=\"fd-icon-tab-bar__tab\"\n                role=\"tab\"\n                [attr.tabindex]=\"tabindex\"\n                #dropdownTrigger\n            >\n                <div class=\"fd-icon-tab-bar__tab-container\">\n                    <span class=\"fd-icon-tab-bar__tag\">{{ parentTab.label }}</span>\n                    <span class=\"fd-icon-tab-bar__arrow\">\n                        <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n                    </span>\n                    @if (parentTab.badge) {\n                        <span class=\"fd-icon-tab-bar__badge\"></span>\n                    }\n                </div>\n            </a>\n        </fd-popover-control>\n        <fd-popover-body class=\"fd-icon-tab-bar\">\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container\n                    [ngTemplateOutletContext]=\"{ level: 1, items: parentTab.subItems }\"\n                    [ngTemplateOutlet]=\"subItem\"\n                ></ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n}\n<ng-template #subItem let-items=\"items\" let-level=\"level\">\n    @for (item of items; track item.uId) {\n        <li\n            [attr.aria-level]=\"level\"\n            class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n            [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n            [ngClass]=\"item.cssClasses\"\n            fdpIconBarDndItem\n            [dndItemData]=\"item\"\n            role=\"listitem\"\n            tabindex=\"-1\"\n        >\n            <a\n                class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                tabindex=\"0\"\n                #tabItem\n                [attr.data-flatIndex]=\"item.flatIndex\"\n                [attr.aria-selected]=\"item.uId === selectedSubItemUid\"\n                (click)=\"_selectItem(item)\"\n                (keydown)=\"_textPopoverKeyDownHandler($event, item)\"\n            >\n                <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                @if (item.badge) {\n                    <span class=\"fd-icon-tab-bar__badge\"></span>\n                }\n                @if (item.counter) {\n                    <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\">({{ item.counter }}) </span>\n                }\n                @if (item.color) {\n                    <div class=\"screenreader-only\">\n                        {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                    </div>\n                }\n            </a>\n            @if (item.closable) {\n                <div class=\"fd-icon-tab-bar__button-container\">\n                    <button\n                        fd-button\n                        class=\"fd-icon-tab-bar__button\"\n                        fdType=\"transparent\"\n                        (click)=\"closeTab.emit(item.uId)\"\n                    >\n                        <fd-icon glyph=\"decline\"></fd-icon>\n                    </button>\n                </div>\n            }\n        </li>\n        @if (item.subItems?.length) {\n            <ng-container\n                [ngTemplateOutletContext]=\"{ level: level + 1, items: item.subItems }\"\n                [ngTemplateOutlet]=\"subItem\"\n            ></ng-container>\n        }\n    }\n</ng-template>\n" }]
+                    ], template: "@if (isExtraItemsMode) {\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <button class=\"fd-icon-tab-bar__overflow\">\n                <span class=\"fd-icon-tab-bar__overflow-text\">More</span>\n                <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n            </button>\n        </fd-popover-control>\n        <fd-popover-body class=\"fd-icon-tab-bar\">\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-template [ngTemplateOutletContext]=\"{ level: 1, items: extraTabs }\" [ngTemplateOutlet]=\"subItem\">\n                </ng-template>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n}\n@if (!isExtraItemsMode && parentTab) {\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <a\n                [attr.aria-selected]=\"_containsSelected\"\n                class=\"fd-icon-tab-bar__tab\"\n                role=\"tab\"\n                [attr.tabindex]=\"tabindex\"\n                #dropdownTrigger\n            >\n                <div class=\"fd-icon-tab-bar__tab-container\">\n                    <span class=\"fd-icon-tab-bar__tag\">{{ parentTab.label }}</span>\n                    <span class=\"fd-icon-tab-bar__arrow\">\n                        <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n                    </span>\n                    @if (parentTab.badge) {\n                        <span class=\"fd-icon-tab-bar__badge\"></span>\n                    }\n                </div>\n            </a>\n        </fd-popover-control>\n        <fd-popover-body class=\"fd-icon-tab-bar\">\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container\n                    [ngTemplateOutletContext]=\"{ level: 1, items: parentTab.subItems }\"\n                    [ngTemplateOutlet]=\"subItem\"\n                ></ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n}\n<ng-template #subItem let-items=\"items\" let-level=\"level\">\n    @for (item of items; track item.uId) {\n        <li\n            [attr.aria-level]=\"level\"\n            class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n            [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n            [ngClass]=\"item.cssClasses\"\n            fdpIconBarDndItem\n            [dndItemData]=\"item\"\n            role=\"listitem\"\n            tabindex=\"-1\"\n        >\n            <a\n                class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                tabindex=\"0\"\n                #tabItem\n                [attr.data-flatIndex]=\"item.flatIndex\"\n                [attr.aria-selected]=\"item.uId === selectedSubItemUid\"\n                (click)=\"_selectItem(item)\"\n                (keydown)=\"_textPopoverKeyDownHandler($event, item)\"\n            >\n                <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                @if (item.badge) {\n                    <span class=\"fd-icon-tab-bar__badge\"></span>\n                }\n                @if (item.counter) {\n                    <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\">({{ item.counter }}) </span>\n                }\n                @if (item.color) {\n                    <div class=\"screenreader-only\">\n                        {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                    </div>\n                }\n            </a>\n            @if (item.closable) {\n                <div class=\"fd-icon-tab-bar__button-container\">\n                    <button\n                        fd-button\n                        class=\"fd-icon-tab-bar__button\"\n                        fdType=\"transparent\"\n                        (click)=\"closeTab.emit(item.uId)\"\n                    >\n                        <fd-icon glyph=\"decline\"></fd-icon>\n                    </button>\n                </div>\n            }\n        </li>\n        @if (item.subItems?.length) {\n            <ng-container\n                [ngTemplateOutletContext]=\"{ level: level + 1, items: item.subItems }\"\n                [ngTemplateOutlet]=\"subItem\"\n            ></ng-container>\n        }\n    }\n</ng-template>\n" }]
         }], propDecorators: { _dropdownTrigger: [{
                 type: ViewChild,
                 args: ['dropdownTrigger']