@dnncommunity/dnn-elements 0.14.0-beta.4 → 0.14.0-beta.8

package/dist/esm/dnn-vertical-overflow-menu.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-3e56049b.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-b5a28c1d.js';
 
-const dnnVerticalOverflowMenuCss = ":host{display:block;--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, blue);--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 button{cursor:pointer}.menu-container button svg{fill:var(--foreground-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 .menu a{display:flex;align-items:center;color:var(--text-color);text-decoration:none}.menu-container .menu a svg{fill:var(--foreground-color)}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{padding:0;margin:0;background-color:transparent;border:none}.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 a{color:var(--text-color)}.menu-container .overflow .dropdown a svg{fill:var(--foreground-color)}.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)}.menu-container .overflow .dropdown>*{display:flex;align-items:center}";
+const dnnVerticalOverflowMenuCss = ":host{display:block;--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, blue);--text-color:#222}.menu-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;background-color:var(--background-color);color:var(--text-color)}.menu-container .menu{margin:0.5em;display:-ms-flexbox;display:flex;gap:1em;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;white-space:nowrap;right:0;-webkit-transition:100ms ease-in-out;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}";
 
 let DnnVerticalOverflowMenu = class {
   constructor(hostRef) {
@@ -11,7 +11,6 @@ let DnnVerticalOverflowMenu = class {
   }
   componentDidRender() {
     requestAnimationFrame(() => {
-      this.moveAllSlottedItemsIntoMenu();
       this.moveItemsToDropDownIfNecessery();
       this.resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
@@ -27,12 +26,8 @@ let DnnVerticalOverflowMenu = class {
       this.resizeObserver.observe(this.element);
     });
   }
-  moveAllSlottedItemsIntoMenu() {
-    const menuItems = this.element.shadowRoot.querySelector("slot").assignedElements();
-    menuItems.forEach(menuItem => this.menu.appendChild(menuItem));
-  }
   moveItemsToDropDownIfNecessery() {
-    const menuItems = Array.from(this.menu.children);
+    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));
@@ -43,7 +38,7 @@ let DnnVerticalOverflowMenu = class {
       if (this.dropdown == undefined) {
         return;
       }
-      this.dropdown.prepend(lastItem);
+      lastItem.slot = "dropdown";
       this.moveItemsToDropDownIfNecessery();
     }
   }
@@ -51,16 +46,20 @@ let DnnVerticalOverflowMenu = class {
     if (this.dropdown == undefined || !this.dropdown.hasChildNodes()) {
       return;
     }
-    const menuItems = Array.from(this.menu.children);
+    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));
-    neededWidth += this.getFullWidth(this.dropdown.children[0]);
+    const firstItem = this.dropdown.querySelector("slot").assignedElements()[0];
+    if (firstItem != undefined) {
+      neededWidth += this.getFullWidth(firstItem);
+    }
     if (neededWidth < availableWidth) {
-      const firstItem = this.dropdown.children[0];
-      this.menu.appendChild(firstItem);
-      if (!this.dropdown.hasChildNodes()) {
+      if (firstItem != undefined) {
+        firstItem.slot = "";
+      }
+      if (firstItem == undefined) {
         this.dropdown.classList.remove("visible");
         this.showDropdownMenu = false;
         this.showDropdownButton = false;
@@ -81,7 +80,7 @@ let DnnVerticalOverflowMenu = class {
     if (this.showDropdownMenu) {
       this.dropdown.classList.add("visible");
       let contentHeight = 0;
-      const items = Array.from(this.dropdown.children);
+      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);
@@ -108,7 +107,7 @@ let DnnVerticalOverflowMenu = class {
   }
   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("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" }))))));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/dnn-vertical-overflow-menu.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-vertical-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.scss?tag=dnn-vertical-overflow-menu&encapsulation=shadow","./src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n\r\n  /** Defines the menu background color. */\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n\r\n  /** A color that contrasts well over the background color. */\r\n  --foreground-color: var(--dnn-color-primary, blue);\r\n\r\n  /** The color of the text. */\r\n  --text-color: #222;\r\n}\r\n\r\n.menu-container{\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  background-color: var(--background-color);\r\n  color: var(--text-color);\r\n  button{\r\n    cursor: pointer;\r\n    svg{\r\n      fill: var(--foreground-color);\r\n    }\r\n  }\r\n  .menu{\r\n    margin: 0.5em;\r\n    display: flex;\r\n    gap: 1em;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    white-space: nowrap;\r\n    width: 100%;\r\n    a{\r\n      display: flex;\r\n      align-items: center;\r\n      color: var(--text-color);\r\n      text-decoration: none;\r\n      svg{\r\n        fill: var(--foreground-color);\r\n      }\r\n    }\r\n  }\r\n  .overflow {\r\n    margin-left: auto;\r\n    position: relative;\r\n    button{\r\n      padding: 0;\r\n      margin: 0;\r\n      background-color: transparent;\r\n      border: none;\r\n    }\r\n    .dropdown{\r\n      position:absolute;\r\n      display: flex;\r\n      flex-direction: column;\r\n      white-space: nowrap;\r\n      right: 0;\r\n      transition: 100ms ease-in-out;\r\n      height: 0;\r\n      overflow: hidden;\r\n      a{\r\n        color: var(--text-color);\r\n        svg{\r\n          fill: var(--foreground-color);\r\n        }\r\n      }\r\n      &.visible{\r\n        padding: 1em;\r\n        gap: 0.5em;\r\n        background-color: var(--background-color);\r\n        box-shadow: 2px 2px 4px rgba(0,0,0,0.7);\r\n      }\r\n      > *{\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n    }\r\n  }\r\n}\r\n","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.moveAllSlottedItemsIntoMenu();\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 moveAllSlottedItemsIntoMenu(){\r\n    const menuItems = this.element.shadowRoot.querySelector(\"slot\").assignedElements();\r\n    menuItems.forEach(menuItem => this.menu.appendChild(menuItem));\r\n  }\r\n\r\n  private moveItemsToDropDownIfNecessery(){\r\n    const menuItems = Array.from(this.menu.children);\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      this.dropdown.prepend(lastItem);\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.children);\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    neededWidth += this.getFullWidth(this.dropdown.children[0]);\r\n\r\n    if (neededWidth < availableWidth){\r\n      const firstItem = this.dropdown.children[0];\r\n      this.menu.appendChild(firstItem);\r\n      if(!this.dropdown.hasChildNodes()){\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.children);\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}></div>\r\n              </div>\r\n            }\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dnn-vertical-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.scss?tag=dnn-vertical-overflow-menu&encapsulation=shadow","./src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n\r\n  /** Defines the menu background color. */\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n\r\n  /** A color that contrasts well over the background color. */\r\n  --foreground-color: var(--dnn-color-primary, blue);\r\n\r\n  /** The color of the text. */\r\n  --text-color: #222;\r\n}\r\n\r\n.menu-container{\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  background-color: var(--background-color);\r\n  color: var(--text-color);\r\n  .menu{\r\n    margin: 0.5em;\r\n    display: flex;\r\n    gap: 1em;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    white-space: nowrap;\r\n    width: 100%;\r\n  }\r\n  .overflow {\r\n    margin-left: auto;\r\n    position: relative;\r\n    button{\r\n      cursor: pointer;\r\n      svg{\r\n        fill: var(--foreground-color);\r\n      }\r\n      padding: 0;\r\n      margin: 0;\r\n      background-color: transparent;\r\n      border: none;\r\n    }\r\n    .dropdown{\r\n      position:absolute;\r\n      display: flex;\r\n      flex-direction: column;\r\n      white-space: nowrap;\r\n      right: 0;\r\n      transition: 100ms ease-in-out;\r\n      height: 0;\r\n      overflow: hidden;\r\n      &.visible{\r\n        padding: 1em;\r\n        gap: 0.5em;\r\n        background-color: var(--background-color);\r\n        box-shadow: 2px 2px 4px rgba(0,0,0,0.7);\r\n      }\r\n    }\r\n  }\r\n}\r\n","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"],"version":3}

package/dist/esm/dnn-vertical-splitview.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-b5a28c1d.js';
 import { g as getMovementFromEvent } from './mouseUtilities-817973b4.js';
 
-const dnnVerticalSplitviewCss = ":host{display:flex;align-items:stretch;margin:0 auto;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{background-color:var(--right-pane-background-color);border:none;margin:0;padding:0;cursor:ew-resize}.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)}";
+const dnnVerticalSplitviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";
 
 let DnnVerticalSplitview = class {
   constructor(hostRef) {
@@ -19,6 +19,7 @@ let DnnVerticalSplitview = class {
     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;
@@ -32,6 +33,7 @@ let DnnVerticalSplitview = class {
         this.rightWidth = fullWidth - newLeft;
         setTimeout(() => {
           panes.forEach(pane => pane.classList.remove("transition"));
+          this.splitter.classList.remove("transition");
         }, 300);
       });
     });
@@ -105,7 +107,10 @@ let DnnVerticalSplitview = class {
   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), style: { minWidth: `${this.splitterWidth.toString()}px` } }, h("slot", null)), h("div", { class: "right pane", style: {
+      } }, 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" }))));
   }

package/dist/esm/dnn-vertical-splitview.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-vertical-splitview.entry.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: stretch;\r\n  margin: 0 auto;\r\n\r\n  /** @prop --left-pane-background-color:  Allows customizing the left pane background-color */\r\n  --left-pane-background-color: transparent;\r\n\r\n  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n  --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n  background-color: var(--right-pane-background-color);\r\n  border: none;\r\n  margin:0;\r\n  padding:0;\r\n  cursor: ew-resize;\r\n}\r\n\r\n.pane{\r\n  overflow-y: auto;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  &.left{\r\n    background-color: var(--left-pane-background-color);\r\n  }\r\n  &.right{\r\n    background-color: var(--right-pane-background-color);\r\n  }\r\n}","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  /** 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      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        }, 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            style={{minWidth: `${this.splitterWidth.toString()}px`}}\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"],"version":3}
+{"file":"dnn-vertical-splitview.entry.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: stretch;\r\n  margin: 0 auto;\r\n  position: relative;\r\n\r\n  /** @prop --left-pane-background-color:  Allows customizing the left pane background-color */\r\n  --left-pane-background-color: transparent;\r\n\r\n  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n  --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n  border: none;\r\n  margin:0;\r\n  padding:0;\r\n  cursor: ew-resize;\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: transparent;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n}\r\n\r\n\r\n.pane{\r\n  overflow-y: auto;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  &.left{\r\n    background-color: var(--left-pane-background-color);\r\n  }\r\n  &.right{\r\n    background-color: var(--right-pane-background-color);\r\n    flex-grow: 1;\r\n  }\r\n}","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"],"version":3}

package/dist/esm/dnn.js

@@ -1,4 +1,4 @@
-import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-3e56049b.js';
+import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-b5a28c1d.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -121,7 +121,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1028],"hasChildren":[32]}]]],["dnn-checkbox",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[2,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"animating":[32],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleOtherCollapsibleHeightChanged"]]]]],["dnn-dropzone",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
+  return bootstrapLazy([["dnn-image-cropper",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1028],"hasChildren":[32]}]]],["dnn-checkbox",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[2,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
 });
 
 //# sourceMappingURL=dnn.js.map

package/dist/esm/{index-3e56049b.js → index-b5a28c1d.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'dnn';
-const BUILD = /* dnn */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: true, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: true, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: true, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: false, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* dnn */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: false, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: true, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: true, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: false, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 const Env = /* dnn */ {};
 
 let scopeId;
@@ -3030,4 +3030,4 @@ const Build = {
 
 export { BUILD as B, CSS as C, H, NAMESPACE as N, promiseResolve as a, bootstrapLazy as b, consoleDevInfo as c, doc as d, createEvent as e, Host as f, getElement as g, h, plt as p, registerInstance as r, win as w };
 
-//# sourceMappingURL=index-3e56049b.js.map
+//# sourceMappingURL=index-b5a28c1d.js.map