@ni/fast-foundation 0.0.2

package/dist/dts/anchored-region/anchored-region.d.ts

@@ -0,0 +1,389 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * Defines the base behavior of an anchored region on a particular axis
+ *
+ * @public
+ */
+export type AxisPositioningMode = "uncontrolled" | "locktodefault" | "dynamic";
+/**
+ * Defines the scaling behavior of an anchored region on a particular axis
+ *
+ * @public
+ */
+export type AxisScalingMode = "anchor" | "fill" | "content";
+/**
+ * Defines the horizontal positioning options for an anchored region
+ *
+ * @public
+ */
+export type HorizontalPosition = "start" | "end" | "left" | "right" | "center" | "unset";
+/**
+ * Defines the vertical positioning options for an anchored region
+ *
+ * @public
+ */
+export type VerticalPosition = "top" | "bottom" | "center" | "unset";
+/**
+ * Defines if the component updates its position automatically. Calling update() always provokes an update.
+ * anchor - the component only updates its position when the anchor resizes (default)
+ * auto - the component updates its position when:
+ * - update() is called
+ * - the anchor resizes
+ * - the window resizes
+ * - the viewport resizes
+ * - any scroll event in the document
+ *
+ * @public
+ */
+export type AutoUpdateMode = "anchor" | "auto";
+/**
+ * Describes the possible positions of the region relative
+ * to its anchor. Depending on the axis start = left/top, end = right/bottom
+ *
+ * @public
+ */
+export type AnchoredRegionPositionLabel = "start" | "insetStart" | "insetEnd" | "end" | "center";
+/**
+ * An anchored region Custom HTML Element.
+ *
+ * @slot - The default slot for the content
+ * @fires loaded - Fires a custom 'loaded' event when the region is loaded and visible
+ * @fires positionchange - Fires a custom 'positionchange' event when the position has changed
+ *
+ * @public
+ */
+export declare class AnchoredRegion extends FoundationElement {
+    /**
+     * The HTML ID of the anchor element this region is positioned relative to
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: anchor
+     */
+    anchor: string;
+    private anchorChanged;
+    /**
+     * The HTML ID of the viewport element this region is positioned relative to
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: anchor
+     */
+    viewport: string;
+    private viewportChanged;
+    /**
+     * Sets what logic the component uses to determine horizontal placement.
+     * 'locktodefault' forces the default position
+     * 'dynamic' decides placement based on available space
+     * 'uncontrolled' does not control placement on the horizontal axis
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: horizontal-positioning-mode
+     */
+    horizontalPositioningMode: AxisPositioningMode;
+    private horizontalPositioningModeChanged;
+    /**
+     * The default horizontal position of the region relative to the anchor element
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: horizontal-default-position
+     */
+    horizontalDefaultPosition: HorizontalPosition;
+    private horizontalDefaultPositionChanged;
+    /**
+     * Whether the region remains in the viewport (ie. detaches from the anchor) on the horizontal axis
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: horizontal-viewport-lock
+     */
+    horizontalViewportLock: boolean;
+    private horizontalViewportLockChanged;
+    /**
+     * Whether the region overlaps the anchor on the horizontal axis
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: horizontal-inset
+     */
+    horizontalInset: boolean;
+    private horizontalInsetChanged;
+    /**
+     * How narrow the space allocated to the default position has to be before the widest area
+     * is selected for layout
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: horizontal-threshold
+     */
+    horizontalThreshold: number;
+    private horizontalThresholdChanged;
+    /**
+     * Defines how the width of the region is calculated
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: horizontal-scaling
+     */
+    horizontalScaling: AxisScalingMode;
+    private horizontalScalingChanged;
+    /**
+     * Sets what logic the component uses to determine vertical placement.
+     * 'locktodefault' forces the default position
+     * 'dynamic' decides placement based on available space
+     * 'uncontrolled' does not control placement on the vertical axis
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: vertical-positioning-mode
+     */
+    verticalPositioningMode: AxisPositioningMode;
+    private verticalPositioningModeChanged;
+    /**
+     * The default vertical position of the region relative to the anchor element
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: vertical-default-position
+     */
+    verticalDefaultPosition: VerticalPosition;
+    private verticalDefaultPositionChanged;
+    /**
+     * Whether the region remains in the viewport (ie. detaches from the anchor) on the vertical axis
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: vertical-viewport-lock
+     */
+    verticalViewportLock: boolean;
+    private verticalViewportLockChanged;
+    /**
+     * Whether the region overlaps the anchor on the vertical axis
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: vertical-inset
+     */
+    verticalInset: boolean;
+    private verticalInsetChanged;
+    /**
+     * How short the space allocated to the default position has to be before the tallest area
+     * is selected for layout
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: vertical-threshold
+     */
+    verticalThreshold: number;
+    private verticalThresholdChanged;
+    /**
+     * Defines how the height of the region is calculated
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: vertical-scaling
+     */
+    verticalScaling: AxisScalingMode;
+    private verticalScalingChanged;
+    /**
+     * Whether the region is positioned using css "position: fixed".
+     * Otherwise the region uses "position: absolute".
+     * Fixed placement allows the region to break out of parent containers,
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: fixed-placement
+     */
+    fixedPlacement: boolean;
+    private fixedPlacementChanged;
+    /**
+     * Defines what triggers the anchored region to revaluate positioning
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: auto-update-mode
+     */
+    autoUpdateMode: AutoUpdateMode;
+    private autoUpdateModeChanged;
+    /**
+     * The HTML element being used as the anchor
+     *
+     * @public
+     */
+    anchorElement: HTMLElement | null;
+    private anchorElementChanged;
+    /**
+     * The HTML element being used as the viewport
+     *
+     * @public
+     */
+    viewportElement: HTMLElement | null;
+    private viewportElementChanged;
+    /**
+     * indicates that an initial positioning pass on layout has completed
+     *
+     * @internal
+     */
+    initialLayoutComplete: boolean;
+    /**
+     * indicates the current horizontal position of the region
+     */
+    verticalPosition: AnchoredRegionPositionLabel | undefined;
+    /**
+     * indicates the current vertical position of the region
+     */
+    horizontalPosition: AnchoredRegionPositionLabel | undefined;
+    /**
+     * values to be applied to the component's transform on render
+     */
+    private translateX;
+    private translateY;
+    /**
+     * the span to be applied to the region on each axis
+     */
+    private regionWidth;
+    private regionHeight;
+    private resizeDetector;
+    private viewportRect;
+    private anchorRect;
+    private regionRect;
+    /**
+     * base offsets between the positioner's base position and the anchor's
+     */
+    private baseHorizontalOffset;
+    private baseVerticalOffset;
+    private pendingPositioningUpdate;
+    private pendingReset;
+    private currentDirection;
+    private regionVisible;
+    private forceUpdate;
+    private updateThreshold;
+    private static intersectionService;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    adoptedCallback(): void;
+    /**
+     * update position
+     */
+    update: () => void;
+    /**
+     * destroys the instance's resize observer
+     */
+    private disconnectResizeDetector;
+    /**
+     * initializes the instance's resize observer
+     */
+    private initializeResizeDetector;
+    /**
+     * react to attribute changes that don't require a reset
+     */
+    private updateForAttributeChange;
+    /**
+     * fully initializes the component
+     */
+    private initialize;
+    /**
+     * Request a reset if there are currently no open requests
+     */
+    private requestReset;
+    /**
+     * sets the starting configuration for component internal values
+     */
+    private setInitialState;
+    /**
+     * starts observers
+     */
+    private startObservers;
+    /**
+     * get position updates
+     */
+    private requestPositionUpdates;
+    /**
+     * stops observers
+     */
+    private stopObservers;
+    /**
+     * Gets the viewport element by id, or defaults to document root
+     */
+    private getViewport;
+    /**
+     *  Gets the anchor element by id
+     */
+    private getAnchor;
+    /**
+     *  Handle intersections
+     */
+    private handleIntersection;
+    /**
+     *  iterate through intersection entries and apply data
+     */
+    private applyIntersectionEntries;
+    /**
+     *  Update the offset values
+     */
+    private updateRegionOffset;
+    /**
+     *  compare rects to see if there is enough change to justify a DOM update
+     */
+    private isRectDifferent;
+    /**
+     *  Handle resize events
+     */
+    private handleResize;
+    /**
+     * resets the component
+     */
+    private reset;
+    /**
+     *  Recalculate layout related state values
+     */
+    private updateLayout;
+    /**
+     *  Updates the style string applied to the region element as well as the css classes attached
+     *  to the root element
+     */
+    private updateRegionStyle;
+    /**
+     *  Updates the css classes that reflect the current position of the element
+     */
+    private updatePositionClasses;
+    /**
+     * Get horizontal positioning state based on desired position
+     */
+    private setHorizontalPosition;
+    /**
+     * Set vertical positioning state based on desired position
+     */
+    private setVerticalPosition;
+    /**
+     *  Get available positions based on positioning mode
+     */
+    private getPositioningOptions;
+    /**
+     *  Get the space available for a particular relative position
+     */
+    private getAvailableSpace;
+    /**
+     * Get region dimensions
+     */
+    private getNextRegionDimension;
+    /**
+     * starts event listeners that can trigger auto updating
+     */
+    private startAutoUpdateEventListeners;
+    /**
+     * stops event listeners that can trigger auto updating
+     */
+    private stopAutoUpdateEventListeners;
+}

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

package/dist/dts/anchored-region/index.d.ts

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

package/dist/dts/avatar/avatar.d.ts

@@ -0,0 +1,62 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import { FoundationElement, FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+type AvatarShape = "circle" | "square";
+/**
+ * Avatar configuration options
+ * @public
+ */
+export type AvatarOptions = FoundationElementDefinition & {
+    media?: string | SyntheticViewTemplate;
+};
+/**
+ * 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 declare class Avatar extends FoundationElement {
+    /**
+     * Indicates the Avatar should have a color fill.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: fill
+     */
+    fill: string;
+    /**
+     * Indicates the Avatar should have a text color.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color: string;
+    /**
+     * Indicates the Avatar should have url link
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: link
+     */
+    link: string;
+    /**
+     * Indicates the Avatar shape should be. By default it will be set to "circle".
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape: AvatarShape;
+    /**
+     * Internal
+     */
+    connectedCallback(): void;
+}
+export {};

package/dist/dts/avatar/avatar.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 { Avatar, AvatarOptions } from "./avatar.js";
+/**
+ * The template for {@link @ni/fast-foundation#Avatar} component.
+ * @public
+ */
+export declare const avatarTemplate: FoundationElementTemplate<ViewTemplate<Avatar>, AvatarOptions>;

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

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

package/dist/dts/badge/badge.d.ts

@@ -0,0 +1,36 @@
+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 declare class Badge extends FoundationElement {
+    /**
+     * Indicates the badge should have a filled style.
+     * @public
+     * @remarks
+     * HTML Attribute: fill
+     */
+    fill: string;
+    /**
+     * Indicates the badge should have a filled style.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     * @privateRemarks
+     * Revisit this once we have a better story for ensuring proper contrast from author defined `fill`
+     */
+    color: string;
+    /**
+     * Indicates the element should be circular
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: circular
+     */
+    circular: boolean;
+    generateBadgeStyle: () => string | undefined;
+}

package/dist/dts/badge/badge.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 { Badge } from "./badge.js";
+/**
+ * The template for the {@link @ni/fast-foundation#Badge} component.
+ * @public
+ */
+export declare const badgeTemplate: FoundationElementTemplate<ViewTemplate<Badge>>;

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

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

package/dist/dts/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,27 @@
+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 declare class Breadcrumb extends FoundationElement {
+    /**
+     * @internal
+     */
+    slottedBreadcrumbItems: HTMLElement[];
+    slottedBreadcrumbItemsChanged(): void;
+    private setItemSeparator;
+    /**
+     * 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.
+     */
+    private findChildWithHref;
+    /**
+     *  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
+     */
+    private setAriaCurrent;
+}

package/dist/dts/breadcrumb/breadcrumb.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 { Breadcrumb } from "./breadcrumb.js";
+/**
+ * The template for the {@link @ni/fast-foundation#Breadcrumb} component.
+ * @public
+ */
+export declare const breadcrumbTemplate: FoundationElementTemplate<ViewTemplate<Breadcrumb>>;

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

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

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

@@ -0,0 +1,36 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { Anchor, DelegatesARIALink } from "../anchor/anchor.js";
+import { StartEnd, StartEndOptions } from "../patterns/index.js";
+/**
+ * Breadcrumb Item configuration options
+ *
+ * @slot - The default slot for when no href is provided or for providing your own custom elements
+ * @slot separator - The slot for providing a custom separator
+ * @csspart listitem - The wrapping container for the item, represents a semantic listitem
+ * @csspart separator - The wrapping element for the separator
+ *
+ * @public
+ */
+export type BreadcrumbItemOptions = FoundationElementDefinition & StartEndOptions & {
+    separator?: string | SyntheticViewTemplate;
+};
+/**
+ * A Breadcrumb Item Custom HTML Element.
+ *
+ * @public
+ */
+export declare class BreadcrumbItem extends Anchor {
+    /**
+     * @internal
+     */
+    separator: boolean;
+}
+/**
+ * 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 BreadcrumbItem extends StartEnd, DelegatesARIALink {
+}

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

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

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