@dnncommunity/dnn-elements 0.13.0-beta.1

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

@@ -0,0 +1,67 @@
+:host {
+  /**
+   * @prop --max-width: The maximum width of the module.
+  */
+  display: block;
+}
+:host .overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(2px);
+  transition: all 300ms ease-in-out;
+  visibility: hidden;
+  opacity: 0;
+}
+:host .overlay .modal {
+  max-width: var(--max-width, 1200px);
+  background-color: white;
+  padding: 30px;
+  transform: scale(2);
+  transition: all 300ms ease-in-out;
+  z-index: 2;
+  position: relative;
+  margin: 10%;
+  max-height: 80%;
+  border-radius: var(--dnn-controls-radius, 5px);
+  box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.5);
+  display: block;
+}
+:host .overlay .modal .close {
+  position: absolute;
+  background-color: white;
+  border: 2px solid white;
+  border-radius: 50%;
+  padding: 0;
+  margin: 0;
+  top: -12px;
+  right: -12px;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host .overlay .modal .close:focus, :host .overlay .modal .close:hover {
+  box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);
+}
+:host .overlay .modal .close svg {
+  width: 24px;
+  height: 24px;
+  color: grey;
+}
+:host .overlay.visible {
+  visibility: visible;
+  opacity: 1;
+}
+:host .overlay.visible .modal {
+  transform: scale(1);
+  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.5);
+  display: block;
+}

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

@@ -0,0 +1,173 @@
+import { Component, Element, Host, h, Prop, Event, Method, State } from '@stencil/core';
+export class DnnModal {
+  constructor() {
+    /**
+     * Pass false to remove the backdrop click auto-dismiss feature.
+     */
+    this.backdropDismiss = true;
+    /**
+     * Optionally pass the aria-label text for the close button.
+     * Defaults to "Close modal" if not provided.
+     */
+    this.closeText = "Close modal";
+    /**
+     * Optionally you can pass false to not show the close button.
+     * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop
+     * or provide your own dismissal logic in the modal content.
+     */
+    this.showCloseButton = true;
+    this.visible = false;
+  }
+  /**
+   * Shows the modal
+   */
+  async show() {
+    this.visible = true;
+  }
+  /**
+   * Hides the modal
+   */
+  async hide() {
+    this.visible = false;
+  }
+  handleDismiss() {
+    this.visible = false;
+    this.dismissed.emit();
+  }
+  handleBackdropClick(e) {
+    const element = e.target;
+    if (element.id === "backdrop" && this.backdropDismiss) {
+      this.handleDismiss();
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { id: "backdrop", class: this.visible ? 'overlay visible' : 'overlay', onClick: e => this.handleBackdropClick(e) },
+        h("div", { class: "modal" },
+          this.showCloseButton &&
+            h("button", { class: "close", "aria-label": this.closeText, onClick: () => this.handleDismiss() },
+              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("slot", null)))));
+  }
+  static get is() { return "dnn-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-modal.css"]
+  }; }
+  static get properties() { return {
+    "backdropDismiss": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Pass false to remove the backdrop click auto-dismiss feature."
+      },
+      "attribute": "backdrop-dismiss",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "closeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optionally pass the aria-label text for the close button.\r\nDefaults to \"Close modal\" if not provided."
+      },
+      "attribute": "close-text",
+      "reflect": false,
+      "defaultValue": "\"Close modal\""
+    },
+    "showCloseButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optionally you can pass false to not show the close button.\r\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\nor provide your own dismissal logic in the modal content."
+      },
+      "attribute": "show-close-button",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "visible": {}
+  }; }
+  static get events() { return [{
+      "method": "dismissed",
+      "name": "dismissed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the modal is dismissed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the modal",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hides the modal",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=dnn-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-modal.js","sourceRoot":"","sources":["../../../src/components/dnn-modal/dnn-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,QAAQ;EALrB;IASE;;OAEG;IACK,oBAAe,GAAY,IAAI,CAAC;IAExC;;;OAGG;IACK,cAAS,GAAY,aAAa,CAAC;IAE3C;;;;OAIG;IACK,oBAAe,GAAa,IAAI,CAAC;IAEhC,YAAO,GAAY,KAAK,CAAC;GA0DnC;EAxDC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;EACtB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAEO,mBAAmB,CAAC,CAAa;IACvC,MAAM,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC;IAC1C,IAAI,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,eAAe,EAAC;MACpD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACnD,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAEzC,WAAK,KAAK,EAAC,OAAO;UACf,IAAI,CAAC,eAAe;YACnB,cACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;cAEnC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;gBAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;gBAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;UAEX,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter, Method, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-modal',\r\n  styleUrl: 'dnn-modal.scss',\r\n  shadow: true\r\n})\r\nexport class DnnModal {\r\n  \r\n  @Element() el!: HTMLDnnModalElement;\r\n  \r\n  /**\r\n   * Pass false to remove the backdrop click auto-dismiss feature.\r\n   */\r\n  @Prop() backdropDismiss: boolean = true;\r\n\r\n  /**\r\n   * Optionally pass the aria-label text for the close button.\r\n   * Defaults to \"Close modal\" if not provided.\r\n   */\r\n  @Prop() closeText?: string = \"Close modal\";\r\n\r\n  /**\r\n   * Optionally you can pass false to not show the close button.\r\n   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\n   * or provide your own dismissal logic in the modal content.\r\n   */\r\n  @Prop() showCloseButton?: boolean = true;\r\n\r\n  @State() visible: boolean = false;\r\n\r\n  /**\r\n   * Shows the modal\r\n   */\r\n  @Method()\r\n  async show() {\r\n    this.visible = true;\r\n  }\r\n\r\n  /**\r\n   * Hides the modal\r\n   */\r\n  @Method()\r\n  async hide() {\r\n    this.visible = false;\r\n  }\r\n\r\n  /**\r\n   * Fires when the modal is dismissed.\r\n   */\r\n  @Event() dismissed!: EventEmitter;\r\n\r\n  private handleDismiss(){\r\n    this.visible = false;\r\n    this.dismissed.emit();\r\n  }\r\n\r\n  private handleBackdropClick(e: MouseEvent): void {\r\n    const element = (e.target as HTMLElement);\r\n    if (element.id === \"backdrop\" && this.backdropDismiss){\r\n      this.handleDismiss();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"backdrop\"\r\n          class={this.visible ? 'overlay visible' : 'overlay'}\r\n          onClick={e => this.handleBackdropClick(e)}\r\n        >\r\n          <div class=\"modal\">\r\n            {this.showCloseButton &&\r\n              <button\r\n                class=\"close\"\r\n                aria-label={this.closeText}\r\n                onClick={() => this.handleDismiss()}\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            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,48 @@
+:host {
+  position: relative;
+  display: flex;
+  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;
+  transition: all 300ms ease-in-out;
+}
+:host input:focus, :host input:hover {
+  outline: none;
+  box-shadow: 0 0 2px 2px var(--focus-color);
+}
+:host svg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  transform: scale(0.7);
+  fill: var(--color);
+  outline: var(--color);
+  color: var(--color);
+  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);
+}

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

@@ -0,0 +1,137 @@
+var __decorate = (this && this.__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;
+};
+import { Component, Host, h, Event, Watch, Prop } from '@stencil/core';
+import { Debounce } from '../../utilities/debounce';
+export class DnnSearchbox {
+  constructor() {
+    /**
+     * 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 is() { return "dnn-searchbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-searchbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-searchbox.css"]
+  }; }
+  static get properties() { return {
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets the field placeholder text."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "debounced": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Debounces the queryChanged by 500ms."
+      },
+      "attribute": "debounced",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "query": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the query"
+      },
+      "attribute": "query",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "queryChanged",
+      "name": "queryChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires up each time the search query changes.\r\nThe data passed is the new query."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "query",
+      "methodName": "fireQueryChanged"
+    }]; }
+}
+__decorate([
+  Debounce(500)
+], DnnSearchbox.prototype, "debouncedHandleQueryChanged", null);
+//# sourceMappingURL=dnn-searchbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-searchbox.js","sourceRoot":"","sources":["../../../src/components/dnn-searchbox/dnn-searchbox.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAMpD,MAAM,OAAO,YAAY;EALzB;IAOE;;OAEG;IACK,gBAAW,GAAY,EAAE,CAAC;IAElC;;OAEG;IACK,cAAS,GAAY,IAAI,CAAC;IAElC,qBAAqB;IACE,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;EACH,CAAC;EAEO,kBAAkB;IACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACrC,CAAC;EAGO,2BAA2B;IACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,GAC/D;MACD,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC;QAClB,cAAQ,KAAK,EAAC,WAAW,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE;UAE9B,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;YAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;YAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;QACX,CAAC;UACD,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;YAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;YAAA,YAAM,CAAC,EAAC,4OAA4O,GAAE,CAAM,CAElY,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF;AAzBC;EADC,QAAQ,CAAC,GAAG,CAAC;+DAGb","sourcesContent":["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"]}

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

@@ -0,0 +1,32 @@
+:host {
+  /**
+  * @prop --color: Normal Color of the inactive sort icon.
+  * @prop --color-sorted: Color of the sorted sort icon.
+  * @prop --color-hover: Color of the icons when hovered.
+  */
+  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));
+}

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

@@ -0,0 +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": {}
+      }
+    }]; }
+}
+//# sourceMappingURL=dnn-sort-icon.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +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": []
+      }
+    }
+  }; }
+}
+//# sourceMappingURL=dnn-tab.js.map

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

@@ -0,0 +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}"]}