@ni/fast-foundation 0.0.2

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

@@ -0,0 +1,97 @@
+import { html, ref, when } from "@ni/fast-element";
+import { AnchoredRegion } from "../anchored-region/anchored-region.js";
+import { PickerMenu } from "./picker-menu.js";
+import { PickerMenuOption } from "./picker-menu-option.js";
+import { PickerList } from "./picker-list.js";
+import { PickerListItem } from "./picker-list-item.js";
+function createDefaultListItemTemplate(context) {
+    const pickerListItemTag = context.tagFor(PickerListItem);
+    return html `
+    <${pickerListItemTag}
+        value="${x => x}"
+        :contentsTemplate="${(x, c) => c.parent.listItemContentsTemplate}"
+    >
+    </${pickerListItemTag}>
+    `;
+}
+function createDefaultMenuOptionTemplate(context) {
+    const pickerMenuOptionTag = context.tagFor(PickerMenuOption);
+    return html `
+    <${pickerMenuOptionTag}
+        value="${x => x}"
+        :contentsTemplate="${(x, c) => c.parent.menuOptionContentsTemplate}"
+    >
+    </${pickerMenuOptionTag}>
+    `;
+}
+/**
+ * The template for the List Picker component.
+ * @public
+ */
+export const pickerTemplate = (context, definition) => {
+    const anchoredRegionTag = context.tagFor(AnchoredRegion);
+    const pickerMenuTag = context.tagFor(PickerMenu);
+    const pickerListTag = context.tagFor(PickerList);
+    const progressRingTag = context.tagFor(PickerList);
+    const defaultListItemTemplate = createDefaultListItemTemplate(context);
+    const defaultMenuOptionTemplate = createDefaultMenuOptionTemplate(context);
+    return html `
+        <template
+            :selectedListTag="${() => pickerListTag}"
+            :menuTag="${() => pickerMenuTag}"
+            :defaultListItemTemplate="${defaultListItemTemplate}"
+            :defaultMenuOptionTemplate="${defaultMenuOptionTemplate}"
+            @focusin="${(x, c) => x.handleFocusIn(c.event)}"
+            @focusout="${(x, c) => x.handleFocusOut(c.event)}"
+            @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+            @pickeriteminvoked="${(x, c) => x.handleItemInvoke(c.event)}"
+            @pickeroptioninvoked="${(x, c) => x.handleOptionInvoke(c.event)}"
+        >
+            <slot name="list-region"></slot>
+
+            ${when(x => x.flyoutOpen, html `
+                <${anchoredRegionTag}
+                    class="region"
+                    part="region"
+                    auto-update-mode="${x => x.menuConfig.autoUpdateMode}"
+                    fixed-placement="${x => x.menuConfig.fixedPlacement}"
+                    vertical-positioning-mode="${x => x.menuConfig.verticalPositioningMode}"
+                    vertical-default-position="${x => x.menuConfig.verticalDefaultPosition}"
+                    vertical-scaling="${x => x.menuConfig.verticalScaling}"
+                    vertical-inset="${x => x.menuConfig.verticalInset}"
+                    vertical-viewport-lock="${x => x.menuConfig.verticalViewportLock}"
+                    horizontal-positioning-mode="${x => x.menuConfig.horizontalPositioningMode}"
+                    horizontal-default-position="${x => x.menuConfig.horizontalDefaultPosition}"
+                    horizontal-scaling="${x => x.menuConfig.horizontalScaling}"
+                    horizontal-inset="${x => x.menuConfig.horizontalInset}"
+                    horizontal-viewport-lock="${x => x.menuConfig.horizontalViewportLock}"
+                    @loaded="${(x, c) => x.handleRegionLoaded(c.event)}"
+                    ${ref("region")}
+                >
+                    ${when(x => !x.showNoOptions && !x.showLoading, html `
+                            <slot name="menu-region"></slot>
+                        `)}
+                    ${when(x => x.showNoOptions && !x.showLoading, html `
+                            <div class="no-options-display" part="no-options-display">
+                                <slot name="no-options-region">
+                                    ${x => x.noSuggestionsText}
+                                </slot>
+                            </div>
+                        `)}
+                    ${when(x => x.showLoading, html `
+                            <div class="loading-display" part="loading-display">
+                                <slot name="loading-region">
+                                    <${progressRingTag}
+                                        part="loading-progress"
+                                        class="loading-progress
+                                        slot="loading-region"
+                                    ></${progressRingTag}>
+                                        ${x => x.loadingText}
+                                </slot>
+                            </div>
+                        `)}
+                </${anchoredRegionTag}>
+            `)}
+        </template>
+    `;
+};

package/dist/esm/progress/base-progress.js

@@ -0,0 +1,69 @@
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter, observable, } from "@ni/fast-element";
+import { FoundationElement, } from "../foundation-element/foundation-element.js";
+/**
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
+ * @public
+ */
+export class BaseProgress extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates progress in %
+         * @internal
+         */
+        this.percentComplete = 0;
+    }
+    valueChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    minChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    maxChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updatePercentComplete();
+    }
+    updatePercentComplete() {
+        const min = typeof this.min === "number" ? this.min : 0;
+        const max = typeof this.max === "number" ? this.max : 100;
+        const value = typeof this.value === "number" ? this.value : 0;
+        const range = max - min;
+        this.percentComplete =
+            range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+    }
+}
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "value", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "min", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "max", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], BaseProgress.prototype, "paused", void 0);
+__decorate([
+    observable
+], BaseProgress.prototype, "percentComplete", void 0);

package/dist/esm/progress/index.js

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

package/dist/esm/progress/progress.template.js

@@ -0,0 +1,31 @@
+import { html, when } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#BaseProgress} component.
+ * @public
+ */
+export const progressTemplate = (context, defintion) => html `
+    <template
+        role="progressbar"
+        aria-valuenow="${x => x.value}"
+        aria-valuemin="${x => x.min}"
+        aria-valuemax="${x => x.max}"
+        class="${x => (x.paused ? "paused" : "")}"
+    >
+        ${when(x => typeof x.value === "number", html `
+                <div class="progress" part="progress" slot="determinate">
+                    <div
+                        class="determinate"
+                        part="determinate"
+                        style="width: ${x => x.percentComplete}%"
+                    ></div>
+                </div>
+            `, html `
+                <div class="progress" part="progress" slot="indeterminate">
+                    <slot class="indeterminate" name="indeterminate">
+                        ${defintion.indeterminateIndicator1 || ""}
+                        ${defintion.indeterminateIndicator2 || ""}
+                    </slot>
+                </div>
+            `)}
+    </template>
+`;

package/dist/esm/progress-ring/index.js

@@ -0,0 +1 @@
+export * from "./progress-ring.template.js";

package/dist/esm/progress-ring/progress-ring.template.js

@@ -0,0 +1,45 @@
+import { html, when } from "@ni/fast-element";
+const progressSegments = 44;
+/**
+ * The template for the {@link @ni/fast-foundation#BaseProgress} component.
+ * @public
+ */
+export const progressRingTemplate = (context, definition) => html `
+    <template
+        role="progressbar"
+        aria-valuenow="${x => x.value}"
+        aria-valuemin="${x => x.min}"
+        aria-valuemax="${x => x.max}"
+        class="${x => (x.paused ? "paused" : "")}"
+    >
+        ${when(x => typeof x.value === "number", html `
+                <svg
+                    class="progress"
+                    part="progress"
+                    viewBox="0 0 16 16"
+                    slot="determinate"
+                >
+                    <circle
+                        class="background"
+                        part="background"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                    <circle
+                        class="determinate"
+                        part="determinate"
+                        style="stroke-dasharray: ${x => (progressSegments * x.percentComplete) /
+    100}px ${progressSegments}px"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                </svg>
+            `, html `
+                <slot name="indeterminate" slot="indeterminate">
+                    ${definition.indeterminateIndicator || ""}
+                </slot>
+            `)}
+    </template>
+`;

package/dist/esm/radio/index.js

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

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

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

package/dist/esm/radio/radio.js

@@ -0,0 +1,108 @@
+import { __decorate } from "tslib";
+import { attr, observable } from "@ni/fast-element";
+import { keySpace } from "@ni/fast-web-utilities";
+import { FormAssociatedRadio } from "./radio.form-associated.js";
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export class Radio extends FormAssociatedRadio {
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+    }
+    /**
+     * @internal
+     */
+    defaultCheckedChanged() {
+        var _a;
+        if (this.$fastController.isConnected && !this.dirtyChecked) {
+            // Setting this.checked will cause us to enter a dirty state,
+            // but if we are clean when defaultChecked is changed, we want to stay
+            // in a clean state, so reset this.dirtyChecked
+            if (!this.isInsideRadioGroup()) {
+                this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
+                this.dirtyChecked = false;
+            }
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * The element's value to be included in form submission when checked.
+         * Default to "on" to reach parity with input[type="radio"]
+         *
+         * @internal
+         */
+        this.initialValue = "on";
+        /**
+         * @internal
+         */
+        this.keypressHandler = (e) => {
+            switch (e.key) {
+                case keySpace:
+                    if (!this.checked && !this.readOnly) {
+                        this.checked = true;
+                    }
+                    return;
+            }
+            return true;
+        };
+        this.proxy.setAttribute("type", "radio");
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a, _b;
+        super.connectedCallback();
+        this.validate();
+        if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" &&
+            this.getAttribute("tabindex") === null) {
+            if (!this.disabled) {
+                this.setAttribute("tabindex", "0");
+            }
+        }
+        if (this.checkedAttribute) {
+            if (!this.dirtyChecked) {
+                // Setting this.checked will cause us to enter a dirty state,
+                // but if we are clean when defaultChecked is changed, we want to stay
+                // in a clean state, so reset this.dirtyChecked
+                if (!this.isInsideRadioGroup()) {
+                    this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
+                    this.dirtyChecked = false;
+                }
+            }
+        }
+    }
+    isInsideRadioGroup() {
+        const parent = this.closest("[role=radiogroup]");
+        return parent !== null;
+    }
+    /**
+     * @internal
+     */
+    clickHandler(e) {
+        if (!this.disabled && !this.readOnly && !this.checked) {
+            this.checked = true;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], Radio.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Radio.prototype, "name", void 0);
+__decorate([
+    observable
+], Radio.prototype, "defaultSlottedNodes", void 0);

package/dist/esm/radio/radio.template.js

@@ -0,0 +1,31 @@
+import { html, slotted } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#(Radio:class)} component.
+ * @public
+ */
+export const radioTemplate = (context, definition) => html `
+    <template
+        role="radio"
+        class="${x => (x.checked ? "checked" : "")} ${x => x.readOnly ? "readonly" : ""}"
+        aria-checked="${x => x.checked}"
+        aria-required="${x => x.required}"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        @keypress="${(x, c) => x.keypressHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+    >
+        <div part="control" class="control">
+            <slot name="checked-indicator">
+                ${definition.checkedIndicator || ""}
+            </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/radio-group/index.js

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