@ni/fast-foundation 0.0.2

package/dist/dts/picker/picker-menu.template.d.ts

@@ -0,0 +1,8 @@
+import { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { PickerMenu } from "./picker-menu.js";
+/**
+ * The template for the List Picker component.
+ * @public
+ */
+export declare const pickerMenuTemplate: FoundationElementTemplate<ViewTemplate<PickerMenu>>;

package/dist/dts/picker/picker.d.ts

@@ -0,0 +1,390 @@
+import { ViewTemplate } from "@ni/fast-element";
+import { AnchoredRegion, AnchoredRegionConfig } from "../anchored-region/index.js";
+import type { PickerMenu } from "./picker-menu.js";
+import { FormAssociatedPicker } from "./picker.form-associated.js";
+import type { PickerList } from "./picker-list.js";
+/**
+ * Defines the vertical positioning options for an anchored region
+ *
+ * @beta
+ */
+export type menuConfigs = "bottom" | "bottom-fill" | "tallest" | "tallest-fill" | "top" | "top-fill";
+/**
+ * A Picker Custom HTML Element.  This is an early "alpha" version of the component.
+ * Developers should expect the api to evolve, breaking changes are possible.
+ *
+ * @alpha
+ */
+export declare class Picker extends FormAssociatedPicker {
+    /**
+     * Currently selected items. Comma delineated string ie. "apples,oranges".
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: selection
+     */
+    selection: string;
+    private selectionChanged;
+    /**
+     * Currently available options. Comma delineated string ie. "apples,oranges".
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: options
+     */
+    options: string;
+    private optionsChanged;
+    /**
+     * Whether the component should remove an option from the list when it is in the selection
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: filter-selected
+     */
+    filterSelected: boolean;
+    /**
+     * Whether the component should remove options based on the current query
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: filter-query
+     */
+    filterQuery: boolean;
+    /**
+     * The maximum number of items that can be selected.
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: max-selected
+     */
+    maxSelected: number | undefined;
+    /**
+     * The text to present to assistive technolgies when no suggestions are available.
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: no-suggestions-text
+     */
+    noSuggestionsText: string;
+    /**
+     *  The text to present to assistive technolgies when suggestions are available.
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: suggestions-available-text
+     */
+    suggestionsAvailableText: string;
+    /**
+     * The text to present to assistive technologies when suggestions are loading.
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: loading-text
+     */
+    loadingText: string;
+    /**
+     * Applied to the aria-label attribute of the input element
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: label
+     */
+    label: string;
+    /**
+     * Applied to the aria-labelledby attribute of the input element
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: labelledby
+     */
+    labelledBy: string;
+    /**
+     * Applied to the placeholder attribute of the input element
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: placholder
+     */
+    placeholder: string;
+    /**
+     * Controls menu placement
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: menu-placement
+     */
+    menuPlacement: menuConfigs;
+    private menuPlacementChanged;
+    /**
+     * Whether to display a loading state if the menu is opened.
+     *
+     * @alpha
+     */
+    showLoading: boolean;
+    private showLoadingChanged;
+    /**
+     * Template used to generate selected items.
+     * This is used in a repeat directive.
+     *
+     * @alpha
+     */
+    listItemTemplate: ViewTemplate;
+    private listItemTemplateChanged;
+    /**
+     * Default template to use for selected items (usually specified in the component template).
+     * This is used in a repeat directive.
+     *
+     * @alpha
+     */
+    defaultListItemTemplate?: ViewTemplate;
+    private defaultListItemTemplateChanged;
+    /**
+     * The item template currently in use.
+     *
+     * @internal
+     */
+    activeListItemTemplate?: ViewTemplate;
+    /**
+     * Template to use for available options.
+     * This is used in a repeat directive.
+     *
+     * @alpha
+     */
+    menuOptionTemplate: ViewTemplate;
+    private menuOptionTemplateChanged;
+    /**
+     * Default template to use for available options (usually specified in the template).
+     * This is used in a repeat directive.
+     *
+     * @alpha
+     */
+    defaultMenuOptionTemplate?: ViewTemplate;
+    private defaultMenuOptionTemplateChanged;
+    /**
+     * The option template currently in use.
+     *
+     * @internal
+     */
+    activeMenuOptionTemplate?: ViewTemplate;
+    /**
+     *  Template to use for the contents of a selected list item
+     *
+     * @alpha
+     */
+    listItemContentsTemplate: ViewTemplate;
+    /**
+     *  Template to use for the contents of menu options
+     *
+     * @alpha
+     */
+    menuOptionContentsTemplate: ViewTemplate;
+    /**
+     *  Current list of options in array form
+     *
+     * @alpha
+     */
+    optionsList: string[];
+    private optionsListChanged;
+    /**
+     * The text value currently in the input field
+     *
+     * @alpha
+     */
+    query: string;
+    private queryChanged;
+    /**
+     *  Current list of filtered options in array form
+     *
+     * @internal
+     */
+    filteredOptionsList: string[];
+    private filteredOptionsListChanged;
+    /**
+     *  Indicates if the flyout menu is open or not
+     *
+     * @internal
+     */
+    flyoutOpen: boolean;
+    private flyoutOpenChanged;
+    /**
+     *  The id of the menu element
+     *
+     * @internal
+     */
+    menuId: string;
+    /**
+     *  The tag for the selected list element (ie. "fast-picker-list" vs. "fluent-picker-list")
+     *
+     * @internal
+     */
+    selectedListTag: string;
+    /**
+     * The tag for the menu element (ie. "fast-picker-menu" vs. "fluent-picker-menu")
+     *
+     * @internal
+     */
+    menuTag: string;
+    /**
+     *  Index of currently active menu option
+     *
+     * @internal
+     */
+    menuFocusIndex: number;
+    /**
+     *  Id of currently active menu option.
+     *
+     * @internal
+     */
+    menuFocusOptionId: string | undefined;
+    /**
+     *  Internal flag to indicate no options available display should be shown.
+     *
+     * @internal
+     */
+    showNoOptions: boolean;
+    private showNoOptionsChanged;
+    /**
+     *  The anchored region config to apply.
+     *
+     * @internal
+     */
+    menuConfig: AnchoredRegionConfig;
+    /**
+     *  Reference to the placeholder element for the repeat directive
+     *
+     * @alpha
+     */
+    itemsPlaceholderElement: Node;
+    /**
+     * reference to the input element
+     *
+     * @internal
+     */
+    inputElement: HTMLInputElement;
+    /**
+     * reference to the selected list element
+     *
+     * @internal
+     */
+    listElement: PickerList;
+    /**
+     * reference to the menu element
+     *
+     * @internal
+     */
+    menuElement: PickerMenu;
+    /**
+     * reference to the anchored region element
+     *
+     * @internal
+     */
+    region: AnchoredRegion;
+    /**
+     *
+     *
+     * @internal
+     */
+    selectedItems: string[];
+    private itemsRepeatBehavior;
+    private optionsRepeatBehavior;
+    private optionsPlaceholder;
+    private inputElementView;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Move focus to the input element
+     * @public
+     */
+    focus(): void;
+    /**
+     * Initialize the component.  This is delayed a frame to ensure children are connected as well.
+     */
+    private initialize;
+    /**
+     * Toggles the menu flyout
+     */
+    private toggleFlyout;
+    /**
+     * Handle input event from input element
+     */
+    private handleTextInput;
+    /**
+     * Handle click event from input element
+     */
+    private handleInputClick;
+    /**
+     * Handle the menu options updated event from the child menu
+     */
+    private handleMenuOptionsUpdated;
+    /**
+     * Handle key down events.
+     */
+    handleKeyDown(e: KeyboardEvent): boolean;
+    /**
+     * Handle focus in events.
+     */
+    handleFocusIn(e: FocusEvent): boolean;
+    /**
+     * Handle focus out events.
+     */
+    handleFocusOut(e: FocusEvent): boolean;
+    /**
+     * The list of selected items has changed
+     */
+    handleSelectionChange(): void;
+    /**
+     * Anchored region is loaded, menu and options exist in the DOM.
+     */
+    handleRegionLoaded(e: Event): void;
+    /**
+     * Sets properties on the anchored region once it is instanciated.
+     */
+    private setRegionProps;
+    /**
+     * Checks if the maximum number of items has been chosen and updates the ui.
+     */
+    private checkMaxItems;
+    /**
+     * A list item has been invoked.
+     */
+    handleItemInvoke(e: Event): boolean;
+    /**
+     * A menu option has been invoked.
+     */
+    handleOptionInvoke(e: Event): boolean;
+    /**
+     * Increments the focused list item by the specified amount
+     */
+    private incrementFocusedItem;
+    /**
+     * Disables the menu. Note that the menu can be open, just doens't have any valid options on display.
+     */
+    private disableMenu;
+    /**
+     * Sets the currently focused menu option by index
+     */
+    private setFocusedOption;
+    /**
+     * Updates the template used for the list item repeat behavior
+     */
+    private updateListItemTemplate;
+    /**
+     * Updates the template used for the menu option repeat behavior
+     */
+    private updateOptionTemplate;
+    /**
+     * Updates the filtered options array
+     */
+    private updateFilteredOptions;
+    /**
+     * Updates the menu configuration
+     */
+    private updateMenuConfig;
+    /**
+     * matches menu placement values with the associated menu config
+     */
+    private configLookup;
+}

package/dist/dts/picker/picker.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 _Picker extends FoundationElement {
+}
+interface _Picker extends FormAssociated {
+}
+declare const FormAssociatedPicker_base: typeof _Picker;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(Picker:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedPicker extends FormAssociatedPicker_base {
+    proxy: HTMLInputElement;
+}
+export {};

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

@@ -0,0 +1,8 @@
+import { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { Picker } from "./picker.js";
+/**
+ * The template for the List Picker component.
+ * @public
+ */
+export declare const pickerTemplate: FoundationElementTemplate<ViewTemplate<Picker>>;

package/dist/dts/progress/base-progress.d.ts

@@ -0,0 +1,71 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import { FoundationElement, FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+/**
+ * Progress configuration options
+ * @public
+ */
+export type ProgressOptions = FoundationElementDefinition & {
+    indeterminateIndicator1?: string | SyntheticViewTemplate;
+    indeterminateIndicator2?: string | SyntheticViewTemplate;
+};
+/**
+ * ProgressRing configuration options
+ * @public
+ */
+export type ProgressRingOptions = FoundationElementDefinition & {
+    indeterminateIndicator?: string | SyntheticViewTemplate;
+};
+/**
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
+ * @public
+ */
+export declare class BaseProgress extends FoundationElement {
+    /**
+     * The value of the progress
+     * @public
+     * @remarks
+     * HTML Attribute: value
+     */
+    value: number | null;
+    private valueChanged;
+    /**
+     * The minimum value
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
+    min: number;
+    private minChanged;
+    /**
+     * The maximum value
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    max: number;
+    private maxChanged;
+    /**
+     * Indicates the progress is paused
+     * @public
+     * @remarks
+     * HTML Attribute: paused
+     */
+    paused: boolean;
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    percentComplete: number;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    private updatePercentComplete;
+}

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

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

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

package/dist/dts/progress-ring/index.d.ts

@@ -0,0 +1 @@
+export * from "./progress-ring.template.js";

package/dist/dts/progress-ring/progress-ring.template.d.ts

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

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

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

package/dist/dts/radio/radio.d.ts

@@ -0,0 +1,70 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { FormAssociatedRadio } from "./radio.form-associated.js";
+/**
+ * A structure representing a {@link @ni/fast-foundation#(Radio:class)} element
+ * @public
+ */
+export type RadioControl = Pick<HTMLInputElement, "checked" | "disabled" | "readOnly" | "focus" | "setAttribute" | "getAttribute">;
+/**
+ * Radio configuration options
+ * @public
+ */
+export type RadioOptions = FoundationElementDefinition & {
+    checkedIndicator?: string | SyntheticViewTemplate;
+};
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export declare class Radio extends FormAssociatedRadio implements RadioControl {
+    /**
+     * 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 name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute} for more info.
+     */
+    name: string;
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
+     *
+     * @internal
+     */
+    initialValue: string;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * @internal
+     */
+    defaultCheckedChanged(): void;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    private isInsideRadioGroup;
+    /**
+     * @internal
+     */
+    keypressHandler: (e: KeyboardEvent) => boolean | void;
+    /**
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+}

package/dist/dts/radio/radio.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 _Radio extends FoundationElement {
+}
+interface _Radio extends CheckableFormAssociated {
+}
+declare const FormAssociatedRadio_base: typeof _Radio;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(Radio:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedRadio extends FormAssociatedRadio_base {
+    proxy: HTMLInputElement;
+}
+export {};

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

package/dist/dts/radio-group/index.d.ts

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