@dnncommunity/dnn-elements 0.14.0-beta.8 → 0.14.1-beta.1

package/dist/cjs/dnn-button_16.cjs.entry.js

@@ -192,7 +192,12 @@ let DnnCollapsible = class {
       this.updateSize();
     }
     else {
-      this.container.style.maxHeight = "0px";
+      requestAnimationFrame(() => {
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
+        requestAnimationFrame(() => {
+          this.container.style.maxHeight = "0px";
+        });
+      });
     }
     setTimeout(() => {
       requestAnimationFrame(() => {
@@ -1478,21 +1483,32 @@ let DnnToggle = class {
 };
 DnnToggle.style = dnnToggleCss;
 
-const dnnTreeviewItemCss = ":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";
+const dnnTreeviewItemCss = ":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";
 
 let DnnTreeviewItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.userExpanded = index.createEvent(this, "userExpanded", 3);
     this.userCollapsed = index.createEvent(this, "userCollapsed", 3);
-    /** Defines if the current node is expanded  */
+    /** Defines if the current node is expanded.  */
     this.expanded = false;
+    /** Manages state for whether or not item has children. */
     this.hasChildren = false;
   }
+  /** Watch expanded Prop */
+  watchExpanded(expanded) {
+    if (expanded) {
+      this.expander.classList.add("expanded");
+      this.collapsible.expanded = true;
+      return;
+    }
+    this.expander.classList.remove("expanded");
+    this.collapsible.expanded = false;
+  }
   componentDidLoad() {
     requestAnimationFrame(() => {
-      const children = this.childrenElement.children[0];
-      const count = children.assignedElements().length;
+      const child = this.childElement.children[0];
+      const count = child.assignedElements().length;
       if (count > 0) {
         this.hasChildren = true;
       }
@@ -1517,9 +1533,12 @@ let DnnTreeviewItem = class {
   }
   render() {
     return (index.h(index.Host, null, index.h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
-      index.h("button", { onClick: () => this.toggleCollapse() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M10 17l5-5-5-5v10z" }), index.h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), index.h("div", { class: "item" }, index.h("div", { class: "item-slot" }, index.h("slot", null)), index.h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, index.h("div", { ref: el => this.childrenElement = el }, index.h("slot", { name: "children" }))))));
+      index.h("button", { onClick: () => this.toggleCollapse() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M10 17l5-5-5-5v10z" }), index.h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), index.h("div", { class: "item" }, index.h("div", { class: "item-slot" }, index.h("slot", null)), index.h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, index.h("div", { ref: el => this.childElement = el }, index.h("slot", { name: "children" }))))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "expanded": ["watchExpanded"]
+  }; }
 };
 DnnTreeviewItem.style = dnnTreeviewItemCss;
 
@@ -1680,26 +1699,32 @@ let DnnVerticalSplitview = class {
   }
   componentDidLoad() {
     requestAnimationFrame(() => {
-      const fullWidth = this.element.getBoundingClientRect().width;
-      this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
-      this.rightWidth = fullWidth - this.leftWidth;
-      this.widthChanged.emit(this.splitWidthPercentage);
+      this.resizeObserver = new ResizeObserver(() => {
+        const fullWidth = this.element.getBoundingClientRect().width;
+        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
+        this.rightWidth = fullWidth - this.leftWidth;
+        this.widthChanged.emit(this.splitWidthPercentage);
+      });
+      this.resizeObserver.observe(this.element);
     });
   }
   handleMouseDown(event) {
     event.preventDefault();
     const handleDrag = (ev) => {
-      let { movementX } = getMovementFromEvent(ev, this.previousTouch);
-      let fullWidth = this.element.getBoundingClientRect().width;
-      let newLeft = this.leftWidth + movementX;
-      if (newLeft < 0) {
-        newLeft = 0;
-      }
-      if (newLeft > fullWidth) {
-        newLeft = fullWidth;
-      }
-      this.leftWidth = newLeft;
-      this.rightWidth = fullWidth - newLeft;
+      requestAnimationFrame(() => {
+        let fullWidth = this.element.getBoundingClientRect().width;
+        let { movementX } = getMovementFromEvent(ev, this.previousTouch);
+        let newLeft = this.leftWidth + movementX;
+        if (newLeft < 0) {
+          newLeft = 0;
+        }
+        if (newLeft > fullWidth) {
+          newLeft = fullWidth;
+        }
+        this.leftWidth = newLeft;
+        this.rightWidth = fullWidth - newLeft;
+        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;
+      });
     };
     const handleDragFinished = () => {
       document.removeEventListener("mousemove", handleDrag);