@ethlete/cdk 3.11.0 → 3.12.0
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/overlay/components/overlay/components/overlay-container/overlay-container.component.mjs +3 -3
- package/esm2022/lib/components/overlay/components/overlay/services/overlay.service.mjs +40 -7
- package/esm2022/lib/components/overlay/components/overlay/types/overlay.types.mjs +1 -1
- package/fesm2022/ethlete-cdk.mjs +48 -15
- package/fesm2022/ethlete-cdk.mjs.map +1 -1
- package/lib/components/overlay/components/overlay/types/overlay.types.d.ts +4 -0
- package/package.json +1 -1
package/fesm2022/ethlete-cdk.mjs
CHANGED
|
@@ -1706,7 +1706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
1706
1706
|
}], ctorParameters: function () { return [{ type: i2.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }]; } });
|
|
1707
1707
|
|
|
1708
1708
|
let nextUniqueId$6 = 0;
|
|
1709
|
-
const isTouchEvent$
|
|
1709
|
+
const isTouchEvent$3 = (event) => {
|
|
1710
1710
|
return event.type[0] === 't';
|
|
1711
1711
|
};
|
|
1712
1712
|
class SwipeHandlerService {
|
|
@@ -1715,8 +1715,8 @@ class SwipeHandlerService {
|
|
|
1715
1715
|
}
|
|
1716
1716
|
startSwipe(event) {
|
|
1717
1717
|
const handlerId = nextUniqueId$6++;
|
|
1718
|
-
const originClientX = isTouchEvent$
|
|
1719
|
-
const originClientY = isTouchEvent$
|
|
1718
|
+
const originClientX = isTouchEvent$3(event) ? event.targetTouches[0].clientX : event.clientX;
|
|
1719
|
+
const originClientY = isTouchEvent$3(event) ? event.targetTouches[0].clientY : event.clientY;
|
|
1720
1720
|
const timestamp = Date.now();
|
|
1721
1721
|
this._handlerMap[handlerId] = {
|
|
1722
1722
|
originClientX,
|
|
@@ -1736,8 +1736,8 @@ class SwipeHandlerService {
|
|
|
1736
1736
|
if (!handler)
|
|
1737
1737
|
return null;
|
|
1738
1738
|
const { originClientX, originClientY, isSwiping, isScrolling } = handler;
|
|
1739
|
-
const currentClientX = isTouchEvent$
|
|
1740
|
-
const currentClientY = isTouchEvent$
|
|
1739
|
+
const currentClientX = isTouchEvent$3(event) ? event.targetTouches[0].clientX : event.clientX;
|
|
1740
|
+
const currentClientY = isTouchEvent$3(event) ? event.targetTouches[0].clientY : event.clientY;
|
|
1741
1741
|
const movementX = (originClientX - currentClientX) * -1;
|
|
1742
1742
|
const movementY = (originClientY - currentClientY) * -1;
|
|
1743
1743
|
const positiveMovementX = Math.abs(movementX);
|
|
@@ -3966,7 +3966,7 @@ const OVERLAY_DEFAULT_CONFIG = {
|
|
|
3966
3966
|
],
|
|
3967
3967
|
};
|
|
3968
3968
|
|
|
3969
|
-
const isTouchEvent$
|
|
3969
|
+
const isTouchEvent$2 = (event) => {
|
|
3970
3970
|
return event.type[0] === 't';
|
|
3971
3971
|
};
|
|
3972
3972
|
class OverlayContainerComponent extends CdkDialogContainer {
|
|
@@ -4038,7 +4038,7 @@ class OverlayContainerComponent extends CdkDialogContainer {
|
|
|
4038
4038
|
.pipe(takeUntil(this._dragToDismissStop$), takeUntil(this.overlayRef.afterClosed()), tap((event) => {
|
|
4039
4039
|
if (swipeId === null || isSelectionActive)
|
|
4040
4040
|
return;
|
|
4041
|
-
if (isTouchEvent$
|
|
4041
|
+
if (isTouchEvent$2(event)) {
|
|
4042
4042
|
const target = event.target;
|
|
4043
4043
|
const recursiveFindScrollableParent = (el) => {
|
|
4044
4044
|
if (!el)
|
|
@@ -4208,7 +4208,7 @@ class OverlayContainerComponent extends CdkDialogContainer {
|
|
|
4208
4208
|
}
|
|
4209
4209
|
}
|
|
4210
4210
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: OverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4211
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class.et-with-default-animation": "!_config.customAnimated" }, classAttribute: "et-overlay" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedLifecycleDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}:where([ng-version]){display:block;transition-property:transform
|
|
4211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class.et-with-default-animation": "!_config.customAnimated" }, classAttribute: "et-overlay" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedLifecycleDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}:where([ng-version]){display:block;transition-property:transform;transition-duration:.15s;transition-timing-function:var(--ease-5)}.et-overlay--full-screen-dialog-document [ng-version]{transition-duration:.4s;transform:scale(.95)}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:50px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4212
4212
|
}
|
|
4213
4213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: OverlayContainerComponent, decorators: [{
|
|
4214
4214
|
type: Component,
|
|
@@ -4222,7 +4222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
4222
4222
|
'[attr.aria-label]': '_config.ariaLabel',
|
|
4223
4223
|
'[attr.aria-describedby]': '_config.ariaDescribedBy || null',
|
|
4224
4224
|
'[class.et-with-default-animation]': '!_config.customAnimated',
|
|
4225
|
-
}, standalone: true, imports: [PortalModule], hostDirectives: [AnimatedLifecycleDirective], styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}:where([ng-version]){display:block;transition-property:transform
|
|
4225
|
+
}, standalone: true, imports: [PortalModule], hostDirectives: [AnimatedLifecycleDirective], styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}:where([ng-version]){display:block;transition-property:transform;transition-duration:.15s;transition-timing-function:var(--ease-5)}.et-overlay--full-screen-dialog-document [ng-version]{transition-duration:.4s;transform:scale(.95)}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:50px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"] }]
|
|
4226
4226
|
}], ctorParameters: function () { return []; } });
|
|
4227
4227
|
|
|
4228
4228
|
const createOverlayConfig = (globalConfig, localConfig) => ({
|
|
@@ -4562,6 +4562,15 @@ const setClass = (el, prevClass, currClass) => {
|
|
|
4562
4562
|
}
|
|
4563
4563
|
}
|
|
4564
4564
|
};
|
|
4565
|
+
const isHtmlElement = (element) => {
|
|
4566
|
+
return element instanceof HTMLElement;
|
|
4567
|
+
};
|
|
4568
|
+
const isTouchEvent$1 = (event) => {
|
|
4569
|
+
return event.type[0] === 't';
|
|
4570
|
+
};
|
|
4571
|
+
const isPointerEvent = (event) => {
|
|
4572
|
+
return event.type[0] === 'c';
|
|
4573
|
+
};
|
|
4565
4574
|
class OverlayService {
|
|
4566
4575
|
constructor() {
|
|
4567
4576
|
this._destroy$ = createDestroy();
|
|
@@ -4619,6 +4628,36 @@ class OverlayService {
|
|
|
4619
4628
|
overlayRef.componentRef = cdkRef.componentRef;
|
|
4620
4629
|
overlayRef.componentInstance = cdkRef.componentInstance;
|
|
4621
4630
|
cdkRef.containerInstance.overlayRef = overlayRef;
|
|
4631
|
+
const containerEl = overlayRef._containerInstance.elementRef.nativeElement;
|
|
4632
|
+
const overlayPaneEl = cdkRef.overlayRef.overlayElement;
|
|
4633
|
+
const backdropEl = cdkRef.overlayRef.backdropElement;
|
|
4634
|
+
const overlayWrapper = cdkRef.overlayRef.hostElement;
|
|
4635
|
+
const defaultAnimationBuffer = 50; // 50px since the default animation uses spring physics and thus will overshoot.
|
|
4636
|
+
const useDefaultAnimation = composedConfig.customAnimated !== true;
|
|
4637
|
+
const origin = composedConfig.origin;
|
|
4638
|
+
if (origin) {
|
|
4639
|
+
const originX = isHtmlElement(origin)
|
|
4640
|
+
? origin.getBoundingClientRect().left
|
|
4641
|
+
: isTouchEvent$1(origin)
|
|
4642
|
+
? origin.changedTouches[0].clientX
|
|
4643
|
+
: isPointerEvent(origin)
|
|
4644
|
+
? origin.clientX !== 0
|
|
4645
|
+
? origin.clientX
|
|
4646
|
+
: origin.target.getBoundingClientRect().left
|
|
4647
|
+
: -1;
|
|
4648
|
+
const originY = isHtmlElement(origin)
|
|
4649
|
+
? origin.getBoundingClientRect().top
|
|
4650
|
+
: isTouchEvent$1(origin)
|
|
4651
|
+
? origin.changedTouches[0].clientY
|
|
4652
|
+
: isPointerEvent(origin)
|
|
4653
|
+
? origin.clientY !== 0
|
|
4654
|
+
? origin.clientY
|
|
4655
|
+
: origin.target.getBoundingClientRect().top
|
|
4656
|
+
: -1;
|
|
4657
|
+
if (originX !== -1 && originY !== -1) {
|
|
4658
|
+
setStyle(containerEl, 'transform-origin', `${originX}px ${originY}px`);
|
|
4659
|
+
}
|
|
4660
|
+
}
|
|
4622
4661
|
combineLatest(composedConfig.positions.map((breakpoint) => (breakpoint.breakpoint ? this._viewportService.observe({ min: breakpoint.breakpoint }) : of(true)).pipe(map((isActive) => ({
|
|
4623
4662
|
isActive,
|
|
4624
4663
|
config: breakpoint.config,
|
|
@@ -4635,12 +4674,6 @@ class OverlayService {
|
|
|
4635
4674
|
}), startWith(null), pairwise(), tap(([prevConfig, currConfig]) => {
|
|
4636
4675
|
if (!currConfig)
|
|
4637
4676
|
return;
|
|
4638
|
-
const overlayPaneEl = cdkRef.overlayRef.overlayElement;
|
|
4639
|
-
const containerEl = overlayRef._containerInstance.elementRef.nativeElement;
|
|
4640
|
-
const backdropEl = cdkRef.overlayRef.backdropElement;
|
|
4641
|
-
const overlayWrapper = cdkRef.overlayRef.hostElement;
|
|
4642
|
-
const defaultAnimationBuffer = 50; // 50px since the default animation uses spring physics and thus will overshoot.
|
|
4643
|
-
const useDefaultAnimation = composedConfig.customAnimated !== true;
|
|
4644
4677
|
const containerClass = currConfig.containerClass;
|
|
4645
4678
|
const applyDefaultMaxWidths = () => {
|
|
4646
4679
|
setStyle(overlayPaneEl, 'max-width', currConfig.maxWidth);
|