@ni/fast-foundation 0.0.2

package/dist/esm/design-system/design-system.js

@@ -0,0 +1,207 @@
+import { FASTElementDefinition } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { DI, Registration } from "../di/di.js";
+import { DesignToken } from "../design-token/design-token.js";
+import { ComponentPresentation } from "./component-presentation.js";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/**
+ * Indicates what to do with an ambiguous (duplicate) element.
+ * @public
+ */
+export const ElementDisambiguation = Object.freeze({
+    /**
+     * Skip defining the element but still call the provided callback passed
+     * to DesignSystemRegistrationContext.tryDefineElement
+     */
+    definitionCallbackOnly: null,
+    /**
+     * Ignore the duplicate element entirely.
+     */
+    ignoreDuplicate: Symbol(),
+});
+const elementTypesByTag = new Map();
+const elementTagsByType = new Map();
+let rootDesignSystem = null;
+const designSystemKey = DI.createInterface(x => x.cachedCallback(handler => {
+    if (rootDesignSystem === null) {
+        rootDesignSystem = new DefaultDesignSystem(null, handler);
+    }
+    return rootDesignSystem;
+}));
+/**
+ * An API gateway to design system features.
+ * @public
+ */
+export const DesignSystem = Object.freeze({
+    /**
+     * Returns the HTML element name that the type is defined as.
+     * @param type - The type to lookup.
+     * @public
+     */
+    tagFor(type) {
+        return elementTagsByType.get(type);
+    },
+    /**
+     * Searches the DOM hierarchy for the design system that is responsible
+     * for the provided element.
+     * @param element - The element to locate the design system for.
+     * @returns The located design system.
+     * @public
+     */
+    responsibleFor(element) {
+        const owned = element.$$designSystem$$;
+        if (owned) {
+            return owned;
+        }
+        const container = DI.findResponsibleContainer(element);
+        return container.get(designSystemKey);
+    },
+    /**
+     * Gets the DesignSystem if one is explicitly defined on the provided element;
+     * otherwise creates a design system defined directly on the element.
+     * @param element - The element to get or create a design system for.
+     * @returns The design system.
+     * @public
+     */
+    getOrCreate(node) {
+        if (!node) {
+            if (rootDesignSystem === null) {
+                rootDesignSystem = DI.getOrCreateDOMContainer().get(designSystemKey);
+            }
+            return rootDesignSystem;
+        }
+        const owned = node.$$designSystem$$;
+        if (owned) {
+            return owned;
+        }
+        const container = DI.getOrCreateDOMContainer(node);
+        if (container.has(designSystemKey, false)) {
+            return container.get(designSystemKey);
+        }
+        else {
+            const system = new DefaultDesignSystem(node, container);
+            container.register(Registration.instance(designSystemKey, system));
+            return system;
+        }
+    },
+});
+function extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback) {
+    if (typeof params === "string") {
+        return {
+            name: params,
+            type: elementDefinitionType,
+            callback: elementDefinitionCallback,
+        };
+    }
+    else {
+        return params;
+    }
+}
+class DefaultDesignSystem {
+    constructor(owner, container) {
+        this.owner = owner;
+        this.container = container;
+        this.designTokensInitialized = false;
+        this.prefix = "fast";
+        this.shadowRootMode = undefined;
+        this.disambiguate = () => ElementDisambiguation.definitionCallbackOnly;
+        if (owner !== null) {
+            owner.$$designSystem$$ = this;
+        }
+    }
+    withPrefix(prefix) {
+        this.prefix = prefix;
+        return this;
+    }
+    withShadowRootMode(mode) {
+        this.shadowRootMode = mode;
+        return this;
+    }
+    withElementDisambiguation(callback) {
+        this.disambiguate = callback;
+        return this;
+    }
+    withDesignTokenRoot(root) {
+        this.designTokenRoot = root;
+        return this;
+    }
+    register(...registrations) {
+        const container = this.container;
+        const elementDefinitionEntries = [];
+        const disambiguate = this.disambiguate;
+        const shadowRootMode = this.shadowRootMode;
+        const context = {
+            elementPrefix: this.prefix,
+            tryDefineElement(params, elementDefinitionType, elementDefinitionCallback) {
+                const extractedParams = extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback);
+                const { name, callback, baseClass } = extractedParams;
+                let { type } = extractedParams;
+                let elementName = name;
+                let typeFoundByName = elementTypesByTag.get(elementName);
+                let needsDefine = true;
+                while (typeFoundByName) {
+                    const result = disambiguate(elementName, type, typeFoundByName);
+                    switch (result) {
+                        case ElementDisambiguation.ignoreDuplicate:
+                            return;
+                        case ElementDisambiguation.definitionCallbackOnly:
+                            needsDefine = false;
+                            typeFoundByName = void 0;
+                            break;
+                        default:
+                            elementName = result;
+                            typeFoundByName = elementTypesByTag.get(elementName);
+                            break;
+                    }
+                }
+                if (needsDefine) {
+                    if (elementTagsByType.has(type) || type === FoundationElement) {
+                        type = class extends type {
+                        };
+                    }
+                    elementTypesByTag.set(elementName, type);
+                    elementTagsByType.set(type, elementName);
+                    if (baseClass) {
+                        elementTagsByType.set(baseClass, elementName);
+                    }
+                }
+                elementDefinitionEntries.push(new ElementDefinitionEntry(container, elementName, type, shadowRootMode, callback, needsDefine));
+            },
+        };
+        if (!this.designTokensInitialized) {
+            this.designTokensInitialized = true;
+            if (this.designTokenRoot !== null) {
+                DesignToken.registerRoot(this.designTokenRoot);
+            }
+        }
+        container.registerWithContext(context, ...registrations);
+        for (const entry of elementDefinitionEntries) {
+            entry.callback(entry);
+            if (entry.willDefine && entry.definition !== null) {
+                entry.definition.define();
+            }
+        }
+        return this;
+    }
+}
+class ElementDefinitionEntry {
+    constructor(container, name, type, shadowRootMode, callback, willDefine) {
+        this.container = container;
+        this.name = name;
+        this.type = type;
+        this.shadowRootMode = shadowRootMode;
+        this.callback = callback;
+        this.willDefine = willDefine;
+        this.definition = null;
+    }
+    definePresentation(presentation) {
+        ComponentPresentation.define(this.name, presentation, this.container);
+    }
+    defineElement(definition) {
+        this.definition = new FASTElementDefinition(this.type, Object.assign(Object.assign({}, definition), { name: this.name }));
+    }
+    tagFor(type) {
+        return DesignSystem.tagFor(type);
+    }
+}
+/* eslint-enable @typescript-eslint/no-non-null-assertion */

package/dist/esm/design-system/index.js

@@ -0,0 +1,3 @@
+export * from "./design-system.js";
+export * from "./component-presentation.js";
+export * from "./registration-context.js";

package/dist/esm/design-system/registration-context.js

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

package/dist/esm/design-token/custom-property-manager.js

@@ -0,0 +1,216 @@
+import { __decorate } from "tslib";
+import { DOM, ElementStyles, FASTElement, observable, Observable, prependToAdoptedStyleSheetsSymbol, } from "@ni/fast-element";
+export const defaultElement = document.createElement("div");
+function isFastElement(element) {
+    return element instanceof FASTElement;
+}
+class QueuedStyleSheetTarget {
+    setProperty(name, value) {
+        DOM.queueUpdate(() => this.target.setProperty(name, value));
+    }
+    removeProperty(name) {
+        DOM.queueUpdate(() => this.target.removeProperty(name));
+    }
+}
+/**
+ * Handles setting properties for a FASTElement using Constructable Stylesheets
+ */
+class ConstructableStyleSheetTarget extends QueuedStyleSheetTarget {
+    constructor(source) {
+        super();
+        const sheet = new CSSStyleSheet();
+        sheet[prependToAdoptedStyleSheetsSymbol] = true;
+        this.target = sheet.cssRules[sheet.insertRule(":host{}")].style;
+        source.$fastController.addStyles(ElementStyles.create([sheet]));
+    }
+}
+class DocumentStyleSheetTarget extends QueuedStyleSheetTarget {
+    constructor() {
+        super();
+        const sheet = new CSSStyleSheet();
+        this.target = sheet.cssRules[sheet.insertRule(":root{}")].style;
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            sheet,
+        ];
+    }
+}
+class HeadStyleElementStyleSheetTarget extends QueuedStyleSheetTarget {
+    constructor() {
+        super();
+        this.style = document.createElement("style");
+        document.head.appendChild(this.style);
+        const { sheet } = this.style;
+        // Because the HTMLStyleElement has been appended,
+        // there shouldn't exist a case where `sheet` is null,
+        // but if-check it just in case.
+        if (sheet) {
+            // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
+            // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
+            const index = sheet.insertRule(":root{}", sheet.cssRules.length);
+            this.target = sheet.cssRules[index].style;
+        }
+    }
+}
+/**
+ * Handles setting properties for a FASTElement using an HTMLStyleElement
+ */
+class StyleElementStyleSheetTarget {
+    targetChanged() {
+        if (this.target !== null) {
+            for (const [key, value] of this.store.entries()) {
+                this.target.setProperty(key, value);
+            }
+        }
+    }
+    constructor(target) {
+        this.store = new Map();
+        this.target = null;
+        const controller = target.$fastController;
+        this.style = document.createElement("style");
+        controller.addStyles(this.style);
+        Observable.getNotifier(controller).subscribe(this, "isConnected");
+        this.handleChange(controller, "isConnected");
+    }
+    setProperty(name, value) {
+        this.store.set(name, value);
+        DOM.queueUpdate(() => {
+            if (this.target !== null) {
+                this.target.setProperty(name, value);
+            }
+        });
+    }
+    removeProperty(name) {
+        this.store.delete(name);
+        DOM.queueUpdate(() => {
+            if (this.target !== null) {
+                this.target.removeProperty(name);
+            }
+        });
+    }
+    handleChange(source, key) {
+        // HTMLStyleElement.sheet is null if the element isn't connected to the DOM,
+        // so this method reacts to changes in DOM connection for the element hosting
+        // the HTMLStyleElement.
+        //
+        // All rules applied via the CSSOM also get cleared when the element disconnects,
+        // so we need to add a new rule each time and populate it with the stored properties
+        const { sheet } = this.style;
+        if (sheet) {
+            // Safari will throw if we try to use the return result of insertRule()
+            // to index the rule inline, so store as a const prior to indexing.
+            // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
+            // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
+            const index = sheet.insertRule(":host{}", sheet.cssRules.length);
+            this.target = sheet.cssRules[index].style;
+        }
+        else {
+            this.target = null;
+        }
+    }
+}
+__decorate([
+    observable
+], StyleElementStyleSheetTarget.prototype, "target", void 0);
+/**
+ * Handles setting properties for a normal HTMLElement
+ */
+class ElementStyleSheetTarget {
+    constructor(source) {
+        this.target = source.style;
+    }
+    setProperty(name, value) {
+        DOM.queueUpdate(() => this.target.setProperty(name, value));
+    }
+    removeProperty(name) {
+        DOM.queueUpdate(() => this.target.removeProperty(name));
+    }
+}
+/**
+ * Controls emission for default values. This control is capable
+ * of emitting to multiple {@link PropertyTarget | PropertyTargets},
+ * and only emits if it has at least one root.
+ *
+ * @internal
+ */
+export class RootStyleSheetTarget {
+    setProperty(name, value) {
+        RootStyleSheetTarget.properties[name] = value;
+        for (const target of RootStyleSheetTarget.roots.values()) {
+            PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).setProperty(name, value);
+        }
+    }
+    removeProperty(name) {
+        delete RootStyleSheetTarget.properties[name];
+        for (const target of RootStyleSheetTarget.roots.values()) {
+            PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).removeProperty(name);
+        }
+    }
+    static registerRoot(root) {
+        const { roots } = RootStyleSheetTarget;
+        if (!roots.has(root)) {
+            roots.add(root);
+            const target = PropertyTargetManager.getOrCreate(this.normalizeRoot(root));
+            for (const key in RootStyleSheetTarget.properties) {
+                target.setProperty(key, RootStyleSheetTarget.properties[key]);
+            }
+        }
+    }
+    static unregisterRoot(root) {
+        const { roots } = RootStyleSheetTarget;
+        if (roots.has(root)) {
+            roots.delete(root);
+            const target = PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(root));
+            for (const key in RootStyleSheetTarget.properties) {
+                target.removeProperty(key);
+            }
+        }
+    }
+    /**
+     * Returns the document when provided the default element,
+     * otherwise is a no-op
+     * @param root - the root to normalize
+     */
+    static normalizeRoot(root) {
+        return root === defaultElement ? document : root;
+    }
+}
+RootStyleSheetTarget.roots = new Set();
+RootStyleSheetTarget.properties = {};
+// Caches PropertyTarget instances
+const propertyTargetCache = new WeakMap();
+// Use Constructable StyleSheets for FAST elements when supported, otherwise use
+// HTMLStyleElement instances
+const propertyTargetCtor = DOM.supportsAdoptedStyleSheets
+    ? ConstructableStyleSheetTarget
+    : StyleElementStyleSheetTarget;
+/**
+ * Manages creation and caching of PropertyTarget instances.
+ *
+ * @internal
+ */
+export const PropertyTargetManager = Object.freeze({
+    getOrCreate(source) {
+        if (propertyTargetCache.has(source)) {
+            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+            return propertyTargetCache.get(source);
+        }
+        let target;
+        if (source === defaultElement) {
+            target = new RootStyleSheetTarget();
+        }
+        else if (source instanceof Document) {
+            target = DOM.supportsAdoptedStyleSheets
+                ? new DocumentStyleSheetTarget()
+                : new HeadStyleElementStyleSheetTarget();
+        }
+        else if (isFastElement(source)) {
+            target = new propertyTargetCtor(source);
+        }
+        else {
+            target = new ElementStyleSheetTarget(source);
+        }
+        propertyTargetCache.set(source, target);
+        return target;
+    },
+});