@ni/nimble-components 16.1.7 → 17.0.0

package/dist/all-components-bundle.js

@@ -15395,7 +15395,6 @@
     const Pass100DarkUi = "#00c12b";
     const Fail100LightUi = "#c4000c";
     const Fail100DarkUi = "#ff4646";
-    const Black75 = "#818386";
     const Black15 = "#f1f1f2";
     const Black7 = "#f5f5f5";
     const White = "#ffffff";
@@ -15533,7 +15532,6 @@
         borderHoverColor: 'border-hover-color',
         iconColor: 'icon-color',
         modalBackdropColor: 'modal-backdrop-color',
-        popupBoxShadowColor: 'popup-box-shadow-color',
         popupBorderColor: 'popup-border-color',
         controlHeight: 'control-height',
         smallPadding: 'small-padding',
@@ -15707,7 +15705,10 @@
         errorTextFontWeight: 'error-text-font-weight',
         errorTextFontLineHeight: 'error-text-font-line-height',
         errorTextFallbackFontFamily: 'error-text-fallback-font-family',
-        tableRowBorderColor: 'table-row-border-color'
+        tableRowBorderColor: 'table-row-border-color',
+        elevation1BoxShadow: 'elevation-1-box-shadow',
+        elevation2BoxShadow: 'elevation-2-box-shadow',
+        elevation3BoxShadow: 'elevation-3-box-shadow'
     };
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
@@ -15798,7 +15799,6 @@
     // Component Color Tokens
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
     DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
-    const popupBoxShadowColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBoxShadowColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black75, Black85, Black85), 0.3));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
     const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
@@ -15810,6 +15810,10 @@
     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');
+    // Drop Shadow Tokens
+    DesignToken.create(styleNameFromTokenName(tokenNames.elevation1BoxShadow)).withDefault((element) => `0px 1px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
+    const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
+    const elevation3BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation3BoxShadow)).withDefault((element) => `0px 4px 8px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.3)}`);
     // Font Tokens
     createFontTokens(tokenNames.headlineFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight, 'serif');
     createFontTokens(tokenNames.headlinePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight, 'serif');
@@ -18058,7 +18062,7 @@
         );
         z-index: 1;
         padding: var(--ni-private-listbox-padding);
-        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
+        box-shadow: ${elevation2BoxShadow};
         border: 1px solid ${popupBorderColor};
         background-color: ${applicationBackgroundColor};
         background-clip: padding-box;
@@ -18494,7 +18498,7 @@
         flex-direction: column;
         background-color: ${applicationBackgroundColor};
         border: none;
-        box-shadow: 0px 4px 8px #0000004d;
+        box-shadow: ${elevation3BoxShadow};
         padding: 0px;
         width: 400px;
         max-height: 600px;
@@ -18802,8 +18806,7 @@
     }
 
     :host([location='left']) .dialog-contents {
-        border-right: ${borderWidth} solid ${popupBoxShadowColor};
-        box-shadow: 3px 0px 8px ${popupBoxShadowColor};
+        box-shadow: 3px 0px 8px #00000033;
     }
 
     :host([location='left']) dialog.animating .dialog-contents {
@@ -18822,8 +18825,7 @@
 
     :host([location='right']) .dialog-contents {
         right: 0px;
-        border-left: ${borderWidth} solid ${popupBoxShadowColor};
-        box-shadow: -3px 0px 8px ${popupBoxShadowColor};
+        box-shadow: -3px 0px 8px #00000033;
     }
 
     :host([location='right']) dialog.animating .dialog-contents {
@@ -20731,7 +20733,7 @@
         padding: 4px;
         min-width: 168px;
         width: max-content;
-        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
+        box-shadow: ${elevation2BoxShadow};
     }
     :host([slot='submenu']) {
         margin: 0 calc(${smallPadding} * 2);
@@ -25921,7 +25923,7 @@
         box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
-        box-shadow: 0px 3px 4px ${popupBoxShadowColor};
+        box-shadow: ${elevation2BoxShadow};
         display: inline-flex;
         border: ${borderWidth} solid var(--ni-private-tooltip-border-color);
         background-color: var(--ni-private-tooltip-background-color);
@@ -28106,19 +28108,24 @@ Instead styling against the role which is more general and likely a better appro
             };
         }
         calculateMapDimensions(dies) {
-            if (dies.length === 0 || dies[0] === undefined)
+            if (dies.length === 0 || dies[0] === undefined) {
                 return { origin: { x: 0, y: 0 }, rows: 0, cols: 0 };
+            }
             const minPoint = { x: dies[0].x, y: dies[0].y };
             const maxPoint = { x: dies[0].x, y: dies[0].y };
             for (const die of dies) {
-                if (die.x < minPoint.x)
+                if (die.x < minPoint.x) {
                     minPoint.x = die.x;
-                if (die.y < minPoint.y)
+                }
+                if (die.y < minPoint.y) {
                     minPoint.y = die.y;
-                if (die.x > maxPoint.x)
+                }
+                if (die.x > maxPoint.x) {
                     maxPoint.x = die.x;
-                if (die.y > maxPoint.y)
+                }
+                if (die.y > maxPoint.y) {
                     maxPoint.y = die.y;
+                }
             }
             return {
                 origin: minPoint,
@@ -29454,8 +29461,9 @@ Instead styling against the role which is more general and likely a better appro
             super.connectedCallback();
             this.resizeObserver = new ResizeObserver(entries => {
                 const entry = entries[0];
-                if (entry === undefined)
+                if (entry === undefined) {
                     return;
+                }
                 const { height, width } = entry.contentRect;
                 this.canvasSideLength = Math.min(height, width);
             });
@@ -29471,8 +29479,10 @@ Instead styling against the role which is more general and likely a better appro
          */
         render() {
             this.renderQueued = false;
-            if (this.canvasSideLength === undefined || this.canvasSideLength === 0)
+            if (this.canvasSideLength === undefined
+                || this.canvasSideLength === 0) {
                 return;
+            }
             this.renderer?.clearCanvas(this.canvasSideLength, this.canvasSideLength);
             this.dataManager = new DataManager(this.dies, this.quadrant, { width: this.canvasSideLength, height: this.canvasSideLength }, this.colorScale, this.highlightedValues, this.colorScaleMode, this.dieLabelsHidden, this.dieLabelsSuffix, this.maxCharacters);
             this.renderer = new RenderingModule(this.dataManager, this.canvas);