@tylertech/forge-core 2.0.0 → 2.2.0

package/esm/index.js

@@ -7,7 +7,9 @@ export * from './a11y';
 export * from './constants';
 export * from './custom-elements';
 export * from './events';
+export * from './media-observer';
 export * from './message-list';
+export * from './resize';
 export * from './scroll';
 export * from './services';
 export * from './utils';

package/esm/media-observer/index.js

@@ -0,0 +1,3 @@
+export * from './media-observer';
+export * from './media-observer-utils';
+export * from './types';

package/esm/media-observer/media-observer-utils.js

@@ -0,0 +1,57 @@
+import { ALL_MEDIA_FEATURES } from './types';
+/** Returns the names of all queries that match. Used for range media features. */
+export function getMatchingValues(namedQueries) {
+    const values = [];
+    for (const namedQuery of namedQueries) {
+        const queryList = window.matchMedia(namedQuery.query);
+        if (queryList.matches) {
+            values.push(namedQuery.name);
+        }
+    }
+    return values;
+}
+/** Returns the name of one query that matches. Used for discrete media features. */
+export function getMatchingValue(namedQueries) {
+    for (const namedQuery of namedQueries) {
+        const queryList = window.matchMedia(namedQuery.query);
+        if (queryList.matches) {
+            return namedQuery.name;
+        }
+    }
+    // We can assume that at least one query will match, this fallback is mostly to satisfy TypeScript
+    console.warn(`No media query returned a match, falling back to ${namedQueries[0].name}.`);
+    return namedQueries[0].name;
+}
+/** Returns whether a query matches. */
+export function getBooleanValue(query) {
+    return window.matchMedia(query.query).matches;
+}
+/** Returns a CSS media query string from a range. */
+export function getRangeQuery(feature, range) {
+    if (range.equals !== undefined) {
+        return `(${feature}: ${range.equals})`;
+    }
+    const rules = [];
+    if (range.min !== undefined) {
+        rules.push(`(min-${feature}: ${range.min})`);
+    }
+    if (range.max !== undefined) {
+        rules.push(`(max-${feature}: ${range.max})`);
+    }
+    return rules.join(' and ');
+}
+/** Whether a string is the name of a media feature. */
+export function isMediaFeature(value) {
+    return ALL_MEDIA_FEATURES.includes(value);
+}
+/** Return `undefined` if the name is a reserved media feature. */
+export function validateName(name) {
+    if (!name) {
+        return undefined;
+    }
+    if (isMediaFeature(name)) {
+        console.error(`${name} is a disallowed media observer name.`);
+        return undefined;
+    }
+    return name;
+}

package/esm/media-observer/media-observer.js

@@ -0,0 +1,214 @@
+import { Subject } from '../observable';
+import { getBooleanValue, getMatchingValue, getMatchingValues, getRangeQuery, validateName } from './media-observer-utils';
+import { mediaFeatureValues } from './types';
+/**
+ * A Subject that tracks the value of a media feature and exposes it synchronously and
+ * asynchronously.
+ */
+export class MediaObserver extends Subject {
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    constructor(name, namedQueries, value, track = true) {
+        super(value);
+        this._queries = [];
+        this._name = name;
+        this._queries = this._attachMediaQueries(namedQueries);
+        if (track) {
+            MediaObserver._observers[name] = this;
+        }
+    }
+    /**
+     * Returns a new media observer tracking a discrete feature.
+     * @param feature The name of a discrete media feature.
+     * @param options An options object with the following properties:
+     * - `name`: The name to track the observer by. The feature name is used if unsupplied.
+     * - `track`: Whether to make the observer available globally.
+     * @returns A `DiscreteMediaObserver` tracking the given feature.
+     */
+    static observeDiscrete(feature, options) {
+        var _a;
+        const name = (_a = validateName(options === null || options === void 0 ? void 0 : options.name)) !== null && _a !== void 0 ? _a : feature;
+        const existing = MediaObserver._getObserver(name);
+        if (existing && (options === null || options === void 0 ? void 0 : options.track) !== false) {
+            return existing;
+        }
+        return DiscreteMediaObserver.create(feature);
+    }
+    /** Returns a media oberserver tracking a range feature. */
+    /**
+     * Returns a new media observer tracking a range feature.
+     * @param feature The name of a range media feature.
+     * @param constraints One or more ranges to track. A range includes the following properties:
+     * - `name`: A label for the range used to set the observer's value.
+     * - `min`: The lowest value in the range (optional).
+     * - `max`: The highest value in the range (optional).
+     * - `equals`: A single value to match, supersedes `min` and `max` (optional).
+     * @param options An options object with the following properties:
+     * - `name`: The name to track the observer by. The feature name is used if unsupplied.
+     * - `track`: Whether to make the observer available globally.
+     * @returns A `RangeMediaObserver` tracking the given feature.
+     */
+    static observeRange(feature, constraints, options) {
+        var _a;
+        const name = (_a = validateName(options === null || options === void 0 ? void 0 : options.name)) !== null && _a !== void 0 ? _a : feature;
+        const existing = MediaObserver._getObserver(name);
+        if (existing && (options === null || options === void 0 ? void 0 : options.track) !== false) {
+            return existing;
+        }
+        return RangeMediaObserver.create(feature, Array.isArray(constraints) ? constraints : [constraints], options);
+    }
+    /**
+     * Returns a media observer tracking a feature that evaluates to a boolean value.
+     * @param feature The name of a media feature that can be expressed as a boolean.
+     * @param options An options object with the following properties:
+     * - `name`: The name to track the observer by. The feature name plus '-bool' is used if unsupplied.
+     * - `track`: Whether to make the observer available globally.
+     * @returns A `BooleanMediaObserver` tracking the given feature.
+     */
+    static observeBoolean(feature, options) {
+        var _a;
+        const name = (_a = validateName(options === null || options === void 0 ? void 0 : options.name)) !== null && _a !== void 0 ? _a : `${feature}-bool`;
+        const existing = MediaObserver._getObserver(name);
+        if (existing && (options === null || options === void 0 ? void 0 : options.track) !== false) {
+            return existing;
+        }
+        return BooleanMediaObserver.create(feature, options);
+    }
+    /** Returns a media observer tracking any media query. */
+    /**
+     * Returns a media observer tracking any media query.
+     * @param query Any media query.
+     * @param options An options object with the following properties:
+     * - `name`: The name to track the observer by. The entire query string is used if unsupplied.
+     * - `track`: Whether to make the observer available globally.
+     * @returns A `CustomMediaObserver` tracking the given query.
+     */
+    static observeCustom(query, options) {
+        var _a;
+        const name = (_a = validateName(options === null || options === void 0 ? void 0 : options.name)) !== null && _a !== void 0 ? _a : query;
+        const existing = MediaObserver._getObserver(name);
+        if (existing && (options === null || options === void 0 ? void 0 : options.track) !== false) {
+            return existing;
+        }
+        return CustomMediaObserver.create(query, options);
+    }
+    static _getObserver(name) {
+        const existing = MediaObserver._observers[name];
+        if (existing) {
+            return existing;
+        }
+        return undefined;
+    }
+    get name() {
+        return this._name;
+    }
+    /** Removes the `MediaObserver` and all created event listeners. */
+    destroy() {
+        for (const query of this._queries) {
+            query.queryList.removeEventListener('change', query.handler);
+        }
+        this._queries = [];
+        delete MediaObserver._observers[this.name];
+    }
+    _attachMediaQueries(namedQueries) {
+        return namedQueries.map(({ name, query }) => {
+            const queryList = window.matchMedia(query);
+            const handler = (event) => this.setValue(event, name);
+            handler(queryList);
+            queryList.addEventListener('change', handler);
+            return { queryList, handler };
+        });
+    }
+}
+/**
+ * STATIC MEMBERS
+ */
+/** A collection of all managed media observers. */
+MediaObserver._observers = {};
+/**
+ * A media observer that tracks one feature with multiple discrete keyword values.
+ */
+export class DiscreteMediaObserver extends MediaObserver {
+    static create(feature, options) {
+        var _a;
+        const namedQueries = mediaFeatureValues[feature].map(featureValue => ({ name: featureValue.toString(), query: `(${feature}: ${featureValue})` }));
+        const value = getMatchingValue(namedQueries);
+        const name = (_a = validateName(options === null || options === void 0 ? void 0 : options.name)) !== null && _a !== void 0 ? _a : feature;
+        return new DiscreteMediaObserver(name, namedQueries, value, (options === null || options === void 0 ? void 0 : options.track) !== false);
+    }
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    setValue(value, name) {
+        if (!value.matches) {
+            return;
+        }
+        this.next(name);
+    }
+}
+/**
+ * A media observer that tracks one feature with comparable range values.
+ */
+export class RangeMediaObserver extends MediaObserver {
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    constructor(name, namedQueries, value, track = true) {
+        super(name, namedQueries, value, track);
+        this._isAwaitingQueries = false;
+        this._valueQueue = [];
+        this._isInitialized = true;
+    }
+    static create(feature, constraints, options) {
+        var _a;
+        const namedQueries = constraints.map(constraint => ({ query: getRangeQuery(feature, constraint), name: constraint.name }));
+        const value = getMatchingValues(namedQueries);
+        const name = (_a = validateName(options === null || options === void 0 ? void 0 : options.name)) !== null && _a !== void 0 ? _a : feature;
+        return new RangeMediaObserver(name, namedQueries, value, (options === null || options === void 0 ? void 0 : options.track) !== false);
+    }
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    setValue(value, name) {
+        if (!this._isInitialized) {
+            return;
+        }
+        if (value.matches) {
+            this._valueQueue.push(name);
+        }
+        if (!this._isAwaitingQueries) {
+            setTimeout(() => {
+                this.next([...this._valueQueue]);
+                this._valueQueue = [];
+                this._isAwaitingQueries = false;
+            });
+            this._isAwaitingQueries = true;
+        }
+    }
+}
+/**
+ * A media observer that tracks one feature that can be coerced to a boolean value. `none` and 0
+ * values evaluate to `true`.
+ */
+export class BooleanMediaObserver extends MediaObserver {
+    static create(feature, options) {
+        var _a;
+        const namedQuery = [{ query: `(${feature})`, name: '' }];
+        const value = getBooleanValue(namedQuery[0]);
+        const name = (_a = validateName(options === null || options === void 0 ? void 0 : options.name)) !== null && _a !== void 0 ? _a : `${feature}-bool`;
+        return new BooleanMediaObserver(name, namedQuery, value, (options === null || options === void 0 ? void 0 : options.track) !== false);
+    }
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    setValue(value, _) {
+        this.next(value.matches);
+    }
+}
+/**
+ * A media observer that tracks any query.
+ */
+export class CustomMediaObserver extends MediaObserver {
+    static create(query, options) {
+        var _a;
+        const namedQuery = [{ query, name: '' }];
+        const value = window.matchMedia(query);
+        const name = (_a = validateName(options === null || options === void 0 ? void 0 : options.name)) !== null && _a !== void 0 ? _a : query;
+        return new CustomMediaObserver(name, namedQuery, value, (options === null || options === void 0 ? void 0 : options.track) !== false);
+    }
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    setValue(value, _) {
+        this.next(value);
+    }
+}

package/esm/media-observer/types.js

@@ -0,0 +1,87 @@
+export const DISCRETE_MEDIA_FEATURES = [
+    'any-hover',
+    'any-pointer',
+    'color-gamut',
+    'display-mode',
+    'dynamic-range',
+    'forced-colors',
+    'grid',
+    'hover',
+    'inverted-colors',
+    'orientation',
+    'overflow-block',
+    'overflow-inline',
+    'pointer',
+    'prefers-contrast',
+    'prefers-color-scheme',
+    'prefers-reduced-motion',
+    'scripting',
+    'update',
+    'video-dynamic-range'
+];
+export const RANGE_MEDIA_FEATURES = [
+    'aspect-ratio',
+    'color',
+    'color-index',
+    'height',
+    'monochrome',
+    'resolution',
+    'width'
+];
+export const ALL_MEDIA_FEATURES = [...DISCRETE_MEDIA_FEATURES, ...RANGE_MEDIA_FEATURES];
+export const BOOLEAN_MEDIA_FEATURES = [
+    'any-hover',
+    'any-pointer',
+    'color',
+    'color-index',
+    'forced-colors',
+    'grid',
+    'height',
+    'hover',
+    'inverted-colors',
+    'monochrome',
+    'overflow-block',
+    'overflow-inline',
+    'pointer',
+    'scripting',
+    'update',
+    'width'
+];
+export const colorGamutValues = ['srbg', 'p3', 'rec2020'];
+export const displayModeValues = ['fullscreen', 'standalone', 'minimal-ui', 'browser', 'window-controls-overlay'];
+export const dynamicRangeValues = ['standard', 'high'];
+export const forcedColorsValues = ['none', 'active'];
+export const gridValues = [0, 1];
+export const hoverValues = ['none', 'hover'];
+export const invertedColorsValues = ['none', 'inverted'];
+export const orientationValues = ['portrait', 'landscape'];
+export const overflowBlockValues = ['none', 'scroll', 'optional-paged', 'paged'];
+export const overflowInlineValues = ['none', 'scroll'];
+export const pointerValues = ['none', 'coarse', 'fine'];
+export const prefersContrastValues = ['no-preference', 'more', 'less', 'custom'];
+export const prefersColorSchemeValues = ['light', 'dark'];
+export const prefersReducedMotionValues = ['no-preference', 'reduce'];
+export const scriptingValues = ['none', 'initial-only', 'enabled'];
+export const updateValues = ['none', 'slow', 'fast'];
+export const videoDynamicRangeValues = ['standard', 'high'];
+export const mediaFeatureValues = {
+    'any-hover': Array.from(hoverValues.values()),
+    'any-pointer': Array.from(pointerValues.values()),
+    'color-gamut': Array.from(colorGamutValues.values()),
+    'display-mode': Array.from(displayModeValues.values()),
+    'dynamic-range': Array.from(dynamicRangeValues.values()),
+    'forced-colors': Array.from(forcedColorsValues.values()),
+    'grid': Array.from(gridValues.values()),
+    'hover': Array.from(hoverValues.values()),
+    'inverted-colors': Array.from(invertedColorsValues.values()),
+    'orientation': Array.from(orientationValues.values()),
+    'overflow-block': Array.from(overflowBlockValues.values()),
+    'overflow-inline': Array.from(overflowInlineValues.values()),
+    'pointer': Array.from(pointerValues.values()),
+    'prefers-contrast': Array.from(prefersContrastValues.values()),
+    'prefers-color-scheme': Array.from(prefersColorSchemeValues.values()),
+    'prefers-reduced-motion': Array.from(prefersReducedMotionValues.values()),
+    'scripting': Array.from(scriptingValues.values()),
+    'update': Array.from(updateValues.values()),
+    'video-dynamic-range': Array.from(videoDynamicRangeValues.values())
+};

package/esm/observable/index.js

@@ -0,0 +1,2 @@
+export * from './observable';
+export * from './types';

package/esm/observable/observable.js

@@ -0,0 +1,51 @@
+export class Subject {
+    constructor(value) {
+        this.subscribers = [];
+        this.source = value;
+    }
+    get value() {
+        return this.source;
+    }
+    subscribe(observer) {
+        const subscription = new Subscription(this.subscribers, observer);
+        this.subscribers.push(subscription);
+        observer === null || observer === void 0 ? void 0 : observer(this.source);
+        return subscription;
+    }
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    next(value) {
+        var _a;
+        this.source = value;
+        for (const subscriber of this.subscribers) {
+            // eslint-disable-next-line @typescript-eslint/dot-notation
+            (_a = subscriber.observer) === null || _a === void 0 ? void 0 : _a.call(subscriber, value);
+        }
+    }
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    complete() {
+        this.subscribers = [];
+    }
+}
+export class Subscription {
+    constructor(parent, observer) {
+        this._closed = false;
+        this.observer = observer;
+        this._parent = parent;
+    }
+    get closed() {
+        return this._closed;
+    }
+    ;
+    unsubscribe() {
+        if (this._closed) {
+            return;
+        }
+        const index = this._parent.findIndex(subscription => subscription === this);
+        if (index > -1) {
+            this._parent.splice(index, 1);
+            this._closed = true;
+            return;
+        }
+        console.error('Subscription is not present in parent array.', { subscription: this, parent: this._parent });
+    }
+}

package/esm/observable/types.js

@@ -0,0 +1 @@
+export {};

package/esm/resize/index.js

@@ -0,0 +1,2 @@
+export * from './resize-observer';
+export * from './resize-types';

package/esm/resize/resize-observer.js

@@ -0,0 +1,63 @@
+/**
+ * Provides a set of methods for observing and responding to resizing of elements.
+ */
+export class ForgeResizeObserver {
+    /**
+     * Initiates the observing of a specified `Element`. Calling with an already observed `Element`
+     * overwrites the exisiting observation. It is expected that the consumer will eventually
+     * {@link unobserve} the `Element` to avoid memory leaks.
+     *
+     * @param target An `Element` reference.
+     * @param callback A function that accepts a `ResizeObserverEntry` for the `Element`.
+     * @param options An options object allowing you to set options for the observation.
+     */
+    static observe(target, callback, options) {
+        var _a, _b;
+        if (ForgeResizeObserver._targets.has(target)) {
+            (_a = ForgeResizeObserver._observer) === null || _a === void 0 ? void 0 : _a.unobserve(target);
+        }
+        ForgeResizeObserver._targets.set(target, callback);
+        ForgeResizeObserver._countTargets();
+        (_b = ForgeResizeObserver._observer) === null || _b === void 0 ? void 0 : _b.observe(target, options);
+    }
+    /**
+     * Ends the observing of a specified `Element`.
+     *
+     * @param target An `Element` reference.
+     */
+    static unobserve(target) {
+        var _a;
+        ForgeResizeObserver._targets.delete(target);
+        (_a = ForgeResizeObserver._observer) === null || _a === void 0 ? void 0 : _a.unobserve(target);
+        ForgeResizeObserver._countTargets();
+    }
+    /**
+     * Creates or destroys the `ResizeObserver` based on whether targets exist.
+     */
+    static _countTargets() {
+        if (ForgeResizeObserver._observer) {
+            // If there are no targets destroy the observer
+            if (ForgeResizeObserver._targets.size < 1) {
+                ForgeResizeObserver._observer = undefined;
+            }
+        }
+        else {
+            // If there are targets create the observer
+            if (ForgeResizeObserver._targets.size) {
+                ForgeResizeObserver._observer = new ResizeObserver(ForgeResizeObserver._handleResize);
+            }
+        }
+    }
+}
+ForgeResizeObserver._targets = new Map();
+/**
+ * Runs the callback function of targets when they are resized.
+ *
+ * @param entries An array of `ResizeObserverEntry`s.
+ */
+ForgeResizeObserver._handleResize = entries => {
+    entries.forEach(entry => {
+        var _a;
+        (_a = ForgeResizeObserver._targets.get(entry.target)) === null || _a === void 0 ? void 0 : _a(entry);
+    });
+};

package/esm/resize/resize-types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-core",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "A library of core web utilities that support Forge Web Component libraries.",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",

package/typings/index.d.ts

@@ -7,7 +7,9 @@ export * from './a11y';
 export * from './constants';
 export * from './custom-elements';
 export * from './events';
+export * from './media-observer';
 export * from './message-list';
+export * from './resize';
 export * from './scroll';
 export * from './services';
 export * from './utils';

package/typings/media-observer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './media-observer';
+export * from './media-observer-utils';
+export * from './types';

package/typings/media-observer/media-observer-utils.d.ts

@@ -0,0 +1,13 @@
+import { IMediaRange, MediaFeature, NamedMediaQuery, RangeMediaFeature } from './types';
+/** Returns the names of all queries that match. Used for range media features. */
+export declare function getMatchingValues(namedQueries: NamedMediaQuery[]): string[];
+/** Returns the name of one query that matches. Used for discrete media features. */
+export declare function getMatchingValue(namedQueries: NamedMediaQuery[]): string;
+/** Returns whether a query matches. */
+export declare function getBooleanValue(query: NamedMediaQuery): boolean;
+/** Returns a CSS media query string from a range. */
+export declare function getRangeQuery(feature: RangeMediaFeature, range: IMediaRange): string;
+/** Whether a string is the name of a media feature. */
+export declare function isMediaFeature(value: string): value is MediaFeature;
+/** Return `undefined` if the name is a reserved media feature. */
+export declare function validateName(name?: string): string | undefined;

package/typings/media-observer/media-observer.d.ts

@@ -0,0 +1,101 @@
+import { Subject } from '../observable';
+import { BooleanMediaFeature, IMediaObserverOptions, IMediaRange, MediaFeature as DiscreteMediaFeature, NamedMediaQuery, RangeMediaFeature } from './types';
+/**
+ * A Subject that tracks the value of a media feature and exposes it synchronously and
+ * asynchronously.
+ */
+export declare abstract class MediaObserver<T> extends Subject<T> {
+    /**
+     * STATIC MEMBERS
+     */
+    /** A collection of all managed media observers. */
+    private static _observers;
+    /**
+     * Returns a new media observer tracking a discrete feature.
+     * @param feature The name of a discrete media feature.
+     * @param options An options object with the following properties:
+     * - `name`: The name to track the observer by. The feature name is used if unsupplied.
+     * - `track`: Whether to make the observer available globally.
+     * @returns A `DiscreteMediaObserver` tracking the given feature.
+     */
+    static observeDiscrete(feature: DiscreteMediaFeature, options?: IMediaObserverOptions): DiscreteMediaObserver;
+    /** Returns a media oberserver tracking a range feature. */
+    /**
+     * Returns a new media observer tracking a range feature.
+     * @param feature The name of a range media feature.
+     * @param constraints One or more ranges to track. A range includes the following properties:
+     * - `name`: A label for the range used to set the observer's value.
+     * - `min`: The lowest value in the range (optional).
+     * - `max`: The highest value in the range (optional).
+     * - `equals`: A single value to match, supersedes `min` and `max` (optional).
+     * @param options An options object with the following properties:
+     * - `name`: The name to track the observer by. The feature name is used if unsupplied.
+     * - `track`: Whether to make the observer available globally.
+     * @returns A `RangeMediaObserver` tracking the given feature.
+     */
+    static observeRange(feature: RangeMediaFeature, constraints: IMediaRange | IMediaRange[], options?: IMediaObserverOptions): RangeMediaObserver;
+    /**
+     * Returns a media observer tracking a feature that evaluates to a boolean value.
+     * @param feature The name of a media feature that can be expressed as a boolean.
+     * @param options An options object with the following properties:
+     * - `name`: The name to track the observer by. The feature name plus '-bool' is used if unsupplied.
+     * - `track`: Whether to make the observer available globally.
+     * @returns A `BooleanMediaObserver` tracking the given feature.
+     */
+    static observeBoolean(feature: BooleanMediaFeature, options?: IMediaObserverOptions): BooleanMediaObserver;
+    /** Returns a media observer tracking any media query. */
+    /**
+     * Returns a media observer tracking any media query.
+     * @param query Any media query.
+     * @param options An options object with the following properties:
+     * - `name`: The name to track the observer by. The entire query string is used if unsupplied.
+     * - `track`: Whether to make the observer available globally.
+     * @returns A `CustomMediaObserver` tracking the given query.
+     */
+    static observeCustom(query: string, options?: IMediaObserverOptions): CustomMediaObserver;
+    private static _getObserver;
+    /**
+     * INSTANCE MEMBERS
+     */
+    private _name;
+    get name(): string;
+    private _queries;
+    protected constructor(name: string, namedQueries: NamedMediaQuery[], value: T, track?: boolean);
+    /** Removes the `MediaObserver` and all created event listeners. */
+    destroy(): void;
+    private _attachMediaQueries;
+    protected abstract setValue(value: MediaQueryList | MediaQueryListEvent, name: string): void;
+}
+/**
+ * A media observer that tracks one feature with multiple discrete keyword values.
+ */
+export declare class DiscreteMediaObserver extends MediaObserver<string> {
+    static create(feature: DiscreteMediaFeature, options?: IMediaObserverOptions): DiscreteMediaObserver;
+    protected setValue(value: MediaQueryList | MediaQueryListEvent, name: string): void;
+}
+/**
+ * A media observer that tracks one feature with comparable range values.
+ */
+export declare class RangeMediaObserver extends MediaObserver<string[]> {
+    static create(feature: RangeMediaFeature, constraints: IMediaRange[], options?: IMediaObserverOptions): RangeMediaObserver;
+    private _isAwaitingQueries;
+    private _valueQueue;
+    private _isInitialized;
+    private constructor();
+    protected setValue(value: MediaQueryList | MediaQueryListEvent, name: string): void;
+}
+/**
+ * A media observer that tracks one feature that can be coerced to a boolean value. `none` and 0
+ * values evaluate to `true`.
+ */
+export declare class BooleanMediaObserver extends MediaObserver<boolean> {
+    static create(feature: BooleanMediaFeature, options?: IMediaObserverOptions): BooleanMediaObserver;
+    protected setValue(value: MediaQueryList | MediaQueryListEvent, _: never): void;
+}
+/**
+ * A media observer that tracks any query.
+ */
+export declare class CustomMediaObserver extends MediaObserver<MediaQueryList | MediaQueryListEvent> {
+    static create(query: string, options?: IMediaObserverOptions): CustomMediaObserver;
+    protected setValue(value: MediaQueryList | MediaQueryListEvent, _: never): void;
+}

package/typings/media-observer/types.d.ts

@@ -0,0 +1,82 @@
+export declare const DISCRETE_MEDIA_FEATURES: readonly ["any-hover", "any-pointer", "color-gamut", "display-mode", "dynamic-range", "forced-colors", "grid", "hover", "inverted-colors", "orientation", "overflow-block", "overflow-inline", "pointer", "prefers-contrast", "prefers-color-scheme", "prefers-reduced-motion", "scripting", "update", "video-dynamic-range"];
+export declare const RANGE_MEDIA_FEATURES: readonly ["aspect-ratio", "color", "color-index", "height", "monochrome", "resolution", "width"];
+export declare const ALL_MEDIA_FEATURES: ("height" | "width" | "color" | "grid" | "update" | "orientation" | "any-hover" | "any-pointer" | "color-gamut" | "display-mode" | "dynamic-range" | "forced-colors" | "hover" | "inverted-colors" | "overflow-block" | "overflow-inline" | "pointer" | "prefers-contrast" | "prefers-color-scheme" | "prefers-reduced-motion" | "scripting" | "video-dynamic-range" | "aspect-ratio" | "color-index" | "monochrome" | "resolution")[];
+export declare const BOOLEAN_MEDIA_FEATURES: readonly ["any-hover", "any-pointer", "color", "color-index", "forced-colors", "grid", "height", "hover", "inverted-colors", "monochrome", "overflow-block", "overflow-inline", "pointer", "scripting", "update", "width"];
+export declare type DiscreteMediaFeature = typeof DISCRETE_MEDIA_FEATURES[number];
+export declare type RangeMediaFeature = typeof RANGE_MEDIA_FEATURES[number];
+export declare type MediaFeature = DiscreteMediaFeature | RangeMediaFeature;
+export declare type BooleanMediaFeature = typeof BOOLEAN_MEDIA_FEATURES[number];
+export declare const colorGamutValues: readonly ["srbg", "p3", "rec2020"];
+export declare const displayModeValues: readonly ["fullscreen", "standalone", "minimal-ui", "browser", "window-controls-overlay"];
+export declare const dynamicRangeValues: readonly ["standard", "high"];
+export declare const forcedColorsValues: readonly ["none", "active"];
+export declare const gridValues: readonly [0, 1];
+export declare const hoverValues: readonly ["none", "hover"];
+export declare const invertedColorsValues: readonly ["none", "inverted"];
+export declare const orientationValues: readonly ["portrait", "landscape"];
+export declare const overflowBlockValues: readonly ["none", "scroll", "optional-paged", "paged"];
+export declare const overflowInlineValues: readonly ["none", "scroll"];
+export declare const pointerValues: readonly ["none", "coarse", "fine"];
+export declare const prefersContrastValues: readonly ["no-preference", "more", "less", "custom"];
+export declare const prefersColorSchemeValues: readonly ["light", "dark"];
+export declare const prefersReducedMotionValues: readonly ["no-preference", "reduce"];
+export declare const scriptingValues: readonly ["none", "initial-only", "enabled"];
+export declare const updateValues: readonly ["none", "slow", "fast"];
+export declare const videoDynamicRangeValues: readonly ["standard", "high"];
+export declare type ColorGamutValue = typeof colorGamutValues[number];
+export declare type DisplayModeValue = typeof displayModeValues[number];
+export declare type DynamicRangeValue = typeof dynamicRangeValues[number];
+export declare type ForcedColorsValue = typeof forcedColorsValues[number];
+export declare type GridValue = typeof gridValues[number];
+export declare type HoverValue = typeof hoverValues[number];
+export declare type InvertedColorsValue = typeof invertedColorsValues[number];
+export declare type OrientationValue = typeof orientationValues[number];
+export declare type OverflowBlockValue = typeof overflowBlockValues[number];
+export declare type OverflowInlineValue = typeof overflowInlineValues[number];
+export declare type PointerValue = typeof pointerValues[number];
+export declare type PrefersContrastValue = typeof prefersContrastValues[number];
+export declare type PrefersColorSchemeValue = typeof prefersColorSchemeValues[number];
+export declare type PrefersReducedMotionValue = typeof prefersReducedMotionValues[number];
+export declare type ScriptingValue = typeof scriptingValues[number];
+export declare type UpdateValue = typeof updateValues[number];
+export declare type VideoDynamicRangeValue = typeof videoDynamicRangeValues[number];
+export declare type NamedMediaQuery = {
+    name: string;
+    query: string;
+};
+export declare type ManagedMediaQuery = {
+    queryList: MediaQueryList;
+    handler: MediaQueryHandler;
+};
+export declare type MediaQueryHandler = (event: MediaQueryList | MediaQueryListEvent) => void;
+export declare const mediaFeatureValues: {
+    'any-hover': ("none" | "hover")[];
+    'any-pointer': ("none" | "coarse" | "fine")[];
+    'color-gamut': ("p3" | "rec2020" | "srbg")[];
+    'display-mode': ("browser" | "fullscreen" | "standalone" | "minimal-ui" | "window-controls-overlay")[];
+    'dynamic-range': ("high" | "standard")[];
+    'forced-colors': ("none" | "active")[];
+    grid: (0 | 1)[];
+    hover: ("none" | "hover")[];
+    'inverted-colors': ("none" | "inverted")[];
+    orientation: ("landscape" | "portrait")[];
+    'overflow-block': ("none" | "scroll" | "optional-paged" | "paged")[];
+    'overflow-inline': ("none" | "scroll")[];
+    pointer: ("none" | "coarse" | "fine")[];
+    'prefers-contrast': ("custom" | "no-preference" | "more" | "less")[];
+    'prefers-color-scheme': ("light" | "dark")[];
+    'prefers-reduced-motion': ("reduce" | "no-preference")[];
+    scripting: ("none" | "initial-only" | "enabled")[];
+    update: ("none" | "slow" | "fast")[];
+    'video-dynamic-range': ("high" | "standard")[];
+};
+export interface IMediaObserverOptions {
+    name?: string;
+    track?: boolean;
+}
+export interface IMediaRange {
+    name: string;
+    min?: string | number;
+    max?: string | number;
+    equals?: string | number;
+}

package/typings/observable/index.d.ts

@@ -0,0 +1,2 @@
+export * from './observable';
+export * from './types';

package/typings/observable/observable.d.ts

@@ -0,0 +1,18 @@
+import { Observer } from './types';
+export declare class Subject<T> {
+    protected source: T;
+    protected subscribers: Subscription<T>[];
+    get value(): T;
+    constructor(value: T);
+    subscribe(observer?: Observer<T>): Subscription<T>;
+    protected next(value: T): void;
+    protected complete(): void;
+}
+export declare class Subscription<T> {
+    readonly observer?: Observer<T>;
+    private _parent;
+    private _closed;
+    get closed(): boolean;
+    constructor(parent: Subscription<T>[], observer?: Observer<T>);
+    unsubscribe(): void;
+}

package/typings/observable/types.d.ts

@@ -0,0 +1 @@
+export declare type Observer<T> = (value: T) => void;

package/typings/resize/index.d.ts

@@ -0,0 +1,2 @@
+export * from './resize-observer';
+export * from './resize-types';

package/typings/resize/resize-observer.d.ts

@@ -0,0 +1,34 @@
+import { ForgeResizeObserverCallback, IResizeObserverOptions } from './resize-types';
+/**
+ * Provides a set of methods for observing and responding to resizing of elements.
+ */
+export declare abstract class ForgeResizeObserver {
+    private static _observer?;
+    private static _targets;
+    /**
+     * Initiates the observing of a specified `Element`. Calling with an already observed `Element`
+     * overwrites the exisiting observation. It is expected that the consumer will eventually
+     * {@link unobserve} the `Element` to avoid memory leaks.
+     *
+     * @param target An `Element` reference.
+     * @param callback A function that accepts a `ResizeObserverEntry` for the `Element`.
+     * @param options An options object allowing you to set options for the observation.
+     */
+    static observe(target: Element, callback: ForgeResizeObserverCallback, options?: IResizeObserverOptions): void;
+    /**
+     * Ends the observing of a specified `Element`.
+     *
+     * @param target An `Element` reference.
+     */
+    static unobserve(target: Element): void;
+    /**
+     * Creates or destroys the `ResizeObserver` based on whether targets exist.
+     */
+    private static _countTargets;
+    /**
+     * Runs the callback function of targets when they are resized.
+     *
+     * @param entries An array of `ResizeObserverEntry`s.
+     */
+    private static _handleResize;
+}

package/typings/resize/resize-types.d.ts

@@ -0,0 +1,4 @@
+export declare type ForgeResizeObserverCallback = (entry: ResizeObserverEntry) => unknown;
+export interface IResizeObserverOptions {
+    box: 'content-box' | 'border-box' | 'device-pixel-content-box';
+}