@ngstarter-ui/components 21.0.11 → 21.0.13

package/fesm2022/ngstarter-ui-components-digit-roller.mjs

@@ -0,0 +1,748 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, input, output, signal, computed, inject, PLATFORM_ID, ElementRef, DestroyRef, effect, untracked, afterEveryRender, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, forwardRef, Directive } from '@angular/core';
+
+let staticCapable;
+let prefersReducedMotion;
+function isStaticallyCapable() {
+    if (staticCapable !== undefined) {
+        return staticCapable;
+    }
+    staticCapable =
+        typeof window !== 'undefined' &&
+            typeof window.CSS !== 'undefined' &&
+            typeof window.Element !== 'undefined' &&
+            typeof window.Element.prototype.animate === 'function' &&
+            typeof window.CSS.registerProperty === 'function' &&
+            window.CSS.supports('width', 'calc(mod(2, 10) * 1px)') &&
+            supportsLinearEasing();
+    return staticCapable;
+}
+function getPrefersReducedMotion() {
+    if (prefersReducedMotion !== undefined) {
+        return prefersReducedMotion;
+    }
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return false;
+    }
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    prefersReducedMotion = mediaQuery.matches;
+    if (typeof mediaQuery.addEventListener === 'function') {
+        mediaQuery.addEventListener('change', (event) => {
+            prefersReducedMotion = event.matches;
+        });
+    }
+    return prefersReducedMotion;
+}
+function resetDigitRollerCapabilityCache() {
+    staticCapable = undefined;
+    prefersReducedMotion = undefined;
+}
+function canAnimateDigitRoller(options = {}) {
+    if (!isStaticallyCapable()) {
+        return false;
+    }
+    return options.respectMotionPreference === false || !getPrefersReducedMotion();
+}
+function supportsLinearEasing() {
+    try {
+        document.createElement('div').animate({ opacity: 0 }, { easing: 'linear(0, 1)' });
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+
+const PRE_TYPES = new Set(['currency', 'literal', 'minusSign', 'plusSign', 'nan', 'infinity']);
+const POST_TYPES = new Set(['percentSign', 'unit']);
+const formatterCache = new Map();
+function getCachedFormatter(locales, options) {
+    const key = JSON.stringify(locales) + ':' + JSON.stringify(options);
+    let formatter = formatterCache.get(key);
+    if (!formatter) {
+        formatter = new Intl.NumberFormat(locales, options);
+        formatterCache.set(key, formatter);
+    }
+    return formatter;
+}
+function getDigitRollerGlyphs(locales, options = {}) {
+    const formatter = getCachedFormatter(locales, {
+        numberingSystem: options.numberingSystem,
+        useGrouping: false,
+        maximumFractionDigits: 0,
+    });
+    return Array.from({ length: 10 }, (_, value) => ({
+        value,
+        glyph: formatter.format(value),
+    }));
+}
+function getDigitValueMap(locales, options = {}) {
+    return new Map(getDigitRollerGlyphs(locales, options).map(({ glyph, value }) => [glyph, value]));
+}
+function formatDigitRollerValue(value, options = {}, locales, prefix = '', suffix = '') {
+    const formatter = getCachedFormatter(locales, options);
+    const digitValues = getDigitValueMap(locales, options);
+    const parts = formatter.formatToParts(value);
+    const pre = [];
+    const rawInteger = [];
+    const fraction = [];
+    const post = [];
+    let seenInteger = false;
+    let seenDecimal = false;
+    for (const part of parts) {
+        if (part.type === 'integer' || part.type === 'group') {
+            seenInteger = true;
+            rawInteger.push(part);
+        }
+        else if (part.type === 'decimal' || part.type === 'fraction') {
+            seenDecimal = true;
+            fraction.push({ type: part.type, value: part.value, key: '' });
+        }
+        else if (!seenInteger && PRE_TYPES.has(part.type)) {
+            pre.push({ type: part.type, value: part.value, key: `pre-${pre.length}` });
+        }
+        else if (seenInteger && POST_TYPES.has(part.type)) {
+            post.push({ type: part.type, value: part.value, key: `post-${post.length}` });
+        }
+        else if (seenDecimal || seenInteger) {
+            post.push({ type: part.type, value: part.value, key: `post-${post.length}` });
+        }
+        else {
+            pre.push({ type: part.type, value: part.value, key: `pre-${pre.length}` });
+        }
+    }
+    if (prefix) {
+        pre.unshift({ type: 'prefix', value: prefix, key: '__prefix' });
+    }
+    if (suffix) {
+        post.push({ type: 'suffix', value: suffix, key: '__suffix' });
+    }
+    const splitInteger = [];
+    for (const part of rawInteger) {
+        if (part.type === 'integer') {
+            for (const char of part.value) {
+                splitInteger.push({ type: 'integer', value: char });
+            }
+        }
+        else {
+            splitInteger.push(part);
+        }
+    }
+    let digitIndex = 0;
+    const reversedInteger = [];
+    for (let i = splitInteger.length - 1; i >= 0; i--) {
+        const part = splitInteger[i];
+        if (part.type === 'integer') {
+            reversedInteger.push({
+                type: 'integer',
+                value: part.value,
+                key: `i${digitIndex}`,
+                numericValue: digitValues.get(part.value) ?? Number(part.value),
+            });
+            digitIndex++;
+        }
+        else {
+            reversedInteger.push({ type: 'group', value: part.value, key: `g${digitIndex}` });
+        }
+    }
+    let fractionDigitIndex = 0;
+    const keyedFraction = [];
+    for (const part of fraction) {
+        if (part.type === 'fraction') {
+            for (const char of part.value) {
+                keyedFraction.push({
+                    type: 'fraction',
+                    value: char,
+                    key: `f${++fractionDigitIndex}`,
+                    numericValue: digitValues.get(char) ?? Number(char),
+                });
+            }
+        }
+        else {
+            keyedFraction.push({ ...part, key: 'decimal' });
+        }
+    }
+    return { pre, integer: reversedInteger.reverse(), fraction: keyedFraction, post };
+}
+
+const DIGIT_ROLLER_GROUP = new InjectionToken('DIGIT_ROLLER_GROUP');
+
+const DIGIT_ROLLER_EMPTY_FORMATTED = {
+    pre: [],
+    integer: [],
+    fraction: [],
+    post: [],
+};
+
+const SPIN_EASING = 'linear(0,.005,.019,.039,.066,.096,.129,.165,.202,.24,.278,.316,.354,.39,.426,.461,' +
+    '.494,.526,.557,.586,.614,.64,.665,.689,.711,.731,.751,.769,.786,.802,.817,.831,.844,' +
+    '.856,.867,.877,.887,.896,.904,.912,.919,.925,.931,.937,.942,.947,.951,.955,.959,.962,' +
+    '.965,.968,.971,.973,.976,.978,.98,.981,.983,.984,.986,.987,.988,.989,.99,.991,.992,' +
+    '.992,.993,.994,.994,.995,.995,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,' +
+    '.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)';
+const EASING_PRESETS = {
+    default: SPIN_EASING,
+    spring: SPIN_EASING,
+    overshoot: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+};
+class DigitRoller {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    format = input({}, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    locales = input(undefined, ...(ngDevMode ? [{ debugName: "locales" }] : /* istanbul ignore next */ []));
+    prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+    suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    duration = input(undefined, ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+    opacityDuration = input(undefined, ...(ngDevMode ? [{ debugName: "opacityDuration" }] : /* istanbul ignore next */ []));
+    transformTiming = input(undefined, ...(ngDevMode ? [{ debugName: "transformTiming" }] : /* istanbul ignore next */ []));
+    spinTiming = input(undefined, ...(ngDevMode ? [{ debugName: "spinTiming" }] : /* istanbul ignore next */ []));
+    opacityTiming = input(undefined, ...(ngDevMode ? [{ debugName: "opacityTiming" }] : /* istanbul ignore next */ []));
+    spinEasing = input(undefined, ...(ngDevMode ? [{ debugName: "spinEasing" }] : /* istanbul ignore next */ []));
+    flipEasing = input(undefined, ...(ngDevMode ? [{ debugName: "flipEasing" }] : /* istanbul ignore next */ []));
+    trend = input(undefined, ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
+    continuous = input(false, ...(ngDevMode ? [{ debugName: "continuous" }] : /* istanbul ignore next */ []));
+    digits = input({}, ...(ngDevMode ? [{ debugName: "digits" }] : /* istanbul ignore next */ []));
+    respectMotionPreference = input(true, ...(ngDevMode ? [{ debugName: "respectMotionPreference" }] : /* istanbul ignore next */ []));
+    stagger = input(0, ...(ngDevMode ? [{ debugName: "stagger" }] : /* istanbul ignore next */ []));
+    colorOnIncrease = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnIncrease" }] : /* istanbul ignore next */ []));
+    colorOnDecrease = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnDecrease" }] : /* istanbul ignore next */ []));
+    animationsStart = output();
+    animationsFinish = output();
+    data = signal(DIGIT_ROLLER_EMPTY_FORMATTED, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    digitGlyphs = computed(() => getDigitRollerGlyphs(this.locales(), this.format()), ...(ngDevMode ? [{ debugName: "digitGlyphs" }] : /* istanbul ignore next */ []));
+    formattedPlainText = computed(() => new Intl.NumberFormat(this.locales(), this.format()).format(this.value()), ...(ngDevMode ? [{ debugName: "formattedPlainText" }] : /* istanbul ignore next */ []));
+    effectiveSettings = computed(() => {
+        const duration = this.duration() ?? 900;
+        return {
+            duration,
+            opacityDuration: this.opacityDuration() ?? 450,
+            spinEasing: this.resolveEasing(this.spinEasing()),
+            flipEasing: this.resolveEasing(this.flipEasing()),
+            transformTiming: this.transformTiming(),
+            spinTiming: this.spinTiming(),
+            opacityTiming: this.opacityTiming(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "effectiveSettings" }] : /* istanbul ignore next */ []));
+    platformId = inject(PLATFORM_ID);
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    group = inject(DIGIT_ROLLER_GROUP, { optional: true });
+    prevRects = new Map();
+    prevInnerHTML = new Map();
+    prevDigitD = new Map();
+    prevDigitCurrent = new Map();
+    prevDigitValues = new Map();
+    prevDigitOrder = [];
+    prevNumberLeft = 0;
+    prevNumberWidth = 0;
+    prevNumericValue = 0;
+    animCount = 0;
+    pending = false;
+    destroyed = false;
+    hasRenderedValue = false;
+    liveAnimations = [];
+    spinCount = new Map();
+    animationsFinishAbort;
+    pendingCanAnimate = false;
+    pendingHostFont = '';
+    pendingHostColor = '';
+    pendingKeyedEls = [];
+    pendingNumberRect = null;
+    pendingNumberOffsetWidth = 0;
+    isNearViewport = true;
+    viewportObserver;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+            this.animationsFinishAbort?.abort();
+            this.viewportObserver?.disconnect();
+            for (const animation of this.liveAnimations) {
+                try {
+                    animation.cancel();
+                }
+                catch {
+                    /* Animation cancellation can throw AbortError in some browsers. */
+                }
+            }
+            this.liveAnimations = [];
+        });
+        effect(() => {
+            const value = this.value();
+            const format = this.format();
+            const locales = this.locales();
+            const prefix = this.prefix();
+            const suffix = this.suffix();
+            if (!this.hasRenderedValue) {
+                untracked(() => this.data.set(formatDigitRollerValue(value, format, locales, prefix, suffix)));
+                this.prevNumericValue = value;
+                this.hasRenderedValue = true;
+                return;
+            }
+            const canAnimateThisUpdate = isPlatformBrowser(this.platformId) && this.animated() && this.canAnimateNow();
+            if (canAnimateThisUpdate) {
+                const handledByGroup = this.group?.requestGroupedUpdate(this, () => {
+                    untracked(() => this.data.set(formatDigitRollerValue(value, format, locales, prefix, suffix)));
+                });
+                if (handledByGroup) {
+                    return;
+                }
+                this.snapshot();
+                untracked(() => this.data.set(formatDigitRollerValue(value, format, locales, prefix, suffix)));
+                this.pending = true;
+            }
+            else {
+                untracked(() => this.data.set(formatDigitRollerValue(value, format, locales, prefix, suffix)));
+                this.prevNumericValue = value;
+            }
+        });
+        if (isPlatformBrowser(this.platformId)) {
+            if (typeof IntersectionObserver !== 'undefined') {
+                this.viewportObserver = new IntersectionObserver((entries) => {
+                    this.isNearViewport = entries[entries.length - 1].isIntersecting;
+                }, { rootMargin: '240px' });
+                this.viewportObserver.observe(this.elementRef.nativeElement);
+            }
+            afterEveryRender({
+                earlyRead: () => {
+                    if (this.pending) {
+                        this.readAnimationState();
+                    }
+                },
+                write: () => {
+                    if (this.pending) {
+                        this.pending = false;
+                        this.fireAnimations();
+                    }
+                },
+            });
+        }
+    }
+    canGroupAnimateNow() {
+        return isPlatformBrowser(this.platformId) && this.animated() && this.canAnimateNow();
+    }
+    prepareGroupedUpdate() {
+        this.snapshot();
+    }
+    queueGroupedAnimation() {
+        this.pending = true;
+    }
+    snapshot() {
+        const host = this.elementRef.nativeElement;
+        this.prevRects.clear();
+        this.prevInnerHTML.clear();
+        this.prevDigitD.clear();
+        this.prevDigitCurrent.clear();
+        this.prevDigitValues.clear();
+        this.prevDigitOrder = [];
+        const number = host.querySelector('.ngs-digit-roller__number');
+        if (number) {
+            const numberRect = number.getBoundingClientRect();
+            this.prevNumberLeft = numberRect.left;
+            this.prevNumberWidth = numberRect.width;
+        }
+        untracked(() => {
+            [...this.data().integer, ...this.data().fraction].forEach((part) => {
+                if (part.type === 'integer' || part.type === 'fraction') {
+                    this.prevDigitValues.set(part.key, this.getPartDigitValue(part));
+                    this.prevDigitOrder.push(part.key);
+                }
+            });
+        });
+        host.querySelectorAll('[data-key]').forEach((element) => {
+            const key = element.getAttribute('data-key');
+            this.prevRects.set(key, element.getBoundingClientRect());
+            this.prevInnerHTML.set(key, element.innerHTML);
+            if (element.classList.contains('ngs-digit-roller__digit')) {
+                const styles = getComputedStyle(element);
+                this.prevDigitD.set(key, styles.getPropertyValue('--_ngs-digit-roller-d').trim() || '0');
+                this.prevDigitCurrent.set(key, (element.style.getPropertyValue('--_ngs-digit-roller-current') || '0').trim());
+            }
+        });
+    }
+    readAnimationState() {
+        if (this.destroyed || !this.canAnimateNow()) {
+            this.pendingCanAnimate = false;
+            return;
+        }
+        this.pendingCanAnimate = true;
+        const host = this.elementRef.nativeElement;
+        const hostStyles = getComputedStyle(host);
+        this.pendingHostFont = hostStyles.font;
+        this.pendingHostColor = hostStyles.color;
+        this.pendingKeyedEls = [];
+        host.querySelectorAll('[data-key]').forEach((element) => {
+            this.pendingKeyedEls.push({
+                el: element,
+                key: element.getAttribute('data-key'),
+                newRect: element.getBoundingClientRect(),
+            });
+        });
+        const number = host.querySelector('.ngs-digit-roller__number');
+        this.pendingNumberRect = number ? number.getBoundingClientRect() : null;
+        this.pendingNumberOffsetWidth = number ? number.offsetWidth : 0;
+    }
+    fireAnimations() {
+        if (this.destroyed) {
+            return;
+        }
+        const host = this.elementRef.nativeElement;
+        const newNumericValue = untracked(() => this.value());
+        if (!this.pendingCanAnimate) {
+            this.prevNumericValue = newNumericValue;
+            return;
+        }
+        const settings = this.effectiveSettings();
+        const duration = settings.duration;
+        const opacityDuration = settings.opacityDuration;
+        const trend = this.resolveTrend(this.prevNumericValue, newNumericValue);
+        const staggerMs = this.stagger();
+        const baseTransformTiming = settings.transformTiming ?? {
+            duration,
+            easing: settings.flipEasing,
+        };
+        const spinOptions = {
+            ...baseTransformTiming,
+            easing: settings.spinEasing,
+            ...(settings.spinTiming ?? {}),
+            duration: settings.spinTiming?.duration ?? baseTransformTiming.duration,
+            fill: 'none',
+            composite: 'accumulate',
+        };
+        const flipOptions = {
+            ...baseTransformTiming,
+            duration: baseTransformTiming.duration,
+            fill: 'none',
+            composite: 'accumulate',
+        };
+        const fadeOptions = {
+            duration: opacityDuration,
+            easing: 'ease-out',
+            fill: 'none',
+            composite: 'accumulate',
+            ...(settings.opacityTiming ?? {}),
+        };
+        const continuousStartPosition = this.continuous() && duration > 0 && trend !== 0 ? this.getContinuousStartPosition() : undefined;
+        const batch = [];
+        const newKeys = new Set();
+        let elementIndex = 0;
+        const number = host.querySelector('.ngs-digit-roller__number');
+        for (const { el, key, newRect } of this.pendingKeyedEls) {
+            newKeys.add(key);
+            const prevRect = this.prevRects.get(key);
+            const staggerDelay = staggerMs > 0 ? elementIndex * staggerMs : 0;
+            elementIndex++;
+            if (el.classList.contains('ngs-digit-roller__digit')) {
+                const digit = this.getDigitValue(key);
+                const fromDigit = this.prevDigitValues.has(key) ? this.prevDigitValues.get(key) : 0;
+                const rawDelta = this.getTrendDelta(fromDigit, digit, trend, this.getDigitLength(key));
+                const digitPosition = this.getDigitPosition(key);
+                const isLowerUnchanged = this.continuous() &&
+                    rawDelta === 0 &&
+                    continuousStartPosition !== undefined &&
+                    digitPosition !== undefined &&
+                    continuousStartPosition >= digitPosition;
+                const delta = isLowerUnchanged ? this.getDigitLength(key) * trend : rawDelta;
+                if (delta !== 0 && duration > 0) {
+                    this.incrementSpin(el);
+                    const animation = el.animate({ '--_ngs-digit-roller-d': [-delta, 0] }, spinOptions);
+                    batch.push(animation);
+                    animation.finished.then(() => this.decrementSpin(el)).catch(() => this.decrementSpin(el));
+                }
+                this.animatePositionOrFade(el, prevRect, newRect, flipOptions, fadeOptions, staggerDelay, batch);
+            }
+            else {
+                this.animatePositionOrFade(el, prevRect, newRect, flipOptions, fadeOptions, staggerDelay, batch);
+            }
+        }
+        let exitIndex = 0;
+        this.prevRects.forEach((rect, key) => {
+            if (newKeys.has(key)) {
+                return;
+            }
+            const ghost = this.buildGhost(key, rect, this.pendingHostFont, this.pendingHostColor);
+            host.appendChild(ghost);
+            ghost.style.setProperty('--_ngs-digit-roller-d-opacity', '-0.999');
+            const staggerDelay = staggerMs > 0 ? exitIndex * staggerMs : 0;
+            exitIndex++;
+            const animation = ghost.animate({ '--_ngs-digit-roller-d-opacity': [0.999, 0] }, this.addStaggerDelay(fadeOptions, staggerDelay));
+            batch.push(animation);
+            animation.finished.then(() => ghost.remove()).catch(() => ghost.remove());
+        });
+        if (number && this.pendingNumberRect) {
+            const rect = this.pendingNumberRect;
+            const dx = this.prevNumberLeft - rect.left;
+            const width = rect.width || this.pendingNumberOffsetWidth;
+            const dWidth = this.prevNumberWidth - width;
+            number.style.setProperty('--_ngs-digit-roller-width', String(width || this.prevNumberWidth || 1));
+            if (Math.abs(dx) > 0.5 || Math.abs(dWidth) > 0.5) {
+                batch.push(number.animate({
+                    '--_ngs-digit-roller-dx': [`${dx}px`, '0px'],
+                    '--_ngs-digit-roller-d-width': [dWidth, 0],
+                }, flipOptions));
+            }
+        }
+        if (duration > 0) {
+            const colorIncrease = this.colorOnIncrease();
+            const colorDecrease = this.colorOnDecrease();
+            if (trend > 0 && colorIncrease) {
+                batch.push(host.animate([{ color: colorIncrease }, { color: '' }], {
+                    duration: Math.max(duration, 400),
+                    easing: 'ease-out',
+                    fill: 'none',
+                }));
+            }
+            else if (trend < 0 && colorDecrease) {
+                batch.push(host.animate([{ color: colorDecrease }, { color: '' }], {
+                    duration: Math.max(duration, 400),
+                    easing: 'ease-out',
+                    fill: 'none',
+                }));
+            }
+        }
+        this.prevNumericValue = newNumericValue;
+        if (batch.length === 0) {
+            return;
+        }
+        this.liveAnimations.push(...batch);
+        this.animCount++;
+        if (this.animationsFinishAbort) {
+            this.animationsFinishAbort.abort();
+        }
+        else {
+            this.animationsStart.emit();
+        }
+        const finishController = new AbortController();
+        this.animationsFinishAbort = finishController;
+        Promise.allSettled(batch.map((animation) => animation.finished)).then(() => {
+            const batchSet = new Set(batch);
+            this.liveAnimations = this.liveAnimations.filter((animation) => !batchSet.has(animation));
+            this.animCount--;
+            if (this.animCount === 0 && !this.destroyed && this.animationsFinishAbort) {
+                this.animationsFinish.emit();
+                this.animationsFinishAbort = undefined;
+            }
+        });
+    }
+    animatePositionOrFade(element, prevRect, newRect, flipOptions, fadeOptions, staggerDelay, batch) {
+        if (prevRect) {
+            const dx = prevRect.left - newRect.left;
+            if (Math.abs(dx) > 0.5) {
+                batch.push(element.animate([{ transform: `translateX(${dx}px)` }, { transform: 'translateX(0)' }], flipOptions));
+            }
+        }
+        else {
+            batch.push(element.animate({ '--_ngs-digit-roller-d-opacity': [-0.9999, 0] }, this.addStaggerDelay(fadeOptions, staggerDelay)));
+        }
+    }
+    getDigitValue(key) {
+        const part = [...this.data().integer, ...this.data().fraction].find((item) => item.key === key);
+        return part ? this.getPartDigitValue(part) : 0;
+    }
+    getPartDigitValue(part) {
+        return part.numericValue ?? Number(part.value);
+    }
+    resolveTrend(oldValue, newValue) {
+        const configured = this.trend();
+        const trend = typeof configured === 'function'
+            ? configured(oldValue, newValue)
+            : (configured ?? Math.sign(newValue - oldValue));
+        return Math.sign(trend);
+    }
+    canAnimateNow() {
+        const host = this.elementRef.nativeElement;
+        return (canAnimateDigitRoller({ respectMotionPreference: this.respectMotionPreference() }) &&
+            this.animated() &&
+            host.ownerDocument.visibilityState === 'visible' &&
+            this.isHostNearViewport(host));
+    }
+    isHostNearViewport(host) {
+        if (this.viewportObserver) {
+            return this.isNearViewport;
+        }
+        const rect = host.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) {
+            return false;
+        }
+        const windowRef = host.ownerDocument.defaultView;
+        if (!windowRef) {
+            return true;
+        }
+        const margin = 240;
+        return (rect.bottom >= -margin &&
+            rect.right >= -margin &&
+            rect.top <= windowRef.innerHeight + margin &&
+            rect.left <= windowRef.innerWidth + margin);
+    }
+    resolveEasing(easing) {
+        return easing ? (EASING_PRESETS[easing] ?? easing) : SPIN_EASING;
+    }
+    getContinuousStartPosition() {
+        const current = new Map();
+        const currentOrder = [];
+        untracked(() => {
+            [...this.data().integer, ...this.data().fraction].forEach((part) => {
+                if (part.type === 'integer' || part.type === 'fraction') {
+                    current.set(part.key, this.getPartDigitValue(part));
+                    currentOrder.push(part.key);
+                }
+            });
+        });
+        const firstChangedPrev = this.prevDigitOrder.find((key) => current.get(key) !== this.prevDigitValues.get(key));
+        const firstChangedCurrent = currentOrder.find((key) => current.get(key) !== this.prevDigitValues.get(key));
+        const start = Math.max(this.getDigitPosition(firstChangedPrev) ?? -Infinity, this.getDigitPosition(firstChangedCurrent) ?? -Infinity);
+        return Number.isFinite(start) ? start : undefined;
+    }
+    getDigitPosition(key) {
+        if (!key) {
+            return undefined;
+        }
+        if (key.startsWith('i')) {
+            return Number(key.slice(1));
+        }
+        if (key.startsWith('f')) {
+            return -Number(key.slice(1));
+        }
+        return undefined;
+    }
+    getDigitLength(key) {
+        if (!key.startsWith('i')) {
+            return 10;
+        }
+        const position = Number(key.slice(1));
+        const max = this.digits()[position]?.max;
+        return max !== undefined ? max + 1 : 10;
+    }
+    digitLengthForKey(key) {
+        return this.getDigitLength(key);
+    }
+    digitGlyphsForKey(key) {
+        return this.digitGlyphs().slice(0, this.getDigitLength(key));
+    }
+    addStaggerDelay(options, staggerDelay) {
+        const currentDelay = typeof options.delay === 'number' ? options.delay : 0;
+        return { ...options, delay: currentDelay + staggerDelay };
+    }
+    getTrendDelta(from, to, trend, length = 10) {
+        const diff = to - from;
+        const resolvedTrend = trend || Math.sign(diff);
+        if (resolvedTrend > 0 && to < from) {
+            return length - from + to;
+        }
+        if (resolvedTrend < 0 && to > from) {
+            return to - length - from;
+        }
+        return diff;
+    }
+    incrementSpin(element) {
+        const count = (this.spinCount.get(element) ?? 0) + 1;
+        this.spinCount.set(element, count);
+        if (count === 1) {
+            element.classList.add('ngs-digit-roller__digit--spinning');
+        }
+    }
+    decrementSpin(element) {
+        const count = Math.max(0, (this.spinCount.get(element) ?? 1) - 1);
+        if (count === 0) {
+            this.spinCount.delete(element);
+            element.classList.remove('ngs-digit-roller__digit--spinning');
+        }
+        else {
+            this.spinCount.set(element, count);
+        }
+    }
+    buildGhost(key, rect, font, color) {
+        const ghost = document.createElement('span');
+        ghost.style.cssText =
+            `position:fixed;left:${rect.left}px;top:${rect.top}px;` +
+                `width:${rect.width}px;height:${rect.height}px;` +
+                `pointer-events:none;overflow:hidden;display:inline-flex;` +
+                `align-items:center;font:${font};color:${color}`;
+        ghost.className = 'ngs-digit-roller__ghost';
+        const savedHTML = this.prevInnerHTML.get(key);
+        if (savedHTML) {
+            ghost.innerHTML = savedHTML;
+            const savedD = this.prevDigitD.get(key);
+            const savedCurrent = this.prevDigitCurrent.get(key);
+            if (savedD !== undefined) {
+                ghost.style.setProperty('--_ngs-digit-roller-d', savedD);
+            }
+            if (savedCurrent !== undefined) {
+                ghost.style.setProperty('--_ngs-digit-roller-current', savedCurrent);
+            }
+            ghost.querySelectorAll('[inert]').forEach((element) => {
+                element.style.display = 'none';
+            });
+        }
+        return ghost;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DigitRoller, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DigitRoller, isStandalone: true, selector: "ngs-digit-roller", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locales: { classPropertyName: "locales", publicName: "locales", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, opacityDuration: { classPropertyName: "opacityDuration", publicName: "opacityDuration", isSignal: true, isRequired: false, transformFunction: null }, transformTiming: { classPropertyName: "transformTiming", publicName: "transformTiming", isSignal: true, isRequired: false, transformFunction: null }, spinTiming: { classPropertyName: "spinTiming", publicName: "spinTiming", isSignal: true, isRequired: false, transformFunction: null }, opacityTiming: { classPropertyName: "opacityTiming", publicName: "opacityTiming", isSignal: true, isRequired: false, transformFunction: null }, spinEasing: { classPropertyName: "spinEasing", publicName: "spinEasing", isSignal: true, isRequired: false, transformFunction: null }, flipEasing: { classPropertyName: "flipEasing", publicName: "flipEasing", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, continuous: { classPropertyName: "continuous", publicName: "continuous", isSignal: true, isRequired: false, transformFunction: null }, digits: { classPropertyName: "digits", publicName: "digits", isSignal: true, isRequired: false, transformFunction: null }, respectMotionPreference: { classPropertyName: "respectMotionPreference", publicName: "respectMotionPreference", isSignal: true, isRequired: false, transformFunction: null }, stagger: { classPropertyName: "stagger", publicName: "stagger", isSignal: true, isRequired: false, transformFunction: null }, colorOnIncrease: { classPropertyName: "colorOnIncrease", publicName: "colorOnIncrease", isSignal: true, isRequired: false, transformFunction: null }, colorOnDecrease: { classPropertyName: "colorOnDecrease", publicName: "colorOnDecrease", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationsStart: "animationsStart", animationsFinish: "animationsFinish" }, host: { properties: { "attr.data-animated": "animated()" }, classAttribute: "ngs-digit-roller" }, exportAs: ["ngsDigitRoller"], ngImport: i0, template: "<span class=\"ngs-digit-roller__number\" aria-hidden=\"true\">\n  <span class=\"ngs-digit-roller__number-inner\">\n    @if (data().pre.length) {\n      <span class=\"ngs-digit-roller__section ngs-digit-roller__section--pre\">\n        @for (part of data().pre; track part.key) {\n          <span class=\"ngs-digit-roller__literal\" [attr.data-key]=\"part.key\">{{ part.value }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"ngs-digit-roller__section ngs-digit-roller__section--integer\">\n      @for (part of data().integer; track part.key) {\n        @if (part.type === 'integer') {\n          <span\n            class=\"ngs-digit-roller__digit\"\n            [attr.data-key]=\"part.key\"\n            [style.--_ngs-digit-roller-current]=\"part.numericValue\"\n            [style.--_ngs-digit-roller-len]=\"digitLengthForKey(part.key)\"\n          >\n            @for (digit of digitGlyphsForKey(part.key); track digit.value) {\n              <span\n                class=\"ngs-digit-roller__digit-number\"\n                [style.--_ngs-digit-roller-n]=\"digit.value\"\n                [attr.inert]=\"digit.value !== part.numericValue ? '' : null\"\n              >\n                {{ digit.glyph }}\n              </span>\n            }\n          </span>\n        } @else {\n          <span class=\"ngs-digit-roller__separator\" [attr.data-key]=\"part.key\">{{ part.value }}</span>\n        }\n      }\n    </span>\n\n    @if (data().fraction.length) {\n      <span class=\"ngs-digit-roller__section ngs-digit-roller__section--fraction\">\n        @for (part of data().fraction; track part.key) {\n          @if (part.type === 'fraction') {\n            <span\n              class=\"ngs-digit-roller__digit\"\n              [attr.data-key]=\"part.key\"\n              [style.--_ngs-digit-roller-current]=\"part.numericValue\"\n              [style.--_ngs-digit-roller-len]=\"digitLengthForKey(part.key)\"\n            >\n              @for (digit of digitGlyphsForKey(part.key); track digit.value) {\n                <span\n                  class=\"ngs-digit-roller__digit-number\"\n                  [style.--_ngs-digit-roller-n]=\"digit.value\"\n                  [attr.inert]=\"digit.value !== part.numericValue ? '' : null\"\n                >\n                  {{ digit.glyph }}\n                </span>\n              }\n            </span>\n          } @else {\n            <span class=\"ngs-digit-roller__separator\" [attr.data-key]=\"part.key\">{{ part.value }}</span>\n          }\n        }\n      </span>\n    }\n\n    @if (data().post.length) {\n      <span class=\"ngs-digit-roller__section ngs-digit-roller__section--post\">\n        @for (part of data().post; track part.key) {\n          <span class=\"ngs-digit-roller__literal\" [attr.data-key]=\"part.key\">{{ part.value }}</span>\n        }\n      </span>\n    }\n  </span>\n</span>\n\n<span class=\"ngs-digit-roller__sr-only\">{{ formattedPlainText() }}</span>\n", styles: ["@layer properties;@property --_ngs-digit-roller-d{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --_ngs-digit-roller-d-opacity{syntax: \"<number>\"; inherits: false; initial-value: 0;}@property --_ngs-digit-roller-d-width{syntax: \"<number>\"; inherits: false; initial-value: 0;}@property --_ngs-digit-roller-dx{syntax: \"<length>\"; inherits: true; initial-value: 0px;}ngs-digit-roller{--ngs-digit-roller-mask-height: .25em;--ngs-digit-roller-mask-width: .5em;--ngs-digit-roller-min-digit-width: .6em;display:inline-block;position:relative;direction:ltr;isolation:isolate;line-height:1;white-space:nowrap}ngs-digit-roller .ngs-digit-roller__number{--_ngs-digit-roller-width: 1;--_ngs-digit-roller-scale-x: calc( 1 + var(--_ngs-digit-roller-d-width) / var(--_ngs-digit-roller-width) );--_ngs-digit-roller-half-mask-height: round( nearest, calc(var(--ngs-digit-roller-mask-height) / 2), 1px );--_ngs-digit-roller-resolved-mask-height: calc(var(--_ngs-digit-roller-half-mask-height) * 2);--_ngs-digit-roller-scaled-mask-width: calc( var(--ngs-digit-roller-mask-width) / var(--_ngs-digit-roller-scale-x) );display:inline-block;line-height:1;font-variant-numeric:tabular-nums;font-feature-settings:\"tnum\";position:relative;transform-origin:left top;transform:translate(var(--_ngs-digit-roller-dx)) scaleX(var(--_ngs-digit-roller-scale-x));margin:0 calc(-1 * var(--ngs-digit-roller-mask-width));-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--_ngs-digit-roller-scaled-mask-width),#000 calc(100% - var(--_ngs-digit-roller-scaled-mask-width)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--_ngs-digit-roller-resolved-mask-height),#000 calc(100% - var(--_ngs-digit-roller-resolved-mask-height)),transparent 100%),radial-gradient(at bottom right,#000 0,transparent 71%),radial-gradient(at bottom left,#000 0,transparent 71%),radial-gradient(at top left,#000 0,transparent 71%),radial-gradient(at top right,#000 0,transparent 71%);mask-image:linear-gradient(to right,transparent 0,#000 var(--_ngs-digit-roller-scaled-mask-width),#000 calc(100% - var(--_ngs-digit-roller-scaled-mask-width)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--_ngs-digit-roller-resolved-mask-height),#000 calc(100% - var(--_ngs-digit-roller-resolved-mask-height)),transparent 100%),radial-gradient(at bottom right,#000 0,transparent 71%),radial-gradient(at bottom left,#000 0,transparent 71%),radial-gradient(at top left,#000 0,transparent 71%),radial-gradient(at top right,#000 0,transparent 71%);-webkit-mask-size:100% calc(100% - var(--_ngs-digit-roller-resolved-mask-height) * 2),calc(100% - var(--_ngs-digit-roller-scaled-mask-width) * 2) 100%,var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height);mask-size:100% calc(100% - var(--_ngs-digit-roller-resolved-mask-height) * 2),calc(100% - var(--_ngs-digit-roller-scaled-mask-width) * 2) 100%,var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height);-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}ngs-digit-roller .ngs-digit-roller__number-inner{display:inline-flex;align-items:baseline;padding:var(--_ngs-digit-roller-half-mask-height) var(--ngs-digit-roller-mask-width);transform-origin:left top;transform:scaleX(calc(1 / var(--_ngs-digit-roller-scale-x))) translate(calc(-1 * var(--_ngs-digit-roller-dx)))}ngs-digit-roller .ngs-digit-roller__section{display:inline-flex;align-items:baseline}ngs-digit-roller .ngs-digit-roller__digit{display:inline-block;position:relative;height:calc(1em + var(--_ngs-digit-roller-resolved-mask-height, .25em));clip-path:inset(0 -.2em);vertical-align:top;--_ngs-digit-roller-c: var(--_ngs-digit-roller-current, 0) + var(--_ngs-digit-roller-d);--_ngs-digit-roller-len: 10}ngs-digit-roller .ngs-digit-roller__digit,ngs-digit-roller .ngs-digit-roller__separator,ngs-digit-roller .ngs-digit-roller__literal,ngs-digit-roller .ngs-digit-roller__ghost{opacity:calc(1 + var(--_ngs-digit-roller-d-opacity, 0))}ngs-digit-roller .ngs-digit-roller__digit-number{display:inline-block;height:1em;line-height:1;text-align:center;min-width:var(--ngs-digit-roller-min-digit-width);padding:var(--_ngs-digit-roller-half-mask-height, .125em) 0;box-sizing:content-box;--_ngs-digit-roller-offset-raw: mod( var(--_ngs-digit-roller-len) + var(--_ngs-digit-roller-n) - mod(var(--_ngs-digit-roller-c), var(--_ngs-digit-roller-len)), var(--_ngs-digit-roller-len) );--_ngs-digit-roller-offset: calc( var(--_ngs-digit-roller-offset-raw) - var(--_ngs-digit-roller-len) * round(down, var(--_ngs-digit-roller-offset-raw) / (var(--_ngs-digit-roller-len) / 2), 1) );--_ngs-digit-roller-y: clamp(-100%, var(--_ngs-digit-roller-offset) * 100%, 100%);transform:translateY(var(--_ngs-digit-roller-y))}ngs-digit-roller .ngs-digit-roller__digit-number[inert]{position:absolute;top:0;left:50%;transform:translate(-50%) translateY(var(--_ngs-digit-roller-y))}ngs-digit-roller .ngs-digit-roller__digit:not(.ngs-digit-roller__digit--spinning) .ngs-digit-roller__digit-number[inert]{display:none}ngs-digit-roller .ngs-digit-roller__separator,ngs-digit-roller .ngs-digit-roller__literal{display:inline-block}ngs-digit-roller .ngs-digit-roller__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}ngs-digit-roller[data-animated=false] .ngs-digit-roller__digit-number,ngs-digit-roller[data-animated=false] .ngs-digit-roller__digit,ngs-digit-roller[data-animated=false] .ngs-digit-roller__separator,ngs-digit-roller[data-animated=false] .ngs-digit-roller__literal{transition:none!important;animation:none!important}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){:root,:host{--_ngs-digit-roller-d: 0;--_ngs-digit-roller-dx: 0px}*,:before,:after,::backdrop{--_ngs-digit-roller-d-opacity: 0;--_ngs-digit-roller-d-width: 0}}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DigitRoller, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-digit-roller', exportAs: 'ngsDigitRoller', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ngs-digit-roller',
+                        '[attr.data-animated]': 'animated()',
+                    }, template: "<span class=\"ngs-digit-roller__number\" aria-hidden=\"true\">\n  <span class=\"ngs-digit-roller__number-inner\">\n    @if (data().pre.length) {\n      <span class=\"ngs-digit-roller__section ngs-digit-roller__section--pre\">\n        @for (part of data().pre; track part.key) {\n          <span class=\"ngs-digit-roller__literal\" [attr.data-key]=\"part.key\">{{ part.value }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"ngs-digit-roller__section ngs-digit-roller__section--integer\">\n      @for (part of data().integer; track part.key) {\n        @if (part.type === 'integer') {\n          <span\n            class=\"ngs-digit-roller__digit\"\n            [attr.data-key]=\"part.key\"\n            [style.--_ngs-digit-roller-current]=\"part.numericValue\"\n            [style.--_ngs-digit-roller-len]=\"digitLengthForKey(part.key)\"\n          >\n            @for (digit of digitGlyphsForKey(part.key); track digit.value) {\n              <span\n                class=\"ngs-digit-roller__digit-number\"\n                [style.--_ngs-digit-roller-n]=\"digit.value\"\n                [attr.inert]=\"digit.value !== part.numericValue ? '' : null\"\n              >\n                {{ digit.glyph }}\n              </span>\n            }\n          </span>\n        } @else {\n          <span class=\"ngs-digit-roller__separator\" [attr.data-key]=\"part.key\">{{ part.value }}</span>\n        }\n      }\n    </span>\n\n    @if (data().fraction.length) {\n      <span class=\"ngs-digit-roller__section ngs-digit-roller__section--fraction\">\n        @for (part of data().fraction; track part.key) {\n          @if (part.type === 'fraction') {\n            <span\n              class=\"ngs-digit-roller__digit\"\n              [attr.data-key]=\"part.key\"\n              [style.--_ngs-digit-roller-current]=\"part.numericValue\"\n              [style.--_ngs-digit-roller-len]=\"digitLengthForKey(part.key)\"\n            >\n              @for (digit of digitGlyphsForKey(part.key); track digit.value) {\n                <span\n                  class=\"ngs-digit-roller__digit-number\"\n                  [style.--_ngs-digit-roller-n]=\"digit.value\"\n                  [attr.inert]=\"digit.value !== part.numericValue ? '' : null\"\n                >\n                  {{ digit.glyph }}\n                </span>\n              }\n            </span>\n          } @else {\n            <span class=\"ngs-digit-roller__separator\" [attr.data-key]=\"part.key\">{{ part.value }}</span>\n          }\n        }\n      </span>\n    }\n\n    @if (data().post.length) {\n      <span class=\"ngs-digit-roller__section ngs-digit-roller__section--post\">\n        @for (part of data().post; track part.key) {\n          <span class=\"ngs-digit-roller__literal\" [attr.data-key]=\"part.key\">{{ part.value }}</span>\n        }\n      </span>\n    }\n  </span>\n</span>\n\n<span class=\"ngs-digit-roller__sr-only\">{{ formattedPlainText() }}</span>\n", styles: ["@layer properties;@property --_ngs-digit-roller-d{syntax: \"<number>\"; inherits: true; initial-value: 0;}@property --_ngs-digit-roller-d-opacity{syntax: \"<number>\"; inherits: false; initial-value: 0;}@property --_ngs-digit-roller-d-width{syntax: \"<number>\"; inherits: false; initial-value: 0;}@property --_ngs-digit-roller-dx{syntax: \"<length>\"; inherits: true; initial-value: 0px;}ngs-digit-roller{--ngs-digit-roller-mask-height: .25em;--ngs-digit-roller-mask-width: .5em;--ngs-digit-roller-min-digit-width: .6em;display:inline-block;position:relative;direction:ltr;isolation:isolate;line-height:1;white-space:nowrap}ngs-digit-roller .ngs-digit-roller__number{--_ngs-digit-roller-width: 1;--_ngs-digit-roller-scale-x: calc( 1 + var(--_ngs-digit-roller-d-width) / var(--_ngs-digit-roller-width) );--_ngs-digit-roller-half-mask-height: round( nearest, calc(var(--ngs-digit-roller-mask-height) / 2), 1px );--_ngs-digit-roller-resolved-mask-height: calc(var(--_ngs-digit-roller-half-mask-height) * 2);--_ngs-digit-roller-scaled-mask-width: calc( var(--ngs-digit-roller-mask-width) / var(--_ngs-digit-roller-scale-x) );display:inline-block;line-height:1;font-variant-numeric:tabular-nums;font-feature-settings:\"tnum\";position:relative;transform-origin:left top;transform:translate(var(--_ngs-digit-roller-dx)) scaleX(var(--_ngs-digit-roller-scale-x));margin:0 calc(-1 * var(--ngs-digit-roller-mask-width));-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--_ngs-digit-roller-scaled-mask-width),#000 calc(100% - var(--_ngs-digit-roller-scaled-mask-width)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--_ngs-digit-roller-resolved-mask-height),#000 calc(100% - var(--_ngs-digit-roller-resolved-mask-height)),transparent 100%),radial-gradient(at bottom right,#000 0,transparent 71%),radial-gradient(at bottom left,#000 0,transparent 71%),radial-gradient(at top left,#000 0,transparent 71%),radial-gradient(at top right,#000 0,transparent 71%);mask-image:linear-gradient(to right,transparent 0,#000 var(--_ngs-digit-roller-scaled-mask-width),#000 calc(100% - var(--_ngs-digit-roller-scaled-mask-width)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--_ngs-digit-roller-resolved-mask-height),#000 calc(100% - var(--_ngs-digit-roller-resolved-mask-height)),transparent 100%),radial-gradient(at bottom right,#000 0,transparent 71%),radial-gradient(at bottom left,#000 0,transparent 71%),radial-gradient(at top left,#000 0,transparent 71%),radial-gradient(at top right,#000 0,transparent 71%);-webkit-mask-size:100% calc(100% - var(--_ngs-digit-roller-resolved-mask-height) * 2),calc(100% - var(--_ngs-digit-roller-scaled-mask-width) * 2) 100%,var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height);mask-size:100% calc(100% - var(--_ngs-digit-roller-resolved-mask-height) * 2),calc(100% - var(--_ngs-digit-roller-scaled-mask-width) * 2) 100%,var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height),var(--_ngs-digit-roller-scaled-mask-width) var(--_ngs-digit-roller-resolved-mask-height);-webkit-mask-position:center,center,top left,top right,bottom right,bottom left;mask-position:center,center,top left,top right,bottom right,bottom left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}ngs-digit-roller .ngs-digit-roller__number-inner{display:inline-flex;align-items:baseline;padding:var(--_ngs-digit-roller-half-mask-height) var(--ngs-digit-roller-mask-width);transform-origin:left top;transform:scaleX(calc(1 / var(--_ngs-digit-roller-scale-x))) translate(calc(-1 * var(--_ngs-digit-roller-dx)))}ngs-digit-roller .ngs-digit-roller__section{display:inline-flex;align-items:baseline}ngs-digit-roller .ngs-digit-roller__digit{display:inline-block;position:relative;height:calc(1em + var(--_ngs-digit-roller-resolved-mask-height, .25em));clip-path:inset(0 -.2em);vertical-align:top;--_ngs-digit-roller-c: var(--_ngs-digit-roller-current, 0) + var(--_ngs-digit-roller-d);--_ngs-digit-roller-len: 10}ngs-digit-roller .ngs-digit-roller__digit,ngs-digit-roller .ngs-digit-roller__separator,ngs-digit-roller .ngs-digit-roller__literal,ngs-digit-roller .ngs-digit-roller__ghost{opacity:calc(1 + var(--_ngs-digit-roller-d-opacity, 0))}ngs-digit-roller .ngs-digit-roller__digit-number{display:inline-block;height:1em;line-height:1;text-align:center;min-width:var(--ngs-digit-roller-min-digit-width);padding:var(--_ngs-digit-roller-half-mask-height, .125em) 0;box-sizing:content-box;--_ngs-digit-roller-offset-raw: mod( var(--_ngs-digit-roller-len) + var(--_ngs-digit-roller-n) - mod(var(--_ngs-digit-roller-c), var(--_ngs-digit-roller-len)), var(--_ngs-digit-roller-len) );--_ngs-digit-roller-offset: calc( var(--_ngs-digit-roller-offset-raw) - var(--_ngs-digit-roller-len) * round(down, var(--_ngs-digit-roller-offset-raw) / (var(--_ngs-digit-roller-len) / 2), 1) );--_ngs-digit-roller-y: clamp(-100%, var(--_ngs-digit-roller-offset) * 100%, 100%);transform:translateY(var(--_ngs-digit-roller-y))}ngs-digit-roller .ngs-digit-roller__digit-number[inert]{position:absolute;top:0;left:50%;transform:translate(-50%) translateY(var(--_ngs-digit-roller-y))}ngs-digit-roller .ngs-digit-roller__digit:not(.ngs-digit-roller__digit--spinning) .ngs-digit-roller__digit-number[inert]{display:none}ngs-digit-roller .ngs-digit-roller__separator,ngs-digit-roller .ngs-digit-roller__literal{display:inline-block}ngs-digit-roller .ngs-digit-roller__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}ngs-digit-roller[data-animated=false] .ngs-digit-roller__digit-number,ngs-digit-roller[data-animated=false] .ngs-digit-roller__digit,ngs-digit-roller[data-animated=false] .ngs-digit-roller__separator,ngs-digit-roller[data-animated=false] .ngs-digit-roller__literal{transition:none!important;animation:none!important}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){:root,:host{--_ngs-digit-roller-d: 0;--_ngs-digit-roller-dx: 0px}*,:before,:after,::backdrop{--_ngs-digit-roller-d-opacity: 0;--_ngs-digit-roller-d-width: 0}}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locales: [{ type: i0.Input, args: [{ isSignal: true, alias: "locales", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], opacityDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacityDuration", required: false }] }], transformTiming: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformTiming", required: false }] }], spinTiming: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinTiming", required: false }] }], opacityTiming: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacityTiming", required: false }] }], spinEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinEasing", required: false }] }], flipEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "flipEasing", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], continuous: [{ type: i0.Input, args: [{ isSignal: true, alias: "continuous", required: false }] }], digits: [{ type: i0.Input, args: [{ isSignal: true, alias: "digits", required: false }] }], respectMotionPreference: [{ type: i0.Input, args: [{ isSignal: true, alias: "respectMotionPreference", required: false }] }], stagger: [{ type: i0.Input, args: [{ isSignal: true, alias: "stagger", required: false }] }], colorOnIncrease: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorOnIncrease", required: false }] }], colorOnDecrease: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorOnDecrease", required: false }] }], animationsStart: [{ type: i0.Output, args: ["animationsStart"] }], animationsFinish: [{ type: i0.Output, args: ["animationsFinish"] }] } });
+
+class DigitRollerGroupDirective {
+    children = contentChildren(DigitRoller, { ...(ngDevMode ? { debugName: "children" } : /* istanbul ignore next */ {}), descendants: true });
+    pendingUpdates = new Map();
+    flushQueued = false;
+    requestGroupedUpdate(member, applyUpdate) {
+        if (!member.canGroupAnimateNow()) {
+            return false;
+        }
+        this.pendingUpdates.set(member, applyUpdate);
+        if (!this.flushQueued) {
+            this.flushQueued = true;
+            queueMicrotask(() => this.flushGroupedUpdates());
+        }
+        return true;
+    }
+    flushGroupedUpdates() {
+        this.flushQueued = false;
+        if (this.pendingUpdates.size === 0) {
+            return;
+        }
+        const members = this.children().filter((child) => child.canGroupAnimateNow());
+        for (const member of members) {
+            member.prepareGroupedUpdate();
+        }
+        for (const applyUpdate of this.pendingUpdates.values()) {
+            applyUpdate();
+        }
+        this.pendingUpdates.clear();
+        for (const member of members) {
+            member.queueGroupedAnimation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DigitRollerGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.4", type: DigitRollerGroupDirective, isStandalone: true, selector: "[ngsDigitRollerGroup]", providers: [
+            {
+                provide: DIGIT_ROLLER_GROUP,
+                useExisting: forwardRef(() => DigitRollerGroupDirective),
+            },
+        ], queries: [{ propertyName: "children", predicate: DigitRoller, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DigitRollerGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsDigitRollerGroup]',
+                    providers: [
+                        {
+                            provide: DIGIT_ROLLER_GROUP,
+                            useExisting: forwardRef(() => DigitRollerGroupDirective),
+                        },
+                    ],
+                }]
+        }], propDecorators: { children: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DigitRoller), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DIGIT_ROLLER_EMPTY_FORMATTED, DigitRoller, DigitRollerGroupDirective };
+//# sourceMappingURL=ngstarter-ui-components-digit-roller.mjs.map