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

package/dist/dnn/dnn-tab.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, f as Host } from './index-6c0764e5.js';
+import { r as registerInstance, h, f as Host } from './index-3e56049b.js';
 
 const dnnTabCss = "";
 

package/dist/dnn/dnn-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, f as Host } from './index-6c0764e5.js';
+import { r as registerInstance, h, f as Host } from './index-3e56049b.js';
 
 const dnnTabsCss = ":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
 
@@ -9,8 +9,10 @@ let DnnTabs = class {
     this.selectedTabTitle = "";
   }
   componentDidLoad() {
-    this.updateTitles();
-    this.showFirstTab();
+    requestAnimationFrame(() => {
+      this.updateTitles();
+      this.showFirstTab();
+    });
   }
   getTabs() {
     return this.component.shadowRoot.querySelector("slot").assignedElements();

package/dist/dnn/dnn-tabs.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-tabs.entry.esm.js","mappings":";;AAAA,MAAM,UAAU,GAAG,iuBAAiuB;;ICOvuB,OAAO;EALpB;;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAsD1C;EApDG,gBAAgB;IACZ,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,YAAY,EAAE,CAAC;GACvB;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;GACpG;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC3E;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;GACxC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG;MACZ,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;KACd,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;GACpC;EAED,MAAM;IACF,QACI,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxB,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,GAAG,SAAS,GAAE,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC,EACN,WAAK,KAAK,EAAC,YAAY,IACnB,eAAa,CACX,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","./src/components/dnn-tabs/dnn-tabs.tsx"],"sourcesContent":[":host {\r\n    /**\r\n    * @prop --color-background: The color of the inactive tabs.\r\n    * @prop --color-text: The color of the text for inactive tabs.\r\n    * @prop --color-visible: The color of the active tab.\r\n    * @prop --color-visible-text: The color of the text for the active tab.\r\n    * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n    */\r\n    display: block;\r\n    --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n    --color-text: var(--dnn-color-secondary-contrast, #333);\r\n    --color-visible: var(--dnn-color-primary, #3792ED);\r\n    --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n    --color-focus: var(--dnn-color-primary, #3792ed);\r\n  }\r\n\r\n  .tabTitles{\r\n      display: flex;\r\n      background-color: var(--color-background);\r\n      color: var(--color-text);\r\n      button{\r\n          padding: 0.5rem 1rem;\r\n          border: 0;\r\n          margin: 0;\r\n          background-color: transparent;\r\n          &.visible{\r\n              background-color: var(--color-visible);\r\n              color: var(--color-bisible-text);\r\n          }\r\n          &:focus, &:hover{\r\n            outline: none;\r\n            box-shadow: 0 0 2px 2px var(--color-focus);\r\n          }\r\n      }\r\n  }\r\n\r\n  .currentTab{\r\n      border: 1px solid var(--color-background);\r\n      padding: 1rem;\r\n  }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        this.updateTitles();\r\n        this.showFirstTab();\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}
+{"file":"dnn-tabs.entry.esm.js","mappings":";;AAAA,MAAM,UAAU,GAAG,iuBAAiuB;;ICOvuB,OAAO;EALpB;;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAwD1C;EAtDG,gBAAgB;IACZ,qBAAqB,CAAC;MAClB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB,CAAC,CAAC;GACN;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;GACpG;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC3E;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;GACxC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG;MACZ,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;KACd,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;GACpC;EAED,MAAM;IACF,QACI,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxB,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,GAAG,SAAS,GAAE,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC,EACN,WAAK,KAAK,EAAC,YAAY,IACnB,eAAa,CACX,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","./src/components/dnn-tabs/dnn-tabs.tsx"],"sourcesContent":[":host {\r\n    /**\r\n    * @prop --color-background: The color of the inactive tabs.\r\n    * @prop --color-text: The color of the text for inactive tabs.\r\n    * @prop --color-visible: The color of the active tab.\r\n    * @prop --color-visible-text: The color of the text for the active tab.\r\n    * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n    */\r\n    display: block;\r\n    --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n    --color-text: var(--dnn-color-secondary-contrast, #333);\r\n    --color-visible: var(--dnn-color-primary, #3792ED);\r\n    --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n    --color-focus: var(--dnn-color-primary, #3792ed);\r\n  }\r\n\r\n  .tabTitles{\r\n      display: flex;\r\n      background-color: var(--color-background);\r\n      color: var(--color-text);\r\n      button{\r\n          padding: 0.5rem 1rem;\r\n          border: 0;\r\n          margin: 0;\r\n          background-color: transparent;\r\n          &.visible{\r\n              background-color: var(--color-visible);\r\n              color: var(--color-bisible-text);\r\n          }\r\n          &:focus, &:hover{\r\n            outline: none;\r\n            box-shadow: 0 0 2px 2px var(--color-focus);\r\n          }\r\n      }\r\n  }\r\n\r\n  .currentTab{\r\n      border: 1px solid var(--color-background);\r\n      padding: 1rem;\r\n  }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        requestAnimationFrame(() => {\r\n            this.updateTitles();\r\n            this.showFirstTab();\r\n        });\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}

package/dist/dnn/dnn-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6c0764e5.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
 
 const dnnToggleCss = ":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none}button .handle{transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--dnn-controls-radius, 50%);position:absolute;top:calc(50% - 0.5em);left:2px}";
 

package/dist/dnn/dnn-treeview-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-6c0764e5.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-3e56049b.js';
 
 const dnnTreeviewItemCss = ":host{display:flex;overflow:hidden}.expander{width:24px;height:24px}.expander button{transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;outline:none;height:1em;display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:flex;align-items:center;gap:0.25em}div.item div.children{overflow:hidden;height:0;transition:all 150ms ease-in-out}";
 
@@ -10,18 +10,20 @@ let DnnTreeviewItem = class {
     this.hasChildren = false;
   }
   componentDidLoad() {
-    const children = this.childrenElement.children[0];
-    const count = children.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);
-    }
+    requestAnimationFrame(() => {
+      const children = this.childrenElement.children[0];
+      const count = children.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;

package/dist/dnn/dnn-treeview-item.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-treeview-item.entry.esm.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,2oBAA2oB;;ICOzpB,eAAe;EAL5B;;;IAYyB,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;QACT,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;OAClC,EAAE,GAAG,CAAC,CAAC;KACT;GACF;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;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACf,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE,EAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACN,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,EACN,uBAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxE,WAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAE,IACvC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","./src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  overflow: hidden;\r\n}\r\n.expander{\r\n  width: 24px;\r\n  height: 24px;\r\n  button{\r\n    transition: all 150ms ease-in-out;\r\n    background-color:transparent;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    outline: none;\r\n    height: 1em;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    top: 2px;\r\n    svg{\r\n      :first-child{\r\n        transition: all 150ms ease-in-out;\r\n        fill: white;\r\n        stroke: black\r\n      }\r\n    }\r\n  }\r\n  &.expanded{\r\n    button{\r\n      transform: rotate(45deg);\r\n      svg{\r\n        :first-child{\r\n          fill: black;\r\n          stroke: black;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndiv.item{\r\n  .item-slot{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.25em;\r\n  }\r\n  div.children{\r\n    overflow: hidden;\r\n    height:0;\r\n    transition: all 150ms ease-in-out;\r\n  }\r\n}","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.entry.esm.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,2oBAA2oB;;ICOzpB,eAAe;EAL5B;;;IAYyB,aAAQ,GAAY,KAAK,CAAC;IAExC,gBAAW,GAAY,KAAK,CAAC;GAwDvC;EAnDC,gBAAgB;IACd,qBAAqB,CAAC;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;MACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;MAChD,IAAI,KAAK,GAAG,CAAC,EAAC;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;OACzB;MACD,IAAI,IAAI,CAAC,QAAQ,EAAC;QAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;QAClC,UAAU,CAAC;UACT,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;SAClC,EAAE,GAAG,CAAC,CAAC;OACT;KACF,CAAC,CAAC;GACJ;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;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACf,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE,EAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACN,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,EACN,uBAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxE,WAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAE,IACvC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","./src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  overflow: hidden;\r\n}\r\n.expander{\r\n  width: 24px;\r\n  height: 24px;\r\n  button{\r\n    transition: all 150ms ease-in-out;\r\n    background-color:transparent;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    outline: none;\r\n    height: 1em;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    top: 2px;\r\n    svg{\r\n      :first-child{\r\n        transition: all 150ms ease-in-out;\r\n        fill: white;\r\n        stroke: black\r\n      }\r\n    }\r\n  }\r\n  &.expanded{\r\n    button{\r\n      transform: rotate(45deg);\r\n      svg{\r\n        :first-child{\r\n          fill: black;\r\n          stroke: black;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndiv.item{\r\n  .item-slot{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.25em;\r\n  }\r\n  div.children{\r\n    overflow: hidden;\r\n    height:0;\r\n    transition: all 150ms ease-in-out;\r\n  }\r\n}","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    requestAnimationFrame(() => {\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\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}

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

@@ -0,0 +1,119 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-3e56049b.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}";
+
+let DnnVerticalOverflowMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showDropdownButton = false;
+    this.showDropdownMenu = false;
+    this.previousMenuWidth = 0;
+  }
+  componentDidRender() {
+    requestAnimationFrame(() => {
+      this.moveAllSlottedItemsIntoMenu();
+      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);
+    });
+  }
+  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 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;
+      }
+      this.dropdown.prepend(lastItem);
+      this.moveItemsToDropDownIfNecessery();
+    }
+  }
+  moveItemsToMenuIfPossible() {
+    if (this.dropdown == undefined || !this.dropdown.hasChildNodes()) {
+      return;
+    }
+    const menuItems = Array.from(this.menu.children);
+    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]);
+    if (neededWidth < availableWidth) {
+      const firstItem = this.dropdown.children[0];
+      this.menu.appendChild(firstItem);
+      if (!this.dropdown.hasChildNodes()) {
+        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.children);
+      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 })))));
+  }
+  get element() { return getElement(this); }
+};
+DnnVerticalOverflowMenu.style = dnnVerticalOverflowMenuCss;
+
+export { DnnVerticalOverflowMenu as dnn_vertical_overflow_menu };
+
+//# sourceMappingURL=dnn-vertical-overflow-menu.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dnn-vertical-overflow-menu.entry.esm.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}

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

@@ -0,0 +1,119 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
+import { g as getMovementFromEvent } from './mouseUtilities-817973b4.js';
+
+const dnnVerticalSplitviewCss = ":host{display:flex;align-items:stretch;margin:0 auto}button{background-color:transparent;border:none;margin:0;padding:0;cursor:ew-resize}.pane{height:100%;overflow-y:auto}.pane.transition{transition:all 300ms ease-in-out}";
+
+let DnnVerticalSplitview = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.widthChanged = createEvent(this, "widthChanged", 7);
+    /** 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"));
+      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"));
+        }, 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: "pane", style: {
+        width: `${this.leftWidth}px`,
+        height: "100%",
+      } }, 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: "pane", style: {
+        width: `${this.rightWidth}px`,
+      } }, h("slot", { name: "right" }))));
+  }
+  get element() { return getElement(this); }
+};
+DnnVerticalSplitview.style = dnnVerticalSplitviewCss;
+
+export { DnnVerticalSplitview as dnn_vertical_splitview };
+
+//# sourceMappingURL=dnn-vertical-splitview.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dnn-vertical-splitview.entry.esm.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\r\nbutton{\r\n  background-color: transparent;\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  height: 100%;\r\n  overflow-y: auto;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\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@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=\"pane\" style={{\r\n            width: `${this.leftWidth}px`,\r\n            height:\"100%\",\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=\"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/dnn/dnn.esm.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-6c0764e5.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-3e56049b.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-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[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]}]]]], 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"],"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);
 });
 
 //# sourceMappingURL=dnn.esm.js.map

package/dist/dnn/{index-6c0764e5.js → index-3e56049b.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: false, 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: 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 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-6c0764e5.js.map
+//# sourceMappingURL=index-3e56049b.js.map