@ni/fast-foundation 0.0.2

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

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

package/dist/dts/slider/slider-utilities.d.ts

@@ -0,0 +1,5 @@
+import { Direction } from "@ni/fast-web-utilities";
+/**
+ * Converts a pixel coordinate on the track to a percent of the track's range
+ */
+export declare function convertPixelToPercent(pixelPos: number, minPosition: number, maxPosition: number, direction?: Direction): number;

package/dist/dts/slider/slider.d.ts

@@ -0,0 +1,230 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import { Direction, Orientation } from "@ni/fast-web-utilities";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { FormAssociatedSlider } from "./slider.form-associated.js";
+/**
+ * The selection modes of a {@link @ni/fast-foundation#(Slider:class)}.
+ * @public
+ */
+export declare const SliderMode: {
+    readonly singleValue: "single-value";
+};
+/**
+ * The types for the selection mode of the slider
+ * @public
+ */
+export type SliderMode = typeof SliderMode[keyof typeof SliderMode];
+/**
+ * The configuration structure of {@link @ni/fast-foundation#(Slider:class)}.
+ * @public
+ */
+export interface SliderConfiguration {
+    max: number;
+    min: number;
+    orientation?: Orientation;
+    direction?: Direction;
+    disabled?: boolean;
+}
+/**
+ * Slider configuration options
+ * @public
+ */
+export type SliderOptions = FoundationElementDefinition & {
+    thumb?: string | SyntheticViewTemplate;
+};
+/**
+ * A Slider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#slider | ARIA slider }.
+ *
+ * @slot track - The track of the slider
+ * @slot track-start - The track-start visual indicator
+ * @slot thumb - The slider thumb
+ * @slot - The default slot for labels
+ * @csspart positioning-region - The region used to position the elements of the slider
+ * @csspart track-container - The region containing the track elements
+ * @csspart track-start - The element wrapping the track start slot
+ * @csspart thumb-container - The thumb container element which is programatically positioned
+ * @fires change - Fires a custom 'change' event when the slider value changes
+ *
+ * @public
+ */
+export declare class Slider extends FormAssociatedSlider implements SliderConfiguration {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
+    readOnly: boolean;
+    private readOnlyChanged;
+    /**
+     * @internal
+     */
+    track: HTMLDivElement;
+    /**
+     * @internal
+     */
+    thumb: HTMLDivElement;
+    /**
+     * @internal
+     */
+    stepMultiplier: number;
+    /**
+     * @internal
+     */
+    direction: Direction;
+    /**
+     * @internal
+     */
+    isDragging: boolean;
+    /**
+     * @internal
+     */
+    position: string;
+    /**
+     * @internal
+     */
+    trackWidth: number;
+    /**
+     * @internal
+     */
+    trackMinWidth: number;
+    /**
+     * @internal
+     */
+    trackHeight: number;
+    /**
+     * @internal
+     */
+    trackLeft: number;
+    /**
+     * @internal
+     */
+    trackMinHeight: number;
+    /**
+     * The value property, typed as a number.
+     *
+     * @public
+     */
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /**
+     * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
+     *
+     * @public
+     */
+    valueTextFormatter: (value: string) => string | null;
+    /**
+     * @internal
+     */
+    valueChanged(previous: string, next: string): void;
+    /**
+     * The minimum allowed value.
+     *
+     * @defaultValue - 0
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
+    min: number;
+    private minChanged;
+    /**
+     * The maximum allowed value.
+     *
+     * @defaultValue - 10
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    max: number;
+    private maxChanged;
+    /**
+     * Value to increment or decrement via arrow keys, mouse click or drag.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: step
+     */
+    step: number;
+    private stepChanged;
+    /**
+     * The orientation of the slider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: Orientation;
+    private orientationChanged;
+    /**
+     * The selection mode.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: mode
+     */
+    mode: SliderMode;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Increment the value by the step
+     *
+     * @public
+     */
+    increment(): void;
+    /**
+     * Decrement the value by the step
+     *
+     * @public
+     */
+    decrement(): void;
+    protected keypressHandler: (e: KeyboardEvent) => void;
+    /**
+     * Places the thumb based on the current value
+     *
+     * @public
+     * @param direction - writing mode
+     */
+    private setThumbPositionForOrientation;
+    /**
+     * Update the step multiplier used to ensure rounding errors from steps that
+     * are not whole numbers
+     */
+    private updateStepMultiplier;
+    private setupTrackConstraints;
+    private setupListeners;
+    /**
+     * @internal
+     */
+    initialValue: string;
+    private get midpoint();
+    private setupDefaultValue;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     *  If the event handler is null it removes the events
+     */
+    private handleThumbMouseDown;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     */
+    private handleMouseMove;
+    private calculateNewValue;
+    /**
+     * Handle a window mouse up during a drag operation
+     */
+    private handleWindowMouseUp;
+    private stopDragging;
+    /**
+     *
+     * @param e - MouseEvent or null. If there is no event handler it will remove the events
+     */
+    private handleMouseDown;
+    private convertToConstrainedValue;
+}

package/dist/dts/slider/slider.form-associated.d.ts

@@ -0,0 +1,16 @@
+import { FormAssociated } from "../form-associated/form-associated.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+declare class _Slider extends FoundationElement {
+}
+interface _Slider extends FormAssociated {
+}
+declare const FormAssociatedSlider_base: typeof _Slider;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(Slider:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedSlider extends FormAssociatedSlider_base {
+    proxy: HTMLInputElement;
+}
+export {};

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

package/dist/dts/slider-label/index.d.ts

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

package/dist/dts/slider-label/slider-label.d.ts

@@ -0,0 +1,81 @@
+import { Direction, Orientation } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A label element intended to be used with the {@link @ni/fast-foundation#(Slider:class)} component.
+ *
+ * @slot - The default slot for the label content
+ * @csspart root - The element wrapping the label mark and text
+ *
+ * @public
+ */
+export declare class SliderLabel extends FoundationElement {
+    /**
+     * @internal
+     */
+    positionStyle: string;
+    /**
+     * @internal
+     */
+    root: HTMLDivElement;
+    /**
+     * The position of the label relative to the min and max value of the parent {@link @ni/fast-foundation#(Slider:class)}.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: position
+     */
+    position: string;
+    private positionChanged;
+    /**
+     * Hides the tick mark.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: hide-mark
+     */
+    hideMark: boolean;
+    /**
+     * The disabled state of the label. This is generally controlled by the parent {@link @ni/fast-foundation#(Slider:class)}.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * @internal
+     */
+    sliderOrientation: Orientation;
+    /**
+     * @internal
+     */
+    protected sliderOrientationChanged(): void;
+    /**
+     * @internal
+     */
+    sliderMinPosition: number;
+    /**
+     * @internal
+     */
+    sliderMaxPosition: number;
+    /**
+     * @internal
+     */
+    sliderDirection: Direction;
+    private notifier;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    handleChange(source: any, propertyName: string): void;
+    private isSliderConfig;
+    private getSliderConfiguration;
+    private positionAsStyle;
+}

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

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

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

package/dist/dts/switch/switch.d.ts

@@ -0,0 +1,60 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { FormAssociatedSwitch } from "./switch.form-associated.js";
+/**
+ * Switch configuration options
+ * @public
+ */
+export type SwitchOptions = FoundationElementDefinition & {
+    switch?: string | SyntheticViewTemplate;
+};
+/**
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
+ *
+ * @slot - The deafult slot for the label
+ * @slot checked-message - The message when in a checked state
+ * @slot unchecked-message - The message when in an unchecked state
+ * @csspart label - The label
+ * @csspart switch - The element representing the switch, which wraps the indicator
+ * @csspart status-message - The wrapper for the status messages
+ * @csspart checked-message - The checked message
+ * @csspart unchecked-message - The unchecked message
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export declare class Switch extends FormAssociatedSwitch {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
+    readOnly: boolean;
+    private readOnlyChanged;
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @internal
+     */
+    initialValue: string;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    constructor();
+    /**
+     * @internal
+     */
+    keypressHandler: (e: KeyboardEvent) => void;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => void;
+    /**
+     * @internal
+     */
+    checkedChanged(prev: boolean | undefined, next: boolean): void;
+}

package/dist/dts/switch/switch.form-associated.d.ts

@@ -0,0 +1,16 @@
+import { CheckableFormAssociated } from "../form-associated/form-associated.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+declare class _Switch extends FoundationElement {
+}
+interface _Switch extends CheckableFormAssociated {
+}
+declare const FormAssociatedSwitch_base: typeof _Switch;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(Switch:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedSwitch extends FormAssociatedSwitch_base {
+    proxy: HTMLInputElement;
+}
+export {};

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

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

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

package/dist/dts/tab/tab.d.ts

@@ -0,0 +1,17 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Tab Component to be used with {@link @ni/fast-foundation#(Tabs:class)}
+ *
+ * @slot - The default slot for the tab content
+ *
+ * @public
+ */
+export declare class Tab extends FoundationElement {
+    /**
+     * 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;
+}

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

package/dist/dts/tab-panel/index.d.ts

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

package/dist/dts/tab-panel/tab-panel.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A TabPanel Component to be used with {@link @ni/fast-foundation#(Tabs:class)}
+ *
+ * @slot - The default slot for the tabpanel content
+ *
+ * @public
+ */
+export declare class TabPanel extends FoundationElement {
+}

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

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

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

package/dist/dts/tabs/tabs.d.ts

@@ -0,0 +1,140 @@
+import { StartEnd, StartEndOptions } from "../patterns/start-end.js";
+import { FoundationElement, FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+/**
+ * Tabs option configuration options
+ * @public
+ */
+export type TabsOptions = FoundationElementDefinition & StartEndOptions;
+/**
+ * The orientation of the {@link @ni/fast-foundation#(Tabs:class)} component
+ * @public
+ */
+export declare const TabsOrientation: {
+    readonly vertical: "vertical";
+    readonly horizontal: "horizontal";
+};
+/**
+ * The types for the Tabs component
+ * @public
+ */
+export type TabsOrientation = typeof TabsOrientation[keyof typeof TabsOrientation];
+/**
+ * A Tabs Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#tablist | ARIA tablist }.
+ *
+ * @slot start - Content which can be provided before the tablist element
+ * @slot end - Content which can be provided after the tablist element
+ * @slot tab - The slot for tabs
+ * @slot tabpanel - The slot for tabpanels
+ * @csspart tablist - The element wrapping for the tabs
+ * @csspart tab - The tab slot
+ * @csspart activeIndicator - The visual indicator
+ * @csspart tabpanel - The tabpanel slot
+ * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
+ *
+ * @public
+ */
+export declare class Tabs extends FoundationElement {
+    /**
+     * The orientation
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: TabsOrientation;
+    /**
+     * @internal
+     */
+    orientationChanged(): void;
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid: string;
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * @internal
+     */
+    tabs: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabsChanged(): void;
+    /**
+     * @internal
+     */
+    tabpanels: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabpanelsChanged(): void;
+    /**
+     * Whether or not to show the active indicator
+     * @public
+     * @remarks
+     * HTML Attribute: activeindicator
+     */
+    activeindicator: boolean;
+    /**
+     * @internal
+     */
+    activeIndicatorRef: HTMLElement;
+    /**
+     * @internal
+     */
+    showActiveIndicator: boolean;
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private ticking;
+    private tabIds;
+    private tabpanelIds;
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private getActiveIndex;
+    private setTabs;
+    private setTabPanels;
+    private getTabIds;
+    private getTabPanelIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
+    private handleActiveIndicatorPosition;
+    private animateActiveIndicator;
+    /**
+     * The adjust method for FASTTabs
+     * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
+     */
+    adjust(adjustment: number): void;
+    private adjustForward;
+    private adjustBackward;
+    private moveToTabByIndex;
+    private focusTab;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}
+/**
+ * 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 Tabs extends StartEnd {
+}

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