@ni/fast-foundation 0.0.2

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

@@ -0,0 +1,251 @@
+import { __decorate } from "tslib";
+import { attr, DOM, observable } from "@ni/fast-element";
+import { Direction, keyArrowLeft, keyArrowRight, keyEnter, keySpace, } from "@ni/fast-web-utilities";
+import { FoundationElement, } from "../foundation-element/foundation-element.js";
+import { StartEnd } from "../patterns/start-end.js";
+import { getDirection } from "../utilities/direction.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+import { MenuItemRole, roleForMenuItem } from "./menu-item.options.js";
+export { MenuItemRole, roleForMenuItem };
+/**
+ * A Switch Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot radio-indicator - The radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot - The default slot for menu item content
+ * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart input-container - The element representing the visual checked or radio indicator
+ * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart content - The element wrapping the menu item content
+ * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
+ * @csspart expand-collapse - The expand/collapse element
+ * @csspart submenu-region - The container for the submenu, used for positioning
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
+ * @public
+ */
+export class MenuItem extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = MenuItemRole.menuitem;
+        /**
+         * @internal
+         */
+        this.hasSubmenu = false;
+        /**
+         * Track current direction to pass to the anchored region
+         *
+         * @internal
+         */
+        this.currentDirection = Direction.ltr;
+        this.focusSubmenuOnLoad = false;
+        /**
+         * @internal
+         */
+        this.handleMenuItemKeyDown = (e) => {
+            if (e.defaultPrevented) {
+                return false;
+            }
+            switch (e.key) {
+                case keyEnter:
+                case keySpace:
+                    this.invoke();
+                    return false;
+                case keyArrowRight:
+                    //open/focus on submenu
+                    this.expandAndFocus();
+                    return false;
+                case keyArrowLeft:
+                    //close submenu
+                    if (this.expanded) {
+                        this.expanded = false;
+                        this.focus();
+                        return false;
+                    }
+            }
+            return true;
+        };
+        /**
+         * @internal
+         */
+        this.handleMenuItemClick = (e) => {
+            if (e.defaultPrevented || this.disabled) {
+                return false;
+            }
+            this.invoke();
+            return false;
+        };
+        /**
+         * @internal
+         */
+        this.submenuLoaded = () => {
+            if (!this.focusSubmenuOnLoad) {
+                return;
+            }
+            this.focusSubmenuOnLoad = false;
+            if (this.hasSubmenu) {
+                this.submenu.focus();
+                this.setAttribute("tabindex", "-1");
+            }
+        };
+        /**
+         * @internal
+         */
+        this.handleMouseOver = (e) => {
+            if (this.disabled || !this.hasSubmenu || this.expanded) {
+                return false;
+            }
+            this.expanded = true;
+            return false;
+        };
+        /**
+         * @internal
+         */
+        this.handleMouseOut = (e) => {
+            if (!this.expanded || this.contains(document.activeElement)) {
+                return false;
+            }
+            this.expanded = false;
+            return false;
+        };
+        /**
+         * @internal
+         */
+        this.expandAndFocus = () => {
+            if (!this.hasSubmenu) {
+                return;
+            }
+            this.focusSubmenuOnLoad = true;
+            this.expanded = true;
+        };
+        /**
+         * @internal
+         */
+        this.invoke = () => {
+            if (this.disabled) {
+                return;
+            }
+            switch (this.role) {
+                case MenuItemRole.menuitemcheckbox:
+                    this.checked = !this.checked;
+                    break;
+                case MenuItemRole.menuitem:
+                    // update submenu
+                    this.updateSubmenu();
+                    if (this.hasSubmenu) {
+                        this.expandAndFocus();
+                    }
+                    else {
+                        this.$emit("change");
+                    }
+                    break;
+                case MenuItemRole.menuitemradio:
+                    if (!this.checked) {
+                        this.checked = true;
+                    }
+                    break;
+            }
+        };
+        /**
+         * Gets the submenu element if any
+         *
+         * @internal
+         */
+        this.updateSubmenu = () => {
+            this.submenu = this.domChildren().find((element) => {
+                return element.getAttribute("role") === "menu";
+            });
+            this.hasSubmenu = this.submenu === undefined ? false : true;
+        };
+    }
+    expandedChanged(oldValue) {
+        if (this.$fastController.isConnected) {
+            if (this.submenu === undefined) {
+                return;
+            }
+            if (this.expanded === false) {
+                this.submenu.collapseExpandedItem();
+            }
+            else {
+                this.currentDirection = getDirection(this);
+            }
+            this.$emit("expanded-change", this, { bubbles: false });
+        }
+    }
+    checkedChanged(oldValue, newValue) {
+        if (this.$fastController.isConnected) {
+            this.$emit("change");
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        DOM.queueUpdate(() => {
+            this.updateSubmenu();
+        });
+        if (!this.startColumnCount) {
+            this.startColumnCount = 1;
+        }
+        this.observer = new MutationObserver(this.updateSubmenu);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.submenu = undefined;
+        if (this.observer !== undefined) {
+            this.observer.disconnect();
+            this.observer = undefined;
+        }
+    }
+    /**
+     * get an array of valid DOM children
+     */
+    domChildren() {
+        return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], MenuItem.prototype, "disabled", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], MenuItem.prototype, "expanded", void 0);
+__decorate([
+    observable
+], MenuItem.prototype, "startColumnCount", void 0);
+__decorate([
+    attr
+], MenuItem.prototype, "role", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], MenuItem.prototype, "checked", void 0);
+__decorate([
+    observable
+], MenuItem.prototype, "submenuRegion", void 0);
+__decorate([
+    observable
+], MenuItem.prototype, "hasSubmenu", void 0);
+__decorate([
+    observable
+], MenuItem.prototype, "currentDirection", void 0);
+__decorate([
+    observable
+], MenuItem.prototype, "submenu", void 0);
+applyMixins(MenuItem, StartEnd);

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

@@ -0,0 +1,26 @@
+/**
+ * Menu items roles.
+ * @public
+ */
+export const MenuItemRole = {
+    /**
+     * The menu item has a "menuitem" role
+     */
+    menuitem: "menuitem",
+    /**
+     * The menu item has a "menuitemcheckbox" role
+     */
+    menuitemcheckbox: "menuitemcheckbox",
+    /**
+     * The menu item has a "menuitemradio" role
+     */
+    menuitemradio: "menuitemradio",
+};
+/**
+ * @internal
+ */
+export const roleForMenuItem = {
+    [MenuItemRole.menuitem]: "menuitem",
+    [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
+    [MenuItemRole.menuitemradio]: "menuitemradio",
+};

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

@@ -0,0 +1,78 @@
+import { html, ref, when } from "@ni/fast-element";
+import { AnchoredRegion } from "../anchored-region/anchored-region.js";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
+import { MenuItemRole } from "./menu-item.js";
+/**
+ * Generates a template for the {@link @ni/fast-foundation#(MenuItem:class)} component using
+ * the provided prefix.
+ *
+ * @public
+ */
+export const menuItemTemplate = (context, definition) => html `
+    <template
+        role="${x => x.role}"
+        aria-haspopup="${x => (x.hasSubmenu ? "menu" : void 0)}"
+        aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
+        aria-disabled="${x => x.disabled}"
+        aria-expanded="${x => x.expanded}"
+        @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
+        @click="${(x, c) => x.handleMenuItemClick(c.event)}"
+        @mouseover="${(x, c) => x.handleMouseOver(c.event)}"
+        @mouseout="${(x, c) => x.handleMouseOut(c.event)}"
+        class="${x => (x.disabled ? "disabled" : "")} ${x => x.expanded ? "expanded" : ""} ${x => `indent-${x.startColumnCount}`}"
+    >
+            ${when(x => x.role === MenuItemRole.menuitemcheckbox, html `
+                    <div part="input-container" class="input-container">
+                        <span part="checkbox" class="checkbox">
+                            <slot name="checkbox-indicator">
+                                ${definition.checkboxIndicator || ""}
+                            </slot>
+                        </span>
+                    </div>
+                `)}
+            ${when(x => x.role === MenuItemRole.menuitemradio, html `
+                    <div part="input-container" class="input-container">
+                        <span part="radio" class="radio">
+                            <slot name="radio-indicator">
+                                ${definition.radioIndicator || ""}
+                            </slot>
+                        </span>
+                    </div>
+                `)}
+        </div>
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
+            <slot></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+        ${when(x => x.hasSubmenu, html `
+                <div
+                    part="expand-collapse-glyph-container"
+                    class="expand-collapse-glyph-container"
+                >
+                    <span part="expand-collapse" class="expand-collapse">
+                        <slot name="expand-collapse-indicator">
+                            ${definition.expandCollapseGlyph || ""}
+                        </slot>
+                    </span>
+                </div>
+            `)}
+        ${when(x => x.expanded, html `
+                <${context.tagFor(AnchoredRegion)}
+                    :anchorElement="${x => x}"
+                    vertical-positioning-mode="dynamic"
+                    vertical-default-position="bottom"
+                    vertical-inset="true"
+                    horizontal-positioning-mode="dynamic"
+                    horizontal-default-position="end"
+                    class="submenu-region"
+                    dir="${x => x.currentDirection}"
+                    @loaded="${x => x.submenuLoaded()}"
+                    ${ref("submenuRegion")}
+                    part="submenu-region"
+                >
+                    <slot name="submenu"></slot>
+                </${context.tagFor(AnchoredRegion)}>
+            `)}
+    </template>
+`;

package/dist/esm/number-field/index.js

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

package/dist/esm/number-field/number-field.form-associated.js

@@ -0,0 +1,15 @@
+import { FormAssociated } from "../form-associated/form-associated.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+class _NumberField extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(NumberField:class)} component.
+ *
+ * @internal
+ */
+export class FormAssociatedNumberField extends FormAssociated(_NumberField) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}

package/dist/esm/number-field/number-field.js

@@ -0,0 +1,288 @@
+import { __decorate } from "tslib";
+import { attr, DOM, nullableNumberConverter, observable, } from "@ni/fast-element";
+import { keyArrowDown, keyArrowUp } from "@ni/fast-web-utilities";
+import { StartEnd } from "../patterns/start-end.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+import { DelegatesARIATextbox } from "../text-field/text-field.js";
+import { FormAssociatedNumberField } from "./number-field.form-associated.js";
+/**
+ * A Number Field Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number | <input type="number" /> element }.
+ *
+ * @slot start - Content which can be provided before the number field input
+ * @slot end - Content which can be provided after the number field input
+ * @slot - The default slot for the label
+ * @slot step-up-glyph - The glyph for the step up control
+ * @slot step-down-glyph - The glyph for the step down control
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control, including start and end slots
+ * @csspart control - The element representing the input
+ * @csspart controls - The step up and step down controls
+ * @csspart step-up - The step up control
+ * @csspart step-down - The step down control
+ * @fires input - Fires a custom 'input' event when the value has changed
+ * @fires change - Fires a custom 'change' event when the value has changed
+ *
+ * @public
+ */
+export class NumberField extends FormAssociatedNumberField {
+    constructor() {
+        super(...arguments);
+        /**
+         * When true, spin buttons will not be rendered
+         * @public
+         * @remarks
+         * HTML Attribute: autofocus
+         */
+        this.hideStep = false;
+        /**
+         * Amount to increment or decrement the value by
+         * @public
+         * @remarks
+         * HTMLAttribute: step
+         */
+        this.step = 1;
+        /**
+         * Flag to indicate that the value change is from the user input
+         * @internal
+         */
+        this.isUserInput = false;
+    }
+    /**
+     * Ensures that the max is greater than the min and that the value
+     *  is less than the max
+     * @param previous - the previous max value
+     * @param next - updated max value
+     *
+     * @internal
+     */
+    maxChanged(previous, next) {
+        var _a;
+        this.max = Math.max(next, (_a = this.min) !== null && _a !== void 0 ? _a : next);
+        const min = Math.min(this.min, this.max);
+        if (this.min !== undefined && this.min !== min) {
+            this.min = min;
+        }
+        this.value = this.getValidValue(this.value);
+    }
+    /**
+     * Ensures that the min is less than the max and that the value
+     *  is greater than the min
+     * @param previous - previous min value
+     * @param next - updated min value
+     *
+     * @internal
+     */
+    minChanged(previous, next) {
+        var _a;
+        this.min = Math.min(next, (_a = this.max) !== null && _a !== void 0 ? _a : next);
+        const max = Math.max(this.min, this.max);
+        if (this.max !== undefined && this.max !== max) {
+            this.max = max;
+        }
+        this.value = this.getValidValue(this.value);
+    }
+    /**
+     * The value property, typed as a number.
+     *
+     * @public
+     */
+    get valueAsNumber() {
+        return parseFloat(super.value);
+    }
+    set valueAsNumber(next) {
+        this.value = next.toString();
+    }
+    /**
+     * Validates that the value is a number between the min and max
+     * @param previous - previous stored value
+     * @param next - value being updated
+     * @param updateControl - should the text field be updated with value, defaults to true
+     * @internal
+     */
+    valueChanged(previous, next) {
+        this.value = this.getValidValue(next);
+        if (next !== this.value) {
+            return;
+        }
+        if (this.control && !this.isUserInput) {
+            this.control.value = this.value;
+        }
+        super.valueChanged(previous, this.value);
+        if (previous !== undefined && !this.isUserInput) {
+            this.$emit("input");
+            this.$emit("change");
+        }
+        this.isUserInput = false;
+    }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate() {
+        super.validate(this.control);
+    }
+    /**
+     * Sets the internal value to a valid number between the min and max properties
+     * @param value - user input
+     *
+     * @internal
+     */
+    getValidValue(value) {
+        var _a, _b;
+        let validValue = parseFloat(parseFloat(value).toPrecision(12));
+        if (isNaN(validValue)) {
+            validValue = "";
+        }
+        else {
+            validValue = Math.min(validValue, (_a = this.max) !== null && _a !== void 0 ? _a : validValue);
+            validValue = Math.max(validValue, (_b = this.min) !== null && _b !== void 0 ? _b : validValue).toString();
+        }
+        return validValue;
+    }
+    /**
+     * Increments the value using the step value
+     *
+     * @public
+     */
+    stepUp() {
+        const value = parseFloat(this.value);
+        const stepUpValue = !isNaN(value)
+            ? value + this.step
+            : this.min > 0
+                ? this.min
+                : this.max < 0
+                    ? this.max
+                    : !this.min
+                        ? this.step
+                        : 0;
+        this.value = stepUpValue.toString();
+    }
+    /**
+     * Decrements the value using the step value
+     *
+     * @public
+     */
+    stepDown() {
+        const value = parseFloat(this.value);
+        const stepDownValue = !isNaN(value)
+            ? value - this.step
+            : this.min > 0
+                ? this.min
+                : this.max < 0
+                    ? this.max
+                    : !this.min
+                        ? 0 - this.step
+                        : 0;
+        this.value = stepDownValue.toString();
+    }
+    /**
+     * Sets up the initial state of the number field
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.proxy.setAttribute("type", "number");
+        this.validate();
+        this.control.value = this.value;
+        if (this.autofocus) {
+            DOM.queueUpdate(() => {
+                this.focus();
+            });
+        }
+    }
+    /**
+     * Selects all the text in the number field
+     *
+     * @public
+     */
+    select() {
+        this.control.select();
+        /**
+         * The select event does not permeate the shadow DOM boundary.
+         * This fn effectively proxies the select event,
+         * emitting a `select` event whenever the internal
+         * control emits a `select` event
+         */
+        this.$emit("select");
+    }
+    /**
+     * Handles the internal control's `input` event
+     * @internal
+     */
+    handleTextInput() {
+        this.control.value = this.control.value.replace(/[^0-9\-+e.]/g, "");
+        this.isUserInput = true;
+        this.value = this.control.value;
+    }
+    /**
+     * Change event handler for inner control.
+     * @remarks
+     * "Change" events are not `composable` so they will not
+     * permeate the shadow DOM boundary. This fn effectively proxies
+     * the change event, emitting a `change` event whenever the internal
+     * control emits a `change` event
+     * @internal
+     */
+    handleChange() {
+        this.$emit("change");
+    }
+    /**
+     * Handles the internal control's `keydown` event
+     * @internal
+     */
+    handleKeyDown(e) {
+        const key = e.key;
+        switch (key) {
+            case keyArrowUp:
+                this.stepUp();
+                return false;
+            case keyArrowDown:
+                this.stepDown();
+                return false;
+        }
+        return true;
+    }
+    /**
+     * Handles populating the input field with a validated value when
+     *  leaving the input field.
+     * @internal
+     */
+    handleBlur() {
+        this.control.value = this.value;
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], NumberField.prototype, "readOnly", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], NumberField.prototype, "autofocus", void 0);
+__decorate([
+    attr({ attribute: "hide-step", mode: "boolean" })
+], NumberField.prototype, "hideStep", void 0);
+__decorate([
+    attr
+], NumberField.prototype, "placeholder", void 0);
+__decorate([
+    attr
+], NumberField.prototype, "list", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], NumberField.prototype, "maxlength", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], NumberField.prototype, "minlength", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], NumberField.prototype, "size", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], NumberField.prototype, "step", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], NumberField.prototype, "max", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], NumberField.prototype, "min", void 0);
+__decorate([
+    observable
+], NumberField.prototype, "defaultSlottedNodes", void 0);
+applyMixins(NumberField, StartEnd, DelegatesARIATextbox);