@ethlete/core 4.12.1 → 4.14.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, TemplateRef, Injectable, isSignal, signal, QueryList, Injector, runInInjectionContext, effect, afterNextRender, NgZone, isDevMode, computed, untracked, Directive, model, EventEmitter, booleanAttribute, numberAttribute, Output, ViewContainerRef, Pipe, AfterRenderPhase, input } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, assertInInjectionContext, DestroyRef, ElementRef, TemplateRef, Injectable, isSignal, signal, QueryList, Injector, effect, untracked, runInInjectionContext, afterNextRender, NgZone, isDevMode, computed, Directive, model, EventEmitter, booleanAttribute, numberAttribute, Output, ViewContainerRef, Pipe, AfterRenderPhase, input } from '@angular/core';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
 import { Subject, BehaviorSubject, takeUntil, switchMap, of, tap, map, startWith, Observable, combineLatest, timer, distinctUntilChanged, shareReplay, filter, take, fromEvent, pairwise, debounceTime, finalize, merge, skip, takeWhile } from 'rxjs';
 import { END, HOME, PAGE_DOWN, PAGE_UP, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
@@ -1011,16 +1011,18 @@ const isElementVisible = (options) => {
     const elementBlockStart = elementRect.top;
     const containerInlineStart = containerRect.left;
     const containerBlockStart = containerRect.top;
-    const elementInlineEnd = elementInlineStart + elementRect.width;
-    const elementBlockEnd = elementBlockStart + elementRect.height;
+    const elWith = elementRect.width || 1;
+    const elHeight = elementRect.height || 1;
+    const elementInlineEnd = elementInlineStart + elWith;
+    const elementBlockEnd = elementBlockStart + elHeight;
     const containerInlineEnd = containerInlineStart + containerRect.width;
     const containerBlockEnd = containerBlockStart + containerRect.height;
     const isElementInlineVisible = elementInlineStart >= containerInlineStart && elementInlineEnd <= containerInlineEnd;
     const isElementBlockVisible = elementBlockStart >= containerBlockStart && elementBlockEnd <= containerBlockEnd;
     const inlineIntersection = Math.min(elementInlineEnd, containerInlineEnd) - Math.max(elementInlineStart, containerInlineStart);
     const blockIntersection = Math.min(elementBlockEnd, containerBlockEnd) - Math.max(elementBlockStart, containerBlockStart);
-    const inlineIntersectionPercentage = clamp((inlineIntersection / elementRect.width) * 100);
-    const blockIntersectionPercentage = clamp((blockIntersection / elementRect.height) * 100);
+    const inlineIntersectionPercentage = clamp((inlineIntersection / elWith) * 100);
+    const blockIntersectionPercentage = clamp((blockIntersection / elHeight) * 100);
     return {
         inline: isElementInlineVisible,
         block: isElementBlockVisible,
@@ -2301,35 +2303,64 @@ const buildElementSignal = (el) => {
         previousElement: previousElements?.[0] ?? null,
     }))), { initialValue: { currentElement: null, previousElement: null, previousElements: [], currentElements: [] } });
 };
-const buildSignalEffects = (config) => {
+const buildSignalEffects = (el, config) => {
+    const elements = buildElementSignal(el);
     const injector = inject(Injector);
-    const { map, eachItemFn, cleanupFn } = config;
-    const effectRefMap = {};
-    const has = (token) => token in effectRefMap;
-    const push = (tokenString, signal) => {
-        if (has(tokenString))
-            return;
-        const tokenArray = tokenString.split(' ').filter((token) => !!token);
-        for (const token of tokenArray) {
-            runInInjectionContext(injector, () => {
-                const ref = effect(() => {
-                    const value = signal();
-                    eachItemFn({ key: token, value });
+    effect(() => {
+        const { currentElements, previousElements } = elements();
+        for (const previousEl of previousElements) {
+            if (currentElements.includes(previousEl))
+                continue;
+            const tokens = Object.keys(config.tokenMap)
+                .map((key) => key.split(' '))
+                .flat();
+            if (!tokens.length)
+                continue;
+            config.cleanupFn(previousEl, tokens);
+        }
+        for (const currentEl of currentElements) {
+            if (previousElements.includes(currentEl))
+                continue;
+            for (const [tokens, condition] of Object.entries(config.tokenMap)) {
+                untracked(() => {
+                    const tokenArray = tokens.split(' ');
+                    if (!tokenArray.length)
+                        return;
+                    config.updateFn(currentEl, tokenArray, condition());
                 });
-                effectRefMap[token] = ref;
-            });
+            }
         }
+    });
+    const effects = {};
+    const has = (tokens) => tokens in effects;
+    const push = (tokens, signal) => {
+        if (has(tokens))
+            return;
+        runInInjectionContext(injector, () => {
+            effects[tokens] = effect(() => {
+                const { currentElements } = untracked(() => elements());
+                for (const el of currentElements) {
+                    const tokenArray = tokens.split(' ');
+                    if (!tokenArray.length)
+                        continue;
+                    config.updateFn(el, tokenArray, signal());
+                }
+            });
+        });
     };
     const pushMany = (map) => {
-        for (const [tokenString, signal] of Object.entries(map)) {
-            push(tokenString, signal);
+        for (const [tokens, signal] of Object.entries(map)) {
+            push(tokens, signal);
         }
     };
-    const remove = (...tokens) => {
-        for (const tokenString of tokens) {
-            effectRefMap[tokenString]?.destroy();
-            cleanupFn({ key: tokenString, value: map[tokenString]?.() });
-            delete effectRefMap[tokenString];
+    const remove = (tokens) => {
+        effects[tokens]?.destroy();
+        delete effects[tokens];
+        for (const el of elements().currentElements) {
+            const tokenArray = tokens.split(' ');
+            if (!tokenArray.length)
+                continue;
+            config.cleanupFn(el, tokenArray);
         }
     };
     const removeMany = (tokens) => {
@@ -2337,7 +2368,7 @@ const buildSignalEffects = (config) => {
             remove(token);
         }
     };
-    pushMany(map);
+    pushMany(config.tokenMap);
     return { remove, removeMany, has, push, pushMany };
 };
 const signalIsRendered = () => {
@@ -2346,63 +2377,61 @@ const signalIsRendered = () => {
     return isRendered.asReadonly();
 };
 const signalClasses = (el, classMap) => {
-    const elements = buildElementSignal(el);
-    return buildSignalEffects({
-        map: classMap,
-        eachItemFn: ({ key, value }) => {
-            if (value) {
-                elements().currentElement?.classList.add(key);
+    return buildSignalEffects(el, {
+        tokenMap: classMap,
+        cleanupFn: (el, tokens) => el.classList.remove(...tokens),
+        updateFn: (el, tokens, condition) => {
+            if (!condition) {
+                el.classList.remove(...tokens);
             }
             else {
-                elements().currentElement?.classList.remove(key);
+                el.classList.add(...tokens);
             }
         },
-        cleanupFn: ({ key }) => elements().currentElement?.classList.remove(key),
     });
 };
 const signalHostClasses = (classMap) => signalClasses(inject(ElementRef), classMap);
 const ALWAYS_TRUE_ATTRIBUTE_KEYS = ['disabled', 'readonly', 'required', 'checked', 'selected', 'hidden', 'inert'];
 const signalAttributes = (el, attributeMap) => {
-    const elements = buildElementSignal(el);
-    return buildSignalEffects({
-        map: attributeMap,
-        eachItemFn: ({ key, value }) => {
-            const valueString = `${value}`;
-            if (ALWAYS_TRUE_ATTRIBUTE_KEYS.includes(key)) {
-                if (value) {
-                    elements().currentElement?.setAttribute(key, '');
-                }
-                else {
-                    elements().currentElement?.removeAttribute(key);
+    return buildSignalEffects(el, {
+        tokenMap: attributeMap,
+        cleanupFn: (el, tokens) => tokens.forEach((token) => el.removeAttribute(token)),
+        updateFn: (el, tokens, condition) => {
+            for (const token of tokens) {
+                if (ALWAYS_TRUE_ATTRIBUTE_KEYS.includes(token)) {
+                    if (condition) {
+                        el.setAttribute(token, '');
+                    }
+                    else {
+                        el.removeAttribute(token);
+                    }
+                    continue;
                 }
-            }
-            else {
-                if (value === null || value === undefined) {
-                    elements().currentElement?.removeAttribute(key);
+                if (condition === null || condition === undefined) {
+                    el.removeAttribute(token);
                 }
                 else {
-                    elements().currentElement?.setAttribute(key, valueString);
+                    el.setAttribute(token, `${condition}`);
                 }
             }
         },
-        cleanupFn: ({ key }) => elements().currentElement?.removeAttribute(key),
     });
 };
 const signalHostAttributes = (attributeMap) => signalAttributes(inject(ElementRef), attributeMap);
 const signalStyles = (el, styleMap) => {
-    const elements = buildElementSignal(el);
-    return buildSignalEffects({
-        map: styleMap,
-        eachItemFn: ({ key, value }) => {
-            if (value === null || value === undefined) {
-                elements().currentElement?.style.removeProperty(key);
-            }
-            else {
-                const valueString = `${value}`;
-                elements().currentElement?.style.setProperty(key, valueString);
+    return buildSignalEffects(el, {
+        tokenMap: styleMap,
+        cleanupFn: (el, tokens) => tokens.forEach((token) => el.style.removeProperty(token)),
+        updateFn: (el, tokens, condition) => {
+            for (const token of tokens) {
+                if (condition === null || condition === undefined) {
+                    el.style.removeProperty(token);
+                }
+                else {
+                    el.style.setProperty(token, `${condition}`);
+                }
             }
         },
-        cleanupFn: ({ key }) => elements().currentElement?.style.removeProperty(key),
     });
 };
 const signalHostStyles = (styleMap) => signalStyles(inject(ElementRef), styleMap);
@@ -2487,11 +2516,25 @@ const signalElementMutations = (el, options) => {
     return elementMutationsSignal.asReadonly();
 };
 const signalHostElementMutations = (options) => signalElementMutations(inject(ElementRef), options);
-const signalElementScrollState = (el) => {
+const signalElementScrollState = (el, options) => {
     const elements = buildElementSignal(el);
     const elementDimensions = signalElementDimensions(elements);
     const elementMutations = signalElementMutations(elements, { childList: true, subtree: true });
     const isRendered = signalIsRendered();
+    const initialScrollPosition = options?.initialScrollPosition;
+    if (initialScrollPosition) {
+        const ref = effect(() => {
+            if (!isRendered())
+                return;
+            const scrollPosition = initialScrollPosition();
+            const element = elements().currentElement;
+            if (scrollPosition && element) {
+                element.scrollLeft = scrollPosition.x;
+                element.scrollTop = scrollPosition.y;
+                ref.destroy();
+            }
+        });
+    }
     return computed(() => {
         const element = elements().currentElement;
         const dimensions = elementDimensions();
@@ -2565,6 +2608,40 @@ const signalElementIntersection = (el, options) => {
             obs?.disconnect();
         }
         if (els.currentElements.length && !!enabled) {
+            const rootEl = untracked(() => root().currentElement);
+            const rootBounds = rootEl?.getBoundingClientRect();
+            // check sync for intersections since the intersection observer async and we probably want to know the initial state
+            const entries = els.currentElements
+                .map((el) => {
+                const visibility = isElementVisible({
+                    container: rootEl,
+                    element: el,
+                });
+                if (!visibility) {
+                    console.error('No visibility data found for element.', {
+                        element: el,
+                        container: rootEl,
+                    });
+                    return null;
+                }
+                const inlineIntersectionRatio = visibility.inlineIntersection / 100;
+                const blockIntersectionRatio = visibility.blockIntersection / 100;
+                const isIntersecting = inlineIntersectionRatio > 0 && blockIntersectionRatio > 0;
+                const intersectionRatio = Math.min(inlineIntersectionRatio, blockIntersectionRatio);
+                const elBounds = el.getBoundingClientRect();
+                const intersectionEntry = {
+                    boundingClientRect: elBounds,
+                    intersectionRatio,
+                    intersectionRect: elBounds,
+                    isIntersecting,
+                    rootBounds: rootBounds ?? null,
+                    target: el,
+                    time: performance.now(),
+                };
+                return intersectionEntry;
+            })
+                .filter((e) => e !== null);
+            elementIntersectionSignal.set(entries);
             for (const el of els.currentElements) {
                 obs?.observe(el);
             }
@@ -2699,6 +2776,27 @@ const injectPathParam = (key, config) => {
     const src = computed(() => pathParams()[key] ?? null);
     return transformOrReturn(src, config);
 };
+const createIsRenderedSignal = () => {
+    const value = signal(false);
+    nextFrame(() => {
+        if (!value()) {
+            console.error('Render signal was not set to true. This can cause unexpected behavior. Make sure to .bind() the render signal at the end of the constructor.');
+        }
+    });
+    return {
+        state: value,
+        bind: () => effect(() => value.set(true), { allowSignalWrites: true }),
+    };
+};
+const createCanAnimateSignal = () => {
+    const value = signal(false);
+    nextFrame(() => {
+        value.set(true);
+    });
+    return {
+        state: value,
+    };
+};
 
 const scrollBehaviorSupported = supportsScrollBehavior();
 let _uniqueIdCounter = 0;
@@ -5364,5 +5462,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, CURSOR_DRAG_SCROLLING_CLASS, CURSOR_DRAG_SCROLLING_PREPARED_CLASS, 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, InferMimeTypePipe, 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, PropsDirective, ROOT_BOUNDARY_TOKEN, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RootBoundaryDirective, 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, bindProps, buildSignalEffects, clamp, clone, cloneFormGroup, controlValueSignal, controlValueSignalWithPrevious, createComponentId, createDependencyStash, createDestroy, createElementDictionary, createFlipAnimation, createFlipAnimationGroup, createHostProps, createMediaQueryObservable, createMutationObservable, createPropHandlers, createProps, createReactiveBindings, createResizeObservable, createSetup, debouncedControlValueSignal, deleteCookie, elementCanScroll, equal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementVisibleStates, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getIntersectionInfo, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, hasCookie, inferMimeType, injectFragment, injectHostElement, injectOrRunInContext, injectPathParam, injectPathParams, injectQueryParam, injectQueryParams, injectRouteData, injectRouteDataItem, injectRouteTitle, injectTemplateRef, isArray, isElementVisible, isEmptyArray, isGroupMatch, isKnockoutMatch, isObject, isObjectArray, isPrimitiveArray, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, previousSignalValue, provideViewportConfig, round, routerDisableScrollTop, scrollToElement, setCookie, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, signalVisibilityChangeClasses, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, transformOrReturn, unbindProps };
+export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, ActiveSelectionModel, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, CURSOR_DRAG_SCROLLING_CLASS, CURSOR_DRAG_SCROLLING_PREPARED_CLASS, 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, InferMimeTypePipe, 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, PropsDirective, ROOT_BOUNDARY_TOKEN, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RootBoundaryDirective, 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, bindProps, buildSignalEffects, clamp, clone, cloneFormGroup, controlValueSignal, controlValueSignalWithPrevious, createCanAnimateSignal, createComponentId, createDependencyStash, createDestroy, createElementDictionary, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createMediaQueryObservable, createMutationObservable, createPropHandlers, createProps, createReactiveBindings, createResizeObservable, createSetup, debouncedControlValueSignal, deleteCookie, elementCanScroll, equal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementVisibleStates, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getIntersectionInfo, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, hasCookie, inferMimeType, injectFragment, injectHostElement, injectOrRunInContext, injectPathParam, injectPathParams, injectQueryParam, injectQueryParams, injectRouteData, injectRouteDataItem, injectRouteTitle, injectTemplateRef, isArray, isElementVisible, isEmptyArray, isGroupMatch, isKnockoutMatch, isObject, isObjectArray, isPrimitiveArray, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, previousSignalValue, provideViewportConfig, round, routerDisableScrollTop, scrollToElement, setCookie, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, signalVisibilityChangeClasses, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, transformOrReturn, unbindProps };
 //# sourceMappingURL=ethlete-core.mjs.map