@ethlete/cdk 4.23.5 → 4.23.6
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/esm2022/lib/components/carousel/controls/carousel-item-nav.component.mjs +11 -12
- package/fesm2022/ethlete-cdk.mjs +10 -12
- package/fesm2022/ethlete-cdk.mjs.map +1 -1
- package/lib/components/carousel/controls/carousel-item-nav.component.d.ts +10 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @ethlete/cdk
|
|
2
2
|
|
|
3
|
+
## 4.23.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`8a08672`](https://github.com/ethlete-io/ethdk/commit/8a086726225de55877358780bfbc5a624d8f56d5) Thanks [@TomTomB](https://github.com/TomTomB)! - Make sure the carousel progressing does not trigger change detection every 100ms
|
|
8
|
+
|
|
3
9
|
## 4.23.5
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, viewChildren, } from '@angular/core';
|
|
2
|
+
import { signalStyles } from '@ethlete/core';
|
|
2
3
|
import { CAROUSEL_ITEM_NAV_TOKEN, CarouselItemNavDirective } from './carousel-item-nav.directive';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
import * as i1 from "./carousel-item-nav.directive";
|
|
5
6
|
export class CarouselItemNavComponent {
|
|
6
7
|
constructor() {
|
|
7
8
|
this.nav = inject(CAROUSEL_ITEM_NAV_TOKEN);
|
|
9
|
+
this.progressBars = viewChildren('progress');
|
|
10
|
+
this.activeProgressBar = computed(() => this.progressBars()[this.nav.carousel.activeIndex()]);
|
|
11
|
+
this.progressBarStyleBindings = signalStyles(this.activeProgressBar, {
|
|
12
|
+
'--_et-carousel-item-nav-button-progress': this.nav.autoPlayProgress,
|
|
13
|
+
});
|
|
8
14
|
}
|
|
9
15
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CarouselItemNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CarouselItemNavComponent, isStandalone: true, selector: "et-carousel-item-nav", host: { classAttribute: "et-carousel-item-nav-host" }, hostDirectives: [{ directive: i1.CarouselItemNavDirective }], ngImport: i0, template: `
|
|
16
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CarouselItemNavComponent, isStandalone: true, selector: "et-carousel-item-nav", host: { classAttribute: "et-carousel-item-nav-host" }, viewQueries: [{ propertyName: "progressBars", predicate: ["progress"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.CarouselItemNavDirective }], ngImport: i0, template: `
|
|
11
17
|
<ul class="et-carousel-item-nav">
|
|
12
18
|
@for (item of nav.carousel.items(); track $index) {
|
|
13
19
|
<li class="et-carousel-item-nav-item">
|
|
@@ -18,10 +24,7 @@ export class CarouselItemNavComponent {
|
|
|
18
24
|
class="et-carousel-item-nav-button"
|
|
19
25
|
type="button"
|
|
20
26
|
>
|
|
21
|
-
<div
|
|
22
|
-
[style.--_et-carousel-item-nav-button-progress]="item.isActive() ? nav.autoPlayProgress() : 0"
|
|
23
|
-
class="et-carousel-item-nav-button-progress"
|
|
24
|
-
></div>
|
|
27
|
+
<div #progress class="et-carousel-item-nav-button-progress"></div>
|
|
25
28
|
</button>
|
|
26
29
|
</li>
|
|
27
30
|
}
|
|
@@ -43,10 +46,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
43
46
|
class="et-carousel-item-nav-button"
|
|
44
47
|
type="button"
|
|
45
48
|
>
|
|
46
|
-
<div
|
|
47
|
-
[style.--_et-carousel-item-nav-button-progress]="item.isActive() ? nav.autoPlayProgress() : 0"
|
|
48
|
-
class="et-carousel-item-nav-button-progress"
|
|
49
|
-
></div>
|
|
49
|
+
<div #progress class="et-carousel-item-nav-button-progress"></div>
|
|
50
50
|
</button>
|
|
51
51
|
</li>
|
|
52
52
|
}
|
|
@@ -58,8 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
58
58
|
host: {
|
|
59
59
|
class: 'et-carousel-item-nav-host',
|
|
60
60
|
},
|
|
61
|
-
imports: [],
|
|
62
61
|
hostDirectives: [{ directive: CarouselItemNavDirective }],
|
|
63
62
|
}]
|
|
64
63
|
}] });
|
|
65
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
64
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2Fyb3VzZWwtaXRlbS1uYXYuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jZGsvc3JjL2xpYi9jb21wb25lbnRzL2Nhcm91c2VsL2NvbnRyb2xzL2Nhcm91c2VsLWl0ZW0tbmF2LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxpQkFBaUIsRUFDakIsUUFBUSxFQUNSLE1BQU0sRUFDTixZQUFZLEdBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3QyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7O0FBNkJsRyxNQUFNLE9BQU8sd0JBQXdCO0lBM0JyQztRQTRCRSxRQUFHLEdBQUcsTUFBTSxDQUFDLHVCQUF1QixDQUFDLENBQUM7UUFFdEMsaUJBQVksR0FBRyxZQUFZLENBQTRCLFVBQVUsQ0FBQyxDQUFDO1FBQ25FLHNCQUFpQixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRXpGLDZCQUF3QixHQUFHLFlBQVksQ0FBQyxJQUFJLENBQUMsaUJBQWlCLEVBQUU7WUFDOUQseUNBQXlDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxnQkFBZ0I7U0FDckUsQ0FBQyxDQUFDO0tBQ0o7OEdBVFksd0JBQXdCO2tHQUF4Qix3QkFBd0Isa1RBekJ6Qjs7Ozs7Ozs7Ozs7Ozs7OztHQWdCVDs7MkZBU1Usd0JBQXdCO2tCQTNCcEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsc0JBQXNCO29CQUNoQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQlQ7b0JBQ0QsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtvQkFDckMsSUFBSSxFQUFFO3dCQUNKLEtBQUssRUFBRSwyQkFBMkI7cUJBQ25DO29CQUNELGNBQWMsRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLHdCQUF3QixFQUFFLENBQUM7aUJBQzFEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIGNvbXB1dGVkLFxuICBpbmplY3QsXG4gIHZpZXdDaGlsZHJlbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBzaWduYWxTdHlsZXMgfSBmcm9tICdAZXRobGV0ZS9jb3JlJztcbmltcG9ydCB7IENBUk9VU0VMX0lURU1fTkFWX1RPS0VOLCBDYXJvdXNlbEl0ZW1OYXZEaXJlY3RpdmUgfSBmcm9tICcuL2Nhcm91c2VsLWl0ZW0tbmF2LmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2V0LWNhcm91c2VsLWl0ZW0tbmF2JyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8dWwgY2xhc3M9XCJldC1jYXJvdXNlbC1pdGVtLW5hdlwiPlxuICAgICAgQGZvciAoaXRlbSBvZiBuYXYuY2Fyb3VzZWwuaXRlbXMoKTsgdHJhY2sgJGluZGV4KSB7XG4gICAgICAgIDxsaSBjbGFzcz1cImV0LWNhcm91c2VsLWl0ZW0tbmF2LWl0ZW1cIj5cbiAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICBbY2xhc3MuZXQtY2Fyb3VzZWwtaXRlbS1uYXYtYnV0dG9uLS1wcm9ncmVzc2luZ109XCJpdGVtLmlzQWN0aXZlKCkgJiYgbmF2LmF1dG9QbGF5RW5hYmxlZCgpXCJcbiAgICAgICAgICAgIFtjbGFzcy5ldC1jYXJvdXNlbC1pdGVtLW5hdi1idXR0b24tLWFjdGl2ZS1zdGF0aWNdPVwiaXRlbS5pc0FjdGl2ZSgpICYmICFuYXYuYXV0b1BsYXlFbmFibGVkKClcIlxuICAgICAgICAgICAgKGNsaWNrKT1cIm5hdi5nb1RvKCRpbmRleClcIlxuICAgICAgICAgICAgY2xhc3M9XCJldC1jYXJvdXNlbC1pdGVtLW5hdi1idXR0b25cIlxuICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPGRpdiAjcHJvZ3Jlc3MgY2xhc3M9XCJldC1jYXJvdXNlbC1pdGVtLW5hdi1idXR0b24tcHJvZ3Jlc3NcIj48L2Rpdj5cbiAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9saT5cbiAgICAgIH1cbiAgICA8L3VsPlxuICBgLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgaG9zdDoge1xuICAgIGNsYXNzOiAnZXQtY2Fyb3VzZWwtaXRlbS1uYXYtaG9zdCcsXG4gIH0sXG4gIGhvc3REaXJlY3RpdmVzOiBbeyBkaXJlY3RpdmU6IENhcm91c2VsSXRlbU5hdkRpcmVjdGl2ZSB9XSxcbn0pXG5leHBvcnQgY2xhc3MgQ2Fyb3VzZWxJdGVtTmF2Q29tcG9uZW50IHtcbiAgbmF2ID0gaW5qZWN0KENBUk9VU0VMX0lURU1fTkFWX1RPS0VOKTtcblxuICBwcm9ncmVzc0JhcnMgPSB2aWV3Q2hpbGRyZW48RWxlbWVudFJlZjxIVE1MRWxlbWVudD5bXT4oJ3Byb2dyZXNzJyk7XG4gIGFjdGl2ZVByb2dyZXNzQmFyID0gY29tcHV0ZWQoKCkgPT4gdGhpcy5wcm9ncmVzc0JhcnMoKVt0aGlzLm5hdi5jYXJvdXNlbC5hY3RpdmVJbmRleCgpXSk7XG5cbiAgcHJvZ3Jlc3NCYXJTdHlsZUJpbmRpbmdzID0gc2lnbmFsU3R5bGVzKHRoaXMuYWN0aXZlUHJvZ3Jlc3NCYXIsIHtcbiAgICAnLS1fZXQtY2Fyb3VzZWwtaXRlbS1uYXYtYnV0dG9uLXByb2dyZXNzJzogdGhpcy5uYXYuYXV0b1BsYXlQcm9ncmVzcyxcbiAgfSk7XG59XG4iXX0=
|
package/fesm2022/ethlete-cdk.mjs
CHANGED
|
@@ -2,9 +2,9 @@ import * as i1 from '@angular/cdk/portal';
|
|
|
2
2
|
import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
|
|
3
3
|
import { AsyncPipe, NgClass, NgTemplateOutlet, JsonPipe, NgComponentOutlet, DOCUMENT, Location } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, input, numberAttribute, computed, signal, contentChildren, viewChild, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, EventEmitter, Output, ViewChildren, Optional, Inject, SkipSelf, HostListener, effect, NgZone, NgModule, isSignal, DestroyRef, contentChild,
|
|
5
|
+
import { Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, input, numberAttribute, computed, signal, contentChildren, viewChild, viewChildren, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, EventEmitter, Output, ViewChildren, Optional, Inject, SkipSelf, HostListener, effect, NgZone, NgModule, isSignal, DestroyRef, contentChild, assertInInjectionContext, Attribute } from '@angular/core';
|
|
6
6
|
import * as i1$1 from '@ethlete/core';
|
|
7
|
-
import { LetDirective, createDestroy, Memo, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, injectHostElement, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, switchQueryListChanges, signalAttributes, ResizeObserverService, createFlipAnimation, AnimatedOverlayDirective, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, createComponentId, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren,
|
|
7
|
+
import { LetDirective, createDestroy, Memo, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, signalStyles, injectHostElement, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, switchQueryListChanges, signalAttributes, ResizeObserverService, createFlipAnimation, AnimatedOverlayDirective, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, createComponentId, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren, getIntersectionInfo, getElementScrollCoordinates, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, fromNextFrame, ViewportService, ROOT_BOUNDARY_TOKEN, isElementVisible, AnimatedIfDirective, FocusVisibleService, inferMimeType, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
|
|
8
8
|
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';
|
|
9
9
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
10
10
|
import { __decorate, __metadata } from 'tslib';
|
|
@@ -1500,9 +1500,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
1500
1500
|
class CarouselItemNavComponent {
|
|
1501
1501
|
constructor() {
|
|
1502
1502
|
this.nav = inject(CAROUSEL_ITEM_NAV_TOKEN);
|
|
1503
|
+
this.progressBars = viewChildren('progress');
|
|
1504
|
+
this.activeProgressBar = computed(() => this.progressBars()[this.nav.carousel.activeIndex()]);
|
|
1505
|
+
this.progressBarStyleBindings = signalStyles(this.activeProgressBar, {
|
|
1506
|
+
'--_et-carousel-item-nav-button-progress': this.nav.autoPlayProgress,
|
|
1507
|
+
});
|
|
1503
1508
|
}
|
|
1504
1509
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CarouselItemNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1505
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CarouselItemNavComponent, isStandalone: true, selector: "et-carousel-item-nav", host: { classAttribute: "et-carousel-item-nav-host" }, hostDirectives: [{ directive: CarouselItemNavDirective }], ngImport: i0, template: `
|
|
1510
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CarouselItemNavComponent, isStandalone: true, selector: "et-carousel-item-nav", host: { classAttribute: "et-carousel-item-nav-host" }, viewQueries: [{ propertyName: "progressBars", predicate: ["progress"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CarouselItemNavDirective }], ngImport: i0, template: `
|
|
1506
1511
|
<ul class="et-carousel-item-nav">
|
|
1507
1512
|
@for (item of nav.carousel.items(); track $index) {
|
|
1508
1513
|
<li class="et-carousel-item-nav-item">
|
|
@@ -1513,10 +1518,7 @@ class CarouselItemNavComponent {
|
|
|
1513
1518
|
class="et-carousel-item-nav-button"
|
|
1514
1519
|
type="button"
|
|
1515
1520
|
>
|
|
1516
|
-
<div
|
|
1517
|
-
[style.--_et-carousel-item-nav-button-progress]="item.isActive() ? nav.autoPlayProgress() : 0"
|
|
1518
|
-
class="et-carousel-item-nav-button-progress"
|
|
1519
|
-
></div>
|
|
1521
|
+
<div #progress class="et-carousel-item-nav-button-progress"></div>
|
|
1520
1522
|
</button>
|
|
1521
1523
|
</li>
|
|
1522
1524
|
}
|
|
@@ -1538,10 +1540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
1538
1540
|
class="et-carousel-item-nav-button"
|
|
1539
1541
|
type="button"
|
|
1540
1542
|
>
|
|
1541
|
-
<div
|
|
1542
|
-
[style.--_et-carousel-item-nav-button-progress]="item.isActive() ? nav.autoPlayProgress() : 0"
|
|
1543
|
-
class="et-carousel-item-nav-button-progress"
|
|
1544
|
-
></div>
|
|
1543
|
+
<div #progress class="et-carousel-item-nav-button-progress"></div>
|
|
1545
1544
|
</button>
|
|
1546
1545
|
</li>
|
|
1547
1546
|
}
|
|
@@ -1553,7 +1552,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
1553
1552
|
host: {
|
|
1554
1553
|
class: 'et-carousel-item-nav-host',
|
|
1555
1554
|
},
|
|
1556
|
-
imports: [],
|
|
1557
1555
|
hostDirectives: [{ directive: CarouselItemNavDirective }],
|
|
1558
1556
|
}]
|
|
1559
1557
|
}] });
|