@ni/fast-foundation 0.0.2

package/dist/esm/utilities/match-media-stylesheet-behavior.js

@@ -0,0 +1,140 @@
+/**
+ * An abstract behavior to react to media queries. Implementations should implement
+ * the `constructListener` method to perform some action based on media query changes.
+ *
+ * @public
+ */
+export class MatchMediaBehavior {
+    /**
+     *
+     * @param query - The media query to operate from.
+     */
+    constructor(query) {
+        /**
+         * The behavior needs to operate on element instances but elements might share a behavior instance.
+         * To ensure proper attachment / detachment per instance, we construct a listener for
+         * each bind invocation and cache the listeners by element reference.
+         */
+        this.listenerCache = new WeakMap();
+        this.query = query;
+    }
+    /**
+     * Binds the behavior to the element.
+     * @param source - The element for which the behavior is bound.
+     */
+    bind(source) {
+        const { query } = this;
+        const listener = this.constructListener(source);
+        // Invoke immediately to add if the query currently matches
+        listener.bind(query)();
+        query.addListener(listener);
+        this.listenerCache.set(source, listener);
+    }
+    /**
+     * Unbinds the behavior from the element.
+     * @param source - The element for which the behavior is unbinding.
+     */
+    unbind(source) {
+        const listener = this.listenerCache.get(source);
+        if (listener) {
+            this.query.removeListener(listener);
+            this.listenerCache.delete(source);
+        }
+    }
+}
+/**
+ * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
+ * styles are applied while the a query matches the environment and that styles are not applied if the query does
+ * not match the environment.
+ *
+ * @public
+ */
+export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    /**
+     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+     * @param query - The media query to operate from.
+     * @param styles - The styles to coordinate with the query.
+     */
+    constructor(query, styles) {
+        super(query);
+        this.styles = styles;
+    }
+    /**
+     * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+     * a provided query.
+     * @param query - The media query to operate from.
+     *
+     * @public
+     * @example
+     *
+     * ```ts
+     * import { css } from "@ni/fast-element";
+     * import { MatchMediaStyleSheetBehavior } from "@ni/fast-foundation";
+     *
+     * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
+     *   window.matchMedia("(orientation: landscape)")
+     * );
+     * const styles = css`
+     *   :host {
+     *     width: 200px;
+     *     height: 400px;
+     *   }
+     * `
+     * .withBehaviors(landscapeBehavior(css`
+     *   :host {
+     *     width: 400px;
+     *     height: 200px;
+     *   }
+     * `))
+     * ```
+     */
+    static with(query) {
+        return (styles) => {
+            return new MatchMediaStyleSheetBehavior(query, styles);
+        };
+    }
+    /**
+     * Constructs a match-media listener for a provided element.
+     * @param source - the element for which to attach or detach styles.
+     * @internal
+     */
+    constructListener(source) {
+        let attached = false;
+        const styles = this.styles;
+        return function listener() {
+            const { matches } = this;
+            if (matches && !attached) {
+                source.$fastController.addStyles(styles);
+                attached = matches;
+            }
+            else if (!matches && attached) {
+                source.$fastController.removeStyles(styles);
+                attached = matches;
+            }
+        };
+    }
+    /**
+     * Unbinds the behavior from the element.
+     * @param source - The element for which the behavior is unbinding.
+     * @internal
+     */
+    unbind(source) {
+        super.unbind(source);
+        source.$fastController.removeStyles(this.styles);
+    }
+}
+/**
+ * This can be used to construct a behavior to apply a forced-colors only stylesheet.
+ * @public
+ */
+export const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(forced-colors)"));
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
+ * @public
+ */
+export const darkModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: dark)"));
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
+ * @public
+ */
+export const lightModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: light)"));

package/dist/esm/utilities/property-stylesheet-behavior.js

@@ -0,0 +1,52 @@
+import { Observable, } from "@ni/fast-element";
+/**
+ * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
+ * styles are applied while the property matches and that styles are not applied if the property does
+ * not match.
+ *
+ * @public
+ */
+export class PropertyStyleSheetBehavior {
+    /**
+     * Constructs a {@link PropertyStyleSheetBehavior} instance.
+     * @param propertyName - The property name to operate from.
+     * @param value - The property value to operate from.
+     * @param styles - The styles to coordinate with the property.
+     */
+    constructor(propertyName, value, styles) {
+        this.propertyName = propertyName;
+        this.value = value;
+        this.styles = styles;
+    }
+    /**
+     * Binds the behavior to the element.
+     * @param elementInstance - The element for which the property is applied.
+     */
+    bind(elementInstance) {
+        Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
+        this.handleChange(elementInstance, this.propertyName);
+    }
+    /**
+     * Unbinds the behavior from the element.
+     * @param source - The element for which the behavior is unbinding.
+     * @internal
+     */
+    unbind(source) {
+        Observable.getNotifier(source).unsubscribe(this, this.propertyName);
+        source.$fastController.removeStyles(this.styles);
+    }
+    /**
+     * Change event for the provided element.
+     * @param source - the element for which to attach or detach styles.
+     * @param key - the key to lookup to know if the element already has the styles
+     * @internal
+     */
+    handleChange(source, key) {
+        if (source[key] === this.value) {
+            source.$fastController.addStyles(this.styles);
+        }
+        else {
+            source.$fastController.removeStyles(this.styles);
+        }
+    }
+}

package/dist/esm/utilities/resize-observer.js

@@ -0,0 +1,5 @@
+// TODO: the Resize Observer related files are a temporary stopgap measure until
+// Resize Observer types are pulled into TypeScript, which seems imminent
+// At that point these files should be deleted.
+// https://github.com/microsoft/TypeScript/issues/37861
+export {};

package/dist/esm/utilities/root-active-element.js

@@ -0,0 +1,8 @@
+// returns the active element in the shadow context of the element in question.
+export function getRootActiveElement(element) {
+    const rootNode = element.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+        return rootNode.activeElement;
+    }
+    return document.activeElement;
+}

package/dist/esm/utilities/style/disabled.js

@@ -0,0 +1,5 @@
+/**
+ * The CSS value for disabled cursors.
+ * @public
+ */
+export const disabledCursor = "not-allowed";

package/dist/esm/utilities/style/display.js

@@ -0,0 +1,14 @@
+/**
+ * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
+ * @public
+ */
+export const hidden = `:host([hidden]){display:none}`;
+/**
+ * Applies a CSS display property.
+ * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
+ * @param display - The CSS display property value
+ * @public
+ */
+export function display(displayValue) {
+    return `${hidden}:host{display:${displayValue}}`;
+}

package/dist/esm/utilities/style/focus.js

@@ -0,0 +1,9 @@
+import { canUseFocusVisible } from "@ni/fast-web-utilities";
+/**
+ * The string representing the focus selector to be used. Value
+ * will be "focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+ * is supported and "focus" when it is not.
+ *
+ * @public
+ */
+export const focusVisible = canUseFocusVisible() ? "focus-visible" : "focus";

package/dist/esm/utilities/style/index.js

@@ -0,0 +1,3 @@
+export * from "./disabled.js";
+export * from "./display.js";
+export * from "./focus.js";

package/dist/esm/utilities/whitespace-filter.js

@@ -0,0 +1,13 @@
+/**
+ * a method to filter out any whitespace _only_ nodes, to be used inside a template
+ * @param value - The Node that is being inspected
+ * @param index - The index of the node within the array
+ * @param array - The Node array that is being filtered
+ *
+ * @public
+ */
+export function whitespaceFilter(value, index, array) {
+    return value.nodeType !== Node.TEXT_NODE
+        ? true
+        : typeof value.nodeValue === "string" && !!value.nodeValue.trim().length;
+}