@ssv/ngx.ux 2.1.2 → 3.0.0-dev.34

package/fesm2015/ssv-ngx.ux.mjs

@@ -1,826 +0,0 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Optional, Pipe, Directive, Input, NgModule } from '@angular/core';
-import { map, share, auditTime, startWith, distinctUntilChanged, shareReplay, tap, takeUntil, filter, pairwise } from 'rxjs/operators';
-import { fromEvent, of, Subscription, Subject, ReplaySubject, combineLatest } 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;
-    // eslint-disable-next-line @typescript-eslint/prefer-for-of
-    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;
-}
-
-/** Default viewport breakpoints. */
-const UX_VIEWPORT_DEFAULT_BREAKPOINTS = {
-    xsmall: 450,
-    small: 767,
-    medium: 992,
-    large: 1200,
-    xlarge: 1500,
-    xxlarge: 1920,
-    xxlarge1: 2100,
-};
-const UX_VIEWPORT_DEFAULT_CONFIG = {
-    resizePollingSpeed: 33,
-    breakpoints: UX_VIEWPORT_DEFAULT_BREAKPOINTS,
-    defaultDataMatchStrategy: ViewportDataMatchStrategy.smaller,
-};
-
-const UX_DEFAULT_CONFIG = {
-    viewport: UX_VIEWPORT_DEFAULT_CONFIG,
-};
-const UX_CONFIG = new InjectionToken("@ssv/ngx.ux-config");
-
-/**
- * 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 === null || prevRule === void 0 ? void 0 : 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 === null || prevRule === void 0 ? void 0 : 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;
-}
-
-/**
- * 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 = {}));
-
-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;
-    }, {}));
-}
-
-const WINDOW = new InjectionToken("Window");
-class WindowRef {
-    constructor(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
-    window) {
-        this.window = 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;
-    }
-}
-WindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowRef, deps: [{ token: WINDOW }], target: i0.ɵɵFactoryTarget.Injectable });
-WindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowRef, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowRef, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [WINDOW]
-                    }] }];
-    } });
-
-// 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 UX_VIEWPORT_SSR_DEVICE = new InjectionToken("@ssv/ngx.ux-config/viewport/ssr-device");
-class ViewportServerSizeService {
-    constructor(deviceType) {
-        this.deviceType = deviceType;
-    }
-    get() {
-        return viewportSizeSSR[this.deviceType] || viewportSizeSSR[DeviceType.desktop];
-    }
-}
-ViewportServerSizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportServerSizeService, deps: [{ token: UX_VIEWPORT_SSR_DEVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-ViewportServerSizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportServerSizeService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportServerSizeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: function () {
-        return [{ type: DeviceType, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [UX_VIEWPORT_SSR_DEVICE]
-                    }] }];
-    } });
-
-class ViewportService {
-    constructor(windowRef, viewportServerSize, config) {
-        this.windowRef = windowRef;
-        this.viewportServerSize = viewportServerSize;
-        this._sizeTypes = generateViewportSizeTypeInfoList(config.viewport.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.viewport.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$);
-    }
-    /** Viewport size type snapshot of the last value. (Prefer use `sizeType$` observable when possible.) */
-    get sizeTypeSnapshot() { return this._sizeTypeSnapshot; }
-    /** 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; }
-    /** 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,
-        };
-    }
-}
-ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportService, deps: [{ token: WindowRef }, { token: ViewportServerSizeService }, { token: UX_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-ViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: function () {
-        return [{ type: WindowRef }, { type: ViewportServerSizeService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UX_CONFIG]
-                    }] }];
-    } });
-
-class ViewportDataService {
-    constructor(viewport, config) {
-        this.viewport = viewport;
-        this.config = config;
-    }
-    /** Get data for match. */
-    get(dataConfig, strategy = this.config.viewport.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.viewport.defaultDataMatchStrategy) {
-        return generateViewportRulesRangeFromDataMatcher(dataConfig, strategy, this.viewport.sizeTypes, this.viewport.sizeTypeMap);
-    }
-}
-ViewportDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataService, deps: [{ token: ViewportService }, { token: UX_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-ViewportDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: function () {
-        return [{ type: ViewportService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UX_CONFIG]
-                    }] }];
-    } });
-
-/* eslint-disable @angular-eslint/no-pipe-impure */
-class ViewportDataPipe {
-    constructor(viewportData, cdr) {
-        this.viewportData = viewportData;
-        this.cdr = cdr;
-        this.markForTransform = true;
-        this.data$$ = Subscription.EMPTY;
-    }
-    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();
-    }
-}
-ViewportDataPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataPipe, deps: [{ token: ViewportDataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
-ViewportDataPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataPipe, name: "ssvViewportData", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: "ssvViewportData",
-                    pure: false
-                }]
-        }], ctorParameters: function () { return [{ type: ViewportDataService }, { type: i0.ChangeDetectorRef }]; } });
-
-const NAME_CAMEL = "ssvViewportMatcherVar";
-class SsvViewportMatcherVarContext {
-    constructor($implicit = false) {
-        this.$implicit = $implicit;
-    }
-}
-class SsvViewportMatcherVarDirective {
-    constructor(viewport, viewContainer, templateRef) {
-        this.viewport = viewport;
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this._matchConditions = {};
-        this._context = new SsvViewportMatcherVarContext();
-        this._destroy$ = new Subject();
-        this._update$ = new ReplaySubject(1);
-    }
-    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();
-    }
-    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);
-    }
-}
-SsvViewportMatcherVarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvViewportMatcherVarDirective, deps: [{ token: ViewportService }, { token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-SsvViewportMatcherVarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SsvViewportMatcherVarDirective, selector: "[ssvViewportMatcherVar]", inputs: { condition: ["ssvViewportMatcherVarWhen", "condition"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvViewportMatcherVarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[${NAME_CAMEL}]`,
-                }]
-        }], ctorParameters: function () { return [{ type: ViewportService }, { type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { condition: [{
-                type: Input,
-                args: [`${NAME_CAMEL}When`]
-            }] } });
-
-class SsvViewportMatcherContext {
-    constructor() {
-        this.sizeType = null;
-        this.sizeTypeExclude = null;
-    }
-}
-class SsvViewportMatcherDirective {
-    constructor(viewport, renderer, viewContainer, cdr, templateRef) {
-        this.viewport = viewport;
-        this.renderer = renderer;
-        this.viewContainer = viewContainer;
-        this.cdr = cdr;
-        this._context = new SsvViewportMatcherContext();
-        this._thenTemplateRef = null;
-        this._elseTemplateRef = null;
-        this._thenViewRef = null;
-        this._elseViewRef = null;
-        this.sizeType$$ = Subscription.EMPTY;
-        this.cssClass$$ = Subscription.EMPTY;
-        this._update$ = new Subject();
-        this._thenTemplateRef = templateRef;
-    }
-    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);
-        }
-    }
-    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]) => {
-            var _a;
-            const el = this._thenViewRef
-                ? this._thenViewRef.rootNodes[0]
-                : (_a = this._elseViewRef) === null || _a === void 0 ? void 0 : _a.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 === null || curr === void 0 ? void 0 : 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);
-                }
-            }
-        }
-    }
-}
-SsvViewportMatcherDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.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 });
-SsvViewportMatcherDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SsvViewportMatcherDirective, selector: "[ssvViewportMatcher]", inputs: { ssvViewportMatcher: "ssvViewportMatcher", ssvViewportMatcherExclude: "ssvViewportMatcherExclude", ssvViewportMatcherElse: "ssvViewportMatcherElse" }, exportAs: ["ssvViewportMatcher"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvViewportMatcherDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[ssvViewportMatcher]",
-                    exportAs: "ssvViewportMatcher",
-                }]
-        }], ctorParameters: function () { return [{ type: ViewportService }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.TemplateRef }]; }, propDecorators: { ssvViewportMatcher: [{
-                type: Input
-            }], ssvViewportMatcherExclude: [{
-                type: Input
-            }], ssvViewportMatcherElse: [{
-                type: Input
-            }] } });
-
-/** @internal */
-const MODULE_CONFIG_DATA = new InjectionToken("@ssv/ngx.ux/configData");
-const components = [
-    SsvViewportMatcherDirective,
-    SsvViewportMatcherVarDirective,
-    ViewportDataPipe,
-];
-// todo: create module for Viewport
-class SsvUxModule {
-    static forRoot(config) {
-        return {
-            ngModule: SsvUxModule,
-            providers: [
-                { provide: MODULE_CONFIG_DATA, useValue: config },
-            ],
-        };
-    }
-}
-SsvUxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvUxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SsvUxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SsvUxModule, declarations: [SsvViewportMatcherDirective,
-        SsvViewportMatcherVarDirective,
-        ViewportDataPipe], exports: [SsvViewportMatcherDirective,
-        SsvViewportMatcherVarDirective,
-        ViewportDataPipe] });
-SsvUxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvUxModule, providers: [
-        { provide: UX_CONFIG, useFactory: _moduleConfigFactory, deps: [[MODULE_CONFIG_DATA, new Optional()]] },
-        { provide: WINDOW, useFactory: _window },
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvUxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [components],
-                    providers: [
-                        { provide: UX_CONFIG, useFactory: _moduleConfigFactory, deps: [[MODULE_CONFIG_DATA, new Optional()]] },
-                        { provide: WINDOW, useFactory: _window },
-                    ],
-                    exports: [...components],
-                }]
-        }] });
-/** @internal */
-function _moduleConfigFactory(config) {
-    if (!config) {
-        return UX_DEFAULT_CONFIG;
-    }
-    const uxOptions = typeof config === "function" ? config() : config;
-    const viewport = Object.assign(Object.assign({}, UX_DEFAULT_CONFIG.viewport), uxOptions.viewport); // breakpoints shouldn't be merged
-    return { viewport };
-}
-/** @internal */
-function _window() {
-    if (typeof window !== "undefined") {
-        return window;
-    }
-    return {};
-}
-
-const VERSION = "2.1.2";
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ComparisonOperation, DeviceType, MODULE_CONFIG_DATA, SsvUxModule, SsvViewportMatcherContext, SsvViewportMatcherDirective, SsvViewportMatcherVarContext, SsvViewportMatcherVarDirective, UX_CONFIG, UX_DEFAULT_CONFIG, UX_VIEWPORT_DEFAULT_BREAKPOINTS, UX_VIEWPORT_SSR_DEVICE, VERSION, ViewportDataMatchStrategy, ViewportDataPipe, ViewportDataService, ViewportServerSizeService, ViewportService, ViewportSizeType, _moduleConfigFactory, _window, generateViewportSizeType };
-//# sourceMappingURL=ssv-ngx.ux.mjs.map