@ni/fast-foundation 0.0.2

package/dist/esm/anchored-region/anchored-region.template.js

@@ -0,0 +1,12 @@
+import { html, when } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#(AnchoredRegion:class)} component.
+ * @public
+ */
+export const anchoredRegionTemplate = (context, definition) => html `
+    <template class="${x => (x.initialLayoutComplete ? "loaded" : "")}">
+        ${when(x => x.initialLayoutComplete, html `
+                <slot></slot>
+            `)}
+    </template>
+`;

package/dist/esm/anchored-region/index.js

@@ -0,0 +1,3 @@
+export * from "./anchored-region.template.js";
+export * from "./anchored-region.js";
+export * from "./anchored-region-config.js";

package/dist/esm/avatar/avatar.js

@@ -0,0 +1,39 @@
+import { __decorate } from "tslib";
+import { attr } from "@ni/fast-element";
+import { FoundationElement, } from "../foundation-element/foundation-element.js";
+/**
+ * An Avatar Custom HTML Element
+ *
+ * @slot media - Used for media such as an image
+ * @slot - The default slot for avatar text, commonly a name or initials
+ * @slot badge - Used to provide a badge, such as a status badge
+ * @csspart backplate - The wrapping container for the avatar
+ * @csspart link - The avatar link
+ * @csspart media - The media slot
+ * @csspart content - The default slot
+ *
+ * @public
+ */
+export class Avatar extends FoundationElement {
+    /**
+     * Internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.shape) {
+            this.shape = "circle";
+        }
+    }
+}
+__decorate([
+    attr
+], Avatar.prototype, "fill", void 0);
+__decorate([
+    attr
+], Avatar.prototype, "color", void 0);
+__decorate([
+    attr
+], Avatar.prototype, "link", void 0);
+__decorate([
+    attr
+], Avatar.prototype, "shape", void 0);

package/dist/esm/avatar/avatar.template.js

@@ -0,0 +1,23 @@
+import { html } from "@ni/fast-element";
+/**
+ * The template for {@link @ni/fast-foundation#Avatar} component.
+ * @public
+ */
+export const avatarTemplate = (context, definition) => html `
+    <div
+        class="backplate ${x => x.shape}"
+        part="backplate"
+        style="${x => x.fill ? `background-color: var(--avatar-fill-${x.fill});` : void 0}"
+    >
+        <a
+            class="link"
+            part="link"
+            href="${x => (x.link ? x.link : void 0)}"
+            style="${x => (x.color ? `color: var(--avatar-color-${x.color});` : void 0)}"
+        >
+            <slot name="media" part="media">${definition.media || ""}</slot>
+            <slot class="content" part="content"><slot>
+        </a>
+    </div>
+    <slot name="badge" part="badge"></slot>
+`;

package/dist/esm/avatar/index.js

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

package/dist/esm/badge/badge.js

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+import { attr } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Badge Custom HTML Element.
+ * @slot - The default slot for the badge
+ * @csspart control - The element representing the badge, which wraps the default slot
+ *
+ * @public
+ */
+export class Badge extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.generateBadgeStyle = () => {
+            if (!this.fill && !this.color) {
+                return;
+            }
+            const fill = `background-color: var(--badge-fill-${this.fill});`;
+            const color = `color: var(--badge-color-${this.color});`;
+            if (this.fill && !this.color) {
+                return fill;
+            }
+            else if (this.color && !this.fill) {
+                return color;
+            }
+            else {
+                return `${color} ${fill}`;
+            }
+        };
+    }
+}
+__decorate([
+    attr({ attribute: "fill" })
+], Badge.prototype, "fill", void 0);
+__decorate([
+    attr({ attribute: "color" })
+], Badge.prototype, "color", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Badge.prototype, "circular", void 0);

package/dist/esm/badge/badge.template.js

@@ -0,0 +1,12 @@
+import { html } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#Badge} component.
+ * @public
+ */
+export const badgeTemplate = (context, definition) => html `
+    <template class="${x => (x.circular ? "circular" : "")}">
+        <div class="control" part="control" style="${x => x.generateBadgeStyle()}">
+            <slot></slot>
+        </div>
+    </template>
+`;

package/dist/esm/badge/index.js

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

package/dist/esm/breadcrumb/breadcrumb.js

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { observable } from "@ni/fast-element";
+import { BreadcrumbItem } from "../breadcrumb-item/breadcrumb-item.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Breadcrumb Custom HTML Element.
+ * @slot - The default slot for the breadcrumb items
+ * @csspart list - The element wrapping the slotted items
+ *
+ * @public
+ */
+export class Breadcrumb extends FoundationElement {
+    slottedBreadcrumbItemsChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.slottedBreadcrumbItems === undefined ||
+                this.slottedBreadcrumbItems.length === 0) {
+                return;
+            }
+            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
+            this.slottedBreadcrumbItems.forEach((item) => {
+                const itemIsLastNode = item === lastNode;
+                this.setItemSeparator(item, itemIsLastNode);
+                this.setAriaCurrent(item, itemIsLastNode);
+            });
+        }
+    }
+    setItemSeparator(item, isLastNode) {
+        if (item instanceof BreadcrumbItem) {
+            item.separator = !isLastNode;
+        }
+    }
+    /**
+     * Finds href on childnodes in the light DOM or shadow DOM.
+     * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
+     */
+    findChildWithHref(node) {
+        var _a, _b;
+        if (node.childElementCount > 0) {
+            return node.querySelector("a[href]");
+        }
+        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
+            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
+        }
+        else
+            return null;
+    }
+    /**
+     *  Sets ARIA Current for the current node
+     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
+     * otherwise apply aria-current to the host element, with an href
+     */
+    setAriaCurrent(item, isLastNode) {
+        const childNodeWithHref = this.findChildWithHref(item);
+        if (childNodeWithHref === null &&
+            item.hasAttribute("href") &&
+            item instanceof BreadcrumbItem) {
+            isLastNode
+                ? item.setAttribute("aria-current", "page")
+                : item.removeAttribute("aria-current");
+        }
+        else if (childNodeWithHref !== null) {
+            isLastNode
+                ? childNodeWithHref.setAttribute("aria-current", "page")
+                : childNodeWithHref.removeAttribute("aria-current");
+        }
+    }
+}
+__decorate([
+    observable
+], Breadcrumb.prototype, "slottedBreadcrumbItems", void 0);

package/dist/esm/breadcrumb/breadcrumb.template.js

@@ -0,0 +1,14 @@
+import { elements, html, slotted } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#Breadcrumb} component.
+ * @public
+ */
+export const breadcrumbTemplate = (context, definition) => html `
+    <template role="navigation">
+        <div role="list" class="list" part="list">
+            <slot
+                ${slotted({ property: "slottedBreadcrumbItems", filter: elements() })}
+            ></slot>
+        </div>
+    </template>
+`;

package/dist/esm/breadcrumb/index.js

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

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

@@ -0,0 +1,23 @@
+import { __decorate } from "tslib";
+import { observable } from "@ni/fast-element";
+import { Anchor, DelegatesARIALink } from "../anchor/anchor.js";
+import { StartEnd } from "../patterns/index.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+/**
+ * A Breadcrumb Item Custom HTML Element.
+ *
+ * @public
+ */
+export class BreadcrumbItem extends Anchor {
+    constructor() {
+        super(...arguments);
+        /**
+         * @internal
+         */
+        this.separator = true;
+    }
+}
+__decorate([
+    observable
+], BreadcrumbItem.prototype, "separator", void 0);
+applyMixins(BreadcrumbItem, StartEnd, DelegatesARIALink);

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

@@ -0,0 +1,24 @@
+import { html, when } from "@ni/fast-element";
+import { anchorTemplate } from "../anchor/anchor.template.js";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(BreadcrumbItem:class)} component.
+ * @public
+ */
+export const breadcrumbItemTemplate = (context, definition) => html `
+    <div role="listitem" class="listitem" part="listitem">
+        ${when(x => x.href && x.href.length > 0, html `
+                ${anchorTemplate(context, definition)}
+            `)}
+        ${when(x => !x.href, html `
+                ${startSlotTemplate(context, definition)}
+                <slot></slot>
+                ${endSlotTemplate(context, definition)}
+            `)}
+        ${when(x => x.separator, html `
+                <span class="separator" part="separator" aria-hidden="true">
+                    <slot name="separator">${definition.separator || ""}</slot>
+                </span>
+            `)}
+    </div>
+`;

package/dist/esm/breadcrumb-item/index.js

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

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

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

package/dist/esm/button/button.js

@@ -0,0 +1,183 @@
+import { __decorate } from "tslib";
+import { attr, observable } from "@ni/fast-element";
+import { ARIAGlobalStatesAndProperties, StartEnd, } from "../patterns/index.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+import { FormAssociatedButton } from "./button.form-associated.js";
+/**
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart control - The button element
+ * @csspart content - The element wrapping button content
+ *
+ * @public
+ */
+export class Button extends FormAssociatedButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
+         * @internal
+         */
+        this.handleClick = (e) => {
+            var _a;
+            if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
+                e.stopPropagation();
+            }
+        };
+        /**
+         * Submits the parent form
+         */
+        this.handleSubmission = () => {
+            if (!this.form) {
+                return;
+            }
+            const attached = this.proxy.isConnected;
+            if (!attached) {
+                this.attachProxy();
+            }
+            // Browser support for requestSubmit is not comprehensive
+            // so click the proxy if it isn't supported
+            typeof this.form.requestSubmit === "function"
+                ? this.form.requestSubmit(this.proxy)
+                : this.proxy.click();
+            if (!attached) {
+                this.detachProxy();
+            }
+        };
+        /**
+         * Resets the parent form
+         */
+        this.handleFormReset = () => {
+            var _a;
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
+        };
+        /**
+         * Overrides the focus call for where delegatesFocus is unsupported.
+         * This check works for Chrome, Edge Chromium, FireFox, and Safari
+         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+         */
+        this.handleUnsupportedDelegatesFocus = () => {
+            var _a;
+            // Check to see if delegatesFocus is supported
+            if (window.ShadowRoot &&
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                this.focus = () => {
+                    this.control.focus();
+                };
+            }
+        };
+    }
+    formactionChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formAction = this.formaction;
+        }
+    }
+    formenctypeChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formEnctype = this.formenctype;
+        }
+    }
+    formmethodChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formMethod = this.formmethod;
+        }
+    }
+    formnovalidateChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formNoValidate = this.formnovalidate;
+        }
+    }
+    formtargetChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formTarget = this.formtarget;
+        }
+    }
+    typeChanged(previous, next) {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.type = this.type;
+        }
+        next === "submit" && this.addEventListener("click", this.handleSubmission);
+        previous === "submit" && this.removeEventListener("click", this.handleSubmission);
+        next === "reset" && this.addEventListener("click", this.handleFormReset);
+        previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+    }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate() {
+        super.validate(this.control);
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.proxy.setAttribute("type", this.type);
+        this.handleUnsupportedDelegatesFocus();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.addEventListener("click", this.handleClick);
+            });
+        }
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.removeEventListener("click", this.handleClick);
+            });
+        }
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "autofocus", void 0);
+__decorate([
+    attr({ attribute: "form" })
+], Button.prototype, "formId", void 0);
+__decorate([
+    attr
+], Button.prototype, "formaction", void 0);
+__decorate([
+    attr
+], Button.prototype, "formenctype", void 0);
+__decorate([
+    attr
+], Button.prototype, "formmethod", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "formnovalidate", void 0);
+__decorate([
+    attr
+], Button.prototype, "formtarget", void 0);
+__decorate([
+    attr
+], Button.prototype, "type", void 0);
+__decorate([
+    observable
+], Button.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+export class DelegatesARIAButton {
+}
+__decorate([
+    attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
+__decorate([
+    attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed", void 0);
+applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
+applyMixins(Button, StartEnd, DelegatesARIAButton);

package/dist/esm/button/button.template.js

@@ -0,0 +1,51 @@
+import { html, ref, slotted } from "@ni/fast-element";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(Button:class)} component.
+ * @public
+ */
+export const buttonTemplate = (context, definition) => html `
+    <button
+        class="control"
+        part="control"
+        ?autofocus="${x => x.autofocus}"
+        ?disabled="${x => x.disabled}"
+        form="${x => x.formId}"
+        formaction="${x => x.formaction}"
+        formenctype="${x => x.formenctype}"
+        formmethod="${x => x.formmethod}"
+        formnovalidate="${x => x.formnovalidate}"
+        formtarget="${x => x.formtarget}"
+        name="${x => x.name}"
+        type="${x => x.type}"
+        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-expanded="${x => x.ariaExpanded}"
+        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-pressed="${x => x.ariaPressed}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref("control")}
+    >
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
+            <slot ${slotted("defaultSlottedContent")}></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </button>
+`;

package/dist/esm/button/index.js

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