@ni/nimble-components 16.0.0 → 16.1.0

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

@@ -23,6 +23,7 @@ import './number-field';
 import './radio';
 import './radio-group';
 import './select';
+import './spinner';
 import './switch';
 import './tab';
 import './tab-panel';

package/dist/esm/all-components.js

@@ -23,6 +23,7 @@ import './number-field';
 import './radio';
 import './radio-group';
 import './select';
+import './spinner';
 import './switch';
 import './tab';
 import './tab-panel';

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

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

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

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-spinner': Spinner;
+    }
+}
+/**
+ * A Nimble-styled spinner component.
+ * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
+ */
+export declare class Spinner extends FoundationElement {
+}

package/dist/esm/spinner/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Nimble-styled spinner component.
+ * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
+ */
+export class Spinner extends FoundationElement {
+}
+const nimbleSpinner = Spinner.compose({
+    baseName: 'spinner',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,OAAQ,SAAQ,iBAAiB;CAAG;AAEjD,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAClC,QAAQ,EAAE,SAAS;IACnB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC"}

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

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

package/dist/esm/spinner/styles.js

@@ -0,0 +1,149 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { Theme } from '../theme-provider/types';
+import { themeBehavior } from '../utilities/style/theme';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        width: 16px;
+        height: 16px;
+    }
+
+    div.container {
+        margin: max(2px, 6.25%);
+        flex: 1;
+        ${
+/**
+ * At some spinner sizes / browser zoom levels, the spinner bits/squares appear to slightly overlap visually.
+ * If we set a color with transparency on each bit, it'll look wrong in the overlapping region (since the opacity
+ * combines and affects the color at the overlapping spot).
+ * Currently all 3 themes use a color with opacity = 0.6, so that's applied here on the parent element instead,
+ * which avoids that issue.
+ */
+''}
+        opacity: 0.6;
+    }
+
+    div.bit1,
+    div.bit2 {
+        background: var(--ni-private-spinner-bits-background-color);
+        width: 50%;
+        height: 50%;
+        margin: auto;
+        animation-duration: 1600ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 0);
+    }
+
+    div.bit1 {
+        animation-name: ni-private-spinner-keyframes-1;
+    }
+
+    div.bit2 {
+        animation-name: ni-private-spinner-keyframes-2;
+    }
+
+    @media (prefers-reduced-motion) {
+        div.bit1,
+        div.bit2 {
+            animation-timing-function: ease-in-out, steps(1);
+            animation-duration: 3200ms;
+        }
+
+        div.bit1 {
+            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+                ni-private-spinner-no-motion-transform-keyframes-1;
+        }
+
+        div.bit2 {
+            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+                ni-private-spinner-no-motion-transform-keyframes-2;
+        }
+    }
+
+    @keyframes ni-private-spinner-keyframes-1 {
+        0%,
+        100% {
+            transform: translate(-50%, 0);
+        }
+
+        25% {
+            transform: translate(50%, 0);
+        }
+
+        50% {
+            transform: translate(50%, 100%);
+        }
+
+        75% {
+            transform: translate(-50%, 100%);
+        }
+    }
+
+    @keyframes ni-private-spinner-keyframes-2 {
+        0%,
+        100% {
+            transform: translate(50%, 0);
+        }
+
+        25% {
+            transform: translate(-50%, 0);
+        }
+
+        50% {
+            transform: translate(-50%, -100%);
+        }
+
+        75% {
+            transform: translate(50%, -100%);
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-opacity-keyframes {
+        0%,
+        50%,
+        100% {
+            opacity: 0;
+        }
+
+        25%,
+        75% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-transform-keyframes-1 {
+        0%,
+        100% {
+            transform: translate(-50%, 0);
+        }
+        50% {
+            transform: translate(50%, 0);
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-transform-keyframes-2 {
+        0%,
+        100% {
+            transform: translate(50%, 0);
+        }
+
+        50% {
+            transform: translate(-50%, 0);
+        }
+    }
+`.withBehaviors(themeBehavior(Theme.light, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${Black91}
+        `), themeBehavior(Theme.dark, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${Black15};
+            }
+        `), themeBehavior(Theme.color, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${White};
+            }
+        `));
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/spinner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;UAUlB;AACE;;;;;;GAMG;AACH,EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHP,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,OAAO;SAC5D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8DAEmD,OAAO;;SAE5D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,KAAK;;SAE1D,CACJ,CACJ,CAAC"}

package/dist/esm/spinner/template.d.ts

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

package/dist/esm/spinner/template.js

@@ -0,0 +1,10 @@
+import { html } from '@microsoft/fast-element';
+export const template = html `
+    <template role="progressbar">
+        <div class="container">
+            <div class="bit1"></div>
+            <div class="bit2"></div>
+        </div>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/spinner/template.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -63,7 +63,7 @@
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.13.15",
-    "@mdx-js/react": "*",
+    "@mdx-js/react": "^1.6.22",
     "@ni/eslint-config-javascript": "^4.0.0",
     "@ni/eslint-config-typescript": "^4.1.0",
     "@rollup/plugin-commonjs": "^21.0.2",