@ni/nimble-components 15.3.1 → 15.4.0

package/dist/all-components-bundle.js

@@ -14537,7 +14537,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$x = css `
+    const styles$y = css `
     :host {
         contain: layout;
         display: block;
@@ -14561,7 +14561,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$x
+        styles: styles$y
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14929,7 +14929,7 @@
 
     const template$8 = html `<slot></slot>`;
 
-    const styles$w = css `
+    const styles$x = css `
     :host {
         display: contents;
     }
@@ -14985,7 +14985,7 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$w,
+        styles: styles$x,
         template: template$8
     });
     DesignSystem.getOrCreate()
@@ -15020,7 +15020,7 @@
     const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
     const smallPadding = DesignToken.create(styleNameFromTokenName(tokenNames.smallPadding)).withDefault('4px');
     const standardPadding = DesignToken.create(styleNameFromTokenName(tokenNames.standardPadding)).withDefault('16px');
-    const labelHeight = DesignToken.create(styleNameFromTokenName(tokenNames.labelHeight)).withDefault('16px');
+    DesignToken.create(styleNameFromTokenName(tokenNames.labelHeight)).withDefault('16px');
     const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
     const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
     const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
@@ -15210,7 +15210,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$v = css `
+    const styles$w = css `
     ${display('inline-block')}
 
     :host {
@@ -15273,7 +15273,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$v
+        styles: styles$w
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -15891,7 +15891,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$u = css `
+    const styles$v = css `
     ${display('inline-flex')}
 
     :host {
@@ -15971,7 +15971,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$u,
+        styles: styles$v,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -16056,7 +16056,7 @@
         block: 'block'
     };
 
-    const styles$t = css `
+    const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -16260,7 +16260,7 @@
             }
         `));
 
-    const styles$s = styles$t.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+    const styles$t = styles$u.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
             :host([appearance-variant='primary']) .control {
                 box-shadow: 0px 0px 0px ${borderWidth}
                     rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -16380,14 +16380,14 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$s,
+        styles: styles$t,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
-    const styles$r = css `
+    const styles$s = css `
     ${display('inline-flex')}
 
     :host {
@@ -16546,14 +16546,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$r,
+        styles: styles$s,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -16671,14 +16671,14 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$q,
+        styles: styles$r,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    const styles$p = css `
-    ${styles$t}
+    const styles$q = css `
+    ${styles$u}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -16780,7 +16780,7 @@
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
         template: template$7,
-        styles: styles$p,
+        styles: styles$q,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -16799,7 +16799,7 @@
     </template
 `;
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('inline-flex')}
 
     :host {
@@ -16853,7 +16853,7 @@
         const composedIcon = iconClass.compose({
             baseName,
             template: template$6,
-            styles: styles$o,
+            styles: styles$p,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -16887,7 +16887,7 @@
         block: 'block'
     };
 
-    const styles$n = css `
+    const styles$o = css `
     ${display('inline-flex')}
 
     :host {
@@ -17115,7 +17115,7 @@
             }
         `));
 
-    const styles$m = css `
+    const styles$n = css `
     .error-icon {
         display: none;
     }
@@ -17153,9 +17153,9 @@
     }
 `;
 
-    const styles$l = css `
+    const styles$m = css `
+    ${styles$o}
     ${styles$n}
-    ${styles$m}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -17391,7 +17391,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$l,
+        styles: styles$m,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -17435,7 +17435,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('grid')}
 
     dialog {
@@ -17678,12 +17678,12 @@
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
         template: template$5,
-        styles: styles$k,
+        styles: styles$l,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('block')}
 
     :host {
@@ -17953,7 +17953,7 @@
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
         template: template$4,
-        styles: styles$j
+        styles: styles$k
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -19585,7 +19585,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('flex')}
 
     :host {
@@ -19665,11 +19665,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$i
+        styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$h = css `
+    const styles$i = css `
     ${display('grid')}
 
     :host {
@@ -19724,11 +19724,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$h
+        styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('inline-block')}
 
     :host {
@@ -19956,14 +19956,14 @@
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
         template: template$3,
-        styles: styles$g,
+        styles: styles$h,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('grid')}
 
     :host {
@@ -20061,7 +20061,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$f,
+        styles: styles$g,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -20075,16 +20075,15 @@
         block: 'block'
     };
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('inline-block')}
-    ${styles$m}
+    ${styles$n}
 
     :host {
         font: ${bodyFont};
         outline: none;
         user-select: none;
         color: ${bodyFontColor};
-        height: calc(${labelHeight} + ${controlHeight});
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -20292,7 +20291,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$e,
+        styles: styles$f,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20333,7 +20332,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$d = css `
+    const styles$e = css `
     ${display('inline-flex')}
 
     :host {
@@ -20433,12 +20432,12 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$d,
+        styles: styles$e,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-    const styles$c = css `
+    const styles$d = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -20473,16 +20472,16 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$c,
+        styles: styles$d,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
 
-    const styles$b = css `
+    const styles$c = css `
+    ${styles$o}
     ${styles$n}
-    ${styles$m}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -20558,7 +20557,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$b,
+        styles: styles$c,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${DesignSystem.tagFor(IconExclamationMark)}
@@ -20570,7 +20569,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$a = css `
+    const styles$b = css `
     ${display('inline-flex')}
 
     :host {
@@ -20778,11 +20777,11 @@
         baseClass: Switch$1,
         baseName: 'switch',
         template: template$2,
-        styles: styles$a
+        styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$9 = css `
+    const styles$a = css `
     ${display('inline-flex')}
 
     :host {
@@ -20886,11 +20885,11 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$9
+        styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-    const styles$8 = css `
+    const styles$9 = css `
     ${display('block')}
 
     :host {
@@ -20910,11 +20909,11 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$8
+        styles: styles$9
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
-    const styles$7 = css `
+    const styles$8 = css `
     ${display('grid')}
 
     :host {
@@ -20952,11 +20951,11 @@
         baseName: 'tabs',
         baseClass: Tabs$1,
         template: tabsTemplate,
-        styles: styles$7
+        styles: styles$8
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-    const styles$6 = css `
+    const styles$7 = css `
     ${display('flex')}
 
     :host {
@@ -20991,7 +20990,7 @@
     const nimbleTabsToolbar = TabsToolbar.compose({
         baseName: 'tabs-toolbar',
         template: template$1,
-        styles: styles$6
+        styles: styles$7
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
 
@@ -21000,7 +20999,7 @@
         block: 'block'
     };
 
-    const styles$5 = css `
+    const styles$6 = css `
     ${display('inline-flex')}
 
     :host {
@@ -21135,7 +21134,7 @@
         baseName: 'text-area',
         baseClass: TextArea$1,
         template: textAreaTemplate,
-        styles: styles$5,
+        styles: styles$6,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -21152,9 +21151,9 @@
         frameless: 'frameless'
     };
 
-    const styles$4 = css `
+    const styles$5 = css `
     ${display('inline-block')}
-    ${styles$m}
+    ${styles$n}
 
     :host {
         font: ${bodyFont};
@@ -21162,7 +21161,6 @@
         user-select: none;
         --webkit-user-select: none;
         color: ${bodyFontColor};
-        height: calc(${labelHeight} + ${controlHeight});
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -21419,7 +21417,7 @@
         baseName: 'text-field',
         baseClass: TextField$1,
         template: textFieldTemplate,
-        styles: styles$4,
+        styles: styles$5,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -21436,7 +21434,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-    const styles$3 = css `
+    const styles$4 = css `
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
@@ -21471,14 +21469,14 @@
         baseName: 'toolbar',
         baseClass: Toolbar$1,
         template: toolbarTemplate,
-        styles: styles$3,
+        styles: styles$4,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
 
-    const styles$2 = css `
+    const styles$3 = css `
     ${display('inline-flex')}
 
     :host {
@@ -21619,7 +21617,7 @@
         baseName: 'tooltip',
         baseClass: Tooltip$1,
         template,
-        styles: styles$2
+        styles: styles$3
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
 
@@ -21705,7 +21703,7 @@
         }
     }
 
-    const styles$1 = css `
+    const styles$2 = css `
     ${display('block')}
 
     :host {
@@ -21966,12 +21964,12 @@ Instead styling against the role which is more general and likely a better appro
         baseName: 'tree-item',
         baseClass: TreeItem$1,
         template: treeItemTemplate,
-        styles: styles$1,
+        styles: styles$2,
         expandCollapseGlyph: arrowExpanderUp16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-    const styles = css `
+    const styles$1 = css `
     ${display('flex')}
 
     :host {
@@ -22045,9 +22043,92 @@ Instead styling against the role which is more general and likely a better appro
         baseName: 'tree-view',
         baseClass: TreeView$1,
         template: treeViewTemplate,
-        styles
+        styles: styles$1
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
+    const styles = css ``;
+
+    const WaferMapQuadrant = {
+        bottomLeft: 'bottom-left',
+        bottomRight: 'bottom-right',
+        topLeft: 'top-left',
+        topRight: 'top-right'
+    };
+    const WaferMapOrientation = {
+        top: 'top',
+        bottom: 'bottom',
+        left: 'left',
+        right: 'right'
+    };
+    const WaferMapColorsScaleMode = {
+        linear: 'linear',
+        ordinal: 'ordinal'
+    };
+
+    /**
+     * A nimble-styled WaferMap
+     */
+    class WaferMap extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.quadrant = WaferMapQuadrant.topLeft;
+            this.orientation = WaferMapOrientation.top;
+            this.maxCharacters = 4;
+            this.dieLabelsHidden = false;
+            this.dieLabelsSuffix = '';
+            this.colorsScaleMode = WaferMapColorsScaleMode.linear;
+            this.highlightedValues = [];
+            this.dies = [];
+            this.colorScale = {
+                colors: [],
+                values: []
+            };
+        }
+    }
+    __decorate([
+        attr
+    ], WaferMap.prototype, "quadrant", void 0);
+    __decorate([
+        attr
+    ], WaferMap.prototype, "orientation", void 0);
+    __decorate([
+        attr({
+            attribute: 'max-characters',
+            converter: nullableNumberConverter
+        })
+    ], WaferMap.prototype, "maxCharacters", void 0);
+    __decorate([
+        attr({
+            attribute: 'die-labels-hidden',
+            mode: 'boolean'
+        })
+    ], WaferMap.prototype, "dieLabelsHidden", void 0);
+    __decorate([
+        attr({
+            attribute: 'die-labels-suffix'
+        })
+    ], WaferMap.prototype, "dieLabelsSuffix", void 0);
+    __decorate([
+        attr({
+            attribute: 'colors-scale-mode'
+        })
+    ], WaferMap.prototype, "colorsScaleMode", void 0);
+    __decorate([
+        observable
+    ], WaferMap.prototype, "highlightedValues", void 0);
+    __decorate([
+        observable
+    ], WaferMap.prototype, "dies", void 0);
+    __decorate([
+        observable
+    ], WaferMap.prototype, "colorScale", void 0);
+    const nimbleWaferMap = WaferMap.compose({
+        baseName: 'wafer-map',
+        template: template$8,
+        styles
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
+
 })();
 //# sourceMappingURL=all-components-bundle.js.map