@ni/fast-foundation 0.0.2

package/dist/dts/toolbar/toolbar.d.ts

@@ -0,0 +1,167 @@
+import { Direction, Orientation } from "@ni/fast-web-utilities";
+import { FoundationElement, FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { ARIAGlobalStatesAndProperties } from "../patterns/aria-global.js";
+import { StartEnd, StartEndOptions } from "../patterns/start-end.js";
+/**
+ * Toolbar configuration options
+ * @public
+ */
+export type ToolbarOptions = FoundationElementDefinition & StartEndOptions;
+/**
+ * A Toolbar Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria-practices/#Toolbar|ARIA Toolbar}.
+ *
+ * @slot start - Content which can be provided before the slotted items
+ * @slot end - Content which can be provided after the slotted items
+ * @slot - The default slot for slotted items
+ * @slot label - The toolbar label
+ * @csspart positioning-region - The element containing the items, start and end slots
+ *
+ * @public
+ */
+export declare class Toolbar extends FoundationElement {
+    /**
+     * The internal index of the currently focused element.
+     *
+     * @internal
+     */
+    private _activeIndex;
+    /**
+     * The index of the currently focused element, clamped between 0 and the last element.
+     *
+     * @internal
+     */
+    get activeIndex(): number;
+    set activeIndex(value: number);
+    /**
+     * The text direction of the toolbar.
+     *
+     * @internal
+     */
+    direction: Direction;
+    /**
+     * The collection of focusable toolbar controls.
+     *
+     * @internal
+     */
+    private focusableElements;
+    /**
+     * The orientation of the toolbar.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `orientation`
+     */
+    orientation: Orientation;
+    /**
+     * The elements in the default slot.
+     *
+     * @internal
+     */
+    slottedItems: HTMLElement[];
+    protected slottedItemsChanged(): void;
+    /**
+     * The elements in the label slot.
+     *
+     * @internal
+     */
+    slottedLabel: HTMLElement[];
+    /**
+     * Set the activeIndex when a focusable element in the toolbar is clicked.
+     *
+     * @internal
+     */
+    mouseDownHandler(e: MouseEvent): boolean | void;
+    childItems: Element[];
+    protected childItemsChanged(prev: undefined | Element[], next: Element[]): void;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * When the toolbar receives focus, set the currently active element as focused.
+     *
+     * @internal
+     */
+    focusinHandler(e: FocusEvent): boolean | void;
+    /**
+     * Determines a value that can be used to iterate a list with the arrow keys.
+     *
+     * @param this - An element with an orientation and direction
+     * @param key - The event key value
+     * @internal
+     */
+    private getDirectionalIncrementer;
+    /**
+     * Handle keyboard events for the toolbar.
+     *
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * get all the slotted elements
+     * @internal
+     */
+    protected get allSlottedItems(): (HTMLElement | Node)[];
+    /**
+     * Prepare the slotted elements which can be focusable.
+     *
+     * @internal
+     */
+    protected reduceFocusableElements(): void;
+    /**
+     * Set the activeIndex and focus the corresponding control.
+     *
+     * @param activeIndex - The new index to set
+     * @internal
+     */
+    private setFocusedElement;
+    /**
+     * Reduce a collection to only its focusable elements.
+     *
+     * @param elements - Collection of elements to reduce
+     * @param element - The current element
+     *
+     * @internal
+     */
+    private static reduceFocusableItems;
+    /**
+     * @internal
+     */
+    private setFocusableElements;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA toolbar role
+ *
+ * @public
+ */
+export declare class DelegatesARIAToolbar {
+    /**
+     * The id of the element labeling the toolbar.
+     * @public
+     * @remarks
+     * HTML Attribute: aria-labelledby
+     */
+    ariaLabelledby: string | null;
+    /**
+     * The label surfaced to assistive technologies.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-label
+     */
+    ariaLabel: string | null;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface DelegatesARIAToolbar extends ARIAGlobalStatesAndProperties {
+}
+/**
+ * @internal
+ */
+export interface Toolbar extends StartEnd, DelegatesARIAToolbar {
+}

package/dist/dts/toolbar/toolbar.template.d.ts

@@ -0,0 +1,9 @@
+import type { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { Toolbar, ToolbarOptions } from "./toolbar.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(Toolbar:class)} component.
+ *
+ * @public
+ */
+export declare const toolbarTemplate: FoundationElementTemplate<ViewTemplate<Toolbar>, ToolbarOptions>;

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

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

package/dist/dts/tooltip/tooltip.d.ts

@@ -0,0 +1,239 @@
+import { Direction } from "@ni/fast-web-utilities";
+import type { AnchoredRegion, AutoUpdateMode, AxisPositioningMode, AxisScalingMode } from "../anchored-region/anchored-region.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { TooltipPosition } from "./tooltip.options.js";
+export { TooltipPosition };
+/**
+ * An Tooltip Custom HTML Element.
+ *
+ * @slot - The default slot for the tooltip content
+ * @csspart tooltip - The tooltip element
+ * @fires dismiss - Fires a custom 'dismiss' event when the tooltip is visible and escape key is pressed
+ *
+ * @public
+ */
+export declare class Tooltip extends FoundationElement {
+    /**
+     * Whether the tooltip is visible or not.
+     * If undefined tooltip is shown when anchor element is hovered
+     *
+     * @defaultValue - undefined
+     * @public
+     * HTML Attribute: visible
+     */
+    visible: boolean;
+    private visibleChanged;
+    /**
+     * The id of the element the tooltip is anchored to
+     *
+     * @defaultValue - undefined
+     * @public
+     * HTML Attribute: anchor
+     */
+    anchor: string;
+    private anchorChanged;
+    /**
+     * The delay in milliseconds before a tooltip is shown after a hover event
+     *
+     * @defaultValue - 300
+     * @public
+     * HTML Attribute: delay
+     */
+    delay: number;
+    /**
+     * Controls the placement of the tooltip relative to the anchor.
+     * When the position is undefined the tooltip is placed above or below the anchor based on available space.
+     *
+     * @defaultValue - undefined
+     * @public
+     * HTML Attribute: position
+     */
+    position: TooltipPosition;
+    private positionChanged;
+    /**
+     * Controls when the tooltip updates its position, default is 'anchor' which only updates when
+     * the anchor is resized.  'auto' will update on scroll/resize events.
+     * Corresponds to anchored-region auto-update-mode.
+     * @public
+     * @remarks
+     * HTML Attribute: auto-update-mode
+     */
+    autoUpdateMode: AutoUpdateMode;
+    /**
+     * Controls if the tooltip will always remain fully in the viewport on the horizontal axis
+     * @public
+     * @remarks
+     * HTML Attribute: horizontal-viewport-lock
+     */
+    horizontalViewportLock: boolean;
+    /**
+     * Controls if the tooltip will always remain fully in the viewport on the vertical axis
+     * @public
+     * @remarks
+     * HTML Attribute: vertical-viewport-lock
+     */
+    verticalViewportLock: boolean;
+    /**
+     * the html element currently being used as anchor.
+     * Setting this directly overrides the anchor attribute.
+     *
+     * @public
+     */
+    anchorElement: HTMLElement | null;
+    private anchorElementChanged;
+    /**
+     * The current viewport element instance
+     *
+     * @internal
+     */
+    viewportElement: HTMLElement | null;
+    private viewportElementChanged;
+    /**
+     * @internal
+     * @defaultValue "dynamic"
+     */
+    verticalPositioningMode: AxisPositioningMode;
+    /**
+     * @internal
+     * @defaultValue "dynamic"
+     */
+    horizontalPositioningMode: AxisPositioningMode;
+    /**
+     * @internal
+     */
+    horizontalInset: string;
+    /**
+     * @internal
+     */
+    verticalInset: string;
+    /**
+     * @internal
+     */
+    horizontalScaling: AxisScalingMode;
+    /**
+     * @internal
+     */
+    verticalScaling: AxisScalingMode;
+    /**
+     * @internal
+     */
+    verticalDefaultPosition: string | undefined;
+    /**
+     * @internal
+     */
+    horizontalDefaultPosition: string | undefined;
+    /**
+     * @internal
+     */
+    tooltipVisible: boolean;
+    /**
+     * Track current direction to pass to the anchored region
+     * updated when tooltip is shown
+     *
+     * @internal
+     */
+    currentDirection: Direction;
+    /**
+     * reference to the anchored region
+     *
+     * @internal
+     */
+    region: AnchoredRegion;
+    /**
+     * The timer that tracks delay time before the tooltip is shown on hover
+     */
+    private showDelayTimer;
+    /**
+     * The timer that tracks delay time before the tooltip is hidden
+     */
+    private hideDelayTimer;
+    /**
+     * Indicates whether the anchor is currently being hovered or has focus
+     */
+    private isAnchorHoveredFocused;
+    /**
+     * Indicates whether the region is currently being hovered
+     */
+    private isRegionHovered;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * invoked when the anchored region's position relative to the anchor changes
+     *
+     * @internal
+     */
+    handlePositionChange: (ev: Event) => void;
+    /**
+     * mouse enters region
+     */
+    private handleRegionMouseOver;
+    /**
+     * mouse leaves region
+     */
+    private handleRegionMouseOut;
+    /**
+     * mouse enters anchor
+     */
+    private handleAnchorMouseOver;
+    /**
+     * mouse leaves anchor
+     */
+    private handleAnchorMouseOut;
+    /**
+     * anchor gets focus
+     */
+    private handleAnchorFocusIn;
+    /**
+     * anchor loses focus
+     */
+    private handleAnchorFocusOut;
+    /**
+     * starts the hide timer
+     */
+    private startHideDelayTimer;
+    /**
+     * clears the hide delay
+     */
+    private clearHideDelayTimer;
+    /**
+     * starts the show timer if not currently running
+     */
+    private startShowDelayTimer;
+    /**
+     * start hover
+     */
+    private startHover;
+    /**
+     * clears the show delay
+     */
+    private clearShowDelayTimer;
+    /**
+     * updated the properties being passed to the anchored region
+     */
+    private updateLayout;
+    /**
+     *  Gets the anchor element by id
+     */
+    private getAnchor;
+    /**
+     * handles key down events to check for dismiss
+     */
+    private handleDocumentKeydown;
+    /**
+     * determines whether to show or hide the tooltip based on current state
+     */
+    private updateTooltipVisibility;
+    /**
+     * shows the tooltip
+     */
+    private showTooltip;
+    /**
+     * hides the tooltip
+     */
+    private hideTooltip;
+    /**
+     * updates the tooltip anchored region props after it has been
+     * added to the DOM
+     */
+    private setRegionProps;
+}

package/dist/dts/tooltip/tooltip.options.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Enumerates possible tooltip positions
+ *
+ * @public
+ */
+export declare const TooltipPosition: {
+    /**
+     * The tooltip is positioned above the element
+     */
+    readonly top: "top";
+    /**
+     * The tooltip is positioned to the right of the element
+     */
+    readonly right: "right";
+    /**
+     * The tooltip is positioned below the element
+     */
+    readonly bottom: "bottom";
+    /**
+     * The tooltip is positioned to the left of the element
+     */
+    readonly left: "left";
+    /**
+     * The tooltip is positioned before the element
+     */
+    readonly start: "start";
+    /**
+     * The tooltip is positioned after the element
+     */
+    readonly end: "end";
+    /**
+     * The tooltip is positioned above the element and to the left
+     */
+    readonly topLeft: "top-left";
+    /**
+     * The tooltip is positioned above the element and to the right
+     */
+    readonly topRight: "top-right";
+    /**
+     * The tooltip is positioned below the element and to the left
+     */
+    readonly bottomLeft: "bottom-left";
+    /**
+     * The tooltip is positioned below the element and to the right
+     */
+    readonly bottomRight: "bottom-right";
+    /**
+     * The tooltip is positioned above the element and to the left
+     */
+    readonly topStart: "top-start";
+    /**
+     * The tooltip is positioned above the element and to the right
+     */
+    readonly topEnd: "top-end";
+    /**
+     * The tooltip is positioned below the element and to the left
+     */
+    readonly bottomStart: "bottom-start";
+    /**
+     * The tooltip is positioned below the element and to the right
+     */
+    readonly bottomEnd: "bottom-end";
+};
+/**
+ * The possible tooltip positions
+ *
+ * @public
+ */
+export type TooltipPosition = typeof TooltipPosition[keyof typeof TooltipPosition];

package/dist/dts/tooltip/tooltip.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 { Tooltip } from "./tooltip.js";
+/**
+ * Creates a template for the {@link @ni/fast-foundation#(Tooltip:class)} component using the provided prefix.
+ * @public
+ */
+export declare const tooltipTemplate: FoundationElementTemplate<ViewTemplate<Tooltip>>;

package/dist/dts/tree-item/index.d.ts

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

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

@@ -0,0 +1,141 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import { StartEnd, StartEndOptions } from "../patterns/start-end.js";
+import { FoundationElement, FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+/**
+ * check if the item is a tree item
+ * @public
+ * @remarks
+ * determines if element is an HTMLElement and if it has the role treeitem
+ */
+export declare function isTreeItemElement(el: Element): el is HTMLElement;
+/**
+ * Tree Item configuration options
+ * @public
+ */
+export type TreeItemOptions = FoundationElementDefinition & StartEndOptions & {
+    expandCollapseGlyph?: string | SyntheticViewTemplate;
+};
+/**
+ * A Tree item Custom HTML Element.
+ *
+ * @slot start - Content which can be provided before the tree item content
+ * @slot end - Content which can be provided after the tree item content
+ * @slot - The default slot for tree item text content
+ * @slot item - The slot for tree items (fast tree items manage this assignment themselves)
+ * @slot expand-collapse-button - The expand/collapse button
+ * @csspart positioning-region - The element used to position the tree item content with exception of any child nodes
+ * @csspart content-region - The element containing the expand/collapse, start, and end slots
+ * @csspart items - The element wrapping any child items
+ * @csspart expand-collapse-button - The expand/collapse button
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires selected-change - Fires a custom 'selected-change' event when the selected state changes
+ *
+ * @public
+ */
+export declare class TreeItem extends FoundationElement {
+    /**
+     * When true, the control will be appear expanded by user interaction.
+     * @public
+     * @remarks
+     * HTML Attribute: expanded
+     */
+    expanded: boolean;
+    private expandedChanged;
+    /**
+     * When true, the control will appear selected by user interaction.
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+    private selectedChanged;
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     *  Reference to the expand/collapse button
+     *
+     * @internal
+     */
+    expandCollapseButton: HTMLDivElement;
+    /**
+     * Whether the item is focusable
+     *
+     * @internal
+     */
+    focusable: boolean;
+    /**
+     *
+     *
+     * @internal
+     */
+    childItems: HTMLElement[];
+    /**
+     * The slotted child tree items
+     *
+     * @internal
+     */
+    items: HTMLElement[];
+    private itemsChanged;
+    /**
+     * Indicates if the tree item is nested
+     *
+     * @internal
+     */
+    nested: boolean;
+    /**
+     *
+     *
+     * @internal
+     */
+    renderCollapsedChildren: boolean;
+    /**
+     * Places document focus on a tree item
+     *
+     * @public
+     * @param el - the element to focus
+     */
+    static focusItem(el: HTMLElement): void;
+    /**
+     * Whether the tree is nested
+     *
+     * @public
+     */
+    readonly isNestedItem: () => boolean;
+    /**
+     * Handle expand button click
+     *
+     * @internal
+     */
+    handleExpandCollapseButtonClick: (e: MouseEvent) => void;
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    handleFocus: (e: FocusEvent) => void;
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    handleBlur: (e: FocusEvent) => void;
+    /**
+     * Gets number of children
+     *
+     * @internal
+     */
+    childItemLength(): number;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast-dna/issues/3317
+ * @internal
+ */
+export interface TreeItem extends StartEnd {
+}

package/dist/dts/tree-item/tree-item.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 { TreeItem, TreeItemOptions } from "./tree-item.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(TreeItem:class)} component.
+ * @public
+ */
+export declare const treeItemTemplate: FoundationElementTemplate<ViewTemplate<TreeItem>, TreeItemOptions>;

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

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