@dnncommunity/dnn-elements 0.13.1 → 0.14.0-beta.12

package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js

@@ -1,31 +1,46 @@
-import { Component, Host, h, Prop, State, Element } from '@stencil/core';
+import { Component, Host, h, Prop, State, Element, Event, Watch } from '@stencil/core';
 export class DnnTreeviewItem {
   constructor() {
-    /** 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;
   }
-  componentDidLoad() {
-    const children = this.childrenElement.children[0];
-    const count = children.assignedElements().length;
-    if (count > 0) {
-      this.hasChildren = true;
-    }
-    if (this.expanded) {
+  /** Watch expanded Prop */
+  watchExpanded(expanded) {
+    if (expanded) {
       this.expander.classList.add("expanded");
-      this.collapsible.expanded = false;
-      setTimeout(() => {
-        this.collapsible.expanded = true;
-      }, 300);
+      this.collapsible.expanded = true;
+      return;
     }
+    this.expander.classList.remove("expanded");
+    this.collapsible.expanded = false;
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      const child = this.childElement.children[0];
+      const count = child.assignedElements().length;
+      if (count > 0) {
+        this.hasChildren = true;
+      }
+      if (this.expanded) {
+        this.expander.classList.add("expanded");
+        this.collapsible.expanded = false;
+        setTimeout(() => {
+          this.collapsible.expanded = true;
+        }, 300);
+      }
+    });
   }
   toggleCollapse() {
     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 (h(Host, null,
@@ -38,7 +53,7 @@ export class DnnTreeviewItem {
         h("div", { class: "item-slot" },
           h("slot", null)),
         h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded },
-          h("div", { ref: el => this.childrenElement = el },
+          h("div", { ref: el => this.childElement = el },
             h("slot", { name: "children" }))))));
   }
   static get is() { return "dnn-treeview-item"; }
@@ -62,16 +77,51 @@ export class DnnTreeviewItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Defines if the current node is expanded"
+        "text": "Defines if the current node is expanded."
       },
       "attribute": "expanded",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     }
   }; }
   static get states() { return {
     "hasChildren": {}
   }; }
+  static get events() { return [{
+      "method": "userExpanded",
+      "name": "userExpanded",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the user expands a node."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "userCollapsed",
+      "name": "userCollapsed",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the user collapses a node."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "expanded",
+      "methodName": "watchExpanded"
+    }]; }
 }
 //# sourceMappingURL=dnn-treeview-item.js.map

package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-treeview-item.js","sourceRoot":"","sources":["../../../src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,eAAe;EAL5B;IAWE,+CAA+C;IACxB,aAAQ,GAAY,KAAK,CAAC;IAExC,gBAAW,GAAY,KAAK,CAAC;GAsDvC;EAjDC,gBAAgB;IACd,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;IACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;IAChD,IAAI,KAAK,GAAG,CAAC,EAAC;MACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;KACzB;IACD,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;MAClC,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;MACnC,CAAC,EAAE,GAAG,CAAC,CAAC;KACT;EACH,CAAC;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;EAC7C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;QACf,cACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;UACpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;YAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE;YAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP;MACN,WAAK,KAAK,EAAC,MAAM;QACf,WAAK,KAAK,EAAC,WAAW;UACpB,eAAa,CACT;QACN,uBAAiB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACxE,WAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE;YACvC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-treeview-item',\r\n  styleUrl: 'dnn-treeview-item.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n  \r\n  private expander!: HTMLDivElement;\r\n\r\n  @Element() el!: HTMLDnnTreeviewItemElement;\r\n  \r\n  /** Defines if the current node is expanded  */\r\n  @Prop({mutable: true}) expanded: boolean = false;\r\n\r\n  @State() hasChildren: boolean = false;\r\n  \r\n  private childrenElement!: HTMLDivElement;\r\n  private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n  componentDidLoad() {\r\n    const children = this.childrenElement.children[0] as HTMLSlotElement;\r\n    const count = children.assignedElements().length\r\n    if (count > 0){\r\n      this.hasChildren = true;\r\n    }\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      this.collapsible.expanded = false;\r\n      setTimeout(() => {\r\n        this.collapsible.expanded = true;\r\n      }, 300);\r\n    }\r\n  }\r\n\r\n  private toggleCollapse(): void {\r\n    this.expanded = !this.expanded;\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      return;\r\n    }\r\n\r\n    this.expander.classList.remove(\"expanded\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"expander\" ref={el => this.expander = el}>\r\n          {this.hasChildren &&\r\n            <button\r\n              onClick={() => this.toggleCollapse()}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"item\">\r\n          <div class=\"item-slot\">\r\n            <slot></slot>\r\n          </div>\r\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n            <div ref={el => this.childrenElement = el}>\r\n              <slot name=\"children\"></slot>\r\n            </div>\r\n          </dnn-collapsible>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n  state: \"expanded\" | \"collapsed\";\r\n  height: number;\r\n}"]}
+{"version":3,"file":"dnn-treeview-item.js","sourceRoot":"","sources":["../../../src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-treeview-item',\r\n  styleUrl: 'dnn-treeview-item.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n  \r\n  private expander!: HTMLDivElement;\r\n\r\n  @Element() el!: HTMLDnnTreeviewItemElement;\r\n  \r\n  /** Defines if the current node is expanded.  */\r\n  @Prop({mutable: true, reflect: true}) expanded: boolean = false;\r\n\r\n  /** Fires when the user expands a node. */\r\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n  /** Fires when the user collapses a node. */\r\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n  /** Manages state for whether or not item has children. */\r\n  @State() hasChildren: boolean = false;\r\n\r\n  /** Watch expanded Prop */\r\n  @Watch('expanded')\r\n  watchExpanded(expanded: boolean) {\r\n    if (expanded) {\r\n      this.expander.classList.add(\"expanded\");\r\n      this.collapsible.expanded = true;\r\n      return;\r\n    }\r\n    \r\n    this.expander.classList.remove(\"expanded\");\r\n    this.collapsible.expanded = false;\r\n  }\r\n      \r\n  \r\n  private childElement!: HTMLDivElement;\r\n  private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const child = this.childElement.children[0] as HTMLSlotElement;\r\n      const count = child.assignedElements().length\r\n      if (count > 0){\r\n        this.hasChildren = true;\r\n      }\r\n      if (this.expanded){\r\n        this.expander.classList.add(\"expanded\");\r\n        this.collapsible.expanded = false;\r\n        setTimeout(() => {\r\n          this.collapsible.expanded = true;\r\n        }, 300);\r\n      }\r\n    });\r\n  }\r\n\r\n  private toggleCollapse(): void {\r\n    this.expanded = !this.expanded;\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      this.userExpanded.emit();\r\n      return;\r\n    }\r\n\r\n    this.expander.classList.remove(\"expanded\");\r\n    this.userCollapsed.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"expander\" ref={el => this.expander = el}>\r\n          {this.hasChildren &&\r\n            <button\r\n              onClick={() => this.toggleCollapse()}\r\n            >\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"item\">\r\n          <div class=\"item-slot\">\r\n            <slot></slot>\r\n          </div>\r\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n            <div ref={el => this.childElement = el}>\r\n              <slot name=\"children\"></slot>\r\n            </div>\r\n          </dnn-collapsible>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n  state: \"expanded\" | \"collapsed\";\r\n  height: number;\r\n}"]}

package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  /** Defines the menu background color. */
+  --background-color: var(--dnn-color-primary-contrast, white);
+  /** A color that contrasts well over the background color. */
+  --foreground-color: var(--dnn-color-primary, blue);
+  /** The color of the text. */
+  --text-color: #222;
+}
+
+.menu-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+.menu-container .menu {
+  margin: 0.5em;
+  display: flex;
+  gap: 1em;
+  justify-content: flex-start;
+  align-items: center;
+  white-space: nowrap;
+  width: 100%;
+}
+.menu-container .overflow {
+  margin-left: auto;
+  position: relative;
+}
+.menu-container .overflow button {
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: none;
+}
+.menu-container .overflow button svg {
+  fill: var(--foreground-color);
+}
+.menu-container .overflow .dropdown {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  white-space: nowrap;
+  right: 0;
+  transition: 100ms ease-in-out;
+  height: 0;
+  overflow: hidden;
+}
+.menu-container .overflow .dropdown.visible {
+  padding: 1em;
+  gap: 0.5em;
+  background-color: var(--background-color);
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+}

package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js

@@ -0,0 +1,132 @@
+import { Component, Element, Host, h, State } from '@stencil/core';
+export class DnnVerticalOverflowMenu {
+  constructor() {
+    this.showDropdownButton = false;
+    this.showDropdownMenu = false;
+    this.previousMenuWidth = 0;
+  }
+  componentDidRender() {
+    requestAnimationFrame(() => {
+      this.moveItemsToDropDownIfNecessery();
+      this.resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          if (entry.contentRect.width < this.previousMenuWidth) {
+            this.moveItemsToDropDownIfNecessery();
+          }
+          if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth) {
+            this.moveItemsToMenuIfPossible();
+          }
+          this.previousMenuWidth = entry.contentRect.width;
+        }
+      });
+      this.resizeObserver.observe(this.element);
+    });
+  }
+  moveItemsToDropDownIfNecessery() {
+    const menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
+    const availableWidth = this.menu.getBoundingClientRect().width;
+    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
+    menuItems.forEach(item => neededWidth += this.getFullWidth(item));
+    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
+    if (neededWidth > availableWidth) {
+      this.showDropdownButton = true;
+      var lastItem = menuItems[menuItems.length - 1];
+      if (this.dropdown == undefined) {
+        return;
+      }
+      lastItem.slot = "dropdown";
+      this.moveItemsToDropDownIfNecessery();
+    }
+  }
+  moveItemsToMenuIfPossible() {
+    if (this.dropdown == undefined || !this.dropdown.hasChildNodes()) {
+      return;
+    }
+    const menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
+    const availableWidth = this.menu.getBoundingClientRect().width;
+    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
+    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
+    menuItems.forEach(item => neededWidth += this.getFullWidth(item));
+    const firstItem = this.dropdown.querySelector("slot").assignedElements()[0];
+    if (firstItem != undefined) {
+      neededWidth += this.getFullWidth(firstItem);
+    }
+    if (neededWidth < availableWidth) {
+      if (firstItem != undefined) {
+        firstItem.slot = "";
+      }
+      if (firstItem == undefined) {
+        this.dropdown.classList.remove("visible");
+        this.showDropdownMenu = false;
+        this.showDropdownButton = false;
+      }
+    }
+  }
+  getFullWidth(item) {
+    var width = item.getBoundingClientRect().width;
+    var styles = getComputedStyle(item);
+    width += parseFloat(styles.marginLeft);
+    width += parseFloat(styles.marginRight);
+    width += parseFloat(styles.paddingLeft);
+    width += parseFloat(styles.paddingRight);
+    return width;
+  }
+  toggleOverflowMenu() {
+    this.showDropdownMenu = !this.showDropdownMenu;
+    if (this.showDropdownMenu) {
+      this.dropdown.classList.add("visible");
+      let contentHeight = 0;
+      const items = Array.from(this.dropdown.querySelector("slot").assignedElements());
+      items.forEach(item => contentHeight += item.getBoundingClientRect().height);
+      var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;
+      var additionalHeight = emHeight * (this.dropdown.children.length - 1);
+      contentHeight += additionalHeight;
+      this.dropdown.style.height = `${contentHeight}px`;
+      const dismissMenu = (e) => {
+        const buttonRect = this.button.getBoundingClientRect();
+        if (e.clientX < buttonRect.left ||
+          e.clientX > buttonRect.right ||
+          e.clientY < buttonRect.top ||
+          e.clientY > buttonRect.bottom) {
+          this.toggleOverflowMenu();
+        }
+        document.removeEventListener("click", dismissMenu);
+      };
+      setTimeout(() => {
+        document.addEventListener("click", dismissMenu, false);
+      }, 100);
+    }
+    else {
+      this.dropdown.classList.remove("visible");
+      this.dropdown.style.height = "0px";
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "menu-container" },
+        h("div", { class: "menu", ref: el => this.menu = el },
+          h("slot", null)),
+        this.showDropdownButton &&
+          h("div", { class: "overflow" },
+            h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() },
+              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+                h("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }))),
+            h("div", { class: "dropdown", ref: el => this.dropdown = el },
+              h("slot", { name: "dropdown" }))))));
+  }
+  static get is() { return "dnn-vertical-overflow-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-vertical-overflow-menu.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-vertical-overflow-menu.css"]
+  }; }
+  static get states() { return {
+    "showDropdownButton": {},
+    "showDropdownMenu": {}
+  }; }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=dnn-vertical-overflow-menu.js.map

package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-vertical-overflow-menu.js","sourceRoot":"","sources":["../../../src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-vertical-overflow-menu',\r\n  styleUrl: 'dnn-vertical-overflow-menu.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalOverflowMenu {\r\n\r\n  @Element() element!: HTMLDnnVerticalOverflowMenuElement;\r\n  \r\n  @State() showDropdownButton = false;\r\n  @State() showDropdownMenu = false;\r\n\r\n  private menu!: HTMLDivElement;\r\n  private dropdown: HTMLDivElement;\r\n  private resizeObserver: ResizeObserver;\r\n  private button!: HTMLButtonElement;\r\n  private previousMenuWidth = 0;\r\n\r\n  componentDidRender() {\r\n    requestAnimationFrame(() => {\r\n      this.moveItemsToDropDownIfNecessery();\r\n      this.resizeObserver = new ResizeObserver(entries => {\r\n        for (let entry of entries){\r\n          if (entry.contentRect.width < this.previousMenuWidth){\r\n            this.moveItemsToDropDownIfNecessery()\r\n          }\r\n          if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth){\r\n            this.moveItemsToMenuIfPossible();\r\n          }\r\n          this.previousMenuWidth = entry.contentRect.width;\r\n        }\r\n      });\r\n      this.resizeObserver.observe(this.element);\r\n    });\r\n  }\r\n\r\n  private moveItemsToDropDownIfNecessery(){\r\n    const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n    const availableWidth = this.menu.getBoundingClientRect().width;\r\n    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n    menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n    if (neededWidth > availableWidth){\r\n      this.showDropdownButton = true;\r\n      var lastItem = menuItems[menuItems.length -1];\r\n      if (this.dropdown == undefined){\r\n        return;\r\n      }\r\n      lastItem.slot = \"dropdown\";\r\n      this.moveItemsToDropDownIfNecessery();\r\n    }\r\n  }\r\n  \r\n  private moveItemsToMenuIfPossible(){\r\n    if (this.dropdown == undefined || !this.dropdown.hasChildNodes()){\r\n      return;\r\n    }\r\n    const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n    const availableWidth = this.menu.getBoundingClientRect().width;\r\n    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n    menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n    const firstItem = this.dropdown.querySelector(\"slot\").assignedElements()[0];\r\n    if (firstItem != undefined){\r\n      neededWidth += this.getFullWidth(firstItem);\r\n    }\r\n\r\n    if (neededWidth < availableWidth){\r\n      if (firstItem != undefined){\r\n        firstItem.slot = \"\";\r\n      }\r\n      if(firstItem == undefined){\r\n        this.dropdown.classList.remove(\"visible\");\r\n        this.showDropdownMenu = false;\r\n        this.showDropdownButton = false;\r\n      }\r\n    }    \r\n  }\r\n\r\n  private getFullWidth(item: Element) {\r\n    var width = item.getBoundingClientRect().width;\r\n    var styles = getComputedStyle(item);\r\n    width += parseFloat(styles.marginLeft);\r\n    width += parseFloat(styles.marginRight);\r\n    width += parseFloat(styles.paddingLeft);\r\n    width += parseFloat(styles.paddingRight);\r\n    return width;\r\n  }\r\n\r\n  private toggleOverflowMenu(): void {\r\n    this.showDropdownMenu = !this.showDropdownMenu;\r\n    if (this.showDropdownMenu){\r\n      this.dropdown.classList.add(\"visible\");\r\n      let contentHeight = 0;\r\n      const items = Array.from(this.dropdown.querySelector(\"slot\").assignedElements());\r\n      items.forEach(item => contentHeight += item.getBoundingClientRect().height);\r\n      var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;\r\n      var additionalHeight = emHeight * (this.dropdown.children.length - 1);\r\n      contentHeight += additionalHeight;\r\n      this.dropdown.style.height = `${contentHeight}px`;\r\n      const dismissMenu = (e: MouseEvent) => {\r\n        const buttonRect = this.button.getBoundingClientRect();\r\n        if (\r\n          e.clientX < buttonRect.left ||\r\n          e.clientX > buttonRect.right ||\r\n          e.clientY < buttonRect.top ||\r\n          e.clientY > buttonRect.bottom){\r\n            this.toggleOverflowMenu();\r\n          }\r\n          document.removeEventListener(\"click\", dismissMenu);\r\n      };\r\n      setTimeout(() => {\r\n        document.addEventListener(\"click\", dismissMenu, false);\r\n      }, 100);\r\n    }\r\n    else{\r\n      this.dropdown.classList.remove(\"visible\");\r\n      this.dropdown.style.height = \"0px\";\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          <div class=\"menu\" ref={el => this.menu = el}>\r\n            <slot></slot>\r\n          </div>\r\n            {this.showDropdownButton &&\r\n              <div class=\"overflow\">\r\n                <button\r\n                  ref={el => this.button = el}\r\n                  class=\"icon\"\r\n                  onClick={() => this.toggleOverflowMenu()}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>\r\n                </button>\r\n                <div class=\"dropdown\" ref={el => this.dropdown = el}>\r\n                  <slot name=\"dropdown\"></slot>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.css

@@ -0,0 +1,37 @@
+:host {
+  display: flex;
+  align-items: stretch;
+  margin: 0 auto;
+  position: relative;
+  /** @prop --left-pane-background-color:  Allows customizing the left pane background-color */
+  --left-pane-background-color: transparent;
+  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */
+  --right-pane-background-color: transparent;
+}
+
+button {
+  border: none;
+  margin: 0;
+  padding: 0;
+  cursor: ew-resize;
+  position: absolute;
+  height: 100%;
+  background-color: transparent;
+}
+button.transition {
+  transition: all 300ms ease-in-out;
+}
+
+.pane {
+  overflow-y: auto;
+}
+.pane.transition {
+  transition: all 300ms ease-in-out;
+}
+.pane.left {
+  background-color: var(--left-pane-background-color);
+}
+.pane.right {
+  background-color: var(--right-pane-background-color);
+  flex-grow: 1;
+}

package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js

@@ -0,0 +1,228 @@
+import { Component, Host, h, Prop, Element, State, Method, Event } from '@stencil/core';
+import { getMovementFromEvent } from "../../utilities/mouseUtilities";
+/**
+ * @slot default - The split divider control you want to use.
+ * @slot left - The content of the left pane.
+ * @slot right - The content of the right pane.
+ */
+export class DnnVerticalSplitview {
+  constructor() {
+    /** The width of the splitter area. */
+    this.splitterWidth = 16;
+    /** The percentage position of the splitter in the container. */
+    this.splitWidthPercentage = 30;
+    this.leftWidth = 0;
+    this.rightWidth = 0;
+  }
+  /** Sets the width percentage of the divider */
+  async setSplitWidthPercentage(newWidth) {
+    const panes = this.element.shadowRoot.querySelectorAll(".pane");
+    requestAnimationFrame(() => {
+      panes.forEach(pane => pane.classList.add("transition"));
+      this.splitter.classList.add("transition");
+      requestAnimationFrame(() => {
+        const fullWidth = this.element.getBoundingClientRect().width;
+        let newLeft = fullWidth * newWidth / 100;
+        if (newLeft < 0) {
+          newLeft = 0;
+        }
+        if (newLeft > fullWidth) {
+          newLeft = fullWidth;
+        }
+        this.leftWidth = newLeft;
+        this.rightWidth = fullWidth - newLeft;
+        setTimeout(() => {
+          panes.forEach(pane => pane.classList.remove("transition"));
+          this.splitter.classList.remove("transition");
+        }, 300);
+      });
+    });
+  }
+  /** Gets the current divider position percentage. */
+  async getSplitWidthPercentage() {
+    const fullWidth = this.element.getBoundingClientRect().width;
+    return this.leftWidth / fullWidth;
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      const fullWidth = this.element.getBoundingClientRect().width;
+      this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
+      this.rightWidth = fullWidth - this.leftWidth;
+      this.widthChanged.emit(this.splitWidthPercentage);
+    });
+  }
+  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;
+    };
+    const handleDragFinished = () => {
+      document.removeEventListener("mousemove", handleDrag);
+      document.removeEventListener("touchmove", handleDrag);
+      const fullWidth = this.element.getBoundingClientRect().width;
+      const newPercentage = this.leftWidth / fullWidth * 100;
+      this.widthChanged.emit(newPercentage);
+    };
+    document.addEventListener("mouseup", handleDragFinished);
+    document.addEventListener("touchend", handleDragFinished);
+    document.addEventListener("mousemove", handleDrag);
+    document.addEventListener("touchmove", handleDrag);
+  }
+  handleKeyDown(e) {
+    let movementX = 0;
+    switch (e.key) {
+      case "ArrowLeft":
+        movementX = -10;
+        break;
+      case "ArrowRight":
+        movementX = 10;
+        break;
+      default:
+        return;
+    }
+    if (e.shiftKey) {
+      movementX = movementX * 10;
+    }
+    const 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 - this.leftWidth;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "left pane", style: {
+          width: `${this.leftWidth}px`,
+        } },
+        h("slot", { name: "left" })),
+      h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
+          minWidth: `${this.splitterWidth.toString()}px`,
+          left: `${this.leftWidth - 2}px`,
+        } },
+        h("slot", null)),
+      h("div", { class: "right pane", style: {
+          width: `${this.rightWidth}px`,
+        } },
+        h("slot", { name: "right" }))));
+  }
+  static get is() { return "dnn-vertical-splitview"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-vertical-splitview.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-vertical-splitview.css"]
+  }; }
+  static get properties() { return {
+    "splitterWidth": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The width of the splitter area."
+      },
+      "attribute": "splitter-width",
+      "reflect": false,
+      "defaultValue": "16"
+    },
+    "splitWidthPercentage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The percentage position of the splitter in the container."
+      },
+      "attribute": "split-width-percentage",
+      "reflect": false,
+      "defaultValue": "30"
+    }
+  }; }
+  static get states() { return {
+    "leftWidth": {},
+    "rightWidth": {}
+  }; }
+  static get events() { return [{
+      "method": "widthChanged",
+      "name": "widthChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the width of the divider changes."
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setSplitWidthPercentage": {
+      "complexType": {
+        "signature": "(newWidth: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the width percentage of the divider",
+        "tags": []
+      }
+    },
+    "getSplitWidthPercentage": {
+      "complexType": {
+        "signature": "() => Promise<number>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<number>"
+      },
+      "docs": {
+        "text": "Gets the current divider position percentage.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=dnn-vertical-splitview.js.map

package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-vertical-splitview.js","sourceRoot":"","sources":["../../../src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n  tag: 'dnn-vertical-splitview',\r\n  styleUrl: 'dnn-vertical-splitview.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n  /** The width of the splitter area. */\r\n  @Prop() splitterWidth = 16;\r\n\r\n  /** The percentage position of the splitter in the container. */\r\n  @Prop() splitWidthPercentage = 30;\r\n  \r\n  private splitter!: HTMLButtonElement;\r\n\r\n  /** Sets the width percentage of the divider */\r\n  @Method()\r\n  async setSplitWidthPercentage(newWidth: number) {\r\n    const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n    requestAnimationFrame(() => {\r\n      panes.forEach(pane => pane.classList.add(\"transition\"));\r\n      this.splitter.classList.add(\"transition\");\r\n      requestAnimationFrame(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        let newLeft = fullWidth * newWidth / 100;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        setTimeout(() => {\r\n          panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n          this.splitter.classList.remove(\"transition\");\r\n        }, 300);\r\n      });\r\n    });\r\n  }\r\n\r\n  /** Gets the current divider position percentage. */\r\n  @Method()\r\n  async getSplitWidthPercentage(){\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    return this.leftWidth / fullWidth;\r\n  }\r\n\r\n  /** Fires when the width of the divider changes. */\r\n  @Event() widthChanged: EventEmitter<number>;\r\n\r\n  @State() leftWidth = 0;\r\n  @State() rightWidth = 0;\r\n\r\n  @Element() element : HTMLDnnVerticalSplitviewElement;\r\n  \r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n      this.rightWidth = fullWidth - this.leftWidth;\r\n      this.widthChanged.emit(this.splitWidthPercentage);\r\n    });\r\n  }\r\n  \r\n  private previousTouch: Touch;\r\n\r\n  private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n    event.preventDefault();\r\n    const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n      let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n      let fullWidth = this.element.getBoundingClientRect().width;\r\n      let newLeft = this.leftWidth + movementX;\r\n      if (newLeft < 0){\r\n        newLeft = 0;\r\n      }\r\n      if (newLeft > fullWidth){\r\n        newLeft = fullWidth;\r\n      }\r\n      this.leftWidth = newLeft;\r\n      this.rightWidth = fullWidth - newLeft;\r\n    }\r\n    const handleDragFinished = () => {\r\n      document.removeEventListener(\"mousemove\", handleDrag);\r\n      document.removeEventListener(\"touchmove\", handleDrag);\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      const newPercentage = this.leftWidth / fullWidth * 100;\r\n      this.widthChanged.emit(newPercentage);\r\n    };\r\n    document.addEventListener(\"mouseup\", handleDragFinished);\r\n    document.addEventListener(\"touchend\", handleDragFinished);\r\n    document.addEventListener(\"mousemove\", handleDrag);\r\n    document.addEventListener(\"touchmove\", handleDrag);\r\n  }\r\n\r\n  private handleKeyDown(e: KeyboardEvent): void {\r\n    let movementX = 0;\r\n    switch (e.key) {\r\n      case \"ArrowLeft\":\r\n        movementX = -10;\r\n        break;\r\n      case \"ArrowRight\":\r\n        movementX = 10;\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n    if (e.shiftKey){\r\n      movementX = movementX * 10;\r\n    }\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    let newLeft = this.leftWidth + movementX;\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newLeft > fullWidth){\r\n      newLeft = fullWidth;\r\n    }\r\n    this.leftWidth = newLeft;\r\n    this.rightWidth = fullWidth - this.leftWidth;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n          <div class=\"left pane\" style={{\r\n            width: `${this.leftWidth}px`,\r\n            }}>\r\n            <slot name=\"left\"></slot>\r\n          </div>\r\n          <button\r\n            onMouseDown={e => this.handleMouseDown(e)}\r\n            onTouchStart={e => this.handleMouseDown(e)}\r\n            onKeyDown={e => this.handleKeyDown(e)}\r\n            ref={el => this.splitter = el}\r\n            style={{\r\n              minWidth: `${this.splitterWidth.toString()}px`,\r\n              left: `${this.leftWidth - 2}px`,\r\n            }}\r\n          >\r\n            <slot></slot>\r\n          </button>\r\n          <div\r\n            class=\"right pane\"\r\n            style={{\r\n              width: `${this.rightWidth}px`,\r\n            }}>\r\n            <slot name=\"right\"></slot>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}