@ni/nimble-components 8.3.0 → 8.4.0

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

@@ -3,6 +3,7 @@
  * Production applications are encouraged to import only components
  * that are required instead of leveraging this file.
  */
+import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';

package/dist/esm/all-components.js

@@ -3,6 +3,7 @@
  * Production applications are encouraged to import only components
  * that are required instead of leveraging this file.
  */
+import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';

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,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,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,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,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,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/anchored-region/index.d.ts

@@ -0,0 +1,11 @@
+import { AnchoredRegion as FoundationAnchoredRegion } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchored-region': AnchoredRegion;
+    }
+}
+/**
+ * A nimble-styled anchored region control.
+ */
+export declare class AnchoredRegion extends FoundationAnchoredRegion {
+}

package/dist/esm/anchored-region/index.js

@@ -0,0 +1,24 @@
+import { DesignSystem, AnchoredRegion as FoundationAnchoredRegion, anchoredRegionTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+// When the anchor element changes position on the page, it is the client's responsibility to update the position
+// of the anchored region by calling update() on the anchored region.
+//
+// When the anchor element is recreated on the page, it is the client's responsibility to reset the reference the
+// anchored region has to the anchor element. This can be done by either recreating the anchor element with a new
+// ID that is also set as the \`anchor\` attribute on the anchored region or by explicitly setting the value of
+// anchorElement on the anchored region to the new anchor element.
+/**
+ * A nimble-styled anchored region control.
+ */
+export class AnchoredRegion extends FoundationAnchoredRegion {
+}
+const nimbleAnchoredRegion = AnchoredRegion.compose({
+    baseName: 'anchored-region',
+    baseClass: FoundationAnchoredRegion,
+    template,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleAnchoredRegion());
+//# sourceMappingURL=index.js.map

package/dist/esm/anchored-region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchored-region/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,cAAc,IAAI,wBAAwB,EAC1C,sBAAsB,IAAI,QAAQ,EACrC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC,iHAAiH;AACjH,qEAAqE;AACrE,EAAE;AACF,iHAAiH;AACjH,iHAAiH;AACjH,+GAA+G;AAC/G,kEAAkE;AAElE;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,wBAAwB;CAAG;AAE/D,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,wBAAwB;IACnC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC"}

package/dist/esm/anchored-region/styles.d.ts

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

package/dist/esm/anchored-region/styles.js

@@ -0,0 +1,9 @@
+import { css } from '@microsoft/fast-element';
+export const styles = css `
+    :host {
+        contain: layout;
+        display: block;
+        z-index: 1000;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/anchored-region/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchored-region/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;CAMxB,CAAC"}

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

@@ -1,4 +1,5 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import type { IButton } from '../patterns/button/types';
 import { ButtonAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -8,20 +9,14 @@ declare global {
 /**
  * A nimble-styled HTML button
  */
-export declare class Button extends FoundationButton {
+export declare class Button extends FoundationButton implements IButton {
     /**
-     * The appearance the button should have.
-     *
      * @public
      * @remarks
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
     /**
-     * Specify as 'true' to hide the text content of the button. The button will
-     * become square, and the text content will be used as the label of the button
-     * for accessibility purposes.
-     *
      * @public
      * @remarks
      * HTML Attribute: content-hidden

package/dist/esm/button/index.js

@@ -10,18 +10,12 @@ export class Button extends FoundationButton {
     constructor() {
         super(...arguments);
         /**
-         * The appearance the button should have.
-         *
          * @public
          * @remarks
          * HTML Attribute: appearance
          */
         this.appearance = ButtonAppearance.Outline;
         /**
-         * Specify as 'true' to hide the text content of the button. The button will
-         * become square, and the text content will be used as the label of the button
-         * for accessibility purposes.
-         *
          * @public
          * @remarks
          * HTML Attribute: content-hidden

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQ3C;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IAA5C;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AAbG;IADC,IAAI;0CAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAGjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQ3C;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IAA5C;;QACI;;;;WAIG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;WAIG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AATG;IADC,IAAI;0CAC0D;AAQ/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAGjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

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

@@ -3,6 +3,7 @@
  * Production applications are encouraged to import only components
  * that are required instead of leveraging this file.
  */
+import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';

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

@@ -0,0 +1,11 @@
+import { AnchoredRegion as FoundationAnchoredRegion } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchored-region': AnchoredRegion;
+    }
+}
+/**
+ * A nimble-styled anchored region control.
+ */
+export declare class AnchoredRegion extends FoundationAnchoredRegion {
+}

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

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

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

@@ -1,4 +1,5 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import type { IButton } from '../patterns/button/types';
 import { ButtonAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -8,20 +9,14 @@ declare global {
 /**
  * A nimble-styled HTML button
  */
-export declare class Button extends FoundationButton {
+export declare class Button extends FoundationButton implements IButton {
     /**
-     * The appearance the button should have.
-     *
      * @public
      * @remarks
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
     /**
-     * Specify as 'true' to hide the text content of the button. The button will
-     * become square, and the text content will be used as the label of the button
-     * for accessibility purposes.
-     *
      * @public
      * @remarks
      * HTML Attribute: content-hidden

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

@@ -1,3 +1,23 @@
+/**
+ * The interface that buttons of various types implement. The properties in this interface
+ * are leveraged by the shared button pattern css.
+ */
+export interface IButton {
+    /**
+     * The appearance the button should have.
+     */
+    appearance: ButtonAppearance;
+    /**
+     * Specify as 'true' to hide the text content of the button. The button will
+     * become square, and the text content will be used as the label of the button
+     * for accessibility purposes.
+     */
+    contentHidden: boolean;
+    /**
+     * Whether or not the button is disabled.
+     */
+    disabled: boolean;
+}
 /**
  * Types of button appearance.
  * @public

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

@@ -1,5 +1,6 @@
 import { DelegatesARIAButton, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
-import { ButtonAppearance } from '../patterns/button/types';
+import type { IButton } from '../patterns/button/types';
+import { ButtonAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-toggle-button': ToggleButton;
@@ -8,20 +9,14 @@ declare global {
 /**
  * A nimble-styled toggle button control.
  */
-export declare class ToggleButton extends FoundationSwitch {
+export declare class ToggleButton extends FoundationSwitch implements IButton {
     /**
-     * The appearance the button should have.
-     *
      * @public
      * @remarks
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
     /**
-     * Specify as 'true' to hide the text content of the button. The button will
-     * become square, and the text content will be used as the label of the button
-     * for accessibility purposes.
-     *
      * @public
      * @remarks
      * HTML Attribute: content-hidden

package/dist/esm/patterns/button/types.d.ts

@@ -1,3 +1,23 @@
+/**
+ * The interface that buttons of various types implement. The properties in this interface
+ * are leveraged by the shared button pattern css.
+ */
+export interface IButton {
+    /**
+     * The appearance the button should have.
+     */
+    appearance: ButtonAppearance;
+    /**
+     * Specify as 'true' to hide the text content of the button. The button will
+     * become square, and the text content will be used as the label of the button
+     * for accessibility purposes.
+     */
+    contentHidden: boolean;
+    /**
+     * Whether or not the button is disabled.
+     */
+    disabled: boolean;
+}
 /**
  * Types of button appearance.
  * @public

package/dist/esm/patterns/button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/button/types.ts"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}

package/dist/esm/toggle-button/index.d.ts

@@ -1,5 +1,6 @@
 import { DelegatesARIAButton, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
-import { ButtonAppearance } from '../patterns/button/types';
+import type { IButton } from '../patterns/button/types';
+import { ButtonAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-toggle-button': ToggleButton;
@@ -8,20 +9,14 @@ declare global {
 /**
  * A nimble-styled toggle button control.
  */
-export declare class ToggleButton extends FoundationSwitch {
+export declare class ToggleButton extends FoundationSwitch implements IButton {
     /**
-     * The appearance the button should have.
-     *
      * @public
      * @remarks
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
     /**
-     * Specify as 'true' to hide the text content of the button. The button will
-     * become square, and the text content will be used as the label of the button
-     * for accessibility purposes.
-     *
      * @public
      * @remarks
      * HTML Attribute: content-hidden

package/dist/esm/toggle-button/index.js

@@ -3,7 +3,7 @@ import { attr } from '@microsoft/fast-element';
 import { applyMixins, DelegatesARIAButton, DesignSystem, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
-import { ButtonAppearance } from '../patterns/button/types';
+import { ButtonAppearance } from './types';
 /**
  * A nimble-styled toggle button control.
  */
@@ -11,18 +11,12 @@ export class ToggleButton extends FoundationSwitch {
     constructor() {
         super(...arguments);
         /**
-         * The appearance the button should have.
-         *
          * @public
          * @remarks
          * HTML Attribute: appearance
          */
         this.appearance = ButtonAppearance.Outline;
         /**
-         * Specify as 'true' to hide the text content of the button. The button will
-         * become square, and the text content will be used as the label of the button
-         * for accessibility purposes.
-         *
          * @public
          * @remarks
          * HTML Attribute: content-hidden

package/dist/esm/toggle-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EAEX,mBAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,MAAM,IAAI,gBAAgB,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAQ5D;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,gBAAgB;IAAlD;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAIjC,CAAC;CAAA;AAhBG;IADC,IAAI;gDAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAKjC,WAAW,CAAC,YAAY,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC;AAGzD,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EAEX,mBAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,MAAM,IAAI,gBAAgB,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQ3C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,gBAAgB;IAAlD;;QACI;;;;WAIG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;WAIG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAIjC,CAAC;CAAA;AAZG;IADC,IAAI;gDAC0D;AAQ/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAKjC,WAAW,CAAC,YAAY,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC;AAGzD,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "8.3.0",
+  "version": "8.4.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",