@ni/nimble-components 7.8.3 → 8.1.0

package/dist/all-components-bundle.js

@@ -6718,7 +6718,7 @@
      *
      * @public
      */
-    class ListboxOption$1 extends FoundationElement {
+    class ListboxOption extends FoundationElement {
         constructor(text, value, defaultSelected, selected) {
             super();
             /**
@@ -6834,22 +6834,22 @@
     }
     __decorate$1([
         observable
-    ], ListboxOption$1.prototype, "checked", void 0);
+    ], ListboxOption.prototype, "checked", void 0);
     __decorate$1([
         observable
-    ], ListboxOption$1.prototype, "defaultSelected", void 0);
+    ], ListboxOption.prototype, "defaultSelected", void 0);
     __decorate$1([
         attr({ mode: "boolean" })
-    ], ListboxOption$1.prototype, "disabled", void 0);
+    ], ListboxOption.prototype, "disabled", void 0);
     __decorate$1([
         attr({ attribute: "selected", mode: "boolean" })
-    ], ListboxOption$1.prototype, "selectedAttribute", void 0);
+    ], ListboxOption.prototype, "selectedAttribute", void 0);
     __decorate$1([
         observable
-    ], ListboxOption$1.prototype, "selected", void 0);
+    ], ListboxOption.prototype, "selected", void 0);
     __decorate$1([
         attr({ attribute: "value", mode: "fromView" })
-    ], ListboxOption$1.prototype, "initialValue", void 0);
+    ], ListboxOption.prototype, "initialValue", void 0);
     /**
      * States and properties relating to the ARIA `option` role.
      *
@@ -6870,7 +6870,7 @@
         observable
     ], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
     applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
-    applyMixins(ListboxOption$1, StartEnd, DelegatesARIAListboxOption);
+    applyMixins(ListboxOption, StartEnd, DelegatesARIAListboxOption);
 
     /**
      * A Listbox Custom HTML Element.
@@ -17102,7 +17102,7 @@
     /**
      * A nimble-styled HTML listbox option
      */
-    class ListboxOption extends ListboxOption$1 {
+    class ListOption extends ListboxOption {
         // Workaround for https://github.com/microsoft/fast/issues/5219
         get value() {
             return super.value;
@@ -17119,13 +17119,13 @@
             this.setAttribute('value', this.value);
         }
     }
-    const nimbleListboxOption = ListboxOption.compose({
-        baseName: 'listbox-option',
-        baseClass: ListboxOption$1,
+    const nimbleListOption = ListOption.compose({
+        baseName: 'list-option',
+        baseClass: ListboxOption,
         template: listboxOptionTemplate,
         styles: styles$f
     });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListboxOption());
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
     const styles$e = css `
     ${display('grid')}
@@ -17554,11 +17554,6 @@
             }
             super.setPositioning();
         }
-        connectedCallback() {
-            super.connectedCallback();
-            // Call setPositioning() after this.forcedPosition is initialized.
-            this.setPositioning();
-        }
         // Workaround for https://github.com/microsoft/fast/issues/5773
         slottedOptionsChanged(prev, next) {
             const value = this.value;
@@ -18134,6 +18129,7 @@
         TextFieldAppearance["Underline"] = "underline";
         TextFieldAppearance["Outline"] = "outline";
         TextFieldAppearance["Block"] = "block";
+        TextFieldAppearance["Frameless"] = "frameless";
     })(TextFieldAppearance || (TextFieldAppearance = {}));
 
     const styles$4 = css `
@@ -18190,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 {
@@ -18208,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;
     }
@@ -18307,10 +18304,6 @@
         white-space: nowrap;
     }
 
-    :host(.invalid[readonly]:not([disabled])) .errortext {
-        top: calc(${controlHeight} - ${borderWidth});
-    }
-
     :host(.invalid) .error-text:empty {
         display: none;
     }
@@ -18334,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);
@@ -18363,6 +18364,11 @@
                 );
             }
 
+            :host([readonly]) .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+                border-color: transparent;
+            }
+
             :host([disabled]) .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.07);
             }
@@ -18384,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 {
@@ -18871,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) => {
@@ -18910,7 +18902,6 @@
                     this.setGroupSelectionOnRootParentTreeItem(this);
                 }
             };
-            this.addEventListener('click', this.handleClickOverride);
         }
         connectedCallback() {
             super.connectedCallback();
@@ -18922,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));
@@ -18944,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
@@ -18999,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' })