@ni/nimble-components 1.0.0-beta.0 → 1.0.0-beta.101

package/dist/esm/drawer/index.js

@@ -0,0 +1,190 @@
+import { __decorate } from "tslib";
+import { AnimateGroup, AnimateTo } from '@microsoft/fast-animation';
+import { attr, Observable } from '@microsoft/fast-element';
+import { DesignSystem, Dialog as FoundationDialog, dialogTemplate as template } from '@microsoft/fast-foundation';
+import { drawerAnimationDurationMs } from '../theme-provider/design-tokens';
+import { animationConfig } from './animations';
+import { styles } from './styles';
+import { DrawerLocation, DrawerState } from './types';
+const animationDurationWhenDisabledMilliseconds = 0.001;
+/**
+ * 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.
+ */
+export class Drawer extends FoundationDialog {
+    constructor() {
+        super(...arguments);
+        this.location = DrawerLocation.Left;
+        this.state = DrawerState.Closed;
+        /**
+         * 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
+         */
+        this.preventDismiss = false;
+        this.propertiesToWatch = ['hidden', 'location', 'state'];
+        this.animationDurationMilliseconds = animationDurationWhenDisabledMilliseconds;
+    }
+    connectedCallback() {
+        // disable trapFocus before super.connectedCallback as FAST Dialog will immediately queue work to
+        // change focus if it's true before connectedCallback
+        this.trapFocus = false;
+        super.connectedCallback();
+        this.prefersReducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        this.updateAnimationDuration();
+        this.animationsEnabledChangedHandler = () => this.updateAnimationDuration();
+        this.prefersReducedMotionMediaQuery.addEventListener('change', this.animationsEnabledChangedHandler);
+        this.onStateChanged();
+        const notifier = Observable.getNotifier(this);
+        const subscriber = {
+            handleChange: (_source, propertyName) => this.onPropertyChange(propertyName)
+        };
+        this.propertiesToWatch.forEach(propertyName => notifier.subscribe(subscriber, propertyName));
+        this.propertyChangeSubscriber = subscriber;
+        this.propertyChangeNotifier = notifier;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cancelCurrentAnimation();
+        if (this.propertyChangeNotifier && this.propertyChangeSubscriber) {
+            this.propertiesToWatch.forEach(propertyName => this.propertyChangeNotifier.unsubscribe(this.propertyChangeSubscriber, propertyName));
+            this.propertyChangeNotifier = undefined;
+            this.propertyChangeSubscriber = undefined;
+        }
+        if (this.prefersReducedMotionMediaQuery
+            && this.animationsEnabledChangedHandler) {
+            this.prefersReducedMotionMediaQuery.removeEventListener('change', this.animationsEnabledChangedHandler);
+            this.prefersReducedMotionMediaQuery = undefined;
+            this.animationsEnabledChangedHandler = undefined;
+        }
+    }
+    show() {
+        // Not calling super.show() as that will immediately show the drawer, whereas 'Opening' state will animate
+        this.state = DrawerState.Opening;
+    }
+    hide() {
+        // Not calling super.hide() as that will immediately hide the drawer, whereas 'Closing' state will animate
+        this.state = DrawerState.Closing;
+    }
+    dismiss() {
+        if (!this.preventDismiss) {
+            super.dismiss();
+            this.hide();
+        }
+    }
+    onPropertyChange(propertyName) {
+        switch (propertyName) {
+            case 'hidden':
+                this.onHiddenChanged();
+                break;
+            case 'location':
+                this.onLocationChanged();
+                break;
+            case 'state':
+                this.onStateChanged();
+                break;
+            default:
+                break;
+        }
+    }
+    onHiddenChanged() {
+        if (this.hidden && this.state !== DrawerState.Closed) {
+            this.state = DrawerState.Closed;
+        }
+        else if (!this.hidden && this.state === DrawerState.Closed) {
+            this.state = DrawerState.Opened;
+        }
+    }
+    onLocationChanged() {
+        this.cancelCurrentAnimation();
+    }
+    onStateChanged() {
+        if (this.isConnected) {
+            this.cancelCurrentAnimation();
+            switch (this.state) {
+                case DrawerState.Opening:
+                    this.animateOpening();
+                    this.hidden = false;
+                    break;
+                case DrawerState.Opened:
+                    this.hidden = false;
+                    break;
+                case DrawerState.Closing:
+                    this.hidden = false;
+                    this.animateClosing();
+                    break;
+                case DrawerState.Closed:
+                    this.hidden = true;
+                    break;
+                default:
+                    throw new Error('Unsupported state value. Expected: opening/opened/closing/closed');
+            }
+            this.$emit('state-change');
+        }
+    }
+    updateAnimationDuration() {
+        const disableAnimations = this.prefersReducedMotionMediaQuery?.matches;
+        this.animationDurationMilliseconds = disableAnimations
+            ? animationDurationWhenDisabledMilliseconds
+            : drawerAnimationDurationMs.getValueFor(this);
+    }
+    animateOpening() {
+        this.animateOpenClose(true);
+    }
+    animateClosing() {
+        if (!this.hidden) {
+            this.animateOpenClose(false);
+        }
+        else {
+            this.state = DrawerState.Closed;
+        }
+    }
+    animateOpenClose(drawerOpening) {
+        const options = {
+            ...(drawerOpening
+                ? animationConfig.slideInOptions
+                : animationConfig.slideOutOptions),
+            duration: this.animationDurationMilliseconds
+        };
+        const drawerKeyframes = this.location === DrawerLocation.Right
+            ? animationConfig.slideRightKeyframes
+            : animationConfig.slideLeftKeyframes;
+        const dialogAnimation = new AnimateTo(this.dialog, undefined, options);
+        dialogAnimation.addKeyframes(drawerKeyframes);
+        const animations = [dialogAnimation];
+        const overlay = this.shadowRoot?.querySelector('.overlay');
+        if (overlay) {
+            const overlayAnimation = new AnimateTo(overlay, undefined, options);
+            overlayAnimation.addKeyframes(animationConfig.fadeOverlayKeyframes);
+            animations.push(overlayAnimation);
+        }
+        const animationGroup = new AnimateGroup(animations);
+        animationGroup.onFinish = () => {
+            this.state = drawerOpening
+                ? DrawerState.Opened
+                : DrawerState.Closed;
+        };
+        this.animationGroup = animationGroup;
+        animationGroup.play();
+    }
+    cancelCurrentAnimation() {
+        this.animationGroup?.cancel();
+    }
+}
+__decorate([
+    attr
+], Drawer.prototype, "location", void 0);
+__decorate([
+    attr
+], Drawer.prototype, "state", void 0);
+__decorate([
+    attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
+], Drawer.prototype, "preventDismiss", void 0);
+export const nimbleDrawer = Drawer.compose({
+    baseName: 'drawer',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
+//# sourceMappingURL=index.js.map

package/dist/esm/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/drawer/styles.d.ts

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

package/dist/esm/drawer/styles.js

@@ -0,0 +1,115 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, fontFamily, popupBorderColor, popupBoxShadowColor } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('block')}
+
+    :host {
+        position: relative;
+        top: 0;
+        bottom: 0;
+        width: fit-content;
+        height: 100%;
+        outline: none;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        color: ${contentFontColor};
+    }
+
+    :host([modal]) {
+        position: absolute;
+    }
+
+    :host([location='left']) {
+        left: 0px;
+    }
+
+    :host([location='right']) {
+        right: 0px;
+    }
+
+    .positioning-region {
+        display: block;
+        position: relative;
+        justify-content: center;
+        width: fit-content;
+        height: 100%;
+        inset: 0px;
+        overflow: hidden;
+        z-index: 999;
+    }
+
+    :host([modal]) .positioning-region {
+        width: 100%;
+        position: fixed;
+        display: flex;
+    }
+
+    .overlay {
+        position: fixed;
+        inset: 0px;
+        background: ${popupBorderColor};
+        touch-action: none;
+    }
+
+    .control {
+        position: relative;
+        top: 0px;
+        bottom: 0px;
+        width: fit-content;
+        height: 100%;
+        display: grid;
+        grid-template-rows: max-content auto max-content;
+        flex-direction: column;
+        box-sizing: border-box;
+        border-radius: 0px;
+        border-width: 0px;
+        width: var(--drawer-width);
+        background-color: ${applicationBackgroundColor};
+    }
+
+    :host([modal]) .control {
+        position: absolute;
+        height: 100%;
+    }
+
+    :host(.hidden) .control {
+        visibility: hidden;
+    }
+
+    :host([location='left']) .control {
+        left: 0px;
+        border-right: ${borderWidth} solid ${popupBoxShadowColor};
+    }
+
+    :host([location='right']) .control {
+        right: 0px;
+        border-left: ${borderWidth} solid ${popupBoxShadowColor};
+    }
+
+    ${
+/*
+    Styling for a 3-panel drawer with header, footer, and a content
+    region filling the remaining space/height
+*/ ''}
+
+    ::slotted(header) {
+        padding: var(--standard-padding);
+        font-family: ${drawerHeaderFontFamily};
+        font-size: ${drawerHeaderFontSize};
+    }
+
+    ::slotted(section) {
+        padding: var(--standard-padding);
+        grid-row: 2;
+        overflow-y: auto;
+    }
+
+    ::slotted(footer) {
+        padding: var(--standard-padding);
+        display: flex;
+        justify-content: flex-end;
+        border-top: ${borderWidth} solid ${popupBorderColor};
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/drawer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;uBASC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmCX,gBAAgB;;;;;;;;;;;;;;;;;4BAiBV,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;;uBAImB,sBAAsB;qBACxB,oBAAoB;;;;;;;;;;;;;sBAanB,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}

package/dist/esm/drawer/types.d.ts

@@ -0,0 +1,10 @@
+export declare enum DrawerLocation {
+    Left = "left",
+    Right = "right"
+}
+export declare enum DrawerState {
+    Opening = "opening",
+    Opened = "opened",
+    Closing = "closing",
+    Closed = "closed"
+}

package/dist/esm/drawer/types.js

@@ -0,0 +1,13 @@
+export var DrawerLocation;
+(function (DrawerLocation) {
+    DrawerLocation["Left"] = "left";
+    DrawerLocation["Right"] = "right";
+})(DrawerLocation || (DrawerLocation = {}));
+export var DrawerState;
+(function (DrawerState) {
+    DrawerState["Opening"] = "opening";
+    DrawerState["Opened"] = "opened";
+    DrawerState["Closing"] = "closing";
+    DrawerState["Closed"] = "closed";
+})(DrawerState || (DrawerState = {}));
+//# sourceMappingURL=types.js.map

package/dist/esm/drawer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,+BAAa,CAAA;IACb,iCAAe,CAAA;AACnB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACnB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;IACjB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;AACrB,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB"}

package/dist/esm/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/icon-base/index.js

@@ -0,0 +1,22 @@
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { template } from './template';
+import { styles } from './styles';
+/**
+ * The base class for icon components
+ */
+export class Icon extends FoundationElement {
+    constructor(icon) {
+        super();
+        this.icon = icon;
+    }
+}
+export const registerIcon = (baseName, iconClass) => {
+    const composedIcon = iconClass.compose({
+        baseName,
+        template,
+        styles,
+        baseClass: iconClass
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/icon-base/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icon-base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,iBAAiB;IACvC,YAA0B,IAAgB;QACtC,KAAK,EAAE,CAAC;QADc,SAAI,GAAJ,IAAI,CAAY;IAE1C,CAAC;CACJ;AAID,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,SAAoB,EAAQ,EAAE;IACzE,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;QACnC,QAAQ;QACR,QAAQ;QACR,MAAM;QACN,SAAS,EAAE,SAAS;KACvB,CAAC,CAAC;IAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AAC7E,CAAC,CAAC"}

package/dist/esm/icon-base/styles.d.ts

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

package/dist/esm/icon-base/styles.js

@@ -0,0 +1,38 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { contentFontColor, iconSize, warningColor, failColor, passColor } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        align-items: center;
+        user-select: none;
+        width: ${iconSize};
+        height: ${iconSize};
+        --icon-color: ${contentFontColor};
+    }
+
+    .icon {
+        width: 100%;
+        height: 100%;
+    }
+
+    :host(.fail) {
+        --icon-color: ${failColor};
+    }
+
+    :host(.warning) {
+        --icon-color: ${warningColor};
+    }
+
+    :host(.pass) {
+        --icon-color: ${passColor};
+    }
+
+    .icon svg {
+        fill: var(--icon-color);
+        width: 100%;
+        height: 100%;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/icon-base/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;wBACF,gBAAgB;;;;;;;;;wBAShB,SAAS;;;;wBAIT,YAAY;;;;wBAIZ,SAAS;;;;;;;;CAQhC,CAAC"}

package/dist/esm/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/icon-base/template.js

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+export const template = html `
+    <template slot="start">
+        <div class="icon" :innerHTML=${x => x.icon.data}></div>
+    </template
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/icon-base/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/icon-base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;uCAEK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;CAEtD,CAAC"}

package/dist/esm/icons/access-control.d.ts

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

package/dist/esm/icons/access-control.js

@@ -0,0 +1,12 @@
+import { accessControlKey16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'access-control' icon
+ */
+export class AccessControlIcon extends Icon {
+    constructor() {
+        super(accessControlKey16X16);
+    }
+}
+registerIcon('access-control-icon', AccessControlIcon);
+//# sourceMappingURL=access-control.js.map

package/dist/esm/icons/access-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"access-control.js","sourceRoot":"","sources":["../../../src/icons/access-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sDAAsD,CAAC;AAC7F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,IAAI;IACvC;QACI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACjC,CAAC;CACJ;AAED,YAAY,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/esm/icons/admin.d.ts

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

package/dist/esm/icons/admin.js

@@ -0,0 +1,12 @@
+import { admin16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'admin' icon
+ */
+export class AdminIcon extends Icon {
+    constructor() {
+        super(admin16X16);
+    }
+}
+registerIcon('admin-icon', AdminIcon);
+//# sourceMappingURL=admin.js.map

package/dist/esm/icons/admin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin.js","sourceRoot":"","sources":["../../../src/icons/admin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,IAAI;IAC/B;QACI,KAAK,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;CACJ;AAED,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC"}

package/dist/esm/icons/administration.d.ts

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

package/dist/esm/icons/administration.js

@@ -0,0 +1,12 @@
+import { administration16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'administration' icon
+ */
+export class AdministrationIcon extends Icon {
+    constructor() {
+        super(administration16X16);
+    }
+}
+registerIcon('administration-icon', AdministrationIcon);
+//# sourceMappingURL=administration.js.map

package/dist/esm/icons/administration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"administration.js","sourceRoot":"","sources":["../../../src/icons/administration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,IAAI;IACxC;QACI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC/B,CAAC;CACJ;AAED,YAAY,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,CAAC"}

package/dist/esm/icons/all-icons.d.ts

@@ -0,0 +1,13 @@
+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 { LoginIcon } from './login';
+export { LogoutIcon } from './logout';
+export { ManagedSystemsIcon } from './managed-systems';
+export { MeasurementDataAnalysisIcon } from './measurement-data-analysis';
+export { SettingsIcon } from './settings';
+export { TestInsightsIcon } from './test-insights';
+export { UtilitiesIcon } from './utilities';

package/dist/esm/icons/all-icons.js

@@ -0,0 +1,14 @@
+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 { LoginIcon } from './login';
+export { LogoutIcon } from './logout';
+export { ManagedSystemsIcon } from './managed-systems';
+export { MeasurementDataAnalysisIcon } from './measurement-data-analysis';
+export { SettingsIcon } from './settings';
+export { TestInsightsIcon } from './test-insights';
+export { UtilitiesIcon } from './utilities';
+//# sourceMappingURL=all-icons.js.map

package/dist/esm/icons/all-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"all-icons.js","sourceRoot":"","sources":["../../../src/icons/all-icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/esm/icons/check.d.ts

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

package/dist/esm/icons/check.js

@@ -0,0 +1,12 @@
+import { controlsCheckboxCheck16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ *  The icon component for the 'check' icon
+ */
+export class CheckIcon extends Icon {
+    constructor() {
+        super(controlsCheckboxCheck16X16);
+    }
+}
+registerIcon('check-icon', CheckIcon);
+//# sourceMappingURL=check.js.map

package/dist/esm/icons/check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"check.js","sourceRoot":"","sources":["../../../src/icons/check.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAC;AAClG,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,IAAI;IAC/B;QACI,KAAK,CAAC,0BAA0B,CAAC,CAAC;IACtC,CAAC;CACJ;AAED,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC"}

package/dist/esm/icons/custom-applications.d.ts

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

package/dist/esm/icons/custom-applications.js

@@ -0,0 +1,12 @@
+import { customApplications16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'custom-applications' icon
+ */
+export class CustomApplicationsIcon extends Icon {
+    constructor() {
+        super(customApplications16X16);
+    }
+}
+registerIcon('custom-applications-icon', CustomApplicationsIcon);
+//# sourceMappingURL=custom-applications.js.map

package/dist/esm/icons/custom-applications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-applications.js","sourceRoot":"","sources":["../../../src/icons/custom-applications.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,sDAAsD,CAAC;AAC/F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,sBAAuB,SAAQ,IAAI;IAC5C;QACI,KAAK,CAAC,uBAAuB,CAAC,CAAC;IACnC,CAAC;CACJ;AAED,YAAY,CAAC,0BAA0B,EAAE,sBAAsB,CAAC,CAAC"}

package/dist/esm/icons/delete.d.ts

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

package/dist/esm/icons/delete.js

@@ -0,0 +1,12 @@
+import { delete16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'delete' icon
+ */
+export class DeleteIcon extends Icon {
+    constructor() {
+        super(delete16X16);
+    }
+}
+registerIcon('delete-icon', DeleteIcon);
+//# sourceMappingURL=delete.js.map

package/dist/esm/icons/delete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete.js","sourceRoot":"","sources":["../../../src/icons/delete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAChC;QACI,KAAK,CAAC,WAAW,CAAC,CAAC;IACvB,CAAC;CACJ;AAED,YAAY,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC"}