@ni/nimble-components 19.3.0 → 19.4.1

package/dist/esm/src/tree-item/index.d.ts

@@ -0,0 +1,23 @@
+import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-item': TreeItem;
+    }
+}
+/**
+ * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-item\>
+ *
+ */
+export declare class TreeItem extends FoundationTreeItem {
+    /**
+     * @internal
+     */
+    groupSelected: boolean;
+}
+export declare const treeItemTag: string;

package/dist/esm/src/tree-item/styles.d.ts

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

package/dist/esm/src/tree-view/index.d.ts

@@ -0,0 +1,29 @@
+import { TreeView as FoundationTreeView } from '@microsoft/fast-foundation';
+import { TreeViewSelectionMode } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-view': TreeView;
+    }
+}
+/**
+ * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-view\>
+ *
+ */
+export declare class TreeView extends FoundationTreeView {
+    selectionMode: TreeViewSelectionMode;
+    /**
+     * @internal
+     */
+    selectedItems: Element[];
+    handleClick(e: Event): boolean;
+    private canSelect;
+    private itemHasChildren;
+    private selectedItemsChanged;
+}
+export declare const treeViewTag: string;

package/dist/esm/src/tree-view/styles.d.ts

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

package/dist/esm/src/tree-view/template.d.ts

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

package/dist/esm/src/tree-view/types.d.ts

@@ -0,0 +1,8 @@
+export declare const pinnedSelectedAttribute = "pinned-selected";
+export declare const groupSelectedAttribute = "group-selected";
+export declare const TreeViewSelectionMode: {
+    readonly all: "all";
+    readonly leavesOnly: "leaves-only";
+    readonly none: "none";
+};
+export declare type TreeViewSelectionMode = (typeof TreeViewSelectionMode)[keyof typeof TreeViewSelectionMode];

package/dist/esm/src/utilities/models/tracker.d.ts

@@ -0,0 +1,21 @@
+declare type ObjectFromList<T extends readonly string[]> = {
+    [K in T extends readonly (infer U)[] ? U : never]: boolean;
+};
+/**
+ * Generic Tracker which sets or resets provided flags
+ */
+export declare class Tracker<TrackedItemsList extends readonly string[]> {
+    private trackedItems;
+    constructor(trackedItemsList: TrackedItemsList);
+    getTrackedItems(): ObjectFromList<TrackedItemsList>;
+    isTracked(key: keyof ObjectFromList<TrackedItemsList>): boolean;
+    track(key: keyof ObjectFromList<TrackedItemsList>): void;
+    untrack(key: keyof ObjectFromList<TrackedItemsList>): void;
+    trackAll(): void;
+    untrackAll(): void;
+    allTracked(): boolean;
+    anyTracked(): boolean;
+    noneTracked(): boolean;
+    private setAllKeys;
+}
+export {};

package/dist/esm/src/utilities/models/update-tracker.d.ts

@@ -0,0 +1,7 @@
+import { Tracker } from './tracker';
+/**
+ * Generic Update Tracker Utility which extends Tracker Utility with update logic
+ */
+export declare abstract class UpdateTracker<TrackedProperties extends readonly string[]> extends Tracker<TrackedProperties> {
+    protected abstract queueUpdate(): void;
+}

package/dist/esm/src/utilities/models/validator.d.ts

@@ -0,0 +1,9 @@
+import type { ValidityObject } from '../../table/types';
+import { Tracker } from './tracker';
+/**
+ * Generic Validator Utility extends Tracker Utility for validation purposes
+ */
+export declare class Validator<ValidationFlags extends readonly string[]> extends Tracker<ValidationFlags> {
+    isValid(): boolean;
+    getValidationFlags(): ValidityObject;
+}

package/dist/esm/src/utilities/style/appearance.d.ts

@@ -0,0 +1,11 @@
+import type { Behavior, ElementStyles } from '@microsoft/fast-element';
+/**
+ * Behavior that will conditionally apply a stylesheet based on the element's
+ * appearance property
+ *
+ * @param value - The value or values of the appearance property
+ * @param styles - The styles to be applied when condition matches
+ *
+ * @public
+ */
+export declare function appearanceBehavior<AppearanceType>(value: AppearanceType | AppearanceType[], styles: ElementStyles): Behavior;

package/dist/esm/src/utilities/style/colors.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Convert a hexadecimal color string to an RGBA CSS color string
+ * Example: '#ff0102' to 'rgba(255, 1, 2, 1)'
+ * @param hexValue Hex color (with a starting '#')
+ * @param alpha CSS alpha value between 0 (transparent) and 1 (opaque)
+ * @returns An rgba()-formatted CSS color string
+ */
+export declare function hexToRgbaCssColor(hexValue: string, alpha: number): string;

package/dist/esm/src/utilities/style/direction.d.ts

@@ -0,0 +1,34 @@
+import type { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
+/**
+ * Behavior to conditionally apply LTR and RTL stylesheets. To determine which to apply,
+ * the behavior will use the nearest DesignSystemProvider's 'direction' design system value.
+ *
+ * @public
+ * @example
+ * ```ts
+ * import { css } from "@microsoft/fast-element";
+ * import { DirectionalStyleSheetBehavior } from "@microsoft/fast-foundation";
+ *
+ * css`
+ *  // ...
+ * `.withBehaviors(new DirectionalStyleSheetBehavior(
+ *   css`:host { content: "ltr"}`),
+ *   css`:host { content: "rtl"}`),
+ * )
+ * ```
+ */
+export declare class DirectionalStyleSheetBehavior implements Behavior {
+    private ltr;
+    private rtl;
+    private cache;
+    constructor(ltr: ElementStyles | null, rtl: ElementStyles | null);
+    /**
+     * @internal
+     */
+    bind(source: FASTElement & HTMLElement): void;
+    /**
+     * @internal
+     */
+    unbind(source: FASTElement & HTMLElement): void;
+    private attach;
+}

package/dist/esm/src/utilities/style/focus.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
+ */
+/**
+ * The string representing the focus selector to be used. Value
+ * will be ":focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+ * is supported and ":focus" when it is not.
+ *
+ * @public
+ */
+export declare const focusVisible: string;

package/dist/esm/src/utilities/style/multivalue-property-stylesheet-behavior.d.ts

@@ -0,0 +1,37 @@
+import { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
+/**
+ * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
+ * styles are applied while the property matches and that styles are not applied if the property does
+ * not match.
+ *
+ * @public
+ */
+export declare class MultivaluePropertyStyleSheetBehavior<PropertyType> implements Behavior {
+    private readonly propertyName;
+    private readonly value;
+    private readonly styles;
+    /**
+     * Constructs a {@link MultivaluePropertyStyleSheetBehavior} instance.
+     * @param propertyName - The property name to operate from.
+     * @param value - The property value or values to operate from.
+     * @param styles - The styles to coordinate with the property.
+     */
+    constructor(propertyName: string, value: PropertyType | PropertyType[], styles: ElementStyles);
+    /**
+     * Binds the behavior to the element.
+     * @param elementInstance - The element for which the property is applied.
+     */
+    bind(elementInstance: FASTElement): void;
+    /**
+     * Unbinds the behavior from the element.
+     * @param source - The element for which the behavior is unbinding.
+     */
+    unbind(source: FASTElement & HTMLElement): void;
+    /**
+     * Change event for the provided element.
+     * @param source - the element for which to attach or detach styles.
+     * @param key - the key to lookup to know if the element already has the styles
+     * @internal
+     */
+    handleChange(source: FASTElement, key: string): void;
+}

package/dist/esm/src/utilities/style/prefers-reduced-motion.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Singleton utility to watch the prefers-reduced-motion media value
+ */
+export declare const prefersReducedMotionMediaQuery: MediaQueryList;

package/dist/esm/src/utilities/style/theme.d.ts

@@ -0,0 +1,37 @@
+import type { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
+import type { Theme } from '../../theme-provider/types';
+/**
+ * Behavior to conditionally apply theme-based stylesheets.
+ */
+declare class ThemeStyleSheetBehavior implements Behavior {
+    private readonly theme;
+    private readonly styles;
+    private readonly cache;
+    constructor(theme: Theme | Theme[], styles: ElementStyles);
+    /**
+     * @internal
+     */
+    bind(source: FASTElement & HTMLElement): void;
+    /**
+     * @internal
+     */
+    unbind(source: FASTElement & HTMLElement): void;
+}
+/**
+ * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
+ * the behavior will use the nearest ThemeProvider's 'theme' design system value.
+ *
+ * @public
+ * @example
+ * ```ts
+ * css`
+ *     // ...
+ * `.withBehaviors(
+ *     themeBehavior(Theme.light, css` ... `),
+ *     // Apply style for both dark and color theme
+ *     themeBehavior([Theme.dark, Theme.color], css` ... `)
+ * )
+ * ```
+ */
+export declare const themeBehavior: (theme: Theme | Theme[], styles: ElementStyles) => ThemeStyleSheetBehavior;
+export {};

package/dist/esm/src/utilities/style/user-select.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Set user-select: none in a way that works across all supported browsers.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
+ */
+export declare const userSelectNone: import("@microsoft/fast-element").CSSDirective;

package/dist/esm/src/wafer-map/index.d.ts

@@ -0,0 +1,106 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { ZoomTransform } from 'd3-zoom';
+import { DataManager } from './modules/data-manager';
+import { RenderingModule } from './modules/rendering';
+import { HoverDieOpacity, WaferMapColorScale, WaferMapColorScaleMode, WaferMapDie, WaferMapOrientation, WaferMapQuadrant } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-wafer-map': WaferMap;
+    }
+}
+/**
+ * A nimble-styled WaferMap
+ */
+export declare class WaferMap extends FoundationElement {
+    quadrant: WaferMapQuadrant;
+    orientation: WaferMapOrientation;
+    maxCharacters: number;
+    dieLabelsHidden: boolean;
+    dieLabelsSuffix: string;
+    colorScaleMode: WaferMapColorScaleMode;
+    /**
+     * @internal
+     */
+    readonly canvas: HTMLCanvasElement;
+    /**
+     * @internal
+     */
+    canvasContext: CanvasRenderingContext2D;
+    /**
+     * @internal
+     */
+    readonly zoomContainer: HTMLElement;
+    /**
+     * @internal
+     */
+    dataManager?: DataManager;
+    /**
+     * @internal
+     */
+    renderer?: RenderingModule;
+    /**
+     * @internal
+     */
+    renderQueued: boolean;
+    /**
+     * @internal
+     */
+    canvasWidth: number;
+    /**
+     * @internal
+     */
+    canvasHeight: number;
+    /**
+     * @internal
+     */
+    transform: ZoomTransform;
+    /**
+     * @internal
+     */
+    hoverTransform: string;
+    /**
+     * @internal
+     */
+    hoverOpacity: HoverDieOpacity;
+    /**
+     * @internal
+     */
+    hoverWidth: number;
+    /**
+     * @internal
+     */
+    hoverHeight: number;
+    /**
+     * @internal
+     */
+    hoverDie: WaferMapDie | undefined;
+    highlightedValues: string[];
+    dies: WaferMapDie[];
+    colorScale: WaferMapColorScale;
+    private eventCoordinator?;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    render(): void;
+    private queueRender;
+    private queueRenderHover;
+    private initializeInternalModules;
+    private createResizeObserver;
+    private quadrantChanged;
+    private orientationChanged;
+    private maxCharactersChanged;
+    private dieLabelsHiddenChanged;
+    private dieLabelsSuffixChanged;
+    private colorScaleModeChanged;
+    private highlightedValuesChanged;
+    private diesChanged;
+    private colorScaleChanged;
+    private transformChanged;
+    private canvasWidthChanged;
+    private canvasHeightChanged;
+    private hoverDieChanged;
+}
+export declare const waferMapTag: string;

package/dist/esm/src/wafer-map/modules/computations.d.ts

@@ -0,0 +1,26 @@
+import { ScaleBand, ScaleQuantile } from 'd3-scale';
+import type { WaferMap } from '..';
+import { Dimensions, Margin } from '../types';
+/**
+ * Computations calculates and stores different measures which are used in the Wafermap
+ */
+export declare class Computations {
+    readonly containerDimensions: Dimensions;
+    readonly dieDimensions: Dimensions;
+    readonly radius: number;
+    readonly margin: Margin;
+    readonly horizontalScale: ScaleBand<number>;
+    readonly verticalScale: ScaleBand<number>;
+    readonly invertedHorizontalScale: ScaleQuantile<number, number>;
+    readonly invertedVerticalScale: ScaleQuantile<number, number>;
+    private readonly defaultPadding;
+    private readonly baseMarginPercentage;
+    constructor(wafermap: WaferMap);
+    private calculateGridDimensions;
+    private calculateContainerDimensions;
+    private createHorizontalScale;
+    private createInvertedHorizontalScale;
+    private createVerticalScale;
+    private createInvertedVerticalScale;
+    private calculateMarginAddition;
+}

package/dist/esm/src/wafer-map/modules/data-manager.d.ts

@@ -0,0 +1,23 @@
+import type { ScaleBand, ScaleQuantile } from 'd3-scale';
+import type { WaferMap } from '..';
+import type { Dimensions, Margin, DieRenderInfo, WaferMapDie, PointCoordinates } from '../types';
+/**
+ * Data Manager uses Computations and Prerendering modules in order and exposes the results
+ */
+export declare class DataManager {
+    get containerDimensions(): Dimensions;
+    get dieDimensions(): Dimensions;
+    get radius(): number;
+    get margin(): Margin;
+    get horizontalScale(): ScaleBand<number>;
+    get invertedHorizontalScale(): ScaleQuantile<number, number>;
+    get verticalScale(): ScaleBand<number>;
+    get invertedVerticalScale(): ScaleQuantile<number, number>;
+    get labelsFontSize(): number;
+    get diesRenderInfo(): DieRenderInfo[];
+    private readonly computations;
+    private readonly prerendering;
+    private readonly dataMap;
+    constructor(wafermap: WaferMap);
+    getWaferMapDie(point: PointCoordinates): WaferMapDie | undefined;
+}

package/dist/esm/src/wafer-map/modules/event-coordinator.d.ts

@@ -0,0 +1,19 @@
+import type { WaferMapDie } from '../types';
+import type { WaferMap } from '..';
+export interface EventCoordinatorCallbacks {
+    dieSelected: (die: WaferMapDie) => void;
+}
+/**
+ * EventCoordinator deals with user interactions and events
+ */
+export declare class EventCoordinator {
+    private readonly wafermap;
+    private readonly zoomHandler;
+    private readonly hoverHandler;
+    constructor(wafermap: WaferMap);
+    detachEvents(): void;
+    private readonly onWheelMove;
+    private readonly onMouseMove;
+    private readonly onMouseOut;
+    private attachEvents;
+}

package/dist/esm/src/wafer-map/modules/hover-handler.d.ts

@@ -0,0 +1,12 @@
+import type { WaferMap } from '..';
+/**
+ * HoverHandler deals with user interactions and events like hovering
+ */
+export declare class HoverHandler {
+    private readonly wafermap;
+    constructor(wafermap: WaferMap);
+    mousemove(event: MouseEvent): void;
+    mouseout(_event: MouseEvent): void;
+    private calculateDieCoordinates;
+    private hoversOverDie;
+}

package/dist/esm/src/wafer-map/modules/prerendering.d.ts

@@ -0,0 +1,24 @@
+import { ScaleBand, ScaleLinear, ScaleOrdinal } from 'd3-scale';
+import type { Dimensions, Margin, DieRenderInfo } from '../types';
+import type { WaferMap } from '..';
+/**
+ * Prerendering prepares render-ready dies data to be used by the rendering module
+ */
+export declare class Prerendering {
+    readonly labelsFontSize: number;
+    readonly diesRenderInfo: DieRenderInfo[];
+    readonly d3ColorScale: ScaleOrdinal<string, string> | ScaleLinear<string, string>;
+    private readonly fontSizeFactor;
+    private readonly nonHighlightedOpacity;
+    private readonly emptyDieColor;
+    private readonly nanDieColor;
+    constructor(wafermap: WaferMap, horizontalScale: ScaleBand<number>, verticalScale: ScaleBand<number>, dieDimensions: Readonly<Dimensions>, margin: Readonly<Margin>);
+    private calculateLabelsFontSize;
+    private createD3ColorScale;
+    private dieHasData;
+    private buildLabel;
+    private calculateOpacity;
+    private isColorScaleLinear;
+    private isColorScaleOrdinal;
+    private calculateFillStyle;
+}

package/dist/esm/src/wafer-map/modules/rendering.d.ts

@@ -0,0 +1,18 @@
+import type { WaferMap } from '..';
+/**
+ * Responsible for drawing the dies inside the wafer map, adding dieText and scaling the canvas
+ */
+export declare class RenderingModule {
+    private readonly wafermap;
+    private readonly dies;
+    private readonly dimensions;
+    private readonly labelFontSize;
+    constructor(wafermap: WaferMap);
+    drawWafer(): void;
+    renderHover(): void;
+    private calculateHoverTransform;
+    private renderDies;
+    private renderText;
+    private clearCanvas;
+    private scaleCanvas;
+}

package/dist/esm/src/wafer-map/modules/zoom-handler.d.ts

@@ -0,0 +1,16 @@
+import type { WaferMap } from '..';
+/**
+ * ZoomHandler deals with user interactions and events like zooming
+ */
+export declare class ZoomHandler {
+    private readonly wafermap;
+    private zoomTransform;
+    private readonly minScale;
+    private readonly minExtentPoint;
+    private readonly extentPadding;
+    private readonly zoomBehavior;
+    constructor(wafermap: WaferMap);
+    private rescale;
+    private createZoomBehavior;
+    private getZoomMax;
+}

package/dist/esm/src/wafer-map/styles.d.ts

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

package/dist/esm/src/wafer-map/template.d.ts

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

package/dist/esm/src/wafer-map/types.d.ts

@@ -0,0 +1,61 @@
+import type { DataManager } from './modules/data-manager';
+export declare const WaferMapQuadrant: {
+    readonly bottomLeft: "bottom-left";
+    readonly bottomRight: "bottom-right";
+    readonly topLeft: "top-left";
+    readonly topRight: "top-right";
+};
+export declare type WaferMapQuadrant = (typeof WaferMapQuadrant)[keyof typeof WaferMapQuadrant];
+export declare const WaferMapOrientation: {
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly left: "left";
+    readonly right: "right";
+};
+export declare type WaferMapOrientation = (typeof WaferMapOrientation)[keyof typeof WaferMapOrientation];
+export declare const HoverDieOpacity: {
+    readonly show: "show";
+    readonly hide: "hide";
+};
+export declare type HoverDieOpacity = (typeof HoverDieOpacity)[keyof typeof HoverDieOpacity];
+export declare const WaferMapColorScaleMode: {
+    readonly linear: "linear";
+    readonly ordinal: "ordinal";
+};
+export declare type WaferMapColorScaleMode = (typeof WaferMapColorScaleMode)[keyof typeof WaferMapColorScaleMode];
+export interface WaferMapDie {
+    value: string;
+    x: number;
+    y: number;
+    metadata?: unknown;
+}
+export interface WaferMapColorScale {
+    colors: string[];
+    values: string[];
+}
+export interface HoverHandlerData {
+    canvas: HTMLCanvasElement;
+    rect: HTMLElement;
+    dataManager: DataManager;
+    quadrant: WaferMapQuadrant;
+}
+export interface Dimensions {
+    readonly width: number;
+    readonly height: number;
+}
+export interface Margin {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+}
+export interface DieRenderInfo {
+    readonly x: number;
+    readonly y: number;
+    readonly fillStyle: string;
+    readonly text: string;
+}
+export interface PointCoordinates {
+    readonly x: number;
+    readonly y: number;
+}

package/dist/esm/table/testing/table.pageobject.d.ts

@@ -1,9 +1,16 @@
 import type { Table } from '..';
 import type { TableHeader } from '../components/header';
-import { TableRecord, TableRowSelectionState } from '../types';
+import { TableColumnSortDirection, TableRecord, TableRowSelectionState } from '../types';
 import type { MenuButton } from '../../menu-button';
 import { TableCellView } from '../../table-column/base/cell-view';
 import { Anchor } from '../../anchor';
+/**
+ * Summary information about a column that is sorted in the table for use in the `TablePageObject`.
+ */
+export interface SortedColumn {
+    columnId?: string;
+    sortDirection: TableColumnSortDirection;
+}
 /**
  * Page object for the `nimble-table` component to provide consistent ways
  * of querying and interacting with the component during tests.
@@ -59,6 +66,9 @@ export declare class TablePageObject<T extends TableRecord> {
     clickRowSelectionCheckbox(rowIndex: number, shiftKey?: boolean): void;
     getGroupRowSelectionState(groupRowIndex: number): TableRowSelectionState;
     clickGroupRowSelectionCheckbox(groupRowIndex: number, shiftKey?: boolean): void;
+    getSortedColumns(): SortedColumn[];
+    getGroupedColumns(): string[];
+    getChildRowCountForGroup(groupRowIndex: number): number;
     private getRow;
     private getCell;
     private getCollapseAllButton;