@ni/fast-foundation 0.0.2

package/dist/esm/switch/switch.js

@@ -0,0 +1,79 @@
+import { __decorate } from "tslib";
+import { attr, observable } from "@ni/fast-element";
+import { keyEnter, keySpace } from "@ni/fast-web-utilities";
+import { FormAssociatedSwitch } from "./switch.form-associated.js";
+/**
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
+ *
+ * @slot - The deafult slot for the label
+ * @slot checked-message - The message when in a checked state
+ * @slot unchecked-message - The message when in an unchecked state
+ * @csspart label - The label
+ * @csspart switch - The element representing the switch, which wraps the indicator
+ * @csspart status-message - The wrapper for the status messages
+ * @csspart checked-message - The checked message
+ * @csspart unchecked-message - The unchecked message
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export class Switch extends FormAssociatedSwitch {
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+        this.readOnly
+            ? this.classList.add("readonly")
+            : this.classList.remove("readonly");
+    }
+    constructor() {
+        super();
+        /**
+         * The element's value to be included in form submission when checked.
+         * Default to "on" to reach parity with input[type="checkbox"]
+         *
+         * @internal
+         */
+        this.initialValue = "on";
+        /**
+         * @internal
+         */
+        this.keypressHandler = (e) => {
+            if (this.readOnly) {
+                return;
+            }
+            switch (e.key) {
+                case keyEnter:
+                case keySpace:
+                    this.checked = !this.checked;
+                    break;
+            }
+        };
+        /**
+         * @internal
+         */
+        this.clickHandler = (e) => {
+            if (!this.disabled && !this.readOnly) {
+                this.checked = !this.checked;
+            }
+        };
+        this.proxy.setAttribute("type", "checkbox");
+    }
+    /**
+     * @internal
+     */
+    checkedChanged(prev, next) {
+        super.checkedChanged(prev, next);
+        /**
+         * @deprecated - this behavior already exists in the template and should not exist in the class.
+         */
+        this.checked ? this.classList.add("checked") : this.classList.remove("checked");
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], Switch.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Switch.prototype, "defaultSlottedNodes", void 0);

package/dist/esm/switch/switch.template.js

@@ -0,0 +1,37 @@
+import { html, slotted } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#(Switch:class)} component.
+ * @public
+ */
+export const switchTemplate = (context, definition) => html `
+    <template
+        role="switch"
+        aria-checked="${x => x.checked}"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        tabindex="${x => (x.disabled ? null : 0)}"
+        @keypress="${(x, c) => x.keypressHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        class="${x => (x.checked ? "checked" : "")}"
+    >
+        <label
+            part="label"
+            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
+    ? "label"
+    : "label label__hidden"}"
+        >
+            <slot ${slotted("defaultSlottedNodes")}></slot>
+        </label>
+        <div part="switch" class="switch">
+            <slot name="switch">${definition.switch || ""}</slot>
+        </div>
+        <span class="status-message" part="status-message">
+            <span class="checked-message" part="checked-message">
+                <slot name="checked-message"></slot>
+            </span>
+            <span class="unchecked-message" part="unchecked-message">
+                <slot name="unchecked-message"></slot>
+            </span>
+        </span>
+    </template>
+`;

package/dist/esm/tab/index.js

@@ -0,0 +1,2 @@
+export * from "./tab.template.js";
+export * from "./tab.js";

package/dist/esm/tab/tab.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { attr } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Tab Component to be used with {@link @ni/fast-foundation#(Tabs:class)}
+ *
+ * @slot - The default slot for the tab content
+ *
+ * @public
+ */
+export class Tab extends FoundationElement {
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Tab.prototype, "disabled", void 0);

package/dist/esm/tab/tab.template.js

@@ -0,0 +1,10 @@
+import { html } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#Tab} component.
+ * @public
+ */
+export const tabTemplate = (context, definition) => html `
+    <template slot="tab" role="tab" aria-disabled="${x => x.disabled}">
+        <slot></slot>
+    </template>
+`;

package/dist/esm/tab-panel/index.js

@@ -0,0 +1,2 @@
+export * from "./tab-panel.template.js";
+export * from "./tab-panel.js";

package/dist/esm/tab-panel/tab-panel.js

@@ -0,0 +1,10 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A TabPanel Component to be used with {@link @ni/fast-foundation#(Tabs:class)}
+ *
+ * @slot - The default slot for the tabpanel content
+ *
+ * @public
+ */
+export class TabPanel extends FoundationElement {
+}

package/dist/esm/tab-panel/tab-panel.template.js

@@ -0,0 +1,10 @@
+import { html } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#TabPanel} component.
+ * @public
+ */
+export const tabPanelTemplate = (context, definition) => html `
+    <template slot="tabpanel" role="tabpanel">
+        <slot></slot>
+    </template>
+`;

package/dist/esm/tabs/index.js

@@ -0,0 +1,2 @@
+export * from "./tabs.template.js";
+export * from "./tabs.js";

package/dist/esm/tabs/tabs.js

@@ -0,0 +1,375 @@
+import { __decorate } from "tslib";
+import { attr, observable } from "@ni/fast-element";
+import { keyArrowDown, keyArrowLeft, keyArrowRight, keyArrowUp, keyEnd, keyHome, limit, uniqueId, } from "@ni/fast-web-utilities";
+import { StartEnd } from "../patterns/start-end.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+import { FoundationElement, } from "../foundation-element/foundation-element.js";
+/**
+ * The orientation of the {@link @ni/fast-foundation#(Tabs:class)} component
+ * @public
+ */
+export const TabsOrientation = {
+    vertical: "vertical",
+    horizontal: "horizontal",
+};
+/**
+ * A Tabs Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#tablist | ARIA tablist }.
+ *
+ * @slot start - Content which can be provided before the tablist element
+ * @slot end - Content which can be provided after the tablist element
+ * @slot tab - The slot for tabs
+ * @slot tabpanel - The slot for tabpanels
+ * @csspart tablist - The element wrapping for the tabs
+ * @csspart tab - The tab slot
+ * @csspart activeIndicator - The visual indicator
+ * @csspart tabpanel - The tabpanel slot
+ * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
+ *
+ * @public
+ */
+export class Tabs extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The orientation
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = TabsOrientation.horizontal;
+        /**
+         * Whether or not to show the active indicator
+         * @public
+         * @remarks
+         * HTML Attribute: activeindicator
+         */
+        this.activeindicator = true;
+        /**
+         * @internal
+         */
+        this.showActiveIndicator = true;
+        this.prevActiveTabIndex = 0;
+        this.activeTabIndex = 0;
+        this.ticking = false;
+        this.change = () => {
+            this.$emit("change", this.activetab);
+        };
+        this.isDisabledElement = (el) => {
+            return el.getAttribute("aria-disabled") === "true";
+        };
+        this.isHiddenElement = (el) => {
+            return el.hasAttribute("hidden");
+        };
+        this.isFocusableElement = (el) => {
+            return !this.isDisabledElement(el) && !this.isHiddenElement(el);
+        };
+        this.setTabs = () => {
+            const gridHorizontalProperty = "gridColumn";
+            const gridVerticalProperty = "gridRow";
+            const gridProperty = this.isHorizontal()
+                ? gridHorizontalProperty
+                : gridVerticalProperty;
+            this.activeTabIndex = this.getActiveIndex();
+            this.showActiveIndicator = false;
+            this.tabs.forEach((tab, index) => {
+                if (tab.slot === "tab") {
+                    const isActiveTab = this.activeTabIndex === index && this.isFocusableElement(tab);
+                    if (this.activeindicator && this.isFocusableElement(tab)) {
+                        this.showActiveIndicator = true;
+                    }
+                    const tabId = this.tabIds[index];
+                    const tabpanelId = this.tabpanelIds[index];
+                    tab.setAttribute("id", tabId);
+                    tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
+                    tab.setAttribute("aria-controls", tabpanelId);
+                    tab.addEventListener("click", this.handleTabClick);
+                    tab.addEventListener("keydown", this.handleTabKeyDown);
+                    tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
+                    if (isActiveTab) {
+                        this.activetab = tab;
+                        this.activeid = tabId;
+                    }
+                }
+                // If the original property isn't emptied out,
+                // the next set will morph into a grid-area style setting that is not what we want
+                tab.style[gridHorizontalProperty] = "";
+                tab.style[gridVerticalProperty] = "";
+                tab.style[gridProperty] = `${index + 1}`;
+                !this.isHorizontal()
+                    ? tab.classList.add("vertical")
+                    : tab.classList.remove("vertical");
+            });
+        };
+        this.setTabPanels = () => {
+            this.tabpanels.forEach((tabpanel, index) => {
+                const tabId = this.tabIds[index];
+                const tabpanelId = this.tabpanelIds[index];
+                tabpanel.setAttribute("id", tabpanelId);
+                tabpanel.setAttribute("aria-labelledby", tabId);
+                this.activeTabIndex !== index
+                    ? tabpanel.setAttribute("hidden", "")
+                    : tabpanel.removeAttribute("hidden");
+            });
+        };
+        this.handleTabClick = (event) => {
+            const selectedTab = event.currentTarget;
+            if (selectedTab.nodeType === 1 && this.isFocusableElement(selectedTab)) {
+                this.prevActiveTabIndex = this.activeTabIndex;
+                this.activeTabIndex = this.tabs.indexOf(selectedTab);
+                this.setComponent();
+            }
+        };
+        this.handleTabKeyDown = (event) => {
+            if (this.isHorizontal()) {
+                switch (event.key) {
+                    case keyArrowLeft:
+                        event.preventDefault();
+                        this.adjustBackward(event);
+                        break;
+                    case keyArrowRight:
+                        event.preventDefault();
+                        this.adjustForward(event);
+                        break;
+                }
+            }
+            else {
+                switch (event.key) {
+                    case keyArrowUp:
+                        event.preventDefault();
+                        this.adjustBackward(event);
+                        break;
+                    case keyArrowDown:
+                        event.preventDefault();
+                        this.adjustForward(event);
+                        break;
+                }
+            }
+            switch (event.key) {
+                case keyHome:
+                    event.preventDefault();
+                    this.adjust(-this.activeTabIndex);
+                    break;
+                case keyEnd:
+                    event.preventDefault();
+                    this.adjust(this.tabs.length - this.activeTabIndex - 1);
+                    break;
+            }
+        };
+        this.adjustForward = (e) => {
+            const group = this.tabs;
+            let index = 0;
+            index = this.activetab ? group.indexOf(this.activetab) + 1 : 1;
+            if (index === group.length) {
+                index = 0;
+            }
+            while (index < group.length && group.length > 1) {
+                if (this.isFocusableElement(group[index])) {
+                    this.moveToTabByIndex(group, index);
+                    break;
+                }
+                else if (this.activetab && index === group.indexOf(this.activetab)) {
+                    break;
+                }
+                else if (index + 1 >= group.length) {
+                    index = 0;
+                }
+                else {
+                    index += 1;
+                }
+            }
+        };
+        this.adjustBackward = (e) => {
+            const group = this.tabs;
+            let index = 0;
+            index = this.activetab ? group.indexOf(this.activetab) - 1 : 0;
+            index = index < 0 ? group.length - 1 : index;
+            while (index >= 0 && group.length > 1) {
+                if (this.isFocusableElement(group[index])) {
+                    this.moveToTabByIndex(group, index);
+                    break;
+                }
+                else if (index - 1 < 0) {
+                    index = group.length - 1;
+                }
+                else {
+                    index -= 1;
+                }
+            }
+        };
+        this.moveToTabByIndex = (group, index) => {
+            const tab = group[index];
+            this.activetab = tab;
+            this.prevActiveTabIndex = this.activeTabIndex;
+            this.activeTabIndex = index;
+            tab.focus();
+            this.setComponent();
+        };
+    }
+    /**
+     * @internal
+     */
+    orientationChanged() {
+        if (this.$fastController.isConnected) {
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue, newValue) {
+        if (this.$fastController.isConnected &&
+            this.tabs.length <= this.tabpanels.length) {
+            this.prevActiveTabIndex = this.tabs.findIndex((item) => item.id === oldValue);
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    /**
+     * @internal
+     */
+    tabsChanged() {
+        if (this.$fastController.isConnected &&
+            this.tabs.length <= this.tabpanels.length) {
+            this.tabIds = this.getTabIds();
+            this.tabpanelIds = this.getTabPanelIds();
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    /**
+     * @internal
+     */
+    tabpanelsChanged() {
+        if (this.$fastController.isConnected &&
+            this.tabpanels.length <= this.tabs.length) {
+            this.tabIds = this.getTabIds();
+            this.tabpanelIds = this.getTabPanelIds();
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    getActiveIndex() {
+        const id = this.activeid;
+        if (id !== undefined) {
+            return this.tabIds.indexOf(this.activeid) === -1
+                ? 0
+                : this.tabIds.indexOf(this.activeid);
+        }
+        else {
+            return 0;
+        }
+    }
+    getTabIds() {
+        return this.tabs.map((tab) => {
+            var _a;
+            return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${uniqueId()}`;
+        });
+    }
+    getTabPanelIds() {
+        return this.tabpanels.map((tabPanel) => {
+            var _a;
+            return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId()}`;
+        });
+    }
+    setComponent() {
+        if (this.activeTabIndex !== this.prevActiveTabIndex) {
+            this.activeid = this.tabIds[this.activeTabIndex];
+            this.focusTab();
+            this.change();
+        }
+    }
+    isHorizontal() {
+        return this.orientation === TabsOrientation.horizontal;
+    }
+    handleActiveIndicatorPosition() {
+        // Ignore if we click twice on the same tab
+        if (this.showActiveIndicator &&
+            this.activeindicator &&
+            this.activeTabIndex !== this.prevActiveTabIndex) {
+            if (this.ticking) {
+                this.ticking = false;
+            }
+            else {
+                this.ticking = true;
+                this.animateActiveIndicator();
+            }
+        }
+    }
+    animateActiveIndicator() {
+        this.ticking = true;
+        const gridProperty = this.isHorizontal() ? "gridColumn" : "gridRow";
+        const translateProperty = this.isHorizontal()
+            ? "translateX"
+            : "translateY";
+        const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
+        const prev = this.activeIndicatorRef[offsetProperty];
+        this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
+        const next = this.activeIndicatorRef[offsetProperty];
+        this.activeIndicatorRef.style[gridProperty] = `${this.prevActiveTabIndex + 1}`;
+        const dif = next - prev;
+        this.activeIndicatorRef.style.transform = `${translateProperty}(${dif}px)`;
+        this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+        this.activeIndicatorRef.addEventListener("transitionend", () => {
+            this.ticking = false;
+            this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
+            this.activeIndicatorRef.style.transform = `${translateProperty}(0px)`;
+            this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+        });
+    }
+    /**
+     * The adjust method for FASTTabs
+     * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
+     */
+    adjust(adjustment) {
+        const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
+        const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
+        const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+        // the index of the next focusable tab within the context of all available tabs
+        const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
+        if (nextIndex > -1) {
+            this.moveToTabByIndex(this.tabs, nextIndex);
+        }
+    }
+    focusTab() {
+        this.tabs[this.activeTabIndex].focus();
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIds = this.getTabIds();
+        this.tabpanelIds = this.getTabPanelIds();
+        this.activeTabIndex = this.getActiveIndex();
+    }
+}
+__decorate([
+    attr
+], Tabs.prototype, "orientation", void 0);
+__decorate([
+    attr
+], Tabs.prototype, "activeid", void 0);
+__decorate([
+    observable
+], Tabs.prototype, "tabs", void 0);
+__decorate([
+    observable
+], Tabs.prototype, "tabpanels", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Tabs.prototype, "activeindicator", void 0);
+__decorate([
+    observable
+], Tabs.prototype, "activeIndicatorRef", void 0);
+__decorate([
+    observable
+], Tabs.prototype, "showActiveIndicator", void 0);
+applyMixins(Tabs, StartEnd);

package/dist/esm/tabs/tabs.template.js

@@ -0,0 +1,26 @@
+import { html, ref, slotted, when } from "@ni/fast-element";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(Tabs:class)} component.
+ * @public
+ */
+export const tabsTemplate = (context, definition) => html `
+    <template class="${x => x.orientation}">
+        ${startSlotTemplate(context, definition)}
+        <div class="tablist" part="tablist" role="tablist">
+            <slot class="tab" name="tab" part="tab" ${slotted("tabs")}></slot>
+
+            ${when(x => x.showActiveIndicator, html `
+                    <div
+                        ${ref("activeIndicatorRef")}
+                        class="activeIndicator"
+                        part="activeIndicator"
+                    ></div>
+                `)}
+        </div>
+        ${endSlotTemplate(context, definition)}
+        <div class="tabpanel" part="tabpanel">
+            <slot name="tabpanel" ${slotted("tabpanels")}></slot>
+        </div>
+    </template>
+`;

package/dist/esm/test-utilities/fixture.js

@@ -0,0 +1,90 @@
+import { __awaiter } from "tslib";
+import { defaultExecutionContext, ViewTemplate, } from "@ni/fast-element";
+import { DesignSystem } from "../design-system/index.js";
+function findElement(view) {
+    let current = view.firstChild;
+    while (current !== null && current.nodeType !== 1) {
+        current = current.nextSibling;
+    }
+    return current;
+}
+/**
+ * Creates a random, unique name suitable for use as a Custom Element name.
+ */
+export function uniqueElementName() {
+    return `fast-unique-${Math.random().toString(36).substring(7)}`;
+}
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function isElementRegistry(obj) {
+    return typeof obj.register === "function";
+}
+/**
+ * Creates a test fixture suitable for testing custom elements, templates, and bindings.
+ * @param templateNameOrRegistry An HTML template or single element name to create the fixture for.
+ * @param options Enables customizing fixture creation behavior.
+ * @remarks
+ * Yields control to the caller one Microtask later, in order to
+ * ensure that the DOM has settled.
+ */
+export function fixture(templateNameOrRegistry, options = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const document = options.document || globalThis.document;
+        const parent = options.parent || document.createElement("div");
+        const source = options.source || {};
+        const context = options.context || defaultExecutionContext;
+        if (typeof templateNameOrRegistry === "string") {
+            const html = `<${templateNameOrRegistry}></${templateNameOrRegistry}>`;
+            templateNameOrRegistry = new ViewTemplate(html, []);
+        }
+        else if (isElementRegistry(templateNameOrRegistry)) {
+            templateNameOrRegistry = [templateNameOrRegistry];
+        }
+        if (Array.isArray(templateNameOrRegistry)) {
+            const first = templateNameOrRegistry[0];
+            const ds = options.designSystem || DesignSystem.getOrCreate(parent);
+            let prefix = "";
+            ds.register(templateNameOrRegistry, {
+                register(container, context) {
+                    prefix = context.elementPrefix;
+                },
+            });
+            const elementName = `${prefix}-${first.definition.baseName}`;
+            const html = `<${elementName}></${elementName}>`;
+            templateNameOrRegistry = new ViewTemplate(html, []);
+        }
+        const view = templateNameOrRegistry.create();
+        const element = findElement(view);
+        let isConnected = false;
+        view.bind(source, context);
+        view.appendTo(parent);
+        customElements.upgrade(parent);
+        // Hook into the Microtask Queue to ensure the DOM is settled
+        // before yielding control to the caller.
+        yield Promise.resolve();
+        const connect = () => __awaiter(this, void 0, void 0, function* () {
+            if (isConnected) {
+                return;
+            }
+            isConnected = true;
+            document.body.appendChild(parent);
+            yield Promise.resolve();
+        });
+        const disconnect = () => __awaiter(this, void 0, void 0, function* () {
+            if (!isConnected) {
+                return;
+            }
+            isConnected = false;
+            document.body.removeChild(parent);
+            yield Promise.resolve();
+        });
+        return {
+            document,
+            template: templateNameOrRegistry,
+            view,
+            parent,
+            element,
+            connect,
+            disconnect,
+        };
+    });
+}

package/dist/esm/test-utilities/timeout.js

@@ -0,0 +1,13 @@
+import { __awaiter } from "tslib";
+/**
+ * Timeout for use in async tets.
+ */
+export function timeout(timeout = 0) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            window.setTimeout(() => {
+                resolve(void 0);
+            }, timeout);
+        });
+    });
+}