@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

package/dist/cjs/dnn-sort-icon.cjs.entry.js

@@ -2,40 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff4d89a.js');
+const index = require('./index-d53702a3.js');
 
-const dnnSortIconCss = ":host{display:inline-block}button{outline:none;border:none;margin:0;padding:0;background-color:transparent;outline:none;display:inline-block;line-height:1em;position:relative;top:0.25em}button svg{height:1.5em;width:auto;fill:var(--color, #888)}button.active svg{fill:var(--color-sorted, var(--dnn-color-primary, #028bff))}button:hover svg,button:focus svg{fill:var(--color-hover, var(--dnn-color-primary-light, #36a1ff))}";
+const dnnSortIconCss = ":host{--color:#888;--color-sorted:var(--dnn-color-primary, rgb(2,139,255));--color-hover:var(--dnn-color-primary-light, #36a1ff);display:inline-block}button{outline:none;border:none;margin:0;padding:0;background-color:transparent;outline:none;display:inline-block;line-height:1em;position:relative;top:0.25em}button svg{height:1.5em;width:auto;fill:var(--color)}button.active svg{fill:var(--color-sorted)}button:hover svg,button:focus svg{fill:var(--color-hover)}";
 
-let DnnSortIcon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sortChanged = index.createEvent(this, "sortChanged", 7);
-    /** Defines the current sort direction */
-    this.sortDirection = "none";
-  }
-  changeSort() {
-    switch (this.sortDirection) {
-      case "asc":
-        this.sortDirection = "desc";
-        break;
-      case "desc":
-        this.sortDirection = "asc";
-        break;
-      case "none":
-        this.sortDirection = "asc";
-        break;
-      default:
-        break;
-    }
-    this.sortChanged.emit(this.sortDirection);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { class: { "active": this.sortDirection != "none" }, onClick: () => this.changeSort() }, this.sortDirection == "none" &&
-      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, index.h("path", { d: "M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z" })), this.sortDirection == "asc" &&
-      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, index.h("path", { d: "M 0 7 H 12 L 6 0 Z" })), this.sortDirection == "desc" &&
-      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, index.h("path", { d: "M 0 9 H 12 L 6 16 Z" })))));
-  }
-};
+const DnnSortIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sortChanged = index.createEvent(this, "sortChanged", 7);
+    /** Defines the current sort direction */
+    this.sortDirection = "none";
+  }
+  changeSort() {
+    switch (this.sortDirection) {
+      case "asc":
+        this.sortDirection = "desc";
+        break;
+      case "desc":
+        this.sortDirection = "asc";
+        break;
+      case "none":
+        this.sortDirection = "asc";
+        break;
+      default:
+        break;
+    }
+    this.sortChanged.emit(this.sortDirection);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("button", { class: { "active": this.sortDirection != "none" }, onClick: () => this.changeSort() }, this.sortDirection == "none" &&
+      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, index.h("path", { d: "M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z" })), this.sortDirection == "asc" &&
+      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, index.h("path", { d: "M 0 7 H 12 L 6 0 Z" })), this.sortDirection == "desc" &&
+      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, index.h("path", { d: "M 0 9 H 12 L 6 16 Z" })))));
+  }
+};
 DnnSortIcon.style = dnnSortIconCss;
 
 exports.dnn_sort_icon = DnnSortIcon;

package/dist/cjs/dnn-sort-icon.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-sort-icon.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,waAAwa;;ICOlb,WAAW;EALxB;;;;IAOU,kBAAa,GAA4B,MAAM,CAAC;GA2CzD;EAtCS,UAAU;IAChB,QAAQ,IAAI,CAAC,aAAa;MACxB,KAAK,KAAK;QACR,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAC5B,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,MAAM;MACR;QACE,MAAM;KACT;IAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC3C;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,oBACE,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,IAAI,MAAM,EAAC,EAC/C,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAE/B,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3BA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAACA,kBAAM,CAAC,EAAC,wCAAwC,GAAQ,CAAM,EAE3H,IAAI,CAAC,aAAa,IAAI,KAAK;MAC1BA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAACA,kBAAM,CAAC,EAAC,oBAAoB,GAAQ,CAAM,EAEvG,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3BA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAACA,kBAAM,CAAC,EAAC,qBAAqB,GAAQ,CAAM,CAElG,CACJ,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-sort-icon/dnn-sort-icon.scss?tag=dnn-sort-icon&encapsulation=shadow","./src/components/dnn-sort-icon/dnn-sort-icon.tsx"],"sourcesContent":[":host {\r\n  /**\r\n  * @prop --color: Normal Color of the inactive sort icon.\r\n  * @prop --color-sorted: Color of the sorted sort icon.\r\n  * @prop --color-hover: Color of the icons when hovered.\r\n  */\r\n  display: inline-block;\r\n}\r\n\r\nbutton {\r\n  outline: none;\r\n  border: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  outline: none;\r\n  display: inline-block;\r\n  line-height: 1em;\r\n  position: relative;\r\n  top: 0.25em;\r\n  svg{\r\n    height: 1.5em;\r\n    width: auto;\r\n    fill: var(--color, #888);\r\n  }\r\n  &.active{\r\n    svg{\r\n      fill: var(--color-sorted, var(--dnn-color-primary, rgb(2,139,255)));\r\n    }\r\n  }\r\n  &:hover, &:focus{\r\n    svg{\r\n      fill: var(--color-hover, var(--dnn-color-primary-light, #36a1ff));\r\n    }\r\n  }\r\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-sort-icon',\r\n  styleUrl: 'dnn-sort-icon.scss',\r\n  shadow: true\r\n})\r\nexport class DnnSortIcon {\r\n  /** Defines the current sort direction */\r\n  @Prop() sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\r\n\r\n  /** Emitted when the sort is changed. */\r\n  @Event() sortChanged!: EventEmitter<\"asc\"|\"desc\"|\"none\">;\r\n  \r\n  private changeSort(): void {\r\n    switch (this.sortDirection) {\r\n      case \"asc\":\r\n        this.sortDirection = \"desc\";\r\n        break;\r\n      case \"desc\":\r\n        this.sortDirection = \"asc\";\r\n        break;\r\n      case \"none\":\r\n        this.sortDirection = \"asc\";\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    this.sortChanged.emit(this.sortDirection);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          class={{\"active\": this.sortDirection != \"none\"}}\r\n          onClick={() => this.changeSort()}\r\n        >\r\n          {this.sortDirection == \"none\" &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n          }\r\n          {this.sortDirection == \"asc\" &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z\"></path></svg>\r\n          }\r\n          {this.sortDirection == \"desc\" &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n          }\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dnn-sort-icon.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,idAAid;;MCO3d,WAAW;EALxB;;;;IAOU,kBAAa,GAA4B,MAAM,CAAC;GA2CzD;EAtCS,UAAU;IAChB,QAAQ,IAAI,CAAC,aAAa;MACxB,KAAK,KAAK;QACR,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAC5B,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,MAAM;MACR;QACE,MAAM;KACT;IAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC3C;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,oBACE,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,IAAI,MAAM,EAAC,EAC/C,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAE/B,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3BA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAACA,kBAAM,CAAC,EAAC,wCAAwC,GAAQ,CAAM,EAE3H,IAAI,CAAC,aAAa,IAAI,KAAK;MAC1BA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAACA,kBAAM,CAAC,EAAC,oBAAoB,GAAQ,CAAM,EAEvG,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3BA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAACA,kBAAM,CAAC,EAAC,qBAAqB,GAAQ,CAAM,CAElG,CACJ,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-sort-icon/dnn-sort-icon.scss?tag=dnn-sort-icon&encapsulation=shadow","./src/components/dnn-sort-icon/dnn-sort-icon.tsx"],"sourcesContent":[":host {\n  /**\n  * @prop --color: Normal Color of the inactive sort icon.\n  * @prop --color-sorted: Color of the sorted sort icon.\n  * @prop --color-hover: Color of the icons when hovered.\n  */\n  --color: #888;\n  --color-sorted: var(--dnn-color-primary, rgb(2,139,255));\n  --color-hover: var(--dnn-color-primary-light, #36a1ff);\n  \n  display: inline-block;\n}\n\nbutton {\n  outline: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  background-color: transparent;\n  outline: none;\n  display: inline-block;\n  line-height: 1em;\n  position: relative;\n  top: 0.25em;\n  svg{\n    height: 1.5em;\n    width: auto;\n    fill: var(--color);\n  }\n  &.active{\n    svg{\n      fill: var(--color-sorted);\n    }\n  }\n  &:hover, &:focus{\n    svg{\n      fill: var(--color-hover);\n    }\n  }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-sort-icon',\n  styleUrl: 'dnn-sort-icon.scss',\n  shadow: true\n})\nexport class DnnSortIcon {\n  /** Defines the current sort direction */\n  @Prop() sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\n\n  /** Emitted when the sort is changed. */\n  @Event() sortChanged!: EventEmitter<\"asc\"|\"desc\"|\"none\">;\n  \n  private changeSort(): void {\n    switch (this.sortDirection) {\n      case \"asc\":\n        this.sortDirection = \"desc\";\n        break;\n      case \"desc\":\n        this.sortDirection = \"asc\";\n        break;\n      case \"none\":\n        this.sortDirection = \"asc\";\n        break;\n      default:\n        break;\n    }\n\n    this.sortChanged.emit(this.sortDirection);\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\"active\": this.sortDirection != \"none\"}}\n          onClick={() => this.changeSort()}\n        >\n          {this.sortDirection == \"none\" &&\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z\"></path></svg>\n          }\n          {this.sortDirection == \"asc\" &&\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z\"></path></svg>\n          }\n          {this.sortDirection == \"desc\" &&\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 9 H 12 L 6 16 Z\"></path></svg>\n          }\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,28 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff4d89a.js');
+const index = require('./index-d53702a3.js');
 
 const dnnTabCss = "";
 
-let DnnTab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.visible = false;
-  }
-  /** Shows the tab. */
-  async show() {
-    this.visible = true;
-  }
-  /** Hides the modal */
-  async hide() {
-    this.visible = false;
-  }
-  render() {
-    return (index.h(index.Host, null, this.visible &&
-      index.h("slot", null)));
-  }
-};
+const DnnTab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.visible = false;
+  }
+  /** Shows the tab. */
+  async show() {
+    this.visible = true;
+  }
+  /** Hides the modal */
+  async hide() {
+    this.visible = false;
+  }
+  render() {
+    return (index.h(index.Host, null, this.visible &&
+      index.h("slot", null)));
+  }
+};
 DnnTab.style = dnnTabCss;
 
 exports.dnn_tab = DnnTab;

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

@@ -1 +1 @@
-{"file":"dnn-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,EAAE;;ICQP,MAAM;EALnB;;IASa,YAAO,GAAY,KAAK,CAAC;GAuBrC;;EAnBG,MAAM,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACvB;;EAID,MAAM,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACxB;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACA,IAAI,CAAC,OAAO;MACTD,qBAAa,CAEd,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-tab/dnn-tab.scss?tag=dnn-tab&encapsulation=shadow","./src/components/dnn-tab/dnn-tab.tsx"],"sourcesContent":["","import { Component, Host, h, Prop, State, Method } from \"@stencil/core\";\r\n\r\n/** Represents a single tab and must be used inside a dnn-tabs element. */\r\n@Component({\r\n    tag: 'dnn-tab',\r\n    styleUrl: 'dnn-tab.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTab {\r\n    /** Defines the tab title. */\r\n    @Prop() tabTitle!: string;\r\n\r\n    @State() visible: boolean = false;\r\n\r\n    /** Shows the tab. */\r\n    @Method()\r\n    async show(){\r\n        this.visible = true;\r\n    }\r\n\r\n    /** Hides the modal */\r\n    @Method()\r\n    async hide(){\r\n        this.visible = false;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host>\r\n                {this.visible &&\r\n                    <slot></slot>\r\n                }\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}
+{"file":"dnn-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,EAAE;;MCQP,MAAM;EALnB;;IASa,YAAO,GAAY,KAAK,CAAC;GAuBrC;;EAnBG,MAAM,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACvB;;EAID,MAAM,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACxB;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACA,IAAI,CAAC,OAAO;MACTD,qBAAa,CAEd,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-tab/dnn-tab.scss?tag=dnn-tab&encapsulation=shadow","./src/components/dnn-tab/dnn-tab.tsx"],"sourcesContent":["","import { Component, Host, h, Prop, State, Method } from \"@stencil/core\";\r\n\r\n/** Represents a single tab and must be used inside a dnn-tabs element. */\r\n@Component({\r\n    tag: 'dnn-tab',\r\n    styleUrl: 'dnn-tab.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTab {\r\n    /** Defines the tab title. */\r\n    @Prop() tabTitle!: string;\r\n\r\n    @State() visible: boolean = false;\r\n\r\n    /** Shows the tab. */\r\n    @Method()\r\n    async show(){\r\n        this.visible = true;\r\n    }\r\n\r\n    /** Hides the modal */\r\n    @Method()\r\n    async hide(){\r\n        this.visible = false;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host>\r\n                {this.visible &&\r\n                    <slot></slot>\r\n                }\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}

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

@@ -2,49 +2,49 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff4d89a.js');
+const index = require('./index-d53702a3.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:-ms-flexbox;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;-webkit-box-shadow:0 0 2px 2px var(--color-focus);box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
 
-let DnnTabs = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tabTitles = [];
-    this.selectedTabTitle = "";
-  }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      this.updateTitles();
-      this.showFirstTab();
-    });
-  }
-  getTabs() {
-    return this.component.shadowRoot.querySelector("slot").assignedElements();
-  }
-  updateTitles() {
-    const tabs = this.getTabs();
-    tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);
-  }
-  showFirstTab() {
-    const tab = this.getTabs()[0];
-    tab.show();
-    this.selectedTabTitle = tab.tabTitle;
-  }
-  showTab(tabTitle) {
-    const tabs = this.getTabs();
-    tabs.forEach(tab => {
-      if (tab.tabTitle == tabTitle) {
-        tab.show();
-        return;
-      }
-      tab.hide();
-    });
-    this.selectedTabTitle = tabTitle;
-  }
-  render() {
-    return (index.h(index.Host, { ref: el => this.component = el }, index.h("div", { class: "tabTitles" }, this.tabTitles.map(tabTitle => index.h("button", { class: this.selectedTabTitle == tabTitle ? "visible" : "", onClick: () => this.showTab(tabTitle) }, tabTitle))), index.h("div", { class: "currentTab" }, index.h("slot", null))));
-  }
-};
+const DnnTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tabTitles = [];
+    this.selectedTabTitle = "";
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      this.updateTitles();
+      this.showFirstTab();
+    });
+  }
+  getTabs() {
+    return this.component.shadowRoot.querySelector("slot").assignedElements();
+  }
+  updateTitles() {
+    const tabs = this.getTabs();
+    tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);
+  }
+  showFirstTab() {
+    const tab = this.getTabs()[0];
+    tab.show();
+    this.selectedTabTitle = tab.tabTitle;
+  }
+  showTab(tabTitle) {
+    const tabs = this.getTabs();
+    tabs.forEach(tab => {
+      if (tab.tabTitle == tabTitle) {
+        tab.show();
+        return;
+      }
+      tab.hide();
+    });
+    this.selectedTabTitle = tabTitle;
+  }
+  render() {
+    return (index.h(index.Host, { ref: el => this.component = el }, index.h("div", { class: "tabTitles" }, this.tabTitles.map(tabTitle => index.h("button", { class: this.selectedTabTitle == tabTitle ? "visible" : "", onClick: () => this.showTab(tabTitle) }, tabTitle))), index.h("div", { class: "currentTab" }, index.h("slot", null))));
+  }
+};
 DnnTabs.style = dnnTabsCss;
 
 exports.dnn_tabs = DnnTabs;

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

@@ -1 +1 @@
-{"file":"dnn-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,uyBAAuyB;;ICO7yB,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,QACIA,QAACC,UAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChCD,iBAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxBA,oBACI,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,EACNA,iBAAK,KAAK,EAAC,YAAY,IACnBA,qBAAa,CACX,CACH,EACT;GACL;;;;;;","names":["h","Host"],"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}
+{"file":"dnn-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,uyBAAuyB;;MCO7yB,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,QACIA,QAACC,UAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChCD,iBAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxBA,oBACI,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,EACNA,iBAAK,KAAK,EAAC,YAAY,IACnBA,qBAAa,CACX,CACH,EACT;GACL;;;;;;","names":["h","Host"],"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/cjs/dnn-toggle.cjs.entry.js

@@ -2,34 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff4d89a.js');
+const index = require('./index-d53702a3.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;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);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;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;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}";
+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;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);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;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--handle-border-radius, var(--dnn-controls-radius, 50%));position:absolute;top:calc(50% - 0.5em);left:2px}";
 
-let DnnToggle = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checkChanged = index.createEvent(this, "checkChanged", 7);
-    /** If 'true' the toggle is checked (on). */
-    this.checked = false;
-    /** If 'true' the toggle is not be interacted with. */
-    this.disabled = false;
-  }
-  checkedChanged(isChecked) {
-    this.checkChanged.emit({ checked: isChecked });
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { disabled: this.disabled, class: { 'checked': this.checked }, onClick: () => {
-        if (!this.disabled) {
-          this.checked = !this.checked;
-        }
-      } }, index.h("div", { class: "handle" }))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "checked": ["checkedChanged"]
-  }; }
-};
+const DnnToggle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checkChanged = index.createEvent(this, "checkChanged", 7);
+    /** If 'true' the toggle is checked (on). */
+    this.checked = false;
+    /** If 'true' the toggle is not be interacted with. */
+    this.disabled = false;
+  }
+  checkedChanged(isChecked) {
+    this.checkChanged.emit({ checked: isChecked });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("button", { disabled: this.disabled, class: { 'checked': this.checked }, onClick: () => {
+        if (!this.disabled) {
+          this.checked = !this.checked;
+        }
+      } }, index.h("div", { class: "handle" }))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["checkedChanged"]
+  }; }
+};
 DnnToggle.style = dnnToggleCss;
 
 exports.dnn_toggle = DnnToggle;

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

@@ -1 +1 @@
-{"file":"dnn-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,g9BAAg9B;;ICSx9B,SAAS;EALtB;;;;IAU2B,YAAO,GAAG,KAAK,CAAC;;IAG/B,aAAQ,GAAG,KAAK,CAAC;GAyB5B;EAnBG,cAAc,CAAC,SAAkB;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,CAAC;GAChD;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,oBAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,EAC7D,OAAO,EAAE;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAChC;OACJ,IAEDA,iBAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,EACT;GACL;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","./src/components/dnn-toggle/dnn-toggle.tsx"],"sourcesContent":[":host {\r\n    /**\r\n     * @prop --background: Background of the toggle.\r\n     * @prop --background-checked: Background of the toggle when checked.\r\n     * @prop --handle-background:  Background of the handle.\r\n     * @prop --handle-background-checked:  Background of the handle when checked.\r\n     * @prop --border-radius: The radius of the background borders.\r\n     * @prop --handle-border-radius: The radius of the handle.\r\n    */\r\n\r\n    display: inline-block;\r\n    outline: none;\r\n    cursor: pointer;\r\n}\r\n\r\nbutton {\r\n    height: 1.5em;\r\n    width: 2.5em;\r\n    outline: none;\r\n    background-color: var(--background, #888);\r\n    border: 0;\r\n    border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\r\n    padding: 0.1em;\r\n    position: relative;\r\n    margin: 0;\r\n    transition: background-color 300ms ease-in-out;\r\n    position: relative;\r\n    cursor: pointer;\r\n    &:hover, &:focus{\r\n        box-shadow: 0 0 2px 2px var(--dnn-color-primary);\r\n    }\r\n    &.checked{\r\n        background-color: var(--background-checked, var(--dnn-color-primary, blue));\r\n        .handle{\r\n            left: calc(1em + 4px);\r\n        }\r\n    }\r\n    &:disabled{\r\n        opacity: 0.5;\r\n        cursor: not-allowed;\r\n        box-shadow: none;\r\n    }\r\n    .handle{\r\n        transition: all 300ms ease-in-out;\r\n        background-color:white;\r\n        width: 1em;\r\n        height: 1em;\r\n        border-radius: var(--dnn-controls-radius, 50%);\r\n        position: absolute;\r\n        top: calc(50% - 0.5em);\r\n        left: 2px;\r\n    }\r\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\r\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\r\n\r\n\r\n@Component({\r\n    tag: \"dnn-toggle\",\r\n    styleUrl: \"dnn-toggle.scss\",\r\n    shadow: true\r\n})\r\nexport class DnnToggle {\r\n\r\n    @Element() element: HTMLDnnToggleElement;\r\n\r\n    /** If 'true' the toggle is checked (on). */\r\n    @Prop({mutable: true}) checked = false;\r\n\r\n    /** If 'true' the toggle is not be interacted with. */\r\n    @Prop() disabled = false;\r\n\r\n    /** Fires when the toggle changed */\r\n    @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\r\n\r\n    @Watch(\"checked\")\r\n    checkedChanged(isChecked: boolean){\r\n        this.checkChanged.emit({checked: isChecked});\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host>\r\n                <button disabled={this.disabled} class={{'checked': this.checked}}\r\n                    onClick={() => {\r\n                        if (!this.disabled) {\r\n                            this.checked = !this.checked;\r\n                        }\r\n                    }}\r\n                >\r\n                    <div class=\"handle\"></div>\r\n                </button>\r\n            </Host>\r\n        );\r\n    }\r\n}\r\n"],"version":3}
+{"file":"dnn-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,6+BAA6+B;;MCSr/B,SAAS;EALtB;;;;IAU2B,YAAO,GAAG,KAAK,CAAC;;IAG/B,aAAQ,GAAG,KAAK,CAAC;GAyB5B;EAnBG,cAAc,CAAC,SAAkB;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,CAAC;GAChD;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,oBAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,EAC7D,OAAO,EAAE;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAChC;OACJ,IAEDA,iBAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,EACT;GACL;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","./src/components/dnn-toggle/dnn-toggle.tsx"],"sourcesContent":[":host {\n    /**\n     * @prop --background: Background of the toggle.\n     * @prop --background-checked: Background of the toggle when checked.\n     * @prop --handle-background:  Background of the handle.\n     * @prop --handle-background-checked:  Background of the handle when checked.\n     * @prop --border-radius: The radius of the background borders.\n     * @prop --handle-border-radius: The radius of the handle.\n    */\n\n    display: inline-block;\n    outline: none;\n    cursor: pointer;\n}\n\nbutton {\n    height: 1.5em;\n    width: 2.5em;\n    outline: none;\n    background-color: var(--background, #888);\n    border: 0;\n    border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\n    padding: 0.1em;\n    position: relative;\n    margin: 0;\n    transition: background-color 300ms ease-in-out;\n    position: relative;\n    cursor: pointer;\n    &:hover, &:focus{\n        box-shadow: 0 0 2px 2px var(--dnn-color-primary);\n    }\n    &.checked{\n        background-color: var(--background-checked, var(--dnn-color-primary, blue));\n        .handle{\n            left: calc(1em + 4px);\n        }\n    }\n    &:disabled{\n        opacity: 0.5;\n        cursor: not-allowed;\n        box-shadow: none;\n    }\n    .handle{\n        transition: all 300ms ease-in-out;\n        background-color:white;\n        width: 1em;\n        height: 1em;\n        border-radius: var(--handle-border-radius, var(--dnn-controls-radius, 50%));\n        position: absolute;\n        top: calc(50% - 0.5em);\n        left: 2px;\n    }\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\n\n\n@Component({\n    tag: \"dnn-toggle\",\n    styleUrl: \"dnn-toggle.scss\",\n    shadow: true\n})\nexport class DnnToggle {\n\n    @Element() element: HTMLDnnToggleElement;\n\n    /** If 'true' the toggle is checked (on). */\n    @Prop({mutable: true}) checked = false;\n\n    /** If 'true' the toggle is not be interacted with. */\n    @Prop() disabled = false;\n\n    /** Fires when the toggle changed */\n    @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\n\n    @Watch(\"checked\")\n    checkedChanged(isChecked: boolean){\n        this.checkChanged.emit({checked: isChecked});\n    }\n\n    render() {\n        return (\n            <Host>\n                <button disabled={this.disabled} class={{'checked': this.checked}}\n                    onClick={() => {\n                        if (!this.disabled) {\n                            this.checked = !this.checked;\n                        }\n                    }}\n                >\n                    <div class=\"handle\"></div>\n                </button>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -2,65 +2,65 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff4d89a.js');
+const index = require('./index-d53702a3.js');
 
 const dnnTreeviewItemCss = ":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";
 
-let DnnTreeviewItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.userExpanded = index.createEvent(this, "userExpanded", 3);
-    this.userCollapsed = index.createEvent(this, "userCollapsed", 3);
-    /** Defines if the current node is expanded.  */
-    this.expanded = false;
-    /** Manages state for whether or not item has children. */
-    this.hasChildren = false;
-  }
-  /** Watch expanded Prop */
-  watchExpanded(expanded) {
-    if (expanded) {
-      this.expander.classList.add("expanded");
-      this.collapsible.expanded = true;
-      return;
-    }
-    this.expander.classList.remove("expanded");
-    this.collapsible.expanded = false;
-  }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      const child = this.childElement.children[0];
-      const count = child.assignedElements().length;
-      if (count > 0) {
-        this.hasChildren = true;
-      }
-      if (this.expanded) {
-        this.expander.classList.add("expanded");
-        this.collapsible.expanded = false;
-        setTimeout(() => {
-          this.collapsible.expanded = true;
-        }, 300);
-      }
-    });
-  }
-  toggleCollapse() {
-    this.expanded = !this.expanded;
-    if (this.expanded) {
-      this.expander.classList.add("expanded");
-      this.userExpanded.emit();
-      return;
-    }
-    this.expander.classList.remove("expanded");
-    this.userCollapsed.emit();
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
-      index.h("button", { onClick: () => this.toggleCollapse() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M10 17l5-5-5-5v10z" }), index.h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), index.h("div", { class: "item" }, index.h("div", { class: "item-slot" }, index.h("slot", null)), index.h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, index.h("div", { ref: el => this.childElement = el }, index.h("slot", { name: "children" }))))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "expanded": ["watchExpanded"]
-  }; }
-};
+const DnnTreeviewItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.userExpanded = index.createEvent(this, "userExpanded", 3);
+    this.userCollapsed = index.createEvent(this, "userCollapsed", 3);
+    /** Defines if the current node is expanded.  */
+    this.expanded = false;
+    /** Manages state for whether or not item has children. */
+    this.hasChildren = false;
+  }
+  /** Watch expanded Prop */
+  watchExpanded(expanded) {
+    if (expanded) {
+      this.expander.classList.add("expanded");
+      this.collapsible.expanded = true;
+      return;
+    }
+    this.expander.classList.remove("expanded");
+    this.collapsible.expanded = false;
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      const child = this.childElement.children[0];
+      const count = child.assignedElements().length;
+      if (count > 0) {
+        this.hasChildren = true;
+      }
+      if (this.expanded) {
+        this.expander.classList.add("expanded");
+        this.collapsible.expanded = false;
+        setTimeout(() => {
+          this.collapsible.expanded = true;
+        }, 300);
+      }
+    });
+  }
+  toggleCollapse() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      this.expander.classList.add("expanded");
+      this.userExpanded.emit();
+      return;
+    }
+    this.expander.classList.remove("expanded");
+    this.userCollapsed.emit();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
+      index.h("button", { onClick: () => this.toggleCollapse() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M10 17l5-5-5-5v10z" }), index.h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), index.h("div", { class: "item" }, index.h("div", { class: "item-slot" }, index.h("slot", null)), index.h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, index.h("div", { ref: el => this.childElement = el }, index.h("slot", { name: "children" }))))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "expanded": ["watchExpanded"]
+  }; }
+};
 DnnTreeviewItem.style = dnnTreeviewItemCss;
 
 exports.dnn_treeview_item = DnnTreeviewItem;

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

@@ -1 +1 @@
-{"file":"dnn-treeview-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,u6BAAu6B;;ICOr7B,eAAe;EAL5B;;;;;IAYwC,aAAQ,GAAY,KAAK,CAAC;;IASvD,gBAAW,GAAY,KAAK,CAAC;GAyEvC;;EArEC,aAAa,CAAC,QAAiB;IAC7B,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;MACjC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;GACnC;EAMD,gBAAgB;IACd,qBAAqB,CAAC;MACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;MAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;MAC7C,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,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;MACzB,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACfA,oBACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,oBAAoB,GAAE,EAAAA,kBAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACNA,iBAAK,KAAK,EAAC,MAAM,IACfA,iBAAK,KAAK,EAAC,WAAW,IACpBA,qBAAa,CACT,EACNA,6BAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxEA,iBAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IACpCA,kBAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;;;;","names":["h","Host"],"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: visible;\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    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    min-height: 24px;\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, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-treeview-item',\r\n  styleUrl: 'dnn-treeview-item.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n  \r\n  private expander!: HTMLDivElement;\r\n\r\n  @Element() el!: HTMLDnnTreeviewItemElement;\r\n  \r\n  /** Defines if the current node is expanded.  */\r\n  @Prop({mutable: true, reflect: true}) expanded: boolean = false;\r\n\r\n  /** Fires when the user expands a node. */\r\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n  /** Fires when the user collapses a node. */\r\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n  /** Manages state for whether or not item has children. */\r\n  @State() hasChildren: boolean = false;\r\n\r\n  /** Watch expanded Prop */\r\n  @Watch('expanded')\r\n  watchExpanded(expanded: boolean) {\r\n    if (expanded) {\r\n      this.expander.classList.add(\"expanded\");\r\n      this.collapsible.expanded = true;\r\n      return;\r\n    }\r\n    \r\n    this.expander.classList.remove(\"expanded\");\r\n    this.collapsible.expanded = false;\r\n  }\r\n      \r\n  \r\n  private childElement!: HTMLDivElement;\r\n  private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const child = this.childElement.children[0] as HTMLSlotElement;\r\n      const count = child.assignedElements().length\r\n      if (count > 0){\r\n        this.hasChildren = true;\r\n      }\r\n      if (this.expanded){\r\n        this.expander.classList.add(\"expanded\");\r\n        this.collapsible.expanded = false;\r\n        setTimeout(() => {\r\n          this.collapsible.expanded = true;\r\n        }, 300);\r\n      }\r\n    });\r\n  }\r\n\r\n  private toggleCollapse(): void {\r\n    this.expanded = !this.expanded;\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      this.userExpanded.emit();\r\n      return;\r\n    }\r\n\r\n    this.expander.classList.remove(\"expanded\");\r\n    this.userCollapsed.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"expander\" ref={el => this.expander = el}>\r\n          {this.hasChildren &&\r\n            <button\r\n              onClick={() => this.toggleCollapse()}\r\n            >\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"item\">\r\n          <div class=\"item-slot\">\r\n            <slot></slot>\r\n          </div>\r\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n            <div ref={el => this.childElement = el}>\r\n              <slot name=\"children\"></slot>\r\n            </div>\r\n          </dnn-collapsible>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n  state: \"expanded\" | \"collapsed\";\r\n  height: number;\r\n}"],"version":3}
+{"file":"dnn-treeview-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,u6BAAu6B;;MCWr7B,eAAe;EAL5B;;;;;IAYwC,aAAQ,GAAY,KAAK,CAAC;;IASvD,gBAAW,GAAY,KAAK,CAAC;GAyEvC;;EArEC,aAAa,CAAC,QAAiB;IAC7B,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;MACjC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;GACnC;EAMD,gBAAgB;IACd,qBAAqB,CAAC;MACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;MAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;MAC7C,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,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;MACzB,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACfA,oBACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,oBAAoB,GAAE,EAAAA,kBAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACNA,iBAAK,KAAK,EAAC,MAAM,IACfA,iBAAK,KAAK,EAAC,WAAW,IACpBA,qBAAa,CACT,EACNA,6BAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxEA,iBAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,IACpCA,kBAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;;;;","names":["h","Host"],"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 {\n  display: flex;\n  overflow: visible;\n}\n.expander{\n  width: 24px;\n  height: 24px;\n  button{\n    transition: all 150ms ease-in-out;\n    background-color:transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    height: 1em;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    top: 2px;\n    svg{\n      :first-child{\n        transition: all 150ms ease-in-out;\n        fill: white;\n        stroke: black\n      }\n    }\n  }\n  &.expanded{\n    button{\n      transform: rotate(45deg);\n      svg{\n        :first-child{\n          fill: black;\n          stroke: black;\n        }\n      }\n    }\n  }\n}\ndiv.item{\n  .item-slot{\n    display: flex;\n    align-items: center;\n    gap: 0.25em;\n    min-height: 24px;\n  }\n  div.children{\n    overflow: hidden;\n    height:0;\n    transition: all 150ms ease-in-out;\n  }\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter, Watch } from '@stencil/core';\n\n/** \n * @slot - The content of this node.\n * @slot children - The content nested under this node.\n*/\n@Component({\n  tag: 'dnn-treeview-item',\n  styleUrl: 'dnn-treeview-item.scss',\n  shadow: true,\n})\nexport class DnnTreeviewItem {\n  \n  private expander!: HTMLDivElement;\n\n  @Element() el!: HTMLDnnTreeviewItemElement;\n  \n  /** Defines if the current node is expanded.  */\n  @Prop({mutable: true, reflect: true}) expanded: boolean = false;\n\n  /** Fires when the user expands a node. */\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\n\n  /** Fires when the user collapses a node. */\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\n\n  /** Manages state for whether or not item has children. */\n  @State() hasChildren: boolean = false;\n\n  /** Watch expanded Prop */\n  @Watch('expanded')\n  watchExpanded(expanded: boolean) {\n    if (expanded) {\n      this.expander.classList.add(\"expanded\");\n      this.collapsible.expanded = true;\n      return;\n    }\n    \n    this.expander.classList.remove(\"expanded\");\n    this.collapsible.expanded = false;\n  }\n      \n  \n  private childElement!: HTMLDivElement;\n  private collapsible!: HTMLDnnCollapsibleElement;\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      const child = this.childElement.children[0] as HTMLSlotElement;\n      const count = child.assignedElements().length\n      if (count > 0){\n        this.hasChildren = true;\n      }\n      if (this.expanded){\n        this.expander.classList.add(\"expanded\");\n        this.collapsible.expanded = false;\n        setTimeout(() => {\n          this.collapsible.expanded = true;\n        }, 300);\n      }\n    });\n  }\n\n  private toggleCollapse(): void {\n    this.expanded = !this.expanded;\n    if (this.expanded){\n      this.expander.classList.add(\"expanded\");\n      this.userExpanded.emit();\n      return;\n    }\n\n    this.expander.classList.remove(\"expanded\");\n    this.userCollapsed.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"expander\" ref={el => this.expander = el}>\n          {this.hasChildren &&\n            <button\n              onClick={() => this.toggleCollapse()}\n            >\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>\n            </button>\n          }\n        </div>\n        <div class=\"item\">\n          <div class=\"item-slot\">\n            <slot></slot>\n          </div>\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\n            <div ref={el => this.childElement = el}>\n              <slot name=\"children\"></slot>\n            </div>\n          </dnn-collapsible>\n          </div>\n      </Host>\n    );\n  }\n}\n\nexport interface ExpandedToggledEvent{\n  state: \"expanded\" | \"collapsed\";\n  height: number;\n}"],"version":3}