@fundamental-ngx/platform 0.44.1-rc.3 → 0.45.0

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

@@ -1080,7 +1080,7 @@ class IconTabBarTextTypeComponent extends IconTabBarBase {
         return tabUIElement._dropdownTrigger.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IconTabBarTextTypeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: IconTabBarTextTypeComponent, selector: "fdp-icon-tab-bar-text-type", inputs: { enableTabReordering: "enableTabReordering", layoutMode: "layoutMode" }, outputs: { reordered: "reordered" }, viewQueries: [{ propertyName: "_tabBarPopover", first: true, predicate: ["extraItemsPopover"], descendants: true }, { propertyName: "_tabUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container fdpIconBarDndContainer [draggable]=\"enableTabReordering\" (dropped)=\"_onDropped($event)\">\n    <ul\n        class=\"fd-icon-tab-bar__header\"\n        role=\"tablist\"\n        fdkOverflowList\n        [isRtl]=\"isRtl\"\n        [overflowOffset]=\"100\"\n        fdpIconBarDndList\n        dndOrientation=\"horizontal\"\n        (overflowChanged)=\"_recalculateVisibleItems($event)\"\n    >\n        <li\n            *ngFor=\"let item of _tabs; let idx = index; trackBy: _trackByTab\"\n            [class]=\"item.cssClasses\"\n            fdkOverflowListItem\n            fdpIconBarDndItem\n            [dndSeparatorClass]=\"['fd-icon-tab-bar__item--dnd-separator']\"\n            [dndItemData]=\"item\"\n            class=\"fd-icon-tab-bar__item\"\n            [attr.aria-hidden]=\"item.hidden\"\n            role=\"presentation\"\n        >\n            <a\n                *ngIf=\"!item.subItems?.length; else withPopover\"\n                class=\"fd-icon-tab-bar__tab\"\n                #tabItem\n                role=\"tab\"\n                [attr.tabindex]=\"idx === 0 ? 0 : -1\"\n                (click)=\"_selectItem(item, $event)\"\n                (keydown)=\"_keyDownHandler($event, item, idx)\"\n                [attr.aria-selected]=\"item.uId === _selectedUid\"\n            >\n                <span *ngIf=\"layoutMode === 'row'; else columnsMode\" class=\"fd-icon-tab-bar__tag\">\n                    {{ item.label }}\n                    <ng-container *ngIf=\"item.counter\"> ({{ item.counter }})</ng-container>\n                </span>\n                <ng-template #columnsMode>\n                    <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n                    <span class=\"fd-icon-tab-bar__tag\">{{ item.label }}</span>\n                </ng-template>\n                <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                    {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                </div>\n            </a>\n            <ng-template #withPopover>\n                <fdp-text-type-popover\n                    #tabItem\n                    [tabindex]=\"idx === 0 ? 0 : -1\"\n                    [parentTab]=\"item\"\n                    [selectedSubItemUid]=\"_selectedUid\"\n                    [colorAssociations]=\"colorAssociations\"\n                    (selectedSubItem)=\"_selectItem($event)\"\n                    (keydown)=\"_keyDownHandler($event, item, idx)\"\n                >\n                </fdp-text-type-popover>\n            </ng-template>\n        </li>\n        <li *ngIf=\"_extraTabs.length\" role=\"presentation\" class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow\">\n            <fdp-text-type-popover\n                #extraItemsPopover\n                [isRtl]=\"isRtl\"\n                [extraTabs]=\"_extraTabs\"\n                [isExtraItemsMode]=\"true\"\n                [colorAssociations]=\"colorAssociations\"\n                (selectedExtraItem)=\"_selectExtraItem($event)\"\n                (focusFirstVisibleItem)=\"_focusItem(0)\"\n                (focusLastVisibleItem)=\"_focusItem(_lastVisibleTabIndex)\"\n            >\n            </fdp-text-type-popover>\n        </li>\n    </ul>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.OverflowListDirective, selector: "[fdkOverflowList], [fdOverflowList], [fd-overflow-list]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: i3.OverflowListItemDirective, selector: "[fdkOverflowListItem], [fdOverflowListItem], [fd-overflow-list-item]" }, { kind: "component", type: TextTypePopoverComponent, selector: "fdp-text-type-popover", inputs: ["isExtraItemsMode", "parentTab", "selectedSubItemUid", "tabindex"], outputs: ["selectedSubItem"] }, { kind: "directive", type: IconBarDndListDirective, selector: "[fdpIconBarDndList], [fdp-icon-bar-dnd-list]", inputs: ["dndOrientation", "dndAutoScroll"] }, { kind: "directive", type: IconBarDndItemDirective, selector: "[fdpIconBarDndItem], [fdp-icon-bar-dnd-item]", inputs: ["dndItemData", "previewClass", "dndHoveredClass", "dndSeparatorClass"] }, { kind: "directive", type: IconBarDndContainerDirective, selector: "[fdpIconBarDndContainer], [fdp-icon-bar-dnd-container]", inputs: ["draggable"], outputs: ["dropped"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: IconTabBarTextTypeComponent, selector: "fdp-icon-tab-bar-text-type", inputs: { enableTabReordering: "enableTabReordering", layoutMode: "layoutMode" }, outputs: { reordered: "reordered" }, viewQueries: [{ propertyName: "_tabBarPopover", first: true, predicate: ["extraItemsPopover"], descendants: true }, { propertyName: "_tabUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container fdpIconBarDndContainer [draggable]=\"enableTabReordering\" (dropped)=\"_onDropped($event)\">\n    <ul\n        class=\"fd-icon-tab-bar__header\"\n        role=\"tablist\"\n        fdkOverflowList\n        [isRtl]=\"isRtl\"\n        [overflowOffset]=\"100\"\n        fdpIconBarDndList\n        dndOrientation=\"horizontal\"\n        (overflowChanged)=\"_recalculateVisibleItems($event)\"\n    >\n        <li\n            *ngFor=\"let item of _tabs; let idx = index; trackBy: _trackByTab\"\n            [class]=\"item.cssClasses\"\n            fdkOverflowListItem\n            fdpIconBarDndItem\n            [dndSeparatorClass]=\"['fd-icon-tab-bar__item--dnd-separator']\"\n            [dndItemData]=\"item\"\n            class=\"fd-icon-tab-bar__item\"\n            [attr.aria-hidden]=\"item.hidden\"\n            role=\"presentation\"\n        >\n            <a\n                *ngIf=\"!item.subItems?.length; else withPopover\"\n                class=\"fd-icon-tab-bar__tab\"\n                #tabItem\n                role=\"tab\"\n                [attr.tabindex]=\"idx === 0 ? 0 : -1\"\n                (click)=\"_selectItem(item, $event)\"\n                (keydown)=\"_keyDownHandler($event, item, idx)\"\n                [attr.aria-selected]=\"item.uId === _selectedUid\"\n            >\n                <span *ngIf=\"layoutMode === 'row'; else columnsMode\" class=\"fd-icon-tab-bar__tag\">\n                    {{ item.label }}\n                    <ng-container *ngIf=\"item.counter\"> ({{ item.counter }})</ng-container>\n                </span>\n                <ng-template #columnsMode>\n                    <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n                    <span class=\"fd-icon-tab-bar__tag\">{{ item.label }}</span>\n                </ng-template>\n                <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                    {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                </div>\n            </a>\n            <ng-template #withPopover>\n                <fdp-text-type-popover\n                    #tabItem\n                    [tabindex]=\"idx === 0 ? 0 : -1\"\n                    [parentTab]=\"item\"\n                    [selectedSubItemUid]=\"_selectedUid\"\n                    [colorAssociations]=\"colorAssociations\"\n                    (selectedSubItem)=\"_selectItem($event)\"\n                    (keydown)=\"_keyDownHandler($event, item, idx)\"\n                >\n                </fdp-text-type-popover>\n            </ng-template>\n        </li>\n        <li *ngIf=\"_extraTabs.length\" role=\"presentation\" class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow\">\n            <fdp-text-type-popover\n                #extraItemsPopover\n                [isRtl]=\"isRtl\"\n                [extraTabs]=\"_extraTabs\"\n                [isExtraItemsMode]=\"true\"\n                [colorAssociations]=\"colorAssociations\"\n                (selectedExtraItem)=\"_selectExtraItem($event)\"\n                (focusFirstVisibleItem)=\"_focusItem(0)\"\n                (focusLastVisibleItem)=\"_focusItem(_lastVisibleTabIndex)\"\n            >\n            </fdp-text-type-popover>\n        </li>\n    </ul>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.OverflowListDirective, selector: "[fdkOverflowList]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: i3.OverflowListItemDirective, selector: "[fdkOverflowListItem]" }, { kind: "component", type: TextTypePopoverComponent, selector: "fdp-text-type-popover", inputs: ["isExtraItemsMode", "parentTab", "selectedSubItemUid", "tabindex"], outputs: ["selectedSubItem"] }, { kind: "directive", type: IconBarDndListDirective, selector: "[fdpIconBarDndList], [fdp-icon-bar-dnd-list]", inputs: ["dndOrientation", "dndAutoScroll"] }, { kind: "directive", type: IconBarDndItemDirective, selector: "[fdpIconBarDndItem], [fdp-icon-bar-dnd-item]", inputs: ["dndItemData", "previewClass", "dndHoveredClass", "dndSeparatorClass"] }, { kind: "directive", type: IconBarDndContainerDirective, selector: "[fdpIconBarDndContainer], [fdp-icon-bar-dnd-container]", inputs: ["draggable"], outputs: ["dropped"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IconTabBarTextTypeComponent, decorators: [{
             type: Component,
@@ -1130,7 +1130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 
 class IconTabBarIconTypeComponent extends IconTabBarBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IconTabBarIconTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: IconTabBarIconTypeComponent, selector: "fdp-icon-tab-bar-icon-type", inputs: { showLabel: "showLabel" }, viewQueries: [{ propertyName: "_tabBarPopover", first: true, predicate: IconTabBarPopoverComponent, descendants: true }, { propertyName: "_tabUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul\n    class=\"fd-icon-tab-bar__header\"\n    role=\"tablist\"\n    fdkOverflowList\n    [isRtl]=\"isRtl\"\n    [overflowOffset]=\"100\"\n    (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n    <li\n        *ngFor=\"let item of _tabs; let idx = index; trackBy: _trackByTab\"\n        [class]=\"item.cssClasses\"\n        fdkOverflowListItem\n        [attr.aria-hidden]=\"item.hidden\"\n        class=\"fd-icon-tab-bar__item\"\n        role=\"presentation\"\n    >\n        <a\n            class=\"fd-icon-tab-bar__tab\"\n            #tabItem\n            role=\"tab\"\n            [attr.tabindex]=\"idx === 0 ? 0 : -1\"\n            [attr.aria-selected]=\"item.uId === _selectedUid\"\n            (click)=\"_selectItem(item)\"\n            (keydown)=\"_keyDownHandler($event, item, idx)\"\n        >\n            <div class=\"fd-icon-tab-bar__container\">\n                <span class=\"fd-icon-tab-bar__icon\">\n                    <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                </span>\n                <span *ngIf=\"item.counter && (!item.label || !showLabel)\" class=\"fd-icon-tab-bar__counter\">{{\n                    item.counter\n                }}</span>\n            </div>\n            <div *ngIf=\"showLabel && item.label\" class=\"fd-icon-tab-bar__details\">\n                <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n                <span class=\"fd-icon-tab-bar__label\">{{ item.label }}</span>\n            </div>\n            <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n            </div>\n        </a>\n    </li>\n    <li *ngIf=\"_extraTabs.length\" role=\"presentation\" class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow\">\n        <fdp-icon-tab-bar-popover\n            [showItemLabel]=\"showLabel\"\n            [isRtl]=\"isRtl\"\n            [extraTabs]=\"_extraTabs\"\n            [colorAssociations]=\"colorAssociations\"\n            (selectedExtraItem)=\"_selectExtraItem($event)\"\n            (focusFirstVisibleItem)=\"_focusItem(0)\"\n            (focusLastVisibleItem)=\"_focusItem(_lastVisibleTabIndex)\"\n        ></fdp-icon-tab-bar-popover>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i3.OverflowListDirective, selector: "[fdkOverflowList], [fdOverflowList], [fd-overflow-list]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: i3.OverflowListItemDirective, selector: "[fdkOverflowListItem], [fdOverflowListItem], [fd-overflow-list-item]" }, { kind: "component", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: ["leftSide", "label", "showItemLabel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: IconTabBarIconTypeComponent, selector: "fdp-icon-tab-bar-icon-type", inputs: { showLabel: "showLabel" }, viewQueries: [{ propertyName: "_tabBarPopover", first: true, predicate: IconTabBarPopoverComponent, descendants: true }, { propertyName: "_tabUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul\n    class=\"fd-icon-tab-bar__header\"\n    role=\"tablist\"\n    fdkOverflowList\n    [isRtl]=\"isRtl\"\n    [overflowOffset]=\"100\"\n    (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n    <li\n        *ngFor=\"let item of _tabs; let idx = index; trackBy: _trackByTab\"\n        [class]=\"item.cssClasses\"\n        fdkOverflowListItem\n        [attr.aria-hidden]=\"item.hidden\"\n        class=\"fd-icon-tab-bar__item\"\n        role=\"presentation\"\n    >\n        <a\n            class=\"fd-icon-tab-bar__tab\"\n            #tabItem\n            role=\"tab\"\n            [attr.tabindex]=\"idx === 0 ? 0 : -1\"\n            [attr.aria-selected]=\"item.uId === _selectedUid\"\n            (click)=\"_selectItem(item)\"\n            (keydown)=\"_keyDownHandler($event, item, idx)\"\n        >\n            <div class=\"fd-icon-tab-bar__container\">\n                <span class=\"fd-icon-tab-bar__icon\">\n                    <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                </span>\n                <span *ngIf=\"item.counter && (!item.label || !showLabel)\" class=\"fd-icon-tab-bar__counter\">{{\n                    item.counter\n                }}</span>\n            </div>\n            <div *ngIf=\"showLabel && item.label\" class=\"fd-icon-tab-bar__details\">\n                <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n                <span class=\"fd-icon-tab-bar__label\">{{ item.label }}</span>\n            </div>\n            <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n            </div>\n        </a>\n    </li>\n    <li *ngIf=\"_extraTabs.length\" role=\"presentation\" class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow\">\n        <fdp-icon-tab-bar-popover\n            [showItemLabel]=\"showLabel\"\n            [isRtl]=\"isRtl\"\n            [extraTabs]=\"_extraTabs\"\n            [colorAssociations]=\"colorAssociations\"\n            (selectedExtraItem)=\"_selectExtraItem($event)\"\n            (focusFirstVisibleItem)=\"_focusItem(0)\"\n            (focusLastVisibleItem)=\"_focusItem(_lastVisibleTabIndex)\"\n        ></fdp-icon-tab-bar-popover>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i3.OverflowListDirective, selector: "[fdkOverflowList]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: i3.OverflowListItemDirective, selector: "[fdkOverflowListItem]" }, { kind: "component", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: ["leftSide", "label", "showItemLabel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IconTabBarIconTypeComponent, decorators: [{
             type: Component,
@@ -1314,7 +1314,7 @@ class IconTabBarProcessTypeComponent extends IconTabBarBase {
         this._cd.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IconTabBarProcessTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: IconTabBarProcessTypeComponent, selector: "fdp-icon-tab-bar-process-type", viewQueries: [{ propertyName: "_tabBarPopover", first: true, predicate: IconTabBarPopoverComponent, descendants: true }, { propertyName: "_tabUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul\n    class=\"fd-icon-tab-bar__header\"\n    role=\"tablist\"\n    [class.fd-icon-tab-bar__header--left-offset]=\"_showLeftBtn\"\n    fdkOverflowList\n    [isRtl]=\"isRtl\"\n    [overflowOffset]=\"_offsetOverflowDirective\"\n    (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n    <li\n        *ngIf=\"_showLeftBtn\"\n        role=\"presentation\"\n        class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow fd-icon-tab-bar__item--overflow-left\"\n    >\n        <fdp-icon-tab-bar-popover\n            [extraTabs]=\"_prevSteps\"\n            [label]=\"_prevSteps.length.toString()\"\n            [isSeparators]=\"true\"\n            [colorAssociations]=\"colorAssociations\"\n            (selectedExtraItem)=\"_selectExtraItem($event)\"\n        ></fdp-icon-tab-bar-popover>\n    </li>\n    <li\n        *ngFor=\"let item of _tabs; let idx = index; trackBy: _trackByTab\"\n        [class]=\"item.cssClasses\"\n        class=\"fd-icon-tab-bar__item\"\n        role=\"presentation\"\n        fdkOverflowListItem\n        [attr.aria-hidden]=\"item.hidden\"\n    >\n        <a\n            (click)=\"_selectItem(item)\"\n            (keydown)=\"_keyDownHandler($event, item, idx)\"\n            [attr.aria-selected]=\"item.uId === _selectedUid\"\n            class=\"fd-icon-tab-bar__tab\"\n            #tabItem\n            [attr.tabindex]=\"idx === 0 ? 0 : -1\"\n            role=\"tab\"\n        >\n            <ng-container *ngIf=\"item.icon; else processTextOnly\">\n                <div class=\"fd-icon-tab-bar__container\">\n                    <span class=\"fd-icon-tab-bar__icon\">\n                        <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                    </span>\n                    <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                </div>\n                <div class=\"fd-icon-tab-bar__details\">\n                    <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n                    <span class=\"fd-icon-tab-bar__label\">{{ item.label }}</span>\n                </div>\n            </ng-container>\n            <ng-template #processTextOnly>\n                <span class=\"fd-icon-tab-bar__tag\">{{ item.label }}</span>\n                <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n            </ng-template>\n            <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n            </div>\n        </a>\n        <span *ngIf=\"_lastVisibleTabIndex !== idx\" class=\"fd-icon-tab-bar__separator\">\n            <fd-icon glyph=\"process\"></fd-icon>\n        </span>\n    </li>\n    <li *ngIf=\"_showRightBtn\" role=\"presentation\" class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow\">\n        <fdp-icon-tab-bar-popover\n            [isRtl]=\"isRtl\"\n            [extraTabs]=\"_nextSteps\"\n            [isSeparators]=\"true\"\n            [label]=\"_nextSteps.length.toString()\"\n            [colorAssociations]=\"colorAssociations\"\n            (selectedExtraItem)=\"_selectExtraItem($event)\"\n            (focusFirstVisibleItem)=\"_focusItem(0)\"\n            (focusLastVisibleItem)=\"_focusItem(_lastVisibleTabIndex)\"\n        >\n        </fdp-icon-tab-bar-popover>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i3.OverflowListDirective, selector: "[fdkOverflowList], [fdOverflowList], [fd-overflow-list]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: i3.OverflowListItemDirective, selector: "[fdkOverflowListItem], [fdOverflowListItem], [fd-overflow-list-item]" }, { kind: "component", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: ["leftSide", "label", "showItemLabel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: IconTabBarProcessTypeComponent, selector: "fdp-icon-tab-bar-process-type", viewQueries: [{ propertyName: "_tabBarPopover", first: true, predicate: IconTabBarPopoverComponent, descendants: true }, { propertyName: "_tabUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul\n    class=\"fd-icon-tab-bar__header\"\n    role=\"tablist\"\n    [class.fd-icon-tab-bar__header--left-offset]=\"_showLeftBtn\"\n    fdkOverflowList\n    [isRtl]=\"isRtl\"\n    [overflowOffset]=\"_offsetOverflowDirective\"\n    (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n    <li\n        *ngIf=\"_showLeftBtn\"\n        role=\"presentation\"\n        class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow fd-icon-tab-bar__item--overflow-left\"\n    >\n        <fdp-icon-tab-bar-popover\n            [extraTabs]=\"_prevSteps\"\n            [label]=\"_prevSteps.length.toString()\"\n            [isSeparators]=\"true\"\n            [colorAssociations]=\"colorAssociations\"\n            (selectedExtraItem)=\"_selectExtraItem($event)\"\n        ></fdp-icon-tab-bar-popover>\n    </li>\n    <li\n        *ngFor=\"let item of _tabs; let idx = index; trackBy: _trackByTab\"\n        [class]=\"item.cssClasses\"\n        class=\"fd-icon-tab-bar__item\"\n        role=\"presentation\"\n        fdkOverflowListItem\n        [attr.aria-hidden]=\"item.hidden\"\n    >\n        <a\n            (click)=\"_selectItem(item)\"\n            (keydown)=\"_keyDownHandler($event, item, idx)\"\n            [attr.aria-selected]=\"item.uId === _selectedUid\"\n            class=\"fd-icon-tab-bar__tab\"\n            #tabItem\n            [attr.tabindex]=\"idx === 0 ? 0 : -1\"\n            role=\"tab\"\n        >\n            <ng-container *ngIf=\"item.icon; else processTextOnly\">\n                <div class=\"fd-icon-tab-bar__container\">\n                    <span class=\"fd-icon-tab-bar__icon\">\n                        <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                    </span>\n                    <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                </div>\n                <div class=\"fd-icon-tab-bar__details\">\n                    <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n                    <span class=\"fd-icon-tab-bar__label\">{{ item.label }}</span>\n                </div>\n            </ng-container>\n            <ng-template #processTextOnly>\n                <span class=\"fd-icon-tab-bar__tag\">{{ item.label }}</span>\n                <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n            </ng-template>\n            <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n            </div>\n        </a>\n        <span *ngIf=\"_lastVisibleTabIndex !== idx\" class=\"fd-icon-tab-bar__separator\">\n            <fd-icon glyph=\"process\"></fd-icon>\n        </span>\n    </li>\n    <li *ngIf=\"_showRightBtn\" role=\"presentation\" class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow\">\n        <fdp-icon-tab-bar-popover\n            [isRtl]=\"isRtl\"\n            [extraTabs]=\"_nextSteps\"\n            [isSeparators]=\"true\"\n            [label]=\"_nextSteps.length.toString()\"\n            [colorAssociations]=\"colorAssociations\"\n            (selectedExtraItem)=\"_selectExtraItem($event)\"\n            (focusFirstVisibleItem)=\"_focusItem(0)\"\n            (focusLastVisibleItem)=\"_focusItem(_lastVisibleTabIndex)\"\n        >\n        </fdp-icon-tab-bar-popover>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i3.OverflowListDirective, selector: "[fdkOverflowList]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: i3.OverflowListItemDirective, selector: "[fdkOverflowListItem]" }, { kind: "component", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: ["leftSide", "label", "showItemLabel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IconTabBarProcessTypeComponent, decorators: [{
             type: Component,
@@ -1344,7 +1344,7 @@ class IconTabBarFilterTypeComponent extends IconTabBarBase {
         this._totalTab = this.showTotalTab ? this._tabs[0] : undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IconTabBarFilterTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: IconTabBarFilterTypeComponent, selector: "fdp-icon-tab-bar-filter-type", inputs: { showTotalTab: "showTotalTab" }, viewQueries: [{ propertyName: "_tabBarPopover", first: true, predicate: IconTabBarPopoverComponent, descendants: true }, { propertyName: "_tabUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul\n    class=\"fd-icon-tab-bar__header\"\n    role=\"tablist\"\n    fdkOverflowList\n    [isRtl]=\"isRtl\"\n    [overflowOffset]=\"100\"\n    (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n    <li *ngIf=\"showTotalTab\" class=\"fd-icon-tab-bar__item\" role=\"presentation\" fdkOverflowListItem>\n        <a\n            (click)=\"_totalTab && _selectItem(_totalTab)\"\n            (keydown)=\"_keyDownHandler($event, _totalTab, 0)\"\n            [attr.aria-selected]=\"_totalTab?.uId === _selectedUid\"\n            class=\"fd-icon-tab-bar__tab\"\n            tabindex=\"0\"\n            #tabItem\n            role=\"tab\"\n        >\n            <div class=\"fd-icon-tab-bar__container fd-icon-tab-bar__container--filter\">\n                <span *ngIf=\"_totalTab?.counter\" class=\"fd-icon-tab-bar__filter-counter\">{{ _totalTab?.counter }}</span>\n                <span class=\"fd-icon-tab-bar__filter-label\">{{ _totalTab?.label }}</span>\n            </div>\n        </a>\n    </li>\n    <li\n        *ngFor=\"let item of _tabs | slice : 1; let idx = index; trackBy: _trackByTab\"\n        [class]=\"item.cssClasses\"\n        class=\"fd-icon-tab-bar__item\"\n        role=\"presentation\"\n        fdkOverflowListItem\n        [attr.aria-hidden]=\"item.hidden\"\n    >\n        <a\n            (click)=\"_selectItem(item)\"\n            [attr.aria-selected]=\"item.uId === _selectedUid\"\n            class=\"fd-icon-tab-bar__tab\"\n            #tabItem\n            [attr.tabindex]=\"showTotalTab ? -1 : idx > 0 ? -1 : 0\"\n            (keydown)=\"_keyDownHandler($event, item, idx + (showTotalTab ? 1 : 0))\"\n            role=\"tab\"\n        >\n            <div class=\"fd-icon-tab-bar__container\">\n                <span class=\"fd-icon-tab-bar__icon\">\n                    <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                </span>\n                <span *ngIf=\"item.counter\" class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n            </div>\n            <div class=\"fd-icon-tab-bar__label\">{{ item.label }}</div>\n            <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n            </div>\n        </a>\n    </li>\n    <li *ngIf=\"_extraTabs.length\" role=\"presentation\" class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow\">\n        <fdp-icon-tab-bar-popover\n            [isRtl]=\"isRtl\"\n            [extraTabs]=\"_extraTabs\"\n            [colorAssociations]=\"colorAssociations\"\n            (selectedExtraItem)=\"_selectExtraItem($event)\"\n            (focusFirstVisibleItem)=\"_focusItem(0)\"\n            (focusLastVisibleItem)=\"_focusItem(_lastVisibleTabIndex)\"\n        ></fdp-icon-tab-bar-popover>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i3.OverflowListDirective, selector: "[fdkOverflowList], [fdOverflowList], [fd-overflow-list]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: i3.OverflowListItemDirective, selector: "[fdkOverflowListItem], [fdOverflowListItem], [fd-overflow-list-item]" }, { kind: "component", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: ["leftSide", "label", "showItemLabel"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: IconTabBarFilterTypeComponent, selector: "fdp-icon-tab-bar-filter-type", inputs: { showTotalTab: "showTotalTab" }, viewQueries: [{ propertyName: "_tabBarPopover", first: true, predicate: IconTabBarPopoverComponent, descendants: true }, { propertyName: "_tabUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul\n    class=\"fd-icon-tab-bar__header\"\n    role=\"tablist\"\n    fdkOverflowList\n    [isRtl]=\"isRtl\"\n    [overflowOffset]=\"100\"\n    (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n    <li *ngIf=\"showTotalTab\" class=\"fd-icon-tab-bar__item\" role=\"presentation\" fdkOverflowListItem>\n        <a\n            (click)=\"_totalTab && _selectItem(_totalTab)\"\n            (keydown)=\"_keyDownHandler($event, _totalTab, 0)\"\n            [attr.aria-selected]=\"_totalTab?.uId === _selectedUid\"\n            class=\"fd-icon-tab-bar__tab\"\n            tabindex=\"0\"\n            #tabItem\n            role=\"tab\"\n        >\n            <div class=\"fd-icon-tab-bar__container fd-icon-tab-bar__container--filter\">\n                <span *ngIf=\"_totalTab?.counter\" class=\"fd-icon-tab-bar__filter-counter\">{{ _totalTab?.counter }}</span>\n                <span class=\"fd-icon-tab-bar__filter-label\">{{ _totalTab?.label }}</span>\n            </div>\n        </a>\n    </li>\n    <li\n        *ngFor=\"let item of _tabs | slice : 1; let idx = index; trackBy: _trackByTab\"\n        [class]=\"item.cssClasses\"\n        class=\"fd-icon-tab-bar__item\"\n        role=\"presentation\"\n        fdkOverflowListItem\n        [attr.aria-hidden]=\"item.hidden\"\n    >\n        <a\n            (click)=\"_selectItem(item)\"\n            [attr.aria-selected]=\"item.uId === _selectedUid\"\n            class=\"fd-icon-tab-bar__tab\"\n            #tabItem\n            [attr.tabindex]=\"showTotalTab ? -1 : idx > 0 ? -1 : 0\"\n            (keydown)=\"_keyDownHandler($event, item, idx + (showTotalTab ? 1 : 0))\"\n            role=\"tab\"\n        >\n            <div class=\"fd-icon-tab-bar__container\">\n                <span class=\"fd-icon-tab-bar__icon\">\n                    <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                </span>\n                <span *ngIf=\"item.counter\" class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n            </div>\n            <div class=\"fd-icon-tab-bar__label\">{{ item.label }}</div>\n            <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n            </div>\n        </a>\n    </li>\n    <li *ngIf=\"_extraTabs.length\" role=\"presentation\" class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow\">\n        <fdp-icon-tab-bar-popover\n            [isRtl]=\"isRtl\"\n            [extraTabs]=\"_extraTabs\"\n            [colorAssociations]=\"colorAssociations\"\n            (selectedExtraItem)=\"_selectExtraItem($event)\"\n            (focusFirstVisibleItem)=\"_focusItem(0)\"\n            (focusLastVisibleItem)=\"_focusItem(_lastVisibleTabIndex)\"\n        ></fdp-icon-tab-bar-popover>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i3.OverflowListDirective, selector: "[fdkOverflowList]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: i3.OverflowListItemDirective, selector: "[fdkOverflowListItem]" }, { kind: "component", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: ["leftSide", "label", "showItemLabel"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: IconTabBarFilterTypeComponent, decorators: [{
             type: Component,