@ni/nimble-components 1.0.0-beta.12 → 1.0.0-beta.123

package/dist/esm/menu-item/styles.js

@@ -0,0 +1,64 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { controlHeight, fontFamily, contentFontSize, fillColorSelected, fillColorHover, contentFontColor, borderColorHover, contentFontColorDisabled, iconSize } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('grid')}
+
+    :host {
+        contain: layout;
+        overflow: visible;
+        box-sizing: border-box;
+        height: ${controlHeight};
+        grid-template-columns: 0px 1fr;
+        grid-template-rows: 1fr;
+        justify-items: start;
+        align-items: center;
+        padding-left: 8px;
+        padding-right: 8px;
+        margin: 0 0;
+        white-space: nowrap;
+        color: ${contentFontColor};
+        fill: currentcolor;
+        cursor: pointer;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+    }
+    :host(${focusVisible}) {
+        outline: 2px solid ${borderColorHover};
+        outline-offset: -2px;
+    }
+    :host(:hover) {
+        background: ${fillColorHover};
+    }
+    :host(:active) {
+        background: ${fillColorSelected};
+    }
+    :host([disabled]) {
+        color: ${contentFontColorDisabled};
+        fill: currentcolor;
+        cursor: default;
+    }
+    :host([disabled]:hover) {
+        background: transparent;
+    }
+    :host(.indent-1) {
+        grid-template-columns: ${iconSize} 1fr;
+        column-gap: 8px;
+    }
+    [part='start'] {
+        display: contents;
+    }
+    slot[name='start']::slotted(*) {
+        fill: currentcolor;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+    :host(.indent-1) .start {
+        grid-column: 1;
+    }
+    :host(.indent-1) .content {
+        grid-column: 2;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/menu-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;kBAMH,aAAa;;;;;;;;;iBASd,gBAAgB;;;uBAGV,UAAU;qBACZ,eAAe;;YAExB,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,wBAAwB;;;;;;;;iCAQR,QAAQ;;;;;;;;iBAQxB,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC"}

package/dist/esm/nimble-components/src/button/behaviors.d.ts

@@ -0,0 +1,12 @@
+import type { Behavior, ElementStyles } from '@microsoft/fast-element';
+import type { ButtonAppearance } from './types';
+/**
+ * Behavior that will conditionally apply a stylesheet based on the element's
+ * appearance property
+ *
+ * @param value - The value of the appearance property
+ * @param styles - The styles to be applied when condition matches
+ *
+ * @public
+ */
+export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;

package/dist/esm/nimble-components/src/button/index.d.ts

@@ -0,0 +1,24 @@
+import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import { ButtonAppearance } from './types';
+export type { Button };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-button': Button;
+    }
+}
+/**
+ * A nimble-styled HTML button
+ */
+declare class Button extends FoundationButton {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: ButtonAppearance;
+    connectedCallback(): void;
+    defaultSlottedContentChanged(): void;
+    private checkForEmptyText;
+}

package/dist/esm/nimble-components/src/button/styles.d.ts

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

package/dist/esm/nimble-components/src/button/types.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Types of button appearance.
+ * @public
+ */
+import type { Button } from '@microsoft/fast-foundation';
+export declare type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block';
+export declare enum ButtonAppearance {
+    Outline = "outline",
+    Ghost = "ghost",
+    Block = "block"
+}
+export declare type ButtonType = Button['type'];

package/dist/esm/nimble-components/src/checkbox/index.d.ts

@@ -0,0 +1,12 @@
+import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
+export type { Checkbox };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-checkbox': Checkbox;
+    }
+}
+/**
+ * A nimble-styled checkbox control.
+ */
+declare class Checkbox extends FoundationCheckbox {
+}

package/dist/esm/nimble-components/src/checkbox/styles.d.ts

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

package/dist/esm/nimble-components/src/drawer/animations.d.ts

@@ -0,0 +1,14 @@
+export declare const animationConfig: {
+    slideLeftKeyframes: Keyframe[];
+    slideRightKeyframes: Keyframe[];
+    fadeOverlayKeyframes: Keyframe[];
+    slideInOptions: {
+        duration: number;
+        easing: string;
+    };
+    slideOutOptions: {
+        duration: number;
+        easing: string;
+        direction: string;
+    };
+};

package/dist/esm/nimble-components/src/drawer/index.d.ts

@@ -0,0 +1,43 @@
+import { Dialog as FoundationDialog } from '@microsoft/fast-foundation';
+import { DrawerLocation, DrawerState } from './types';
+export type { Drawer };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-drawer': Drawer;
+    }
+}
+/**
+ * Drawer/Sidenav control. Shows content in a panel on the left / right side of the screen,
+ * which animates to be visible with a slide-in / slide-out animation.
+ * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
+ */
+declare class Drawer extends FoundationDialog {
+    location: DrawerLocation;
+    state: DrawerState;
+    /**
+     * True to prevent dismissing the drawer when the overlay outside the drawer is clicked.
+     * Only applicable when 'modal' is set to true (i.e. when the overlay is used).
+     * HTML Attribute: prevent-dismiss
+     */
+    preventDismiss: boolean;
+    private readonly propertiesToWatch;
+    private propertyChangeNotifier?;
+    private animationDurationMilliseconds;
+    private animationGroup?;
+    private animationsEnabledChangedHandler?;
+    private propertyChangeSubscriber?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    hide(): void;
+    dismiss(): void;
+    private onPropertyChange;
+    private onHiddenChanged;
+    private onLocationChanged;
+    private onStateChanged;
+    private updateAnimationDuration;
+    private animateOpening;
+    private animateClosing;
+    private animateOpenClose;
+    private cancelCurrentAnimation;
+}

package/dist/esm/nimble-components/src/drawer/styles.d.ts

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

package/dist/esm/nimble-components/src/drawer/types.d.ts

@@ -0,0 +1,12 @@
+export declare type DrawerLocationAttribute = 'left' | 'right';
+export declare enum DrawerLocation {
+    Left = "left",
+    Right = "right"
+}
+export declare type DrawerStateAttribute = 'opening' | 'opened' | 'closing' | 'closed';
+export declare enum DrawerState {
+    Opening = "opening",
+    Opened = "opened",
+    Closing = "closing",
+    Closed = "closed"
+}

package/dist/esm/nimble-components/src/icon-base/index.d.ts

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { NimbleIcon } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+/**
+ * The base class for icon components
+ */
+export declare class Icon extends FoundationElement {
+    icon: NimbleIcon;
+    constructor(icon: NimbleIcon);
+}
+declare type IconClass = typeof Icon;
+export declare const registerIcon: (baseName: string, iconClass: IconClass) => void;
+export {};

package/dist/esm/nimble-components/src/icon-base/styles.d.ts

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

package/dist/esm/nimble-components/src/icon-base/template.d.ts

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

package/dist/esm/nimble-components/src/icon-base/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Predefined icon status states
+ * @public
+ */
+export declare type IconStatusAttribute = 'fail' | 'warning' | 'pass' | 'regular';
+export declare enum IconStatus {
+    Fail = "fail",
+    Warning = "warning",
+    Pass = "pass",
+    Regular = "regular"
+}

package/dist/esm/nimble-components/src/icons/access-control.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-access-control-icon': AccessControlIcon;
+    }
+}
+/**
+ * The icon component for the 'access-control' icon
+ */
+export declare class AccessControlIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/admin.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-admin-icon': AdminIcon;
+    }
+}
+/**
+ * The icon component for the 'admin' icon
+ */
+export declare class AdminIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/administration.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-administration-icon': AdministrationIcon;
+    }
+}
+/**
+ * The icon component for the 'administration' icon
+ */
+export declare class AdministrationIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/all-icons.d.ts

@@ -0,0 +1,15 @@
+export { AccessControlIcon } from './access-control';
+export { AdminIcon } from './admin';
+export { AdministrationIcon } from './administration';
+export { CheckIcon } from './check';
+export { CustomApplicationsIcon } from './custom-applications';
+export { DeleteIcon } from './delete';
+export { FailIcon } from './fail';
+export { LoginIcon } from './login';
+export { LogoutIcon } from './logout';
+export { ManagedSystemsIcon } from './managed-systems';
+export { MeasurementDataAnalysisIcon } from './measurement-data-analysis';
+export { SettingsIcon } from './settings';
+export { SucceededIcon } from './succeeded';
+export { TestInsightsIcon } from './test-insights';
+export { UtilitiesIcon } from './utilities';

package/dist/esm/nimble-components/src/icons/check.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-check-icon': CheckIcon;
+    }
+}
+/**
+ *  The icon component for the 'check' icon
+ */
+export declare class CheckIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/custom-applications.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-custom-applications-icon': CustomApplicationsIcon;
+    }
+}
+/**
+ * The icon component for the 'custom-applications' icon
+ */
+export declare class CustomApplicationsIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/delete.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-delete-icon': DeleteIcon;
+    }
+}
+/**
+ * The icon component for the 'delete' icon
+ */
+export declare class DeleteIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/fail.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-fail-icon': FailIcon;
+    }
+}
+/**
+ *  The icon component for the 'fail' icon
+ */
+export declare class FailIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/login.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-login-icon': LoginIcon;
+    }
+}
+/**
+ * The icon component for the 'login' icon
+ */
+export declare class LoginIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/logout.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-logout-icon': LogoutIcon;
+    }
+}
+/**
+ * The icon component for the 'logout' icon
+ */
+export declare class LogoutIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/managed-systems.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-managed-systems-icon': ManagedSystemsIcon;
+    }
+}
+/**
+ * The icon component for the 'managed-systems' icon
+ */
+export declare class ManagedSystemsIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/measurement-data-analysis.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-measurement-data-analysis-icon': MeasurementDataAnalysisIcon;
+    }
+}
+/**
+ * The icon component for the 'measurement-data-analysis' icon
+ */
+export declare class MeasurementDataAnalysisIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/settings.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-settings-icon': SettingsIcon;
+    }
+}
+/**
+ * The icon component for the 'settings' icon
+ */
+export declare class SettingsIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/succeeded.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-succeeded-icon': SucceededIcon;
+    }
+}
+/**
+ *  The icon component for the 'succeeded' icon
+ */
+export declare class SucceededIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/test-insights.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-test-insights-icon': TestInsightsIcon;
+    }
+}
+/**
+ * The icon component for the 'test-insights' icon
+ */
+export declare class TestInsightsIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/utilities.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-utilities-icon': UtilitiesIcon;
+    }
+}
+/**
+ * The icon component for the 'utilities' icon
+ */
+export declare class UtilitiesIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/listbox-option/index.d.ts

@@ -0,0 +1,15 @@
+import { ListboxOption as FoundationListboxOption } from '@microsoft/fast-foundation';
+export type { ListboxOption };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-listbox-option': ListboxOption;
+    }
+}
+/**
+ * A nimble-styled HTML listbox option
+ */
+declare class ListboxOption extends FoundationListboxOption {
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+}

package/dist/esm/nimble-components/src/listbox-option/styles.d.ts

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

package/dist/esm/nimble-components/src/menu/index.d.ts

@@ -0,0 +1,12 @@
+import { Menu as FoundationMenu } from '@microsoft/fast-foundation';
+export type { Menu };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-menu': Menu;
+    }
+}
+/**
+ * A nimble-styled menu
+ */
+declare class Menu extends FoundationMenu {
+}

package/dist/esm/nimble-components/src/menu/styles.d.ts

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

package/dist/esm/nimble-components/src/menu-item/index.d.ts

@@ -0,0 +1,12 @@
+import { MenuItem as FoundationMenuItem } from '@microsoft/fast-foundation';
+export type { MenuItem };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-menu-item': MenuItem;
+    }
+}
+/**
+ * A nimble-styled menu-item
+ */
+declare class MenuItem extends FoundationMenuItem {
+}

package/dist/esm/nimble-components/src/menu-item/styles.d.ts

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

package/dist/esm/nimble-components/src/number-field/index.d.ts

@@ -0,0 +1,12 @@
+import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
+export type { NumberField };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-number-field': NumberField;
+    }
+}
+/**
+ * A nimble-styled HTML number input
+ */
+declare class NumberField extends FoundationNumberField {
+}

package/dist/esm/nimble-components/src/number-field/styles.d.ts

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

package/dist/esm/nimble-components/src/select/index.d.ts

@@ -0,0 +1,16 @@
+import { Select as FoundationSelect } from '@microsoft/fast-foundation';
+export type { Select };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-select': Select;
+    }
+}
+/**
+ * A nimble-styed HTML select
+ */
+declare class Select extends FoundationSelect {
+    get value(): string;
+    set value(value: string);
+    setPositioning(): void;
+    connectedCallback(): void;
+}

package/dist/esm/nimble-components/src/select/styles.d.ts

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

package/dist/esm/nimble-components/src/tab/index.d.ts

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

package/dist/esm/nimble-components/src/tab/styles.d.ts

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

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

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

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

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

package/dist/esm/nimble-components/src/tabs/index.d.ts

@@ -0,0 +1,12 @@
+import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
+export type { Tabs };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tabs': Tabs;
+    }
+}
+/**
+ * A nimble-styled tabs control
+ */
+declare class Tabs extends FoundationTabs {
+}

package/dist/esm/nimble-components/src/tabs/styles.d.ts

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

package/dist/esm/nimble-components/src/tabs-toolbar/index.d.ts

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export type { TabsToolbar };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tabs-toolbar': TabsToolbar;
+    }
+}
+/**
+ * A nimble-styled container for toolbar content next to tabs.
+ */
+declare class TabsToolbar extends FoundationElement {
+}

package/dist/esm/nimble-components/src/tabs-toolbar/styles.d.ts

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

package/dist/esm/nimble-components/src/tabs-toolbar/template.d.ts

@@ -0,0 +1 @@
+export declare const template: import("@microsoft/fast-element").ViewTemplate<any, any>;

package/dist/esm/nimble-components/src/testing/async-helpers.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Allows test code to wait for components to complete pending asynchronous updates that resulted
+ * from DOM interactions like property or attribute changes.
+ */
+export declare const waitForUpdatesAsync: () => Promise<void>;
+/**
+ * Allows test code to force components to synchronously complete normally asynchronous pending
+ * updates that resulted from DOM interactions like property or attribute changes.
+ */
+export declare const processUpdates: () => void;