@ethlete/cdk 4.53.2 → 4.53.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.
- package/CHANGELOG.md +6 -0
- package/fesm2022/ethlete-cdk.mjs +4 -3
- package/fesm2022/ethlete-cdk.mjs.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @ethlete/cdk
|
|
2
2
|
|
|
3
|
+
## 4.53.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`519cfa2`](https://github.com/ethlete-io/ethdk/commit/519cfa2b0ffda9b1332e861441026209960ae315) Thanks [@TomTomB](https://github.com/TomTomB)! - Fix inactive inline tabs changing their sizing in comparison to when they are active
|
|
8
|
+
|
|
3
9
|
## 4.53.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/fesm2022/ethlete-cdk.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i1 from '@angular/cdk/portal';
|
|
2
2
|
import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
|
|
3
|
-
import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgClass, NgTemplateOutlet, DOCUMENT, Location } from '@angular/common';
|
|
3
|
+
import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgClass, NgTemplateOutlet, DOCUMENT, Location, NgStyle } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
5
|
import { InjectionToken, inject, input, booleanAttribute, computed, isDevMode, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ContentChild, ContentChildren, ElementRef, Injector, HostBinding, numberAttribute, PLATFORM_ID, Renderer2, effect, DestroyRef, signal, contentChildren, viewChild, viewChildren, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, assertInInjectionContext, forwardRef, EventEmitter, Output, ViewChildren, contentChild, runInInjectionContext, Optional, Inject, SkipSelf, HostListener, untracked, NgZone, NgModule, isSignal, Attribute } from '@angular/core';
|
|
6
6
|
import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, merge, timer, takeWhile, filter, fromEvent, Subject, Observable, debounceTime, withLatestFrom, distinctUntilChanged, take, skipUntil, skipWhile, catchError, throwError, defer, partition, from, finalize, Subscription } from 'rxjs';
|
|
@@ -18965,7 +18965,7 @@ class InlineTabsComponent {
|
|
|
18965
18965
|
provide: TAB_GROUP,
|
|
18966
18966
|
useExisting: InlineTabsComponent,
|
|
18967
18967
|
},
|
|
18968
|
-
], queries: [{ propertyName: "_allTabs", predicate: InlineTabComponent, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], ngImport: i0, template: "<et-inline-tab-header\n #tabHeader\n [selectedIndex]=\"selectedIndex || 0\"\n [ngClass]=\"tabHeaderClasses\"\n [itemSize]=\"itemSize\"\n [renderButtons]=\"renderButtons\"\n [scrollableClass]=\"scrollableClass\"\n [renderMasks]=\"renderMasks\"\n [renderScrollbars]=\"renderScrollbars\"\n [direction]=\"direction()\"\n (indexFocused)=\"_focusChanged($event)\"\n (selectFocusedIndex)=\"_handleEnter($event)\"\n>\n @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n <div\n [id]=\"_getTabLabelId(i)\"\n [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"_tabs.length\"\n [attr.aria-controls]=\"_getTabContentId(i)\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledby ? tab.ariaLabelledby : null\"\n [disabled]=\"tab.disabled\"\n [class.et-inline-tab-label--active]=\"selectedIndex === i\"\n [class.et-inline-tab-label--is-text]=\"!!tab.textLabel\"\n [fitUnderlineToContent]=\"tab.fitUnderlineToContent\"\n (click)=\"_handleClick(tab, tabHeader, i)\"\n (cdkFocusChange)=\"_tabFocusChanged($event, i)\"\n role=\"tab\"\n etInlineTabLabelWrapper\n cdkMonitorElementFocus\n >\n <span class=\"et-tab-content\">\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n } @else {\n {{ tab.textLabel }}\n }\n </span>\n </div>\n }\n</et-inline-tab-header>\n\n<div #tabBodyWrapper class=\"et-inline-tabs-body-wrapper\">\n @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n <et-inline-tab-body\n [id]=\"_getTabContentId(i)\"\n [attr.tabindex]=\"contentTabIndex !== null && selectedIndex === i ? contentTabIndex : null\"\n [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n [
|
|
18968
|
+
], queries: [{ propertyName: "_allTabs", predicate: InlineTabComponent, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], ngImport: i0, template: "<et-inline-tab-header\n #tabHeader\n [selectedIndex]=\"selectedIndex || 0\"\n [ngClass]=\"tabHeaderClasses\"\n [itemSize]=\"itemSize\"\n [renderButtons]=\"renderButtons\"\n [scrollableClass]=\"scrollableClass\"\n [renderMasks]=\"renderMasks\"\n [renderScrollbars]=\"renderScrollbars\"\n [direction]=\"direction()\"\n (indexFocused)=\"_focusChanged($event)\"\n (selectFocusedIndex)=\"_handleEnter($event)\"\n>\n @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n <div\n [id]=\"_getTabLabelId(i)\"\n [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"_tabs.length\"\n [attr.aria-controls]=\"_getTabContentId(i)\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledby ? tab.ariaLabelledby : null\"\n [disabled]=\"tab.disabled\"\n [class.et-inline-tab-label--active]=\"selectedIndex === i\"\n [class.et-inline-tab-label--is-text]=\"!!tab.textLabel\"\n [fitUnderlineToContent]=\"tab.fitUnderlineToContent\"\n (click)=\"_handleClick(tab, tabHeader, i)\"\n (cdkFocusChange)=\"_tabFocusChanged($event, i)\"\n role=\"tab\"\n etInlineTabLabelWrapper\n cdkMonitorElementFocus\n >\n <span class=\"et-tab-content\">\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n } @else {\n {{ tab.textLabel }}\n }\n </span>\n </div>\n }\n</et-inline-tab-header>\n\n<div #tabBodyWrapper class=\"et-inline-tabs-body-wrapper\">\n @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n <et-inline-tab-body\n [id]=\"_getTabContentId(i)\"\n [attr.tabindex]=\"contentTabIndex !== null && selectedIndex === i ? contentTabIndex : null\"\n [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n [ngStyle]=\"{\n opacity: selectedIndex !== i ? 0 : 1,\n 'pointer-events': selectedIndex !== i ? 'none' : null,\n visibility: selectedIndex !== i ? 'hidden' : null,\n }\"\n [attr.inert]=\"selectedIndex !== i ? '' : null\"\n [attr.aria-hidden]=\"selectedIndex !== i ? 'true' : null\"\n [ngClass]=\"tab.bodyClass\"\n [content]=\"tab.content!\"\n [position]=\"tab.position!\"\n [origin]=\"tab.origin\"\n [preserveContent]=\"preserveContent\"\n role=\"tabpanel\"\n animationDuration=\"0ms\"\n />\n }\n</div>\n", styles: [".et-inline-tabs{display:block}.et-inline-tabs .et-inline-tab-label--is-text{white-space:nowrap}.et-inline-tabs .et-inline-tab-label-wrapper:not([aria-disabled=true]){cursor:pointer}.et-inline-tabs .et-scrollable-container{position:relative}.et-inline-tabs .et-inline-tabs-body-wrapper{display:grid}.et-inline-tabs .et-inline-tab-body{grid-column:1/2;grid-row:1/2}\n"], dependencies: [{ kind: "component", type: InlineTabHeaderComponent, selector: "et-inline-tab-header" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InlineTabLabelWrapperDirective, selector: "[etInlineTabLabelWrapper]", inputs: ["disabled"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: InlineTabBodyComponent, selector: "et-inline-tab-body", inputs: ["content", "origin", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_afterLeavingCenter", "_onCentered"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
18969
18969
|
}
|
|
18970
18970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: InlineTabsComponent, decorators: [{
|
|
18971
18971
|
type: Component,
|
|
@@ -18981,9 +18981,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
18981
18981
|
A11yModule,
|
|
18982
18982
|
InlineTabBodyComponent,
|
|
18983
18983
|
PortalModule,
|
|
18984
|
+
NgStyle,
|
|
18984
18985
|
], host: {
|
|
18985
18986
|
class: 'et-inline-tabs',
|
|
18986
|
-
}, template: "<et-inline-tab-header\n #tabHeader\n [selectedIndex]=\"selectedIndex || 0\"\n [ngClass]=\"tabHeaderClasses\"\n [itemSize]=\"itemSize\"\n [renderButtons]=\"renderButtons\"\n [scrollableClass]=\"scrollableClass\"\n [renderMasks]=\"renderMasks\"\n [renderScrollbars]=\"renderScrollbars\"\n [direction]=\"direction()\"\n (indexFocused)=\"_focusChanged($event)\"\n (selectFocusedIndex)=\"_handleEnter($event)\"\n>\n @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n <div\n [id]=\"_getTabLabelId(i)\"\n [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"_tabs.length\"\n [attr.aria-controls]=\"_getTabContentId(i)\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledby ? tab.ariaLabelledby : null\"\n [disabled]=\"tab.disabled\"\n [class.et-inline-tab-label--active]=\"selectedIndex === i\"\n [class.et-inline-tab-label--is-text]=\"!!tab.textLabel\"\n [fitUnderlineToContent]=\"tab.fitUnderlineToContent\"\n (click)=\"_handleClick(tab, tabHeader, i)\"\n (cdkFocusChange)=\"_tabFocusChanged($event, i)\"\n role=\"tab\"\n etInlineTabLabelWrapper\n cdkMonitorElementFocus\n >\n <span class=\"et-tab-content\">\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n } @else {\n {{ tab.textLabel }}\n }\n </span>\n </div>\n }\n</et-inline-tab-header>\n\n<div #tabBodyWrapper class=\"et-inline-tabs-body-wrapper\">\n @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n <et-inline-tab-body\n [id]=\"_getTabContentId(i)\"\n [attr.tabindex]=\"contentTabIndex !== null && selectedIndex === i ? contentTabIndex : null\"\n [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n [
|
|
18987
|
+
}, template: "<et-inline-tab-header\n #tabHeader\n [selectedIndex]=\"selectedIndex || 0\"\n [ngClass]=\"tabHeaderClasses\"\n [itemSize]=\"itemSize\"\n [renderButtons]=\"renderButtons\"\n [scrollableClass]=\"scrollableClass\"\n [renderMasks]=\"renderMasks\"\n [renderScrollbars]=\"renderScrollbars\"\n [direction]=\"direction()\"\n (indexFocused)=\"_focusChanged($event)\"\n (selectFocusedIndex)=\"_handleEnter($event)\"\n>\n @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n <div\n [id]=\"_getTabLabelId(i)\"\n [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"_tabs.length\"\n [attr.aria-controls]=\"_getTabContentId(i)\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledby ? tab.ariaLabelledby : null\"\n [disabled]=\"tab.disabled\"\n [class.et-inline-tab-label--active]=\"selectedIndex === i\"\n [class.et-inline-tab-label--is-text]=\"!!tab.textLabel\"\n [fitUnderlineToContent]=\"tab.fitUnderlineToContent\"\n (click)=\"_handleClick(tab, tabHeader, i)\"\n (cdkFocusChange)=\"_tabFocusChanged($event, i)\"\n role=\"tab\"\n etInlineTabLabelWrapper\n cdkMonitorElementFocus\n >\n <span class=\"et-tab-content\">\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n } @else {\n {{ tab.textLabel }}\n }\n </span>\n </div>\n }\n</et-inline-tab-header>\n\n<div #tabBodyWrapper class=\"et-inline-tabs-body-wrapper\">\n @for (tab of _tabs; track trackByTabFn(i, tab); let i = $index) {\n <et-inline-tab-body\n [id]=\"_getTabContentId(i)\"\n [attr.tabindex]=\"contentTabIndex !== null && selectedIndex === i ? contentTabIndex : null\"\n [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n [ngStyle]=\"{\n opacity: selectedIndex !== i ? 0 : 1,\n 'pointer-events': selectedIndex !== i ? 'none' : null,\n visibility: selectedIndex !== i ? 'hidden' : null,\n }\"\n [attr.inert]=\"selectedIndex !== i ? '' : null\"\n [attr.aria-hidden]=\"selectedIndex !== i ? 'true' : null\"\n [ngClass]=\"tab.bodyClass\"\n [content]=\"tab.content!\"\n [position]=\"tab.position!\"\n [origin]=\"tab.origin\"\n [preserveContent]=\"preserveContent\"\n role=\"tabpanel\"\n animationDuration=\"0ms\"\n />\n }\n</div>\n", styles: [".et-inline-tabs{display:block}.et-inline-tabs .et-inline-tab-label--is-text{white-space:nowrap}.et-inline-tabs .et-inline-tab-label-wrapper:not([aria-disabled=true]){cursor:pointer}.et-inline-tabs .et-scrollable-container{position:relative}.et-inline-tabs .et-inline-tabs-body-wrapper{display:grid}.et-inline-tabs .et-inline-tab-body{grid-column:1/2;grid-row:1/2}\n"] }]
|
|
18987
18988
|
}], propDecorators: { selectedIndex: [{
|
|
18988
18989
|
type: Input,
|
|
18989
18990
|
args: [{ transform: numberAttribute }]
|