@ssv/ngx.ux 3.0.0-dev.36 → 3.0.0-dev.38

package/fesm2022/ssv-ngx.ux.mjs

@@ -0,0 +1,846 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, Pipe, Directive, Input, NgModule } from '@angular/core';
+import { fromEvent, map, share, auditTime, of, startWith, distinctUntilChanged, shareReplay, tap, Subscription, Subject, ReplaySubject, combineLatest, takeUntil, filter, pairwise } from 'rxjs';
+
+var ViewportDataMatchStrategy;
+(function (ViewportDataMatchStrategy) {
+    /** Indicates that size should match exact or default. */
+    ViewportDataMatchStrategy[ViewportDataMatchStrategy["exact"] = 0] = "exact";
+    /** Indicates that size matches when exact match, first match smaller (down) or default. */
+    ViewportDataMatchStrategy[ViewportDataMatchStrategy["smaller"] = 1] = "smaller";
+    /** Indicates that size matches when exact match, first match larger (up) or default. */
+    ViewportDataMatchStrategy[ViewportDataMatchStrategy["larger"] = 2] = "larger";
+    /** Indicates that size matches when exact match, or it tries both smaller/larger (smaller is preferred) until match or default. */
+    ViewportDataMatchStrategy[ViewportDataMatchStrategy["closestSmallerFirst"] = 3] = "closestSmallerFirst";
+    /** Indicates that size matches when exact match, or it tries both larger/smaller (larger is preferred) until match or default. */
+    ViewportDataMatchStrategy[ViewportDataMatchStrategy["closestLargerFirst"] = 4] = "closestLargerFirst";
+})(ViewportDataMatchStrategy || (ViewportDataMatchStrategy = {}));
+/**
+ * Utility function to match data based on strategy and size.
+ *
+ * @param dataConfig Data config to generate rules based on.
+ * @param sizeType Size type to get data for.
+ * @param strategy Strategy to use when building rules.
+ * @param sizeTypes Available size types ordered by index type. (Can be obtained from `ViewportService`)
+ * @param sizeTypeMap Available size type map. (Can be obtained from `ViewportService`)
+ * @returns Returns the matched data value.
+ */
+function matchViewportData(dataConfig, sizeType, strategy, sizeTypes, sizeTypeMap) {
+    const matchFn = matchStrategyHandlerMap$1[strategy];
+    if (!matchFn) {
+        throw Error(`matchViewportData: Viewport Data strategy not implemented. Strategy: '${strategy}'`);
+    }
+    const data = matchFn(dataConfig, sizeType, sizeTypes, sizeTypeMap);
+    if (data !== undefined) {
+        return data;
+    }
+    return dataConfig.default;
+}
+const matchStrategyHandlerMap$1 = {
+    [ViewportDataMatchStrategy.exact]: matchWithExact,
+    [ViewportDataMatchStrategy.larger]: matchWithLargerMatch,
+    [ViewportDataMatchStrategy.smaller]: matchWithSmallerMatch,
+    [ViewportDataMatchStrategy.closestSmallerFirst]: matchWithClosestSmallerFirstMatch,
+    [ViewportDataMatchStrategy.closestLargerFirst]: matchWithClosestLargerFirstMatch,
+};
+function matchWithExact(dataConfig, currentSizeType) {
+    return dataConfig[currentSizeType.name];
+}
+function matchWithLargerMatch(dataConfig, currentSizeType, sizeTypes) {
+    let data = dataConfig[currentSizeType.name];
+    if (data !== undefined) {
+        return data;
+    }
+    const largestTypeIdx = sizeTypes[sizeTypes.length - 1].type;
+    if (currentSizeType.type >= largestTypeIdx) {
+        return undefined;
+    }
+    for (let index = currentSizeType.type; index < sizeTypes.length; index++) {
+        const sizeType = sizeTypes[index];
+        data = dataConfig[sizeType.name];
+        if (data !== undefined) {
+            return data;
+        }
+    }
+    return undefined;
+}
+function matchWithSmallerMatch(dataConfig, currentSizeType, sizeTypes) {
+    let data = dataConfig[currentSizeType.name];
+    if (data !== undefined) {
+        return data;
+    }
+    if (currentSizeType.type <= 0) {
+        return undefined;
+    }
+    // eslint-disable-next-line for-direction
+    for (let index = currentSizeType.type; index < sizeTypes.length; index--) {
+        const sizeType = sizeTypes[index];
+        data = dataConfig[sizeType.name];
+        if (data !== undefined) {
+            return data;
+        }
+    }
+    return undefined;
+}
+function matchWithClosestSmallerFirstMatch(dataConfig, currentSizeType, sizeTypes) {
+    return closestMatch(dataConfig, currentSizeType, sizeTypes, true);
+}
+function matchWithClosestLargerFirstMatch(dataConfig, currentSizeType, sizeTypes) {
+    return closestMatch(dataConfig, currentSizeType, sizeTypes, false);
+}
+function closestMatch(dataConfig, currentSizeType, sizeTypes, isSmallerFirst) {
+    let data = dataConfig[currentSizeType.name];
+    if (data !== undefined) {
+        return data;
+    }
+    let downIndex = currentSizeType.type;
+    let upIndex = currentSizeType.type;
+    for (let index = 0; index < sizeTypes.length; index++) {
+        for (const idx of isSmallerFirst ? [--downIndex, ++upIndex] : [++upIndex, --downIndex]) {
+            const sizeType = sizeTypes[idx];
+            if (sizeType) {
+                data = dataConfig[sizeType.name];
+                if (data !== undefined) {
+                    return data;
+                }
+            }
+        }
+    }
+    return undefined;
+}
+
+const WINDOW = new InjectionToken("Window", {
+    factory: () => _window(),
+});
+function _window() {
+    if (typeof window !== "undefined") {
+        return window;
+    }
+    return {};
+}
+class WindowRef {
+    window = inject(WINDOW);
+    /** Window underlying native object. */
+    get native() {
+        return this.window;
+    }
+    /** Determines whether native element is supported or not. Generally `false` when executing in SSR. */
+    get hasNative() {
+        return !!this.native.window;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WindowRef, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WindowRef, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+/**
+ * The indices of each breakpoint provided based on the `UX_VIEWPORT_DEFAULT_BREAKPOINTS`.
+ * @see UX_VIEWPORT_DEFAULT_BREAKPOINTS
+ */
+var ViewportSizeType;
+(function (ViewportSizeType) {
+    ViewportSizeType[ViewportSizeType["xsmall"] = 0] = "xsmall";
+    ViewportSizeType[ViewportSizeType["small"] = 1] = "small";
+    ViewportSizeType[ViewportSizeType["medium"] = 2] = "medium";
+    ViewportSizeType[ViewportSizeType["large"] = 3] = "large";
+    ViewportSizeType[ViewportSizeType["xlarge"] = 4] = "xlarge";
+    ViewportSizeType[ViewportSizeType["xxlarge"] = 5] = "xxlarge";
+    ViewportSizeType[ViewportSizeType["xxlarge1"] = 6] = "xxlarge1";
+})(ViewportSizeType || (ViewportSizeType = {}));
+var ComparisonOperation;
+(function (ComparisonOperation) {
+    ComparisonOperation["equals"] = "=";
+    ComparisonOperation["notEquals"] = "<>";
+    ComparisonOperation["lessThan"] = "<";
+    ComparisonOperation["lessOrEqualThan"] = "<=";
+    ComparisonOperation["greaterThan"] = ">";
+    ComparisonOperation["greaterOrEqualThan"] = ">=";
+})(ComparisonOperation || (ComparisonOperation = {}));
+var DeviceType;
+(function (DeviceType) {
+    DeviceType["desktop"] = "desktop";
+    DeviceType["mobile"] = "mobile";
+    DeviceType["tablet"] = "tablet";
+})(DeviceType || (DeviceType = {}));
+
+// todo: make this configurable
+/** Viewport size for SSR. */
+const viewportSizeSSR = {
+    [DeviceType.desktop]: {
+        width: 1366,
+        height: 768,
+    },
+    [DeviceType.tablet]: {
+        width: 768,
+        height: 1024,
+    },
+    [DeviceType.mobile]: {
+        width: 414,
+        height: 736,
+    },
+};
+const VIEWPORT_SSR_DEVICE = new InjectionToken("UX_VIEWPORT_SSR_DEVICE", {
+    factory: () => DeviceType.desktop,
+});
+class ViewportServerSizeService {
+    deviceType = inject(VIEWPORT_SSR_DEVICE);
+    get() {
+        return viewportSizeSSR[this.deviceType] || viewportSizeSSR[DeviceType.desktop];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportServerSizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportServerSizeService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportServerSizeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+function isViewportSizeMatcherExpression(value) {
+    if (typeof value !== "object" || !value) {
+        return false;
+    }
+    const args = value;
+    if (args.size && args.operation) {
+        return true;
+    }
+    return false;
+}
+function isViewportSizeMatcherTupleExpression(arg) {
+    if (!arg) {
+        return false;
+    }
+    if (Array.isArray(arg)) {
+        if (arg.length === 2) {
+            const [op] = arg;
+            return operations.includes(op);
+        }
+    }
+    return false;
+}
+const operations = Object.values(ComparisonOperation);
+const COMPARISON_OPERATION_FUNC_MAPPING = {
+    [ComparisonOperation.equals]: (a, b) => a === b,
+    [ComparisonOperation.notEquals]: (a, b) => a !== b,
+    [ComparisonOperation.lessThan]: (a, b) => a < b,
+    [ComparisonOperation.lessOrEqualThan]: (a, b) => a <= b,
+    [ComparisonOperation.greaterThan]: (a, b) => a > b,
+    [ComparisonOperation.greaterOrEqualThan]: (a, b) => a >= b,
+};
+function isViewportConditionMatch(evaluateSize, conditions, viewportSizeTypeInfoRefs) {
+    const isExcluded = match(conditions.sizeTypeExclude, evaluateSize.name, false);
+    let isIncluded;
+    let isExpressionTruthy;
+    if (!isExcluded && conditions.expression) {
+        const ref = viewportSizeTypeInfoRefs[conditions.expression.size];
+        if (!ref) {
+            throw new Error(`Viewport size type is invalid. Size type: '${conditions.expression.size}'`);
+        }
+        const expMatcher = COMPARISON_OPERATION_FUNC_MAPPING[conditions.expression.operation];
+        isExpressionTruthy = expMatcher(evaluateSize.type, ref.type);
+    }
+    else {
+        isIncluded = match(conditions.sizeType, evaluateSize.name, true);
+    }
+    const shouldRender = (isExpressionTruthy || isIncluded) && !isExcluded;
+    // console.warn(">>> shouldRender", { evaluateSize, conditions, shouldRender });
+    return !!shouldRender;
+}
+function match(value, targetValue, defaultValue) {
+    if (!value) {
+        return defaultValue;
+    }
+    return Array.isArray(value)
+        ? value.includes(targetValue)
+        : value === targetValue;
+}
+function getSizeTypeInfo(width, sizeTypes) {
+    const lastEntryIndex = sizeTypes.length - 1;
+    for (let idx = 0; idx < lastEntryIndex; idx++) {
+        const viewportSizeTypeInfo = sizeTypes[idx];
+        if (width <= viewportSizeTypeInfo.widthThreshold) {
+            return viewportSizeTypeInfo;
+        }
+    }
+    return sizeTypes[lastEntryIndex];
+}
+/**
+ * Converts the breakpoints into a 2 dimensional array containing the name and width, and sorted from
+ *  smallest to largest.
+ * @param breakpoints the breakpoints obtained from the config
+ * @internal
+ */
+function getSortedBreakpoints(breakpoints) {
+    return Object.entries(breakpoints)
+        .sort(([, widthA], [, widthB]) => widthA - widthB);
+}
+/**
+ * A util function which generates the ViewportSizeTypeInfo.type for each breakpoint.
+ * @param breakpoints the custom breakpoints
+ */
+function generateViewportSizeType(breakpoints) {
+    return Object.freeze(getSortedBreakpoints(breakpoints).reduce((dictionary, [name], index) => {
+        dictionary[name] = index;
+        dictionary[index] = name;
+        return dictionary;
+    }, {}));
+}
+/**
+ * Pre-processes the given breakpoints into an ordered list from smallest to largest while generating
+ *  all the necessary information on the viewport.
+ * @param breakpoints the breakpoints obtained from the config
+ * @internal
+ */
+function generateViewportSizeTypeInfoList(breakpoints) {
+    return getSortedBreakpoints(breakpoints)
+        .map(([name, width], index) => (Object.freeze({
+        name,
+        type: index,
+        widthThreshold: width
+    })));
+}
+/**
+ * Converts the breakpoint list into a dictionary while using the name as key.
+ * @param breakpointList the list of breakpoints
+ * @internal
+ */
+function generateViewportSizeTypeInfoRefs(breakpointList) {
+    return Object.freeze(breakpointList.reduce((dictionary, breakpoint) => {
+        dictionary[breakpoint.name] = breakpoint;
+        dictionary[breakpoint.type] = breakpoint;
+        return dictionary;
+    }, {}));
+}
+
+/** Default viewport breakpoints. */
+const UX_VIEWPORT_DEFAULT_BREAKPOINTS = {
+    xsmall: 450,
+    small: 767,
+    medium: 992,
+    large: 1200,
+    xlarge: 1500,
+    xxlarge: 1920,
+    xxlarge1: 2100,
+};
+const DEFAULT_OPTIONS = Object.freeze({
+    resizePollingSpeed: 33,
+    breakpoints: UX_VIEWPORT_DEFAULT_BREAKPOINTS,
+    defaultDataMatchStrategy: ViewportDataMatchStrategy.smaller,
+});
+const VIEWPORT_OPTIONS = new InjectionToken("SSV_UX_VIEWPORT_OPTIONS", {
+    factory: () => DEFAULT_OPTIONS,
+});
+function provideSsvUxViewportOptions(options, ...features) {
+    return makeEnvironmentProviders([
+        {
+            provide: VIEWPORT_OPTIONS,
+            useFactory: () => {
+                let opts = typeof options === "function" ? options(DEFAULT_OPTIONS) : options;
+                opts = opts
+                    ? {
+                        ...DEFAULT_OPTIONS,
+                        ...opts, // NOTE: breakpoints shoudn't be merged
+                    }
+                    : DEFAULT_OPTIONS;
+                return opts;
+            },
+        },
+        ...features,
+    ]);
+}
+function withViewportSsrDevice(options) {
+    return makeEnvironmentProviders([
+        {
+            provide: VIEWPORT_SSR_DEVICE,
+            useFactory: () => {
+                const deviceType = typeof options === "function" ? options() : options;
+                return deviceType;
+            },
+        },
+    ]);
+}
+
+class ViewportService {
+    windowRef;
+    viewportServerSize;
+    /** Window resize observable. */
+    resizeSnap$;
+    /** Window resize observable (which is also throttled). */
+    resize$;
+    /** Viewport size type observable (which is also throttled). */
+    sizeType$;
+    /** Viewport size type observable. */
+    sizeTypeSnap$;
+    /** Viewport size type snapshot of the last value. (Prefer use `sizeType$` observable when possible.) */
+    get sizeTypeSnapshot() { return this._sizeTypeSnapshot; }
+    /** Viewport size observable (which is also throttled). */
+    size$;
+    /** Viewport size observable. */
+    sizeSnap$;
+    /** Size types refs of the generated viewport size type info. */
+    get sizeTypeMap() { return this._sizeTypeMap; }
+    /** Viewport size types list ordered by type, smallest to largest. */
+    get sizeTypes() { return this._sizeTypes; }
+    _sizeTypeMap;
+    _sizeTypes;
+    _sizeTypeSnapshot;
+    constructor(windowRef, viewportServerSize) {
+        this.windowRef = windowRef;
+        this.viewportServerSize = viewportServerSize;
+        const config = inject(VIEWPORT_OPTIONS);
+        this._sizeTypes = generateViewportSizeTypeInfoList(config.breakpoints);
+        this._sizeTypeMap = generateViewportSizeTypeInfoRefs(this._sizeTypes);
+        if (windowRef.hasNative) {
+            this.resizeSnap$ = fromEvent(window, "resize").pipe(map(() => this.getViewportSize()), share());
+            this.resize$ = this.resizeSnap$.pipe(auditTime(config.resizePollingSpeed), share());
+        }
+        else {
+            this.resizeSnap$ = this.resize$ = of(viewportServerSize.get());
+        }
+        const size = this.getViewportSize();
+        this._sizeTypeSnapshot = getSizeTypeInfo(size.width, this.sizeTypes);
+        const sizeFn = (obs$) => obs$.pipe(startWith(size), distinctUntilChanged((a, b) => a.width === b.width && a.height === b.height), shareReplay(1));
+        this.sizeSnap$ = sizeFn(this.resizeSnap$);
+        this.size$ = sizeFn(this.resize$);
+        const sizeTypeFn = (obs$) => obs$.pipe(distinctUntilChanged((a, b) => a.width === b.width), map(x => getSizeTypeInfo(x.width, this.sizeTypes)), distinctUntilChanged(), tap(x => this._sizeTypeSnapshot = x), shareReplay(1));
+        this.sizeType$ = sizeTypeFn(this.size$);
+        this.sizeTypeSnap$ = sizeTypeFn(this.sizeSnap$);
+    }
+    /** Returns the current viewport size */
+    getViewportSize() {
+        if (!this.windowRef.hasNative) {
+            return this.viewportServerSize.get();
+        }
+        const ua = navigator.userAgent.toLowerCase();
+        if (ua.indexOf("safari") !== -1 && ua.indexOf("chrome") === -1) { // safari subtracts the scrollbar width
+            return {
+                width: this.windowRef.native.document.documentElement.clientWidth,
+                height: this.windowRef.native.document.documentElement.clientHeight,
+            };
+        }
+        return {
+            width: this.windowRef.native.innerWidth,
+            height: this.windowRef.native.innerHeight,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportService, deps: [{ token: WindowRef }, { token: ViewportServerSizeService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: WindowRef }, { type: ViewportServerSizeService }] });
+
+/**
+ * Utility function to generate rules based on strategies.
+ *
+ * @param dataConfig Data config to generate rules based on.
+ * @param strategy Strategy to use when building rules.
+ * @param sizeTypes Available size types ordered by index type. (Can be obtained from `ViewportService`)
+ * @param sizeTypeMap Available size type map. (Can be obtained from `ViewportService`)
+ * @returns Returns a collection of rules (ordered).
+ */
+function generateViewportRulesRangeFromDataMatcher(dataConfig, strategy, sizeTypes, sizeTypeMap) {
+    const ruleBuilderFn = matchStrategyHandlerMap[strategy];
+    if (!ruleBuilderFn) {
+        throw Error(`generateViewportRulesRangeFromDataMatcher: Viewport Data strategy not implemented. Strategy: '${strategy}'`);
+    }
+    let dataSizes = [];
+    for (const key in dataConfig) {
+        if (Object.prototype.hasOwnProperty.call(dataConfig, key)) {
+            const data = dataConfig[key];
+            if (data === undefined) {
+                continue;
+            }
+            const size = sizeTypeMap[key];
+            if (size) {
+                dataSizes.push(size);
+            }
+        }
+    }
+    dataSizes = dataSizes.sort(({ type: typeA }, { type: typeB }) => typeA - typeB);
+    const rules = [];
+    if (dataConfig.default) {
+        rules.push({ value: dataConfig.default, min: undefined, max: undefined });
+    }
+    let prevRule;
+    for (let index = 0; index < dataSizes.length; index++) {
+        const prevDataSize = dataSizes[index - 1];
+        const nextDataSize = dataSizes[index + 1];
+        const dataSize = dataSizes[index];
+        const prevSize = sizeTypes[dataSize.type - 1];
+        // const nextSize = sizeTypes[dataSize.type + 1];
+        const data = dataConfig[dataSize.name];
+        const rule = {
+            value: data,
+            min: undefined,
+            max: undefined,
+        };
+        ruleBuilderFn(rule, dataSize, nextDataSize, prevDataSize, prevSize, prevRule, sizeTypes);
+        prevRule = rule;
+        rules.push(rule);
+    }
+    return rules;
+}
+const matchStrategyHandlerMap = {
+    [ViewportDataMatchStrategy.exact]: (rule, dataSize, _nextDataSize, _prevDataSize, prevSize) => {
+        rule.max = dataSize.widthThreshold;
+        if (prevSize) {
+            rule.min = prevSize.widthThreshold + 1;
+        }
+    },
+    [ViewportDataMatchStrategy.smaller]: (rule, dataSize, nextDataSize, _prevDataSize, prevSize) => {
+        if (nextDataSize) {
+            rule.max = dataSize.widthThreshold;
+        }
+        if (prevSize) {
+            rule.min = prevSize.widthThreshold + 1;
+        }
+    },
+    [ViewportDataMatchStrategy.larger]: (rule, dataSize, _nextDataSize, prevDataSize) => {
+        if (dataSize) {
+            rule.max = dataSize.widthThreshold;
+        }
+        if (prevDataSize) {
+            rule.min = prevDataSize.widthThreshold + 1;
+        }
+    },
+    [ViewportDataMatchStrategy.closestSmallerFirst]: (rule, dataSize, nextDataSize, _prevDataSize, _prevSize, prevRule, sizeTypes) => {
+        if (nextDataSize) {
+            rule.max = calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, true);
+        }
+        if (prevRule?.max) {
+            rule.min = prevRule.max + 1;
+        }
+    },
+    [ViewportDataMatchStrategy.closestLargerFirst]: (rule, dataSize, nextDataSize, _prevDataSize, _prevSize, prevRule, sizeTypes) => {
+        if (nextDataSize) {
+            rule.max = calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, false);
+        }
+        if (prevRule?.max) {
+            rule.min = prevRule.max + 1;
+        }
+    },
+};
+function calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, isSmallerPreferred) {
+    const fn = isSmallerPreferred ? Math.ceil : Math.floor;
+    // get closest between curr and next
+    const diffIndex = fn((nextDataSize.type - dataSize.type - 1) / 2);
+    const diffNextSize = sizeTypes[dataSize.type + diffIndex];
+    return (diffNextSize || dataSize).widthThreshold;
+}
+
+class ViewportDataService {
+    viewport = inject(ViewportService);
+    config = inject(VIEWPORT_OPTIONS);
+    /** Get data for match. */
+    get(dataConfig, strategy = this.config.defaultDataMatchStrategy, sizeType = this.viewport.sizeTypeSnapshot) {
+        return matchViewportData(dataConfig, sizeType, strategy, this.viewport.sizeTypes, this.viewport.sizeTypeMap);
+    }
+    /** Get data for match as observable. */
+    get$(dataConfig, strategy, throttle = true) {
+        return (throttle ? this.viewport.sizeType$ : this.viewport.sizeTypeSnap$).pipe(map(sizeType => this.get(dataConfig, strategy, sizeType)), distinctUntilChanged());
+    }
+    /** Generate rules based on strategies for data. */
+    generateRules(dataConfig, strategy = this.config.defaultDataMatchStrategy) {
+        return generateViewportRulesRangeFromDataMatcher(dataConfig, strategy, this.viewport.sizeTypes, this.viewport.sizeTypeMap);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportDataService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportDataService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+class ViewportDataPipe {
+    viewportData;
+    cdr;
+    markForTransform = true;
+    value;
+    data;
+    strategy;
+    data$$ = Subscription.EMPTY;
+    constructor(viewportData, cdr) {
+        this.viewportData = viewportData;
+        this.cdr = cdr;
+    }
+    transform(data, strategy) {
+        if (!this.markForTransform && data === this.data && strategy === this.strategy) {
+            return this.value;
+        }
+        this.data = data;
+        this.strategy = strategy;
+        this.data$$.unsubscribe();
+        this.data$$ = this.viewportData.get$(data, ViewportDataMatchStrategy[strategy]).pipe(tap(value => {
+            this.markForTransform = true;
+            this.value = value;
+            this.cdr.markForCheck();
+        })).subscribe();
+        this.markForTransform = false;
+        return this.value;
+    }
+    ngOnDestroy() {
+        this.data$$.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportDataPipe, deps: [{ token: ViewportDataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ViewportDataPipe, isStandalone: true, name: "ssvViewportData", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ViewportDataPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "ssvViewportData",
+                    pure: false,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: ViewportDataService }, { type: i0.ChangeDetectorRef }] });
+
+const NAME_CAMEL = "ssvViewportMatcherVar";
+class SsvViewportMatcherVarContext {
+    $implicit;
+    constructor($implicit = false) {
+        this.$implicit = $implicit;
+    }
+}
+class SsvViewportMatcherVarDirective {
+    viewport;
+    viewContainer;
+    templateRef;
+    _matchConditions = {};
+    _context = new SsvViewportMatcherVarContext();
+    _destroy$ = new Subject();
+    _update$ = new ReplaySubject(1);
+    _viewRef;
+    set condition(value) {
+        if (isViewportSizeMatcherExpression(value)) {
+            this._matchConditions.expression = value;
+        }
+        else if (isViewportSizeMatcherTupleExpression(value)) {
+            const [op, size] = value;
+            this._matchConditions.expression = {
+                operation: op,
+                size
+            };
+        }
+        else {
+            this._matchConditions.sizeType = value;
+        }
+        this._update$.next();
+    }
+    constructor(viewport, viewContainer, templateRef) {
+        this.viewport = viewport;
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+    }
+    ngOnInit() {
+        this.updateView();
+        combineLatest([this.viewport.sizeType$, this._update$]).pipe(map(([sizeType]) => isViewportConditionMatch(sizeType, this._matchConditions, this.viewport.sizeTypeMap)), tap(x => this._context.$implicit = x), tap(() => this._viewRef.markForCheck()), takeUntil(this._destroy$)).subscribe();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    updateView() {
+        this.viewContainer.clear();
+        this._viewRef = this.viewContainer.createEmbeddedView(this.templateRef, this._context);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvViewportMatcherVarDirective, deps: [{ token: ViewportService }, { token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: SsvViewportMatcherVarDirective, isStandalone: true, selector: "[ssvViewportMatcherVar]", inputs: { condition: ["ssvViewportMatcherVarWhen", "condition"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvViewportMatcherVarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[${NAME_CAMEL}]`,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: ViewportService }, { type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { condition: [{
+                type: Input,
+                args: [`${NAME_CAMEL}When`]
+            }] } });
+
+class SsvViewportMatcherContext {
+    sizeType = null;
+    sizeTypeExclude = null;
+    expression;
+}
+class SsvViewportMatcherDirective {
+    viewport;
+    renderer;
+    viewContainer;
+    cdr;
+    sizeInfo;
+    _context = new SsvViewportMatcherContext();
+    _thenTemplateRef = null;
+    _elseTemplateRef = null;
+    _thenViewRef = null;
+    _elseViewRef = null;
+    sizeType$$ = Subscription.EMPTY;
+    cssClass$$ = Subscription.EMPTY;
+    _update$ = new Subject();
+    set ssvViewportMatcher(value) {
+        if (isViewportSizeMatcherExpression(value)) {
+            this._context.expression = value;
+        }
+        else if (isViewportSizeMatcherTupleExpression(value)) {
+            const [op, size] = value;
+            this._context.expression = {
+                operation: op,
+                size
+            };
+        }
+        else {
+            this._context.sizeType = value;
+        }
+        if (this.sizeInfo) {
+            this._update$.next(this._context);
+        }
+    }
+    set ssvViewportMatcherExclude(value) {
+        this._context.sizeTypeExclude = value;
+        if (this.sizeInfo) {
+            this._update$.next(this._context);
+        }
+    }
+    set ssvViewportMatcherElse(templateRef) {
+        this._elseTemplateRef = templateRef;
+        this._elseViewRef = null; // clear previous view if any.
+        if (this.sizeInfo) {
+            this._update$.next(this._context);
+        }
+    }
+    constructor(viewport, renderer, viewContainer, cdr, templateRef) {
+        this.viewport = viewport;
+        this.renderer = renderer;
+        this.viewContainer = viewContainer;
+        this.cdr = cdr;
+        this._thenTemplateRef = templateRef;
+    }
+    ngOnInit() {
+        // console.log("ssvViewportMatcher init");
+        this._update$
+            .pipe(
+        // tap(x => console.log(">>> ssvViewportMatcher - update triggered", x)),
+        filter(() => !!this.sizeInfo), 
+        // tap(x => console.log(">>> ssvViewportMatcher - updating...", x)),
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        tap(() => this._updateView(this.sizeInfo)), tap(() => this.cdr.markForCheck()))
+            .subscribe();
+        this.sizeType$$ = this.viewport.sizeType$
+            .pipe(
+        // tap(x => console.log("ssvViewportMatcher - sizeType changed", x)),
+        tap(x => this.sizeInfo = x), tap(() => this._update$.next(this._context)))
+            .subscribe();
+        this.cssClass$$ = this.viewport.sizeType$
+            .pipe(startWith(undefined), filter(() => !!(this._thenViewRef || this._elseViewRef)), pairwise(), tap(([prev, curr]) => {
+            const el = this._thenViewRef
+                ? this._thenViewRef.rootNodes[0]
+                : this._elseViewRef?.rootNodes[0];
+            if (!el.classList) {
+                return;
+            }
+            if (prev) {
+                this.renderer.removeClass(el, `ssv-vp-size--${prev.name}`);
+            }
+            this.renderer.addClass(el, `ssv-vp-size--${curr?.name}`);
+        }))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this.cssClass$$.unsubscribe();
+        this.sizeType$$.unsubscribe();
+        this._update$.complete();
+    }
+    _updateView(sizeInfo) {
+        if (isViewportConditionMatch(sizeInfo, this._context, this.viewport.sizeTypeMap)) {
+            if (!this._thenViewRef) {
+                this.viewContainer.clear();
+                this._elseViewRef = null;
+                if (this._thenTemplateRef) {
+                    this._thenViewRef = this.viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);
+                }
+            }
+        }
+        else {
+            if (!this._elseViewRef) {
+                this.viewContainer.clear();
+                this._thenViewRef = null;
+                if (this._elseTemplateRef) {
+                    this._elseViewRef = this.viewContainer.createEmbeddedView(this._elseTemplateRef, this._context);
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvViewportMatcherDirective, deps: [{ token: ViewportService }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: SsvViewportMatcherDirective, isStandalone: true, selector: "[ssvViewportMatcher]", inputs: { ssvViewportMatcher: "ssvViewportMatcher", ssvViewportMatcherExclude: "ssvViewportMatcherExclude", ssvViewportMatcherElse: "ssvViewportMatcherElse" }, exportAs: ["ssvViewportMatcher"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvViewportMatcherDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[ssvViewportMatcher]",
+                    exportAs: "ssvViewportMatcher",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: ViewportService }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.TemplateRef }], propDecorators: { ssvViewportMatcher: [{
+                type: Input
+            }], ssvViewportMatcherExclude: [{
+                type: Input
+            }], ssvViewportMatcherElse: [{
+                type: Input
+            }] } });
+
+const EXPORTED_IMPORTS$1 = [
+    SsvViewportMatcherDirective,
+    SsvViewportMatcherVarDirective,
+    ViewportDataPipe,
+];
+class SsvUxViewportModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvUxViewportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: SsvUxViewportModule, imports: [SsvViewportMatcherDirective,
+            SsvViewportMatcherVarDirective,
+            ViewportDataPipe], exports: [SsvViewportMatcherDirective,
+            SsvViewportMatcherVarDirective,
+            ViewportDataPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvUxViewportModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvUxViewportModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [EXPORTED_IMPORTS$1],
+                    exports: [EXPORTED_IMPORTS$1]
+                }]
+        }] });
+
+const EXPORTED_IMPORTS = [
+    SsvUxViewportModule,
+];
+class SsvUxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvUxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: SsvUxModule, imports: [SsvUxViewportModule], exports: [SsvUxViewportModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvUxModule, imports: [EXPORTED_IMPORTS, SsvUxViewportModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SsvUxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [EXPORTED_IMPORTS],
+                    exports: [EXPORTED_IMPORTS]
+                }]
+        }] });
+
+const VERSION = "3.0.0-dev.38";
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComparisonOperation, DeviceType, SsvUxModule, SsvUxViewportModule, SsvViewportMatcherContext, SsvViewportMatcherDirective, SsvViewportMatcherVarContext, SsvViewportMatcherVarDirective, VERSION, VIEWPORT_OPTIONS, VIEWPORT_SSR_DEVICE, ViewportDataMatchStrategy, ViewportDataPipe, ViewportDataService, ViewportServerSizeService, ViewportService, ViewportSizeType, generateViewportSizeType, provideSsvUxViewportOptions, withViewportSsrDevice };
+//# sourceMappingURL=ssv-ngx.ux.mjs.map