@ni/fast-foundation 0.0.2

package/dist/esm/listbox-option/listbox-option.js

@@ -0,0 +1,200 @@
+import { __decorate } from "tslib";
+import { attr, observable, Observable } from "@ni/fast-element";
+import { isHTMLElement } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { ARIAGlobalStatesAndProperties } from "../patterns/aria-global.js";
+import { StartEnd } from "../patterns/start-end.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+/**
+ * Determines if the element is a {@link (ListboxOption:class)}
+ *
+ * @param element - the element to test.
+ * @public
+ */
+export function isListboxOption(el) {
+    return (isHTMLElement(el) &&
+        (el.getAttribute("role") === "option" ||
+            el instanceof HTMLOptionElement));
+}
+/**
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
+ * @public
+ */
+export class ListboxOption extends FoundationElement {
+    /**
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
+     */
+    checkedChanged(prev, next) {
+        if (typeof next === "boolean") {
+            this.ariaChecked = next ? "true" : "false";
+            return;
+        }
+        this.ariaChecked = null;
+    }
+    /**
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @internal
+     */
+    contentChanged(prev, next) {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.textContent = this.textContent;
+        }
+        this.$emit("contentchange", null, { bubbles: true });
+    }
+    defaultSelectedChanged() {
+        if (!this.dirtySelected) {
+            this.selected = this.defaultSelected;
+            if (this.proxy instanceof HTMLOptionElement) {
+                this.proxy.selected = this.defaultSelected;
+            }
+        }
+    }
+    disabledChanged(prev, next) {
+        this.ariaDisabled = this.disabled ? "true" : "false";
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.disabled = this.disabled;
+        }
+    }
+    selectedAttributeChanged() {
+        this.defaultSelected = this.selectedAttribute;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.defaultSelected = this.defaultSelected;
+        }
+    }
+    selectedChanged() {
+        this.ariaSelected = this.selected ? "true" : "false";
+        if (!this.dirtySelected) {
+            this.dirtySelected = true;
+        }
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.selected = this.selected;
+        }
+    }
+    initialValueChanged(previous, next) {
+        // If the value is clean and the component is connected to the DOM
+        // then set value equal to the attribute value.
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+    }
+    get label() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get text() {
+        var _a, _b;
+        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    set value(next) {
+        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+        this._value = newValue;
+        this.dirtyValue = true;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.value = newValue;
+        }
+        Observable.notify(this, "value");
+    }
+    get value() {
+        var _a;
+        Observable.track(this, "value");
+        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get form() {
+        return this.proxy ? this.proxy.form : null;
+    }
+    constructor(text, value, defaultSelected, selected) {
+        super();
+        /**
+         * The defaultSelected state of the option.
+         * @public
+         */
+        this.defaultSelected = false;
+        /**
+         * Tracks whether the "selected" property has been changed.
+         * @internal
+         */
+        this.dirtySelected = false;
+        /**
+         * The checked state of the control.
+         *
+         * @public
+         */
+        this.selected = this.defaultSelected;
+        /**
+         * Track whether the value has been changed from the initial value
+         */
+        this.dirtyValue = false;
+        if (text) {
+            this.textContent = text;
+        }
+        if (value) {
+            this.initialValue = value;
+        }
+        if (defaultSelected) {
+            this.defaultSelected = defaultSelected;
+        }
+        if (selected) {
+            this.selected = selected;
+        }
+        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+        this.proxy.disabled = this.disabled;
+    }
+}
+__decorate([
+    observable
+], ListboxOption.prototype, "checked", void 0);
+__decorate([
+    observable
+], ListboxOption.prototype, "content", void 0);
+__decorate([
+    observable
+], ListboxOption.prototype, "defaultSelected", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute", void 0);
+__decorate([
+    observable
+], ListboxOption.prototype, "selected", void 0);
+__decorate([
+    attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue", void 0);
+/**
+ * States and properties relating to the ARIA `option` role.
+ *
+ * @public
+ */
+export class DelegatesARIAListboxOption {
+}
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
+applyMixins(ListboxOption, StartEnd, DelegatesARIAListboxOption);

package/dist/esm/listbox-option/listbox-option.template.js

@@ -0,0 +1,25 @@
+import { html, slotted } from "@ni/fast-element";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
+ * @public
+ */
+export const listboxOptionTemplate = (context, definition) => html `
+    <template
+        aria-checked="${x => x.ariaChecked}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-posinset="${x => x.ariaPosInSet}"
+        aria-selected="${x => x.ariaSelected}"
+        aria-setsize="${x => x.ariaSetSize}"
+        class="${x => [x.checked && "checked", x.selected && "selected", x.disabled && "disabled"]
+    .filter(Boolean)
+    .join(" ")}"
+        role="option"
+    >
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
+            <slot ${slotted("content")}></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </template>
+`;

package/dist/esm/menu/index.js

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

package/dist/esm/menu/menu.js

@@ -0,0 +1,290 @@
+import { __decorate } from "tslib";
+import { DOM, observable } from "@ni/fast-element";
+import { isHTMLElement, keyArrowDown, keyArrowUp, keyEnd, keyHome, } from "@ni/fast-web-utilities";
+import { MenuItem, MenuItemRole, roleForMenuItem, } from "../menu-item/index.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @slot - The default slot for the menu items
+ *
+ * @public
+ */
+export class Menu extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.expandedItem = null;
+        /**
+         * The index of the focusable element in the items array
+         * defaults to -1
+         */
+        this.focusIndex = -1;
+        /**
+         * @internal
+         */
+        this.isNestedMenu = () => {
+            return (this.parentElement !== null &&
+                isHTMLElement(this.parentElement) &&
+                this.parentElement.getAttribute("role") === "menuitem");
+        };
+        /**
+         * if focus is moving out of the menu, reset to a stable initial state
+         * @internal
+         */
+        this.handleFocusOut = (e) => {
+            if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
+                this.collapseExpandedItem();
+                // find our first focusable element
+                const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
+                // set the current focus index's tabindex to -1
+                this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+                // set the first focusable element tabindex to 0
+                this.menuItems[focusIndex].setAttribute("tabindex", "0");
+                // set the focus index
+                this.focusIndex = focusIndex;
+            }
+        };
+        this.handleItemFocus = (e) => {
+            const targetItem = e.target;
+            if (this.menuItems !== undefined &&
+                targetItem !== this.menuItems[this.focusIndex]) {
+                this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+                this.focusIndex = this.menuItems.indexOf(targetItem);
+                targetItem.setAttribute("tabindex", "0");
+            }
+        };
+        this.handleExpandedChanged = (e) => {
+            if (e.defaultPrevented ||
+                e.target === null ||
+                this.menuItems === undefined ||
+                this.menuItems.indexOf(e.target) < 0) {
+                return;
+            }
+            e.preventDefault();
+            const changedItem = e.target;
+            // closing an expanded item without opening another
+            if (this.expandedItem !== null &&
+                changedItem === this.expandedItem &&
+                changedItem.expanded === false) {
+                this.expandedItem = null;
+                return;
+            }
+            if (changedItem.expanded) {
+                if (this.expandedItem !== null && this.expandedItem !== changedItem) {
+                    this.expandedItem.expanded = false;
+                }
+                this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+                this.expandedItem = changedItem;
+                this.focusIndex = this.menuItems.indexOf(changedItem);
+                changedItem.setAttribute("tabindex", "0");
+            }
+        };
+        this.removeItemListeners = () => {
+            if (this.menuItems !== undefined) {
+                this.menuItems.forEach((item) => {
+                    item.removeEventListener("expanded-change", this.handleExpandedChanged);
+                    item.removeEventListener("focus", this.handleItemFocus);
+                });
+            }
+        };
+        this.setItems = () => {
+            const newItems = this.domChildren();
+            this.removeItemListeners();
+            this.menuItems = newItems;
+            const menuItems = this.menuItems.filter(this.isMenuItemElement);
+            // if our focus index is not -1 we have items
+            if (menuItems.length) {
+                this.focusIndex = 0;
+            }
+            function elementIndent(el) {
+                const role = el.getAttribute("role");
+                const startSlot = el.querySelector("[slot=start]");
+                if (role !== MenuItemRole.menuitem && startSlot === null) {
+                    return 1;
+                }
+                else if (role === MenuItemRole.menuitem && startSlot !== null) {
+                    return 1;
+                }
+                else if (role !== MenuItemRole.menuitem && startSlot !== null) {
+                    return 2;
+                }
+                else {
+                    return 0;
+                }
+            }
+            const indent = menuItems.reduce((accum, current) => {
+                const elementValue = elementIndent(current);
+                return accum > elementValue ? accum : elementValue;
+            }, 0);
+            menuItems.forEach((item, index) => {
+                item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+                item.addEventListener("expanded-change", this.handleExpandedChanged);
+                item.addEventListener("focus", this.handleItemFocus);
+                if (item instanceof MenuItem || "startColumnCount" in item) {
+                    item.startColumnCount = indent;
+                }
+            });
+        };
+        /**
+         * handle change from child element
+         */
+        this.changeHandler = (e) => {
+            if (this.menuItems === undefined) {
+                return;
+            }
+            const changedMenuItem = e.target;
+            const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+            if (changeItemIndex === -1) {
+                return;
+            }
+            if (changedMenuItem.role === "menuitemradio" &&
+                changedMenuItem.checked === true) {
+                for (let i = changeItemIndex - 1; i >= 0; --i) {
+                    const item = this.menuItems[i];
+                    const role = item.getAttribute("role");
+                    if (role === MenuItemRole.menuitemradio) {
+                        item.checked = false;
+                    }
+                    if (role === "separator") {
+                        break;
+                    }
+                }
+                const maxIndex = this.menuItems.length - 1;
+                for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
+                    const item = this.menuItems[i];
+                    const role = item.getAttribute("role");
+                    if (role === MenuItemRole.menuitemradio) {
+                        item.checked = false;
+                    }
+                    if (role === "separator") {
+                        break;
+                    }
+                }
+            }
+        };
+        /**
+         * check if the item is a menu item
+         */
+        this.isMenuItemElement = (el) => {
+            return (isHTMLElement(el) &&
+                Menu.focusableElementRoles.hasOwnProperty(el.getAttribute("role")));
+        };
+        /**
+         * check if the item is focusable
+         */
+        this.isFocusableElement = (el) => {
+            return this.isMenuItemElement(el);
+        };
+    }
+    itemsChanged(oldValue, newValue) {
+        // only update children after the component is connected and
+        // the setItems has run on connectedCallback
+        // (menuItems is undefined until then)
+        if (this.$fastController.isConnected && this.menuItems !== undefined) {
+            this.setItems();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        DOM.queueUpdate(() => {
+            // wait until children have had a chance to
+            // connect before setting/checking their props/attributes
+            this.setItems();
+        });
+        this.addEventListener("change", this.changeHandler);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeItemListeners();
+        this.menuItems = undefined;
+        this.removeEventListener("change", this.changeHandler);
+    }
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus() {
+        this.setFocus(0, 1);
+    }
+    /**
+     * Collapses any expanded menu items.
+     *
+     * @public
+     */
+    collapseExpandedItem() {
+        if (this.expandedItem !== null) {
+            this.expandedItem.expanded = false;
+            this.expandedItem = null;
+        }
+    }
+    /**
+     * @internal
+     */
+    handleMenuKeyDown(e) {
+        if (e.defaultPrevented || this.menuItems === undefined) {
+            return;
+        }
+        switch (e.key) {
+            case keyArrowDown:
+                // go forward one index
+                this.setFocus(this.focusIndex + 1, 1);
+                return;
+            case keyArrowUp:
+                // go back one index
+                this.setFocus(this.focusIndex - 1, -1);
+                return;
+            case keyEnd:
+                // set focus on last item
+                this.setFocus(this.menuItems.length - 1, -1);
+                return;
+            case keyHome:
+                // set focus on first item
+                this.setFocus(0, 1);
+                return;
+            default:
+                // if we are not handling the event, do not prevent default
+                return true;
+        }
+    }
+    /**
+     * get an array of valid DOM children
+     */
+    domChildren() {
+        return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
+    }
+    setFocus(focusIndex, adjustment) {
+        if (this.menuItems === undefined) {
+            return;
+        }
+        while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
+            const child = this.menuItems[focusIndex];
+            if (this.isFocusableElement(child)) {
+                // change the previous index to -1
+                if (this.focusIndex > -1 &&
+                    this.menuItems.length >= this.focusIndex - 1) {
+                    this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+                }
+                // update the focus index
+                this.focusIndex = focusIndex;
+                // update the tabindex of next focusable element
+                child.setAttribute("tabindex", "0");
+                // focus the element
+                child.focus();
+                break;
+            }
+            focusIndex += adjustment;
+        }
+    }
+}
+Menu.focusableElementRoles = roleForMenuItem;
+__decorate([
+    observable
+], Menu.prototype, "items", void 0);

package/dist/esm/menu/menu.template.js

@@ -0,0 +1,15 @@
+import { html, slotted } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#Menu} component.
+ * @public
+ */
+export const menuTemplate = (context, definition) => html `
+    <template
+        slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0)}"
+        role="menu"
+        @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
+        @focusout="${(x, c) => x.handleFocusOut(c.event)}"
+    >
+        <slot ${slotted("items")}></slot>
+    </template>
+`;

package/dist/esm/menu-item/index.js

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