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

package/dist/collection/components/dnn-searchbox/dnn-searchbox.stories.js

@@ -0,0 +1,26 @@
+import { html } from "lit-html";
+import readme from "./readme.md";
+export default {
+  title: "Elements/Searchbox",
+  component: "dnn-searchbox",
+  parameters: {
+    notes: readme,
+    actions: {
+      handles: ['queryChanged'],
+    }
+  }
+};
+const Template = (args) => html `
+        <dnn-searchbox
+            ?debounced=${args.debounced}
+            placeholder=${args.placeholder}
+            query=${args.query}
+        />
+    `;
+export const Searchbox = Template.bind({});
+Searchbox.args = {
+  debounced: true,
+  placeholder: "Search",
+  query: "",
+};
+//# sourceMappingURL=dnn-searchbox.stories.js.map

package/dist/collection/components/dnn-searchbox/dnn-searchbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-searchbox.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-searchbox/dnn-searchbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACX,KAAK,EAAE,oBAAoB;EAC3B,SAAS,EAAE,eAAe;EAC1B,UAAU,EAAE;IACR,KAAK,EAAE,MAAM;IACb,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,cAAc,CAAC;KAC5B;GACJ;CACI,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAIjB,EAAE,EAAE,CACD,IAAI,CAAA;;yBAEiB,IAAI,CAAC,SAAS;0BACb,IAAI,CAAC,WAAW;oBACtB,IAAI,CAAC,KAAK;;KAEzB,CAAC;AAEN,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;EACb,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,QAAQ;EACrB,KAAK,EAAE,EAAE;CACZ,CAAA","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta } from \"@storybook/web-components\";\r\nimport readme from \"./readme.md\";\r\n\r\nexport default {\r\n    title: \"Elements/Searchbox\",\r\n    component: \"dnn-searchbox\",\r\n    parameters: {\r\n        notes: readme,\r\n        actions: {\r\n            handles: ['queryChanged'],\r\n        }\r\n    }\r\n} as Meta;\r\n\r\nconst Template = (args : {\r\n    debounced: boolean,\r\n    placeholder: string,\r\n    query: string,\r\n}) =>\r\n    html`\r\n        <dnn-searchbox\r\n            ?debounced=${args.debounced}\r\n            placeholder=${args.placeholder}\r\n            query=${args.query}\r\n        />\r\n    `;\r\n\r\nexport const Searchbox = Template.bind({});\r\nSearchbox.args = {\r\n    debounced: true,\r\n    placeholder: \"Search\",\r\n    query: \"\",\r\n}"]}

package/dist/collection/components/dnn-sort-icon/dnn-sort-icon.css

@@ -4,6 +4,9 @@
   * @prop --color-sorted: Color of the sorted sort icon.
   * @prop --color-hover: Color of the icons when hovered.
   */
+  --color: #888;
+  --color-sorted: var(--dnn-color-primary, rgb(2,139,255));
+  --color-hover: var(--dnn-color-primary-light, #36a1ff);
   display: inline-block;
 }
 
@@ -22,11 +25,11 @@ button {
 button svg {
   height: 1.5em;
   width: auto;
-  fill: var(--color, #888);
+  fill: var(--color);
 }
 button.active svg {
-  fill: var(--color-sorted, var(--dnn-color-primary, #028bff));
+  fill: var(--color-sorted);
 }
 button:hover svg, button:focus svg {
-  fill: var(--color-hover, var(--dnn-color-primary-light, #36a1ff));
+  fill: var(--color-hover);
 }

package/dist/collection/components/dnn-sort-icon/dnn-sort-icon.js

@@ -1,81 +1,81 @@
-import { Component, Host, h, Prop, Event } from '@stencil/core';
-export class DnnSortIcon {
-  constructor() {
-    /** 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 (h(Host, null,
-      h("button", { class: { "active": this.sortDirection != "none" }, onClick: () => this.changeSort() },
-        this.sortDirection == "none" &&
-          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" },
-            h("path", { d: "M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z" })),
-        this.sortDirection == "asc" &&
-          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" },
-            h("path", { d: "M 0 7 H 12 L 6 0 Z" })),
-        this.sortDirection == "desc" &&
-          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" },
-            h("path", { d: "M 0 9 H 12 L 6 16 Z" })))));
-  }
-  static get is() { return "dnn-sort-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-sort-icon.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-sort-icon.css"]
-  }; }
-  static get properties() { return {
-    "sortDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"asc\" | \"desc\" | \"none\"",
-        "resolved": "\"asc\" | \"desc\" | \"none\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the current sort direction"
-      },
-      "attribute": "sort-direction",
-      "reflect": false,
-      "defaultValue": "\"none\""
-    }
-  }; }
-  static get events() { return [{
-      "method": "sortChanged",
-      "name": "sortChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the sort is changed."
-      },
-      "complexType": {
-        "original": "\"asc\"|\"desc\"|\"none\"",
-        "resolved": "\"asc\" | \"desc\" | \"none\"",
-        "references": {}
-      }
-    }]; }
-}
+import { Component, Host, h, Prop, Event } from '@stencil/core';
+export class DnnSortIcon {
+  constructor() {
+    /** 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 (h(Host, null,
+      h("button", { class: { "active": this.sortDirection != "none" }, onClick: () => this.changeSort() },
+        this.sortDirection == "none" &&
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" },
+            h("path", { d: "M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z" })),
+        this.sortDirection == "asc" &&
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" },
+            h("path", { d: "M 0 7 H 12 L 6 0 Z" })),
+        this.sortDirection == "desc" &&
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" },
+            h("path", { d: "M 0 9 H 12 L 6 16 Z" })))));
+  }
+  static get is() { return "dnn-sort-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-sort-icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-sort-icon.css"]
+  }; }
+  static get properties() { return {
+    "sortDirection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"asc\" | \"desc\" | \"none\"",
+        "resolved": "\"asc\" | \"desc\" | \"none\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the current sort direction"
+      },
+      "attribute": "sort-direction",
+      "reflect": false,
+      "defaultValue": "\"none\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "sortChanged",
+      "name": "sortChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the sort is changed."
+      },
+      "complexType": {
+        "original": "\"asc\"|\"desc\"|\"none\"",
+        "resolved": "\"asc\" | \"desc\" | \"none\"",
+        "references": {}
+      }
+    }]; }
+}
 //# sourceMappingURL=dnn-sort-icon.js.map

package/dist/collection/components/dnn-sort-icon/dnn-sort-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-sort-icon.js","sourceRoot":"","sources":["../../../src/components/dnn-sort-icon/dnn-sort-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,WAAW;EALxB;IAME,yCAAyC;IACjC,kBAAa,GAA4B,MAAM,CAAC;GA2CzD;EAtCS,UAAU;IAChB,QAAQ,IAAI,CAAC,aAAa,EAAE;MAC1B,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;EAC5C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,cACE,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,IAAI,MAAM,EAAC,EAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;QAE/B,IAAI,CAAC,aAAa,IAAI,MAAM;UAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;YAAC,YAAM,CAAC,EAAC,wCAAwC,GAAQ,CAAM;QAE3H,IAAI,CAAC,aAAa,IAAI,KAAK;UAC1B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;YAAC,YAAM,CAAC,EAAC,oBAAoB,GAAQ,CAAM;QAEvG,IAAI,CAAC,aAAa,IAAI,MAAM;UAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;YAAC,YAAM,CAAC,EAAC,qBAAqB,GAAQ,CAAM,CAElG,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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.js","sourceRoot":"","sources":["../../../../src/components/dnn-sort-icon/dnn-sort-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,WAAW;EALxB;IAME,yCAAyC;IACjC,kBAAa,GAA4B,MAAM,CAAC;GA2CzD;EAtCS,UAAU;IAChB,QAAQ,IAAI,CAAC,aAAa,EAAE;MAC1B,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;EAC5C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,cACE,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,IAAI,MAAM,EAAC,EAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;QAE/B,IAAI,CAAC,aAAa,IAAI,MAAM;UAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;YAAC,YAAM,CAAC,EAAC,wCAAwC,GAAQ,CAAM;QAE3H,IAAI,CAAC,aAAa,IAAI,KAAK;UAC1B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;YAAC,YAAM,CAAC,EAAC,oBAAoB,GAAQ,CAAM;QAEvG,IAAI,CAAC,aAAa,IAAI,MAAM;UAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;YAAC,YAAM,CAAC,EAAC,qBAAqB,GAAQ,CAAM,CAElG,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/dnn-sort-icon/dnn-sort-icon.stories.js

@@ -0,0 +1,58 @@
+import { html } from "lit-html";
+import readme from "./readme.md";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { injectStyles } from "../../../.storybook/utilities";
+export default {
+  title: "Elements/Sort Icon",
+  component: 'dnn-sort-icon',
+  parameters: {
+    notes: readme,
+    actions: {
+      handles: ['sortChanged'],
+    },
+  },
+  argTypes: {
+    'sortDirection': {
+      options: ['asc', 'desc', 'none'],
+      control: {
+        type: 'radio',
+      },
+      defaultValue: "none",
+    },
+    'sort-direction': {
+      options: ['asc', 'desc', 'none'],
+      control: {
+        type: 'radio',
+      },
+      defaultValue: "none",
+    },
+    '--color': {
+      control: {
+        type: 'color'
+      }
+    },
+    '--color-hover': {
+      control: {
+        type: 'color'
+      }
+    },
+    '--color-sorted': {
+      control: {
+        type: 'color'
+      }
+    },
+  },
+};
+const Template = (args, context) => {
+  return html `
+            <dnn-sort-icon
+                style=${ifDefined(injectStyles(args, context))}
+                .sortDirection=${ifDefined(args.sortDirection)}
+            />
+        `;
+};
+export const SortIcon = Template.bind({});
+SortIcon.args = {
+  sortDirection: "none",
+};
+//# sourceMappingURL=dnn-sort-icon.stories.js.map

package/dist/collection/components/dnn-sort-icon/dnn-sort-icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-sort-icon.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-sort-icon/dnn-sort-icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,eAAe;EACX,KAAK,EAAE,oBAAoB;EAC3B,SAAS,EAAE,eAAe;EAC1B,UAAU,EAAE;IACR,KAAK,EAAE,MAAM;IACb,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,aAAa,CAAC;KAC3B;GACJ;EACD,QAAQ,EAAE;IACN,eAAe,EAAE;MACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC;MAChC,OAAO,EAAE;QACL,IAAI,EAAE,OAAO;OAChB;MACD,YAAY,EAAE,MAAM;KACvB;IACD,gBAAgB,EAAE;MACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC;MAChC,OAAO,EAAE;QACL,IAAI,EAAE,OAAO;OAChB;MACD,YAAY,EAAE,MAAM;KACvB;IACD,SAAS,EAAE;MACP,OAAO,EAAE;QACL,IAAI,EAAE,OAAO;OAChB;KACJ;IACD,eAAe,EAAE;MACb,OAAO,EAAE;QACL,IAAI,EAAE,OAAO;OAChB;KACJ;IACD,gBAAgB,EAAE;MACd,OAAO,EAAE;QACL,IAAI,EAAE,OAAO;OAChB;KACJ;GACJ;CACI,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAGjB,EAAE,OAAO,EAAE,EAAE;EAEN,OAAO,IAAI,CAAA;;wBAEK,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;iCAC7B,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;;SAErD,CAAC;AACN,CAAC,CAAA;AAEL,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;EACZ,aAAa,EAAE,MAAM;CACxB,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta } from \"@storybook/web-components\";\r\nimport readme from \"./readme.md\";\r\nimport { ifDefined } from \"lit-html/directives/if-defined\";\r\nimport { injectStyles } from \"../../../.storybook/utilities\";\r\n\r\nexport default {\r\n    title: \"Elements/Sort Icon\",\r\n    component: 'dnn-sort-icon',\r\n    parameters: {\r\n        notes: readme,\r\n        actions: {\r\n            handles: ['sortChanged'],\r\n        },\r\n    },\r\n    argTypes: {\r\n        'sortDirection': {\r\n            options: ['asc', 'desc', 'none'],\r\n            control: {\r\n                type: 'radio',\r\n            },\r\n            defaultValue: \"none\",\r\n        },\r\n        'sort-direction': {\r\n            options: ['asc', 'desc', 'none'],\r\n            control: {\r\n                type: 'radio',\r\n            },\r\n            defaultValue: \"none\",\r\n        },\r\n        '--color': {\r\n            control: {\r\n                type: 'color'\r\n            }\r\n        },\r\n        '--color-hover': {\r\n            control: {\r\n                type: 'color'\r\n            }\r\n        },\r\n        '--color-sorted': {\r\n            control: {\r\n                type: 'color'\r\n            }\r\n        },\r\n    },\r\n} as Meta;\r\n\r\nconst Template = (args: {\r\n    sortDirection: \"asc\" | \"desc\" | \"none\",\r\n    color: string;\r\n}, context) =>\r\n    {\r\n        return html`\r\n            <dnn-sort-icon\r\n                style=${ifDefined(injectStyles(args, context))}\r\n                .sortDirection=${ifDefined(args.sortDirection)}\r\n            />\r\n        `;\r\n    }\r\n\r\nexport const SortIcon = Template.bind({});\r\nSortIcon.args = {\r\n    sortDirection: \"none\",\r\n};"]}

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

@@ -1,84 +1,84 @@
-import { Component, Host, h, Prop, State, Method } from "@stencil/core";
-/** Represents a single tab and must be used inside a dnn-tabs element. */
-export class DnnTab {
-  constructor() {
-    this.visible = false;
-  }
-  /** Shows the tab. */
-  async show() {
-    this.visible = true;
-  }
-  /** Hides the modal */
-  async hide() {
-    this.visible = false;
-  }
-  render() {
-    return (h(Host, null, this.visible &&
-      h("slot", null)));
-  }
-  static get is() { return "dnn-tab"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-tab.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-tab.css"]
-  }; }
-  static get properties() { return {
-    "tabTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the tab title."
-      },
-      "attribute": "tab-title",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "visible": {}
-  }; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Shows the tab.",
-        "tags": []
-      }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Hides the modal",
-        "tags": []
-      }
-    }
-  }; }
-}
+import { Component, Host, h, Prop, State, Method } from "@stencil/core";
+/** Represents a single tab and must be used inside a dnn-tabs element. */
+export class DnnTab {
+  constructor() {
+    this.visible = false;
+  }
+  /** Shows the tab. */
+  async show() {
+    this.visible = true;
+  }
+  /** Hides the modal */
+  async hide() {
+    this.visible = false;
+  }
+  render() {
+    return (h(Host, null, this.visible &&
+      h("slot", null)));
+  }
+  static get is() { return "dnn-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-tab.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-tab.css"]
+  }; }
+  static get properties() { return {
+    "tabTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the tab title."
+      },
+      "attribute": "tab-title",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "visible": {}
+  }; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the tab.",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hides the modal",
+        "tags": []
+      }
+    }
+  }; }
+}
 //# sourceMappingURL=dnn-tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dnn-tab.js","sourceRoot":"","sources":["../../../src/components/dnn-tab/dnn-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAExE,0EAA0E;AAM1E,MAAM,OAAO,MAAM;EALnB;IASa,YAAO,GAAY,KAAK,CAAC;GAuBrC;EArBG,qBAAqB;EAErB,KAAK,CAAC,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;EACxB,CAAC;EAED,sBAAsB;EAEtB,KAAK,CAAC,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACzB,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,QACA,IAAI,CAAC,OAAO;MACT,eAAa,CAEd,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","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.js","sourceRoot":"","sources":["../../../../src/components/dnn-tab/dnn-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAExE,0EAA0E;AAM1E,MAAM,OAAO,MAAM;EALnB;IASa,YAAO,GAAY,KAAK,CAAC;GAuBrC;EArBG,qBAAqB;EAErB,KAAK,CAAC,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;EACxB,CAAC;EAED,sBAAsB;EAEtB,KAAK,CAAC,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACzB,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,QACA,IAAI,CAAC,OAAO;MACT,eAAa,CAEd,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","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}"]}

package/dist/collection/components/dnn-tab/dnn-tab.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import readme from './readme.md';
+export default {
+  title: 'Elements/Tab',
+  component: 'dnn-tab',
+  parameters: {
+    notes: readme,
+  },
+  argTypes: {
+    'tab-title': {
+      control: 'text',
+    },
+  }
+};
+const Template = (args) => html `
+        <dnn-tab
+            tab-title=${ifDefined(args.tabTitle)}>
+        </dnn-tab>
+    `;
+export const Tab = Template.bind({});
+Tab.args = {
+  tabTitle: 'My Tab',
+};
+//# sourceMappingURL=dnn-tab.stories.js.map

package/dist/collection/components/dnn-tab/dnn-tab.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-tab.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-tab/dnn-tab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACX,KAAK,EAAE,cAAc;EACrB,SAAS,EAAE,SAAS;EACpB,UAAU,EAAE;IACR,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,WAAW,EAAE;MACT,OAAO,EAAE,MAAM;KAClB;GACJ;CACI,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CACtB,IAAI,CAAA;;wBAEgB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;;KAE3C,CAAC;AAEN,MAAM,CAAC,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrC,GAAG,CAAC,IAAI,GAAG;EACP,QAAQ,EAAE,QAAQ;CACrB,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\n\nexport default {\n    title: 'Elements/Tab',\n    component: 'dnn-tab',\n    parameters: {\n        notes:  readme,\n    },\n    argTypes: {\n        'tab-title': {\n            control: 'text',\n        },\n    }\n} as Meta;\n\nconst Template = (args) =>\n    html`\n        <dnn-tab\n            tab-title=${ifDefined(args.tabTitle)}>\n        </dnn-tab>\n    `;\n\nexport const Tab = Template.bind({});\nTab.args = {\n    tabTitle: 'My Tab',\n};\n"]}

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

@@ -1,55 +1,55 @@
-import { Component, Host, h, State } from "@stencil/core";
-export class DnnTabs {
-  constructor() {
-    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 (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": {}
-  }; }
-}
+import { Component, Host, h, State } from "@stencil/core";
+export class DnnTabs {
+  constructor() {
+    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 (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

@@ -1 +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;GAwD1C;EAtDG,gBAAgB;IACZ,qBAAqB,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC,CAAC,CAAC;EACP,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        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.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;GAwD1C;EAtDG,gBAAgB;IACZ,qBAAqB,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC,CAAC,CAAC;EACP,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        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}"]}