@ni/nimble-components 24.0.1 → 24.1.0

package/dist/esm/src/select/index.d.ts

@@ -0,0 +1,281 @@
+import { AnchoredRegion, ListboxOption, SelectPosition } from '@microsoft/fast-foundation';
+import { DropdownAppearance, ListOptionOwner } from '../patterns/dropdown/types';
+import type { ErrorPattern } from '../patterns/error/types';
+import { ListOption } from '../list-option';
+import { FilterMode } from './types';
+import { FormAssociatedSelect } from './models/select-form-associated';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-select': Select;
+    }
+}
+type BooleanOrVoid = boolean | void;
+/**
+ * A nimble-styled HTML select.
+ */
+export declare class Select extends FormAssociatedSelect implements ErrorPattern, ListOptionOwner {
+    appearance: DropdownAppearance;
+    /**
+     * Reflects the placement for the listbox when the select is open.
+     *
+     * @public
+     */
+    positionAttribute?: SelectPosition;
+    /**
+     * A message explaining why the value is invalid.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: error-text
+     */
+    errorText: string | undefined;
+    errorVisible: boolean;
+    filterMode: FilterMode;
+    /**
+     * @internal
+     */
+    displayPlaceholder: boolean;
+    /**
+     * @internal
+     */
+    open: boolean;
+    /**
+     * Holds the current state for the calculated position of the listbox.
+     *
+     * @public
+     */
+    position?: SelectPosition;
+    /**
+     * The ref to the internal `.control` element.
+     *
+     * @internal
+     */
+    control: HTMLElement;
+    /**
+     * Reference to the internal listbox element.
+     *
+     * @internal
+     */
+    listbox: HTMLDivElement;
+    /**
+     * The unique id for the internal listbox element.
+     *
+     * @internal
+     */
+    listboxId: string;
+    /**
+     * @internal
+     */
+    scrollableRegion: HTMLElement;
+    /**
+     * @internal
+     */
+    filterInput?: HTMLInputElement;
+    /**
+     * @internal
+     */
+    anchoredRegion: AnchoredRegion;
+    /** @internal */
+    hasOverflow: boolean;
+    /**
+     * @internal
+     */
+    filteredOptions: ListboxOption[];
+    /**
+     * @internal
+     */
+    filter: string;
+    /**
+     * @internal
+     */
+    committedSelectedOption?: ListboxOption;
+    /**
+     * The max height for the listbox when opened.
+     *
+     * @internal
+     */
+    maxHeight: number;
+    /**
+     * The component is collapsible when in single-selection mode with no size attribute.
+     *
+     * @internal
+     */
+    get collapsible(): boolean;
+    private _value;
+    private forcedPosition;
+    private indexWhenOpened?;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    get value(): string;
+    set value(next: string);
+    /**
+     * @internal
+     */
+    get displayValue(): string;
+    /**
+     * @internal
+     */
+    anchoredRegionChanged(_prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
+    /**
+     * @internal
+     */
+    controlChanged(_prev: HTMLElement | undefined, _next: HTMLElement | undefined): void;
+    /**
+     * @internal
+     */
+    slottedOptionsChanged(prev: Element[], next: Element[]): void;
+    /**
+     * @internal
+     */
+    clickHandler(e: MouseEvent): BooleanOrVoid;
+    /**
+     * Updates the value when an option's value changes.
+     *
+     * @param source - the source object
+     * @param propertyName - the property to evaluate
+     *
+     * @internal
+     * @override
+     */
+    handleChange(source: unknown, propertyName: string): void;
+    /**
+     * Prevents focus when size is set and a scrollbar is clicked.
+     *
+     * @param e - the mouse event object
+     *
+     * @override
+     * @internal
+     */
+    mousedownHandler(e: MouseEvent): BooleanOrVoid;
+    /**
+     * @internal
+     */
+    regionLoadedHandler(): void;
+    /**
+     * Sets the multiple property on the proxy element.
+     *
+     * @param prev - the previous multiple value
+     * @param next - the current multiple value
+     */
+    multipleChanged(prev: boolean | undefined, next: boolean): void;
+    /**
+     * @internal
+     */
+    inputClickHandler(e: MouseEvent): void;
+    /**
+     * @internal
+     */
+    changeValueHandler(): void;
+    /**
+     * @internal
+     */
+    updateDisplayValue(): void;
+    /**
+     * Handle content changes on the control input.
+     *
+     * @param e - the input event
+     * @internal
+     */
+    inputHandler(e: InputEvent): boolean;
+    /**
+     * @internal
+     */
+    focusoutHandler(e: FocusEvent): BooleanOrVoid;
+    /**
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): BooleanOrVoid;
+    /**
+     * Updates the proxy value when the selected index changes.
+     *
+     * @param prev - the previous selected index
+     * @param next - the next selected index
+     *
+     * @internal
+     */
+    selectedIndexChanged(_: number | undefined, __: number): 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;
+    /**
+     * Reset the element to its first selectable option when its parent form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    selectNextOption(): void;
+    selectPreviousOption(): void;
+    /**
+     * @internal
+     */
+    registerOption(option: ListOption): void;
+    protected setSelectedOptions(): void;
+    protected focusAndScrollOptionIntoView(): void;
+    protected positionChanged(_: SelectPosition | undefined, next: SelectPosition | undefined): void;
+    /**
+     * Updates the proxy's size property when the size attribute changes.
+     *
+     * @param prev - the previous size
+     * @param next - the current size
+     *
+     * @override
+     * @internal
+     */
+    protected sizeChanged(prev: number | undefined, next: number): void;
+    protected openChanged(): void;
+    /**
+     * Updates the selectedness of each option when the list of selected options changes.
+     *
+     * @param prev - the previous list of selected options
+     * @param next - the current list of selected options
+     *
+     * @override
+     * @internal
+     */
+    protected selectedOptionsChanged(_prev: ListboxOption[] | undefined, next: ListboxOption[]): void;
+    /**
+     * Sets the selected index to match the first option with the selected attribute, or
+     * the first selectable option.
+     *
+     * @override
+     * @internal
+     */
+    protected setDefaultSelectedOption(): void;
+    private committedSelectedOptionChanged;
+    private setPositioning;
+    /**
+     * Filter available options by text value.
+     *
+     * @public
+     */
+    private filterOptions;
+    /**
+     * Sets the value and display value to match the first selected option.
+     *
+     * @param shouldEmit - if true, the input and change events will be emitted
+     *
+     * @internal
+     */
+    private updateValue;
+    /**
+     * Resets and fills the proxy to match the component's options.
+     *
+     * @internal
+     */
+    private setProxyOptions;
+    private clearSelection;
+    private filterChanged;
+    private maxHeightChanged;
+    private initializeOpenState;
+    private updateListboxMaxHeightCssVariable;
+}
+export declare const selectTag = "nimble-select";
+export {};

package/dist/esm/src/select/models/select-form-associated.d.ts

@@ -0,0 +1,16 @@
+import { FormAssociated, ListboxElement } from '@microsoft/fast-foundation';
+declare class Select extends ListboxElement {
+}
+interface Select extends FormAssociated {
+}
+declare const FormAssociatedSelect_base: typeof Select;
+/**
+ * A form-associated base class for the Select component. This was copied from the
+ * FAST FormAssociatedSelect (which is not exported by fast-foundation)
+ *
+ * @internal
+ */
+export declare class FormAssociatedSelect extends FormAssociatedSelect_base {
+    proxy: HTMLSelectElement;
+}
+export {};

package/dist/esm/src/select/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/select/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import { FoundationElementTemplate, SelectOptions } from '@microsoft/fast-foundation';
+import type { Select } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<Select>, SelectOptions>;

package/dist/esm/src/select/testing/select.pageobject.d.ts

@@ -0,0 +1,39 @@
+import type { Select } from '..';
+import type { ListOption } from '../../list-option';
+/**
+ * Page object for the `nimble-select` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export declare class SelectPageObject {
+    private readonly selectElement;
+    constructor(selectElement: Select);
+    openAndSetFilterText(filterText: string): Promise<void>;
+    closeDropdown(): Promise<void>;
+    setOptions(options: ListOption[]): Promise<void>;
+    getFilteredOptions(): ListOption[];
+    getSelectedOption(): ListOption | null;
+    /**
+     * Either opens or closes the dropdown depending on its current state
+     */
+    clickSelect(): void;
+    clickSelectedItem(): void;
+    clickFilterInput(): Promise<void>;
+    clickOption(index: number): void;
+    /**
+     * Click the option with the text provided by the 'displayText' parameter.
+     * @param value The text of the option to be selected
+     */
+    clickOptionWithDisplayText(displayText: string): void;
+    clickAway(): Promise<void>;
+    pressEnterKey(): void;
+    pressEscapeKey(): void;
+    pressArrowDownKey(): void;
+    pressArrowUpKey(): void;
+    pressSpaceKey(): Promise<void>;
+    isDropdownVisible(): boolean;
+    isFilterInputVisible(): boolean;
+    isOptionVisible(index: number): boolean;
+    isNoResultsLabelVisible(): boolean;
+    getFilterInputText(): string;
+    private getFilterInput;
+}

package/dist/esm/src/select/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Types of dropdown appearance.
+ * @public
+ */
+export { DropdownAppearance } from '../patterns/dropdown/types';
+/**
+ * Types of select filter mode.
+ * @public
+ */
+export declare const FilterMode: {
+    readonly none: undefined;
+    readonly standard: "standard";
+};
+export type FilterMode = (typeof FilterMode)[keyof typeof FilterMode];

package/dist/esm/src/spinner/index.d.ts

@@ -0,0 +1,20 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { SpinnerAppearance } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-spinner': Spinner;
+    }
+}
+/**
+ * A Nimble-styled spinner component.
+ * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
+ */
+export declare class Spinner extends FoundationElement {
+    /**
+     * @public
+     * @description
+     * The appearance the spinner area should have.
+     */
+    appearance: SpinnerAppearance;
+}
+export declare const spinnerTag = "nimble-spinner";

package/dist/esm/src/spinner/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/spinner/template.d.ts

@@ -0,0 +1,2 @@
+import type { Spinner } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Spinner, any>;

package/dist/esm/src/spinner/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Types of spinner appearance.
+ * @public
+ */
+export declare const SpinnerAppearance: {
+    readonly default: undefined;
+    readonly accent: "accent";
+};
+export type SpinnerAppearance = (typeof SpinnerAppearance)[keyof typeof SpinnerAppearance];

package/dist/esm/src/switch/index.d.ts

@@ -0,0 +1,12 @@
+import { Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-switch': Switch;
+    }
+}
+/**
+ * A nimble-styled switch control.
+ */
+export declare class Switch extends FoundationSwitch {
+}
+export declare const switchTag = "nimble-switch";

package/dist/esm/src/switch/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/switch/template.d.ts

@@ -0,0 +1,2 @@
+import type { Switch } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Switch, any>;

package/dist/esm/src/tab/index.d.ts

@@ -0,0 +1,12 @@
+import { Tab as FoundationTab } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tab': Tab;
+    }
+}
+/**
+ * A nimble-styled HTML tab
+ */
+export declare class Tab extends FoundationTab {
+}
+export declare const tabTag = "nimble-tab";

package/dist/esm/src/tab/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/tab-panel/index.d.ts

@@ -0,0 +1,12 @@
+import { TabPanel as FoundationTabPanel } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tab-panel': TabPanel;
+    }
+}
+/**
+ * A nimble-styled tab panel
+ */
+export declare class TabPanel extends FoundationTabPanel {
+}
+export declare const tabPanelTag = "nimble-tab-panel";

package/dist/esm/src/tab-panel/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/table/components/cell/index.d.ts

@@ -0,0 +1,30 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { MenuButton } from '../../../menu-button';
+import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
+import type { TableColumn } from '../../../table-column/base';
+import type { TableCellRecord, TableCellState } from '../../../table-column/base/types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-cell': TableCell;
+    }
+}
+/**
+ * A styled cell that is used within the nimble-table-row.
+ * @internal
+ */
+export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRecord> extends FoundationElement {
+    cellState?: TableCellState<TCellRecord>;
+    column?: TableColumn;
+    recordId?: string;
+    columnId?: string;
+    hasActionMenu: boolean;
+    menuOpen: boolean;
+    actionMenuLabel?: string;
+    cellViewTemplate?: ViewTemplate<TableCell>;
+    nestingLevel: number;
+    readonly actionMenuButton?: MenuButton;
+    onActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
+    onActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
+}
+export declare const tableCellTag = "nimble-table-cell";

package/dist/esm/src/table/components/cell/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/table/components/cell/template.d.ts

@@ -0,0 +1,2 @@
+import type { TableCell } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableCell<import("../../../table-column/base/types").TableCellRecord>, any>;

package/dist/esm/src/table/components/group-row/index.d.ts

@@ -0,0 +1,42 @@
+import { Checkbox, FoundationElement } from '@microsoft/fast-foundation';
+import type { TableColumn } from '../../../table-column/base';
+import { TableRowSelectionState } from '../../types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-group-row': TableGroupRow;
+    }
+}
+/**
+ * A styled cell that is used within the nimble-table-row.
+ * @internal
+ */
+export declare class TableGroupRow extends FoundationElement {
+    groupRowValue?: unknown;
+    nestingLevel: number;
+    immediateChildCount?: number;
+    groupColumn?: TableColumn;
+    expanded: boolean;
+    selectable: boolean;
+    selectionState: TableRowSelectionState;
+    /**
+     * @internal
+     */
+    readonly expandIcon: HTMLElement;
+    /**
+     * @internal
+     */
+    readonly selectionCheckbox?: Checkbox;
+    /**
+     * @internal
+     */
+    animationClass: string;
+    private ignoreSelectionChangeEvents;
+    onGroupExpandToggle(): void;
+    /** @internal */
+    onSelectionChange(event: CustomEvent): void;
+    private selectionStateChanged;
+    private selectionCheckboxChanged;
+    private setSelectionCheckboxState;
+    private readonly removeAnimatingClass;
+}
+export declare const tableGroupRowTag = "nimble-table-group-row";

package/dist/esm/src/table/components/group-row/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/table/components/group-row/template.d.ts

@@ -0,0 +1,2 @@
+import type { TableGroupRow } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableGroupRow, any>;

package/dist/esm/src/table/components/header/index.d.ts

@@ -0,0 +1,20 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { TableColumnSortDirection } from '../../types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-header': TableHeader;
+    }
+}
+/**
+ * A styled header that is used within the nimble-table.
+ * @internal
+ */
+export declare class TableHeader extends FoundationElement {
+    sortDirection: TableColumnSortDirection;
+    firstSortedColumn: boolean;
+    isGrouped: boolean;
+    protected sortDirectionChanged(_prev: TableColumnSortDirection | undefined, _next: TableColumnSortDirection): void;
+    protected firstSortedColumnChanged(_prev: boolean | undefined, _next: boolean): void;
+    private updateAriaSort;
+}
+export declare const tableHeaderTag = "nimble-table-header";

package/dist/esm/src/table/components/header/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/table/components/header/template.d.ts

@@ -0,0 +1,2 @@
+import type { TableHeader } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableHeader, any>;

package/dist/esm/src/table/components/row/index.d.ts

@@ -0,0 +1,89 @@
+import { Notifier } from '@microsoft/fast-element';
+import { Checkbox, FoundationElement } from '@microsoft/fast-foundation';
+import type { TableCellState } from '../../../table-column/base/types';
+import type { TableRecord } from '../../types';
+import type { TableColumn } from '../../../table-column/base';
+import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-row': TableRow;
+    }
+}
+/** Represents a single row (element) in the Table's data  */
+export interface TableDataRecord extends TableRecord {
+}
+/**
+ * A styled row that is used within the nimble-table.
+ * @internal
+ */
+export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRecord> extends FoundationElement {
+    recordId?: string;
+    selectable: boolean;
+    selected: boolean;
+    hideSelection: boolean;
+    expanded: boolean;
+    dataRecord?: TDataRecord;
+    /**
+     * @internal
+     * */
+    columnNotifiers: Notifier[];
+    columns: TableColumn[];
+    currentActionMenuColumn?: TableColumn;
+    nestingLevel: number;
+    isParentRow: boolean;
+    menuOpen: boolean;
+    rowOperationGridCellHidden: boolean;
+    loading: boolean;
+    /**
+     * @internal
+     * An array that parallels the `columns` array and contains the indent
+     * level of each column's cell.
+     * */
+    cellIndentLevels: number[];
+    /**
+     * @internal
+     * An array that parallels the `columns` array and contains the cell state
+     * of each column's cell.
+     * */
+    cellStates: (TableCellState | undefined)[];
+    /** @internal */
+    readonly selectionCheckbox?: Checkbox;
+    /** @internal */
+    readonly cellContainer: HTMLSpanElement;
+    /**
+     * @internal
+     */
+    readonly expandIcon?: HTMLElement;
+    /**
+     * @internal
+     */
+    animationClass: string;
+    get isTopLevelParentRow(): boolean;
+    get isNestedParent(): boolean;
+    private ignoreSelectionChangeEvents;
+    get ariaSelected(): 'true' | 'false' | null;
+    /** @internal */
+    onSelectionChange(event: CustomEvent): void;
+    /** @internal */
+    onCellActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;
+    /** @internal */
+    onCellActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;
+    closeOpenActionMenus(): void;
+    /** @internal */
+    handleChange(source: unknown, args: unknown): void;
+    onRowExpandToggle(event: Event): void;
+    private readonly removeAnimatingClass;
+    private emitActionMenuToggleEvent;
+    private columnsChanged;
+    private dataRecordChanged;
+    private nestingLevelChanged;
+    private updateCellIndentLevels;
+    private removeColumnObservers;
+    private observeColumns;
+    private updateCellStates;
+    private hasValidFieldNames;
+    private selectedChanged;
+    private selectionCheckboxChanged;
+    private setSelectionCheckboxState;
+}
+export declare const tableRowTag = "nimble-table-row";

package/dist/esm/src/table/components/row/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/table/components/row/template.d.ts

@@ -0,0 +1,2 @@
+import type { TableRow } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableRow<import(".").TableDataRecord>, any>;