@ssv/ngx.ux 2.0.1-dev198 → 2.0.2

package/fesm2015/ssv-ngx.ux.js

@@ -2,805 +2,805 @@ import { InjectionToken, ɵɵdefineInjectable, ɵɵinject, Injectable, Inject, O
 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[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 = {
-    [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;
+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[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 = {
+    [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: 1280,
-    fhd: 1920,
-    qhd: 2560,
-    uhd4k: 3840,
-    uhd8k: 7680,
-};
-const UX_VIEWPORT_DEFAULT_CONFIG = {
-    resizePollingSpeed: 33,
-    breakpoints: UX_VIEWPORT_DEFAULT_BREAKPOINTS,
-    defaultDataMatchStrategy: ViewportDataMatchStrategy.smaller,
+/** Default viewport breakpoints. */
+const UX_VIEWPORT_DEFAULT_BREAKPOINTS = {
+    xsmall: 450,
+    small: 767,
+    medium: 992,
+    large: 1280,
+    fhd: 1920,
+    qhd: 2560,
+    uhd4k: 3840,
+    uhd8k: 7680,
+};
+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_DEFAULT_CONFIG = {
+    viewport: UX_VIEWPORT_DEFAULT_CONFIG,
+};
 const UX_CONFIG = new InjectionToken("@ssv/ngx.ux-config");
 
-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.ɵprov = ɵɵdefineInjectable({ factory: function WindowRef_Factory() { return new WindowRef(ɵɵinject(WINDOW)); }, token: WindowRef, providedIn: "root" });
-WindowRef.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root",
-            },] }
-];
-WindowRef.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [WINDOW,] }] }
+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.ɵprov = ɵɵdefineInjectable({ factory: function WindowRef_Factory() { return new WindowRef(ɵɵinject(WINDOW)); }, token: WindowRef, providedIn: "root" });
+WindowRef.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root",
+            },] }
+];
+WindowRef.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [WINDOW,] }] }
 ];
 
-/**
- * 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["fhd"] = 4] = "fhd";
-    ViewportSizeType[ViewportSizeType["qhd"] = 6] = "qhd";
-    ViewportSizeType[ViewportSizeType["uhd4k"] = 7] = "uhd4k";
-    ViewportSizeType[ViewportSizeType["uhd8k"] = 8] = "uhd8k";
-})(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";
+/**
+ * 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["fhd"] = 4] = "fhd";
+    ViewportSizeType[ViewportSizeType["qhd"] = 6] = "qhd";
+    ViewportSizeType[ViewportSizeType["uhd4k"] = 7] = "uhd4k";
+    ViewportSizeType[ViewportSizeType["uhd8k"] = 8] = "uhd8k";
+})(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 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.ɵprov = ɵɵdefineInjectable({ factory: function ViewportServerSizeService_Factory() { return new ViewportServerSizeService(ɵɵinject(UX_VIEWPORT_SSR_DEVICE, 8)); }, token: ViewportServerSizeService, providedIn: "root" });
-ViewportServerSizeService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root",
-            },] }
-];
-ViewportServerSizeService.ctorParameters = () => [
-    { type: DeviceType, decorators: [{ type: Optional }, { type: Inject, args: [UX_VIEWPORT_SSR_DEVICE,] }] }
+// 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.ɵprov = ɵɵdefineInjectable({ factory: function ViewportServerSizeService_Factory() { return new ViewportServerSizeService(ɵɵinject(UX_VIEWPORT_SSR_DEVICE, 8)); }, token: ViewportServerSizeService, providedIn: "root" });
+ViewportServerSizeService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root",
+            },] }
+];
+ViewportServerSizeService.ctorParameters = () => [
+    { type: DeviceType, decorators: [{ type: Optional }, { type: Inject, args: [UX_VIEWPORT_SSR_DEVICE,] }] }
 ];
 
-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;
-    }, {}));
+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;
+    }, {}));
 }
 
-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.ɵprov = ɵɵdefineInjectable({ factory: function ViewportService_Factory() { return new ViewportService(ɵɵinject(WindowRef), ɵɵinject(ViewportServerSizeService), ɵɵinject(UX_CONFIG)); }, token: ViewportService, providedIn: "root" });
-ViewportService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root",
-            },] }
-];
-ViewportService.ctorParameters = () => [
-    { type: WindowRef },
-    { type: ViewportServerSizeService },
-    { type: undefined, decorators: [{ type: Inject, args: [UX_CONFIG,] }] }
+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.ɵprov = ɵɵdefineInjectable({ factory: function ViewportService_Factory() { return new ViewportService(ɵɵinject(WindowRef), ɵɵinject(ViewportServerSizeService), ɵɵinject(UX_CONFIG)); }, token: ViewportService, providedIn: "root" });
+ViewportService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root",
+            },] }
+];
+ViewportService.ctorParameters = () => [
+    { type: WindowRef },
+    { type: ViewportServerSizeService },
+    { type: undefined, decorators: [{ type: Inject, args: [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$1[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$1 = {
-    [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;
+/**
+ * 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$1[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$1 = {
+    [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;
 }
 
-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.ɵprov = ɵɵdefineInjectable({ factory: function ViewportDataService_Factory() { return new ViewportDataService(ɵɵinject(ViewportService), ɵɵinject(UX_CONFIG)); }, token: ViewportDataService, providedIn: "root" });
-ViewportDataService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root",
-            },] }
-];
-ViewportDataService.ctorParameters = () => [
-    { type: ViewportService },
-    { 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.ɵprov = ɵɵdefineInjectable({ factory: function ViewportDataService_Factory() { return new ViewportDataService(ɵɵinject(ViewportService), ɵɵinject(UX_CONFIG)); }, token: ViewportDataService, providedIn: "root" });
+ViewportDataService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root",
+            },] }
+];
+ViewportDataService.ctorParameters = () => [
+    { 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.decorators = [
-    { type: Pipe, args: [{
-                name: "ssvViewportData",
-                pure: false
-            },] }
-];
-ViewportDataPipe.ctorParameters = () => [
-    { type: ViewportDataService },
-    { type: ChangeDetectorRef }
+/* 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.decorators = [
+    { type: Pipe, args: [{
+                name: "ssvViewportData",
+                pure: false
+            },] }
+];
+ViewportDataPipe.ctorParameters = () => [
+    { type: ViewportDataService },
+    { type: 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.decorators = [
-    { type: Directive, args: [{
-                selector: `[${NAME_CAMEL}]`,
-            },] }
-];
-SsvViewportMatcherVarDirective.ctorParameters = () => [
-    { type: ViewportService },
-    { type: ViewContainerRef },
-    { type: TemplateRef }
-];
-SsvViewportMatcherVarDirective.propDecorators = {
-    condition: [{ type: Input, args: [`${NAME_CAMEL}When`,] }]
+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.decorators = [
+    { type: Directive, args: [{
+                selector: `[${NAME_CAMEL}]`,
+            },] }
+];
+SsvViewportMatcherVarDirective.ctorParameters = () => [
+    { type: ViewportService },
+    { type: ViewContainerRef },
+    { type: TemplateRef }
+];
+SsvViewportMatcherVarDirective.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.decorators = [
-    { type: Directive, args: [{
-                selector: "[ssvViewportMatcher]",
-                exportAs: "ssvViewportMatcher",
-            },] }
-];
-SsvViewportMatcherDirective.ctorParameters = () => [
-    { type: ViewportService },
-    { type: Renderer2 },
-    { type: ViewContainerRef },
-    { type: ChangeDetectorRef },
-    { type: TemplateRef }
-];
-SsvViewportMatcherDirective.propDecorators = {
-    ssvViewportMatcher: [{ type: Input }],
-    ssvViewportMatcherExclude: [{ type: Input }],
-    ssvViewportMatcherElse: [{ type: Input }]
+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.decorators = [
+    { type: Directive, args: [{
+                selector: "[ssvViewportMatcher]",
+                exportAs: "ssvViewportMatcher",
+            },] }
+];
+SsvViewportMatcherDirective.ctorParameters = () => [
+    { type: ViewportService },
+    { type: Renderer2 },
+    { type: ViewContainerRef },
+    { type: ChangeDetectorRef },
+    { type: TemplateRef }
+];
+SsvViewportMatcherDirective.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.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 {};
+/** @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.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.0.1-dev198";
+const VERSION = "0.0.0-PLACEHOLDER";
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * 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, UX_VIEWPORT_DEFAULT_CONFIG as ɵa, WINDOW as ɵb, WindowRef as ɵc };