@ethlete/core 2.2.1 → 2.4.0

package/fesm2022/ethlete-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, assertInInjectionContext, DestroyRef, ElementRef, isDevMode, Directive, Injectable, Inject, Optional, NgZone, EventEmitter, Output, Injector, ViewContainerRef, Pipe, QueryList } from '@angular/core';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
-import { Observable, combineLatest, Subject, startWith, map, takeUntil, distinctUntilChanged, BehaviorSubject, skip, take, tap, debounceTime, merge, fromEvent, filter, switchMap, pairwise, shareReplay } from 'rxjs';
+import { Observable, combineLatest, Subject, startWith, map, takeUntil, distinctUntilChanged, BehaviorSubject, shareReplay, skip, take, tap, debounceTime, merge, fromEvent, filter, switchMap, pairwise, finalize } from 'rxjs';
 import { coerceCssPixelValue, coerceElement, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { supportsScrollBehavior } from '@angular/cdk/platform';
 import { Overlay } from '@angular/cdk/overlay';
@@ -585,6 +585,33 @@ const createReactiveBindings = (...values) => {
     };
 };
 
+class RuntimeError extends Error {
+    constructor(code, message, data = '__ET_NO_DATA__') {
+        super(formatRuntimeError(code, message));
+        this.code = code;
+        this.data = data;
+        if (data !== '__ET_NO_DATA__') {
+            try {
+                const _data = clone(data);
+                setTimeout(() => {
+                    console.error(_data);
+                }, 1);
+            }
+            catch {
+                setTimeout(() => {
+                    console.error(data);
+                }, 1);
+            }
+        }
+    }
+}
+function formatRuntimeError(code, message) {
+    // prefix code with zeros if it's less than 100
+    const codeWithZeros = code < 10 ? `00${code}` : code < 100 ? `0${code}` : code;
+    const fullCode = `ET${codeWithZeros}`;
+    return `${fullCode}${message ? ': ' + message : ''}`;
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class BehaviorSubjectWithSubscriberCount extends BehaviorSubject {
     constructor() {
@@ -696,6 +723,297 @@ const scrollToElement = (options) => {
     });
 };
 
+const isObject = (value) => {
+    return typeof value === 'object' && value !== null;
+};
+const getObjectProperty = (obj, prop) => {
+    const hasDotNotation = prop.includes('.');
+    if (!hasDotNotation)
+        return obj[prop];
+    const props = prop.split('.');
+    let value = obj;
+    for (const prop of props) {
+        if (!isObject(value))
+            return undefined;
+        value = value[prop];
+    }
+    return value;
+};
+class SelectionModel {
+    constructor() {
+        this._selection$ = new BehaviorSubject([]);
+        this._options$ = new BehaviorSubject([]);
+        this._valueBinding$ = new BehaviorSubject(null);
+        this._keyBinding$ = new BehaviorSubject(null);
+        this._labelBinding$ = new BehaviorSubject(null);
+        this._allowMultiple$ = new BehaviorSubject(false);
+        this._filter$ = new BehaviorSubject('');
+        this.value$ = combineLatest([this.selection$, this.valueBinding$, this.allowMultiple$]).pipe(map(([selection, valueBinding, allowMultiple]) => {
+            if (allowMultiple) {
+                return selection.map((option) => this.getOptionProperty(option, valueBinding));
+            }
+            const [option] = selection;
+            if (!option)
+                return null;
+            return this.getOptionProperty(option, valueBinding);
+        }));
+        this.filteredOptions$ = combineLatest([this.options$, this.filter$, this.labelBinding$]).pipe(map(([options, filter]) => this.getFilteredOptions(filter, options)), shareReplay({ bufferSize: 1, refCount: true }));
+        this._optionsAndSelection$ = combineLatest([this._options$, this._selection$]);
+    }
+    get selection$() {
+        return this._selection$.asObservable();
+    }
+    get selection() {
+        return this._selection$.value;
+    }
+    get options$() {
+        return this._options$.asObservable();
+    }
+    get options() {
+        return this._options$.value;
+    }
+    get valueBinding$() {
+        return this._valueBinding$.asObservable();
+    }
+    get valueBinding() {
+        return this._valueBinding$.value;
+    }
+    get keyBinding$() {
+        return combineLatest([this._keyBinding$, this.valueBinding$]).pipe(map(([keyBinding, valueBinding]) => keyBinding || valueBinding));
+    }
+    get keyBinding() {
+        return this._keyBinding$.value || this.valueBinding;
+    }
+    get labelBinding$() {
+        return this._labelBinding$.asObservable();
+    }
+    get labelBinding() {
+        return this._labelBinding$.value;
+    }
+    get allowMultiple$() {
+        return this._allowMultiple$.asObservable();
+    }
+    get allowMultiple() {
+        return this._allowMultiple$.value;
+    }
+    get filter$() {
+        return this._filter$.asObservable();
+    }
+    get filter() {
+        return this._filter$.value;
+    }
+    setSelection(selection) {
+        if (!Array.isArray(selection)) {
+            selection = [selection];
+        }
+        this._selection$.next(selection);
+        return this;
+    }
+    setValueBinding(propertyPath) {
+        this._valueBinding$.next(propertyPath);
+        return this;
+    }
+    setKeyBinding(propertyPath) {
+        this._keyBinding$.next(propertyPath);
+        return this;
+    }
+    setLabelBinding(propertyPath) {
+        this._labelBinding$.next(propertyPath);
+        return this;
+    }
+    setOptions(options) {
+        this._options$.next(options);
+        return this;
+    }
+    setAllowMultiple(allowMultiple) {
+        this._allowMultiple$.next(allowMultiple);
+        return this;
+    }
+    setFilter(filter) {
+        const sanitizedFilter = filter?.trim() || '';
+        this._filter$.next(sanitizedFilter);
+    }
+    reset() {
+        this._selection$.next([]);
+        this._options$.next([]);
+        this._valueBinding$.next(null);
+        this._keyBinding$.next(null);
+        this._labelBinding$.next(null);
+        this._allowMultiple$.next(false);
+    }
+    getOptionByValue$(value) {
+        return this._optionsAndSelection$.pipe(map(() => this.getOptionByValue(value)));
+    }
+    getOptionByLabel$(label) {
+        return this._optionsAndSelection$.pipe(map(() => this.getOptionByLabel(label)));
+    }
+    getOptionByKey$(key) {
+        return this._optionsAndSelection$.pipe(map(() => this.getOptionByKey(key)));
+    }
+    isSelected$(option) {
+        return this._selection$.pipe(map(() => this.isSelected(option)));
+    }
+    getLabel$(option) {
+        return this.labelBinding$.pipe(map((labelBinding) => this.getOptionProperty(option, labelBinding)));
+    }
+    getValue$(option) {
+        return this.valueBinding$.pipe(map((valueBinding) => this.getOptionProperty(option, valueBinding)));
+    }
+    getKey$(option) {
+        return this.keyBinding$.pipe(map((keyBinding) => this.getOptionProperty(option, keyBinding)));
+    }
+    getOptionByValue(value) {
+        return this.getOption(value, this.valueBinding);
+    }
+    getOptionByLabel(label) {
+        return this.getOption(label, this.labelBinding);
+    }
+    getOptionByKey(key) {
+        return this.getOption(key, this.keyBinding);
+    }
+    getOption(value, propertyPath = null, options = [...this.options, ...this.selection]) {
+        if (!propertyPath) {
+            return options.find((option) => option === value);
+        }
+        return options.find((option) => {
+            if (!isObject(option))
+                return false;
+            return getObjectProperty(option, propertyPath) === value;
+        });
+    }
+    getOptionByIndex(index, options = this.getFilteredOptions()) {
+        return options[index] || null;
+    }
+    getOptionByOffset(offset, index, options = this.getFilteredOptions(), config = { clamp: true }) {
+        const { loop, clamp } = config;
+        const newIndex = index + offset;
+        const remainingOffset = newIndex * -1;
+        if (newIndex < 0) {
+            if (loop) {
+                return this.getOptionByOffset(remainingOffset, options.length - 1, options, config);
+            }
+            if (clamp) {
+                return this.getFirstOption();
+            }
+            return null;
+        }
+        if (newIndex >= options.length) {
+            if (loop) {
+                return this.getOptionByOffset(remainingOffset, 0, options, config);
+            }
+            if (clamp) {
+                return this.getLastOption();
+            }
+            return null;
+        }
+        return this.getOptionByIndex(newIndex);
+    }
+    getFirstOption(options = this.options) {
+        return this.getOptionByIndex(0, options);
+    }
+    getLastOption(options = this.options) {
+        return this.getOptionByIndex(options.length - 1, options);
+    }
+    getOptionIndex(option, options = this.options) {
+        const key = this.getKey(option);
+        const index = options.findIndex((o) => this.getKey(o) === key);
+        return index === -1 ? null : index;
+    }
+    getNonMultipleSelectedOption() {
+        if (this.allowMultiple)
+            return null;
+        return this.selection[0] || null;
+    }
+    getNonMultipleSelectedOptionIndex() {
+        if (this.allowMultiple)
+            return null;
+        const opt = this.getNonMultipleSelectedOption();
+        if (!opt)
+            return null;
+        return this.getOptionIndex(opt);
+    }
+    getNonMultipleOptionByOffsetFromSelected(offset, config = { clamp: true }) {
+        if (this.allowMultiple)
+            return null;
+        const index = this.getNonMultipleSelectedOptionIndex();
+        if (index === null)
+            return null;
+        return this.getOptionByOffset(index, offset, this.getFilteredOptions(), config);
+    }
+    getLabel(option) {
+        return this.getOptionProperty(option, this.labelBinding);
+    }
+    getValue(option) {
+        return this.getOptionProperty(option, this.valueBinding);
+    }
+    getKey(option) {
+        return this.getOptionProperty(option, this.keyBinding);
+    }
+    getOptionProperty(option, propertyPath) {
+        if (!propertyPath || !isObject(option))
+            return option;
+        return getObjectProperty(option, propertyPath);
+    }
+    isSelected(option) {
+        const optionKey = this.getOptionProperty(option, this.keyBinding);
+        return this.getOption(optionKey, this.keyBinding, this.selection) !== undefined;
+    }
+    getFilteredOptions(filter = this.filter, options = this.options) {
+        if (!filter)
+            return options;
+        const splitFilter = filter.split(' ').filter((f) => f);
+        return options.filter((option) => {
+            const label = this.getLabel(option);
+            if (!label || typeof label !== 'string')
+                return false;
+            const splitLabel = label.split(' ').filter((l) => l);
+            return splitFilter.every((f) => splitLabel.some((l) => l.toLowerCase().includes(f.toLowerCase())));
+        });
+    }
+    addSelectedOption(option) {
+        if (this.allowMultiple) {
+            if (this.isSelected(option))
+                return;
+            this._selection$.next([...this.selection, option]);
+        }
+        else {
+            this._selection$.next([option]);
+        }
+    }
+    removeSelectedOption(option) {
+        const optionKey = this.getOptionProperty(option, this.keyBinding);
+        if (!this.isSelected(option))
+            return;
+        this._selection$.next(this.selection.filter((selectedOption) => {
+            const key = this.getOptionProperty(selectedOption, this.keyBinding);
+            return key !== optionKey;
+        }));
+    }
+    clearSelectedOptions() {
+        this._selection$.next([]);
+    }
+    toggleSelectedOption(option) {
+        if (this.isSelected(option)) {
+            this.removeSelectedOption(option);
+        }
+        else {
+            this.addSelectedOption(option);
+        }
+    }
+    toggleAllSelectedOptions() {
+        const filteredOptions = this.getFilteredOptions();
+        const unselectedOptions = filteredOptions.filter((option) => !this.isSelected(option));
+        if (unselectedOptions.length) {
+            const selection = unselectedOptions.filter((o) => !this.selection.some((s) => this.getKey(s) === this.getKey(o)));
+            this._selection$.next([...this.selection, ...selection]);
+        }
+        else {
+            const selection = this.selection.filter((s) => !filteredOptions.some((o) => this.getKey(o) === this.getKey(s)));
+            this._selection$.next(selection);
+        }
+    }
+}
+
 const scrollBehaviorSupported = supportsScrollBehavior();
 class SmartBlockScrollStrategy {
     constructor(_viewportRuler, _routerState, document) {
@@ -785,7 +1103,7 @@ class AnimatableDirective {
     }
     set animatedElement(value) {
         let newElement = null;
-        if (value === null || value === undefined) {
+        if (value === null || value === undefined || value === '') {
             newElement = this._elementRef.nativeElement;
         }
         else if (typeof value === 'string') {
@@ -1243,6 +1561,9 @@ class RouterStateService {
     get route$() {
         return this._route$.asObservable().pipe(distinctUntilChanged());
     }
+    get route() {
+        return this._route$.getValue();
+    }
     get state$() {
         return this._state$.asObservable();
     }
@@ -1432,17 +1753,34 @@ class ViewportService {
     get is2Xl() {
         return this._is2Xl$.value;
     }
+    get viewportSize$() {
+        return this._viewportSize$.asObservable();
+    }
+    get viewportSize() {
+        return this._viewportSize$.value;
+    }
+    get scrollbarSize$() {
+        return this._scrollbarSize$.asObservable();
+    }
+    get scrollbarSize() {
+        return this._scrollbarSize$.value;
+    }
     get currentViewport() {
         return this.getCurrentViewport([this.isXs, this.isSm, this.isMd, this.isLg, this.isXl, this.is2Xl]);
     }
     constructor(_viewportConfig, _breakpointObserver) {
         this._breakpointObserver = _breakpointObserver;
+        this._resizeObserverService = inject(ResizeObserverService);
+        this._viewportMonitorStop$ = new Subject();
+        this._isViewportMonitorEnabled = false;
         this._isXs$ = new BehaviorSubject(false);
         this._isSm$ = new BehaviorSubject(false);
         this._isMd$ = new BehaviorSubject(false);
         this._isLg$ = new BehaviorSubject(false);
         this._isXl$ = new BehaviorSubject(false);
         this._is2Xl$ = new BehaviorSubject(false);
+        this._viewportSize$ = new BehaviorSubject(null);
+        this._scrollbarSize$ = new BehaviorSubject(null);
         this.currentViewport$ = combineLatest([this.isXs$, this.isSm$, this.isMd$, this.isLg$, this.isXl$, this.is2Xl$]).pipe(map((val) => this.getCurrentViewport(val)), shareReplay(1));
         this._viewportConfig = _viewportConfig || DEFAULT_VIEWPORT_CONFIG;
         this._observeDefaultBreakpoints();
@@ -1455,6 +1793,57 @@ class ViewportService {
         const mediaQuery = this._buildMediaQuery(options);
         return this._breakpointObserver.isMatched(mediaQuery);
     }
+    /**
+     * Applies size CSS variables to the documentElement in pixels.
+     * - `--et-vw`: viewport width excluding scrollbar width
+     * - `--et-vh`: viewport height excluding scrollbar height
+     * - `--et-sw`: scrollbar width
+     * - `--et-sh`: scrollbar height
+     */
+    monitorViewport() {
+        if (this._isViewportMonitorEnabled)
+            return;
+        this._isViewportMonitorEnabled = true;
+        this._resizeObserverService
+            .observe(document.documentElement)
+            .pipe(tap((e) => {
+            const width = e[0].contentRect.width;
+            const height = e[0].contentRect.height;
+            document.documentElement.style.setProperty('--et-vw', `${width}px`);
+            document.documentElement.style.setProperty('--et-vh', `${height}px`);
+            this._viewportSize$.next({ width, height });
+        }), finalize(() => {
+            document.documentElement.style.removeProperty('--et-vw');
+            document.documentElement.style.removeProperty('--et-vh');
+            this._viewportSize$.next(null);
+        }), takeUntil(this._viewportMonitorStop$))
+            .subscribe();
+        const scrollbarRuler = document.createElement('div');
+        scrollbarRuler.style.width = '100px';
+        scrollbarRuler.style.height = '100px';
+        scrollbarRuler.style.overflow = 'scroll';
+        scrollbarRuler.style.position = 'absolute';
+        scrollbarRuler.style.top = '-9999px';
+        document.body.appendChild(scrollbarRuler);
+        this._resizeObserverService
+            .observe(scrollbarRuler)
+            .pipe(tap((e) => {
+            const size = e[0].contentRect.width;
+            document.documentElement.style.setProperty('--et-sw', `${100 - size}px`);
+            document.documentElement.style.setProperty('--et-sh', `${100 - size}px`);
+            this._scrollbarSize$.next({ width: 100 - size, height: 100 - size });
+        }), finalize(() => {
+            document.body.removeChild(scrollbarRuler);
+            document.documentElement.style.removeProperty('--et-vw');
+            document.documentElement.style.removeProperty('--et-vh');
+            this._scrollbarSize$.next(null);
+        }), takeUntil(this._viewportMonitorStop$))
+            .subscribe();
+    }
+    unmonitorViewport() {
+        this._viewportMonitorStop$.next();
+        this._isViewportMonitorEnabled = false;
+    }
     _observeDefaultBreakpoints() {
         this.observe({ max: 'xs' }).subscribe(this._isXs$);
         this.observe({ min: 'sm', max: 'sm' }).subscribe(this._isSm$);
@@ -3040,5 +3429,5 @@ const Validators = {
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AnimatableDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BehaviorSubjectWithSubscriberCount, ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEFAULT_VIEWPORT_CONFIG, DELAYABLE_TOKEN, DelayableDirective, ET_PROPERTY_REMOVED, FocusVisibleService, IS_ACTIVE_ELEMENT, IS_ARRAY_NOT_EMPTY, IS_EMAIL, IsActiveElementDirective, IsArrayNotEmpty, IsEmail, LetContext, LetDirective, MUST_MATCH, Memo, MustMatch, MutationObserverFactory, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OBSERVE_SCROLL_STATE, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RouterStateService, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, SEO_DIRECTIVE_TOKEN, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, SeoDirective, SmartBlockScrollStrategy, StructuredDataComponent, ToArrayPipe, TypedQueryList, VIEWPORT_CONFIG, Validators, ViewportService, clamp, clone, createDestroy, createFlipAnimation, createFlipAnimationGroup, createMediaQueryObservable, createReactiveBindings, deleteCookie, elementCanScroll, equal, forceReflow, fromNextFrame, getCookie, getDomain, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, hasCookie, isElementVisible, isGroupMatch, isKnockoutMatch, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, provideViewportConfig, routerDisableScrollTop, scrollToElement, setCookie, toArray, toArrayTrackByFn };
+export { ANIMATABLE_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AnimatableDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BehaviorSubjectWithSubscriberCount, ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEFAULT_VIEWPORT_CONFIG, DELAYABLE_TOKEN, DelayableDirective, ET_PROPERTY_REMOVED, FocusVisibleService, IS_ACTIVE_ELEMENT, IS_ARRAY_NOT_EMPTY, IS_EMAIL, IsActiveElementDirective, IsArrayNotEmpty, IsEmail, LetContext, LetDirective, MUST_MATCH, Memo, MustMatch, MutationObserverFactory, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OBSERVE_SCROLL_STATE, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RouterStateService, RuntimeError, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, SEO_DIRECTIVE_TOKEN, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, SelectionModel, SeoDirective, SmartBlockScrollStrategy, StructuredDataComponent, ToArrayPipe, TypedQueryList, VIEWPORT_CONFIG, Validators, ViewportService, clamp, clone, createDestroy, createFlipAnimation, createFlipAnimationGroup, createMediaQueryObservable, createReactiveBindings, deleteCookie, elementCanScroll, equal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, hasCookie, isElementVisible, isGroupMatch, isKnockoutMatch, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, provideViewportConfig, routerDisableScrollTop, scrollToElement, setCookie, toArray, toArrayTrackByFn };
 //# sourceMappingURL=ethlete-core.mjs.map