@fundamental-ngx/platform 0.57.10 → 0.57.12
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/fesm2022/fundamental-ngx-platform-icon-tab-bar.mjs +13 -6
- package/fesm2022/fundamental-ngx-platform-icon-tab-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-table.mjs +5 -7
- package/fesm2022/fundamental-ngx-platform-table.mjs.map +1 -1
- package/icon-tab-bar/index.d.ts +5 -1
- package/package.json +8 -8
- package/schematics/ng-add/index.js +1 -1
- package/table/index.d.ts +1 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, signal, input, inject, ChangeDetectorRef, NgZone, DestroyRef, isDevMode, ElementRef, ViewChild, Output, Input, Directive, ViewChildren, Component, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, viewChild, contentChild, TemplateRef, contentChildren, model, output, viewChildren, computed, HostBinding, Optional, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, signal, input, inject, ChangeDetectorRef, NgZone, DestroyRef, isDevMode, ElementRef, ViewChild, Output, Input, Directive, isSignal, ViewChildren, Component, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, viewChild, contentChild, TemplateRef, contentChildren, model, output, viewChildren, computed, HostBinding, Optional, 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';
|
|
@@ -10,6 +10,7 @@ import { NgClass, NgTemplateOutlet, SlicePipe } from '@angular/common';
|
|
|
10
10
|
import { ButtonComponent } from '@fundamental-ngx/core/button';
|
|
11
11
|
import { IconComponent, FD_DEFAULT_ICON_FONT_FAMILY } from '@fundamental-ngx/core/icon';
|
|
12
12
|
import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
|
|
13
|
+
import { resolveTranslationSignal } from '@fundamental-ngx/i18n';
|
|
13
14
|
import { cloneDeep } from 'lodash-es';
|
|
14
15
|
import * as i1 from '@angular/cdk/drag-drop';
|
|
15
16
|
import { ReplaySubject, Subject, fromEvent } from 'rxjs';
|
|
@@ -652,10 +653,14 @@ class IconTabBarPopoverComponent extends IconTabBarPopoverBase {
|
|
|
652
653
|
/**
|
|
653
654
|
* @description Label for button
|
|
654
655
|
*/
|
|
655
|
-
this.label = '
|
|
656
|
+
this.label = resolveTranslationSignal('platformIconTabBar.moreButtonLabel');
|
|
657
|
+
}
|
|
658
|
+
/** @hidden */
|
|
659
|
+
get _labelText() {
|
|
660
|
+
return isSignal(this.label) ? this.label() : this.label;
|
|
656
661
|
}
|
|
657
662
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: IconTabBarPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
658
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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\" tabindex=\"-1\">\n <span class=\"fd-icon-tab-bar__overflow-text\">{{
|
|
663
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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\" tabindex=\"-1\">\n <span class=\"fd-icon-tab-bar__overflow-text\">{{ _labelText }}</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 | fdkAsyncOrSync\"></fd-icon>\n </span>\n </span>\n @if (showItemLabel && (item.label | fdkAsyncOrSync)) {\n <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{\n item.label | fdkAsyncOrSync\n }}</span>\n }\n @if (item.badge) {\n <span class=\"fd-icon-tab-bar__badge\"></span>\n }\n @if (item.counter | fdkAsyncOrSync; as itemCounter) {\n <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n >({{ itemCounter }})\n </span>\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.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", "preventSpaceKeyScroll"] }, { 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], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }] }); }
|
|
659
664
|
}
|
|
660
665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: IconTabBarPopoverComponent, decorators: [{
|
|
661
666
|
type: Component,
|
|
@@ -667,7 +672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
667
672
|
NgClass,
|
|
668
673
|
ButtonComponent,
|
|
669
674
|
AsyncOrSyncPipe
|
|
670
|
-
], template: "<fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n <fd-popover-control>\n <button class=\"fd-icon-tab-bar__overflow\" tabindex=\"-1\">\n <span class=\"fd-icon-tab-bar__overflow-text\">{{
|
|
675
|
+
], template: "<fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n <fd-popover-control>\n <button class=\"fd-icon-tab-bar__overflow\" tabindex=\"-1\">\n <span class=\"fd-icon-tab-bar__overflow-text\">{{ _labelText }}</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 | fdkAsyncOrSync\"></fd-icon>\n </span>\n </span>\n @if (showItemLabel && (item.label | fdkAsyncOrSync)) {\n <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{\n item.label | fdkAsyncOrSync\n }}</span>\n }\n @if (item.badge) {\n <span class=\"fd-icon-tab-bar__badge\"></span>\n }\n @if (item.counter | fdkAsyncOrSync; as itemCounter) {\n <span class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n >({{ itemCounter }})\n </span>\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.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" }]
|
|
671
676
|
}], propDecorators: { _tabExtraUIElements: [{
|
|
672
677
|
type: ViewChildren,
|
|
673
678
|
args: ['tabItem']
|
|
@@ -1432,6 +1437,8 @@ class TextTypePopoverComponent extends IconTabBarPopoverBase {
|
|
|
1432
1437
|
this._popoverTriggers = [
|
|
1433
1438
|
{ trigger: 'click', openAction: true, closeAction: true, stopPropagation: true }
|
|
1434
1439
|
];
|
|
1440
|
+
/** @hidden */
|
|
1441
|
+
this._moreLabel = resolveTranslationSignal('platformIconTabBar.moreButtonLabel');
|
|
1435
1442
|
}
|
|
1436
1443
|
/** @hidden */
|
|
1437
1444
|
ngOnChanges(changes) {
|
|
@@ -1476,7 +1483,7 @@ class TextTypePopoverComponent extends IconTabBarPopoverBase {
|
|
|
1476
1483
|
}, []);
|
|
1477
1484
|
}
|
|
1478
1485
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TextTypePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1479
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TextTypePopoverComponent, isStandalone: true, selector: "fdp-text-type-popover", inputs: { multiClick: "multiClick", layoutMode: "layoutMode", isExtraItemsMode: "isExtraItemsMode", parentTab: "parentTab", selectedSubItemUid: "selectedSubItemUid", tabindex: "tabindex" }, outputs: { selectedSubItem: "selectedSubItem", selectedItem: "selectedItem" }, viewQueries: [{ propertyName: "_dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true, read: ElementRef }, { propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true, read: ElementRef }], 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\" tabindex=\"-1\">\n <span class=\"fd-icon-tab-bar__overflow-text\">
|
|
1486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TextTypePopoverComponent, isStandalone: true, selector: "fdp-text-type-popover", inputs: { multiClick: "multiClick", layoutMode: "layoutMode", isExtraItemsMode: "isExtraItemsMode", parentTab: "parentTab", selectedSubItemUid: "selectedSubItemUid", tabindex: "tabindex" }, outputs: { selectedSubItem: "selectedSubItem", selectedItem: "selectedItem" }, viewQueries: [{ propertyName: "_dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true, read: ElementRef }, { propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true, read: ElementRef }], 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\" tabindex=\"-1\">\n <span class=\"fd-icon-tab-bar__overflow-text\">{{ _moreLabel() }}</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 (multiClick) {\n <a\n #dropdownTrigger\n fdp-icon-tab-bar-text-type-tab-item\n [item]=\"parentTab\"\n [attr.aria-selected]=\"_containsSelected\"\n [colorAssociations]=\"colorAssociations()\"\n [layoutMode]=\"layoutMode\"\n [attr.tabindex]=\"tabindex\"\n (click)=\"selectedItem.emit()\"\n >\n </a>\n}\n@if (!isExtraItemsMode && parentTab && parentTab.subItems?.length) {\n <fd-popover\n [class.fd-icon-tab-bar__popover]=\"multiClick\"\n placement=\"bottom-end\"\n [focusAutoCapture]=\"true\"\n [triggers]=\"_popoverTriggers\"\n [focusTrapped]=\"true\"\n #popover\n >\n <fd-popover-control>\n @if (multiClick) {\n <div class=\"fd-icon-tab-bar__button-container\">\n <button fd-button fdType=\"transparent\" tabindex=\"-1\" class=\"fd-icon-tab-bar__button\">\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n </button>\n </div>\n } @else {\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 }\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 tabindex=\"-1\"\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", "preventSpaceKeyScroll"] }, { 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], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: IconTabBarTextTypeTabItemComponent, selector: "[fdp-icon-tab-bar-text-type-tab-item]", inputs: ["item", "layoutMode", "colorAssociations"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1480
1487
|
}
|
|
1481
1488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TextTypePopoverComponent, decorators: [{
|
|
1482
1489
|
type: Component,
|
|
@@ -1491,7 +1498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1491
1498
|
ButtonComponent,
|
|
1492
1499
|
IconComponent,
|
|
1493
1500
|
IconTabBarTextTypeTabItemComponent
|
|
1494
|
-
], 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\" tabindex=\"-1\">\n <span class=\"fd-icon-tab-bar__overflow-text\">
|
|
1501
|
+
], 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\" tabindex=\"-1\">\n <span class=\"fd-icon-tab-bar__overflow-text\">{{ _moreLabel() }}</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 (multiClick) {\n <a\n #dropdownTrigger\n fdp-icon-tab-bar-text-type-tab-item\n [item]=\"parentTab\"\n [attr.aria-selected]=\"_containsSelected\"\n [colorAssociations]=\"colorAssociations()\"\n [layoutMode]=\"layoutMode\"\n [attr.tabindex]=\"tabindex\"\n (click)=\"selectedItem.emit()\"\n >\n </a>\n}\n@if (!isExtraItemsMode && parentTab && parentTab.subItems?.length) {\n <fd-popover\n [class.fd-icon-tab-bar__popover]=\"multiClick\"\n placement=\"bottom-end\"\n [focusAutoCapture]=\"true\"\n [triggers]=\"_popoverTriggers\"\n [focusTrapped]=\"true\"\n #popover\n >\n <fd-popover-control>\n @if (multiClick) {\n <div class=\"fd-icon-tab-bar__button-container\">\n <button fd-button fdType=\"transparent\" tabindex=\"-1\" class=\"fd-icon-tab-bar__button\">\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n </button>\n </div>\n } @else {\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 }\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 tabindex=\"-1\"\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" }]
|
|
1495
1502
|
}], propDecorators: { _dropdownTrigger: [{
|
|
1496
1503
|
type: ViewChild,
|
|
1497
1504
|
args: ['dropdownTrigger', { read: ElementRef }]
|