@fundamental-ngx/platform 0.66.0-rc.4 → 0.66.0-rc.5
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 +90 -28
- package/fesm2022/fundamental-ngx-platform-icon-tab-bar.mjs.map +1 -1
- package/package.json +4 -4
- package/schematics/ng-add/index.js +1 -1
- package/schematics/package.json +1 -1
- package/types/fundamental-ngx-platform-icon-tab-bar.d.ts +42 -2
|
@@ -242,6 +242,24 @@ class IconTabBarBase {
|
|
|
242
242
|
this.selectedUidChange.emit(this.selectedUid);
|
|
243
243
|
this.selected.emit(selectedItem);
|
|
244
244
|
}
|
|
245
|
+
/**
|
|
246
|
+
* @hidden
|
|
247
|
+
* Non-emitting synchronization hook, invoked when the parent drives the [selectedUid]
|
|
248
|
+
* input (e.g. scroll-spy crossing a tab boundary in stackContent mode, #14593).
|
|
249
|
+
*
|
|
250
|
+
* Unlike `_selectExtraItem`, this must NOT call `_selectItem` — doing so would emit
|
|
251
|
+
* `(selected)` back to the parent, which would re-run `_scrollToPanel` and produce an
|
|
252
|
+
* unwanted backward scroll jump on every boundary crossing. It applies only the visual
|
|
253
|
+
* side-effects of selection. Subclasses override this to keep their selection-derived
|
|
254
|
+
* state (e.g. process type's `_currentStepIndex`) in sync without re-emitting.
|
|
255
|
+
*/
|
|
256
|
+
_syncSelectedItem(item) {
|
|
257
|
+
if (item.color) {
|
|
258
|
+
item.cssClasses = [`fd-icon-tab-bar__item--${item.color}`];
|
|
259
|
+
}
|
|
260
|
+
item.badge = false;
|
|
261
|
+
this._triggerRecalculationVisibleItems();
|
|
262
|
+
}
|
|
245
263
|
/**
|
|
246
264
|
* @hidden
|
|
247
265
|
* Resets and hides extra tabs.
|
|
@@ -254,17 +272,19 @@ class IconTabBarBase {
|
|
|
254
272
|
}
|
|
255
273
|
/**
|
|
256
274
|
* @hidden
|
|
257
|
-
* Handles changes to the selected UID.
|
|
275
|
+
* Handles changes to the selected UID driven by the parent (i.e. the [selectedUid]
|
|
276
|
+
* input changed). Delegates to the non-emitting `_syncSelectedItem` hook so that
|
|
277
|
+
* process type can keep `_currentStepIndex` in sync without re-emitting `(selected)`.
|
|
278
|
+
* For ALL parent-driven [selectedUid] changes — not just scroll-spy crossings — no
|
|
279
|
+
* `(selected)` re-emit occurs, to avoid the scroll-jump loop (#14593).
|
|
258
280
|
*/
|
|
259
281
|
_handleSelectedUidChange() {
|
|
260
|
-
const
|
|
261
|
-
|
|
262
|
-
if (
|
|
263
|
-
|
|
264
|
-
}
|
|
265
|
-
else if (selected) {
|
|
266
|
-
this._selectExtraItem(selected);
|
|
282
|
+
const item = this._extraTabs$().find((tab) => tab.uId === this.selectedUid) ??
|
|
283
|
+
this.tabs.find((tab) => tab.uId === this.selectedUid);
|
|
284
|
+
if (!item) {
|
|
285
|
+
return;
|
|
267
286
|
}
|
|
287
|
+
this._syncSelectedItem(item);
|
|
268
288
|
}
|
|
269
289
|
/**
|
|
270
290
|
* @hidden
|
|
@@ -656,7 +676,7 @@ class IconTabBarPopoverComponent extends IconTabBarPopoverBase {
|
|
|
656
676
|
this._defaultLabel = resolveTranslationSignal('platformIconTabBar.moreButton');
|
|
657
677
|
}
|
|
658
678
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: IconTabBarPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
659
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", 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 || _defaultLabel() }}</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
|
|
679
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", 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 || _defaultLabel() }}</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 @if (item.icon | fdkAsyncOrSync) {\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 }\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", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "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", "ariaModal"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
660
680
|
}
|
|
661
681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: IconTabBarPopoverComponent, decorators: [{
|
|
662
682
|
type: Component,
|
|
@@ -668,7 +688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
|
|
|
668
688
|
NgClass,
|
|
669
689
|
ButtonComponent,
|
|
670
690
|
AsyncOrSyncPipe
|
|
671
|
-
], 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 || _defaultLabel() }}</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
|
|
691
|
+
], 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 || _defaultLabel() }}</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 @if (item.icon | fdkAsyncOrSync) {\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 }\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" }]
|
|
672
692
|
}], propDecorators: { _tabExtraUIElements: [{
|
|
673
693
|
type: ViewChildren,
|
|
674
694
|
args: ['tabItem']
|
|
@@ -812,6 +832,37 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
812
832
|
* @description select extra item inside popover
|
|
813
833
|
*/
|
|
814
834
|
_selectExtraItem(selectedItem) {
|
|
835
|
+
this._selectItem(selectedItem);
|
|
836
|
+
this._applyStepOverflow(selectedItem);
|
|
837
|
+
}
|
|
838
|
+
/**
|
|
839
|
+
* @hidden
|
|
840
|
+
* @description recalculate _nextSteps and _prevSteps array if we have extra items
|
|
841
|
+
*/
|
|
842
|
+
_recalculateVisibleItems(extraItems) {
|
|
843
|
+
const amountOfPrevSteps = this._currentStepIndex > extraItems ? extraItems : this._currentStepIndex;
|
|
844
|
+
this.recalculateItemsByPrevArr(extraItems, amountOfPrevSteps);
|
|
845
|
+
this._cd.markForCheck();
|
|
846
|
+
}
|
|
847
|
+
/**
|
|
848
|
+
* @hidden
|
|
849
|
+
* Non-emitting synchronization hook used when the parent drives [selectedUid]
|
|
850
|
+
* (e.g. scroll-spy in stackContent mode, #14593). Keeps `_currentStepIndex` and the
|
|
851
|
+
* overflow arrays in sync with the active step WITHOUT calling `_selectItem`, so no
|
|
852
|
+
* `(selected)` is re-emitted and no backward scroll jump occurs.
|
|
853
|
+
*/
|
|
854
|
+
_syncSelectedItem(selectedItem) {
|
|
855
|
+
super._syncSelectedItem(selectedItem); // handles cssClasses + badge reset
|
|
856
|
+
this._applyStepOverflow(selectedItem); // process-specific: keeps _currentStepIndex in sync
|
|
857
|
+
}
|
|
858
|
+
/**
|
|
859
|
+
* @hidden
|
|
860
|
+
* Computes the prev/next overflow strategy for `selectedItem`, updates `_currentStepIndex`
|
|
861
|
+
* and the left/right button visibility, then schedules the matching overflow recalculation.
|
|
862
|
+
* Shared by `_selectExtraItem` (popover click) and `_syncSelectedItem` (parent-driven
|
|
863
|
+
* selection). It never emits, so callers that need `(selected)` emitted must do so themselves.
|
|
864
|
+
*/
|
|
865
|
+
_applyStepOverflow(selectedItem) {
|
|
815
866
|
this._currentStepIndex = selectedItem.index;
|
|
816
867
|
let amountOfPreviousSteps;
|
|
817
868
|
let amountOfNextSteps;
|
|
@@ -831,7 +882,6 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
831
882
|
isPreviousStepsStrategy = true;
|
|
832
883
|
this._showLeftBtn = amountOfPreviousSteps > 0;
|
|
833
884
|
}
|
|
834
|
-
this._selectItem(selectedItem);
|
|
835
885
|
afterNextRender(() => {
|
|
836
886
|
if (this.overflowDirective && !this._destroyed) {
|
|
837
887
|
const extra = this.overflowDirective.getAmountOfExtraItems();
|
|
@@ -842,16 +892,6 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
842
892
|
}
|
|
843
893
|
}, { injector: this._injector });
|
|
844
894
|
}
|
|
845
|
-
/**
|
|
846
|
-
* @hidden
|
|
847
|
-
* @param extraItems
|
|
848
|
-
* @description recalculate _nextSteps and _prevSteps array if we have extra items
|
|
849
|
-
*/
|
|
850
|
-
_recalculateVisibleItems(extraItems) {
|
|
851
|
-
const amountOfPrevSteps = this._currentStepIndex > extraItems ? extraItems : this._currentStepIndex;
|
|
852
|
-
this.recalculateItemsByPrevArr(extraItems, amountOfPrevSteps);
|
|
853
|
-
this._cd.markForCheck();
|
|
854
|
-
}
|
|
855
895
|
/** @hidden */
|
|
856
896
|
_clearExtraList() {
|
|
857
897
|
this._nextSteps = [];
|
|
@@ -861,6 +901,17 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
861
901
|
item.cssClasses = item.cssClasses.filter((cssClass) => cssClass !== ICON_TAB_HIDDEN_CLASS_NAME);
|
|
862
902
|
});
|
|
863
903
|
}
|
|
904
|
+
/**
|
|
905
|
+
* @hidden
|
|
906
|
+
* Snapshots a tab for the prev/next-steps popover. We cannot use `structuredClone` here:
|
|
907
|
+
* projected tabs (stackContent mode) carry non-cloneable fields such as `titleTemplate`
|
|
908
|
+
* / `renderer` (Angular TemplateRefs) and would throw DataCloneError. A shallow copy with
|
|
909
|
+
* a fresh `cssClasses` array is enough — the array is copied so the subsequent
|
|
910
|
+
* `ICON_TAB_HIDDEN_CLASS_NAME` push on the original does not leak into the popover copy.
|
|
911
|
+
*/
|
|
912
|
+
_cloneTab(tab) {
|
|
913
|
+
return { ...tab, cssClasses: [...tab.cssClasses] };
|
|
914
|
+
}
|
|
864
915
|
/**
|
|
865
916
|
* @hidden
|
|
866
917
|
* @param extraItems
|
|
@@ -876,7 +927,7 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
876
927
|
const tabs = [...this.tabs];
|
|
877
928
|
const visibleAmountOfItems = tabs.length - extraItems;
|
|
878
929
|
for (let i = tabs.length - amountOfNextSteps; i < tabs.length; i++) {
|
|
879
|
-
this._nextSteps.push(
|
|
930
|
+
this._nextSteps.push(this._cloneTab(tabs[i]));
|
|
880
931
|
tabs[i].hidden = true;
|
|
881
932
|
tabs[i].cssClasses.push(ICON_TAB_HIDDEN_CLASS_NAME);
|
|
882
933
|
}
|
|
@@ -889,7 +940,7 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
889
940
|
let amountOfPrevSteps = extraItems - this._nextSteps.length;
|
|
890
941
|
let nextIndex = this._firstVisibleTabIndex - 1;
|
|
891
942
|
while (amountOfPrevSteps > 0) {
|
|
892
|
-
this._prevSteps.push(
|
|
943
|
+
this._prevSteps.push(this._cloneTab(tabs[nextIndex]));
|
|
893
944
|
tabs[nextIndex].hidden = true;
|
|
894
945
|
tabs[nextIndex].cssClasses.push(ICON_TAB_HIDDEN_CLASS_NAME);
|
|
895
946
|
--nextIndex;
|
|
@@ -917,7 +968,7 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
917
968
|
const tabs = [...this.tabs];
|
|
918
969
|
const visibleAmountOfItems = tabs.length - extraItems;
|
|
919
970
|
for (let i = amountOfPreviousSteps - 1; i >= 0; i--) {
|
|
920
|
-
this._prevSteps.push(
|
|
971
|
+
this._prevSteps.push(this._cloneTab(tabs[i]));
|
|
921
972
|
tabs[i].hidden = true;
|
|
922
973
|
tabs[i].cssClasses.push(ICON_TAB_HIDDEN_CLASS_NAME);
|
|
923
974
|
}
|
|
@@ -931,7 +982,7 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
931
982
|
let amountOfNextSteps = extraItems - this._prevSteps.length;
|
|
932
983
|
let nextIndex = this._prevSteps.length ? this._prevSteps.length + visibleAmountOfItems : visibleAmountOfItems;
|
|
933
984
|
while (amountOfNextSteps > 0) {
|
|
934
|
-
this._nextSteps.push(
|
|
985
|
+
this._nextSteps.push(this._cloneTab(tabs[nextIndex]));
|
|
935
986
|
tabs[nextIndex].hidden = true;
|
|
936
987
|
tabs[nextIndex].cssClasses.push(ICON_TAB_HIDDEN_CLASS_NAME);
|
|
937
988
|
++nextIndex;
|
|
@@ -951,7 +1002,7 @@ class IconTabBarProcessTypeComponent extends ClosableIconTabBar {
|
|
|
951
1002
|
provide: IconTabBarBase,
|
|
952
1003
|
useExisting: IconTabBarProcessTypeComponent
|
|
953
1004
|
}
|
|
954
|
-
], 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]=\"item.uId === selectedUid ? 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", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1005
|
+
], 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 [showItemLabel]=\"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]=\"item.uId === selectedUid ? 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 [showItemLabel]=\"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", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
955
1006
|
}
|
|
956
1007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: IconTabBarProcessTypeComponent, decorators: [{
|
|
957
1008
|
type: Component,
|
|
@@ -968,7 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
|
|
|
968
1019
|
ButtonComponent,
|
|
969
1020
|
AsyncOrSyncPipe,
|
|
970
1021
|
NgTemplateOutlet
|
|
971
|
-
], 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]=\"item.uId === selectedUid ? 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" }]
|
|
1022
|
+
], 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 [showItemLabel]=\"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]=\"item.uId === selectedUid ? 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 [showItemLabel]=\"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" }]
|
|
972
1023
|
}], propDecorators: { _tabUIElements: [{
|
|
973
1024
|
type: ViewChildren,
|
|
974
1025
|
args: ['tabItem']
|
|
@@ -2085,7 +2136,18 @@ class IconTabBarComponent {
|
|
|
2085
2136
|
return;
|
|
2086
2137
|
}
|
|
2087
2138
|
const activeTab = this.tabDirectives().find((tab) => tab.id() === id);
|
|
2088
|
-
|
|
2139
|
+
const uId = activeTab?.uId();
|
|
2140
|
+
this._selectedUid.set(uId || undefined);
|
|
2141
|
+
// Scroll-spy moved the active tab because the user scrolled past a boundary. Notify
|
|
2142
|
+
// consumers via (iconTabSelected) and update the active tab, but do NOT re-scroll:
|
|
2143
|
+
// the content is already at this panel, so scrolling here would jump back (#14593).
|
|
2144
|
+
// The header's _syncSelectedItem keeps the selection visually in sync separately.
|
|
2145
|
+
const selectedItem = this._flatTabs$().find((tab) => tab.uId === uId);
|
|
2146
|
+
if (selectedItem && this.activeTab !== selectedItem) {
|
|
2147
|
+
this.activeTab = selectedItem;
|
|
2148
|
+
this._tabRenderer$.set(selectedItem);
|
|
2149
|
+
this.iconTabSelected.emit(selectedItem);
|
|
2150
|
+
}
|
|
2089
2151
|
if (scroll && activeTab) {
|
|
2090
2152
|
this._scrollToPanel(activeTab);
|
|
2091
2153
|
}
|