@ni/fast-foundation 0.0.2

package/dist/esm/checkbox/checkbox.js

@@ -0,0 +1,75 @@
+import { __decorate } from "tslib";
+import { attr, observable } from "@ni/fast-element";
+import { keySpace } from "@ni/fast-web-utilities";
+import { FormAssociatedCheckbox } from "./checkbox.form-associated.js";
+/**
+ * A Checkbox Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot indeterminate-indicator - The indeterminate indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual checkbox control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export class Checkbox extends FormAssociatedCheckbox {
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.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";
+        /**
+         * The indeterminate state of the control
+         */
+        this.indeterminate = false;
+        /**
+         * @internal
+         */
+        this.keypressHandler = (e) => {
+            if (this.readOnly) {
+                return;
+            }
+            switch (e.key) {
+                case keySpace:
+                    if (this.indeterminate) {
+                        this.indeterminate = false;
+                    }
+                    this.checked = !this.checked;
+                    break;
+            }
+        };
+        /**
+         * @internal
+         */
+        this.clickHandler = (e) => {
+            if (!this.disabled && !this.readOnly) {
+                if (this.indeterminate) {
+                    this.indeterminate = false;
+                }
+                this.checked = !this.checked;
+            }
+        };
+        this.proxy.setAttribute("type", "checkbox");
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], Checkbox.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Checkbox.prototype, "defaultSlottedNodes", void 0);
+__decorate([
+    observable
+], Checkbox.prototype, "indeterminate", void 0);

package/dist/esm/checkbox/checkbox.template.js

@@ -0,0 +1,35 @@
+import { html, slotted } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#(Checkbox:class)} component.
+ * @public
+ */
+export const checkboxTemplate = (context, definition) => html `
+    <template
+        role="checkbox"
+        aria-checked="${x => x.checked}"
+        aria-required="${x => x.required}"
+        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.readOnly ? "readonly" : "")} ${x => x.checked ? "checked" : ""} ${x => (x.indeterminate ? "indeterminate" : "")}"
+    >
+        <div part="control" class="control">
+            <slot name="checked-indicator">
+                ${definition.checkedIndicator || ""}
+            </slot>
+            <slot name="indeterminate-indicator">
+                ${definition.indeterminateIndicator || ""}
+            </slot>
+        </div>
+        <label
+            part="label"
+            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
+    ? "label"
+    : "label label__hidden"}"
+        >
+            <slot ${slotted("defaultSlottedNodes")}></slot>
+        </label>
+    </template>
+`;

package/dist/esm/checkbox/index.js

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

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

@@ -0,0 +1,15 @@
+import { FormAssociated } from "../form-associated/form-associated.js";
+import { Listbox } from "../listbox/listbox.js";
+class _Combobox extends Listbox {
+}
+/**
+ * A form-associated base class for the {@link (Combobox:class)} component.
+ *
+ * @internal
+ */
+export class FormAssociatedCombobox extends FormAssociated(_Combobox) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}