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

package/dist/esm/checkbox/styles.js

@@ -1,92 +1,92 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { focusVisible } from '../utilities/style/focus';
-import { borderColor, borderColorHover, borderColorRgb, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
-export const styles = css `
-    ${display('inline-flex')}
-
-    :host {
-        align-items: center;
-        cursor: pointer;
-        outline: none;
-        user-select: none;
-    }
-
-    :host([disabled]) {
-        cursor: default;
-    }
-
-    .control {
-        width: calc(${controlHeight} / 2);
-        height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
-        flex-shrink: 0;
-        border: ${borderWidth} solid ${borderColor};
-        padding: 2px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition: box-shadow ${smallDelay};
-        ${
-/*
- * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).
- * Set it to 0 to ensure the outline is just as high as the control.
- */ ''}
-        line-height: 0;
-    }
-
-    @media (prefers-reduced-motion) {
-        .control {
-            transition-duration: 0s;
-        }
-    }
-
-    :host([disabled]) .control {
-        background-color: rgba(${borderColorRgb}, 0.1);
-        border-color: rgba(${borderColorRgb}, 0.2);
-    }
-
-    :host(:not([disabled]):not(:active):hover) .control {
-        border-color: ${borderColorHover};
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
-    }
-
-    :host(${focusVisible}) .control {
-        border-color: ${borderColorHover};
-        outline: 2px solid ${borderColorHover};
-        outline-offset: 2px;
-    }
-
-    .label {
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
-        color: ${contentFontColor};
-        line-height: ${labelHeight};
-        padding-left: 1ch;
-        cursor: inherit;
-    }
-
-    :host([disabled]) .label {
-        color: ${contentFontColorDisabled};
-    }
-
-    slot[name='checked-indicator'] svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        overflow: visible;
-    }
-
-    slot[name='checked-indicator'] path {
-        fill: ${borderColor};
-        opacity: 0;
-    }
-
-    :host([aria-checked='true']) slot[name='checked-indicator'] path {
-        opacity: 1;
-    }
-
-    :host([disabled]) slot[name='checked-indicator'] path {
-        fill: rgba(${borderColorRgb}, 0.3);
-    }
-`;
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { borderColor, borderColorHover, borderColorRgb, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        align-items: center;
+        cursor: pointer;
+        outline: none;
+        user-select: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+    }
+
+    .control {
+        width: calc(${controlHeight} / 2);
+        height: calc(${controlHeight} / 2);
+        box-sizing: border-box;
+        flex-shrink: 0;
+        border: ${borderWidth} solid ${borderColor};
+        padding: 2px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: box-shadow ${smallDelay};
+        ${
+/*
+ * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).
+ * Set it to 0 to ensure the outline is just as high as the control.
+ */ ''}
+        line-height: 0;
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+
+    :host([disabled]) .control {
+        background-color: rgba(${borderColorRgb}, 0.1);
+        border-color: rgba(${borderColorRgb}, 0.2);
+    }
+
+    :host(:not([disabled]):not(:active):hover) .control {
+        border-color: ${borderColorHover};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+    }
+
+    :host(${focusVisible}) .control {
+        border-color: ${borderColorHover};
+        outline: 2px solid ${borderColorHover};
+        outline-offset: 2px;
+    }
+
+    .label {
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        color: ${contentFontColor};
+        line-height: ${labelHeight};
+        padding-left: 1ch;
+        cursor: inherit;
+    }
+
+    :host([disabled]) .label {
+        color: ${contentFontColorDisabled};
+    }
+
+    slot[name='checked-indicator'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+        overflow: visible;
+    }
+
+    slot[name='checked-indicator'] path {
+        fill: ${borderColor};
+        opacity: 0;
+    }
+
+    :host([aria-checked='true']) slot[name='checked-indicator'] path {
+        opacity: 1;
+    }
+
+    :host([disabled]) slot[name='checked-indicator'] path {
+        fill: rgba(${borderColorRgb}, 0.3);
+    }
+`;
 //# sourceMappingURL=styles.js.map

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

@@ -1,14 +1,14 @@
-export declare const animationConfig: {
-    slideLeftKeyframes: Keyframe[];
-    slideRightKeyframes: Keyframe[];
-    fadeOverlayKeyframes: Keyframe[];
-    slideInOptions: {
-        duration: number;
-        easing: string;
-    };
-    slideOutOptions: {
-        duration: number;
-        easing: string;
-        direction: string;
-    };
-};
+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/drawer/animations.js

@@ -1,52 +1,52 @@
-const slideLeftKeyframes = [
-    {
-        transform: 'translateX(-100%)',
-        visibility: 'hidden',
-        offset: 0
-    },
-    {
-        transform: 'translateX(-100%)',
-        visibility: 'visible',
-        offset: 0.01
-    },
-    {
-        transform: 'translateX(0%)',
-        visibility: 'visible',
-        offset: 1
-    }
-];
-const slideRightKeyframes = [
-    {
-        transform: 'translateX(100%)',
-        visibility: 'hidden',
-        offset: 0
-    },
-    {
-        transform: 'translateX(100%)',
-        visibility: 'visible',
-        offset: 0.01
-    },
-    {
-        transform: 'translateX(0%)',
-        visibility: 'visible',
-        offset: 1
-    }
-];
-const fadeOverlayKeyframes = [{ opacity: 0 }, { opacity: 1 }];
-const slideInOptions = {
-    duration: 1,
-    easing: 'ease-out'
-};
-const slideOutOptions = {
-    duration: 1,
-    easing: 'ease-in',
-    direction: 'reverse'
-};
-export const animationConfig = {
-    slideLeftKeyframes,
-    slideRightKeyframes,
-    fadeOverlayKeyframes,
-    slideInOptions,
-    slideOutOptions
-};
+const slideLeftKeyframes = [
+    {
+        transform: 'translateX(-100%)',
+        visibility: 'hidden',
+        offset: 0
+    },
+    {
+        transform: 'translateX(-100%)',
+        visibility: 'visible',
+        offset: 0.01
+    },
+    {
+        transform: 'translateX(0%)',
+        visibility: 'visible',
+        offset: 1
+    }
+];
+const slideRightKeyframes = [
+    {
+        transform: 'translateX(100%)',
+        visibility: 'hidden',
+        offset: 0
+    },
+    {
+        transform: 'translateX(100%)',
+        visibility: 'visible',
+        offset: 0.01
+    },
+    {
+        transform: 'translateX(0%)',
+        visibility: 'visible',
+        offset: 1
+    }
+];
+const fadeOverlayKeyframes = [{ opacity: 0 }, { opacity: 1 }];
+const slideInOptions = {
+    duration: 1,
+    easing: 'ease-out'
+};
+const slideOutOptions = {
+    duration: 1,
+    easing: 'ease-in',
+    direction: 'reverse'
+};
+export const animationConfig = {
+    slideLeftKeyframes,
+    slideRightKeyframes,
+    fadeOverlayKeyframes,
+    slideInOptions,
+    slideOutOptions
+};
 //# sourceMappingURL=animations.js.map

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

@@ -1,39 +1,39 @@
-import { Dialog as FoundationDialog } from '@microsoft/fast-foundation';
-import { DrawerLocation, DrawerState } from './types';
-/**
- * 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 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 prefersReducedMotionMediaQuery?;
-    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;
-}
-export declare const nimbleDrawer: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Drawer>;
+import { Dialog as FoundationDialog } from '@microsoft/fast-foundation';
+import { DrawerLocation, DrawerState } from './types';
+/**
+ * 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 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 prefersReducedMotionMediaQuery?;
+    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;
+}
+export declare const nimbleDrawer: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Drawer>;