@fundamental-ngx/platform 0.52.2-rc.34 → 0.52.2-rc.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/icon-tab-bar/components/icon-tab-bar-filter-type/icon-tab-bar-filter-type.component.mjs +6 -5
- package/esm2022/icon-tab-bar/components/icon-tab-bar-icon-type/icon-tab-bar-icon-type.component.mjs +6 -5
- package/esm2022/icon-tab-bar/components/icon-tab-bar-process-type/icon-tab-bar-process-type.component.mjs +6 -4
- package/esm2022/icon-tab-bar/components/icon-tab-bar-tab/icon-tab-bar-tab.component.mjs +6 -3
- package/esm2022/icon-tab-bar/components/icon-tab-bar-text-type/icon-tab-bar-text-type.component.mjs +4 -3
- package/esm2022/icon-tab-bar/components/text-type-tab-item/icon-tab-bar-text-type-tab-item.component.mjs +5 -4
- package/esm2022/icon-tab-bar/directives/icon-tab-title.directive.mjs +14 -0
- package/esm2022/icon-tab-bar/icon-tab-bar.component.mjs +2 -1
- package/esm2022/icon-tab-bar/interfaces/tab-config.interface.mjs +1 -1
- package/fesm2022/fundamental-ngx-platform-icon-tab-bar.mjs +34 -15
- package/fesm2022/fundamental-ngx-platform-icon-tab-bar.mjs.map +1 -1
- package/icon-tab-bar/components/icon-tab-bar-tab/icon-tab-bar-tab.component.d.ts +3 -1
- package/icon-tab-bar/directives/icon-tab-title.directive.d.ts +5 -0
- package/icon-tab-bar/icon-tab-bar.component.d.ts +2 -0
- package/icon-tab-bar/interfaces/tab-config.interface.d.ts +2 -0
- package/package.json +4 -4
- package/schematics/ng-add/index.js +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, signal, input, inject, ChangeDetectorRef, NgZone, DestroyRef, isDevMode, ElementRef, Directive, Input, Output, ViewChild, Component, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, booleanAttribute, viewChild, contentChildren, model, output, viewChildren, computed, Optional, HostBinding, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, signal, input, inject, ChangeDetectorRef, NgZone, DestroyRef, isDevMode, ElementRef, Directive, Input, Output, ViewChild, Component, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, booleanAttribute, viewChild, contentChild, TemplateRef, contentChildren, model, output, viewChildren, computed, Optional, HostBinding, NgModule } from '@angular/core';
|
|
3
3
|
import { take, debounceTime, distinctUntilChanged, first } from 'rxjs/operators';
|
|
4
4
|
import { SPACE, ENTER, RIGHT_ARROW, DOWN_ARROW, LEFT_ARROW, UP_ARROW, BACKSPACE, DELETE } from '@angular/cdk/keycodes';
|
|
5
5
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -651,7 +651,7 @@ class IconTabBarFilterTypeComponent extends ClosableIconTabBar {
|
|
|
651
651
|
provide: IconTabBarBase,
|
|
652
652
|
useExisting: IconTabBarFilterTypeComponent
|
|
653
653
|
}
|
|
654
|
-
], 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 [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n fdkOverflowList\n [isRtl]=\"isRtl\"\n #tablist\n [overflowOffset]=\"100\"\n (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n @if (showTotalTab) {\n <li 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 @if (_totalTab?.counter) {\n <span class=\"fd-icon-tab-bar__filter-counter\">{{ _totalTab?.counter }}</span>\n }\n <span class=\"fd-icon-tab-bar__filter-label\">{{ _totalTab?.label | fdkAsyncOrSync }}</span>\n </div>\n </a>\n </li>\n }\n @for (item of tabs | slice: 1; track item.uId; let idx = $index) {\n <li\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
|
|
654
|
+
], 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 [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n fdkOverflowList\n [isRtl]=\"isRtl\"\n #tablist\n [overflowOffset]=\"100\"\n (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n @if (showTotalTab) {\n <li 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 @if (_totalTab?.counter) {\n <span class=\"fd-icon-tab-bar__filter-counter\">{{ _totalTab?.counter }}</span>\n }\n <span class=\"fd-icon-tab-bar__filter-label\">{{ _totalTab?.label | fdkAsyncOrSync }}</span>\n </div>\n </a>\n </li>\n }\n @for (item of tabs | slice: 1; track item.uId; let idx = $index) {\n <li\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 @if (item?.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"item.titleTemplate || null\"></ng-container>\n } @else {\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 @if (item.counter) {\n <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n }\n </div>\n <div class=\"fd-icon-tab-bar__label\">{{ item.label | fdkAsyncOrSync }}</div>\n }\n @if (item.color | fdkAsyncOrSync; as itemColor) {\n <div class=\"screenreader-only\">\n {{ colorAssociations()?.[itemColor] || itemColor }}\n </div>\n }\n </a>\n @if (item.closable) {\n <div class=\"fd-icon-tab-bar__button-container\">\n <button\n fd-button\n tabindex=\"-1\"\n class=\"fd-icon-tab-bar__button\"\n fdType=\"transparent\"\n (click)=\"_closeTab(item.uId)\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </div>\n }\n </li>\n }\n @if (_extraItems$()) {\n <li 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 (closeTab)=\"_closeTab($event, true)\"\n ></fdp-icon-tab-bar-popover>\n </li>\n }\n</ul>\n", dependencies: [{ kind: "directive", type: OverflowListDirective, selector: "[fdkOverflowList]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: OverflowListItemDirective, selector: "[fdkOverflowListItem]" }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: ["leftSide", "label", "showItemLabel"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
655
655
|
}
|
|
656
656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconTabBarFilterTypeComponent, decorators: [{
|
|
657
657
|
type: Component,
|
|
@@ -667,8 +667,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
667
667
|
IconTabBarPopoverComponent,
|
|
668
668
|
SlicePipe,
|
|
669
669
|
ButtonComponent,
|
|
670
|
-
AsyncOrSyncPipe
|
|
671
|
-
|
|
670
|
+
AsyncOrSyncPipe,
|
|
671
|
+
NgTemplateOutlet
|
|
672
|
+
], template: "<ul\n class=\"fd-icon-tab-bar__header\"\n [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n fdkOverflowList\n [isRtl]=\"isRtl\"\n #tablist\n [overflowOffset]=\"100\"\n (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n @if (showTotalTab) {\n <li 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 @if (_totalTab?.counter) {\n <span class=\"fd-icon-tab-bar__filter-counter\">{{ _totalTab?.counter }}</span>\n }\n <span class=\"fd-icon-tab-bar__filter-label\">{{ _totalTab?.label | fdkAsyncOrSync }}</span>\n </div>\n </a>\n </li>\n }\n @for (item of tabs | slice: 1; track item.uId; let idx = $index) {\n <li\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 @if (item?.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"item.titleTemplate || null\"></ng-container>\n } @else {\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 @if (item.counter) {\n <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n }\n </div>\n <div class=\"fd-icon-tab-bar__label\">{{ item.label | fdkAsyncOrSync }}</div>\n }\n @if (item.color | fdkAsyncOrSync; as itemColor) {\n <div class=\"screenreader-only\">\n {{ colorAssociations()?.[itemColor] || itemColor }}\n </div>\n }\n </a>\n @if (item.closable) {\n <div class=\"fd-icon-tab-bar__button-container\">\n <button\n fd-button\n tabindex=\"-1\"\n class=\"fd-icon-tab-bar__button\"\n fdType=\"transparent\"\n (click)=\"_closeTab(item.uId)\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </div>\n }\n </li>\n }\n @if (_extraItems$()) {\n <li 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 (closeTab)=\"_closeTab($event, true)\"\n ></fdp-icon-tab-bar-popover>\n </li>\n }\n</ul>\n" }]
|
|
672
673
|
}], propDecorators: { _tabUIElements: [{
|
|
673
674
|
type: ViewChildren,
|
|
674
675
|
args: ['tabItem']
|
|
@@ -691,7 +692,7 @@ class IconTabBarIconTypeComponent extends ClosableIconTabBar {
|
|
|
691
692
|
provide: IconTabBarBase,
|
|
692
693
|
useExisting: IconTabBarIconTypeComponent
|
|
693
694
|
}
|
|
694
|
-
], 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 [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n fdkOverflowList\n [isRtl]=\"isRtl\"\n #tablist\n [overflowOffset]=\"100\"\n (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n @for (item of tabs; track item.uId; let idx = $index) {\n <li\n [ngClass]=\"item.cssClasses\"\n [class.fd-icon-tab-bar__item--closable]=\"item.closable\"\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
|
|
695
|
+
], 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 [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n fdkOverflowList\n [isRtl]=\"isRtl\"\n #tablist\n [overflowOffset]=\"100\"\n (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n @for (item of tabs; track item.uId; let idx = $index) {\n <li\n [ngClass]=\"item.cssClasses\"\n [class.fd-icon-tab-bar__item--closable]=\"item.closable\"\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 @if (item?.titleTemplate) {\n <ng-template [ngTemplateOutlet]=\"item.titleTemplate || null\"></ng-template>\n } @else {\n <div class=\"fd-icon-tab-bar__container\">\n <span class=\"fd-icon-tab-bar__icon\">\n <fd-icon [glyph]=\"item.icon\" [font]=\"item.iconFont || _defaultFontFamily\"></fd-icon>\n </span>\n @if (item.counter && (!item.label || !showLabel)) {\n <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n }\n </div>\n @if (showLabel && item.label) {\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 }\n @if (item.color | fdkAsyncOrSync; as itemColor) {\n <div class=\"screenreader-only\">\n {{ colorAssociations()?.[itemColor] || itemColor }}\n </div>\n }\n }\n </a>\n @if (item.closable) {\n <div class=\"fd-icon-tab-bar__button-container\">\n <button\n fd-button\n tabindex=\"-1\"\n class=\"fd-icon-tab-bar__button\"\n fdType=\"transparent\"\n (click)=\"_closeTab(item.uId)\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </div>\n }\n </li>\n }\n @if (_extraItems$()) {\n <li 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 (closeTab)=\"_closeTab($event, true)\"\n ></fdp-icon-tab-bar-popover>\n </li>\n }\n</ul>\n", dependencies: [{ kind: "directive", type: OverflowListDirective, selector: "[fdkOverflowList]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "directive", type: OverflowListItemDirective, selector: "[fdkOverflowListItem]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: ["leftSide", "label", "showItemLabel"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
695
696
|
}
|
|
696
697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconTabBarIconTypeComponent, decorators: [{
|
|
697
698
|
type: Component,
|
|
@@ -707,8 +708,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
707
708
|
IconComponent,
|
|
708
709
|
ButtonComponent,
|
|
709
710
|
IconTabBarPopoverComponent,
|
|
710
|
-
AsyncOrSyncPipe
|
|
711
|
-
|
|
711
|
+
AsyncOrSyncPipe,
|
|
712
|
+
NgTemplateOutlet
|
|
713
|
+
], template: "<ul\n class=\"fd-icon-tab-bar__header\"\n [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n fdkOverflowList\n [isRtl]=\"isRtl\"\n #tablist\n [overflowOffset]=\"100\"\n (overflowChanged)=\"_recalculateVisibleItems($event)\"\n>\n @for (item of tabs; track item.uId; let idx = $index) {\n <li\n [ngClass]=\"item.cssClasses\"\n [class.fd-icon-tab-bar__item--closable]=\"item.closable\"\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 @if (item?.titleTemplate) {\n <ng-template [ngTemplateOutlet]=\"item.titleTemplate || null\"></ng-template>\n } @else {\n <div class=\"fd-icon-tab-bar__container\">\n <span class=\"fd-icon-tab-bar__icon\">\n <fd-icon [glyph]=\"item.icon\" [font]=\"item.iconFont || _defaultFontFamily\"></fd-icon>\n </span>\n @if (item.counter && (!item.label || !showLabel)) {\n <span class=\"fd-icon-tab-bar__counter\">{{ item.counter }}</span>\n }\n </div>\n @if (showLabel && item.label) {\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 }\n @if (item.color | fdkAsyncOrSync; as itemColor) {\n <div class=\"screenreader-only\">\n {{ colorAssociations()?.[itemColor] || itemColor }}\n </div>\n }\n }\n </a>\n @if (item.closable) {\n <div class=\"fd-icon-tab-bar__button-container\">\n <button\n fd-button\n tabindex=\"-1\"\n class=\"fd-icon-tab-bar__button\"\n fdType=\"transparent\"\n (click)=\"_closeTab(item.uId)\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </div>\n }\n </li>\n }\n @if (_extraItems$()) {\n <li 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 (closeTab)=\"_closeTab($event, true)\"\n ></fdp-icon-tab-bar-popover>\n </li>\n }\n</ul>\n" }]
|
|
712
714
|
}], propDecorators: { _tabUIElements: [{
|
|
713
715
|
type: ViewChildren,
|
|
714
716
|
args: ['tabItem']
|
|
@@ -895,7 +897,7 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
895
897
|
provide: IconTabBarBase,
|
|
896
898
|
useExisting: IconTabBarProcessTypeComponent
|
|
897
899
|
}
|
|
898
|
-
], 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 [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n #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 @if (_showLeftBtn) {\n <li\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 }\n @for (item of tabs; track item.uId; let idx = $index) {\n <li\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 @if (item.icon) {\n
|
|
900
|
+
], 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 [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n #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 @if (_showLeftBtn) {\n <li\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 }\n @for (item of tabs; track item.uId; let idx = $index) {\n <li\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 @if (item?.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"item.titleTemplate || null\"></ng-container>\n } @else {\n @if (item.icon) {\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 @if (item.badge) {\n <span class=\"fd-icon-tab-bar__badge\"></span>\n }\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 | fdkAsyncOrSync }}</span>\n </div>\n } @else {\n <span class=\"fd-icon-tab-bar__tag\">{{ item.label | fdkAsyncOrSync }}</span>\n @if (item.badge) {\n <span class=\"fd-icon-tab-bar__badge\"></span>\n }\n }\n @if (item.color | fdkAsyncOrSync; as itemColor) {\n <div class=\"screenreader-only\">\n {{ colorAssociations()?.[itemColor] || itemColor }}\n </div>\n }\n }\n </a>\n @if (item.closable) {\n <div class=\"fd-icon-tab-bar__button-container\">\n <button\n fd-button\n tabindex=\"-1\"\n class=\"fd-icon-tab-bar__button\"\n fdType=\"transparent\"\n (click)=\"_closeTab(item.uId)\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </div>\n }\n @if (_lastVisibleTabIndex !== idx) {\n <span class=\"fd-icon-tab-bar__separator\">\n <fd-icon glyph=\"process\"></fd-icon>\n </span>\n }\n </li>\n }\n @if (_showRightBtn) {\n <li 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 (closeTab)=\"_closeTab($event, true)\"\n >\n </fdp-icon-tab-bar-popover>\n </li>\n }\n</ul>\n", dependencies: [{ kind: "directive", type: OverflowListDirective, selector: "[fdkOverflowList]", inputs: ["overflowOffset", "isRtl", "itemCssBlockValue"], outputs: ["overflowChanged"] }, { kind: "component", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: ["leftSide", "label", "showItemLabel"] }, { kind: "directive", type: OverflowListItemDirective, selector: "[fdkOverflowListItem]" }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
899
901
|
}
|
|
900
902
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconTabBarProcessTypeComponent, decorators: [{
|
|
901
903
|
type: Component,
|
|
@@ -910,8 +912,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
910
912
|
OverflowListItemDirective,
|
|
911
913
|
IconComponent,
|
|
912
914
|
ButtonComponent,
|
|
913
|
-
AsyncOrSyncPipe
|
|
914
|
-
|
|
915
|
+
AsyncOrSyncPipe,
|
|
916
|
+
NgTemplateOutlet
|
|
917
|
+
], template: "<ul\n class=\"fd-icon-tab-bar__header\"\n [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n #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 @if (_showLeftBtn) {\n <li\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 }\n @for (item of tabs; track item.uId; let idx = $index) {\n <li\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 @if (item?.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"item.titleTemplate || null\"></ng-container>\n } @else {\n @if (item.icon) {\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 @if (item.badge) {\n <span class=\"fd-icon-tab-bar__badge\"></span>\n }\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 | fdkAsyncOrSync }}</span>\n </div>\n } @else {\n <span class=\"fd-icon-tab-bar__tag\">{{ item.label | fdkAsyncOrSync }}</span>\n @if (item.badge) {\n <span class=\"fd-icon-tab-bar__badge\"></span>\n }\n }\n @if (item.color | fdkAsyncOrSync; as itemColor) {\n <div class=\"screenreader-only\">\n {{ colorAssociations()?.[itemColor] || itemColor }}\n </div>\n }\n }\n </a>\n @if (item.closable) {\n <div class=\"fd-icon-tab-bar__button-container\">\n <button\n fd-button\n tabindex=\"-1\"\n class=\"fd-icon-tab-bar__button\"\n fdType=\"transparent\"\n (click)=\"_closeTab(item.uId)\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </div>\n }\n @if (_lastVisibleTabIndex !== idx) {\n <span class=\"fd-icon-tab-bar__separator\">\n <fd-icon glyph=\"process\"></fd-icon>\n </span>\n }\n </li>\n }\n @if (_showRightBtn) {\n <li 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 (closeTab)=\"_closeTab($event, true)\"\n >\n </fdp-icon-tab-bar-popover>\n </li>\n }\n</ul>\n" }]
|
|
915
918
|
}], propDecorators: { _tabUIElements: [{
|
|
916
919
|
type: ViewChildren,
|
|
917
920
|
args: ['tabItem']
|
|
@@ -1340,14 +1343,14 @@ class IconTabBarTextTypeTabItemComponent {
|
|
|
1340
1343
|
return this._elementRef.nativeElement;
|
|
1341
1344
|
}
|
|
1342
1345
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconTabBarTextTypeTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: IconTabBarTextTypeTabItemComponent, isStandalone: true, selector: "[fdp-icon-tab-bar-text-type-tab-item]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: false, isRequired: false, transformFunction: null }, layoutMode: { classPropertyName: "layoutMode", publicName: "layoutMode", isSignal: false, isRequired: false, transformFunction: null }, colorAssociations: { classPropertyName: "colorAssociations", publicName: "colorAssociations", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, classAttribute: "fd-icon-tab-bar__tab" }, ngImport: i0, template: "@if (layoutMode === 'row') {\n
|
|
1346
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: IconTabBarTextTypeTabItemComponent, isStandalone: true, selector: "[fdp-icon-tab-bar-text-type-tab-item]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: false, isRequired: false, transformFunction: null }, layoutMode: { classPropertyName: "layoutMode", publicName: "layoutMode", isSignal: false, isRequired: false, transformFunction: null }, colorAssociations: { classPropertyName: "colorAssociations", publicName: "colorAssociations", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, classAttribute: "fd-icon-tab-bar__tab" }, ngImport: i0, template: "@if (item?.titleTemplate) {\n <ng-template [ngTemplateOutlet]=\"item?.titleTemplate || null\"></ng-template>\n} @else {\n @if (layoutMode === 'row') {\n <span class=\"fd-icon-tab-bar__tag\">\n {{ item?.label | fdkAsyncOrSync }}\n @if (item?.counter | fdkAsyncOrSync; as itemCounter) {\n ({{ itemCounter }})\n }\n </span>\n } @else {\n <span class=\"fd-icon-tab-bar__counter\">{{ item?.counter }}</span>\n <span class=\"fd-icon-tab-bar__tag\">{{ item?.label | fdkAsyncOrSync }}</span>\n }\n @if (item?.badge) {\n <span class=\"fd-icon-tab-bar__badge\"></span>\n }\n @if (item?.color | fdkAsyncOrSync; as itemColor) {\n <div class=\"screenreader-only\">\n {{ colorAssociations()?.[itemColor] || itemColor }}\n </div>\n }\n}\n", dependencies: [{ kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1344
1347
|
}
|
|
1345
1348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconTabBarTextTypeTabItemComponent, decorators: [{
|
|
1346
1349
|
type: Component,
|
|
1347
|
-
args: [{ selector: '[fdp-icon-tab-bar-text-type-tab-item]', standalone: true, imports: [AsyncOrSyncPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1350
|
+
args: [{ selector: '[fdp-icon-tab-bar-text-type-tab-item]', standalone: true, imports: [AsyncOrSyncPipe, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1348
1351
|
class: 'fd-icon-tab-bar__tab',
|
|
1349
1352
|
role: 'tab'
|
|
1350
|
-
}, template: "@if (layoutMode === 'row') {\n
|
|
1353
|
+
}, template: "@if (item?.titleTemplate) {\n <ng-template [ngTemplateOutlet]=\"item?.titleTemplate || null\"></ng-template>\n} @else {\n @if (layoutMode === 'row') {\n <span class=\"fd-icon-tab-bar__tag\">\n {{ item?.label | fdkAsyncOrSync }}\n @if (item?.counter | fdkAsyncOrSync; as itemCounter) {\n ({{ itemCounter }})\n }\n </span>\n } @else {\n <span class=\"fd-icon-tab-bar__counter\">{{ item?.counter }}</span>\n <span class=\"fd-icon-tab-bar__tag\">{{ item?.label | fdkAsyncOrSync }}</span>\n }\n @if (item?.badge) {\n <span class=\"fd-icon-tab-bar__badge\"></span>\n }\n @if (item?.color | fdkAsyncOrSync; as itemColor) {\n <div class=\"screenreader-only\">\n {{ colorAssociations()?.[itemColor] || itemColor }}\n </div>\n }\n}\n" }]
|
|
1351
1354
|
}], propDecorators: { item: [{
|
|
1352
1355
|
type: Input
|
|
1353
1356
|
}], layoutMode: [{
|
|
@@ -1605,7 +1608,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1605
1608
|
ButtonComponent,
|
|
1606
1609
|
IconComponent,
|
|
1607
1610
|
AsyncOrSyncPipe,
|
|
1608
|
-
IconTabBarTextTypeTabItemComponent
|
|
1611
|
+
IconTabBarTextTypeTabItemComponent,
|
|
1612
|
+
NgTemplateOutlet
|
|
1609
1613
|
], template: "<ng-container fdpIconBarDndContainer [draggable]=\"enableTabReordering\" (dropped)=\"_onDropped($event)\">\n <ul\n class=\"fd-icon-tab-bar__header\"\n [class.fd-dynamic-page__tabs]=\"_inDynamicPage\"\n role=\"tablist\"\n #tablist\n fdkOverflowList\n [isRtl]=\"isRtl\"\n [overflowOffset]=\"100\"\n fdpIconBarDndList\n dndOrientation=\"horizontal\"\n (overflowChanged)=\"_recalculateVisibleItems($event)\"\n >\n @for (item of tabs; track item.uId; let idx = $index) {\n <li\n [ngClass]=\"item.cssClasses\"\n [class.fd-icon-tab-bar__item--multi-click]=\"multiClick && item.subItems?.length\"\n fdkOverflowListItem\n fdpIconBarDndItem\n [dndSeparatorClass]=\"['fd-icon-tab-bar__item--dnd-separator']\"\n [dndItemData]=\"item\"\n class=\"fd-icon-tab-bar__item\"\n [class.fd-icon-tab-bar__item--closable]=\"item.closable\"\n [attr.aria-hidden]=\"item.hidden\"\n role=\"presentation\"\n >\n @if (!item.subItems?.length && !multiClick) {\n <a\n #tabItem\n fdp-icon-tab-bar-text-type-tab-item\n [item]=\"item\"\n [layoutMode]=\"layoutMode\"\n [colorAssociations]=\"colorAssociations()\"\n [attr.tabindex]=\"idx === 0 ? 0 : -1\"\n [attr.aria-selected]=\"item.uId === selectedUid\"\n (click)=\"_selectItem(item, $event)\"\n (keydown)=\"_keyDownHandler($event, item, idx)\"\n >\n </a>\n }\n @if (item.subItems?.length || multiClick) {\n <fdp-text-type-popover\n #tabItem\n #itemPopover\n [tabindex]=\"idx === 0 ? 0 : -1\"\n [parentTab]=\"item\"\n [layoutMode]=\"layoutMode\"\n [multiClick]=\"multiClick\"\n [selectedSubItemUid]=\"selectedUid\"\n [colorAssociations]=\"colorAssociations()\"\n (selectedSubItem)=\"_selectItem($event)\"\n (keydown)=\"_keyDownHandler($event, item, idx, itemPopover)\"\n (closeTab)=\"_closeTab($event)\"\n (selectedItem)=\"_selectItem(item)\"\n >\n </fdp-text-type-popover>\n }\n @if (item.closable) {\n <div class=\"fd-icon-tab-bar__button-container\">\n <button\n fd-button\n tabindex=\"-1\"\n class=\"fd-icon-tab-bar__button\"\n fdType=\"transparent\"\n (click)=\"_closeTab(item.uId)\"\n >\n <fd-icon glyph=\"decline\"></fd-icon>\n </button>\n </div>\n }\n </li>\n }\n @if (_extraItems$()) {\n <li 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 (closeTab)=\"_closeTab($event, true)\"\n >\n </fdp-text-type-popover>\n </li>\n }\n </ul>\n</ng-container>\n" }]
|
|
1610
1614
|
}], propDecorators: { _tabUIElements: [{
|
|
1611
1615
|
type: ViewChildren,
|
|
@@ -1623,6 +1627,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1623
1627
|
type: Output
|
|
1624
1628
|
}] } });
|
|
1625
1629
|
|
|
1630
|
+
class IconTabTitleDirective {
|
|
1631
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconTabTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1632
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: IconTabTitleDirective, isStandalone: true, selector: "[fdpIconTabBarTitleTemplate], [fdp-icon-tab-bar-title-template]", ngImport: i0 }); }
|
|
1633
|
+
}
|
|
1634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconTabTitleDirective, decorators: [{
|
|
1635
|
+
type: Directive,
|
|
1636
|
+
args: [{
|
|
1637
|
+
selector: '[fdpIconTabBarTitleTemplate], [fdp-icon-tab-bar-title-template]',
|
|
1638
|
+
standalone: true
|
|
1639
|
+
}]
|
|
1640
|
+
}] });
|
|
1641
|
+
|
|
1626
1642
|
let defaultIdIndex = 0;
|
|
1627
1643
|
class IconTabBarTabContentDirective {
|
|
1628
1644
|
constructor() {
|
|
@@ -1667,11 +1683,13 @@ class IconTabBarTabComponent {
|
|
|
1667
1683
|
this.id = input(`fdp-icon-tab-bar-tab-${defaultIdIndex++}`);
|
|
1668
1684
|
/** Content renderer. */
|
|
1669
1685
|
this.renderer = viewChild('renderer');
|
|
1686
|
+
/** Title template. */
|
|
1687
|
+
this.titleTemplate = contentChild(IconTabTitleDirective, { read: TemplateRef });
|
|
1670
1688
|
/** @hidden */
|
|
1671
1689
|
this.children = contentChildren(IconTabBarTabComponent);
|
|
1672
1690
|
}
|
|
1673
1691
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconTabBarTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: IconTabBarTabComponent, isStandalone: true, selector: "fdp-icon-tab-bar-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconFont: { classPropertyName: "iconFont", publicName: "iconFont", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "children", predicate: IconTabBarTabComponent, isSignal: true }], viewQueries: [{ propertyName: "renderer", first: true, predicate: ["renderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #renderer>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1692
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: IconTabBarTabComponent, isStandalone: true, selector: "fdp-icon-tab-bar-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconFont: { classPropertyName: "iconFont", publicName: "iconFont", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "titleTemplate", first: true, predicate: IconTabTitleDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "children", predicate: IconTabBarTabComponent, isSignal: true }], viewQueries: [{ propertyName: "renderer", first: true, predicate: ["renderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #renderer>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1675
1693
|
}
|
|
1676
1694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconTabBarTabComponent, decorators: [{
|
|
1677
1695
|
type: Component,
|
|
@@ -1880,6 +1898,7 @@ class IconTabBarComponent {
|
|
|
1880
1898
|
counter: tab.counter(),
|
|
1881
1899
|
renderer: tab.renderer(),
|
|
1882
1900
|
id: tab.id(),
|
|
1901
|
+
titleTemplate: tab.titleTemplate(),
|
|
1883
1902
|
subItems: tab.children().map((c) => this._generateTabConfig(c))
|
|
1884
1903
|
};
|
|
1885
1904
|
return tabConfig;
|