@ni/fast-foundation 0.0.2

package/dist/dts/tree-view/tree-view.d.ts

@@ -0,0 +1,99 @@
+import { TreeItem } from "../tree-item/tree-item.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Tree view Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria-practices/#TreeView | ARIA TreeView }.
+ *
+ * @slot - The default slot for tree items
+ *
+ * @public
+ */
+export declare class TreeView extends FoundationElement {
+    /**
+   /**
+    * When true, the control will be appear expanded by user interaction.
+    * @public
+    * @remarks
+    * HTML Attribute: render-collapsed-nodes
+    */
+    renderCollapsedNodes: boolean;
+    /**
+     * The currently selected tree item
+     * @public
+     */
+    currentSelected: HTMLElement | TreeItem | null;
+    /**
+     *  Slotted children
+     *
+     * @internal
+     */
+    slottedTreeItems: HTMLElement[];
+    private slottedTreeItemsChanged;
+    /**
+     * The tree item that is designated to be in the tab queue.
+     *
+     * @internal
+     */
+    currentFocused: HTMLElement | TreeItem | null;
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    handleFocus: (e: FocusEvent) => void;
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    handleBlur: (e: FocusEvent) => void;
+    /**
+     * ref to the tree item
+     *
+     * @internal
+     */
+    treeView: HTMLElement;
+    private nested;
+    connectedCallback(): void;
+    /**
+     * KeyDown handler
+     *
+     *  @internal
+     */
+    handleKeyDown: (e: KeyboardEvent) => boolean | void;
+    /**
+     * Handles click events bubbling up
+     *
+     *  @internal
+     */
+    handleClick(e: Event): boolean | void;
+    /**
+     * Handles the selected-changed events bubbling up
+     * from child tree items
+     *
+     *  @internal
+     */
+    handleSelectedChange: (e: Event) => boolean | void;
+    /**
+     * Move focus to a tree item based on its offset from the provided item
+     */
+    private focusNextNode;
+    /**
+     * Updates the tree view when slottedTreeItems changes
+     */
+    private setItems;
+    /**
+     * checks if there are any nested tree items
+     */
+    private getValidFocusableItem;
+    /**
+     * checks if there are any nested tree items
+     */
+    private checkForNestedItems;
+    /**
+     * check if the item is focusable
+     */
+    private isFocusableElement;
+    private isSelectedElement;
+    private getVisibleNodes;
+}

package/dist/dts/tree-view/tree-view.template.d.ts

@@ -0,0 +1,8 @@
+import type { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { TreeView } from "./tree-view.js";
+/**
+ * The template for the {@link @ni/fast-foundation#TreeView} component.
+ * @public
+ */
+export declare const treeViewTemplate: FoundationElementTemplate<ViewTemplate<TreeView>>;

package/dist/dts/utilities/apply-mixins.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ * @public
+ */
+export declare function applyMixins(derivedCtor: any, ...baseCtors: any[]): void;

package/dist/dts/utilities/composed-contains.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Determines if the reference element contains the test element in a "composed" DOM tree that
+ * ignores shadow DOM boundaries.
+ *
+ * Returns true of the test element is a descendent of the reference, or exist in
+ * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
+ * @param reference - The element to test for containment against.
+ * @param test - The element being tested for containment.
+ *
+ * @public
+ */
+export declare function composedContains(reference: HTMLElement, test: HTMLElement): boolean;

package/dist/dts/utilities/composed-parent.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
+ * When the parent of a node is a shadow-root, it will return the host
+ * element of the shadow root. Otherwise it will return the parent node or null if
+ * no parent node exists.
+ * @param element - The element for which to retrieve the composed parent
+ *
+ * @public
+ */
+export declare function composedParent<T extends HTMLElement>(element: T): HTMLElement | null;

package/dist/dts/utilities/direction.d.ts

@@ -0,0 +1,7 @@
+import { Direction } from "@ni/fast-web-utilities";
+/**
+ * a method to determine the current localization direction of the view
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @public
+ */
+export declare const getDirection: (rootNode: HTMLElement) => Direction;

package/dist/dts/utilities/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./apply-mixins.js";
+export * from "./composed-parent.js";
+export { composedContains } from "./composed-contains.js";
+export * from "./match-media-stylesheet-behavior.js";
+export * from "./property-stylesheet-behavior.js";
+export * from "./style/index.js";
+export * from "./direction.js";
+export * from "./whitespace-filter.js";

package/dist/dts/utilities/intersection-service.d.ts

@@ -0,0 +1,30 @@
+/**
+ *  A service to batch intersection event callbacks so multiple elements can share a single observer
+ *
+ * @public
+ */
+export declare class IntersectionService {
+    private intersectionDetector;
+    private observedElements;
+    constructor();
+    /**
+     * Request the position of a target element
+     *
+     * @internal
+     */
+    requestPosition: (target: Element, callback: (entries: IntersectionObserverEntry[]) => void) => void;
+    /**
+     * Cancel a position request
+     *
+     * @internal
+     */
+    cancelRequestPosition: (target: Element, callback: any) => void;
+    /**
+     * initialize intersection detector
+     */
+    private initializeIntersectionDetector;
+    /**
+     *  Handle intersections
+     */
+    private handleIntersection;
+}

package/dist/dts/utilities/match-media-stylesheet-behavior.d.ts

@@ -0,0 +1,124 @@
+import type { Behavior, ElementStyles, FASTElement } from "@ni/fast-element";
+/**
+ * An event listener fired by a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MediaQueryList }.
+ * @public
+ */
+export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+/**
+ * An abstract behavior to react to media queries. Implementations should implement
+ * the `constructListener` method to perform some action based on media query changes.
+ *
+ * @public
+ */
+export declare abstract class MatchMediaBehavior implements Behavior {
+    /**
+     * The media query that the behavior operates on.
+     */
+    readonly query: MediaQueryList;
+    /**
+     *
+     * @param query - The media query to operate from.
+     */
+    constructor(query: MediaQueryList);
+    /**
+     * Constructs a function that will be invoked with the MediaQueryList context
+     * @param source - the element the behavior is acting on.
+     */
+    protected abstract constructListener(source: typeof FASTElement): MediaQueryListListener;
+    /**
+     * Binds the behavior to the element.
+     * @param source - The element for which the behavior is bound.
+     */
+    bind(source: typeof FASTElement & HTMLElement): void;
+    /**
+     * Unbinds the behavior from the element.
+     * @param source - The element for which the behavior is unbinding.
+     */
+    unbind(source: typeof FASTElement & HTMLElement): void;
+    /**
+     * The behavior needs to operate on element instances but elements might share a behavior instance.
+     * To ensure proper attachment / detachment per instance, we construct a listener for
+     * each bind invocation and cache the listeners by element reference.
+     */
+    private listenerCache;
+}
+/**
+ * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
+ * styles are applied while the a query matches the environment and that styles are not applied if the query does
+ * not match the environment.
+ *
+ * @public
+ */
+export declare class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    /**
+     * The media query that the behavior operates on.
+     */
+    readonly query: MediaQueryList;
+    /**
+     * The styles object to be managed by the behavior.
+     */
+    readonly styles: ElementStyles;
+    /**
+     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+     * @param query - The media query to operate from.
+     * @param styles - The styles to coordinate with the query.
+     */
+    constructor(query: MediaQueryList, styles: ElementStyles);
+    /**
+     * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+     * a provided query.
+     * @param query - The media query to operate from.
+     *
+     * @public
+     * @example
+     *
+     * ```ts
+     * import { css } from "@ni/fast-element";
+     * import { MatchMediaStyleSheetBehavior } from "@ni/fast-foundation";
+     *
+     * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
+     *   window.matchMedia("(orientation: landscape)")
+     * );
+     * const styles = css`
+     *   :host {
+     *     width: 200px;
+     *     height: 400px;
+     *   }
+     * `
+     * .withBehaviors(landscapeBehavior(css`
+     *   :host {
+     *     width: 400px;
+     *     height: 200px;
+     *   }
+     * `))
+     * ```
+     */
+    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+    /**
+     * Constructs a match-media listener for a provided element.
+     * @param source - the element for which to attach or detach styles.
+     * @internal
+     */
+    protected constructListener(source: typeof FASTElement): MediaQueryListListener;
+    /**
+     * Unbinds the behavior from the element.
+     * @param source - The element for which the behavior is unbinding.
+     * @internal
+     */
+    unbind(source: typeof FASTElement & HTMLElement): void;
+}
+/**
+ * This can be used to construct a behavior to apply a forced-colors only stylesheet.
+ * @public
+ */
+export declare const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
+ * @public
+ */
+export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
+ * @public
+ */
+export declare const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;

package/dist/dts/utilities/property-stylesheet-behavior.d.ts

@@ -0,0 +1,38 @@
+import { Behavior, ElementStyles, FASTElement } from "@ni/fast-element";
+/**
+ * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
+ * styles are applied while the property matches and that styles are not applied if the property does
+ * not match.
+ *
+ * @public
+ */
+export declare class PropertyStyleSheetBehavior implements Behavior {
+    private propertyName;
+    private value;
+    private styles;
+    /**
+     * Constructs a {@link PropertyStyleSheetBehavior} instance.
+     * @param propertyName - The property name to operate from.
+     * @param value - The property value to operate from.
+     * @param styles - The styles to coordinate with the property.
+     */
+    constructor(propertyName: string, value: any, styles: ElementStyles);
+    /**
+     * Binds the behavior to the element.
+     * @param elementInstance - The element for which the property is applied.
+     */
+    bind(elementInstance: FASTElement): void;
+    /**
+     * Unbinds the behavior from the element.
+     * @param source - The element for which the behavior is unbinding.
+     * @internal
+     */
+    unbind(source: typeof FASTElement & HTMLElement): void;
+    /**
+     * Change event for the provided element.
+     * @param source - the element for which to attach or detach styles.
+     * @param key - the key to lookup to know if the element already has the styles
+     * @internal
+     */
+    handleChange(source: FASTElement, key: string): void;
+}

package/dist/dts/utilities/resize-observer.d.ts

@@ -0,0 +1,31 @@
+/** @internal */
+export interface ContentRect {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+}
+/** @internal */
+export declare const contentRect: (target: Element) => Readonly<ContentRect>;
+/** @internal */
+export declare class ResizeObserverEntry {
+    readonly target: Element;
+    readonly contentRect: ContentRect;
+    constructor(target: Element);
+}
+/** @internal */
+export declare class ResizeObserverClassDefinition {
+    constructor(callback: ResizeObserverCallback);
+    observe(target: Element): void;
+    unobserve(target: Element): void;
+    disconnect(): void;
+}
+/** @internal */
+export declare type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserverClassDefinition) => void;
+/** @internal */
+export type ConstructibleResizeObserver = new (callback: ResizeObserverCallback) => ResizeObserverClassDefinition;
+declare global {
+    interface WindowWithResizeObserver extends Window {
+        ResizeObserver: ConstructibleResizeObserver;
+    }
+}

package/dist/dts/utilities/root-active-element.d.ts

@@ -0,0 +1 @@
+export declare function getRootActiveElement(element: Element): Element | null;

package/dist/dts/utilities/style/disabled.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The CSS value for disabled cursors.
+ * @public
+ */
+export declare const disabledCursor = "not-allowed";

package/dist/dts/utilities/style/display.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Define all possible CSS display values.
+ * @public
+ */
+export type CSSDisplayPropertyValue = "block" | "contents" | "flex" | "grid" | "inherit" | "initial" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table" | "list-item" | "none" | "run-in" | "table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row" | "table-row-group";
+/**
+ * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
+ * @public
+ */
+export declare const hidden = ":host([hidden]){display:none}";
+/**
+ * Applies a CSS display property.
+ * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
+ * @param display - The CSS display property value
+ * @public
+ */
+export declare function display(displayValue: CSSDisplayPropertyValue): string;

package/dist/dts/utilities/style/focus.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The string representing the focus selector to be used. Value
+ * will be "focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+ * is supported and "focus" when it is not.
+ *
+ * @public
+ */
+export declare const focusVisible: string;

package/dist/dts/utilities/style/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./disabled.js";
+export * from "./display.js";
+export * from "./focus.js";

package/dist/dts/utilities/whitespace-filter.d.ts

@@ -0,0 +1,9 @@
+/**
+ * a method to filter out any whitespace _only_ nodes, to be used inside a template
+ * @param value - The Node that is being inspected
+ * @param index - The index of the node within the array
+ * @param array - The Node array that is being filtered
+ *
+ * @public
+ */
+export declare function whitespaceFilter(value: Node, index: number, array: Node[]): boolean;

package/dist/esm/accordion/accordion.js

@@ -0,0 +1,185 @@
+import { __decorate } from "tslib";
+import { attr, observable } from "@ni/fast-element";
+import { keyArrowDown, keyArrowUp, keyEnd, keyHome, wrapInBounds, } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { AccordionItem } from "../accordion-item/accordion-item.js";
+/**
+ * Expand mode for {@link Accordion}
+ * @public
+ */
+export const AccordionExpandMode = {
+    /**
+     * Designates only a single {@link @ni/fast-foundation#(AccordionItem:class) } can be open a time.
+     */
+    single: "single",
+    /**
+     * Designates multiple {@link @ni/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
+     */
+    multi: "multi",
+};
+/**
+ * An Accordion Custom HTML Element
+ * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
+ *
+ * @fires change - Fires a custom 'change' event when the active item changes
+ * @csspart item - The slot for the accordion items
+ * @public
+ *
+ * @remarks
+ * Designed to be used with {@link @ni/fast-foundation#accordionTemplate} and {@link @ni/fast-foundation#(AccordionItem:class)}.
+ */
+export class Accordion extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Controls the expand mode of the Accordion, either allowing
+         * single or multiple item expansion.
+         * @public
+         *
+         * @remarks
+         * HTML attribute: expand-mode
+         */
+        this.expandmode = AccordionExpandMode.multi;
+        this.activeItemIndex = 0;
+        this.change = () => {
+            this.$emit("change", this.activeid);
+        };
+        this.setItems = () => {
+            var _a;
+            if (this.accordionItems.length === 0) {
+                return;
+            }
+            this.accordionIds = this.getItemIds();
+            this.accordionItems.forEach((item, index) => {
+                if (item instanceof AccordionItem) {
+                    item.addEventListener("change", this.activeItemChange);
+                    if (this.isSingleExpandMode()) {
+                        this.activeItemIndex !== index
+                            ? (item.expanded = false)
+                            : (item.expanded = true);
+                    }
+                }
+                const itemId = this.accordionIds[index];
+                item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
+                this.activeid = this.accordionIds[this.activeItemIndex];
+                item.addEventListener("keydown", this.handleItemKeyDown);
+                item.addEventListener("focus", this.handleItemFocus);
+            });
+            if (this.isSingleExpandMode()) {
+                const expandedItem = (_a = this.findExpandedItem()) !== null && _a !== void 0 ? _a : this.accordionItems[0];
+                expandedItem.setAttribute("aria-disabled", "true");
+            }
+        };
+        this.removeItemListeners = (oldValue) => {
+            oldValue.forEach((item, index) => {
+                item.removeEventListener("change", this.activeItemChange);
+                item.removeEventListener("keydown", this.handleItemKeyDown);
+                item.removeEventListener("focus", this.handleItemFocus);
+            });
+        };
+        this.activeItemChange = (event) => {
+            if (event.defaultPrevented || event.target !== event.currentTarget) {
+                return;
+            }
+            event.preventDefault();
+            const selectedItem = event.target;
+            this.activeid = selectedItem.getAttribute("id");
+            if (this.isSingleExpandMode()) {
+                this.resetItems();
+                selectedItem.expanded = true;
+                selectedItem.setAttribute("aria-disabled", "true");
+                this.accordionItems.forEach((item) => {
+                    if (!item.hasAttribute("disabled") && item.id !== this.activeid) {
+                        item.removeAttribute("aria-disabled");
+                    }
+                });
+            }
+            this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
+            this.change();
+        };
+        this.handleItemKeyDown = (event) => {
+            // only handle the keydown if the event target is the accordion item
+            // prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content
+            if (event.target !== event.currentTarget) {
+                return;
+            }
+            this.accordionIds = this.getItemIds();
+            switch (event.key) {
+                case keyArrowUp:
+                    event.preventDefault();
+                    this.adjust(-1);
+                    break;
+                case keyArrowDown:
+                    event.preventDefault();
+                    this.adjust(1);
+                    break;
+                case keyHome:
+                    this.activeItemIndex = 0;
+                    this.focusItem();
+                    break;
+                case keyEnd:
+                    this.activeItemIndex = this.accordionItems.length - 1;
+                    this.focusItem();
+                    break;
+            }
+        };
+        this.handleItemFocus = (event) => {
+            // update the active item index if the focus moves to an accordion item via a different method other than the up and down arrow key actions
+            // only do so if the focus is actually on the accordion item and not on any of its children
+            if (event.target === event.currentTarget) {
+                const focusedItem = event.target;
+                const focusedIndex = (this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem));
+                if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
+                    this.activeItemIndex = focusedIndex;
+                    this.activeid = this.accordionIds[this.activeItemIndex];
+                }
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    accordionItemsChanged(oldValue, newValue) {
+        if (this.$fastController.isConnected) {
+            this.removeItemListeners(oldValue);
+            this.setItems();
+        }
+    }
+    findExpandedItem() {
+        for (let item = 0; item < this.accordionItems.length; item++) {
+            if (this.accordionItems[item].getAttribute("expanded") === "true") {
+                return this.accordionItems[item];
+            }
+        }
+        return null;
+    }
+    resetItems() {
+        this.accordionItems.forEach((item, index) => {
+            item.expanded = false;
+        });
+    }
+    getItemIds() {
+        return this.accordionItems.map((accordionItem) => {
+            return accordionItem.getAttribute("id");
+        });
+    }
+    isSingleExpandMode() {
+        return this.expandmode === AccordionExpandMode.single;
+    }
+    adjust(adjustment) {
+        this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
+        this.focusItem();
+    }
+    focusItem() {
+        const element = this.accordionItems[this.activeItemIndex];
+        if (element instanceof AccordionItem) {
+            element.expandbutton.focus();
+        }
+    }
+}
+__decorate([
+    attr({ attribute: "expand-mode" })
+], Accordion.prototype, "expandmode", void 0);
+__decorate([
+    observable
+], Accordion.prototype, "accordionItems", void 0);

package/dist/esm/accordion/accordion.template.js

@@ -0,0 +1,11 @@
+import { elements, html, slotted } from "@ni/fast-element";
+/**
+ * The template for the {@link @ni/fast-foundation#Accordion} component.
+ * @public
+ */
+export const accordionTemplate = (context, definition) => /* TODO: deprecate slot name `item` to only support default slot https://github.com/microsoft/fast/issues/5515 */ html `
+    <template>
+        <slot ${slotted({ property: "accordionItems", filter: elements() })}></slot>
+        <slot name="item" part="item" ${slotted("accordionItems")}></slot>
+    </template>
+`;

package/dist/esm/accordion/index.js

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