@fundamental-ngx/platform 0.57.2-rc.2 → 0.57.2-rc.3
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.
|
@@ -899,7 +899,7 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
899
899
|
provide: IconTabBarBase,
|
|
900
900
|
useExisting: IconTabBarProcessTypeComponent
|
|
901
901
|
}
|
|
902
|
-
], 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 [attr.aria-level]=\"tabHeadingLevel()\"\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
|
|
902
|
+
], 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 && _prevSteps.length) {\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 [attr.aria-level]=\"tabHeadingLevel()\"\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 && _nextSteps.length) {\n <li\n role=\"presentation\"\n class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow fd-icon-tab-bar__item--overflow-right\"\n >\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"] }] }); }
|
|
903
903
|
}
|
|
904
904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: IconTabBarProcessTypeComponent, decorators: [{
|
|
905
905
|
type: Component,
|
|
@@ -916,7 +916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
|
|
|
916
916
|
ButtonComponent,
|
|
917
917
|
AsyncOrSyncPipe,
|
|
918
918
|
NgTemplateOutlet
|
|
919
|
-
], 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 [attr.aria-level]=\"tabHeadingLevel()\"\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
|
|
919
|
+
], 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 && _prevSteps.length) {\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 [attr.aria-level]=\"tabHeadingLevel()\"\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 && _nextSteps.length) {\n <li\n role=\"presentation\"\n class=\"fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow fd-icon-tab-bar__item--overflow-right\"\n >\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" }]
|
|
920
920
|
}], propDecorators: { _tabUIElements: [{
|
|
921
921
|
type: ViewChildren,
|
|
922
922
|
args: ['tabItem']
|