@ethlete/core 3.7.0 → 3.8.1

package/fesm2022/ethlete-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, assertInInjectionContext, DestroyRef, ElementRef, isDevMode, Directive, Injectable, NgZone, EventEmitter, booleanAttribute, numberAttribute, Output, Injector, ViewContainerRef, TemplateRef, signal, Pipe, QueryList } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, assertInInjectionContext, DestroyRef, ElementRef, effect, isDevMode, Directive, Injectable, NgZone, EventEmitter, booleanAttribute, numberAttribute, Output, Injector, ViewContainerRef, signal, TemplateRef, computed, Pipe, QueryList } from '@angular/core';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
 import { Subject, BehaviorSubject, takeUntil, switchMap, of, tap, Observable, combineLatest, timer, startWith, map, distinctUntilChanged, shareReplay, skip, take, debounceTime, merge, fromEvent, filter, takeWhile, pairwise, finalize } from 'rxjs';
 import { END, HOME, PAGE_DOWN, PAGE_UP, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
@@ -14,6 +14,7 @@ import { autoUpdate, computePosition, offset, flip, size, shift, limitShift, arr
 import { Router, NavigationEnd } from '@angular/router';
 import { __decorate, __metadata } from 'tslib';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { toObservable } from '@angular/core/rxjs-interop';
 import { debounceTime as debounceTime$1 } from 'rxjs/operators';
 
 class StructuredDataComponent {
@@ -648,7 +649,12 @@ const createMutationObservable = (config) => {
                         const oldValueStyles = oldValue?.split(';').map((s) => s.trim()) ?? [];
                         const newValueStyles = newValue?.split(';').map((s) => s.trim()) ?? [];
                         const changedStyles = newValueStyles.filter((s) => !oldValueStyles.includes(s));
-                        if (changedStyles.some((s) => config.options?.styleIgnoreList?.includes(s.split(':')[0])))
+                        if (changedStyles.some((s) => {
+                            const [key] = s.split(':');
+                            if (!key)
+                                return false;
+                            return config.options?.styleIgnoreList?.includes(key);
+                        }))
                             continue;
                         allowedMutations.push(mutation);
                     }
@@ -1237,6 +1243,77 @@ class SelectionModel {
     }
 }
 
+const signalClasses = (el, classMap) => {
+    for (const [classString, signal] of Object.entries(classMap)) {
+        const classArray = classString.split(' ');
+        if (!classArray.length) {
+            continue;
+        }
+        effect(() => {
+            const value = signal();
+            if (value) {
+                el.classList.add(...classArray);
+            }
+            else {
+                el.classList.remove(...classArray);
+            }
+        });
+    }
+};
+const signalHostClasses = (classMap) => {
+    const el = inject(ElementRef).nativeElement;
+    signalClasses(el, classMap);
+};
+const ALWAYS_TRUE_ATTRIBUTE_KEYS = ['disabled', 'readonly', 'required', 'checked', 'selected'];
+const signalAttributes = (el, attributeMap) => {
+    for (const [attributeString, signal] of Object.entries(attributeMap)) {
+        effect(() => {
+            const attributeArray = attributeString.split(' ');
+            if (!attributeArray.length) {
+                return;
+            }
+            const value = signal();
+            const valueString = `${value}`;
+            for (const attr of attributeArray) {
+                if (ALWAYS_TRUE_ATTRIBUTE_KEYS.includes(attr)) {
+                    if (value) {
+                        el.setAttribute(attr, '');
+                    }
+                    else {
+                        el.removeAttribute(attr);
+                    }
+                }
+                else {
+                    el.setAttribute(attr, valueString);
+                }
+            }
+        });
+    }
+};
+const signalHostAttributes = (attributeMap) => {
+    const el = inject(ElementRef).nativeElement;
+    signalAttributes(el, attributeMap);
+};
+const signalStyle = (el, styleMap) => {
+    for (const [styleString, signal] of Object.entries(styleMap)) {
+        effect(() => {
+            const styleArray = styleString.split(' ');
+            if (!styleArray.length) {
+                return;
+            }
+            const value = signal();
+            const valueString = `${value}`;
+            for (const style of styleArray) {
+                el.style.setProperty(style, valueString);
+            }
+        });
+    }
+};
+const signalHostStyle = (styleMap) => {
+    const el = inject(ElementRef).nativeElement;
+    signalStyle(el, styleMap);
+};
+
 const scrollBehaviorSupported = supportsScrollBehavior();
 let _uniqueIdCounter = 0;
 const BLOCK_CLASS = 'cdk-global-scrollblock';
@@ -1355,9 +1432,11 @@ class AnimatableDirective {
         this._elementRef = inject(ElementRef);
         this._animationStart$ = new Subject();
         this._animationEnd$ = new Subject();
+        this._animationCancelled$ = new Subject();
         this._animatedElement$ = new BehaviorSubject(this._elementRef.nativeElement);
         this.animationStart$ = this._animationStart$.asObservable().pipe(debounceTime(0));
         this.animationEnd$ = this._animationEnd$.asObservable().pipe(debounceTime(0));
+        this.animationCancelled$ = this._animationCancelled$.asObservable().pipe(debounceTime(0));
         this._hostActiveAnimationCount$ = new BehaviorSubject(0);
         this._totalActiveAnimationCount$ = new BehaviorSubject(0);
         this.isAnimating$ = this._totalActiveAnimationCount$.pipe(map((count) => count > 0), debounceTime(0));
@@ -1407,6 +1486,12 @@ class AnimatableDirective {
                 this._totalActiveAnimationCount$.next(count);
             }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
                 .subscribe();
+            merge(fromEvent(el, 'animationcancel'), fromEvent(el, 'transitioncancel'))
+                .pipe(filter((e) => e.target === el), // skip events from children
+            tap(() => {
+                this._animationCancelled$.next();
+            }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
+                .subscribe();
         }), takeUntil(this._destroy$))
             .subscribe();
         this._totalActiveAnimationCount$
@@ -1486,13 +1571,17 @@ class AnimatedLifecycleDirective {
         this._isConstructed = true;
     }
     enter(config) {
+        if (this.state === 'entering')
+            return;
         if (this.state === 'init' && !this._isConstructed) {
             // Force the state to entered so that the element is not animated when it is first rendered.
             this._forceState('entered');
             return;
         }
-        if (this.state !== 'init' && this.state !== 'left' && isDevMode()) {
-            console.warn('Tried to enter but the element is not in the initial state. This may result in unexpected behavior.', this);
+        if (this.state === 'leaving') {
+            this._classList.remove(ANIMATION_CLASSES.leaveFrom);
+            this._classList.remove(ANIMATION_CLASSES.leaveActive);
+            this._classList.remove(ANIMATION_CLASSES.leaveTo);
         }
         this._state$.next('entering');
         if (!config?.onlyTransition) {
@@ -1502,11 +1591,13 @@ class AnimatedLifecycleDirective {
         this._classList.add(ANIMATION_CLASSES.enterActive);
         fromNextFrame()
             .pipe(tap(() => {
-            if (!config?.onlyTransition) {
+            if (!config?.onlyTransition && this.state === 'entering') {
                 this._classList.remove(ANIMATION_CLASSES.enterFrom);
                 this._classList.add(ANIMATION_CLASSES.enterTo);
             }
         }), switchMap(() => this._animatable.animationEnd$), tap(() => {
+            if (this.state !== 'entering')
+                return;
             this._state$.next('entered');
             this._classList.remove(ANIMATION_CLASSES.enterActive);
             if (!config?.onlyTransition) {
@@ -1516,16 +1607,13 @@ class AnimatedLifecycleDirective {
             .subscribe();
     }
     leave(config) {
+        if (this.state === 'leaving')
+            return;
         if (this.state === 'init') {
             this._state$.next('left');
             return;
         }
-        if (this.state !== 'entered' && this.state !== 'entering' && isDevMode()) {
-            console.warn('Tried to leave while already leaving or left. This may result in unexpected behavior.', this);
-        }
-        if (this._classList.contains(ANIMATION_CLASSES.enterFrom) ||
-            this._classList.contains(ANIMATION_CLASSES.enterActive) ||
-            this._classList.contains(ANIMATION_CLASSES.enterTo)) {
+        if (this.state === 'entering') {
             this._classList.remove(ANIMATION_CLASSES.enterFrom);
             this._classList.remove(ANIMATION_CLASSES.enterActive);
             this._classList.remove(ANIMATION_CLASSES.enterTo);
@@ -1538,11 +1626,13 @@ class AnimatedLifecycleDirective {
         this._classList.add(ANIMATION_CLASSES.leaveActive);
         fromNextFrame()
             .pipe(tap(() => {
-            if (!config?.onlyTransition) {
+            if (!config?.onlyTransition && this.state === 'leaving') {
                 this._classList.remove(ANIMATION_CLASSES.leaveFrom);
                 this._classList.add(ANIMATION_CLASSES.leaveTo);
             }
         }), switchMap(() => this._animatable.animationEnd$), tap(() => {
+            if (this.state !== 'leaving')
+                return;
             this._state$.next('left');
             this._classList.remove(ANIMATION_CLASSES.leaveActive);
             if (!config?.onlyTransition) {
@@ -2018,8 +2108,8 @@ class RouterStateService {
         this._router.events
             .pipe(filter((event) => event instanceof NavigationEnd), distinctUntilChanged((a, b) => a.url === b.url), map((event) => {
             const { url } = event;
-            const urlWithoutQueryParams = url.split('?')[0];
-            const withoutFragment = urlWithoutQueryParams.split('#')[0];
+            const urlWithoutQueryParams = url.split('?')[0] ?? '';
+            const withoutFragment = urlWithoutQueryParams.split('#')[0] ?? '';
             return withoutFragment;
         }))
             .subscribe(this._route$);
@@ -2206,8 +2296,11 @@ class ViewportService {
         this._resizeObserverService
             .observe(document.documentElement)
             .pipe(tap((e) => {
-            const width = e[0].contentRect.width;
-            const height = e[0].contentRect.height;
+            const entry = e[0];
+            if (!entry)
+                return;
+            const width = entry.contentRect.width;
+            const height = entry.contentRect.height;
             const obj = { width, height };
             if (equal(obj, this._viewportSize$.value))
                 return;
@@ -2230,7 +2323,10 @@ class ViewportService {
         this._resizeObserverService
             .observe(scrollbarRuler)
             .pipe(tap((e) => {
-            const size = e[0].contentRect.width;
+            const entry = e[0];
+            if (!entry)
+                return;
+            const size = entry.contentRect.width;
             const obj = { width: 100 - size, height: 100 - size };
             if (equal(obj, this._scrollbarSize$.value))
                 return;
@@ -2872,6 +2968,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 type: Output
             }] } });
 
+const DEBUG_TOKEN = new InjectionToken('DEBUG_DIRECTIVE_TOKEN');
+class DebugDirective {
+    constructor() {
+        this._destroy$ = createDestroy();
+        this._debug = signal(true);
+        this.debug = this._debug.asReadonly();
+        this.debug$ = toObservable(this.debug);
+        this.startDebug$ = this.debug$.pipe(filter((debug) => !!debug));
+        this.stopDebug$ = merge(this._destroy$, this.debug$.pipe(filter((debug) => !debug)));
+    }
+    set sDebug(value) {
+        this._debug.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DebugDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.5", type: DebugDirective, isStandalone: true, selector: "[etDebug]", inputs: { sDebug: ["etDebug", "sDebug", booleanAttribute] }, providers: [
+            {
+                provide: DEBUG_TOKEN,
+                useExisting: DebugDirective,
+            },
+        ], exportAs: ["etDebug"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DebugDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etDebug]',
+                    exportAs: 'etDebug',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: DEBUG_TOKEN,
+                            useExisting: DebugDirective,
+                        },
+                    ],
+                }]
+        }], propDecorators: { sDebug: [{
+                type: Input,
+                args: [{ alias: 'etDebug', transform: booleanAttribute }]
+            }] } });
+
 const DELAYABLE_TOKEN = new InjectionToken('DELAYABLE_DIRECTIVE_TOKEN');
 class DelayableDirective {
     constructor() {
@@ -3331,13 +3466,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }] } });
 
 const OBSERVE_VISIBILITY_TOKEN = new InjectionToken('OBSERVE_VISIBILITY_TOKEN');
+const signalVisibilityChangeClasses = (cfg) => ({
+    [`${cfg.name}--is-left`]: computed(() => cfg.signal()?.isLeft),
+    [`${cfg.name}--is-right`]: computed(() => cfg.signal()?.isRight),
+    [`${cfg.name}--is-above`]: computed(() => cfg.signal()?.isAbove),
+    [`${cfg.name}--is-below`]: computed(() => cfg.signal()?.isBelow),
+    [`${cfg.name}--is-visible`]: computed(() => cfg.signal()?.visible),
+});
 class ObserveVisibilityDirective {
     constructor() {
         this._destroy$ = createDestroy();
         this._elementRef = inject(ElementRef);
         this._intersectionObserverService = inject(IntersectionObserverService);
-        this.isIntersecting = signal(null);
+        this.visibilityChange = signal(null);
         this.etObserveVisibility = new EventEmitter();
+        signalHostClasses(signalVisibilityChangeClasses({
+            name: 'et-observe-visibility',
+            signal: this.visibilityChange,
+        }));
     }
     ngAfterViewInit() {
         this._intersectionObserverService
@@ -3360,12 +3506,12 @@ class ObserveVisibilityDirective {
                 entry,
             };
             this.etObserveVisibility.emit(data);
-            this.isIntersecting.set(data);
+            this.visibilityChange.set(data);
         }))
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ObserveVisibilityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: ObserveVisibilityDirective, isStandalone: true, selector: "[etObserveVisibility]", outputs: { etObserveVisibility: "etObserveVisibility" }, host: { properties: { "class.et-observe-visibility--is-visible": "isIntersecting" }, classAttribute: "et-observe-visibility" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: ObserveVisibilityDirective, isStandalone: true, selector: "[etObserveVisibility]", outputs: { etObserveVisibility: "etObserveVisibility" }, host: { classAttribute: "et-observe-visibility" }, providers: [
             {
                 provide: OBSERVE_VISIBILITY_TOKEN,
                 useExisting: ObserveVisibilityDirective,
@@ -3385,10 +3531,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     ],
                     host: {
                         class: 'et-observe-visibility',
-                        '[class.et-observe-visibility--is-visible]': 'isIntersecting',
                     },
                 }]
-        }], propDecorators: { etObserveVisibility: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { etObserveVisibility: [{
                 type: Output
             }] } });
 
@@ -4016,5 +4161,5 @@ const Validators = {
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, ActiveSelectionModel, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEFAULT_VIEWPORT_CONFIG, DELAYABLE_TOKEN, DelayableDirective, ET_PROPERTY_REMOVED, FocusVisibleService, IS_ACTIVE_ELEMENT, IS_ARRAY_NOT_EMPTY, IS_ELEMENT, IS_EMAIL, IntersectionObserverFactory, IntersectionObserverService, IsActiveElementDirective, IsArrayNotEmpty, IsElementDirective, IsEmail, KeyPressManager, LetContext, LetDirective, MUST_MATCH, Memo, MustMatch, MutationObserverFactory, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OBSERVE_SCROLL_STATE, OBSERVE_VISIBILITY_TOKEN, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, ObserveVisibilityDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RouterStateService, RuntimeError, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, SCROLL_OBSERVER_OBSERVING_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_OBSERVING_LAST_ELEMENT_CLASS, SEO_DIRECTIVE_TOKEN, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, SelectionModel, SeoDirective, SmartBlockScrollStrategy, StructuredDataComponent, ToArrayPipe, TypedQueryList, VIEWPORT_CONFIG, ValidateAtLeastOneRequired, Validators, ViewportService, clamp, clone, cloneFormGroup, createDestroy, createFlipAnimation, createFlipAnimationGroup, createMediaQueryObservable, createMutationObservable, createReactiveBindings, createResizeObservable, deleteCookie, elementCanScroll, equal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementVisibleStates, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, hasCookie, isElementVisible, isEmptyArray, isGroupMatch, isKnockoutMatch, isObjectArray, isPrimitiveArray, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, provideViewportConfig, round, routerDisableScrollTop, scrollToElement, setCookie, toArray, toArrayTrackByFn };
+export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, ActiveSelectionModel, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEBUG_TOKEN, DEFAULT_VIEWPORT_CONFIG, DELAYABLE_TOKEN, DebugDirective, DelayableDirective, ET_PROPERTY_REMOVED, FocusVisibleService, IS_ACTIVE_ELEMENT, IS_ARRAY_NOT_EMPTY, IS_ELEMENT, IS_EMAIL, IntersectionObserverFactory, IntersectionObserverService, IsActiveElementDirective, IsArrayNotEmpty, IsElementDirective, IsEmail, KeyPressManager, LetContext, LetDirective, MUST_MATCH, Memo, MustMatch, MutationObserverFactory, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OBSERVE_SCROLL_STATE, OBSERVE_VISIBILITY_TOKEN, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, ObserveVisibilityDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RouterStateService, RuntimeError, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, SCROLL_OBSERVER_OBSERVING_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_OBSERVING_LAST_ELEMENT_CLASS, SEO_DIRECTIVE_TOKEN, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, SelectionModel, SeoDirective, SmartBlockScrollStrategy, StructuredDataComponent, ToArrayPipe, TypedQueryList, VIEWPORT_CONFIG, ValidateAtLeastOneRequired, Validators, ViewportService, clamp, clone, cloneFormGroup, createDestroy, createFlipAnimation, createFlipAnimationGroup, createMediaQueryObservable, createMutationObservable, createReactiveBindings, createResizeObservable, deleteCookie, elementCanScroll, equal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementVisibleStates, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, hasCookie, isElementVisible, isEmptyArray, isGroupMatch, isKnockoutMatch, isObjectArray, isPrimitiveArray, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, provideViewportConfig, round, routerDisableScrollTop, scrollToElement, setCookie, signalAttributes, signalClasses, signalHostAttributes, signalHostClasses, signalHostStyle, signalStyle, signalVisibilityChangeClasses, toArray, toArrayTrackByFn };
 //# sourceMappingURL=ethlete-core.mjs.map