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

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

@@ -2,55 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff4d89a.js');
+const index = require('./index-d53702a3.js');
 
-const dnnCheckboxCss = ":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";
+const dnnCheckboxCss = ":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button .unchecked,button .checked,button .intermediate{display:none}button.checked .checked,button.unchecked .unchecked,button.intermediate .intermediate{display:block}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";
 
-let DnnCheckbox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checkedchange = index.createEvent(this, "checkedchange", 7);
-    /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */
-    this.checked = false;
-    /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */
-    this.useIntermediate = false;
-  }
-  changeState() {
-    if (!this.useIntermediate) {
-      this.checked = !this.checked;
-      this.emitEvents();
-      return;
-    }
-    if (this.checked === true) {
-      this.checked = false;
-      this.button.classList.remove("undefined");
-      this.emitEvents();
-      return;
-    }
-    if (this.checked === undefined) {
-      this.checked = true;
-      this.button.classList.remove("undefined");
-      this.emitEvents();
-      return;
-    }
-    if (this.checked === false) {
-      this.checked = undefined;
-      this.button.classList.add("undefined");
-      this.emitEvents();
-      return;
-    }
-  }
-  emitEvents() {
-    this.checkedchange.emit(this.checked);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { class: "icon", onClick: () => this.changeState(), ref: el => this.button = el }, this.checked === false &&
-      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })), this.checked === true &&
-      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })), this.checked === undefined &&
-      index.h("svg", { class: "undefined", xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("g", null, index.h("rect", { fill: "none", height: "24", width: "24" })), index.h("g", null, index.h("g", null, index.h("g", null, index.h("path", { d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z" })))))), index.h("label", { htmlFor: this.el.id, onClick: () => this.changeState() }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-};
+const DnnCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checkedchange = index.createEvent(this, "checkedchange", 7);
+    /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */
+    this.checked = "unchecked";
+    /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */
+    this.useIntermediate = false;
+  }
+  changeState() {
+    if (!this.useIntermediate) {
+      switch (this.checked) {
+        case "checked":
+          this.checked = "unchecked";
+          break;
+        case "unchecked":
+        case "intermediate":
+          this.checked = "checked";
+          break;
+        default:
+          break;
+      }
+      this.checkedchange.emit(this.checked);
+      return;
+    }
+    switch (this.checked) {
+      case "checked":
+        this.checked = "intermediate";
+        break;
+      case "intermediate":
+        this.checked = "unchecked";
+        break;
+      case "unchecked":
+        this.checked = "checked";
+        break;
+      default:
+        break;
+    }
+    this.checkedchange.emit(this.checked);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("button", { class: `icon ${this.checked}`, onClick: () => this.changeState() }, index.h("div", { class: "unchecked" }, index.h("slot", { name: "uncheckedicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })))), index.h("div", { class: "checked" }, index.h("slot", { name: "checkedicon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })))), index.h("div", { class: "intermediate" }, index.h("slot", { name: "intermediateicon" }, index.h("svg", { class: "undefined", xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("g", null, index.h("rect", { fill: "none", height: "24", width: "24" })), index.h("g", null, index.h("g", null, index.h("g", null, index.h("path", { d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z" })))))))), index.h("label", { htmlFor: this.el.id, onClick: () => this.changeState() }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
 DnnCheckbox.style = dnnCheckboxCss;
 
 exports.dnn_checkbox = DnnCheckbox;

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

@@ -1 +1 @@
-{"file":"dnn-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,qfAAqf;;ICO/f,WAAW;EALxB;;;;IASyB,YAAO,GAAwB,KAAK,CAAC;;IAGpD,oBAAe,GAAY,KAAK,CAAC;GA0D1C;EAhDS,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAC;MACxB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,OAAO;KACR;IACD,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAC;MACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;MAC1C,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,OAAO;KACR;IACD,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAC;MAC7B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;MAC1C,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,OAAO;KACR;IACD,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAC;MACzB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;MACzB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;MACvC,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,OAAO;KACR;GACF;EAEO,UAAU;IAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,oBAAQ,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,IAChF,IAAI,CAAC,OAAO,KAAK,KAAK;MACrBA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,4FAA4F,GAAE,CAAM,EAExP,IAAI,CAAC,OAAO,KAAK,IAAI;MACpBA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,qIAAqI,GAAE,CAAM,EAEjS,IAAI,CAAC,OAAO,KAAK,SAAS;MACzBA,iBAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,uBAAmB,eAAe,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,mBAAGA,kBAAM,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAE,CAAI,EAAAA,mBAAGA,mBAAGA,mBAAGA,kBAAM,CAAC,EAAC,wGAAwG,GAAE,CAAI,CAAI,CAAI,CAAM,CAEnV,EACTA,mBAAO,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAAEA,qBAAa,CAAQ,CAC/E,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","./src/components/dnn-checkbox/dnn-checkbox.tsx"],"sourcesContent":[":host {\r\n    /**\r\n    * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.\r\n    */\r\n  --focus-color: var(--dnn-color-primary, #3792ED);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  margin: 3px;\r\n}\r\nbutton{\r\n  background-color: transparent;\r\n  border: 0;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline: none;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  svg.undefined{\r\n    opacity: 0.45;\r\n  }\r\n  &:focus{\r\n    box-shadow: 0 0 2px 2px var(--focus-color);\r\n  }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-checkbox',\r\n  styleUrl: 'dnn-checkbox.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnCheckbox {\r\n  @Element() el: HTMLDnnCheckboxElement;\r\n\r\n  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\r\n  @Prop({mutable: true}) checked: boolean | undefined = false;\r\n\r\n  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\r\n  @Prop() useIntermediate: boolean = false;\r\n\r\n  /** The value for this checkbox (not to be confused with its checked state). */\r\n  @Prop() value: string;\r\n\r\n  /** Fires up when the checkbox checked property changes. */\r\n  @Event() checkedchange: EventEmitter<boolean | undefined>;\r\n  \r\n  private button: HTMLButtonElement;\r\n\r\n  private changeState(): void {\r\n    if (!this.useIntermediate){\r\n      this.checked = !this.checked;\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n    if (this.checked === true){\r\n      this.checked = false;\r\n      this.button.classList.remove(\"undefined\");\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n    if (this.checked === undefined){\r\n      this.checked = true;\r\n      this.button.classList.remove(\"undefined\");\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n    if (this.checked === false){\r\n      this.checked = undefined;\r\n      this.button.classList.add(\"undefined\");\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n  }\r\n\r\n  private emitEvents() {\r\n    this.checkedchange.emit(this.checked);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"icon\" onClick={() => this.changeState()} ref={el => this.button = el}>\r\n          {this.checked === false &&\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=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\r\n          }\r\n          {this.checked === true &&\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=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\r\n          }\r\n          {this.checked === undefined &&\r\n            <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\r\n          }\r\n        </button>\r\n        <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dnn-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,6pBAA6pB;;MCavqB,WAAW;EALxB;;;;IASyB,YAAO,GAA6C,WAAW,CAAC;;IAG/E,oBAAe,GAAY,KAAK,CAAC;GAmE1C;EA3DS,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAC;MACxB,QAAQ,IAAI,CAAC,OAAO;QAClB,KAAK,SAAS;UACZ,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;UAC3B,MAAM;QACR,KAAK,WAAW,CAAC;QACjB,KAAK,cAAc;UACjB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;UACzB,MAAM;QACR;UACE,MAAM;OACT;MACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MACtC,OAAO;KACR;IACD,QAAQ,IAAI,CAAC,OAAO;MAClB,KAAK,SAAS;QACZ,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC;QAC9B,MAAM;MACR,KAAK,cAAc;QACjB,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;QAC3B,MAAM;MACR,KAAK,WAAW;QACd,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QACzB,MAAM;MACR;QACE,MAAM;KACT;IACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,oBACE,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjCA,iBAAK,KAAK,EAAC,WAAW,IACpBA,kBAAM,IAAI,EAAC,eAAe,IACxBA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,4FAA4F,GAAE,CAAM,CAClP,CACH,EACNA,iBAAK,KAAK,EAAC,SAAS,IAClBA,kBAAM,IAAI,EAAC,aAAa,IACtBA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,qIAAqI,GAAE,CAAM,CAC3R,CACH,EACNA,iBAAK,KAAK,EAAC,cAAc,IACvBA,kBAAM,IAAI,EAAC,kBAAkB,IAC3BA,iBAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,uBAAmB,eAAe,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,mBAAGA,kBAAM,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAE,CAAI,EAAAA,mBAAGA,mBAAGA,mBAAGA,kBAAM,CAAC,EAAC,wGAAwG,GAAE,CAAI,CAAI,CAAI,CAAM,CACnV,CACH,CACC,EACTA,mBAAO,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAAEA,qBAAa,CAAQ,CAC/E,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","./src/components/dnn-checkbox/dnn-checkbox.tsx"],"sourcesContent":[":host {\n    /**\n    * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.\n    */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin: 3px;\n}\nbutton{\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  .unchecked, .checked, .intermediate{\n    display: none;\n  }\n  &.checked .checked, &.unchecked .unchecked, &.intermediate .intermediate{\n    display: block;\n  }\n  svg.undefined{\n    opacity: 0.45;\n  }\n  &:focus{\n    box-shadow: 0 0 2px 2px var(--focus-color);\n  }\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot - The label for the checkbox.\n * @slot checkedicon - Allows overriding the default checked icon.\n * @slot uncheckedicon - Allows overriding the unchecked icon.\n * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.\n */\n@Component({\n  tag: 'dnn-checkbox',\n  styleUrl: 'dnn-checkbox.scss',\n  shadow: true,\n})\nexport class DnnCheckbox {\n  @Element() el: HTMLDnnCheckboxElement;\n\n  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\n  @Prop({mutable: true}) checked: \"checked\" | \"unchecked\" | \"intermediate\" = \"unchecked\";\n\n  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\n  @Prop() useIntermediate: boolean = false;\n\n  /** The value for this checkbox (not to be confused with its checked state). */\n  @Prop() value: string;\n\n  /** Fires up when the checkbox checked property changes. */\n  @Event() checkedchange: EventEmitter<\"checked\" | \"unchecked\" | \"intermediate\">;\n\n  private changeState(): void {\n    if (!this.useIntermediate){\n      switch (this.checked) {\n        case \"checked\":\n          this.checked = \"unchecked\";\n          break;\n        case \"unchecked\":\n        case \"intermediate\":\n          this.checked = \"checked\";\n          break;\n        default:\n          break;\n      }\n      this.checkedchange.emit(this.checked);\n      return;\n    }\n    switch (this.checked) {\n      case \"checked\":\n        this.checked = \"intermediate\";\n        break;\n      case \"intermediate\":\n        this.checked = \"unchecked\";\n        break;\n      case \"unchecked\":\n        this.checked = \"checked\";\n        break;\n      default:\n        break;\n    }\n    this.checkedchange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={`icon ${this.checked}`}\n          onClick={() => this.changeState()}\n        >\n          <div class=\"unchecked\">\n            <slot name=\"uncheckedicon\">\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=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"checked\">\n            <slot name=\"checkedicon\">\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=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"intermediate\">\n            <slot name=\"intermediateicon\">\n              <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\n            </slot>\n          </div>\n        </button>\n        <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,31 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff4d89a.js');
+const index = require('./index-d53702a3.js');
 
 const dnnChevronCss = ":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}";
 
-let DnnChevron = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.changed = index.createEvent(this, "changed", 7);
-    /** Expand text for screen readers */
-    this.expandText = "expand";
-    /** Collapse text for screen readers */
-    this.collapseText = "collapse";
-    /** Is the chevron expanded */
-    this.expanded = false;
-  }
-  handleExpandedChanged(newValue) {
-    this.changed.emit(newValue);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
-  }
-  static get watchers() { return {
-    "expanded": ["handleExpandedChanged"]
-  }; }
-};
+const DnnChevron = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.changed = index.createEvent(this, "changed", 7);
+    /** Expand text for screen readers */
+    this.expandText = "expand";
+    /** Collapse text for screen readers */
+    this.collapseText = "collapse";
+    /** Is the chevron expanded */
+    this.expanded = false;
+  }
+  handleExpandedChanged(newValue) {
+    this.changed.emit(newValue);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("button", { "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
+  }
+  static get watchers() { return {
+    "expanded": ["handleExpandedChanged"]
+  }; }
+};
 DnnChevron.style = dnnChevronCss;
 
 exports.dnn_chevron = DnnChevron;

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

@@ -1 +1 @@
-{"file":"dnn-chevron.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,wfAAwf;;ICSjgB,UAAU;EALvB;;;;IAQU,eAAU,GAAY,QAAQ,CAAC;;IAG/B,iBAAY,GAAY,UAAU,CAAC;;IAGL,aAAQ,GAAa,KAAK,CAAC;GAsBlE;EAhBC,qBAAqB,CAAC,QAAiB;IACrC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC7B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,kCAAoB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,EACrE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,IAE7CA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,gDAAgD,GAAE,CAAM,CACpM,CACJ,EACP;GACH;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-chevron/dnn-chevron.scss?tag=dnn-chevron&encapsulation=shadow","./src/components/dnn-chevron/dnn-chevron.tsx"],"sourcesContent":[":host {\r\n  display: inline-block;\r\n}\r\nbutton{\r\n  border: none;\r\n  padding: 0px;\r\n  margin: 0px;\r\n  min-width: 15px;\r\n  min-height: 15px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background-color: transparent;\r\n  outline: none;\r\n}\r\nsvg{\r\n  height:2em;\r\n  width:2em;\r\n  transition: all 300ms ease-in-out;\r\n}\r\n\r\n// FOCUS\r\nbutton:focus, button:hover{\r\n  svg{\r\n    color: var(--dnn-color-primary);\r\n  }\r\n}\r\n\r\n// EXPANDED\r\n:host([expanded]){\r\n  svg{\r\n    transform: rotate(90deg);\r\n  }\r\n}","import { Component, Host, h, Prop, Event } from '@stencil/core';\r\nimport { EventEmitter } from '@stencil/core';\r\nimport { Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-chevron',\r\n  styleUrl: 'dnn-chevron.scss',\r\n  shadow: true\r\n})\r\nexport class DnnChevron {\r\n\r\n  /** Expand text for screen readers */\r\n  @Prop() expandText?: string = \"expand\";\r\n\r\n  /** Collapse text for screen readers */\r\n  @Prop() collapseText?: string = \"collapse\";\r\n\r\n  /** Is the chevron expanded */\r\n  @Prop({mutable: true, reflect: true}) expanded?: boolean = false;\r\n\r\n  /** Fires up when the expanded status changes */\r\n  @Event() changed: EventEmitter;\r\n\r\n  @Watch('expanded')\r\n  handleExpandedChanged(newValue: boolean) {\r\n    this.changed.emit(newValue);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button aria-label={this.expanded ? this.collapseText : this.expandText}\r\n          onClick={() => this.expanded = !this.expanded}\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=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"],"version":3}
+{"file":"dnn-chevron.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,wfAAwf;;MCSjgB,UAAU;EALvB;;;;IAQU,eAAU,GAAY,QAAQ,CAAC;;IAG/B,iBAAY,GAAY,UAAU,CAAC;;IAGL,aAAQ,GAAa,KAAK,CAAC;GAsBlE;EAhBC,qBAAqB,CAAC,QAAiB;IACrC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC7B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,kCAAoB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,EACrE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,IAE7CA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,gDAAgD,GAAE,CAAM,CACpM,CACJ,EACP;GACH;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-chevron/dnn-chevron.scss?tag=dnn-chevron&encapsulation=shadow","./src/components/dnn-chevron/dnn-chevron.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\nbutton{\n  border: none;\n  padding: 0px;\n  margin: 0px;\n  min-width: 15px;\n  min-height: 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: transparent;\n  outline: none;\n}\nsvg{\n  height:2em;\n  width:2em;\n  transition: all 300ms ease-in-out;\n}\n\n// FOCUS\nbutton:focus, button:hover{\n  svg{\n    color: var(--dnn-color-primary);\n  }\n}\n\n// EXPANDED\n:host([expanded]){\n  svg{\n    transform: rotate(90deg);\n  }\n}","import { Component, Host, h, Prop, Event } from '@stencil/core';\nimport { EventEmitter } from '@stencil/core';\nimport { Watch } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-chevron',\n  styleUrl: 'dnn-chevron.scss',\n  shadow: true\n})\nexport class DnnChevron {\n\n  /** Expand text for screen readers */\n  @Prop() expandText?: string = \"expand\";\n\n  /** Collapse text for screen readers */\n  @Prop() collapseText?: string = \"collapse\";\n\n  /** Is the chevron expanded */\n  @Prop({mutable: true, reflect: true}) expanded?: boolean = false;\n\n  /** Fires up when the expanded status changes */\n  @Event() changed: EventEmitter;\n\n  @Watch('expanded')\n  handleExpandedChanged(newValue: boolean) {\n    this.changed.emit(newValue);\n  }\n\n  render() {\n    return (\n      <Host>\n        <button aria-label={this.expanded ? this.collapseText : this.expandText}\n          onClick={() => this.expanded = !this.expanded}\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=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -2,63 +2,66 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff4d89a.js');
+const index = require('./index-d53702a3.js');
 
 const dnnCollapsibleCss = ":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";
 
-let DnnCollapsible = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dnnCollapsibleHeightChanged = index.createEvent(this, "dnnCollapsibleHeightChanged", 7);
-    /** Defines if the panel is expanded or not. */
-    this.expanded = false;
-    /** Defines the transition time in ms, defaults to 100ms */
-    this.transitionDuration = 150;
-  }
-  handleHeightChanged() {
-    requestAnimationFrame(() => {
-      this.updateSize();
-    });
-  }
-  /**
-   * Updates the component height, use to update after a slot content changes.
-   */
-  async updateSize() {
-    if (this.expanded) {
-      requestAnimationFrame(() => {
-        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
-      });
-      setTimeout(() => {
-        this.container.style.maxHeight = "none";
-      }, this.transitionDuration);
-    }
-  }
-  handledExpandedChanged(expanded) {
-    if (expanded) {
-      this.updateSize();
-    }
-    else {
-      requestAnimationFrame(() => {
-        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
-        requestAnimationFrame(() => {
-          this.container.style.maxHeight = "0px";
-        });
-      });
-    }
-    setTimeout(() => {
-      requestAnimationFrame(() => {
-        this.dnnCollapsibleHeightChanged.emit();
-      });
-    }, this.transitionDuration);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "expanded": ["handledExpandedChanged"]
-  }; }
-};
+const DnnCollapsible = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.dnnCollapsibleHeightChanged = index.createEvent(this, "dnnCollapsibleHeightChanged", 7);
+    /** Defines if the panel is expanded or not. */
+    this.expanded = false;
+    /** Defines the transition time in ms, defaults to 150ms */
+    this.transitionDuration = 150;
+  }
+  handleHeightChanged() {
+    requestAnimationFrame(() => {
+      this.updateSize();
+    });
+  }
+  /**
+   * Updates the component height, use to update after a slot content changes.
+   */
+  async updateSize() {
+    if (this.expanded) {
+      requestAnimationFrame(() => {
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
+      });
+      setTimeout(() => {
+        this.container.style.maxHeight = "none";
+      }, this.transitionDuration);
+    }
+  }
+  handledExpandedChanged(expanded) {
+    if (expanded) {
+      this.updateSize();
+    }
+    else {
+      requestAnimationFrame(() => {
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
+        requestAnimationFrame(() => {
+          this.container.style.maxHeight = "0px";
+        });
+      });
+    }
+    setTimeout(() => {
+      requestAnimationFrame(() => {
+        this.dnnCollapsibleHeightChanged.emit();
+      });
+    }, this.transitionDuration);
+  }
+  componentDidLoad() {
+    this.container.style.transition = `max-height ${this.transitionDuration}ms ease-in-out`;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el, style: { transition: `max-height ${this.transitionDuration}ms ease-in-out` } }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "expanded": ["handledExpandedChanged"]
+  }; }
+};
 DnnCollapsible.style = dnnCollapsibleCss;
 
 exports.dnn_collapsible = DnnCollapsible;

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

@@ -1 +1 @@
-{"file":"dnn-collapsible.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,sJAAsJ;;ICOnK,cAAc;EAL3B;;;;IAUyB,aAAQ,GAAY,KAAK,CAAC;;IAGzC,uBAAkB,GAAY,GAAG,CAAC;GA2D3C;EArDC,mBAAmB;IACjB,qBAAqB,CAAC;MACpB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB,CAAC,CAAA;GACH;;;;EAMD,MAAM,UAAU;IACd,IAAI,IAAI,CAAC,QAAQ,EAAC;MACd,qBAAqB,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;OACrE,CAAC,CAAC;MACH,UAAU,CAAC;QACT,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;OACzC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC/B;GACF;EAGD,sBAAsB,CAAC,QAAiB;IACtC,IAAI,QAAQ,EAAC;MACX,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;SACG;MACF,qBAAqB,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;QACpE,qBAAqB,CAAC;UACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;SACxC,CAAC,CAAC;OACJ,CAAC,CAAC;KACJ;IACD,UAAU,CAAC;MACT,qBAAqB,CAAC;QACpB,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;OACzC,CAAC,CAAC;KACJ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAC7B;EAID,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAClFA,qBAAa,CACX,CACD,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","./src/components/dnn-collapsible/dnn-collapsible.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n#container{\r\n  max-height:0;\r\n  overflow: hidden;\r\n  transition: max-height 300ms ease-in-out;\r\n}","import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: \"dnn-collapsible\",\r\n  styleUrl: \"dnn-collapsible.scss\",\r\n  shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n  @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n  /** Defines if the panel is expanded or not. */\r\n  @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n  /** Defines the transition time in ms, defaults to 100ms */\r\n  @Prop() transitionDuration?: number = 150;\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen(\"dnnCollapsibleHeightChanged\")\r\n  handleHeightChanged(){\r\n    requestAnimationFrame(() => {\r\n      this.updateSize();\r\n    })\r\n  }\r\n\r\n  /**\r\n   * Updates the component height, use to update after a slot content changes.\r\n   */\r\n  @Method()\r\n  async updateSize() {\r\n    if (this.expanded){\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        });\r\n        setTimeout(() => {\r\n          this.container.style.maxHeight = \"none\";\r\n        }, this.transitionDuration);\r\n    }\r\n  }\r\n  \r\n  @Watch(\"expanded\")\r\n  handledExpandedChanged(expanded: boolean){\r\n    if (expanded){\r\n      this.updateSize();\r\n    }\r\n    else{\r\n      requestAnimationFrame(() => {\r\n        this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = \"0px\";\r\n        });\r\n      });\r\n    }\r\n    setTimeout(() => {\r\n      requestAnimationFrame(() => {\r\n        this.dnnCollapsibleHeightChanged.emit();\r\n      });\r\n    }, this.transitionDuration);\r\n  }\r\n  \r\n  private container: HTMLDivElement;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\" class={this.expanded && \"expanded\"} ref={el => this.container = el}>\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"],"version":3}
+{"file":"dnn-collapsible.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,sJAAsJ;;MCOnK,cAAc;EAL3B;;;;IAUyB,aAAQ,GAAY,KAAK,CAAC;;IAGzC,uBAAkB,GAAY,GAAG,CAAC;GAoE3C;EA9DC,mBAAmB;IACjB,qBAAqB,CAAC;MACpB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB,CAAC,CAAA;GACH;;;;EAMD,MAAM,UAAU;IACd,IAAI,IAAI,CAAC,QAAQ,EAAC;MACd,qBAAqB,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;OACrE,CAAC,CAAC;MACH,UAAU,CAAC;QACT,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;OACzC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC/B;GACF;EAGD,sBAAsB,CAAC,QAAiB;IACtC,IAAI,QAAQ,EAAC;MACX,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;SACG;MACF,qBAAqB,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;QACpE,qBAAqB,CAAC;UACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;SACxC,CAAC,CAAC;OACJ,CAAC,CAAC;KACJ;IACD,UAAU,CAAC;MACT,qBAAqB,CAAC;QACpB,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;OACzC,CAAC,CAAC;KACJ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAC7B;EAID,gBAAgB;IACd,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,cAAc,IAAI,CAAC,kBAAkB,gBAAgB,CAAC;GACzF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAClC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,EAC9B,KAAK,EAAE,EAAC,UAAU,EAAE,cAAc,IAAI,CAAC,kBAAkB,gBAAgB,EAAC,IAExEA,qBAAa,CACX,CACD,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","./src/components/dnn-collapsible/dnn-collapsible.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n#container{\n  max-height:0;\n  overflow: hidden;\n  transition: max-height 300ms ease-in-out;\n}","import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';\n\n@Component({\n  tag: \"dnn-collapsible\",\n  styleUrl: \"dnn-collapsible.scss\",\n  shadow: true\n})\nexport class DnnCollapsible {\n\n  @Element() el: HTMLDnnCollapsibleElement;\n\n  /** Defines if the panel is expanded or not. */\n  @Prop({reflect: true}) expanded: boolean = false;\n\n  /** Defines the transition time in ms, defaults to 150ms */\n  @Prop() transitionDuration?: number = 150;\n\n  /** Fires whenever the collapsible height has changed */\n  @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged: EventEmitter<void>;\n\n  @Listen(\"dnnCollapsibleHeightChanged\")\n  handleHeightChanged(){\n    requestAnimationFrame(() => {\n      this.updateSize();\n    })\n  }\n\n  /**\n   * Updates the component height, use to update after a slot content changes.\n   */\n  @Method()\n  async updateSize() {\n    if (this.expanded){\n        requestAnimationFrame(() => {\n          this.container.style.maxHeight = `${this.container.scrollHeight}px`;\n        });\n        setTimeout(() => {\n          this.container.style.maxHeight = \"none\";\n        }, this.transitionDuration);\n    }\n  }\n  \n  @Watch(\"expanded\")\n  handledExpandedChanged(expanded: boolean){\n    if (expanded){\n      this.updateSize();\n    }\n    else{\n      requestAnimationFrame(() => {\n        this.container.style.maxHeight = `${this.container.scrollHeight}px`;\n        requestAnimationFrame(() => {\n          this.container.style.maxHeight = \"0px\";\n        });\n      });\n    }\n    setTimeout(() => {\n      requestAnimationFrame(() => {\n        this.dnnCollapsibleHeightChanged.emit();\n      });\n    }, this.transitionDuration);\n  }\n  \n  private container: HTMLDivElement;\n\n  componentDidLoad() {\n    this.container.style.transition = `max-height ${this.transitionDuration}ms ease-in-out`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          id=\"container\"\n          class={this.expanded && \"expanded\"}\n          ref={el => this.container = el}\n          style={{transition: `max-height ${this.transitionDuration}ms ease-in-out`}}\n        >\n            <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}