@ni/fast-foundation 0.0.2

package/dist/dts/combobox/combobox.d.ts

@@ -0,0 +1,341 @@
+import type { SyntheticViewTemplate } from "@ni/fast-element";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import type { ListboxOption } from "../listbox-option/listbox-option.js";
+import { DelegatesARIAListbox } from "../listbox/listbox.js";
+import type { StartEndOptions } from "../patterns/start-end.js";
+import { StartEnd } from "../patterns/start-end.js";
+import { SelectPosition } from "../select/select.options.js";
+import { FormAssociatedCombobox } from "./combobox.form-associated.js";
+import { ComboboxAutocomplete } from "./combobox.options.js";
+/**
+ * Combobox configuration options
+ * @public
+ */
+export type ComboboxOptions = FoundationElementDefinition & StartEndOptions & {
+    indicator?: string | SyntheticViewTemplate;
+};
+/**
+ * A Combobox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria-practices/#combobox | ARIA combobox }.
+ *
+ * @slot start - Content which can be provided before the input
+ * @slot end - Content which can be provided after the input
+ * @slot control - Used to replace the input element representing the combobox
+ * @slot indicator - The visual indicator representing the expanded state
+ * @slot - The default slot for the options
+ * @csspart control - The wrapper element containing the input area, including start and end
+ * @csspart selected-value - The input element representing the selected value
+ * @csspart indicator - The element wrapping the indicator slot
+ * @csspart listbox - The wrapper for the listbox slotted options
+ * @fires change - Fires a custom 'change' event when the value updates
+ *
+ * @public
+ */
+export declare class Combobox extends FormAssociatedCombobox {
+    /**
+     * The internal value property.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * The autocomplete attribute.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: autocomplete
+     */
+    autocomplete: ComboboxAutocomplete | undefined;
+    /**
+     * Reference to the internal text input element.
+     *
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * Reference to the internal listbox element.
+     *
+     * @internal
+     */
+    listbox: HTMLDivElement;
+    /**
+     * The collection of currently filtered options.
+     *
+     * @public
+     */
+    filteredOptions: ListboxOption[];
+    /**
+     * The current filter value.
+     *
+     * @internal
+     */
+    private filter;
+    /**
+     * The initial state of the position attribute.
+     *
+     * @internal
+     */
+    private forcedPosition;
+    /**
+     * Reset the element to its first selectable option when its parent form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+    private get isAutocompleteInline();
+    private get isAutocompleteList();
+    private get isAutocompleteBoth();
+    /**
+     * The unique id for the internal listbox element.
+     *
+     * @internal
+     */
+    listboxId: string;
+    /**
+     * The max height for the listbox when opened.
+     *
+     * @internal
+     */
+    maxHeight: number;
+    /**
+     * The open attribute.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: open
+     */
+    open: boolean;
+    /**
+     * Sets focus and synchronize ARIA attributes when the open property changes.
+     *
+     * @param prev - the previous open value
+     * @param next - the current open value
+     *
+     * @internal
+     */
+    protected openChanged(): void;
+    /**
+     * The list of options.
+     *
+     * @public
+     * @remarks
+     * Overrides `Listbox.options`.
+     */
+    get options(): ListboxOption[];
+    set options(value: ListboxOption[]);
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @public
+     * @remarks
+     * HTML Attribute: placeholder
+     * Using this attribute is not a valid substitute for a labeling element.
+     */
+    placeholder: string;
+    /**
+     * Updates the placeholder on the proxy element.
+     * @internal
+     */
+    protected placeholderChanged(): void;
+    /**
+     * The placement for the listbox when the combobox is open.
+     *
+     * @public
+     */
+    positionAttribute?: SelectPosition;
+    /**
+     * The current state of the calculated position of the listbox.
+     *
+     * @public
+     */
+    position?: SelectPosition;
+    protected positionChanged(prev: SelectPosition | undefined, next: SelectPosition | undefined): void;
+    /**
+     * The value property.
+     *
+     * @public
+     */
+    get value(): string;
+    set value(next: string);
+    /**
+     * Handle opening and closing the listbox when the combobox is clicked.
+     *
+     * @param e - the mouse event
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    connectedCallback(): void;
+    /**
+     * Synchronize the `aria-disabled` property when the `disabled` property changes.
+     *
+     * @param prev - The previous disabled value
+     * @param next - The next disabled value
+     *
+     * @internal
+     */
+    disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * Filter available options by text value.
+     *
+     * @public
+     */
+    filterOptions(): void;
+    /**
+     * Focus the control and scroll the first selected option into view.
+     *
+     * @internal
+     * @remarks
+     * Overrides: `Listbox.focusAndScrollOptionIntoView`
+     */
+    protected focusAndScrollOptionIntoView(): void;
+    /**
+     * Handle focus state when the element or its children lose focus.
+     *
+     * @param e - The focus event
+     * @internal
+     */
+    focusoutHandler(e: FocusEvent): boolean | void;
+    /**
+     * Handle content changes on the control input.
+     *
+     * @param e - the input event
+     * @internal
+     */
+    inputHandler(e: InputEvent): boolean | void;
+    /**
+     * Handle keydown actions for listbox navigation.
+     *
+     * @param e - the keyboard event
+     * @internal
+     */
+    keydownHandler(e: Event & KeyboardEvent): boolean | void;
+    /**
+     * Handle keyup actions for value input and text field manipulations.
+     *
+     * @param e - the keyboard event
+     * @internal
+     */
+    keyupHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Ensure that the selectedIndex is within the current allowable filtered range.
+     *
+     * @param prev - the previous selected index value
+     * @param next - the current selected index value
+     *
+     * @internal
+     */
+    selectedIndexChanged(prev: number | undefined, next: number): void;
+    /**
+     * Move focus to the previous selectable option.
+     *
+     * @internal
+     * @remarks
+     * Overrides `Listbox.selectPreviousOption`
+     */
+    selectPreviousOption(): void;
+    /**
+     * Set the default selected options at initialization or reset.
+     *
+     * @internal
+     * @remarks
+     * Overrides `Listbox.setDefaultSelectedOption`
+     */
+    setDefaultSelectedOption(): void;
+    /**
+     * Focus and set the content of the control based on the first selected option.
+     *
+     * @internal
+     */
+    private setInputToSelection;
+    /**
+     * Focus, set and select the content of the control based on the first selected option.
+     *
+     * @internal
+     */
+    private setInlineSelection;
+    /**
+     * Determines if a value update should involve emitting a change event, then updates the value.
+     *
+     * @internal
+     */
+    private syncValue;
+    /**
+     * Calculate and apply listbox positioning based on available viewport space.
+     *
+     * @param force - direction to force the listbox to display
+     * @public
+     */
+    setPositioning(): void;
+    /**
+     * Ensure that the entire list of options is used when setting the selected property.
+     *
+     * @param prev - the previous list of selected options
+     * @param next - the current list of selected options
+     *
+     * @internal
+     * @remarks
+     * Overrides: `Listbox.selectedOptionsChanged`
+     */
+    selectedOptionsChanged(prev: ListboxOption[] | undefined, next: ListboxOption[]): void;
+    /**
+     * Synchronize the form-associated proxy and update the value property of the element.
+     *
+     * @param prev - the previous collection of slotted option elements
+     * @param next - the next collection of slotted option elements
+     *
+     * @internal
+     */
+    slottedOptionsChanged(prev: Element[] | undefined, next: Element[]): void;
+    /**
+     * Sets the value and to match the first selected option.
+     *
+     * @param shouldEmit - if true, the change event will be emitted
+     *
+     * @internal
+     */
+    private updateValue;
+    /**
+     * @internal
+     */
+    private clearSelectionRange;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA combobox role.
+ *
+ * @public
+ */
+export declare class DelegatesARIACombobox {
+    /**
+     * See {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} for more information.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `aria-autocomplete`
+     */
+    ariaAutoComplete: "inline" | "list" | "both" | "none" | string | null;
+    /**
+     * See {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} for more information.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `aria-controls`
+     */
+    ariaControls: 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 DelegatesARIACombobox extends DelegatesARIAListbox {
+}
+/**
+ * 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 Combobox extends StartEnd, DelegatesARIACombobox {
+}

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

@@ -0,0 +1,16 @@
+import { FormAssociated } from "../form-associated/form-associated.js";
+import { Listbox } from "../listbox/listbox.js";
+declare class _Combobox extends Listbox {
+}
+interface _Combobox extends FormAssociated {
+}
+declare const FormAssociatedCombobox_base: typeof _Combobox;
+/**
+ * A form-associated base class for the {@link (Combobox:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedCombobox extends FormAssociatedCombobox_base {
+    proxy: HTMLInputElement;
+}
+export {};

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

@@ -0,0 +1,15 @@
+/**
+ * Autocomplete values for combobox.
+ * @public
+ */
+export declare const ComboboxAutocomplete: {
+    readonly inline: "inline";
+    readonly list: "list";
+    readonly both: "both";
+    readonly none: "none";
+};
+/**
+ * Autocomplete type for combobox.
+ * @public
+ */
+export type ComboboxAutocomplete = typeof ComboboxAutocomplete[keyof typeof ComboboxAutocomplete];

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

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

@@ -0,0 +1,3 @@
+export * from "./combobox.js";
+export * from "./combobox.options.js";
+export * from "./combobox.template.js";

package/dist/dts/data-grid/data-grid-cell.d.ts

@@ -0,0 +1,62 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import type { ColumnDefinition } from "./data-grid.js";
+import { DataGridCellTypes } from "./data-grid.options.js";
+export { DataGridCellTypes };
+/**
+ * A Data Grid Cell Custom HTML Element.
+ *
+ * @fires cell-focused - Fires a custom 'cell-focused' event when focus is on the cell or its contents
+ * @slot - The default slot for cell contents.  The "cell contents template" renders here.
+ * @public
+ */
+export declare class DataGridCell extends FoundationElement {
+    /**
+     * The type of cell
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: cell-type
+     */
+    cellType: DataGridCellTypes;
+    private cellTypeChanged;
+    /**
+     * The column index of the cell.
+     * This will be applied to the css grid-column-index value
+     * applied to the cell
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: grid-column
+     */
+    gridColumn: string;
+    private gridColumnChanged;
+    /**
+     * The base data for the parent row
+     *
+     * @public
+     */
+    rowData: object | null;
+    /**
+     * The base data for the column
+     *
+     * @public
+     */
+    columnDefinition: ColumnDefinition | null;
+    private columnDefinitionChanged;
+    private isActiveCell;
+    private customCellView;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    handleFocusin(e: FocusEvent): void;
+    handleFocusout(e: FocusEvent): void;
+    handleKeydown(e: KeyboardEvent): void;
+    private updateCellView;
+    private disconnectCellView;
+    private updateCellStyle;
+}

package/dist/dts/data-grid/data-grid-cell.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 { DataGridCell } from "./data-grid-cell.js";
+/**
+ * Generates a template for the {@link @ni/fast-foundation#DataGridCell} component using
+ * the provided prefix.
+ * @public
+ */
+export declare const dataGridCellTemplate: FoundationElementTemplate<ViewTemplate<DataGridCell>>;

package/dist/dts/data-grid/data-grid-row.d.ts

@@ -0,0 +1,119 @@
+import { ViewTemplate } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import type { ColumnDefinition } from "./data-grid.js";
+import { DataGridRowTypes } from "./data-grid.options.js";
+/**
+ * A Data Grid Row Custom HTML Element.
+ *
+ * @fires row-focused - Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+ * @slot - The default slot for custom cell elements
+ * @public
+ */
+export declare class DataGridRow extends FoundationElement {
+    /**
+     * String that gets applied to the the css gridTemplateColumns attribute for the row
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: grid-template-columns
+     */
+    gridTemplateColumns: string;
+    private gridTemplateColumnsChanged;
+    /**
+     * The type of row
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: row-type
+     */
+    rowType: DataGridRowTypes;
+    private rowTypeChanged;
+    /**
+     * The base data for this row
+     *
+     * @public
+     */
+    rowData: object | null;
+    private rowDataChanged;
+    /**
+     * The column definitions of the row
+     *
+     * @public
+     */
+    columnDefinitions: ColumnDefinition[] | null;
+    /**
+     * The template used to render cells in generated rows.
+     *
+     * @public
+     */
+    cellItemTemplate?: ViewTemplate;
+    private cellItemTemplateChanged;
+    /**
+     * The template used to render header cells in generated rows.
+     *
+     * @public
+     */
+    headerCellItemTemplate?: ViewTemplate;
+    private headerCellItemTemplateChanged;
+    /**
+     * The index of the row in the parent grid.
+     * This is typically set programmatically by the parent grid.
+     *
+     * @public
+     */
+    rowIndex: number;
+    /**
+     * Whether focus is on/in a cell within this row.
+     *
+     * @internal
+     */
+    isActiveRow: boolean;
+    /**
+     * The cell item template currently in use.
+     *
+     * @internal
+     */
+    activeCellItemTemplate?: ViewTemplate;
+    /**
+     * The default cell item template.  Set by the component templates.
+     *
+     * @internal
+     */
+    defaultCellItemTemplate?: ViewTemplate;
+    /**
+     * The default header cell item template.  Set by the component templates.
+     *
+     * @internal
+     */
+    defaultHeaderCellItemTemplate?: ViewTemplate;
+    /**
+     * Children that are cells
+     *
+     * @internal
+     */
+    cellElements: HTMLElement[];
+    private cellsRepeatBehavior;
+    private cellsPlaceholder;
+    /**
+     * @internal
+     */
+    slottedCellElements: HTMLElement[];
+    /**
+     * @internal
+     */
+    focusColumnIndex: number;
+    private refocusOnLoad;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    handleFocusout(e: FocusEvent): void;
+    handleCellFocus(e: Event): void;
+    handleKeydown(e: KeyboardEvent): void;
+    private updateItemTemplate;
+    private updateRowStyle;
+}

package/dist/dts/data-grid/data-grid-row.template.d.ts

@@ -0,0 +1,10 @@
+import type { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { DataGridRow } from "./data-grid-row.js";
+/**
+ * Generates a template for the {@link @ni/fast-foundation#DataGridRow} component using
+ * the provided prefix.
+ *
+ * @public
+ */
+export declare const dataGridRowTemplate: FoundationElementTemplate<ViewTemplate<DataGridRow>>;