@ni/nimble-components 8.0.0 → 8.1.3

package/dist/all-components-bundle.js

@@ -18129,6 +18129,7 @@
         TextFieldAppearance["Underline"] = "underline";
         TextFieldAppearance["Outline"] = "outline";
         TextFieldAppearance["Block"] = "block";
+        TextFieldAppearance["Frameless"] = "frameless";
     })(TextFieldAppearance || (TextFieldAppearance = {}));
 
     const styles$4 = css `
@@ -18185,11 +18186,8 @@
         border-bottom-color: ${failColor};
     }
 
-    :host([readonly]:not([disabled])) .root {
-        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);
-        padding: 0px;
-        padding-bottom: 1px;
-        background-color: transparent;
+    :host([readonly]) .root {
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
     :host([disabled]) .root {
@@ -18203,6 +18201,10 @@
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([readonly]) .root:hover {
+        --ni-private-bottom-border-width: 1px;
+    }
+
     :host([disabled]) .root:hover {
         --ni-private-bottom-border-width: 1px;
     }
@@ -18302,10 +18304,6 @@
         white-space: nowrap;
     }
 
-    :host(.invalid[readonly]:not([disabled])) .errortext {
-        top: calc(${controlHeight} - ${borderWidth});
-    }
-
     :host(.invalid) .error-text:empty {
         display: none;
     }
@@ -18329,6 +18327,14 @@
                 padding-left: ${borderWidth};
                 padding-right: ${borderWidth};
             }
+
+            :host([disabled]) .root {
+                border-color: rgba(${borderRgbPartialColor}, 0.1);
+            }
+
+            :host([disabled]) .root:hover {
+                --ni-private-bottom-border-width: 1px;
+            }
         `), appearanceBehavior(TextFieldAppearance.Block, css `
             .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
@@ -18358,6 +18364,11 @@
                 );
             }
 
+            :host([readonly]) .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+                border-color: transparent;
+            }
+
             :host([disabled]) .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.07);
             }
@@ -18379,6 +18390,21 @@
             :host(.invalid) .errortext {
                 top: calc(${controlHeight} - ${borderWidth});
             }
+        `), appearanceBehavior(TextFieldAppearance.Frameless, css `
+            .root {
+                --ni-private-bottom-border-width: 0px;
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            :host([readonly]) .root {
+                border-color: transparent;
+            }
+
+            .root:hover {
+                --ni-private-bottom-border-width: 0px;
+            }
         `), themeBehavior(css `
             ${'' /* Light theme */}
             .control::-ms-reveal {
@@ -18866,37 +18892,8 @@
      */
     class TreeItem extends TreeItem$1 {
         constructor() {
-            super();
+            super(...arguments);
             this.treeView = null;
-            this.handleClickOverride = (event) => {
-                if (event.composedPath().includes(this.expandCollapseButton)) {
-                    // just have base class handle click event for glyph
-                    return;
-                }
-                const treeItem = this.getImmediateTreeItem(event.target);
-                if (treeItem?.disabled || treeItem !== this) {
-                    // don't allow base TreeItem to emit a 'selected-change' event when a disabled item is clicked
-                    event.stopImmediatePropagation();
-                    return;
-                }
-                const leavesOnly = this.treeView?.selectionMode === TreeViewSelectionMode.LeavesOnly;
-                const all = this.treeView?.selectionMode === TreeViewSelectionMode.All;
-                const hasChildren = this.hasChildTreeItems();
-                if ((leavesOnly && !hasChildren) || all) {
-                    const selectedTreeItem = this.getImmediateTreeItem(this.treeView?.currentSelected);
-                    // deselect currently selected item if different than this instance
-                    if (selectedTreeItem && this !== this.treeView?.currentSelected) {
-                        selectedTreeItem.selected = false;
-                    }
-                    this.selected = true;
-                }
-                else {
-                    // implicit (hasChildren && leavesOnly) || none, so only allow expand/collapse, not select
-                    this.expanded = !this.expanded;
-                }
-                // don't allow base class to process click event
-                event.stopImmediatePropagation();
-            };
             // This prevents the toggling of selected state when a TreeItem is clicked multiple times,
             // which is what the FAST TreeItem allows
             this.handleSelectedChange = (event) => {
@@ -18905,7 +18902,6 @@
                     this.setGroupSelectionOnRootParentTreeItem(this);
                 }
             };
-            this.addEventListener('click', this.handleClickOverride);
         }
         connectedCallback() {
             super.connectedCallback();
@@ -18917,14 +18913,9 @@
         }
         disconnectedCallback() {
             super.disconnectedCallback();
-            this.removeEventListener('click', this.handleClickOverride);
             this.removeEventListener('selected-change', this.handleSelectedChange);
             this.treeView = null;
         }
-        hasChildTreeItems() {
-            const treeItemChild = this.querySelector('[role="treeitem"]');
-            return treeItemChild !== null;
-        }
         clearTreeGroupSelection() {
             const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
             currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
@@ -18939,14 +18930,6 @@
                 currentItem.setAttribute(groupSelectedAttribute, 'true');
             }
         }
-        getImmediateTreeItem(element) {
-            let foundElement = element;
-            while (foundElement
-                && !(foundElement?.getAttribute('role') === 'treeitem')) {
-                foundElement = foundElement?.parentElement;
-            }
-            return foundElement;
-        }
         /**
          * This was copied directly from the FAST TreeItem implementation
          * @returns the root tree view
@@ -18994,6 +18977,43 @@
             super(...arguments);
             this.selectionMode = TreeViewSelectionMode.All;
         }
+        handleClick(e) {
+            if (e.defaultPrevented) {
+                // handled, do nothing
+                return false;
+            }
+            if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
+                // not a tree item, ignore
+                return true;
+            }
+            const item = e.target;
+            if (item.disabled) {
+                return false;
+            }
+            if (this.canSelect(item)) {
+                item.selected = true;
+            }
+            else if (this.itemHasChildren(item)) {
+                item.expanded = !item.expanded;
+            }
+            return true;
+        }
+        canSelect(item) {
+            switch (this.selectionMode) {
+                case TreeViewSelectionMode.All:
+                    return true;
+                case TreeViewSelectionMode.None:
+                    return false;
+                case TreeViewSelectionMode.LeavesOnly:
+                    return !this.itemHasChildren(item);
+                default:
+                    return true;
+            }
+        }
+        itemHasChildren(item) {
+            const treeItemChild = item.querySelector('[role="treeitem"]');
+            return treeItemChild !== null;
+        }
     }
     __decorate([
         attr({ attribute: 'selection-mode' })