@ni/fast-foundation 0.0.2

package/dist/esm/di/index.js

@@ -0,0 +1 @@
+export * from "./di.js";

package/dist/esm/dialog/dialog.js

@@ -0,0 +1,280 @@
+import { __decorate } from "tslib";
+import { attr, DOM, Observable } from "@ni/fast-element";
+import { keyEscape, keyTab } from "@ni/fast-web-utilities";
+import { isTabbable } from "tabbable";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#dialog | ARIA dialog }.
+ *
+ * @slot - The default slot for the dialog content
+ * @csspart positioning-region - A wrapping element used to center the dialog and position the modal overlay
+ * @csspart overlay - The modal dialog overlay
+ * @csspart control - The dialog element
+ * @fires cancel - Fires a custom 'cancel' event when the modal overlay is clicked
+ * @fires close - Fires a custom 'close' event when the dialog is hidden
+ *
+ * @public
+ */
+export class Dialog extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal
+         * overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event.
+         * @public
+         * @defaultValue - true
+         * @remarks
+         * HTML Attribute: modal
+         */
+        this.modal = true;
+        /**
+         * The hidden state of the element.
+         *
+         * @public
+         * @defaultValue - false
+         * @remarks
+         * HTML Attribute: hidden
+         */
+        this.hidden = false;
+        /**
+         * Indicates that the dialog should trap focus.
+         *
+         * @public
+         * @defaultValue - true
+         * @remarks
+         * HTML Attribute: trap-focus
+         */
+        this.trapFocus = true;
+        this.trapFocusChanged = () => {
+            if (this.$fastController.isConnected) {
+                this.updateTrapFocus();
+            }
+        };
+        /**
+         * @internal
+         */
+        this.isTrappingFocus = false;
+        this.handleDocumentKeydown = (e) => {
+            if (!e.defaultPrevented && !this.hidden) {
+                switch (e.key) {
+                    case keyEscape:
+                        this.dismiss();
+                        e.preventDefault();
+                        break;
+                    case keyTab:
+                        this.handleTabKeyDown(e);
+                        break;
+                }
+            }
+        };
+        this.handleDocumentFocus = (e) => {
+            if (!e.defaultPrevented && this.shouldForceFocus(e.target)) {
+                this.focusFirstElement();
+                e.preventDefault();
+            }
+        };
+        this.handleTabKeyDown = (e) => {
+            if (!this.trapFocus || this.hidden) {
+                return;
+            }
+            const bounds = this.getTabQueueBounds();
+            if (bounds.length === 0) {
+                return;
+            }
+            if (bounds.length === 1) {
+                // keep focus on single element
+                bounds[0].focus();
+                e.preventDefault();
+                return;
+            }
+            if (e.shiftKey && e.target === bounds[0]) {
+                bounds[bounds.length - 1].focus();
+                e.preventDefault();
+            }
+            else if (!e.shiftKey && e.target === bounds[bounds.length - 1]) {
+                bounds[0].focus();
+                e.preventDefault();
+            }
+            return;
+        };
+        this.getTabQueueBounds = () => {
+            const bounds = [];
+            return Dialog.reduceTabbableItems(bounds, this);
+        };
+        /**
+         * focus on first element of tab queue
+         */
+        this.focusFirstElement = () => {
+            const bounds = this.getTabQueueBounds();
+            if (bounds.length > 0) {
+                bounds[0].focus();
+            }
+            else {
+                if (this.dialog instanceof HTMLElement) {
+                    this.dialog.focus();
+                }
+            }
+        };
+        /**
+         * we should only focus if focus has not already been brought to the dialog
+         */
+        this.shouldForceFocus = (currentFocusElement) => {
+            return this.isTrappingFocus && !this.contains(currentFocusElement);
+        };
+        /**
+         * we should we be active trapping focus
+         */
+        this.shouldTrapFocus = () => {
+            return this.trapFocus && !this.hidden;
+        };
+        /**
+         *
+         *
+         * @internal
+         */
+        this.updateTrapFocus = (shouldTrapFocusOverride) => {
+            const shouldTrapFocus = shouldTrapFocusOverride === undefined
+                ? this.shouldTrapFocus()
+                : shouldTrapFocusOverride;
+            if (shouldTrapFocus && !this.isTrappingFocus) {
+                this.isTrappingFocus = true;
+                // Add an event listener for focusin events if we are trapping focus
+                document.addEventListener("focusin", this.handleDocumentFocus);
+                DOM.queueUpdate(() => {
+                    if (this.shouldForceFocus(document.activeElement)) {
+                        this.focusFirstElement();
+                    }
+                });
+            }
+            else if (!shouldTrapFocus && this.isTrappingFocus) {
+                this.isTrappingFocus = false;
+                // remove event listener if we are not trapping focus
+                document.removeEventListener("focusin", this.handleDocumentFocus);
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    dismiss() {
+        this.$emit("dismiss");
+        // implement `<dialog>` interface
+        this.$emit("cancel");
+    }
+    /**
+     * The method to show the dialog.
+     *
+     * @public
+     */
+    show() {
+        this.hidden = false;
+    }
+    /**
+     * The method to hide the dialog.
+     *
+     * @public
+     */
+    hide() {
+        this.hidden = true;
+        // implement `<dialog>` interface
+        this.$emit("close");
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener("keydown", this.handleDocumentKeydown);
+        this.notifier = Observable.getNotifier(this);
+        this.notifier.subscribe(this, "hidden");
+        this.updateTrapFocus();
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // remove keydown event listener
+        document.removeEventListener("keydown", this.handleDocumentKeydown);
+        // if we are trapping focus remove the focusin listener
+        this.updateTrapFocus(false);
+        this.notifier.unsubscribe(this, "hidden");
+    }
+    /**
+     * @internal
+     */
+    handleChange(source, propertyName) {
+        switch (propertyName) {
+            case "hidden":
+                this.updateTrapFocus();
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * Reduce a collection to only its focusable elements.
+     *
+     * @param elements - Collection of elements to reduce
+     * @param element - The current element
+     *
+     * @internal
+     */
+    static reduceTabbableItems(elements, element) {
+        if (element.getAttribute("tabindex") === "-1") {
+            return elements;
+        }
+        if (isTabbable(element) ||
+            (Dialog.isFocusableFastElement(element) && Dialog.hasTabbableShadow(element))) {
+            elements.push(element);
+            return elements;
+        }
+        if (element.childElementCount) {
+            return elements.concat(Array.from(element.children).reduce(Dialog.reduceTabbableItems, []));
+        }
+        return elements;
+    }
+    /**
+     * Test if element is focusable fast element
+     *
+     * @param element - The element to check
+     *
+     * @internal
+     */
+    static isFocusableFastElement(element) {
+        var _a, _b;
+        return !!((_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus);
+    }
+    /**
+     * Test if the element has a focusable shadow
+     *
+     * @param element - The element to check
+     *
+     * @internal
+     */
+    static hasTabbableShadow(element) {
+        var _a, _b;
+        return Array.from((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("*")) !== null && _b !== void 0 ? _b : []).some(x => {
+            return isTabbable(x);
+        });
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Dialog.prototype, "modal", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Dialog.prototype, "hidden", void 0);
+__decorate([
+    attr({ attribute: "trap-focus", mode: "boolean" })
+], Dialog.prototype, "trapFocus", void 0);
+__decorate([
+    attr({ attribute: "aria-describedby" })
+], Dialog.prototype, "ariaDescribedby", void 0);
+__decorate([
+    attr({ attribute: "aria-labelledby" })
+], Dialog.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: "aria-label" })
+], Dialog.prototype, "ariaLabel", void 0);

package/dist/esm/dialog/dialog.template.js

@@ -0,0 +1,30 @@
+import { html, ref, when } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#Dialog} component.
+ * @public
+ */
+export const dialogTemplate = (context, definition) => html `
+    <div class="positioning-region" part="positioning-region">
+        ${when(x => x.modal, html `
+                <div
+                    class="overlay"
+                    part="overlay"
+                    role="presentation"
+                    @click="${x => x.dismiss()}"
+                ></div>
+            `)}
+        <div
+            role="dialog"
+            tabindex="-1"
+            class="control"
+            part="control"
+            aria-modal="${x => x.modal}"
+            aria-describedby="${x => x.ariaDescribedby}"
+            aria-labelledby="${x => x.ariaLabelledby}"
+            aria-label="${x => x.ariaLabel}"
+            ${ref("dialog")}
+        >
+            <slot></slot>
+        </div>
+    </div>
+`;

package/dist/esm/dialog/index.js

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

package/dist/esm/directives/reflect-attributes.js

@@ -0,0 +1,88 @@
+import { AttachedBehaviorHTMLDirective, DOM, SubscriberSet, } from "@ni/fast-element";
+const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+        AttributeReflectionSubscriptionSet.getOrCreateFor(mutation.target).notify(mutation.attributeName);
+    }
+});
+class AttributeReflectionSubscriptionSet extends SubscriberSet {
+    subscribe(subscriber) {
+        super.subscribe(subscriber);
+        if (!this.watchedAttributes.has(subscriber.attributes)) {
+            this.watchedAttributes.add(subscriber.attributes);
+            this.observe();
+        }
+    }
+    constructor(source) {
+        super(source);
+        this.watchedAttributes = new Set();
+        AttributeReflectionSubscriptionSet.subscriberCache.set(source, this);
+    }
+    unsubscribe(subscriber) {
+        super.unsubscribe(subscriber);
+        if (this.watchedAttributes.has(subscriber.attributes)) {
+            this.watchedAttributes.delete(subscriber.attributes);
+            this.observe();
+        }
+    }
+    static getOrCreateFor(source) {
+        return (this.subscriberCache.get(source) ||
+            new AttributeReflectionSubscriptionSet(source));
+    }
+    observe() {
+        const attributeFilter = [];
+        for (const attributes of this.watchedAttributes.values()) {
+            for (let i = 0; i < attributes.length; i++) {
+                attributeFilter.push(attributes[i]);
+            }
+        }
+        observer.observe(this.source, { attributeFilter });
+    }
+}
+AttributeReflectionSubscriptionSet.subscriberCache = new WeakMap();
+class ReflectAttrBehavior {
+    constructor(target, attributes) {
+        this.target = target;
+        this.attributes = Object.freeze(attributes);
+    }
+    bind(source) {
+        AttributeReflectionSubscriptionSet.getOrCreateFor(source).subscribe(this);
+        // Reflect any existing attributes because MutationObserver will only
+        // handle *changes* to attributes.
+        if (source.hasAttributes()) {
+            for (let i = 0; i < source.attributes.length; i++) {
+                this.handleChange(source, source.attributes[i].name);
+            }
+        }
+    }
+    unbind(source) {
+        AttributeReflectionSubscriptionSet.getOrCreateFor(source).unsubscribe(this);
+    }
+    handleChange(source, arg) {
+        // In cases where two or more ReflectAttrBehavior instances are bound to the same element,
+        // they will share a Subscriber implementation. In that case, this handle change can be invoked with
+        // attributes an instances doesn't need to reflect. This guards against reflecting attrs
+        // that shouldn't be reflected.
+        if (this.attributes.includes(arg)) {
+            DOM.setAttribute(this.target, arg, source.getAttribute(arg));
+        }
+    }
+}
+/**
+ * Reflects attributes from the host element to the target element of the directive.
+ * @param attributes - The attributes to reflect
+ *
+ * @beta
+ * @example
+ * ```ts
+ * const template = html`
+ *     <button
+ *         ${reflectAttributes("aria-label", "aria-describedby")}
+ *     >
+ *          hello world
+ *     </button
+ * `
+ * ```
+ */
+export function reflectAttributes(...attributes) {
+    return new AttachedBehaviorHTMLDirective("fast-reflect-attr", ReflectAttrBehavior, attributes);
+}

package/dist/esm/disclosure/disclosure.js

@@ -0,0 +1,72 @@
+import { __decorate } from "tslib";
+import { attr } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Disclosure Custom HTML Element.
+ * Based largely on the {@link https://w3c.github.io/aria-practices/#disclosure | disclosure element }.
+ *
+ * @slot start - Content which can be provided before the summary content
+ * @slot end - Content which can be provided after the summary content
+ * @slot title - The summary content
+ * @slot - The default slot for the disclosure content
+ * @fires toggle - fires a toggle event when the summary is toggled
+ *
+ * @public
+ */
+export class Disclosure extends FoundationElement {
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.setup();
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.details.removeEventListener("toggle", this.onToggle);
+    }
+    /**
+     * Show extra content.
+     */
+    show() {
+        this.details.open = true;
+    }
+    /**
+     * Hide extra content.
+     */
+    hide() {
+        this.details.open = false;
+    }
+    /**
+     * Toggle the current(expanded/collapsed) state.
+     */
+    toggle() {
+        this.details.open = !this.details.open;
+    }
+    /**
+     * Register listener and set default disclosure mode
+     */
+    setup() {
+        this.onToggle = this.onToggle.bind(this);
+        this.details.addEventListener("toggle", this.onToggle);
+        if (this.expanded) {
+            this.show();
+        }
+    }
+    /**
+     * Update the aria attr and fire `toggle` event
+     */
+    onToggle() {
+        this.expanded = this.details.open;
+        this.$emit("toggle");
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Disclosure.prototype, "expanded", void 0);
+__decorate([
+    attr
+], Disclosure.prototype, "title", void 0);

package/dist/esm/disclosure/disclosure.template.js

@@ -0,0 +1,20 @@
+import { html, ref } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#Disclosure} component.
+ * @public
+ */
+export const disclosureTemplate = (context, definition) => html `
+    <details class="disclosure" ${ref("details")}>
+        <summary
+            class="invoker"
+            role="button"
+            aria-controls="disclosure-content"
+            aria-expanded="${x => x.expanded}"
+        >
+            <slot name="start"></slot>
+            <slot name="title">${x => x.title}</slot>
+            <slot name="end"></slot>
+        </summary>
+        <div id="disclosure-content"><slot></slot></div>
+    </details>
+`;

package/dist/esm/disclosure/index.js

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

package/dist/esm/divider/divider.js

@@ -0,0 +1,39 @@
+import { __decorate } from "tslib";
+import { attr } from "@ni/fast-element";
+import { Orientation } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { DividerRole } from "./divider.options.js";
+export { DividerRole };
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+export class Divider extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = DividerRole.separator;
+        /**
+         * The orientation of the divider.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = Orientation.horizontal;
+    }
+}
+__decorate([
+    attr
+], Divider.prototype, "role", void 0);
+__decorate([
+    attr
+], Divider.prototype, "orientation", void 0);

package/dist/esm/divider/divider.options.js

@@ -0,0 +1,14 @@
+/**
+ * Divider roles
+ * @public
+ */
+export const DividerRole = {
+    /**
+     * The divider semantically separates content
+     */
+    separator: "separator",
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    presentation: "presentation",
+};

package/dist/esm/divider/divider.template.js

@@ -0,0 +1,8 @@
+import { html } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#Divider} component.
+ * @public
+ */
+export const dividerTemplate = (context, definition) => html `
+    <template role="${x => x.role}" aria-orientation="${x => x.orientation}"></template>
+`;

package/dist/esm/divider/index.js

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

package/dist/esm/flipper/flipper.js

@@ -0,0 +1,65 @@
+import { __decorate } from "tslib";
+import { attr, booleanConverter } from "@ni/fast-element";
+import { FoundationElement, } from "../foundation-element/foundation-element.js";
+import { FlipperDirection } from "./flipper.options.js";
+export { FlipperDirection };
+/**
+ * A Flipper Custom HTML Element.
+ * Flippers are a form of button that implies directional content navigation, such as in a carousel.
+ *
+ * @slot next - The next flipper content
+ * @slot previous - The previous flipper content
+ * @csspart next - Wraps the next flipper content
+ * @csspart previous - Wraps the previous flipper content
+ * @fires click - Fires a custom 'click' event when Enter or Space is invoked via keyboard and the flipper is exposed to assistive technologies.
+ *
+ * @public
+ */
+export class Flipper extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology.
+         *
+         * @public
+         * @defaultValue - true
+         * @remarks
+         * HTML Attribute: aria-hidden
+         */
+        this.hiddenFromAT = true;
+        /**
+         * The direction that the flipper implies navigating.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: direction
+         */
+        this.direction = FlipperDirection.next;
+    }
+    /**
+     * Simulate a click event when the flipper has focus and the user hits enter or space keys
+     * Blur focus if the user hits escape key
+     * @param e - Keyboard event
+     * @public
+     */
+    keyupHandler(e) {
+        if (!this.hiddenFromAT) {
+            const key = e.key;
+            if (key === "Enter" || key === "Space") {
+                this.$emit("click", e);
+            }
+            if (key === "Escape") {
+                this.blur();
+            }
+        }
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Flipper.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: "aria-hidden", converter: booleanConverter })
+], Flipper.prototype, "hiddenFromAT", void 0);
+__decorate([
+    attr
+], Flipper.prototype, "direction", void 0);

package/dist/esm/flipper/flipper.options.js

@@ -0,0 +1,8 @@
+/**
+ * The direction options for flipper.
+ * @public
+ */
+export const FlipperDirection = {
+    next: "next",
+    previous: "previous",
+};

package/dist/esm/flipper/flipper.template.js

@@ -0,0 +1,30 @@
+import { html, when } from "@ni/fast-element";
+import { FlipperDirection } from "./flipper.options.js";
+/**
+ * The template for the {@link @ni/fast-foundation#Flipper} component.
+ * @public
+ */
+export const flipperTemplate = (context, definition) => html `
+    <template
+        role="button"
+        aria-disabled="${x => (x.disabled ? true : void 0)}"
+        tabindex="${x => (x.hiddenFromAT ? -1 : 0)}"
+        class="${x => x.direction} ${x => (x.disabled ? "disabled" : "")}"
+        @keyup="${(x, c) => x.keyupHandler(c.event)}"
+    >
+        ${when(x => x.direction === FlipperDirection.next, html `
+                <span part="next" class="next">
+                    <slot name="next">
+                        ${definition.next || ""}
+                    </slot>
+                </span>
+            `)}
+        ${when(x => x.direction === FlipperDirection.previous, html `
+                <span part="previous" class="previous">
+                    <slot name="previous">
+                        ${definition.previous || ""}
+                    </slot>
+                </span>
+            `)}
+    </template>
+`;

package/dist/esm/flipper/index.js

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