@ni/fast-foundation 0.0.2

package/dist/esm/text-area/index.js

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

package/dist/esm/text-area/text-area.form-associated.js

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

package/dist/esm/text-area/text-area.js

@@ -0,0 +1,146 @@
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter, observable } from "@ni/fast-element";
+import { DelegatesARIATextbox } from "../text-field/text-field.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+import { FormAssociatedTextArea } from "./text-area.form-associated.js";
+import { TextAreaResize } from "./text-area.options.js";
+export { TextAreaResize };
+/**
+ * A Text Area Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
+ *
+ * @slot - The default slot for the label
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control
+ * @csspart control - The textarea element
+ * @fires change - Emits a custom 'change' event when the textarea emits a change event
+ *
+ * @public
+ */
+export class TextArea extends FormAssociatedTextArea {
+    constructor() {
+        super(...arguments);
+        /**
+         * The resize mode of the element.
+         * @public
+         * @remarks
+         * HTML Attribute: resize
+         */
+        this.resize = TextAreaResize.none;
+        /**
+         * Sizes the element horizontally by a number of character columns.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: cols
+         */
+        this.cols = 20;
+        /**
+         * @internal
+         */
+        this.handleTextInput = () => {
+            this.value = this.control.value;
+        };
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLTextAreaElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+    }
+    autofocusChanged() {
+        if (this.proxy instanceof HTMLTextAreaElement) {
+            this.proxy.autofocus = this.autofocus;
+        }
+    }
+    listChanged() {
+        if (this.proxy instanceof HTMLTextAreaElement) {
+            this.proxy.setAttribute("list", this.list);
+        }
+    }
+    maxlengthChanged() {
+        if (this.proxy instanceof HTMLTextAreaElement) {
+            this.proxy.maxLength = this.maxlength;
+        }
+    }
+    minlengthChanged() {
+        if (this.proxy instanceof HTMLTextAreaElement) {
+            this.proxy.minLength = this.minlength;
+        }
+    }
+    spellcheckChanged() {
+        if (this.proxy instanceof HTMLTextAreaElement) {
+            this.proxy.spellcheck = this.spellcheck;
+        }
+    }
+    /**
+     * Selects all the text in the text area
+     *
+     * @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");
+    }
+    /**
+     * 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");
+    }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate() {
+        super.validate(this.control);
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], TextArea.prototype, "readOnly", void 0);
+__decorate([
+    attr
+], TextArea.prototype, "resize", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], TextArea.prototype, "autofocus", void 0);
+__decorate([
+    attr({ attribute: "form" })
+], TextArea.prototype, "formId", void 0);
+__decorate([
+    attr
+], TextArea.prototype, "list", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], TextArea.prototype, "maxlength", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], TextArea.prototype, "minlength", void 0);
+__decorate([
+    attr
+], TextArea.prototype, "name", void 0);
+__decorate([
+    attr
+], TextArea.prototype, "placeholder", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter, mode: "fromView" })
+], TextArea.prototype, "cols", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter, mode: "fromView" })
+], TextArea.prototype, "rows", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], TextArea.prototype, "spellcheck", void 0);
+__decorate([
+    observable
+], TextArea.prototype, "defaultSlottedNodes", void 0);
+applyMixins(TextArea, DelegatesARIATextbox);

package/dist/esm/text-area/text-area.options.js

@@ -0,0 +1,22 @@
+/**
+ * Resize mode for a TextArea
+ * @public
+ */
+export const TextAreaResize = {
+    /**
+     * No resize.
+     */
+    none: "none",
+    /**
+     * Resize vertically and horizontally.
+     */
+    both: "both",
+    /**
+     * Resize horizontally.
+     */
+    horizontal: "horizontal",
+    /**
+     * Resize vertically.
+     */
+    vertical: "vertical",
+};

package/dist/esm/text-area/text-area.template.js

@@ -0,0 +1,64 @@
+import { html, ref, slotted } from "@ni/fast-element";
+import { TextAreaResize } from "./text-area.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(TextArea:class)} component.
+ * @public
+ */
+export const textAreaTemplate = (context, definition) => html `
+    <template
+        class="
+            ${x => (x.readOnly ? "readonly" : "")}
+            ${x => (x.resize !== TextAreaResize.none ? `resize-${x.resize}` : "")}"
+    >
+        <label
+            part="label"
+            for="control"
+            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
+    ? "label"
+    : "label label__hidden"}"
+        >
+            <slot ${slotted("defaultSlottedNodes")}></slot>
+        </label>
+        <textarea
+            part="control"
+            class="control"
+            id="control"
+            ?autofocus="${x => x.autofocus}"
+            cols="${x => x.cols}"
+            ?disabled="${x => x.disabled}"
+            form="${x => x.form}"
+            list="${x => x.list}"
+            maxlength="${x => x.maxlength}"
+            minlength="${x => x.minlength}"
+            name="${x => x.name}"
+            placeholder="${x => x.placeholder}"
+            ?readonly="${x => x.readOnly}"
+            ?required="${x => x.required}"
+            rows="${x => x.rows}"
+            ?spellcheck="${x => x.spellcheck}"
+            :value="${x => x.value}"
+            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}"
+            @input="${(x, c) => x.handleTextInput()}"
+            @change="${x => x.handleChange()}"
+            ${ref("control")}
+        ></textarea>
+    </template>
+`;

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

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

package/dist/esm/text-field/text-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 _TextField extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(TextField:class)} component.
+ *
+ * @internal
+ */
+export class FormAssociatedTextField extends FormAssociated(_TextField) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}

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

@@ -0,0 +1,183 @@
+import { __decorate } from "tslib";
+import { attr, DOM, nullableNumberConverter, observable } from "@ni/fast-element";
+import { ARIAGlobalStatesAndProperties, StartEnd, } from "../patterns/index.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+import { FormAssociatedTextField } from "./text-field.form-associated.js";
+import { TextFieldType } from "./text-field.options.js";
+export { TextFieldType };
+/**
+ * A Text Field Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> 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
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control, including start and end slots
+ * @csspart control - The text field element
+ * @fires change - Fires a custom 'change' event when the value has changed
+ *
+ * @public
+ */
+export class TextField extends FormAssociatedTextField {
+    constructor() {
+        super(...arguments);
+        /**
+         * Allows setting a type or mode of text.
+         * @public
+         * @remarks
+         * HTML Attribute: type
+         */
+        this.type = TextFieldType.text;
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+            this.validate();
+        }
+    }
+    autofocusChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.autofocus = this.autofocus;
+            this.validate();
+        }
+    }
+    placeholderChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.placeholder = this.placeholder;
+        }
+    }
+    typeChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.type = this.type;
+            this.validate();
+        }
+    }
+    listChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.setAttribute("list", this.list);
+            this.validate();
+        }
+    }
+    maxlengthChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.maxLength = this.maxlength;
+            this.validate();
+        }
+    }
+    minlengthChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.minLength = this.minlength;
+            this.validate();
+        }
+    }
+    patternChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.pattern = this.pattern;
+            this.validate();
+        }
+    }
+    sizeChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.size = this.size;
+        }
+    }
+    spellcheckChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.spellcheck = this.spellcheck;
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.proxy.setAttribute("type", this.type);
+        this.validate();
+        if (this.autofocus) {
+            DOM.queueUpdate(() => {
+                this.focus();
+            });
+        }
+    }
+    /**
+     * Selects all the text in the text 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.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");
+    }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate() {
+        super.validate(this.control);
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], TextField.prototype, "readOnly", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], TextField.prototype, "autofocus", void 0);
+__decorate([
+    attr
+], TextField.prototype, "placeholder", void 0);
+__decorate([
+    attr
+], TextField.prototype, "type", void 0);
+__decorate([
+    attr
+], TextField.prototype, "list", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], TextField.prototype, "maxlength", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], TextField.prototype, "minlength", void 0);
+__decorate([
+    attr
+], TextField.prototype, "pattern", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], TextField.prototype, "size", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], TextField.prototype, "spellcheck", void 0);
+__decorate([
+    observable
+], TextField.prototype, "defaultSlottedNodes", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA textbox role
+ *
+ * @public
+ */
+export class DelegatesARIATextbox {
+}
+applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
+applyMixins(TextField, StartEnd, DelegatesARIATextbox);

package/dist/esm/text-field/text-field.options.js

@@ -0,0 +1,26 @@
+/**
+ * Text field sub-types
+ * @public
+ */
+export const TextFieldType = {
+    /**
+     * An email TextField
+     */
+    email: "email",
+    /**
+     * A password TextField
+     */
+    password: "password",
+    /**
+     * A telephone TextField
+     */
+    tel: "tel",
+    /**
+     * A text TextField
+     */
+    text: "text",
+    /**
+     * A URL TextField
+     */
+    url: "url",
+};

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

@@ -0,0 +1,70 @@
+import { html, ref, slotted } from "@ni/fast-element";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
+import { whitespaceFilter } from "../utilities/whitespace-filter.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
+ * @public
+ */
+export const textFieldTemplate = (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({ property: "defaultSlottedNodes", filter: whitespaceFilter })}
+            ></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()}"
+                ?autofocus="${x => x.autofocus}"
+                ?disabled="${x => x.disabled}"
+                list="${x => x.list}"
+                maxlength="${x => x.maxlength}"
+                minlength="${x => x.minlength}"
+                pattern="${x => x.pattern}"
+                placeholder="${x => x.placeholder}"
+                ?readonly="${x => x.readOnly}"
+                ?required="${x => x.required}"
+                size="${x => x.size}"
+                ?spellcheck="${x => x.spellcheck}"
+                :value="${x => x.value}"
+                type="${x => x.type}"
+                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")}
+            />
+            ${endSlotTemplate(context, definition)}
+        </div>
+    </template>
+`;

package/dist/esm/toolbar/index.js

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