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

package/dist/esm/drawer/index.js

@@ -1,190 +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());
+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/styles.d.ts

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

package/dist/esm/drawer/styles.js

@@ -1,115 +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};
-    }
-`;
+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/types.d.ts

@@ -1,10 +1,10 @@
-export declare enum DrawerLocation {
-    Left = "left",
-    Right = "right"
-}
-export declare enum DrawerState {
-    Opening = "opening",
-    Opened = "opened",
-    Closing = "closing",
-    Closed = "closed"
-}
+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

@@ -1,13 +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 = {}));
+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