@fundamental-ngx/platform 0.61.2-rc.8 → 0.61.2
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-approval-flow.mjs +16 -16
- package/fesm2022/fundamental-ngx-platform-approval-flow.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-dynamic-page.mjs +3 -3
- package/fesm2022/fundamental-ngx-platform-dynamic-page.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-feed-input.mjs +2 -2
- package/fesm2022/fundamental-ngx-platform-feed-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-form.mjs +25 -28
- package/fesm2022/fundamental-ngx-platform-form.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-icon-tab-bar.mjs +9 -9
- package/fesm2022/fundamental-ngx-platform-icon-tab-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-link.mjs +2 -2
- package/fesm2022/fundamental-ngx-platform-link.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-list.mjs +23 -17
- package/fesm2022/fundamental-ngx-platform-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-message-popover.mjs +4 -4
- package/fesm2022/fundamental-ngx-platform-message-popover.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-search-field.mjs +6 -6
- package/fesm2022/fundamental-ngx-platform-search-field.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-settings-generator.mjs +4 -4
- package/fesm2022/fundamental-ngx-platform-settings-generator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-smart-filter-bar.mjs +25 -22
- package/fesm2022/fundamental-ngx-platform-smart-filter-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-split-menu-button.mjs +2 -3
- package/fesm2022/fundamental-ngx-platform-split-menu-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-table.mjs +40 -42
- package/fesm2022/fundamental-ngx-platform-table.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-value-help-dialog.mjs +6 -6
- package/fesm2022/fundamental-ngx-platform-value-help-dialog.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-variant-management.mjs +6 -6
- package/fesm2022/fundamental-ngx-platform-variant-management.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-wizard-generator.mjs +4 -4
- package/fesm2022/fundamental-ngx-platform-wizard-generator.mjs.map +1 -1
- package/package.json +5 -5
- package/schematics/ng-add/index.js +1 -1
- package/types/fundamental-ngx-platform-form.d.ts +1 -3
- package/types/fundamental-ngx-platform-icon-tab-bar.d.ts +1 -3
- package/types/fundamental-ngx-platform-list.d.ts +6 -2
- package/types/fundamental-ngx-platform-smart-filter-bar.d.ts +3 -4
- package/types/fundamental-ngx-platform-table.d.ts +1 -3
|
@@ -10,7 +10,6 @@ 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, FdTranslatePipe } from '@fundamental-ngx/i18n';
|
|
14
13
|
import * as i1 from '@angular/cdk/drag-drop';
|
|
15
14
|
import { ReplaySubject, Subject, fromEvent } from 'rxjs';
|
|
16
15
|
import { ScrollSpyDirective } from '@fundamental-ngx/core/scroll-spy';
|
|
@@ -649,11 +648,13 @@ class IconTabBarPopoverComponent extends IconTabBarPopoverBase {
|
|
|
649
648
|
* @description Flag representing position inside container left/right
|
|
650
649
|
*/
|
|
651
650
|
this.leftSide = false;
|
|
652
|
-
/**
|
|
653
|
-
|
|
651
|
+
/**
|
|
652
|
+
* @description Label for button
|
|
653
|
+
*/
|
|
654
|
+
this.label = 'more';
|
|
654
655
|
}
|
|
655
656
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconTabBarPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
656
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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\">{{ label
|
|
657
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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\">{{ label }}</span>\n <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n </button>\n </fd-popover-control>\n <fd-popover-body class=\"fd-icon-tab-bar\">\n <ul class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\" role=\"list\">\n @for (item of extraTabs; track item.uId; let idx = $index) {\n @if (isSeparators) {\n <li tabindex=\"-1\" class=\"fd-icon-tab-bar__icon-separator\">\n <fd-icon glyph=\"process\"></fd-icon>\n </li>\n }\n <li\n class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n role=\"listitem\"\n [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n [ngClass]=\"item.cssClasses\"\n tabindex=\"-1\"\n >\n <a\n class=\"fd-list__link fd-icon-tab-bar__list-link\"\n #tabItem\n [attr.data-flatIndex]=\"item.flatIndex\"\n tabindex=\"0\"\n (click)=\"_selectItem(item)\"\n (keydown)=\"_keyDownHandler($event, item, idx)\"\n >\n <span class=\"fd-icon-tab-bar__list-item-icon-container\">\n <span class=\"fd-list__icon fd-icon-tab-bar__list-item-icon\">\n <fd-icon [glyph]=\"item.icon | 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: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }] }); }
|
|
657
658
|
}
|
|
658
659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconTabBarPopoverComponent, decorators: [{
|
|
659
660
|
type: Component,
|
|
@@ -665,7 +666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
665
666
|
NgClass,
|
|
666
667
|
ButtonComponent,
|
|
667
668
|
AsyncOrSyncPipe
|
|
668
|
-
], 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\">{{ label
|
|
669
|
+
], 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\">{{ label }}</span>\n <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n </button>\n </fd-popover-control>\n <fd-popover-body class=\"fd-icon-tab-bar\">\n <ul class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\" role=\"list\">\n @for (item of extraTabs; track item.uId; let idx = $index) {\n @if (isSeparators) {\n <li tabindex=\"-1\" class=\"fd-icon-tab-bar__icon-separator\">\n <fd-icon glyph=\"process\"></fd-icon>\n </li>\n }\n <li\n class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n role=\"listitem\"\n [class.fd-icon-tab-bar__list-item--closable]=\"item.closable\"\n [ngClass]=\"item.cssClasses\"\n tabindex=\"-1\"\n >\n <a\n class=\"fd-list__link fd-icon-tab-bar__list-link\"\n #tabItem\n [attr.data-flatIndex]=\"item.flatIndex\"\n tabindex=\"0\"\n (click)=\"_selectItem(item)\"\n (keydown)=\"_keyDownHandler($event, item, idx)\"\n >\n <span class=\"fd-icon-tab-bar__list-item-icon-container\">\n <span class=\"fd-list__icon fd-icon-tab-bar__list-item-icon\">\n <fd-icon [glyph]=\"item.icon | 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" }]
|
|
669
670
|
}], propDecorators: { _tabExtraUIElements: [{
|
|
670
671
|
type: ViewChildren,
|
|
671
672
|
args: ['tabItem']
|
|
@@ -1474,7 +1475,7 @@ class TextTypePopoverComponent extends IconTabBarPopoverBase {
|
|
|
1474
1475
|
}, []);
|
|
1475
1476
|
}
|
|
1476
1477
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TextTypePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1477
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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\">
|
|
1478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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\">More</span>\n <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n </button>\n </fd-popover-control>\n <fd-popover-body class=\"fd-icon-tab-bar\">\n <ul\n fdpIconBarDndList\n class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n role=\"list\"\n >\n <ng-template [ngTemplateOutletContext]=\"{ level: 1, items: extraTabs }\" [ngTemplateOutlet]=\"subItem\">\n </ng-template>\n </ul>\n </fd-popover-body>\n </fd-popover>\n}\n@if (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: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { 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: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "component", type: IconTabBarTextTypeTabItemComponent, selector: "[fdp-icon-tab-bar-text-type-tab-item]", inputs: ["item", "layoutMode", "colorAssociations"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1478
1479
|
}
|
|
1479
1480
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TextTypePopoverComponent, decorators: [{
|
|
1480
1481
|
type: Component,
|
|
@@ -1488,9 +1489,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1488
1489
|
NgClass,
|
|
1489
1490
|
ButtonComponent,
|
|
1490
1491
|
IconComponent,
|
|
1491
|
-
IconTabBarTextTypeTabItemComponent
|
|
1492
|
-
|
|
1493
|
-
], 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\">{{\n ('platformIconTabBar.moreButton' | fdTranslate)()\n }}</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" }]
|
|
1492
|
+
IconTabBarTextTypeTabItemComponent
|
|
1493
|
+
], 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\">More</span>\n <fd-icon glyph=\"slim-arrow-down\" role=\"presentation\"></fd-icon>\n </button>\n </fd-popover-control>\n <fd-popover-body class=\"fd-icon-tab-bar\">\n <ul\n fdpIconBarDndList\n class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n role=\"list\"\n >\n <ng-template [ngTemplateOutletContext]=\"{ level: 1, items: extraTabs }\" [ngTemplateOutlet]=\"subItem\">\n </ng-template>\n </ul>\n </fd-popover-body>\n </fd-popover>\n}\n@if (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" }]
|
|
1494
1494
|
}], propDecorators: { _dropdownTrigger: [{
|
|
1495
1495
|
type: ViewChild,
|
|
1496
1496
|
args: ['dropdownTrigger', { read: ElementRef }]
|