@dnncommunity/dnn-elements 0.13.0-beta.1

package/dist/collection/components/dnn-tabs/dnn-tabs.css

@@ -0,0 +1,40 @@
+:host {
+  /**
+  * @prop --color-background: The color of the inactive tabs.
+  * @prop --color-text: The color of the text for inactive tabs.
+  * @prop --color-visible: The color of the active tab.
+  * @prop --color-visible-text: The color of the text for the active tab.
+  * @prop --color-focus: outline color when hovering or pre-selecting a tab.
+  */
+  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;
+}

package/dist/collection/components/dnn-tabs/dnn-tabs.js

@@ -0,0 +1,53 @@
+import { Component, Host, h, State } from "@stencil/core";
+export class DnnTabs {
+  constructor() {
+    this.tabTitles = [];
+    this.selectedTabTitle = "";
+  }
+  componentDidLoad() {
+    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 (h(Host, { ref: el => this.component = el },
+      h("div", { class: "tabTitles" }, this.tabTitles.map(tabTitle => h("button", { class: this.selectedTabTitle == tabTitle ? "visible" : "", onClick: () => this.showTab(tabTitle) }, tabTitle))),
+      h("div", { class: "currentTab" },
+        h("slot", null))));
+  }
+  static get is() { return "dnn-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-tabs.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-tabs.css"]
+  }; }
+  static get states() { return {
+    "tabTitles": {},
+    "selectedTabTitle": {}
+  }; }
+}
+//# sourceMappingURL=dnn-tabs.js.map

package/dist/collection/components/dnn-tabs/dnn-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-tabs.js","sourceRoot":"","sources":["../../../src/components/dnn-tabs/dnn-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,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;EACxB,CAAC;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;EACrG,CAAC;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;EAC5E,CAAC;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;EACzC,CAAC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;MACf,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;IACf,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;EACrC,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE;MAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAC3B,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC,EAAE,EACxD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC;MACN,WAAK,KAAK,EAAC,YAAY;QACnB,eAAa,CACX,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;CACJ","sourcesContent":["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}"]}

package/dist/collection/components/dnn-toggle/dnn-toggle.css

@@ -0,0 +1,52 @@
+:host {
+  /**
+   * @prop --background: Background of the toggle.
+   * @prop --background-checked: Background of the toggle when checked.
+   * @prop --handle-background:  Background of the handle.
+   * @prop --handle-background-checked:  Background of the handle when checked.
+   * @prop --border-radius: The radius of the background borders.
+   * @prop --handle-border-radius: The radius of the handle.
+  */
+  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/collection/components/dnn-toggle/dnn-toggle.js

@@ -0,0 +1,94 @@
+import { Component, h, Element, Prop, Event, Watch, Host } from "@stencil/core";
+export class DnnToggle {
+  constructor() {
+    /** 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 (h(Host, null,
+      h("button", { disabled: this.disabled, class: { 'checked': this.checked }, onClick: () => {
+          if (!this.disabled) {
+            this.checked = !this.checked;
+          }
+        } },
+        h("div", { class: "handle" }))));
+  }
+  static get is() { return "dnn-toggle"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-toggle.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-toggle.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If 'true' the toggle is checked (on)."
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If 'true' the toggle is not be interacted with."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "checkChanged",
+      "name": "checkChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the toggle changed"
+      },
+      "complexType": {
+        "original": "DnnToggleChangeEventDetail",
+        "resolved": "DnnToggleChangeEventDetail",
+        "references": {
+          "DnnToggleChangeEventDetail": {
+            "location": "import",
+            "path": "./toggle-interface"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "checked",
+      "methodName": "checkedChanged"
+    }]; }
+}
+//# sourceMappingURL=dnn-toggle.js.map

package/dist/collection/components/dnn-toggle/dnn-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-toggle.js","sourceRoot":"","sources":["../../../src/components/dnn-toggle/dnn-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS9F,MAAM,OAAO,SAAS;EALtB;IASI,4CAA4C;IACrB,YAAO,GAAG,KAAK,CAAC;IAEvC,sDAAsD;IAC9C,aAAQ,GAAG,KAAK,CAAC;GAyB5B;EAnBG,cAAc,CAAC,SAAkB;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,CAAC;EACjD,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,EAC7D,OAAO,EAAE,GAAG,EAAE;UACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;WAChC;QACL,CAAC;QAED,WAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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"]}

package/dist/collection/components/dnn-toggle/toggle-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle-interface.js.map

package/dist/collection/components/dnn-toggle/toggle-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-interface.js","sourceRoot":"","sources":["../../../src/components/dnn-toggle/toggle-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface DnnToggleChangeEventDetail {\r\n    checked: boolean;\r\n}"]}

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

@@ -0,0 +1,47 @@
+: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;
+}

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

@@ -0,0 +1,77 @@
+import { Component, Host, h, Prop, State, Element } from '@stencil/core';
+export class DnnTreeviewItem {
+  constructor() {
+    /** Defines if the current node is expanded  */
+    this.expanded = false;
+    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);
+    }
+  }
+  toggleCollapse() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      this.expander.classList.add("expanded");
+      return;
+    }
+    this.expander.classList.remove("expanded");
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
+        h("button", { onClick: () => this.toggleCollapse() },
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+            h("path", { d: "M10 17l5-5-5-5v10z" }),
+            h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))),
+      h("div", { class: "item" },
+        h("div", { class: "item-slot" },
+          h("slot", null)),
+        h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded },
+          h("div", { ref: el => this.childrenElement = el },
+            h("slot", { name: "children" }))))));
+  }
+  static get is() { return "dnn-treeview-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-treeview-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-treeview-item.css"]
+  }; }
+  static get properties() { return {
+    "expanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if the current node is expanded"
+      },
+      "attribute": "expanded",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasChildren": {}
+  }; }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=dnn-treeview-item.js.map

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

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

package/dist/collection/index.js

@@ -0,0 +1,3 @@
+export * from './utilities/debounce';
+export * from './utilities/dnnServicesFramework';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC","sourcesContent":["export { Components, JSX } from './components';\r\nexport * from './utilities/debounce';\r\nexport * from './utilities/dnnServicesFramework';\r\n"]}

package/dist/collection/utilities/colorInfo.js

@@ -0,0 +1,191 @@
+/** Color utility class with hsl and rgb converters
+ * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV
+ * @copyright Copyright (c) .NET Foundation. All rights reserved.
+ * @license MIT
+ */
+export class ColorInfo {
+  constructor() {
+    this._hue = 0;
+    this._saturation = 0;
+    this._lightness = 0;
+  }
+  /** gets the color hue
+   * @returns a number between 0 and 359, could contain decimals
+   */
+  get hue() { return this._hue; }
+  set hue(value) {
+    if (value < 0) {
+      value = 0;
+    }
+    if (value > 359) {
+      value = 359;
+    }
+    this._hue = value;
+  }
+  /** gets the color saturation
+   * @returns a number between 0 and 1, could contain decimals
+  */
+  get saturation() { return this._saturation; }
+  set saturation(value) {
+    if (value < 0) {
+      value = 0;
+    }
+    if (value > 1) {
+      value = 1;
+    }
+    this._saturation = value;
+  }
+  /** gets the color lightness
+   * @returns a number between 0 and 1, could contain decimals
+   */
+  get lightness() { return this._lightness; }
+  set lightness(value) {
+    if (value < 0) {
+      value = 0;
+    }
+    if (value > 1) {
+      value = 1;
+    }
+    this._lightness = value;
+  }
+  /** gets or sets the red component
+   * @returns an integer between 0 and 255
+  */
+  get red() {
+    return this.getRGB().red;
+  }
+  set red(value) {
+    this.setHSL(value, this.green, this.blue);
+  }
+  /** gets or sets the green component
+   * @returns an integer between 0 and 255
+   */
+  get green() {
+    return this.getRGB().green;
+  }
+  set green(value) {
+    this.setHSL(this.red, value, this.blue);
+  }
+  /** gets or sets the blue component
+   * @returns an integer between 0 and 255
+   */
+  get blue() {
+    return this.getRGB().blue;
+  }
+  set blue(value) {
+    this.setHSL(this.red, this.green, value);
+  }
+  /** gets or sets the hex color value, expresses as 6 hexadecimal characters.
+   * @returns hex representation of the color
+   */
+  get hex() {
+    var r = this.getHex(this.red);
+    var g = this.getHex(this.green);
+    var b = this.getHex(this.blue);
+    return r + g + b;
+  }
+  set hex(value) {
+    this.red = parseInt(value.substr(0, 2));
+    this.green = parseInt(value.substr(2, 2));
+    this.blue = parseInt(value.substr(4, 2));
+  }
+  /** gets white or black color that is a good oposite to the current color
+   * @returns - "000000" or "FFFFFF"
+   */
+  get contrastColor() {
+    const brightness = (this.red * 299 + this.green * 587 + this.blue * 114) / 1000;
+    if (brightness > 127) {
+      return "000000";
+    }
+    return "FFFFFF";
+  }
+  getRGB() {
+    const chroma = (1 - Math.abs((2 * this._lightness) - 1)) * this.saturation;
+    // find the quandrant of the hue
+    const quadrant = this._hue / 60;
+    // calculate the offset from the quandrant center
+    const offset = chroma * (1 - Math.abs(quadrant % 2 - 1));
+    // Apply the chroma to the primary component and the offset to the 2nd most important component
+    let r = 0, g = 0, b = 0;
+    if (0 <= quadrant && quadrant <= 1) {
+      r = chroma;
+      g = offset; // red to yellow
+    }
+    else if (1 <= quadrant && quadrant <= 2) {
+      g = chroma;
+      r = offset; // yellow to green
+    }
+    else if (2 <= quadrant && quadrant <= 3) {
+      g = chroma;
+      b = offset; // green to cyan
+    }
+    else if (3 <= quadrant && quadrant <= 4) {
+      b = chroma;
+      g = offset; // cyan to blue
+    }
+    else if (4 <= quadrant && quadrant <= 5) {
+      b = chroma;
+      r = offset; // blue to magenta
+    }
+    else if (5 <= quadrant && quadrant <= 6) {
+      r = chroma;
+      b = offset; // magenta to red
+    }
+    // calculate the bias to add to all channels to match the lightness
+    const bias = this._lightness - (chroma / 2);
+    return {
+      red: Math.round((r + bias) * 255),
+      green: Math.round((g + bias) * 255),
+      blue: Math.round((b + bias) * 255)
+    };
+  }
+  setHSL(red, green, blue) {
+    // GENERAL DATA
+    // all math is based on values from 0 to 1
+    const r = red / 255, g = green / 255, b = blue / 255;
+    // we need to max, min and the difference between them to derive hsl
+    const min = Math.min(r, g, b);
+    const max = Math.max(r, g, b);
+    const diff = max - min;
+    let h = 0, s = 0, l = 0;
+    // HUE
+    if (diff === 0) { // neutral
+      h = 0;
+    }
+    else if (max === r) { // red (magenta to yellow range)
+      h = 60 * ((g - b) / diff);
+    }
+    else if (max === g) { // green (yellow to cyan range)
+      h = 60 * (2 + ((b - r) / diff));
+    }
+    else if (max === b) { // blue (cyan to magenta range)
+      h = 60 * (4 + ((r - g) / diff));
+    }
+    if (h < 0) {
+      h = h + 360;
+    } // ensures positive hues only
+    if (h > 359) {
+      h = 359;
+    } // ensures we never return 360 for simplicity since it is the same as 0
+    // LIGHTNESS
+    l = (max + min) / 2;
+    // SATURATION
+    if (max === 0 || min === 1) { // pure black or white have no saturation
+      s = 0;
+    }
+    else {
+      s = (max - l) / (Math.min(l, 1 - l));
+    }
+    this._hue = h;
+    this._saturation = s;
+    this._lightness = l;
+  }
+  getHex(value) {
+    var hex = value.toString(16);
+    if (hex.length < 2) {
+      hex = "0" + hex;
+    }
+    return hex;
+  }
+}
+//# sourceMappingURL=colorInfo.js.map

package/dist/collection/utilities/colorInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorInfo.js","sourceRoot":"","sources":["../../src/utilities/colorInfo.ts"],"names":[],"mappings":"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","sourcesContent":["/** Color utility class with hsl and rgb converters\r\n * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nexport class ColorInfo{\r\n\r\n    private _hue: number = 0;\r\n    /** gets the color hue\r\n     * @returns a number between 0 and 359, could contain decimals\r\n     */\r\n    get hue() { return this._hue; }\r\n    set hue(value: number){\r\n        if (value < 0) { value = 0; }\r\n        if (value > 359) { value = 359; }\r\n        this._hue = value;\r\n    }\r\n\r\n    private _saturation: number = 0;\r\n    /** gets the color saturation\r\n     * @returns a number between 0 and 1, could contain decimals\r\n    */\r\n    get saturation() { return this._saturation; }\r\n    set saturation(value: number) {\r\n        if (value < 0) { value = 0; }\r\n        if (value > 1) { value = 1; }\r\n        this._saturation = value;\r\n    }\r\n\r\n    private _lightness: number = 0;\r\n    /** gets the color lightness\r\n     * @returns a number between 0 and 1, could contain decimals\r\n     */\r\n    get lightness() { return this._lightness; }\r\n    set lightness(value: number) {\r\n        if (value < 0) { value = 0; }\r\n        if (value > 1) { value = 1; }\r\n        this._lightness = value;\r\n    }\r\n\r\n    /** gets or sets the red component \r\n     * @returns an integer between 0 and 255\r\n    */\r\n    get red() {\r\n        return this.getRGB().red;\r\n    }\r\n    set red(value) {\r\n        this.setHSL(value, this.green, this.blue);\r\n    }\r\n\r\n    /** gets or sets the green component\r\n     * @returns an integer between 0 and 255\r\n     */\r\n    get green() {\r\n        return this.getRGB().green;\r\n    }\r\n    set green(value: number) {\r\n        this.setHSL(this.red, value, this.blue);\r\n    }\r\n\r\n    /** gets or sets the blue component\r\n     * @returns an integer between 0 and 255\r\n     */\r\n    get blue() {\r\n        return this.getRGB().blue;\r\n    }\r\n    set blue(value: number) {\r\n        this.setHSL(this.red, this.green, value);\r\n    }\r\n\r\n    /** gets or sets the hex color value, expresses as 6 hexadecimal characters.\r\n     * @returns hex representation of the color\r\n     */\r\n    get hex() {\r\n        var r = this.getHex(this.red);\r\n        var g = this.getHex(this.green);\r\n        var b = this.getHex(this.blue);\r\n        return r + g + b;\r\n    }\r\n    set hex(value: string){\r\n        this.red = parseInt(value.substr(0,2));\r\n        this.green = parseInt(value.substr(2,2));\r\n        this.blue = parseInt(value.substr(4,2));\r\n    }\r\n\r\n    /** gets white or black color that is a good oposite to the current color\r\n     * @returns - \"000000\" or \"FFFFFF\"\r\n     */\r\n    get contrastColor() {\r\n        const brightness = (this.red*299 + this.green*587 + this.blue*114) / 1000\r\n        if (brightness > 127){\r\n            return \"000000\";\r\n        }\r\n        return \"FFFFFF\";\r\n    }\r\n\r\n    private getRGB() {\r\n        const chroma = (1 - Math.abs((2 * this._lightness) - 1)) * this.saturation;\r\n        // find the quandrant of the hue\r\n        const quadrant = this._hue / 60;\r\n        // calculate the offset from the quandrant center\r\n        const offset = chroma * (1 - Math.abs(quadrant % 2 - 1));\r\n\r\n        // Apply the chroma to the primary component and the offset to the 2nd most important component\r\n        let r = 0, g = 0, b = 0;\r\n        if (0 <= quadrant && quadrant <= 1) {\r\n            r = chroma; g = offset; // red to yellow\r\n        } else if (1 <= quadrant && quadrant <= 2) {\r\n            g = chroma; r = offset; // yellow to green\r\n        } else if (2 <= quadrant && quadrant <= 3) {\r\n            g = chroma; b = offset; // green to cyan\r\n        } else if (3 <= quadrant && quadrant <= 4) {\r\n            b = chroma; g = offset; // cyan to blue\r\n        } else if (4 <= quadrant && quadrant <= 5) {\r\n            b = chroma; r = offset; // blue to magenta\r\n        } else if (5 <= quadrant && quadrant <= 6) {\r\n            r = chroma; b = offset; // magenta to red\r\n        }\r\n        // calculate the bias to add to all channels to match the lightness\r\n        const bias = this._lightness - (chroma / 2);\r\n\r\n        return {\r\n            red: Math.round((r + bias) * 255),\r\n            green: Math.round((g + bias) * 255),\r\n            blue: Math.round((b + bias) * 255)\r\n        }\r\n    }\r\n\r\n    private setHSL(red: number, green: number, blue: number) {\r\n        // GENERAL DATA\r\n        // all math is based on values from 0 to 1\r\n        const r = red/255, g = green/255, b = blue/255;\r\n        // we need to max, min and the difference between them to derive hsl\r\n        const min = Math.min(r, g, b);\r\n        const max = Math.max(r, g, b);\r\n        const diff = max - min;\r\n        let h = 0, s = 0, l = 0;\r\n\r\n        // HUE\r\n        if (diff === 0) { // neutral\r\n            h = 0;\r\n        } else if (max === r) { // red (magenta to yellow range)\r\n            h = 60 * ((g - b) / diff);\r\n        } else if (max === g) { // green (yellow to cyan range)\r\n            h = 60 * (2 + ((b - r) / diff));\r\n        } else if (max === b) { // blue (cyan to magenta range)\r\n            h = 60 * (4 + ((r - g) / diff));\r\n        }\r\n        if (h < 0) { h = h + 360} // ensures positive hues only\r\n        if (h > 359) { h = 359} // ensures we never return 360 for simplicity since it is the same as 0\r\n\r\n        // LIGHTNESS\r\n        l = (max + min) / 2;\r\n\r\n        // SATURATION\r\n        if (max === 0 || min === 1) { // pure black or white have no saturation\r\n            s = 0;\r\n        } else {\r\n            s = (max - l) / (Math.min(l, 1 - l));\r\n        }\r\n\r\n        this._hue = h;\r\n        this._saturation = s;\r\n        this._lightness = l;\r\n    }\r\n\r\n    private getHex(value: number){\r\n        var hex = value.toString(16);\r\n        if (hex.length < 2){\r\n            hex = \"0\" + hex;\r\n        }\r\n        return hex;\r\n    }\r\n} "]}

package/dist/collection/utilities/debounce.js

@@ -0,0 +1,19 @@
+/**
+ * Debounces a function call, see http://demo.nimius.net/debounce_throttle/ for explanation of debounce vs throttle.
+ * @param debounceTime How many milliseconds to debounce for.
+ */
+export function Debounce(debounceTime = 500) {
+  return function (_target, _key, descriptor) {
+    let originalMethod = descriptor.value;
+    let timer = null;
+    descriptor.value = function (...args) {
+      clearTimeout(timer);
+      return new Promise(resolve => {
+        timer = setTimeout(() => {
+          resolve(originalMethod.apply(this, args));
+        }, debounceTime);
+      });
+    };
+  };
+}
+//# sourceMappingURL=debounce.js.map

package/dist/collection/utilities/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../src/utilities/debounce.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,eAAuB,GAAG;EAC/C,OAAO,UAAS,OAAY,EAAE,IAAY,EAAE,UAA8B;IAEtE,IAAI,cAAc,GAAG,UAAU,CAAC,KAAK,CAAC;IACtC,IAAI,KAAK,GAAG,IAAI,CAAC;IAEjB,UAAU,CAAC,KAAK,GAAG,UAAS,GAAG,IAAW;MACtC,YAAY,CAAC,KAAK,CAAC,CAAC;MACpB,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QACzB,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;UACpB,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9C,CAAC,EAAE,YAAY,CAAC,CAAC;MACrB,CAAC,CAAC,CAAA;IAEN,CAAC,CAAA;EAEL,CAAC,CAAA;AACL,CAAC","sourcesContent":["/**\r\n * Debounces a function call, see http://demo.nimius.net/debounce_throttle/ for explanation of debounce vs throttle.\r\n * @param debounceTime How many milliseconds to debounce for.\r\n */\r\nexport function Debounce(debounceTime: number = 500){\r\n    return function(_target: any, _key: string, descriptor: PropertyDescriptor){\r\n\r\n        let originalMethod = descriptor.value;\r\n        let timer = null;\r\n\r\n        descriptor.value = function(...args: any[]){\r\n            clearTimeout(timer);\r\n            return new Promise(resolve => {\r\n                timer = setTimeout(() => {\r\n                    resolve(originalMethod.apply(this, args));\r\n                }, debounceTime);\r\n            })\r\n\r\n        }\r\n        \r\n    }\r\n}"]}