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

package/src/viewport/viewport-data/viewport-data.utils.spec.ts

@@ -1,228 +0,0 @@
-import { generateViewportSizeTypeInfoList, generateViewportSizeTypeInfoRefs, } from "../viewport.util";
-import { ViewportSizeTypeInfo } from "../viewport.model";
-import {
-	generateViewportRulesRangeFromDataMatcher as generateViewportRulesRangeFromDataMatcher_,
-} from "./viewport-data.utils";
-import { TestViewportSizeType } from "../viewport.util.spec";
-import { ViewportDataConfig, ViewportDataMatchStrategy } from "./viewport-data-matcher";
-
-type TestViewportDataConfig<T> = ViewportDataConfig<T, Partial<Record<keyof typeof TestViewportSizeType, T>>>;
-
-const breakpoints: Record<keyof typeof TestViewportSizeType, number> = {
-	xsmall: 450,
-	small: 767,
-	medium: 992,
-	large: 1200,
-	hd: 1280,
-	fullHd: 1920,
-};
-
-const sizeTypes = generateViewportSizeTypeInfoList(breakpoints);
-const sizeRefs = generateViewportSizeTypeInfoRefs(sizeTypes) as Record<keyof typeof TestViewportSizeType, ViewportSizeTypeInfo>;
-
-const generateViewportRulesRangeFromDataMatcher = <T>(
-	dataConfig: ViewportDataConfig<T>,
-	strategy: ViewportDataMatchStrategy,
-) => generateViewportRulesRangeFromDataMatcher_<T>(dataConfig, strategy, sizeTypes, sizeRefs);
-
-describe("viewportDataUtils", () => {
-
-	describe("generateViewportRulesRangeFromDataMatcher", () => {
-
-		describe("given strategy is exact", () => {
-			const strategy = ViewportDataMatchStrategy.exact;
-			const dataConfig: TestViewportDataConfig<number> = {
-				default: 12,
-				xsmall: undefined,
-				small: 10,
-				medium: undefined,
-				large: 20,
-				hd: 25,
-				fullHd: undefined,
-			};
-			/**
-			 * default: 12
-			 * [451-767]=10
-			 * [993-1200]=20
-			 * [1201-1280]=25
-			 * */
-
-			it("should return matching rules", () => {
-				const result = generateViewportRulesRangeFromDataMatcher(dataConfig, strategy);
-				expect(result).toEqual([
-					{ min: undefined, max: undefined, value: dataConfig.default },
-					{ min: breakpoints.xsmall + 1, max: breakpoints.small, value: dataConfig.small },
-					{ min: breakpoints.medium + 1, max: breakpoints.large, value: dataConfig.large },
-					{ min: breakpoints.large + 1, max: breakpoints.hd, value: dataConfig.hd },
-				]);
-			});
-
-		});
-
-		describe("given strategy is smaller", () => {
-			const strategy = ViewportDataMatchStrategy.smaller;
-			const dataConfig: TestViewportDataConfig<number> = {
-				default: 12,
-				medium: 15,
-				large: 20,
-				hd: 30,
-			};
-			/**
-			 * default: 12
-			 * [768-992]=15
-			 * [993-1200]=20
-			 * [1201-*]=30
-			 * */
-
-			it("should return matching rules", () => {
-				const result = generateViewportRulesRangeFromDataMatcher(dataConfig, strategy);
-				expect(result).toEqual([
-					{ min: undefined, max: undefined, value: dataConfig.default }, // default
-					{ min: breakpoints.small + 1, max: breakpoints.medium, value: dataConfig.medium }, // medium
-					{ min: breakpoints.medium + 1, max: breakpoints.large, value: dataConfig.large }, // large
-					{ min: breakpoints.large + 1, max: undefined, value: dataConfig.hd }, // hd
-				]);
-			});
-		});
-
-		describe("given strategy is larger", () => {
-			const strategy = ViewportDataMatchStrategy.larger;
-			const dataConfig: TestViewportDataConfig<number> = {
-				default: 12,
-				medium: 15,
-				large: 20,
-				hd: 30,
-			};
-			/**
-			 * default: 12
-			 * [*-992]=15
-			 * [993-1200]=20
-			 * [1201-1280]=30
-			 * */
-			it("should return matching rules", () => {
-				const result = generateViewportRulesRangeFromDataMatcher(dataConfig, strategy);
-				expect(result).toEqual([
-					{ min: undefined, max: undefined, value: dataConfig.default }, // default
-					{ min: undefined, max: breakpoints.medium, value: dataConfig.medium }, // medium
-					{ min: breakpoints.medium + 1, max: breakpoints.large, value: dataConfig.large }, // large
-					{ min: breakpoints.large + 1, max: breakpoints.hd, value: dataConfig.hd }, // hd
-				]);
-			});
-		});
-
-		describe("given strategy is closestSmallFirst", () => {
-			const strategy = ViewportDataMatchStrategy.closestSmallerFirst;
-
-			// todo: name
-			describe("when dataset A", () => {
-				const dataConfig: TestViewportDataConfig<number> = {
-					default: 12,
-					xsmall: 5,
-					small: undefined,
-					medium: 15,
-					large: undefined,
-					hd: undefined,
-					fullHd: 50,
-				};
-
-				it("should return matching rules", () => {
-					const result = generateViewportRulesRangeFromDataMatcher(dataConfig, strategy);
-					expect(result).toEqual([
-						{ min: undefined, max: undefined, value: dataConfig.default },
-						{ min: undefined, max: breakpoints.small, value: dataConfig.xsmall },
-						{ min: breakpoints.small + 1, max: breakpoints.large, value: dataConfig.medium },
-						{ min: breakpoints.large + 1, max: undefined, value: dataConfig.fullHd },
-					]);
-				});
-			});
-
-			// todo: name
-			describe("when dataset B", () => {
-				const dataConfig: TestViewportDataConfig<number> = {
-					default: 12,
-					xsmall: undefined,
-					small: 10,
-					medium: undefined,
-					large: 20,
-					hd: 25,
-					fullHd: undefined,
-				};
-
-				it("should return matching rules", () => {
-					const result = generateViewportRulesRangeFromDataMatcher(dataConfig, strategy);
-					expect(result).toEqual([
-						{ min: undefined, max: undefined, value: dataConfig.default },
-						{ min: undefined, max: breakpoints.medium, value: dataConfig.small },
-						{ min: breakpoints.medium + 1, max: breakpoints.large, value: dataConfig.large },
-						{ min: breakpoints.large + 1, max: undefined, value: dataConfig.hd },
-					]);
-				});
-			});
-
-		});
-
-		describe("given strategy is closestLargerFirst", () => {
-			const strategy = ViewportDataMatchStrategy.closestLargerFirst;
-
-			// todo: name
-			describe("when dataset A", () => {
-				const dataConfig: TestViewportDataConfig<number> = {
-					default: 12,
-					xsmall: 5,
-					small: undefined,
-					medium: 15,
-					large: undefined,
-					hd: undefined,
-					fullHd: 50,
-				};
-				/**
-				 * [*-450]=5
-				 * [451-1200]=10
-				 * [1201-*]=50
-				 * */
-
-				it("should return matching rules", () => {
-					const result = generateViewportRulesRangeFromDataMatcher(dataConfig, strategy);
-					expect(result).toEqual([
-						{ min: undefined, max: undefined, value: dataConfig.default },
-						{ min: undefined, max: breakpoints.xsmall, value: dataConfig.xsmall },
-						{ min: breakpoints.xsmall + 1, max: breakpoints.large, value: dataConfig.medium },
-						{ min: breakpoints.large + 1, max: undefined, value: dataConfig.fullHd },
-					]);
-				});
-			});
-
-			// todo: name
-			describe("when dataset B", () => {
-				const dataConfig: TestViewportDataConfig<number> = {
-					default: 12,
-					xsmall: undefined,
-					small: 10,
-					medium: undefined,
-					large: 20,
-					hd: 25,
-					fullHd: undefined,
-				};
-				/**
-				 * [*-767]=10
-				 * [768-1200]=20
-				 * [1201-*]=25
-				 * */
-				it("should return matching rules", () => {
-					const result = generateViewportRulesRangeFromDataMatcher(dataConfig, strategy);
-					expect(result).toEqual([
-						{ min: undefined, max: undefined, value: dataConfig.default },
-						{ min: undefined, max: breakpoints.small, value: dataConfig.small },
-						{ min: breakpoints.small + 1, max: breakpoints.large, value: dataConfig.large },
-						{ min: breakpoints.large + 1, max: undefined, value: dataConfig.hd },
-					]);
-				});
-			});
-
-		});
-
-
-	});
-
-
-});

package/src/viewport/viewport-data/viewport-data.utils.ts

@@ -1,137 +0,0 @@
-import { Dictionary } from "../../internal/internal.model";
-import { ViewportSizeTypeInfo } from "../viewport.model";
-import { ViewportDataConfig, ViewportDataMatchStrategy } from "./viewport-data-matcher";
-
-export interface ViewportDataRule<T> {
-	min?: number;
-	max?: number;
-	value: T;
-}
-
-/**
- * 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).
- */
-export function generateViewportRulesRangeFromDataMatcher<T>(
-	dataConfig: ViewportDataConfig<T>,
-	strategy: ViewportDataMatchStrategy,
-	sizeTypes: ViewportSizeTypeInfo[],
-	sizeTypeMap: Dictionary<ViewportSizeTypeInfo>,
-): ViewportDataRule<T>[] {
-	const ruleBuilderFn = matchStrategyHandlerMap[strategy];
-	if (!ruleBuilderFn) {
-		throw Error(`generateViewportRulesRangeFromDataMatcher: Viewport Data strategy not implemented. Strategy: '${strategy}'`);
-	}
-
-	let dataSizes: ViewportSizeTypeInfo[] = [];
-	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: ViewportDataRule<T>[] = [];
-	if (dataConfig.default) {
-		rules.push({ value: dataConfig.default, min: undefined, max: undefined });
-	}
-
-	let prevRule: ViewportDataRule<T> | undefined;
-	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: ViewportDataRule<T> = {
-			value: data,
-			min: undefined,
-			max: undefined,
-		};
-
-		ruleBuilderFn(rule, dataSize, nextDataSize, prevDataSize, prevSize, prevRule, sizeTypes);
-
-		prevRule = rule;
-		rules.push(rule);
-	}
-	return rules;
-}
-
-export interface ViewportRuleRangeBuilder<T = unknown> {
-	(
-		rule: ViewportDataRule<T>,
-		dataSize: ViewportSizeTypeInfo,
-		nextDataSize: ViewportSizeTypeInfo | undefined,
-		prevDataSize: ViewportSizeTypeInfo | undefined,
-		prevSize: ViewportSizeTypeInfo | undefined,
-		prevRule: ViewportDataRule<T> | undefined,
-		sizeTypes: ViewportSizeTypeInfo[],
-	): void;
-}
-
-const matchStrategyHandlerMap: Dictionary<ViewportRuleRangeBuilder> = {
-	[ViewportDataMatchStrategy.exact]: (rule, dataSize, _nextDataSize, _prevDataSize, prevSize) => {
-		rule.max = dataSize.widthThreshold;
-		if (prevSize) {
-			rule.min = prevSize.widthThreshold + 1;
-		}
-	},
-	[ViewportDataMatchStrategy.smaller]: (rule, dataSize, nextDataSize, _prevDataSize, prevSize) => {
-		if (nextDataSize) {
-			rule.max = dataSize.widthThreshold;
-		}
-		if (prevSize) {
-			rule.min = prevSize.widthThreshold + 1;
-		}
-	},
-	[ViewportDataMatchStrategy.larger]: (rule, dataSize, _nextDataSize, prevDataSize) => {
-		if (dataSize) {
-			rule.max = dataSize.widthThreshold;
-		}
-		if (prevDataSize) {
-			rule.min = prevDataSize.widthThreshold + 1;
-		}
-	},
-	[ViewportDataMatchStrategy.closestSmallerFirst]: (rule, dataSize, nextDataSize, _prevDataSize, _prevSize, prevRule, sizeTypes) => {
-		if (nextDataSize) {
-			rule.max = calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, true);
-		}
-		if (prevRule?.max) {
-			rule.min = prevRule.max + 1;
-		}
-	},
-	[ViewportDataMatchStrategy.closestLargerFirst]: (rule, dataSize, nextDataSize, _prevDataSize, _prevSize, prevRule, sizeTypes) => {
-		if (nextDataSize) {
-			rule.max = calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, false);
-		}
-		if (prevRule?.max) {
-			rule.min = prevRule.max + 1;
-		}
-	},
-};
-
-function calculateClosestWidthThreshold(
-	nextDataSize: ViewportSizeTypeInfo,
-	dataSize: ViewportSizeTypeInfo,
-	sizeTypes: ViewportSizeTypeInfo[],
-	isSmallerPreferred: boolean,
-) {
-	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;
-}

package/src/viewport/viewport-matcher-var.directive.ts

@@ -1,85 +0,0 @@
-import {
-	OnInit,
-	OnDestroy,
-	Directive,
-	Input,
-	TemplateRef,
-	ViewContainerRef,
-	EmbeddedViewRef,
-} from "@angular/core";
-import { combineLatest, ReplaySubject, Subject, tap, map, takeUntil } from "rxjs";
-
-import { ViewportService } from "./viewport.service";
-import {
-	isViewportSizeMatcherExpression,
-	isViewportSizeMatcherTupleExpression,
-	isViewportConditionMatch
-} from "./viewport.util";
-import { ViewportMatchConditions, ViewportSizeMatcherExpression } from "./viewport.model";
-
-const NAME_CAMEL = "ssvViewportMatcherVar";
-
-export class SsvViewportMatcherVarContext {
-
-	constructor(
-		public $implicit = false,
-	) { }
-
-}
-
-@Directive({
-	selector: `[${NAME_CAMEL}]`,
-	standalone: true,
-})
-export class SsvViewportMatcherVarDirective implements OnInit, OnDestroy {
-
-	private _matchConditions: ViewportMatchConditions = {};
-	private _context = new SsvViewportMatcherVarContext();
-	private readonly _destroy$ = new Subject<void>();
-	private readonly _update$ = new ReplaySubject<void>(1);
-	private _viewRef!: EmbeddedViewRef<SsvViewportMatcherVarContext>;
-
-	@Input(`${NAME_CAMEL}When`) set condition(value: string | string[] | ViewportSizeMatcherExpression) {
-		if (isViewportSizeMatcherExpression(value)) {
-			this._matchConditions.expression = value;
-		} else if (isViewportSizeMatcherTupleExpression(value)) {
-			const [op, size] = value;
-			this._matchConditions.expression = {
-				operation: op,
-				size
-			};
-		} else {
-			this._matchConditions.sizeType = value;
-		}
-
-		this._update$.next();
-	}
-
-	constructor(
-		private viewport: ViewportService,
-		private viewContainer: ViewContainerRef,
-		private templateRef: TemplateRef<SsvViewportMatcherVarContext>,
-	) {
-	}
-
-	ngOnInit(): void {
-		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(): void {
-		this._destroy$.next();
-		this._destroy$.complete();
-	}
-
-	private updateView(): void {
-		this.viewContainer.clear();
-		this._viewRef = this.viewContainer.createEmbeddedView(this.templateRef, this._context);
-	}
-
-}

package/src/viewport/viewport-matcher.directive.ts

@@ -1,170 +0,0 @@
-import {
-	OnInit,
-	OnDestroy,
-	Directive,
-	Renderer2,
-	ViewContainerRef,
-	Input,
-	EmbeddedViewRef,
-	TemplateRef,
-	ChangeDetectorRef,
-} from "@angular/core";
-import { Subscription, Subject, tap, filter, pairwise, startWith } from "rxjs";
-
-import { ViewportService } from "./viewport.service";
-import {
-	isViewportSizeMatcherExpression,
-	isViewportSizeMatcherTupleExpression,
-	isViewportConditionMatch
-} from "./viewport.util";
-import { ViewportSizeTypeInfo, ViewportMatchConditions, ViewportSizeMatcherExpression } from "./viewport.model";
-
-export class SsvViewportMatcherContext implements ViewportMatchConditions {
-
-	sizeType: string | string[] | null = null;
-	sizeTypeExclude: string | string[] | null = null;
-	expression?: ViewportSizeMatcherExpression;
-
-}
-
-@Directive({
-	selector: "[ssvViewportMatcher]",
-	exportAs: "ssvViewportMatcher",
-	standalone: true,
-})
-export class SsvViewportMatcherDirective implements OnInit, OnDestroy {
-
-	sizeInfo: ViewportSizeTypeInfo | undefined;
-
-	private _context: SsvViewportMatcherContext = new SsvViewportMatcherContext();
-	private _thenTemplateRef: TemplateRef<SsvViewportMatcherContext> | null = null;
-	private _elseTemplateRef: TemplateRef<SsvViewportMatcherContext> | null = null;
-	private _thenViewRef: EmbeddedViewRef<SsvViewportMatcherContext> | null = null;
-	private _elseViewRef: EmbeddedViewRef<SsvViewportMatcherContext> | null = null;
-	private sizeType$$ = Subscription.EMPTY;
-	private cssClass$$ = Subscription.EMPTY;
-	private readonly _update$ = new Subject<SsvViewportMatcherContext>();
-
-	@Input() set ssvViewportMatcher(value: string | string[] | ViewportSizeMatcherExpression) {
-		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);
-		}
-	}
-
-	@Input() set ssvViewportMatcherExclude(value: string | string[]) {
-		this._context.sizeTypeExclude = value;
-
-		if (this.sizeInfo) {
-			this._update$.next(this._context);
-		}
-	}
-
-	@Input() set ssvViewportMatcherElse(templateRef: TemplateRef<SsvViewportMatcherContext> | null) {
-		this._elseTemplateRef = templateRef;
-		this._elseViewRef = null; // clear previous view if any.
-		if (this.sizeInfo) {
-			this._update$.next(this._context);
-		}
-	}
-
-	constructor(
-		private viewport: ViewportService,
-		private renderer: Renderer2,
-		private viewContainer: ViewContainerRef,
-		private cdr: ChangeDetectorRef,
-		templateRef: TemplateRef<SsvViewportMatcherContext>,
-	) {
-		this._thenTemplateRef = templateRef;
-	}
-
-	ngOnInit(): void {
-		// 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<ViewportSizeTypeInfo | undefined>(undefined),
-				filter(() => !!(this._thenViewRef || this._elseViewRef)),
-				pairwise(),
-				tap(([prev, curr]) => {
-					const el: Element = this._thenViewRef
-						? this._thenViewRef.rootNodes[0]
-						: this._elseViewRef?.rootNodes[0];
-
-					if (!el.classList) {
-						return;
-					}
-					if (prev) {
-						this.renderer.removeClass(el, `ssv-vp-size--${prev.name}`);
-					}
-					this.renderer.addClass(el, `ssv-vp-size--${curr?.name}`);
-				}),
-			)
-			.subscribe();
-	}
-
-	ngOnDestroy(): void {
-		this.cssClass$$.unsubscribe();
-		this.sizeType$$.unsubscribe();
-		this._update$.complete();
-	}
-
-	private _updateView(sizeInfo: ViewportSizeTypeInfo) {
-		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,
-					);
-				}
-			}
-		}
-	}
-
-}

package/src/viewport/viewport-server-size.service.ts

@@ -1,37 +0,0 @@
-import { Injectable, InjectionToken, inject } from "@angular/core";
-
-import { DeviceType, ViewportSize } from "./viewport.model";
-
-// todo: make this configurable
-/** Viewport size for SSR. */
-const viewportSizeSSR: Record<DeviceType, ViewportSize> = {
-	[DeviceType.desktop]: {
-		width: 1366,
-		height: 768,
-	},
-	[DeviceType.tablet]: {
-		width: 768,
-		height: 1024,
-	},
-	[DeviceType.mobile]: {
-		width: 414,
-		height: 736,
-	},
-};
-
-export const VIEWPORT_SSR_DEVICE = new InjectionToken<DeviceType>("UX_VIEWPORT_SSR_DEVICE", {
-	factory: () => DeviceType.desktop,
-});
-
-@Injectable({
-	providedIn: "root",
-})
-export class ViewportServerSizeService {
-
-	private readonly deviceType = inject(VIEWPORT_SSR_DEVICE);
-
-	get(): ViewportSize {
-		return viewportSizeSSR[this.deviceType] || viewportSizeSSR[DeviceType.desktop];
-	}
-
-}

package/src/viewport/viewport.model.ts

@@ -1,54 +0,0 @@
-/**
- * The indices of each breakpoint provided based on the `UX_VIEWPORT_DEFAULT_BREAKPOINTS`.
- * @see UX_VIEWPORT_DEFAULT_BREAKPOINTS
- */
-export enum ViewportSizeType {
-	xsmall = 0,
-	small = 1,
-	medium = 2,
-	large = 3,
-	xlarge = 4,
-	xxlarge = 5,
-	xxlarge1 = 6,
-}
-
-export enum ComparisonOperation {
-	equals = "=",
-	notEquals = "<>",
-	lessThan = "<",
-	lessOrEqualThan = "<=",
-	greaterThan = ">",
-	greaterOrEqualThan = ">=",
-}
-
-export type ComparisonOperationKeyType = keyof typeof ComparisonOperation;
-export type ComparisonOperationValueType = "=" | "<>" | "<" | "<=" | ">" | ">="; // todo: find a better way to do this
-export type ComparisonOperationLiteral = ComparisonOperationKeyType | ComparisonOperationValueType;
-
-export enum DeviceType {
-	desktop = "desktop",
-	mobile = "mobile",
-	tablet = "tablet"
-}
-
-export interface ViewportSize {
-	width: number;
-	height: number;
-}
-
-export interface ViewportSizeTypeInfo {
-	type: number;
-	name: string;
-	widthThreshold: number;
-}
-
-export interface ViewportMatchConditions {
-	sizeType?: string | string[] | null;
-	sizeTypeExclude?: string | string[] | null;
-	expression?: ViewportSizeMatcherExpression;
-}
-
-export interface ViewportSizeMatcherExpression {
-	size: string;
-	operation: ComparisonOperationLiteral;
-}