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

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

@@ -1,60 +1,60 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-b5a28c1d.js';
-import { D as Debounce } from './debounce-06f55268.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-20e42ad7.js';
+import { D as Debounce } from './debounce-6be67abd.js';
 
 const dnnSearchboxCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-let DnnSearchbox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.queryChanged = createEvent(this, "queryChanged", 7);
-    /**
-     * Sets the field placeholder text.
-     */
-    this.placeholder = "";
-    /**
-     * Debounces the queryChanged by 500ms.
-     */
-    this.debounced = true;
-    /** Sets the query */
-    this.query = "";
-  }
-  fireQueryChanged() {
-    if (this.debounced) {
-      this.debouncedHandleQueryChanged();
-    }
-    else {
-      this.handleQueryChanged();
-    }
-  }
-  handleQueryChanged() {
-    this.queryChanged.emit(this.query);
-  }
-  debouncedHandleQueryChanged() {
-    this.handleQueryChanged();
-  }
-  render() {
-    return (h(Host, null, h("input", { type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.query = e.target.value }), this.query !== "" ?
-      h("button", { class: "svg clear", onClick: () => this.query = "" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" })))
-      :
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))));
-  }
-  static get watchers() { return {
-    "query": ["fireQueryChanged"]
-  }; }
-};
-__decorate([
-  Debounce(500)
-], DnnSearchbox.prototype, "debouncedHandleQueryChanged", null);
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const DnnSearchbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.queryChanged = createEvent(this, "queryChanged", 7);
+    /**
+     * Sets the field placeholder text.
+     */
+    this.placeholder = "";
+    /**
+     * Debounces the queryChanged by 500ms.
+     */
+    this.debounced = true;
+    /** Sets the query */
+    this.query = "";
+  }
+  fireQueryChanged() {
+    if (this.debounced) {
+      this.debouncedHandleQueryChanged();
+    }
+    else {
+      this.handleQueryChanged();
+    }
+  }
+  handleQueryChanged() {
+    this.queryChanged.emit(this.query);
+  }
+  debouncedHandleQueryChanged() {
+    this.handleQueryChanged();
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.query = e.target.value }), this.query !== "" ?
+      h("button", { class: "svg clear", onClick: () => this.query = "" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" })))
+      :
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))));
+  }
+  static get watchers() { return {
+    "query": ["fireQueryChanged"]
+  }; }
+};
+__decorate([
+  Debounce(500)
+], DnnSearchbox.prototype, "debouncedHandleQueryChanged", null);
 DnnSearchbox.style = dnnSearchboxCss;
 
 export { DnnSearchbox as dnn_searchbox };

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

@@ -1 +1 @@
-{"file":"dnn-searchbox.entry.esm.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,uoCAAuoC;;;;;;;;;;;;ICOlpC,YAAY;EALzB;;;;;;IAUU,gBAAW,GAAY,EAAE,CAAC;;;;IAK1B,cAAS,GAAY,IAAI,CAAC;;IAGX,UAAK,GAAW,EAAE,CAAC;GAgD3C;EAvCC,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,EAAC;MACjB,IAAI,CAAC,2BAA2B,EAAE,CAAC;KACpC;SACG;MACF,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;GACF;EAEO,kBAAkB;IACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACpC;EAGO,2BAA2B;IACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAGD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,aAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,GAC/D,EACD,IAAI,CAAC,KAAK,KAAK,EAAE;MAChB,cAAQ,KAAK,EAAC,WAAW,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,IAE9B,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;;QAEX,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,4OAA4O,GAAE,CAAM,CAElY,EACP;GACH;;;;;AAvBD;EADC,QAAQ,CAAC,GAAG,CAAC;+DAGb;;;;;","names":[],"sources":["./src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","./src/components/dnn-searchbox/dnn-searchbox.tsx"],"sourcesContent":[":host {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: grey;\r\n  --border-active-color: black;\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  --focus-color: var(--dnn-color-primary, blue);\r\n  input {\r\n    width:100%;\r\n    border: var(--border-size) solid var(--border-color);\r\n    outline: none;\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding);\r\n    padding-right: 32px;\r\n    transition: all 300ms ease-in-out;\r\n    &:focus, &:hover{\r\n      outline: none;\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n  svg{\r\n    position: absolute;\r\n    top:0;\r\n    right:0;\r\n    height: 100%;\r\n    transform: scale(0.7);\r\n    fill: var(--color);\r\n    outline: var(--color);\r\n    color: var(--color);\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  button{\r\n    background: transparent;\r\n    border: 0;\r\n    margin: 0;\r\n    padding: 0;\r\n    &:focus, &:hover{\r\n      svg{\r\n        fill: var(--focus-color);\r\n      outline: var(--focus-color);\r\n      color: var(--focus-color);\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n@Component({\r\n  tag: 'dnn-searchbox',\r\n  styleUrl: 'dnn-searchbox.scss',\r\n  shadow: true\r\n})\r\nexport class DnnSearchbox {\r\n\r\n  /**\r\n   * Sets the field placeholder text.\r\n   */\r\n  @Prop() placeholder?: string = \"\";\r\n\r\n  /**\r\n   * Debounces the queryChanged by 500ms.\r\n   */\r\n  @Prop() debounced: boolean = true;\r\n\r\n  /** Sets the query */\r\n  @Prop({mutable: true}) query: string = \"\";\r\n\r\n  /**\r\n   * Fires up each time the search query changes.\r\n   * The data passed is the new query.\r\n   */\r\n  @Event() queryChanged: EventEmitter;\r\n\r\n  @Watch('query')\r\n  fireQueryChanged(){\r\n    if (this.debounced){\r\n      this.debouncedHandleQueryChanged();\r\n    }\r\n    else{\r\n      this.handleQueryChanged();\r\n    }\r\n  }\r\n  \r\n  private handleQueryChanged(){\r\n    this.queryChanged.emit(this.query);\r\n  }\r\n\r\n  @Debounce(500)\r\n  private debouncedHandleQueryChanged(){\r\n    this.handleQueryChanged();\r\n  }\r\n  \r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <input type=\"text\" value={this.query}\r\n          placeholder={this.placeholder}\r\n          onInput={e => this.query = (e.target as HTMLInputElement).value}\r\n        />\r\n        {this.query !== \"\" ?\r\n          <button class=\"svg clear\"\r\n            onClick={() => this.query = \"\"}\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=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n          </button>\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=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>\r\n        }\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"],"version":3}
+{"file":"dnn-searchbox.entry.esm.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,uoCAAuoC;;;;;;;;;;;;MCOlpC,YAAY;EALzB;;;;;;IAUU,gBAAW,GAAY,EAAE,CAAC;;;;IAK1B,cAAS,GAAY,IAAI,CAAC;;IAGX,UAAK,GAAW,EAAE,CAAC;GA+C3C;EAtCC,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,EAAC;MACjB,IAAI,CAAC,2BAA2B,EAAE,CAAC;KACpC;SACG;MACF,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;GACF;EAEO,kBAAkB;IACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACpC;EAGO,2BAA2B;IACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,aAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,GAC/D,EACD,IAAI,CAAC,KAAK,KAAK,EAAE;MAChB,cAAQ,KAAK,EAAC,WAAW,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,IAE9B,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;;QAEX,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,4OAA4O,GAAE,CAAM,CAElY,EACP;GACH;;;;;AAtBD;EADC,QAAQ,CAAC,GAAG,CAAC;+DAGb;;;;;","names":[],"sources":["./src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","./src/components/dnn-searchbox/dnn-searchbox.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  --background-color: transparent;\n  --color: #333;\n  --border-size: 1px;\n  --border-color: grey;\n  --border-active-color: black;\n  --border-radius: var(--dnn-controls-radius, 5px);\n  --padding: var(--dnn-controls-padding, 5px);\n  --focus-color: var(--dnn-color-primary, blue);\n  input {\n    width:100%;\n    border: var(--border-size) solid var(--border-color);\n    outline: none;\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    padding-right: 32px;\n    transition: all 300ms ease-in-out;\n    &:focus, &:hover{\n      outline: none;\n      box-shadow: 0 0 2px 2px var(--focus-color);\n    }\n  }\n  svg{\n    position: absolute;\n    top:0;\n    right:0;\n    height: 100%;\n    transform: scale(0.7);\n    fill: var(--color);\n    outline: var(--color);\n    color: var(--color);\n    transition: all 300ms ease-in-out;\n  }\n  button{\n    background: transparent;\n    border: 0;\n    margin: 0;\n    padding: 0;\n    &:focus, &:hover{\n      svg{\n        fill: var(--focus-color);\n      outline: var(--focus-color);\n      color: var(--focus-color);\n      }\n    }\n  }\n}\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\nimport { Debounce } from '../../utilities/debounce';\n@Component({\n  tag: 'dnn-searchbox',\n  styleUrl: 'dnn-searchbox.scss',\n  shadow: true\n})\nexport class DnnSearchbox {\n\n  /**\n   * Sets the field placeholder text.\n   */\n  @Prop() placeholder?: string = \"\";\n\n  /**\n   * Debounces the queryChanged by 500ms.\n   */\n  @Prop() debounced: boolean = true;\n\n  /** Sets the query */\n  @Prop({mutable: true}) query: string = \"\";\n\n  /**\n   * Fires up each time the search query changes.\n   * The data passed is the new query.\n   */\n  @Event() queryChanged: EventEmitter<string>;\n\n  @Watch('query')\n  fireQueryChanged(){\n    if (this.debounced){\n      this.debouncedHandleQueryChanged();\n    }\n    else{\n      this.handleQueryChanged();\n    }\n  }\n  \n  private handleQueryChanged(){\n    this.queryChanged.emit(this.query);\n  }\n\n  @Debounce(500)\n  private debouncedHandleQueryChanged(){\n    this.handleQueryChanged();\n  }\n\n  render() {\n    return (\n      <Host>\n        <input type=\"text\" value={this.query}\n          placeholder={this.placeholder}\n          onInput={e => this.query = (e.target as HTMLInputElement).value}\n        />\n        {this.query !== \"\" ?\n          <button class=\"svg clear\"\n            onClick={() => this.query = \"\"}\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\n          </button>\n        :\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>\n        }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/dnn/dnn-searchbox.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-a3a55419.system.js","./debounce-eef81bf7.system.js"],(function(e){"use strict";var t,r,o,n,i;return{setters:[function(e){t=e.r;r=e.e;o=e.h;n=e.f},function(e){i=e.D}],execute:function(){var a=":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";var s=undefined&&undefined.__decorate||function(e,t,r,o){var n=arguments.length,i=n<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)if(a=e[s])i=(n<3?a(i):n>3?a(t,r,i):a(t,r))||i;return n>3&&i&&Object.defineProperty(t,r,i),i};var l=e("dnn_searchbox",function(){function e(e){t(this,e);this.queryChanged=r(this,"queryChanged",7);this.placeholder="";this.debounced=true;this.query=""}e.prototype.fireQueryChanged=function(){if(this.debounced){this.debouncedHandleQueryChanged()}else{this.handleQueryChanged()}};e.prototype.handleQueryChanged=function(){this.queryChanged.emit(this.query)};e.prototype.debouncedHandleQueryChanged=function(){this.handleQueryChanged()};e.prototype.render=function(){var e=this;return o(n,null,o("input",{type:"text",value:this.query,placeholder:this.placeholder,onInput:function(t){return e.query=t.target.value}}),this.query!==""?o("button",{class:"svg clear",onClick:function(){return e.query=""}},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}))):o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))};Object.defineProperty(e,"watchers",{get:function(){return{query:["fireQueryChanged"]}},enumerable:false,configurable:true});return e}());s([i(500)],l.prototype,"debouncedHandleQueryChanged",null);l.style=a}}}));
+System.register(["./index-c3cc3b5b.system.js","./debounce-db438a09.system.js"],(function(e){"use strict";var t,r,o,n,i;return{setters:[function(e){t=e.r;r=e.e;o=e.h;n=e.f},function(e){i=e.D}],execute:function(){var a=":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";var s=undefined&&undefined.__decorate||function(e,t,r,o){var n=arguments.length,i=n<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)if(a=e[s])i=(n<3?a(i):n>3?a(t,r,i):a(t,r))||i;return n>3&&i&&Object.defineProperty(t,r,i),i};var l=e("dnn_searchbox",function(){function e(e){t(this,e);this.queryChanged=r(this,"queryChanged",7);this.placeholder="";this.debounced=true;this.query=""}e.prototype.fireQueryChanged=function(){if(this.debounced){this.debouncedHandleQueryChanged()}else{this.handleQueryChanged()}};e.prototype.handleQueryChanged=function(){this.queryChanged.emit(this.query)};e.prototype.debouncedHandleQueryChanged=function(){this.handleQueryChanged()};e.prototype.render=function(){var e=this;return o(n,null,o("input",{type:"text",value:this.query,placeholder:this.placeholder,onInput:function(t){return e.query=t.target.value}}),this.query!==""?o("button",{class:"svg clear",onClick:function(){return e.query=""}},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}))):o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))};Object.defineProperty(e,"watchers",{get:function(){return{query:["fireQueryChanged"]}},enumerable:false,configurable:true});return e}());s([i(500)],l.prototype,"debouncedHandleQueryChanged",null);l.style=a}}}));
 //# sourceMappingURL=dnn-searchbox.system.entry.js.map

package/dist/dnn/dnn-searchbox.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","src/components/dnn-searchbox/dnn-searchbox.tsx"],"names":["dnnSearchboxCss","DnnSearchbox","exports","class_1","hostRef","this","placeholder","debounced","query","prototype","fireQueryChanged","debouncedHandleQueryChanged","handleQueryChanged","queryChanged","emit","render","_this","h","Host","type","value","onInput","e","target","class","onClick","xmlns","height","viewBox","width","fill","d","__decorate","Debounce"],"mappings":"mNAAA,IAAMA,EAAkB,u/CCOXC,EAAYC,EAAA,gBAAA,WALzB,SAAAC,EAAAC,wDAUUC,KAAAC,YAAuB,GAKvBD,KAAAE,UAAqB,KAGNF,KAAAG,MAAgB,GASvCL,EAAAM,UAAAC,iBAAA,WACE,GAAIL,KAAKE,UAAU,CACjBF,KAAKM,kCAEH,CACFN,KAAKO,uBAIDT,EAAAM,UAAAG,mBAAA,WACNP,KAAKQ,aAAaC,KAAKT,KAAKG,QAItBL,EAAAM,UAAAE,4BAAA,WACNN,KAAKO,sBAIPT,EAAAM,UAAAM,OAAA,WAAA,IAAAC,EAAAX,KACE,OACEY,EAACC,EAAI,KACHD,EAAA,QAAA,CAAOE,KAAK,OAAOC,MAAOf,KAAKG,MAC7BF,YAAaD,KAAKC,YAClBe,QAAS,SAAAC,GAAK,OAAAN,EAAKR,MAASc,EAAEC,OAA4BH,SAE3Df,KAAKG,QAAU,GACdS,EAAA,SAAA,CAAQO,MAAM,YACZC,QAAS,WAAM,OAAAT,EAAKR,MAAQ,KAE5BS,EAAA,MAAA,CAAKS,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUb,EAAA,OAAA,CAAMc,EAAE,gBAAgBD,KAAK,SAAQb,EAAA,OAAA,CAAMc,EAAE,sLAGvJd,EAAA,MAAA,CAAKS,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUb,EAAA,OAAA,CAAMc,EAAE,gBAAgBD,KAAK,SAAQb,EAAA,OAAA,CAAMc,EAAE,uXAvDlI,IAoCvBC,EAAA,CADCC,EAAS","sourcesContent":[":host {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: grey;\r\n  --border-active-color: black;\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  --focus-color: var(--dnn-color-primary, blue);\r\n  input {\r\n    width:100%;\r\n    border: var(--border-size) solid var(--border-color);\r\n    outline: none;\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding);\r\n    padding-right: 32px;\r\n    transition: all 300ms ease-in-out;\r\n    &:focus, &:hover{\r\n      outline: none;\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n  svg{\r\n    position: absolute;\r\n    top:0;\r\n    right:0;\r\n    height: 100%;\r\n    transform: scale(0.7);\r\n    fill: var(--color);\r\n    outline: var(--color);\r\n    color: var(--color);\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  button{\r\n    background: transparent;\r\n    border: 0;\r\n    margin: 0;\r\n    padding: 0;\r\n    &:focus, &:hover{\r\n      svg{\r\n        fill: var(--focus-color);\r\n      outline: var(--focus-color);\r\n      color: var(--focus-color);\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n@Component({\r\n  tag: 'dnn-searchbox',\r\n  styleUrl: 'dnn-searchbox.scss',\r\n  shadow: true\r\n})\r\nexport class DnnSearchbox {\r\n\r\n  /**\r\n   * Sets the field placeholder text.\r\n   */\r\n  @Prop() placeholder?: string = \"\";\r\n\r\n  /**\r\n   * Debounces the queryChanged by 500ms.\r\n   */\r\n  @Prop() debounced: boolean = true;\r\n\r\n  /** Sets the query */\r\n  @Prop({mutable: true}) query: string = \"\";\r\n\r\n  /**\r\n   * Fires up each time the search query changes.\r\n   * The data passed is the new query.\r\n   */\r\n  @Event() queryChanged: EventEmitter;\r\n\r\n  @Watch('query')\r\n  fireQueryChanged(){\r\n    if (this.debounced){\r\n      this.debouncedHandleQueryChanged();\r\n    }\r\n    else{\r\n      this.handleQueryChanged();\r\n    }\r\n  }\r\n  \r\n  private handleQueryChanged(){\r\n    this.queryChanged.emit(this.query);\r\n  }\r\n\r\n  @Debounce(500)\r\n  private debouncedHandleQueryChanged(){\r\n    this.handleQueryChanged();\r\n  }\r\n  \r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <input type=\"text\" value={this.query}\r\n          placeholder={this.placeholder}\r\n          onInput={e => this.query = (e.target as HTMLInputElement).value}\r\n        />\r\n        {this.query !== \"\" ?\r\n          <button class=\"svg clear\"\r\n            onClick={() => this.query = \"\"}\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=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n          </button>\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=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>\r\n        }\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}
+{"version":3,"sources":["src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","src/components/dnn-searchbox/dnn-searchbox.tsx"],"names":["dnnSearchboxCss","DnnSearchbox","exports","class_1","hostRef","this","placeholder","debounced","query","prototype","fireQueryChanged","debouncedHandleQueryChanged","handleQueryChanged","queryChanged","emit","render","_this","h","Host","type","value","onInput","e","target","class","onClick","xmlns","height","viewBox","width","fill","d","__decorate","Debounce"],"mappings":"mNAAA,IAAMA,EAAkB,u/CCOXC,EAAYC,EAAA,gBAAA,WALzB,SAAAC,EAAAC,wDAUUC,KAAAC,YAAuB,GAKvBD,KAAAE,UAAqB,KAGNF,KAAAG,MAAgB,GASvCL,EAAAM,UAAAC,iBAAA,WACE,GAAIL,KAAKE,UAAU,CACjBF,KAAKM,kCAEH,CACFN,KAAKO,uBAIDT,EAAAM,UAAAG,mBAAA,WACNP,KAAKQ,aAAaC,KAAKT,KAAKG,QAItBL,EAAAM,UAAAE,4BAAA,WACNN,KAAKO,sBAGPT,EAAAM,UAAAM,OAAA,WAAA,IAAAC,EAAAX,KACE,OACEY,EAACC,EAAI,KACHD,EAAA,QAAA,CAAOE,KAAK,OAAOC,MAAOf,KAAKG,MAC7BF,YAAaD,KAAKC,YAClBe,QAAS,SAAAC,GAAK,OAAAN,EAAKR,MAASc,EAAEC,OAA4BH,SAE3Df,KAAKG,QAAU,GACdS,EAAA,SAAA,CAAQO,MAAM,YACZC,QAAS,WAAM,OAAAT,EAAKR,MAAQ,KAE5BS,EAAA,MAAA,CAAKS,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUb,EAAA,OAAA,CAAMc,EAAE,gBAAgBD,KAAK,SAAQb,EAAA,OAAA,CAAMc,EAAE,sLAGvJd,EAAA,MAAA,CAAKS,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUb,EAAA,OAAA,CAAMc,EAAE,gBAAgBD,KAAK,SAAQb,EAAA,OAAA,CAAMc,EAAE,uXAtDlI,IAoCvBC,EAAA,CADCC,EAAS","sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  --background-color: transparent;\n  --color: #333;\n  --border-size: 1px;\n  --border-color: grey;\n  --border-active-color: black;\n  --border-radius: var(--dnn-controls-radius, 5px);\n  --padding: var(--dnn-controls-padding, 5px);\n  --focus-color: var(--dnn-color-primary, blue);\n  input {\n    width:100%;\n    border: var(--border-size) solid var(--border-color);\n    outline: none;\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    padding-right: 32px;\n    transition: all 300ms ease-in-out;\n    &:focus, &:hover{\n      outline: none;\n      box-shadow: 0 0 2px 2px var(--focus-color);\n    }\n  }\n  svg{\n    position: absolute;\n    top:0;\n    right:0;\n    height: 100%;\n    transform: scale(0.7);\n    fill: var(--color);\n    outline: var(--color);\n    color: var(--color);\n    transition: all 300ms ease-in-out;\n  }\n  button{\n    background: transparent;\n    border: 0;\n    margin: 0;\n    padding: 0;\n    &:focus, &:hover{\n      svg{\n        fill: var(--focus-color);\n      outline: var(--focus-color);\n      color: var(--focus-color);\n      }\n    }\n  }\n}\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\nimport { Debounce } from '../../utilities/debounce';\n@Component({\n  tag: 'dnn-searchbox',\n  styleUrl: 'dnn-searchbox.scss',\n  shadow: true\n})\nexport class DnnSearchbox {\n\n  /**\n   * Sets the field placeholder text.\n   */\n  @Prop() placeholder?: string = \"\";\n\n  /**\n   * Debounces the queryChanged by 500ms.\n   */\n  @Prop() debounced: boolean = true;\n\n  /** Sets the query */\n  @Prop({mutable: true}) query: string = \"\";\n\n  /**\n   * Fires up each time the search query changes.\n   * The data passed is the new query.\n   */\n  @Event() queryChanged: EventEmitter<string>;\n\n  @Watch('query')\n  fireQueryChanged(){\n    if (this.debounced){\n      this.debouncedHandleQueryChanged();\n    }\n    else{\n      this.handleQueryChanged();\n    }\n  }\n  \n  private handleQueryChanged(){\n    this.queryChanged.emit(this.query);\n  }\n\n  @Debounce(500)\n  private debouncedHandleQueryChanged(){\n    this.handleQueryChanged();\n  }\n\n  render() {\n    return (\n      <Host>\n        <input type=\"text\" value={this.query}\n          placeholder={this.placeholder}\n          onInput={e => this.query = (e.target as HTMLInputElement).value}\n        />\n        {this.query !== \"\" ?\n          <button class=\"svg clear\"\n            onClick={() => this.query = \"\"}\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\n          </button>\n        :\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>\n        }\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -1,37 +1,37 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-b5a28c1d.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-20e42ad7.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) {
-    registerInstance(this, hostRef);
-    this.sortChanged = 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 (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" })))));
-  }
-};
+const DnnSortIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sortChanged = 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 (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" })))));
+  }
+};
 DnnSortIcon.style = dnnSortIconCss;
 
 export { DnnSortIcon as dnn_sort_icon };

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

@@ -1 +1 @@
-{"file":"dnn-sort-icon.entry.esm.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,QACE,EAAC,IAAI,QACH,cACE,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;MAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,wCAAwC,GAAQ,CAAM,EAE3H,IAAI,CAAC,aAAa,IAAI,KAAK;MAC1B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAQ,CAAM,EAEvG,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,qBAAqB,GAAQ,CAAM,CAElG,CACJ,EACP;GACH;;;;;;","names":[],"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.esm.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,QACE,EAAC,IAAI,QACH,cACE,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;MAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,wCAAwC,GAAQ,CAAM,EAE3H,IAAI,CAAC,aAAa,IAAI,KAAK;MAC1B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAQ,CAAM,EAEvG,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,qBAAqB,GAAQ,CAAM,CAElG,CACJ,EACP;GACH;;;;;;","names":[],"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/dnn/dnn-sort-icon.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-a3a55419.system.js"],(function(t){"use strict";var o,n,r,i;return{setters:[function(t){o=t.r;n=t.e;r=t.h;i=t.f}],execute:function(){var e=":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))}";var s=t("dnn_sort_icon",function(){function t(t){o(this,t);this.sortChanged=n(this,"sortChanged",7);this.sortDirection="none"}t.prototype.changeSort=function(){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)};t.prototype.render=function(){var t=this;return r(i,null,r("button",{class:{active:this.sortDirection!="none"},onClick:function(){return t.changeSort()}},this.sortDirection=="none"&&r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},r("path",{d:"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z"})),this.sortDirection=="asc"&&r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},r("path",{d:"M 0 7 H 12 L 6 0 Z"})),this.sortDirection=="desc"&&r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},r("path",{d:"M 0 9 H 12 L 6 16 Z"}))))};return t}());s.style=e}}}));
+System.register(["./index-c3cc3b5b.system.js"],(function(t){"use strict";var o,r,n,e;return{setters:[function(t){o=t.r;r=t.e;n=t.h;e=t.f}],execute:function(){var i=":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)}";var s=t("dnn_sort_icon",function(){function t(t){o(this,t);this.sortChanged=r(this,"sortChanged",7);this.sortDirection="none"}t.prototype.changeSort=function(){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)};t.prototype.render=function(){var t=this;return n(e,null,n("button",{class:{active:this.sortDirection!="none"},onClick:function(){return t.changeSort()}},this.sortDirection=="none"&&n("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},n("path",{d:"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z"})),this.sortDirection=="asc"&&n("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},n("path",{d:"M 0 7 H 12 L 6 0 Z"})),this.sortDirection=="desc"&&n("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},n("path",{d:"M 0 9 H 12 L 6 16 Z"}))))};return t}());s.style=i}}}));
 //# sourceMappingURL=dnn-sort-icon.system.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["dnnSortIconCss","DnnSortIcon","exports","class_1","hostRef","this","sortDirection","prototype","changeSort","sortChanged","emit","render","_this","h","Host","class","active","onClick","xmlns","viewBox","d"],"mappings":"8JAAA,IAAMA,EAAiB,6aCOVC,EAAWC,EAAA,gBAAA,WALxB,SAAAC,EAAAC,sDAOUC,KAAAC,cAAyC,OAKzCH,EAAAI,UAAAC,WAAA,WACN,OAAQH,KAAKC,eACX,IAAK,MACHD,KAAKC,cAAgB,OACrB,MACF,IAAK,OACHD,KAAKC,cAAgB,MACrB,MACF,IAAK,OACHD,KAAKC,cAAgB,MACrB,MACF,QACE,MAGJD,KAAKI,YAAYC,KAAKL,KAAKC,gBAG7BH,EAAAI,UAAAI,OAAA,WAAA,IAAAC,EAAAP,KACE,OACEQ,EAACC,EAAI,KACHD,EAAA,SAAA,CACEE,MAAO,CAACC,OAAUX,KAAKC,eAAiB,QACxCW,QAAS,WAAM,OAAAL,EAAKJ,eAEnBH,KAAKC,eAAiB,QACrBO,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,aAAYN,EAAA,OAAA,CAAMO,EAAE,4CAErEf,KAAKC,eAAiB,OACrBO,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,aAAYN,EAAA,OAAA,CAAMO,EAAE,wBAErEf,KAAKC,eAAiB,QACrBO,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,aAAYN,EAAA,OAAA,CAAMO,EAAE,qCAvCxD","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,"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"],"names":["dnnSortIconCss","DnnSortIcon","exports","class_1","hostRef","this","sortDirection","prototype","changeSort","sortChanged","emit","render","_this","h","Host","class","active","onClick","xmlns","viewBox","d"],"mappings":"8JAAA,IAAMA,EAAiB,sdCOVC,EAAWC,EAAA,gBAAA,WALxB,SAAAC,EAAAC,sDAOUC,KAAAC,cAAyC,OAKzCH,EAAAI,UAAAC,WAAA,WACN,OAAQH,KAAKC,eACX,IAAK,MACHD,KAAKC,cAAgB,OACrB,MACF,IAAK,OACHD,KAAKC,cAAgB,MACrB,MACF,IAAK,OACHD,KAAKC,cAAgB,MACrB,MACF,QACE,MAGJD,KAAKI,YAAYC,KAAKL,KAAKC,gBAG7BH,EAAAI,UAAAI,OAAA,WAAA,IAAAC,EAAAP,KACE,OACEQ,EAACC,EAAI,KACHD,EAAA,SAAA,CACEE,MAAO,CAACC,OAAUX,KAAKC,eAAiB,QACxCW,QAAS,WAAM,OAAAL,EAAKJ,eAEnBH,KAAKC,eAAiB,QACrBO,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,aAAYN,EAAA,OAAA,CAAMO,EAAE,4CAErEf,KAAKC,eAAiB,OACrBO,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,aAAYN,EAAA,OAAA,CAAMO,EAAE,wBAErEf,KAAKC,eAAiB,QACrBO,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,aAAYN,EAAA,OAAA,CAAMO,EAAE,qCAvCxD","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"]}

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

@@ -1,25 +1,25 @@
-import { r as registerInstance, h, f as Host } from './index-b5a28c1d.js';
+import { r as registerInstance, h, f as Host } from './index-20e42ad7.js';
 
 const dnnTabCss = "";
 
-let DnnTab = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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)));
-  }
-};
+const DnnTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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)));
+  }
+};
 DnnTab.style = dnnTabCss;
 
 export { DnnTab as dnn_tab };

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

@@ -1 +1 @@
-{"file":"dnn-tab.entry.esm.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,QACI,EAAC,IAAI,QACA,IAAI,CAAC,OAAO;MACT,eAAa,CAEd,EACT;GACL;;;;;;","names":[],"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.esm.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,QACI,EAAC,IAAI,QACA,IAAI,CAAC,OAAO;MACT,eAAa,CAEd,EACT;GACL;;;;;;","names":[],"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/dnn/dnn-tab.system.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function u(t){try{s(r.next(t))}catch(t){o(t)}}function a(t){try{s(r["throw"](t))}catch(t){o(t)}}function s(t){t.done?n(t.value):i(t.value).then(u,a)}s((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,u;return u={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(t){return function(e){return s([t,e])}}function s(u){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;i=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){n.label=u[1];break}if(u[0]===6&&n.label<o[1]){n.label=o[1];o=u;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(u);break}if(o[2])n.ops.pop();n.trys.pop();continue}u=e.call(t,n)}catch(t){u=[6,t];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./index-a3a55419.system.js"],(function(t){"use strict";var e,n,r;return{setters:[function(t){e=t.r;n=t.h;r=t.f}],execute:function(){var i="";var o=t("dnn_tab",function(){function t(t){e(this,t);this.visible=false}t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.visible=true;return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.visible=false;return[2]}))}))};t.prototype.render=function(){return n(r,null,this.visible&&n("slot",null))};return t}());o.style=i}}}));
+var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function u(t){try{c(r.next(t))}catch(t){o(t)}}function a(t){try{c(r["throw"](t))}catch(t){o(t)}}function c(t){t.done?n(t.value):i(t.value).then(u,a)}c((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,u;return u={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(t){return function(e){return c([t,e])}}function c(u){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;i=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){n.label=u[1];break}if(u[0]===6&&n.label<o[1]){n.label=o[1];o=u;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(u);break}if(o[2])n.ops.pop();n.trys.pop();continue}u=e.call(t,n)}catch(t){u=[6,t];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./index-c3cc3b5b.system.js"],(function(t){"use strict";var e,n,r;return{setters:[function(t){e=t.r;n=t.h;r=t.f}],execute:function(){var i="";var o=t("dnn_tab",function(){function t(t){e(this,t);this.visible=false}t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.visible=true;return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.visible=false;return[2]}))}))};t.prototype.render=function(){return n(r,null,this.visible&&n("slot",null))};return t}());o.style=i}}}));
 //# sourceMappingURL=dnn-tab.system.entry.js.map

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

@@ -1,46 +1,46 @@
-import { r as registerInstance, h, f as Host } from './index-b5a28c1d.js';
+import { r as registerInstance, h, f as Host } from './index-20e42ad7.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) {
-    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 (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))));
-  }
-};
+const DnnTabs = class {
+  constructor(hostRef) {
+    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 (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))));
+  }
+};
 DnnTabs.style = dnnTabsCss;
 
 export { DnnTabs as dnn_tabs };

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

@@ -1 +1 @@
-{"file":"dnn-tabs.entry.esm.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,QACI,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxB,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,GAAG,SAAS,GAAE,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC,EACN,WAAK,KAAK,EAAC,YAAY,IACnB,eAAa,CACX,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","./src/components/dnn-tabs/dnn-tabs.tsx"],"sourcesContent":[":host {\r\n    /**\r\n    * @prop --color-background: The color of the inactive tabs.\r\n    * @prop --color-text: The color of the text for inactive tabs.\r\n    * @prop --color-visible: The color of the active tab.\r\n    * @prop --color-visible-text: The color of the text for the active tab.\r\n    * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n    */\r\n    display: block;\r\n    --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n    --color-text: var(--dnn-color-secondary-contrast, #333);\r\n    --color-visible: var(--dnn-color-primary, #3792ED);\r\n    --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n    --color-focus: var(--dnn-color-primary, #3792ed);\r\n  }\r\n\r\n  .tabTitles{\r\n      display: flex;\r\n      background-color: var(--color-background);\r\n      color: var(--color-text);\r\n      button{\r\n          padding: 0.5rem 1rem;\r\n          border: 0;\r\n          margin: 0;\r\n          background-color: transparent;\r\n          &.visible{\r\n              background-color: var(--color-visible);\r\n              color: var(--color-bisible-text);\r\n          }\r\n          &:focus, &:hover{\r\n            outline: none;\r\n            box-shadow: 0 0 2px 2px var(--color-focus);\r\n          }\r\n      }\r\n  }\r\n\r\n  .currentTab{\r\n      border: 1px solid var(--color-background);\r\n      padding: 1rem;\r\n  }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        requestAnimationFrame(() => {\r\n            this.updateTitles();\r\n            this.showFirstTab();\r\n        });\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}
+{"file":"dnn-tabs.entry.esm.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,QACI,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxB,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,GAAG,SAAS,GAAE,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC,EACN,WAAK,KAAK,EAAC,YAAY,IACnB,eAAa,CACX,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","./src/components/dnn-tabs/dnn-tabs.tsx"],"sourcesContent":[":host {\r\n    /**\r\n    * @prop --color-background: The color of the inactive tabs.\r\n    * @prop --color-text: The color of the text for inactive tabs.\r\n    * @prop --color-visible: The color of the active tab.\r\n    * @prop --color-visible-text: The color of the text for the active tab.\r\n    * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n    */\r\n    display: block;\r\n    --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n    --color-text: var(--dnn-color-secondary-contrast, #333);\r\n    --color-visible: var(--dnn-color-primary, #3792ED);\r\n    --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n    --color-focus: var(--dnn-color-primary, #3792ed);\r\n  }\r\n\r\n  .tabTitles{\r\n      display: flex;\r\n      background-color: var(--color-background);\r\n      color: var(--color-text);\r\n      button{\r\n          padding: 0.5rem 1rem;\r\n          border: 0;\r\n          margin: 0;\r\n          background-color: transparent;\r\n          &.visible{\r\n              background-color: var(--color-visible);\r\n              color: var(--color-bisible-text);\r\n          }\r\n          &:focus, &:hover{\r\n            outline: none;\r\n            box-shadow: 0 0 2px 2px var(--color-focus);\r\n          }\r\n      }\r\n  }\r\n\r\n  .currentTab{\r\n      border: 1px solid var(--color-background);\r\n      padding: 1rem;\r\n  }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        requestAnimationFrame(() => {\r\n            this.updateTitles();\r\n            this.showFirstTab();\r\n        });\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}

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

@@ -1,2 +1,2 @@
-var __spreadArray=this&&this.__spreadArray||function(t,r){for(var o=0,e=r.length,a=t.length;o<e;o++,a++)t[a]=r[o];return t};System.register(["./index-a3a55419.system.js"],(function(t){"use strict";var r,o,e;return{setters:[function(t){r=t.r;o=t.h;e=t.f}],execute:function(){var a=":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}";var n=t("dnn_tabs",function(){function t(t){r(this,t);this.tabTitles=[];this.selectedTabTitle=""}t.prototype.componentDidLoad=function(){var t=this;requestAnimationFrame((function(){t.updateTitles();t.showFirstTab()}))};t.prototype.getTabs=function(){return this.component.shadowRoot.querySelector("slot").assignedElements()};t.prototype.updateTitles=function(){var t=this;var r=this.getTabs();r.forEach((function(r){return t.tabTitles=__spreadArray(__spreadArray([],t.tabTitles),[r.tabTitle])}))};t.prototype.showFirstTab=function(){var t=this.getTabs()[0];t.show();this.selectedTabTitle=t.tabTitle};t.prototype.showTab=function(t){var r=this.getTabs();r.forEach((function(r){if(r.tabTitle==t){r.show();return}r.hide()}));this.selectedTabTitle=t};t.prototype.render=function(){var t=this;return o(e,{ref:function(r){return t.component=r}},o("div",{class:"tabTitles"},this.tabTitles.map((function(r){return o("button",{class:t.selectedTabTitle==r?"visible":"",onClick:function(){return t.showTab(r)}},r)}))),o("div",{class:"currentTab"},o("slot",null)))};return t}());n.style=a}}}));
+var __spreadArray=this&&this.__spreadArray||function(t,r,o){if(o||arguments.length===2)for(var e=0,a=r.length,n;e<a;e++){if(n||!(e in r)){if(!n)n=Array.prototype.slice.call(r,0,e);n[e]=r[e]}}return t.concat(n||Array.prototype.slice.call(r))};System.register(["./index-c3cc3b5b.system.js"],(function(t){"use strict";var r,o,e;return{setters:[function(t){r=t.r;o=t.h;e=t.f}],execute:function(){var a=":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}";var n=t("dnn_tabs",function(){function t(t){r(this,t);this.tabTitles=[];this.selectedTabTitle=""}t.prototype.componentDidLoad=function(){var t=this;requestAnimationFrame((function(){t.updateTitles();t.showFirstTab()}))};t.prototype.getTabs=function(){return this.component.shadowRoot.querySelector("slot").assignedElements()};t.prototype.updateTitles=function(){var t=this;var r=this.getTabs();r.forEach((function(r){return t.tabTitles=__spreadArray(__spreadArray([],t.tabTitles,true),[r.tabTitle],false)}))};t.prototype.showFirstTab=function(){var t=this.getTabs()[0];t.show();this.selectedTabTitle=t.tabTitle};t.prototype.showTab=function(t){var r=this.getTabs();r.forEach((function(r){if(r.tabTitle==t){r.show();return}r.hide()}));this.selectedTabTitle=t};t.prototype.render=function(){var t=this;return o(e,{ref:function(r){return t.component=r}},o("div",{class:"tabTitles"},this.tabTitles.map((function(r){return o("button",{class:t.selectedTabTitle==r?"visible":"",onClick:function(){return t.showTab(r)}},r)}))),o("div",{class:"currentTab"},o("slot",null)))};return t}());n.style=a}}}));
 //# sourceMappingURL=dnn-tabs.system.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","src/components/dnn-tabs/dnn-tabs.tsx"],"names":["dnnTabsCss","DnnTabs","exports","class_1","hostRef","this","tabTitles","selectedTabTitle","prototype","componentDidLoad","_this","requestAnimationFrame","updateTitles","showFirstTab","getTabs","component","shadowRoot","querySelector","assignedElements","tabs","forEach","tab","__spreadArray","tabTitle","show","showTab","hide","render","h","Host","ref","el","class","map","onClick"],"mappings":"kRAAA,IAAMA,EAAa,4yBCONC,EAAOC,EAAA,WAAA,WALpB,SAAAC,EAAAC,aAQaC,KAAAC,UAAsB,GACtBD,KAAAE,iBAA2B,GAEpCJ,EAAAK,UAAAC,iBAAA,WAAA,IAAAC,EAAAL,KACIM,uBAAsB,WAClBD,EAAKE,eACLF,EAAKG,mBAILV,EAAAK,UAAAM,QAAA,WACJ,OAAOT,KAAKU,UAAUC,WAAWC,cAAc,QAAQC,oBAGnDf,EAAAK,UAAAI,aAAA,WAAA,IAAAF,EAAAL,KACJ,IAAMc,EAAOd,KAAKS,UAClBK,EAAKC,SAAQ,SAAAC,GAAO,OAAAX,EAAKJ,UAASgB,cAAAA,cAAA,GAAOZ,EAAKJ,WAAS,CAAEe,EAAIE,eAGzDpB,EAAAK,UAAAK,aAAA,WACJ,IAAMQ,EAAMhB,KAAKS,UAAU,GAC3BO,EAAIG,OACJnB,KAAKE,iBAAmBc,EAAIE,UAGxBpB,EAAAK,UAAAiB,QAAA,SAAQF,GACZ,IAAMJ,EAAOd,KAAKS,UAClBK,EAAKC,SAAQ,SAAAC,GACT,GAAIA,EAAIE,UAAYA,EAAS,CACzBF,EAAIG,OACJ,OAGJH,EAAIK,UAERrB,KAAKE,iBAAmBgB,GAG5BpB,EAAAK,UAAAmB,OAAA,WAAA,IAAAjB,EAAAL,KACI,OACIuB,EAACC,EAAI,CAACC,IAAK,SAAAC,GAAM,OAAArB,EAAKK,UAAYgB,IAC9BH,EAAA,MAAA,CAAKI,MAAM,aACN3B,KAAKC,UAAU2B,KAAI,SAAAV,GAChB,OAAAK,EAAA,SAAA,CACII,MAAOtB,EAAKH,kBAAoBgB,EAAW,UAAW,GACtDW,QAAS,WAAM,OAAAxB,EAAKe,QAAQF,KAE3BA,OAIbK,EAAA,MAAA,CAAKI,MAAM,cACPJ,EAAA,OAAA,kBAvDA","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,"sources":["src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","src/components/dnn-tabs/dnn-tabs.tsx"],"names":["dnnTabsCss","DnnTabs","exports","class_1","hostRef","this","tabTitles","selectedTabTitle","prototype","componentDidLoad","_this","requestAnimationFrame","updateTitles","showFirstTab","getTabs","component","shadowRoot","querySelector","assignedElements","tabs","forEach","tab","__spreadArray","tabTitle","show","showTab","hide","render","h","Host","ref","el","class","map","onClick"],"mappings":"wYAAA,IAAMA,EAAa,4yBCONC,EAAOC,EAAA,WAAA,WALpB,SAAAC,EAAAC,aAQaC,KAAAC,UAAsB,GACtBD,KAAAE,iBAA2B,GAEpCJ,EAAAK,UAAAC,iBAAA,WAAA,IAAAC,EAAAL,KACIM,uBAAsB,WAClBD,EAAKE,eACLF,EAAKG,mBAILV,EAAAK,UAAAM,QAAA,WACJ,OAAOT,KAAKU,UAAUC,WAAWC,cAAc,QAAQC,oBAGnDf,EAAAK,UAAAI,aAAA,WAAA,IAAAF,EAAAL,KACJ,IAAMc,EAAOd,KAAKS,UAClBK,EAAKC,SAAQ,SAAAC,GAAO,OAAAX,EAAKJ,UAASgB,cAAAA,cAAA,GAAOZ,EAAKJ,UAAS,MAAA,CAAEe,EAAIE,UAAQ,WAGjEpB,EAAAK,UAAAK,aAAA,WACJ,IAAMQ,EAAMhB,KAAKS,UAAU,GAC3BO,EAAIG,OACJnB,KAAKE,iBAAmBc,EAAIE,UAGxBpB,EAAAK,UAAAiB,QAAA,SAAQF,GACZ,IAAMJ,EAAOd,KAAKS,UAClBK,EAAKC,SAAQ,SAAAC,GACT,GAAIA,EAAIE,UAAYA,EAAS,CACzBF,EAAIG,OACJ,OAGJH,EAAIK,UAERrB,KAAKE,iBAAmBgB,GAG5BpB,EAAAK,UAAAmB,OAAA,WAAA,IAAAjB,EAAAL,KACI,OACIuB,EAACC,EAAI,CAACC,IAAK,SAAAC,GAAM,OAAArB,EAAKK,UAAYgB,IAC9BH,EAAA,MAAA,CAAKI,MAAM,aACN3B,KAAKC,UAAU2B,KAAI,SAAAV,GAChB,OAAAK,EAAA,SAAA,CACII,MAAOtB,EAAKH,kBAAoBgB,EAAW,UAAW,GACtDW,QAAS,WAAM,OAAAxB,EAAKe,QAAQF,KAE3BA,OAIbK,EAAA,MAAA,CAAKI,MAAM,cACPJ,EAAA,OAAA,kBAvDA","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}"]}