@ssv/ngx.ux 2.1.2-dev.37 → 3.0.0-dev.32

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

@@ -0,0 +1,228 @@
+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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,170 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,54 @@
+/**
+ * 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;
+}