@ni/fast-foundation 0.0.2

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

@@ -0,0 +1,84 @@
+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#(NumberField:class)} component.
+ * @public
+ */
+export const numberFieldTemplate = (context, definition) => html `
+    <template class="${x => (x.readOnly ? "readonly" : "")}">
+        <label
+            part="label"
+            for="control"
+            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
+    ? "label"
+    : "label label__hidden"}"
+        >
+            <slot ${slotted("defaultSlottedNodes")}></slot>
+        </label>
+        <div class="root" part="root">
+            ${startSlotTemplate(context, definition)}
+            <input
+                class="control"
+                part="control"
+                id="control"
+                @input="${x => x.handleTextInput()}"
+                @change="${x => x.handleChange()}"
+                @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+                @blur="${(x, c) => x.handleBlur()}"
+                ?autofocus="${x => x.autofocus}"
+                ?disabled="${x => x.disabled}"
+                list="${x => x.list}"
+                maxlength="${x => x.maxlength}"
+                minlength="${x => x.minlength}"
+                placeholder="${x => x.placeholder}"
+                ?readonly="${x => x.readOnly}"
+                ?required="${x => x.required}"
+                size="${x => x.size}"
+                type="text"
+                inputmode="numeric"
+                min="${x => x.min}"
+                max="${x => x.max}"
+                step="${x => x.step}"
+                aria-atomic="${x => x.ariaAtomic}"
+                aria-busy="${x => x.ariaBusy}"
+                aria-controls="${x => x.ariaControls}"
+                aria-current="${x => x.ariaCurrent}"
+                aria-describedby="${x => x.ariaDescribedby}"
+                aria-details="${x => x.ariaDetails}"
+                aria-disabled="${x => x.ariaDisabled}"
+                aria-errormessage="${x => x.ariaErrormessage}"
+                aria-flowto="${x => x.ariaFlowto}"
+                aria-haspopup="${x => x.ariaHaspopup}"
+                aria-hidden="${x => x.ariaHidden}"
+                aria-invalid="${x => x.ariaInvalid}"
+                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+                aria-label="${x => x.ariaLabel}"
+                aria-labelledby="${x => x.ariaLabelledby}"
+                aria-live="${x => x.ariaLive}"
+                aria-owns="${x => x.ariaOwns}"
+                aria-relevant="${x => x.ariaRelevant}"
+                aria-roledescription="${x => x.ariaRoledescription}"
+                ${ref("control")}
+            />
+            ${when(x => !x.hideStep && !x.readOnly && !x.disabled, html `
+                    <div class="controls" part="controls">
+                        <div class="step-up" part="step-up" @click="${x => x.stepUp()}">
+                            <slot name="step-up-glyph">
+                                ${definition.stepUpGlyph || ""}
+                            </slot>
+                        </div>
+                        <div
+                            class="step-down"
+                            part="step-down"
+                            @click="${x => x.stepDown()}"
+                        >
+                            <slot name="step-down-glyph">
+                                ${definition.stepDownGlyph || ""}
+                            </slot>
+                        </div>
+                    </div>
+                `)}
+            ${endSlotTemplate(context, definition)}
+        </div>
+    </template>
+`;

package/dist/esm/patterns/aria-global.js

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { attr } from "@ni/fast-element";
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+export class ARIAGlobalStatesAndProperties {
+}
+__decorate([
+    attr({ attribute: "aria-atomic" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
+__decorate([
+    attr({ attribute: "aria-busy" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
+__decorate([
+    attr({ attribute: "aria-controls" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
+__decorate([
+    attr({ attribute: "aria-current" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
+__decorate([
+    attr({ attribute: "aria-describedby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
+__decorate([
+    attr({ attribute: "aria-details" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
+__decorate([
+    attr({ attribute: "aria-disabled" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
+__decorate([
+    attr({ attribute: "aria-errormessage" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
+__decorate([
+    attr({ attribute: "aria-flowto" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
+__decorate([
+    attr({ attribute: "aria-haspopup" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
+__decorate([
+    attr({ attribute: "aria-hidden" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
+__decorate([
+    attr({ attribute: "aria-invalid" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
+__decorate([
+    attr({ attribute: "aria-keyshortcuts" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
+__decorate([
+    attr({ attribute: "aria-label" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
+__decorate([
+    attr({ attribute: "aria-labelledby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: "aria-live" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
+__decorate([
+    attr({ attribute: "aria-owns" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
+__decorate([
+    attr({ attribute: "aria-relevant" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
+__decorate([
+    attr({ attribute: "aria-roledescription" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);

package/dist/esm/patterns/index.js

@@ -0,0 +1,2 @@
+export * from "./aria-global.js";
+export * from "./start-end.js";

package/dist/esm/patterns/start-end.js

@@ -0,0 +1,84 @@
+import { html, ref } from "@ni/fast-element";
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+export class StartEnd {
+    handleStartContentChange() {
+        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
+    }
+    handleEndContentChange() {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export const endSlotTemplate = (context, definition) => html `
+    <span
+        part="end"
+        ${ref("endContainer")}
+        class=${x => (definition.end ? "end" : void 0)}
+    >
+        <slot name="end" ${ref("end")} @slotchange="${x => x.handleEndContentChange()}">
+            ${definition.end || ""}
+        </slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export const startSlotTemplate = (context, definition) => html `
+    <span
+        part="start"
+        ${ref("startContainer")}
+        class="${x => (definition.start ? "start" : void 0)}"
+    >
+        <slot
+            name="start"
+            ${ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        >
+            ${definition.start || ""}
+        </slot>
+    </span>
+`;
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+export const endTemplate = html `
+    <span part="end" ${ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref("end")}
+            @slotchange="${x => x.handleEndContentChange()}"
+        ></slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+export const startTemplate = html `
+    <span part="start" ${ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        ></slot>
+    </span>
+`;

package/dist/esm/picker/index.js

@@ -0,0 +1,10 @@
+export * from "./picker.template.js";
+export * from "./picker.js";
+export * from "./picker-menu.template.js";
+export * from "./picker-menu.js";
+export * from "./picker-menu-option.template.js";
+export * from "./picker-menu-option.js";
+export * from "./picker-list.template.js";
+export * from "./picker-list.js";
+export * from "./picker-list-item.template.js";
+export * from "./picker-list-item.js";

package/dist/esm/picker/picker-list-item.js

@@ -0,0 +1,71 @@
+import { __decorate } from "tslib";
+import { attr, html, observable } from "@ni/fast-element";
+import { keyEnter } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+const defaultContentsTemplate = html `
+    <template>
+        ${x => x.value}
+    </template>
+`;
+/**
+ * A picker list item Custom HTML Element.
+ *
+ * @alpha
+ */
+export class PickerListItem extends FoundationElement {
+    contentsTemplateChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateView();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateView();
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        this.disconnectView();
+        super.disconnectedCallback();
+    }
+    handleKeyDown(e) {
+        if (e.defaultPrevented) {
+            return false;
+        }
+        if (e.key === keyEnter) {
+            this.handleInvoke();
+            return false;
+        }
+        return true;
+    }
+    handleClick(e) {
+        if (!e.defaultPrevented) {
+            this.handleInvoke();
+        }
+        return false;
+    }
+    handleInvoke() {
+        this.$emit("pickeriteminvoked");
+    }
+    updateView() {
+        var _a, _b;
+        this.disconnectView();
+        this.customView =
+            (_b = (_a = this.contentsTemplate) === null || _a === void 0 ? void 0 : _a.render(this, this)) !== null && _b !== void 0 ? _b : defaultContentsTemplate.render(this, this);
+    }
+    disconnectView() {
+        var _a;
+        (_a = this.customView) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.customView = undefined;
+    }
+}
+__decorate([
+    attr({ attribute: "value" })
+], PickerListItem.prototype, "value", void 0);
+__decorate([
+    observable
+], PickerListItem.prototype, "contentsTemplate", void 0);

package/dist/esm/picker/picker-list-item.template.js

@@ -0,0 +1,17 @@
+import { html } from "@ni/fast-element";
+/**
+ *
+ * @public
+ */
+export const pickerListItemTemplate = (context, definition) => {
+    return html `
+        <template
+            role="listitem"
+            tabindex="0"
+            @click="${(x, c) => x.handleClick(c.event)}"
+            @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+        >
+            <slot></slot>
+        </template>
+    `;
+};

package/dist/esm/picker/picker-list.js

@@ -0,0 +1,8 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A List Picker Menu Custom HTML Element.
+ *
+ * @alpha
+ */
+export class PickerList extends FoundationElement {
+}

package/dist/esm/picker/picker-list.template.js

@@ -0,0 +1,13 @@
+import { html } from "@ni/fast-element";
+/**
+ *
+ * @public
+ */
+export const pickerListTemplate = (context, definition) => {
+    return html `
+        <template slot="list-region" role="list" class="picker-list">
+            <slot></slot>
+            <slot name="input-region"></slot>
+        </template>
+    `;
+};

package/dist/esm/picker/picker-menu-option.js

@@ -0,0 +1,61 @@
+import { __decorate } from "tslib";
+import { attr, html, observable } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+const defaultContentsTemplate = html `
+    <template>
+        ${x => x.value}
+    </template>
+`;
+/**
+ * A picker list item Custom HTML Element.
+ *
+ * @alpha
+ */
+export class PickerMenuOption extends FoundationElement {
+    contentsTemplateChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateView();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateView();
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.disconnectView();
+    }
+    handleClick(e) {
+        if (e.defaultPrevented) {
+            return false;
+        }
+        this.handleInvoked();
+        return false;
+    }
+    handleInvoked() {
+        this.$emit("pickeroptioninvoked");
+    }
+    updateView() {
+        var _a, _b;
+        this.disconnectView();
+        this.customView =
+            (_b = (_a = this.contentsTemplate) === null || _a === void 0 ? void 0 : _a.render(this, this)) !== null && _b !== void 0 ? _b : defaultContentsTemplate.render(this, this);
+    }
+    disconnectView() {
+        var _a;
+        (_a = this.customView) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.customView = undefined;
+    }
+}
+__decorate([
+    attr({ attribute: "value" })
+], PickerMenuOption.prototype, "value", void 0);
+__decorate([
+    observable
+], PickerMenuOption.prototype, "contentsTemplate", void 0);

package/dist/esm/picker/picker-menu-option.template.js

@@ -0,0 +1,16 @@
+import { html } from "@ni/fast-element";
+/**
+ *
+ * @public
+ */
+export const pickerMenuOptionTemplate = (context, definition) => {
+    return html `
+        <template
+            role="listitem"
+            tabindex="-1"
+            @click="${(x, c) => x.handleClick(c.event)}"
+        >
+            <slot></slot>
+        </template>
+    `;
+};

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

@@ -0,0 +1,59 @@
+import { __decorate } from "tslib";
+import { uniqueId } from "@ni/fast-web-utilities";
+import { observable } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A List Picker Menu Custom HTML Element.
+ *
+ * @alpha
+ */
+export class PickerMenu extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Children that are list items
+         *
+         * @internal
+         */
+        this.optionElements = [];
+    }
+    menuElementsChanged() {
+        this.updateOptions();
+    }
+    headerElementsChanged() {
+        this.updateOptions();
+    }
+    footerElementsChanged() {
+        this.updateOptions();
+    }
+    updateOptions() {
+        this.optionElements.splice(0, this.optionElements.length);
+        this.addSlottedListItems(this.headerElements);
+        this.addSlottedListItems(this.menuElements);
+        this.addSlottedListItems(this.footerElements);
+        this.$emit("optionsupdated", { bubbles: false });
+    }
+    addSlottedListItems(slotChildren) {
+        if (slotChildren === undefined) {
+            return;
+        }
+        slotChildren.forEach((child) => {
+            if (child.nodeType === 1 && child.getAttribute("role") === "listitem") {
+                child.id = child.id || uniqueId("option-");
+                this.optionElements.push(child);
+            }
+        });
+    }
+}
+__decorate([
+    observable
+], PickerMenu.prototype, "menuElements", void 0);
+__decorate([
+    observable
+], PickerMenu.prototype, "headerElements", void 0);
+__decorate([
+    observable
+], PickerMenu.prototype, "footerElements", void 0);
+__decorate([
+    observable
+], PickerMenu.prototype, "suggestionsAvailableText", void 0);

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

@@ -0,0 +1,29 @@
+import { html, slotted } from "@ni/fast-element";
+/**
+ * The template for the List Picker component.
+ * @public
+ */
+export const pickerMenuTemplate = (context, definition) => {
+    return html `
+        <template role="list" slot="menu-region">
+            <div class="options-display" part="options-display">
+                <div class="header-region" part="header-region">
+                    <slot name="header-region" ${slotted("headerElements")}></slot>
+                </div>
+
+                <slot ${slotted("menuElements")}></slot>
+                <div class="footer-region" part="footer-region">
+                    <slot name="footer-region" ${slotted("footerElements")}></slot>
+                </div>
+                <div
+                    role="alert"
+                    aria-live="polite"
+                    part="suggestions-available-alert"
+                    class="suggestions-available-alert"
+                >
+                    ${x => x.suggestionsAvailableText}
+                </div>
+            </div>
+        </template>
+    `;
+};

package/dist/esm/picker/picker.form-associated.js

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