@ethlete/core 3.6.1 → 3.8.0

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, TemplateRef, computed, signal, 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';
@@ -648,7 +648,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 +1242,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';
@@ -2018,8 +2094,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 +2282,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 +2309,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;
@@ -3331,13 +3413,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(false);
+        this.visibilityChange = signal(null);
         this.etObserveVisibility = new EventEmitter();
+        signalHostClasses(signalVisibilityChangeClasses({
+            name: 'et-observe-visibility',
+            signal: this.visibilityChange,
+        }));
     }
     ngAfterViewInit() {
         this._intersectionObserverService
@@ -3347,13 +3440,25 @@ class ObserveVisibilityDirective {
             if (!entry) {
                 return;
             }
-            this.etObserveVisibility.emit(entry.isIntersecting);
-            this.isIntersecting.set(entry.isIntersecting);
+            const isAbove = entry.boundingClientRect.top < 0 && entry.boundingClientRect.bottom < 0;
+            const isBelow = entry.boundingClientRect.top > window.innerHeight && entry.boundingClientRect.bottom > window.innerHeight;
+            const isLeft = entry.boundingClientRect.left < 0 && entry.boundingClientRect.right < 0;
+            const isRight = entry.boundingClientRect.left > window.innerWidth && entry.boundingClientRect.right > window.innerWidth;
+            const data = {
+                visible: entry.isIntersecting,
+                isAbove,
+                isBelow,
+                isLeft,
+                isRight,
+                entry,
+            };
+            this.etObserveVisibility.emit(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,
@@ -3373,10 +3478,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
             }] } });
 
@@ -4004,5 +4108,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, 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, signalAttributes, signalClasses, signalHostAttributes, signalHostClasses, signalHostStyle, signalStyle, signalVisibilityChangeClasses, toArray, toArrayTrackByFn };
 //# sourceMappingURL=ethlete-core.mjs.map