@ni/nimble-components 9.0.4 → 10.0.2

package/dist/all-components-bundle.js

@@ -13101,8 +13101,8 @@
     const Black15 = "#f1f1f2";
     const Black7 = "#f5f5f5";
     const White = "#ffffff";
+    const Black88 = "#252526";
     const Black85 = "#363738";
-    const Black80 = "#505153";
     const Black91 = "#161617";
     const ForestGreen = "#074023";
     const DigitalGreenLight = "#009b65";
@@ -13223,12 +13223,11 @@
     	return {red, green, blue, alpha};
     }
 
-    var Theme;
-    (function (Theme) {
-        Theme["Light"] = "light";
-        Theme["Dark"] = "dark";
-        Theme["Color"] = "color";
-    })(Theme || (Theme = {}));
+    const Theme = {
+        light: 'light',
+        dark: 'dark',
+        color: 'color'
+    };
 
     /**
      * Design token names should follow the token naming convention:
@@ -13435,7 +13434,7 @@
     const theme = DesignToken.create({
         name: 'theme',
         cssCustomPropertyName: null
-    }).withDefault(Theme.Light);
+    }).withDefault(Theme.light);
     /**
      * The ThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
      * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
@@ -13445,7 +13444,7 @@
         constructor() {
             super(...arguments);
             this.direction = Direction.ltr;
-            this.theme = Theme.Light;
+            this.theme = Theme.light;
         }
         directionChanged(_prev, next) {
             if (next !== undefined && next !== null) {
@@ -13498,7 +13497,7 @@
     // Color Tokens
     const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
     const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
-    DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black80, ForestGreen));
+    DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black88, ForestGreen));
     DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black30, Black91, ForestGreen));
     const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
     const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
@@ -13586,11 +13585,11 @@
     }
     function getColorForTheme(element, lightThemeColor, darkThemeColor, colorThemeColor) {
         switch (theme.getValueFor(element)) {
-            case Theme.Light:
+            case Theme.light:
                 return lightThemeColor;
-            case Theme.Dark:
+            case Theme.dark:
                 return darkThemeColor;
-            case Theme.Color:
+            case Theme.color:
                 return colorThemeColor;
             default:
                 return lightThemeColor;
@@ -13717,9 +13716,9 @@
      * css`
      *  // ...
      * `.withBehaviors(new ThemeStyleSheetBehavior(
-     *   css`:host { ... Theme.Light style... }`),
-     *   null, // No style needed for Theme.Dark style
-     *   Theme.Light // For the Theme.Color style, re-use the previously set Theme.Light style
+     *   css`:host { ... Theme.light style... }`),
+     *   null, // No style needed for Theme.dark style
+     *   Theme.light // For the Theme.color style, re-use the previously set Theme.light style
      * )
      * ```
      */
@@ -14478,12 +14477,11 @@
      * Types of button appearance.
      * @public
      */
-    var ButtonAppearance;
-    (function (ButtonAppearance) {
-        ButtonAppearance["Outline"] = "outline";
-        ButtonAppearance["Ghost"] = "ghost";
-        ButtonAppearance["Block"] = "block";
-    })(ButtonAppearance || (ButtonAppearance = {}));
+    const ButtonAppearance = {
+        outline: 'outline',
+        ghost: 'ghost',
+        block: 'block'
+    };
 
     const styles$k = css `
     ${display('inline-flex')}
@@ -14606,7 +14604,7 @@
     }
 `
         // prettier-ignore
-        .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
+        .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 .control {
                     background-color: transparent;
                     border-color: rgba(${actionRgbPartialColor}, 0.3);
@@ -14631,7 +14629,7 @@
                     background-color: transparent;
                     border-color: rgba(${borderRgbPartialColor}, 0.2);
                 }
-            `), appearanceBehavior(ButtonAppearance.Ghost, css `
+            `), appearanceBehavior(ButtonAppearance.ghost, css `
                 .control {
                     background-color: transparent;
                     border-color: transparent;
@@ -14656,7 +14654,7 @@
                     background-color: transparent;
                     border-color: transparent;
                 }
-            `), appearanceBehavior(ButtonAppearance.Block, css `
+            `), appearanceBehavior(ButtonAppearance.block, css `
                 .control {
                     background-color: rgba(${borderRgbPartialColor}, 0.1);
                     border-color: transparent;
@@ -14689,7 +14687,7 @@
 
     // prettier-ignore
     const styles$j = styles$k
-        .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
+        .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 :host(.primary) .control {
                     box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
                 }
@@ -14709,7 +14707,7 @@
                 :host(.primary) .control[disabled] {
                     box-shadow: none;
                 }
-            `), appearanceBehavior(ButtonAppearance.Block, css `
+            `), appearanceBehavior(ButtonAppearance.block, css `
                 :host(.primary) .control {
                     background-clip: padding-box;
                     border-color: rgba(${actionRgbPartialColor}, 0.3);
@@ -14774,7 +14772,7 @@
              * @remarks
              * HTML Attribute: appearance
              */
-            this.appearance = ButtonAppearance.Outline;
+            this.appearance = ButtonAppearance.outline;
             /**
              * @public
              * @remarks
@@ -16133,18 +16131,16 @@
     }
 `;
 
-    var DrawerLocation;
-    (function (DrawerLocation) {
-        DrawerLocation["Left"] = "left";
-        DrawerLocation["Right"] = "right";
-    })(DrawerLocation || (DrawerLocation = {}));
-    var DrawerState;
-    (function (DrawerState) {
-        DrawerState["Opening"] = "opening";
-        DrawerState["Opened"] = "opened";
-        DrawerState["Closing"] = "closing";
-        DrawerState["Closed"] = "closed";
-    })(DrawerState || (DrawerState = {}));
+    const DrawerLocation = {
+        left: 'left',
+        right: 'right'
+    };
+    const DrawerState = {
+        opening: 'opening',
+        opened: 'opened',
+        closing: 'closing',
+        closed: 'closed'
+    };
 
     const animationDurationWhenDisabledMilliseconds = 0.001;
     /**
@@ -16155,8 +16151,8 @@
     class Drawer extends Dialog {
         constructor() {
             super(...arguments);
-            this.location = DrawerLocation.Left;
-            this.state = DrawerState.Closed;
+            this.location = DrawerLocation.left;
+            this.state = DrawerState.closed;
             /**
              * 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).
@@ -16200,11 +16196,11 @@
         }
         show() {
             // Not calling super.show() as that will immediately show the drawer, whereas 'Opening' state will animate
-            this.state = DrawerState.Opening;
+            this.state = DrawerState.opening;
         }
         hide() {
             // Not calling super.hide() as that will immediately hide the drawer, whereas 'Closing' state will animate
-            this.state = DrawerState.Closing;
+            this.state = DrawerState.closing;
         }
         /**
          * Handler for overlay clicks (user-initiated dismiss requests) only.
@@ -16235,11 +16231,11 @@
             }
         }
         onHiddenChanged() {
-            if (this.hidden && this.state !== DrawerState.Closed) {
-                this.state = DrawerState.Closed;
+            if (this.hidden && this.state !== DrawerState.closed) {
+                this.state = DrawerState.closed;
             }
-            else if (!this.hidden && this.state === DrawerState.Closed) {
-                this.state = DrawerState.Opened;
+            else if (!this.hidden && this.state === DrawerState.closed) {
+                this.state = DrawerState.opened;
             }
         }
         onLocationChanged() {
@@ -16249,18 +16245,18 @@
             if (this.isConnected) {
                 this.cancelCurrentAnimation();
                 switch (this.state) {
-                    case DrawerState.Opening:
+                    case DrawerState.opening:
                         this.animateOpening();
                         this.hidden = false;
                         break;
-                    case DrawerState.Opened:
+                    case DrawerState.opened:
                         this.hidden = false;
                         break;
-                    case DrawerState.Closing:
+                    case DrawerState.closing:
                         this.hidden = false;
                         this.animateClosing();
                         break;
-                    case DrawerState.Closed:
+                    case DrawerState.closed:
                         this.hidden = true;
                         break;
                     default:
@@ -16289,7 +16285,7 @@
                 this.animateOpenClose(false);
             }
             else {
-                this.state = DrawerState.Closed;
+                this.state = DrawerState.closed;
             }
         }
         animateOpenClose(drawerOpening) {
@@ -16299,7 +16295,7 @@
                     : animationConfig.slideOutOptions),
                 duration: this.animationDurationMilliseconds
             };
-            const drawerKeyframes = this.location === DrawerLocation.Right
+            const drawerKeyframes = this.location === DrawerLocation.right
                 ? animationConfig.slideRightKeyframes
                 : animationConfig.slideLeftKeyframes;
             const dialogAnimation = new dist.AnimateTo(this.dialog, undefined, options);
@@ -16314,8 +16310,8 @@
             const animationGroup = new dist.AnimateGroup(animations);
             animationGroup.onFinish = () => {
                 this.state = drawerOpening
-                    ? DrawerState.Opened
-                    : DrawerState.Closed;
+                    ? DrawerState.opened
+                    : DrawerState.closed;
             };
             this.animationGroup = animationGroup;
             animationGroup.play();
@@ -18944,11 +18940,10 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
 
-    var TextAreaAppearance;
-    (function (TextAreaAppearance) {
-        TextAreaAppearance["Outline"] = "outline";
-        TextAreaAppearance["Block"] = "block";
-    })(TextAreaAppearance || (TextAreaAppearance = {}));
+    const TextAreaAppearance = {
+        outline: 'outline',
+        block: 'block'
+    };
 
     const styles$5 = css `
     ${display('inline-flex')}
@@ -19049,12 +19044,12 @@
     }
 `
         // prettier-ignore
-        .withBehaviors(appearanceBehavior(TextAreaAppearance.Outline, css `
+        .withBehaviors(appearanceBehavior(TextAreaAppearance.outline, css `
                 .control {
                     border-color: rgba(${borderRgbPartialColor}, 0.3);
                     background-color: transparent;
                 }
-            `), appearanceBehavior(TextAreaAppearance.Block, css `
+            `), appearanceBehavior(TextAreaAppearance.block, css `
                 .control {
                     background-color: rgba(${borderRgbPartialColor}, 0.1);
                 }
@@ -19082,7 +19077,7 @@
              * @remarks
              * HTML Attribute: appearance
              */
-            this.appearance = TextAreaAppearance.Outline;
+            this.appearance = TextAreaAppearance.outline;
         }
     }
     __decorate([
@@ -19102,13 +19097,12 @@
     /**
      * Values for the 'appearance' property of the text field
      */
-    var TextFieldAppearance;
-    (function (TextFieldAppearance) {
-        TextFieldAppearance["Underline"] = "underline";
-        TextFieldAppearance["Outline"] = "outline";
-        TextFieldAppearance["Block"] = "block";
-        TextFieldAppearance["Frameless"] = "frameless";
-    })(TextFieldAppearance || (TextFieldAppearance = {}));
+    const TextFieldAppearance = {
+        underline: 'underline',
+        outline: 'outline',
+        block: 'block',
+        frameless: 'frameless'
+    };
 
     const styles$4 = css `
     ${display('inline-block')}
@@ -19335,7 +19329,7 @@
     slot[name='actions']::slotted(*) {
         ${controlHeight.cssCustomProperty}: 24px;
     }
-`.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `
+`.withBehaviors(appearanceBehavior(TextFieldAppearance.underline, css `
             .root {
                 --ni-private-bottom-border-width: 1px;
                 padding-top: ${borderWidth};
@@ -19350,7 +19344,7 @@
             :host([disabled]) .root:hover {
                 --ni-private-bottom-border-width: 1px;
             }
-        `), appearanceBehavior(TextFieldAppearance.Block, css `
+        `), appearanceBehavior(TextFieldAppearance.block, css `
             .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
                 --ni-private-bottom-border-width: 0px;
@@ -19395,7 +19389,7 @@
             :host(.invalid[disabled]) .root {
                 --ni-private-bottom-border-width: 1px;
             }
-        `), appearanceBehavior(TextFieldAppearance.Outline, css `
+        `), appearanceBehavior(TextFieldAppearance.outline, css `
             .root {
                 --ni-private-bottom-border-width: 1px;
                 border-width: ${borderWidth};
@@ -19405,7 +19399,7 @@
             :host(.invalid) .errortext {
                 top: calc(${controlHeight} - ${borderWidth});
             }
-        `), appearanceBehavior(TextFieldAppearance.Frameless, css `
+        `), appearanceBehavior(TextFieldAppearance.frameless, css `
             .root {
                 --ni-private-bottom-border-width: 0px;
                 padding-top: ${borderWidth};
@@ -19432,7 +19426,7 @@
             }
         `, 
     // Color theme
-    Theme.Dark));
+    Theme.dark));
 
     /**
      * A nimble-styed HTML text input
@@ -19447,7 +19441,7 @@
              * @remarks
              * HTML Attribute: appearance
              */
-            this.appearance = TextFieldAppearance.Underline;
+            this.appearance = TextFieldAppearance.underline;
         }
         connectedCallback() {
             super.connectedCallback();
@@ -19569,7 +19563,7 @@
              * @remarks
              * HTML Attribute: appearance
              */
-            this.appearance = ButtonAppearance.Outline;
+            this.appearance = ButtonAppearance.outline;
             /**
              * @public
              * @remarks
@@ -19638,12 +19632,11 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
 
     const groupSelectedAttribute = 'group-selected';
-    var TreeViewSelectionMode;
-    (function (TreeViewSelectionMode) {
-        TreeViewSelectionMode["All"] = "all";
-        TreeViewSelectionMode["LeavesOnly"] = "leaves-only";
-        TreeViewSelectionMode["None"] = "none";
-    })(TreeViewSelectionMode || (TreeViewSelectionMode = {}));
+    const TreeViewSelectionMode = {
+        all: 'all',
+        leavesOnly: 'leaves-only',
+        none: 'none'
+    };
 
     /* eslint-disable */
     /**
@@ -20008,7 +20001,7 @@
     class TreeView extends TreeView$1 {
         constructor() {
             super(...arguments);
-            this.selectionMode = TreeViewSelectionMode.All;
+            this.selectionMode = TreeViewSelectionMode.all;
         }
         handleClick(e) {
             if (e.defaultPrevented) {
@@ -20033,11 +20026,11 @@
         }
         canSelect(item) {
             switch (this.selectionMode) {
-                case TreeViewSelectionMode.All:
+                case TreeViewSelectionMode.all:
                     return true;
-                case TreeViewSelectionMode.None:
+                case TreeViewSelectionMode.none:
                     return false;
-                case TreeViewSelectionMode.LeavesOnly:
+                case TreeViewSelectionMode.leavesOnly:
                     return !this.itemHasChildren(item);
                 default:
                     return true;