@dnncommunity/dnn-elements 0.14.0-beta.6 → 0.14.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ba8b86b1.js');
+const index = require('./index-aff4d89a.js');
 
 const dnnButtonCss = ":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6a6ac523.js');
+const index = require('./index-7505bd72.js');
 const debounce = require('./debounce-1de79bc7.js');
 
 const dnnButtonCss = ":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";
@@ -158,18 +158,8 @@ let DnnChevron = class {
 };
 DnnChevron.style = dnnChevronCss;
 
-const dnnCollapsibleCss = ":host{display:block}:host #container{height:0;overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}";
+const dnnCollapsibleCss = ":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 let DnnCollapsible = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -178,86 +168,51 @@ let DnnCollapsible = class {
     this.expanded = false;
     /** Defines the transition time in ms, defaults to 100ms */
     this.transitionDuration = 150;
-    this.animating = false;
   }
-  handleExpandedChanged(newValue) {
-    this.animating = true;
+  handleHeightChanged() {
     requestAnimationFrame(() => {
-      const container = this.el.shadowRoot.querySelector("#container");
-      if (newValue) {
-        container.style.height = container.scrollHeight + "px";
-      }
-      else {
-        container.style.height = "0px";
-      }
-    });
-    requestAnimationFrame(() => {
-      this.animating = false;
-      this.dnnCollapsibleHeightChanged.emit();
+      this.updateSize();
     });
   }
-  /** Updates the component height, use to update after a slot content changes. */
+  /**
+   * Updates the component height, use to update after a slot content changes.
+   */
   async updateSize() {
-    this.updateComponentSize();
-  }
-  updateComponentSize() {
     if (this.expanded) {
-      this.animating = true;
       requestAnimationFrame(() => {
-        const container = this.el.shadowRoot.querySelector("#container");
-        let newHeight = 0;
-        container.querySelector('slot').assignedElements().forEach(node => {
-          newHeight += node.scrollHeight;
-        });
-        container.style.height = newHeight + "px";
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
       });
+      setTimeout(() => {
+        this.container.style.maxHeight = "none";
+      }, this.transitionDuration);
     }
   }
-  handleOtherCollapsibleHeightChanged() {
+  handledExpandedChanged(expanded) {
+    if (expanded) {
+      this.updateSize();
+    }
+    else {
+      requestAnimationFrame(() => {
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
+        requestAnimationFrame(() => {
+          this.container.style.maxHeight = "0px";
+        });
+      });
+    }
     setTimeout(() => {
-      this.updateComponentSize();
-    }, this.transitionDuration);
-  }
-  handleMutation(mutationList) {
-    mutationList.forEach(mutation => {
       requestAnimationFrame(() => {
-        mutation.target.closest('dnn-collapsible').updateSize();
+        this.dnnCollapsibleHeightChanged.emit();
       });
-    });
-  }
-  componentWillLoad() {
-    this.mutationObserver = new MutationObserver((mutationList) => {
-      this.handleMutation(mutationList);
-    });
-  }
-  componentDidLoad() {
-    const container = this.el.shadowRoot.querySelector('#container');
-    container.style.transitionDuration = this.transitionDuration + 'ms';
-    // Monitor for content changes and update own height
-    const childNodes = [this.el];
-    childNodes.forEach(element => {
-      this.mutationObserver.observe(element, { attributes: true, characterData: true, childList: true, subtree: true });
-    });
-    const slot = this.el.shadowRoot.querySelector('slot');
-    slot.addEventListener("slotchange", () => {
-      this.updateSize();
-    });
-  }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    }, this.transitionDuration);
   }
-  /*eslint-enable @stencil/own-methods-must-be-private */
   render() {
-    return (index.h(index.Host, null, index.h("div", { id: "container" }, index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el }, index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "expanded": ["handleExpandedChanged"]
+    "expanded": ["handledExpandedChanged"]
   }; }
 };
-__decorate$2([
-  debounce.Debounce()
-], DnnCollapsible.prototype, "updateSize", null);
 DnnCollapsible.style = dnnCollapsibleCss;
 
 /** Color utility class with hsl and rgb converters
@@ -1528,19 +1483,32 @@ let DnnToggle = class {
 };
 DnnToggle.style = dnnToggleCss;
 
-const dnnTreeviewItemCss = ":host{display:-ms-flexbox;display:flex;overflow:hidden}.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;outline:none;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);
-    /** Defines if the current node is expanded  */
+    this.userExpanded = index.createEvent(this, "userExpanded", 3);
+    this.userCollapsed = index.createEvent(this, "userCollapsed", 3);
+    /** 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;
       }
@@ -1557,15 +1525,20 @@ let DnnTreeviewItem = class {
     this.expanded = !this.expanded;
     if (this.expanded) {
       this.expander.classList.add("expanded");
+      this.userExpanded.emit();
       return;
     }
     this.expander.classList.remove("expanded");
+    this.userCollapsed.emit();
   }
   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;