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

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

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","src/components/dnn-button/dnn-button.tsx"],"names":["dnnButtonCss","DnnButton","exports","class_1","hostRef","this","type","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","disabled","modalVisible","prototype","componentDidLoad","el","classList","add","modal","shadowRoot","querySelector","handleConfirm","hide","confirmed","emit","handleCancel","canceled","handleClick","show","render","_this","h","Host","style","pointer-events","class","onClick","showCloseButton","backdropDismiss","display","justifyContent","margin"],"mappings":"sKAAA,IAAMA,EAAe,sgECURC,EAASC,EAAA,aAAA,WALtB,SAAAC,EAAAC,qFAWUC,KAAAC,KAA6C,UAK7CD,KAAAE,SAAoB,MAKpBF,KAAAG,KAAsC,SAKtCH,KAAAI,QAAoB,MAKpBJ,KAAAK,eAA0B,MAK1BL,KAAAM,cAAyB,KAKzBN,KAAAO,eAA0B,iBAK1BP,KAAAQ,SAAoB,MAEnBR,KAAAS,aAAwB,MAqBjCX,EAAAY,UAAAC,iBAAA,WACEX,KAAKY,GAAGC,UAAUC,IAAId,KAAKC,MAE3B,GAAID,KAAKE,SAAS,CAChBF,KAAKY,GAAGC,UAAUC,IAAI,YAGxB,GAAId,KAAKG,OAAS,SAAS,CACzBH,KAAKY,GAAGC,UAAUC,IAAId,KAAKG,MAG7BH,KAAKe,MAAQf,KAAKY,GAAGI,WAAWC,cAAc,cAGxCnB,EAAAY,UAAAQ,cAAA,WACNlB,KAAKe,MAAMI,OACXnB,KAAKS,aAAe,MACpBT,KAAKoB,UAAUC,QAGTvB,EAAAY,UAAAY,aAAA,WACNtB,KAAKe,MAAMI,OACXnB,KAAKS,aAAe,MACpBT,KAAKuB,SAASF,QAGRvB,EAAAY,UAAAc,YAAA,WACN,GAAIxB,KAAKI,UAAYJ,KAAKS,aAAa,CACrCT,KAAKe,MAAMU,OACXzB,KAAKS,aAAe,OAIxBX,EAAAY,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,EAAI,CAACrB,SAAUR,KAAKQ,SAAUsB,MAAO,CAACC,iBAAkB/B,KAAKQ,SAAW,OAAS,QAChFoB,EAAA,SAAA,CAAQI,MAAM,SAASC,QAAS,WAAM,OAAAN,EAAKH,eAAehB,SAAUR,KAAKQ,UACvEoB,EAAA,OAAA,OAED5B,KAAKI,SACFwB,EAAA,YAAA,CAAWM,gBAAiB,MAAOC,gBAAiB,OAClDP,EAAA,IAAA,KAAI5B,KAAKO,gBACTqB,EAAA,MAAA,CAAKE,MACH,CACEM,QAAS,OACTC,eAAgB,aAGlBT,EAAA,aAAA,CAAY3B,KAAK,UAAU6B,MAAO,CAACQ,OAAQ,OAAQL,QAAS,WAAM,OAAAN,EAAKT,kBAAkBlB,KAAKK,gBAC9FuB,EAAA,aAAA,CAAY3B,KAAK,YAAY6B,MAAO,CAACQ,OAAQ,OAAQL,QAAS,WAAM,OAAAN,EAAKL,iBAAiBtB,KAAKM,wIAjHzF","sourcesContent":[":host {\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: var(--backround-color);\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  display: inline-block;\r\n  width: auto;\r\n}\r\n\r\n:host(.disabled){\r\n  pointer-events: none;\r\n}\r\n\r\n:host(.primary){\r\n  --background-color: var(--dnn-color-primary, blue);\r\n  --color: var(--dnn-color-primary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.primary.reversed){\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n  --color: var(--dnn-color-primary, blue);\r\n  --border-color: var(--dnn-color-primary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.secondary){\r\n  --background-color: var(--dnn-color-secondary, green);\r\n  --color: var(--dnn-color-secondary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.secondary.reversed){\r\n  --background-color: var(--dnn-color-secondary-contrast, white);\r\n  --color: var(--dnn-color-secondary, blue);\r\n  --border-color: var(--dnn-color-secondary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.tertiary){\r\n  --background-color: var(--dnn-color-tertiary, yellow);\r\n  --color: var(--dnn-color-tertiary-contrast, black);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.tertiary.reversed){\r\n  --background-color: var(--dnn-color-tertiary-contrast, white);\r\n  --color: var(--dnn-color-tertiary, blue);\r\n  --border-color: var(--dnn-color-tertiary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.hydrated){\r\n  button{\r\n    border: var(--border-size) solid var(--border-color);\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding) calc(var(--padding) * 2);\r\n    background-color: transparent;\r\n    background-color: var(--background-color);\r\n    color: var(--color);\r\n    outline: none;\r\n    &:focus, &:hover{\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n}\r\n\r\n:host(:disabled, [disabled]){\r\n  button{\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\r\n:host(.small){\r\n  button{\r\n    padding: calc(var(--padding) / 2) var(--padding);\r\n    font-size: 0.7em;\r\n  }\r\n}\r\n\r\n:host(.large){\r\n  button{\r\n    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\r\n    font-size: 1.2em;\r\n  }\r\n}\r\n\r\nbutton{\r\n  height: 100%;\r\n  width: 100%;\r\n  cursor: pointer;\r\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * @slot Content of the button\r\n */\r\n@Component({\r\n  tag: 'dnn-button',\r\n  styleUrl: 'dnn-button.scss',\r\n  shadow: true\r\n})\r\nexport class DnnButton {\r\n\r\n  /**\r\n   * Optional button style,\r\n   * can be either primary, secondary or tertiary and defaults to primary if not specified\r\n   */\r\n  @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n  /**\r\n   * Optionally reverses the button style.\r\n   */\r\n  @Prop() reversed: boolean = false;\r\n\r\n  /**\r\n   * Optionally sets the button size, small normal or large, defaults to normal\r\n   */\r\n  @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\r\n\r\n  /**\r\n   * Optionally add a confirmation dialog before firing the action.\r\n   */\r\n  @Prop() confirm?: boolean = false;\r\n\r\n  /**\r\n   * The text of the yes button for confirmation.\r\n   */\r\n  @Prop() confirmYesText?: string = \"Yes\";\r\n\r\n  /**\r\n   * The text of the no button for confirmation.\r\n   */\r\n  @Prop() confirmNoText?: string = \"No\";\r\n\r\n  /**\r\n   * The text of the confirmation message;\r\n   */\r\n  @Prop() confirmMessage?: string = \"Are you sure ?\";\r\n  \r\n  /**\r\n   * Disables the button\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  @State() modalVisible: boolean = false;\r\n\r\n  @Element() el!: HTMLDnnButtonElement;\r\n\r\n  private modal!: HTMLDnnModalElement;\r\n\r\n  /** \r\n   * Fires when confirm is true and the user confirms the action.\r\n  */\r\n  @Event({\r\n    eventName: 'confirmed',\r\n    bubbles: false,\r\n    cancelable: true,\r\n    composed: true\r\n  }) confirmed: EventEmitter;\r\n\r\n  /**\r\n   * Fires when confirm is true and the user cancels the action.\r\n   */\r\n  @Event({bubbles: false}) canceled: EventEmitter;\r\n\r\n  componentDidLoad(){\r\n    this.el.classList.add(this.type);\r\n    \r\n    if (this.reversed){\r\n      this.el.classList.add('reversed');\r\n    }\r\n\r\n    if (this.size !== 'normal'){\r\n      this.el.classList.add(this.size);\r\n    }\r\n\r\n    this.modal = this.el.shadowRoot.querySelector('dnn-modal');\r\n  }\r\n\r\n  private handleConfirm(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.confirmed.emit();\r\n  }\r\n\r\n  private handleCancel(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.canceled.emit();\r\n  }\r\n  \r\n  private handleClick(): void {\r\n    if (this.confirm && !this.modalVisible){\r\n      this.modal.show();\r\n      this.modalVisible = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\r\n        <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\r\n          <slot></slot>\r\n        </button>\r\n        {this.confirm &&\r\n            <dnn-modal showCloseButton={false} backdropDismiss={false}>\r\n              <p>{this.confirmMessage}</p>\r\n              <div style={\r\n                {\r\n                  display: 'flex',\r\n                  justifyContent: 'flex-end'\r\n                }\r\n              }>\r\n                <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\r\n                <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\r\n              </div>\r\n            </dnn-modal>\r\n          }\r\n      </Host>\r\n    );\r\n  }\r\n  \r\n\r\n}\r\n"]}
+{"version":3,"sources":["src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","src/components/dnn-button/dnn-button.tsx"],"names":["dnnButtonCss","DnnButton","exports","class_1","hostRef","this","type","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","disabled","modalVisible","prototype","componentDidLoad","modal","el","shadowRoot","querySelector","handleConfirm","hide","confirmed","emit","handleCancel","canceled","handleClick","show","getElementClasses","classes","push","join","render","_this","h","Host","class","style","pointer-events","onClick","showCloseButton","backdropDismiss","display","justifyContent","margin"],"mappings":"sKAAA,IAAMA,EAAe,sgECURC,EAASC,EAAA,aAAA,WALtB,SAAAC,EAAAC,qFAWUC,KAAAC,KAA6C,UAK7CD,KAAAE,SAAoB,MAKpBF,KAAAG,KAAsC,SAKtCH,KAAAI,QAAoB,MAKpBJ,KAAAK,eAA0B,MAK1BL,KAAAM,cAAyB,KAKzBN,KAAAO,eAA0B,iBAK1BP,KAAAQ,SAAoB,MAEnBR,KAAAS,aAAwB,MAoBjCX,EAAAY,UAAAC,iBAAA,WACEX,KAAKY,MAAQZ,KAAKa,GAAGC,WAAWC,cAAc,cAGxCjB,EAAAY,UAAAM,cAAA,WACNhB,KAAKY,MAAMK,OACXjB,KAAKS,aAAe,MACpBT,KAAKkB,UAAUC,QAGTrB,EAAAY,UAAAU,aAAA,WACNpB,KAAKY,MAAMK,OACXjB,KAAKS,aAAe,MACpBT,KAAKqB,SAASF,QAGRrB,EAAAY,UAAAY,YAAA,WACN,GAAItB,KAAKI,UAAYJ,KAAKS,aAAa,CACrCT,KAAKY,MAAMW,OACXvB,KAAKS,aAAe,OAIhBX,EAAAY,UAAAc,kBAAA,WACN,IAAMC,EAAoB,GAC1BA,EAAQC,KAAK1B,KAAKC,MAClB,GAAID,KAAKE,SAAS,CAChBuB,EAAQC,KAAK,YAEf,GAAI1B,KAAKG,OAAS,SAAS,CACzBsB,EAAQC,KAAK1B,KAAKG,MAEpB,OAAOsB,EAAQE,KAAK,MAGtB7B,EAAAY,UAAAkB,OAAA,WAAA,IAAAC,EAAA7B,KACE,OACE8B,EAACC,EAAI,CAACC,MAAOhC,KAAKwB,oBAAqBhB,SAAUR,KAAKQ,SAAUyB,MAAO,CAACC,iBAAkBlC,KAAKQ,SAAW,OAAS,QACjHsB,EAAA,SAAA,CAAQE,MAAM,SAASG,QAAS,WAAM,OAAAN,EAAKP,eAAed,SAAUR,KAAKQ,UACvEsB,EAAA,OAAA,OAED9B,KAAKI,SACF0B,EAAA,YAAA,CAAWM,gBAAiB,MAAOC,gBAAiB,OAClDP,EAAA,IAAA,KAAI9B,KAAKO,gBACTuB,EAAA,MAAA,CAAKG,MACH,CACEK,QAAS,OACTC,eAAgB,aAGlBT,EAAA,aAAA,CAAY7B,KAAK,UAAUgC,MAAO,CAACO,OAAQ,OAAQL,QAAS,WAAM,OAAAN,EAAKb,kBAAkBhB,KAAKK,gBAC9FyB,EAAA,aAAA,CAAY7B,KAAK,YAAYgC,MAAO,CAACO,OAAQ,OAAQL,QAAS,WAAM,OAAAN,EAAKT,iBAAiBpB,KAAKM,wIAlHzF","sourcesContent":[":host {\n  --background-color: transparent;\n  --color: #333;\n  --border-size: 1px;\n  --border-color: var(--backround-color);\n  --border-radius: var(--dnn-controls-radius, 5px);\n  --padding: var(--dnn-controls-padding, 5px);\n  display: inline-block;\n  width: auto;\n}\n\n:host(.disabled){\n  pointer-events: none;\n}\n\n:host(.primary){\n  --background-color: var(--dnn-color-primary, blue);\n  --color: var(--dnn-color-primary-contrast, white);\n  --focus-color: var(--background-color);\n}\n\n:host(.primary.reversed){\n  --background-color: var(--dnn-color-primary-contrast, white);\n  --color: var(--dnn-color-primary, blue);\n  --border-color: var(--dnn-color-primary, blue);\n  --focus-color: var(--color);\n}\n\n:host(.secondary){\n  --background-color: var(--dnn-color-secondary, green);\n  --color: var(--dnn-color-secondary-contrast, white);\n  --focus-color: var(--background-color);\n}\n\n:host(.secondary.reversed){\n  --background-color: var(--dnn-color-secondary-contrast, white);\n  --color: var(--dnn-color-secondary, blue);\n  --border-color: var(--dnn-color-secondary, blue);\n  --focus-color: var(--color);\n}\n\n:host(.tertiary){\n  --background-color: var(--dnn-color-tertiary, yellow);\n  --color: var(--dnn-color-tertiary-contrast, black);\n  --focus-color: var(--background-color);\n}\n\n:host(.tertiary.reversed){\n  --background-color: var(--dnn-color-tertiary-contrast, white);\n  --color: var(--dnn-color-tertiary, blue);\n  --border-color: var(--dnn-color-tertiary, blue);\n  --focus-color: var(--color);\n}\n\n:host(.hydrated){\n  button{\n    border: var(--border-size) solid var(--border-color);\n    border-radius: var(--border-radius);\n    padding: var(--padding) calc(var(--padding) * 2);\n    background-color: transparent;\n    background-color: var(--background-color);\n    color: var(--color);\n    outline: none;\n    &:focus, &:hover{\n      box-shadow: 0 0 2px 2px var(--focus-color);\n    }\n  }\n}\n\n:host(:disabled, [disabled]){\n  button{\n    pointer-events: none;\n    opacity: 0.5;\n  }\n}\n\n:host(.small){\n  button{\n    padding: calc(var(--padding) / 2) var(--padding);\n    font-size: 0.7em;\n  }\n}\n\n:host(.large){\n  button{\n    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\n    font-size: 1.2em;\n  }\n}\n\nbutton{\n  height: 100%;\n  width: 100%;\n  cursor: pointer;\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot Content of the button\n */\n@Component({\n  tag: 'dnn-button',\n  styleUrl: 'dnn-button.scss',\n  shadow: true\n})\nexport class DnnButton {\n\n  /**\n   * Optional button style,\n   * can be either primary, secondary or tertiary and defaults to primary if not specified\n   */\n  @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * Optionally reverses the button style.\n   */\n  @Prop() reversed: boolean = false;\n\n  /**\n   * Optionally sets the button size, small normal or large, defaults to normal\n   */\n  @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\n\n  /**\n   * Optionally add a confirmation dialog before firing the action.\n   */\n  @Prop() confirm?: boolean = false;\n\n  /**\n   * The text of the yes button for confirmation.\n   */\n  @Prop() confirmYesText?: string = \"Yes\";\n\n  /**\n   * The text of the no button for confirmation.\n   */\n  @Prop() confirmNoText?: string = \"No\";\n\n  /**\n   * The text of the confirmation message;\n   */\n  @Prop() confirmMessage?: string = \"Are you sure ?\";\n  \n  /**\n   * Disables the button\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() modalVisible: boolean = false;\n\n  @Element() el!: HTMLDnnButtonElement;\n\n  private modal!: HTMLDnnModalElement;\n\n  /** \n   * Fires when confirm is true and the user confirms the action.\n  */\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) confirmed: EventEmitter;\n\n  /**\n   * Fires when confirm is true and the user cancels the action.\n   */\n  @Event({bubbles: true}) canceled: EventEmitter;\n\n  componentDidLoad(){\n    this.modal = this.el.shadowRoot.querySelector('dnn-modal');\n  }\n\n  private handleConfirm(){\n    this.modal.hide();\n    this.modalVisible = false;\n    this.confirmed.emit();\n  }\n\n  private handleCancel(){\n    this.modal.hide();\n    this.modalVisible = false;\n    this.canceled.emit();\n  }\n  \n  private handleClick(): void {\n    if (this.confirm && !this.modalVisible){\n      this.modal.show();\n      this.modalVisible = true;\n    }\n  }\n\n  private getElementClasses(): string | { [className: string]: boolean; } {\n    const classes: string[] = [];\n    classes.push(this.type);\n    if (this.reversed){\n      classes.push('reversed');\n    }\n    if (this.size !== 'normal'){\n      classes.push(this.size);\n    }\n    return classes.join(' ');\n  }\n\n  render() {\n    return (\n      <Host class={this.getElementClasses()} disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\n        <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\n          <slot></slot>\n        </button>\n        {this.confirm &&\n            <dnn-modal showCloseButton={false} backdropDismiss={false}>\n              <p>{this.confirmMessage}</p>\n              <div style={\n                {\n                  display: 'flex',\n                  justifyContent: 'flex-end'\n                }\n              }>\n                <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\n                <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\n              </div>\n            </dnn-modal>\n          }\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,52 +1,52 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-b5a28c1d.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-20e42ad7.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) {
-    registerInstance(this, hostRef);
-    this.checkedchange = 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 (h(Host, null, h("button", { class: "icon", onClick: () => this.changeState(), ref: el => this.button = el }, this.checked === false &&
-      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: "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 &&
-      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: "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 &&
-      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" }, h("g", null, h("rect", { fill: "none", height: "24", width: "24" })), h("g", null, h("g", null, h("g", null, 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" })))))), h("label", { htmlFor: this.el.id, onClick: () => this.changeState() }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-};
+const DnnCheckbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checkedchange = 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 (h(Host, null, h("button", { class: `icon ${this.checked}`, onClick: () => this.changeState() }, h("div", { class: "unchecked" }, h("slot", { name: "uncheckedicon" }, 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: "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" })))), h("div", { class: "checked" }, h("slot", { name: "checkedicon" }, 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: "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" })))), h("div", { class: "intermediate" }, h("slot", { name: "intermediateicon" }, 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" }, h("g", null, h("rect", { fill: "none", height: "24", width: "24" })), h("g", null, h("g", null, h("g", null, 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" })))))))), h("label", { htmlFor: this.el.id, onClick: () => this.changeState() }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
 DnnCheckbox.style = dnnCheckboxCss;
 
 export { DnnCheckbox as dnn_checkbox };

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

@@ -1 +1 @@
-{"file":"dnn-checkbox.entry.esm.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,QACE,EAAC,IAAI,QACH,cAAQ,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;MACrB,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,4FAA4F,GAAE,CAAM,EAExP,IAAI,CAAC,OAAO,KAAK,IAAI;MACpB,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,qIAAqI,GAAE,CAAM,EAEjS,IAAI,CAAC,OAAO,KAAK,SAAS;MACzB,WAAK,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,IAAC,aAAG,YAAM,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAE,CAAI,EAAA,aAAG,aAAG,aAAG,YAAM,CAAC,EAAC,wGAAwG,GAAE,CAAI,CAAI,CAAI,CAAM,CAEnV,EACT,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAAE,eAAa,CAAQ,CAC/E,EACP;GACH;;;;;;;","names":[],"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.esm.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,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjC,WAAK,KAAK,EAAC,WAAW,IACpB,YAAM,IAAI,EAAC,eAAe,IACxB,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,4FAA4F,GAAE,CAAM,CAClP,CACH,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,aAAa,IACtB,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,qIAAqI,GAAE,CAAM,CAC3R,CACH,EACN,WAAK,KAAK,EAAC,cAAc,IACvB,YAAM,IAAI,EAAC,kBAAkB,IAC3B,WAAK,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,IAAC,aAAG,YAAM,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAE,CAAI,EAAA,aAAG,aAAG,aAAG,YAAM,CAAC,EAAC,wGAAwG,GAAE,CAAI,CAAI,CAAI,CAAM,CACnV,CACH,CACC,EACT,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAAE,eAAa,CAAQ,CAC/E,EACP;GACH;;;;;;;","names":[],"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/dnn/dnn-checkbox.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,n,i,s,c;return{setters:[function(e){t=e.r;n=e.e;i=e.h;s=e.f;c=e.g}],execute:function(){var h=":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)}";var r=e("dnn_checkbox",function(){function e(e){t(this,e);this.checkedchange=n(this,"checkedchange",7);this.checked=false;this.useIntermediate=false}e.prototype.changeState=function(){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}};e.prototype.emitEvents=function(){this.checkedchange.emit(this.checked)};e.prototype.render=function(){var e=this;return i(s,null,i("button",{class:"icon",onClick:function(){return e.changeState()},ref:function(t){return e.button=t}},this.checked===false&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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&&i("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"},i("g",null,i("rect",{fill:"none",height:"24",width:"24"})),i("g",null,i("g",null,i("g",null,i("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"})))))),i("label",{htmlFor:this.el.id,onClick:function(){return e.changeState()}},i("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return c(this)},enumerable:false,configurable:true});return e}());r.style=h}}}));
+System.register(["./index-c3cc3b5b.system.js"],(function(e){"use strict";var t,c,n,i,h;return{setters:[function(e){t=e.r;c=e.e;n=e.h;i=e.f;h=e.g}],execute:function(){var s=":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)}";var a=e("dnn_checkbox",function(){function e(e){t(this,e);this.checkedchange=c(this,"checkedchange",7);this.checked="unchecked";this.useIntermediate=false}e.prototype.changeState=function(){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)};e.prototype.render=function(){var e=this;return n(i,null,n("button",{class:"icon ".concat(this.checked),onClick:function(){return e.changeState()}},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"},n("path",{d:"M0 0h24v24H0z",fill:"none"}),n("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"})))),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"},n("path",{d:"M0 0h24v24H0z",fill:"none"}),n("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"})))),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"},n("g",null,n("rect",{fill:"none",height:"24",width:"24"})),n("g",null,n("g",null,n("g",null,n("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"})))))))),n("label",{htmlFor:this.el.id,onClick:function(){return e.changeState()}},n("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return h(this)},enumerable:false,configurable:true});return e}());a.style=s}}}));
 //# sourceMappingURL=dnn-checkbox.system.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","src/components/dnn-checkbox/dnn-checkbox.tsx"],"names":["dnnCheckboxCss","DnnCheckbox","exports","class_1","hostRef","this","checked","useIntermediate","prototype","changeState","emitEvents","button","classList","remove","undefined","add","checkedchange","emit","render","_this","h","Host","class","onClick","ref","el","xmlns","height","viewBox","width","fill","d","enable-background","htmlFor","id"],"mappings":"sKAAA,IAAMA,EAAiB,0fCOVC,EAAWC,EAAA,eAAA,WALxB,SAAAC,EAAAC,0DASyBC,KAAAC,QAA+B,MAG9CD,KAAAE,gBAA2B,MAU3BJ,EAAAK,UAAAC,YAAA,WACN,IAAKJ,KAAKE,gBAAgB,CACxBF,KAAKC,SAAWD,KAAKC,QACrBD,KAAKK,aACL,OAEF,GAAIL,KAAKC,UAAY,KAAK,CACxBD,KAAKC,QAAU,MACfD,KAAKM,OAAOC,UAAUC,OAAO,aAC7BR,KAAKK,aACL,OAEF,GAAIL,KAAKC,UAAYQ,UAAU,CAC7BT,KAAKC,QAAU,KACfD,KAAKM,OAAOC,UAAUC,OAAO,aAC7BR,KAAKK,aACL,OAEF,GAAIL,KAAKC,UAAY,MAAM,CACzBD,KAAKC,QAAUQ,UACfT,KAAKM,OAAOC,UAAUG,IAAI,aAC1BV,KAAKK,aACL,SAIIP,EAAAK,UAAAE,WAAA,WACNL,KAAKW,cAAcC,KAAKZ,KAAKC,UAG/BH,EAAAK,UAAAU,OAAA,WAAA,IAAAC,EAAAd,KACE,OACEe,EAACC,EAAI,KACHD,EAAA,SAAA,CAAQE,MAAM,OAAOC,QAAS,WAAM,OAAAJ,EAAKV,eAAee,IAAK,SAAAC,GAAM,OAAAN,EAAKR,OAASc,IAC9EpB,KAAKC,UAAY,OAChBc,EAAA,MAAA,CAAKM,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUV,EAAA,OAAA,CAAMW,EAAE,gBAAgBD,KAAK,SAAQV,EAAA,OAAA,CAAMW,EAAE,gGAEpJ1B,KAAKC,UAAY,MAChBc,EAAA,MAAA,CAAKM,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUV,EAAA,OAAA,CAAMW,EAAE,gBAAgBD,KAAK,SAAQV,EAAA,OAAA,CAAMW,EAAE,yIAEpJ1B,KAAKC,UAAYQ,WAChBM,EAAA,MAAA,CAAKE,MAAM,YAAYI,MAAM,6BAA4BM,oBAAmB,gBAAgBL,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUV,EAAA,IAAA,KAAGA,EAAA,OAAA,CAAMU,KAAK,OAAOH,OAAO,KAAKE,MAAM,QAAUT,EAAA,IAAA,KAAGA,EAAA,IAAA,KAAGA,EAAA,IAAA,KAAGA,EAAA,OAAA,CAAMW,EAAE,gHAGhOX,EAAA,QAAA,CAAOa,QAAS5B,KAAKoB,GAAGS,GAAIX,QAAS,WAAM,OAAAJ,EAAKV,gBAAeW,EAAA,OAAA,8HA7D/C","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,"sources":["src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","src/components/dnn-checkbox/dnn-checkbox.tsx"],"names":["dnnCheckboxCss","DnnCheckbox","exports","class_1","hostRef","this","checked","useIntermediate","prototype","changeState","checkedchange","emit","render","_this","h","Host","class","concat","onClick","name","xmlns","height","viewBox","width","fill","d","enable-background","htmlFor","el","id"],"mappings":"sKAAA,IAAMA,EAAiB,kqBCaVC,EAAWC,EAAA,eAAA,WALxB,SAAAC,EAAAC,0DASyBC,KAAAC,QAAoD,YAGnED,KAAAE,gBAA2B,MAQ3BJ,EAAAK,UAAAC,YAAA,WACN,IAAKJ,KAAKE,gBAAgB,CACxB,OAAQF,KAAKC,SACX,IAAK,UACHD,KAAKC,QAAU,YACf,MACF,IAAK,YACL,IAAK,eACHD,KAAKC,QAAU,UACf,MACF,QACE,MAEJD,KAAKK,cAAcC,KAAKN,KAAKC,SAC7B,OAEF,OAAQD,KAAKC,SACX,IAAK,UACHD,KAAKC,QAAU,eACf,MACF,IAAK,eACHD,KAAKC,QAAU,YACf,MACF,IAAK,YACHD,KAAKC,QAAU,UACf,MACF,QACE,MAEJD,KAAKK,cAAcC,KAAKN,KAAKC,UAG/BH,EAAAK,UAAAI,OAAA,WAAA,IAAAC,EAAAR,KACE,OACES,EAACC,EAAI,KACHD,EAAA,SAAA,CACEE,MAAO,QAAAC,OAAQZ,KAAKC,SACpBY,QAAS,WAAM,OAAAL,EAAKJ,gBAEpBK,EAAA,MAAA,CAAKE,MAAM,aACTF,EAAA,OAAA,CAAMK,KAAK,iBACTL,EAAA,MAAA,CAAKM,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUV,EAAA,OAAA,CAAMW,EAAE,gBAAgBD,KAAK,SAAQV,EAAA,OAAA,CAAMW,EAAE,kGAGvJX,EAAA,MAAA,CAAKE,MAAM,WACTF,EAAA,OAAA,CAAMK,KAAK,eACTL,EAAA,MAAA,CAAKM,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUV,EAAA,OAAA,CAAMW,EAAE,gBAAgBD,KAAK,SAAQV,EAAA,OAAA,CAAMW,EAAE,2IAGvJX,EAAA,MAAA,CAAKE,MAAM,gBACTF,EAAA,OAAA,CAAMK,KAAK,oBACTL,EAAA,MAAA,CAAKE,MAAM,YAAYI,MAAM,6BAA4BM,oBAAmB,gBAAgBL,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUV,EAAA,IAAA,KAAGA,EAAA,OAAA,CAAMU,KAAK,OAAOH,OAAO,KAAKE,MAAM,QAAUT,EAAA,IAAA,KAAGA,EAAA,IAAA,KAAGA,EAAA,IAAA,KAAGA,EAAA,OAAA,CAAMW,EAAE,kHAIlOX,EAAA,QAAA,CAAOa,QAAStB,KAAKuB,GAAGC,GAAIX,QAAS,WAAM,OAAAL,EAAKJ,gBAAeK,EAAA,OAAA,8HAtE/C","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"]}

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

@@ -1,28 +1,28 @@
-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 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) {
-    registerInstance(this, hostRef);
-    this.changed = 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 (h(Host, null, h("button", { "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded }, 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: "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) {
+    registerInstance(this, hostRef);
+    this.changed = 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 (h(Host, null, h("button", { "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded }, 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: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
+  }
+  static get watchers() { return {
+    "expanded": ["handleExpandedChanged"]
+  }; }
+};
 DnnChevron.style = dnnChevronCss;
 
 export { DnnChevron as dnn_chevron };

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

@@ -1 +1 @@
-{"file":"dnn-chevron.entry.esm.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,QACE,EAAC,IAAI,QACH,4BAAoB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,EACrE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,IAE7C,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,gDAAgD,GAAE,CAAM,CACpM,CACJ,EACP;GACH;;;;;;;;;","names":[],"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.esm.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,QACE,EAAC,IAAI,QACH,4BAAoB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,EACrE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,IAE7C,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,gDAAgD,GAAE,CAAM,CACpM,CACJ,EACP;GACH;;;;;;;;;","names":[],"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/dnn/dnn-chevron.system.entry.js

@@ -1,2 +1,2 @@
-System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,n,a,i;return{setters:[function(e){t=e.r;n=e.e;a=e.h;i=e.f}],execute:function(){var r=":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)}";var s=e("dnn_chevron",function(){function e(e){t(this,e);this.changed=n(this,"changed",7);this.expandText="expand";this.collapseText="collapse";this.expanded=false}e.prototype.handleExpandedChanged=function(e){this.changed.emit(e)};e.prototype.render=function(){var e=this;return a(i,null,a("button",{"aria-label":this.expanded?this.collapseText:this.expandText,onClick:function(){return e.expanded=!e.expanded}},a("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},a("path",{d:"M0 0h24v24H0z",fill:"none"}),a("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))))};Object.defineProperty(e,"watchers",{get:function(){return{expanded:["handleExpandedChanged"]}},enumerable:false,configurable:true});return e}());s.style=r}}}));
+System.register(["./index-c3cc3b5b.system.js"],(function(e){"use strict";var t,n,i,a;return{setters:[function(e){t=e.r;n=e.e;i=e.h;a=e.f}],execute:function(){var r=":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)}";var s=e("dnn_chevron",function(){function e(e){t(this,e);this.changed=n(this,"changed",7);this.expandText="expand";this.collapseText="collapse";this.expanded=false}e.prototype.handleExpandedChanged=function(e){this.changed.emit(e)};e.prototype.render=function(){var e=this;return i(a,null,i("button",{"aria-label":this.expanded?this.collapseText:this.expandText,onClick:function(){return e.expanded=!e.expanded}},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))))};Object.defineProperty(e,"watchers",{get:function(){return{expanded:["handleExpandedChanged"]}},enumerable:false,configurable:true});return e}());s.style=r}}}));
 //# sourceMappingURL=dnn-chevron.system.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-chevron/dnn-chevron.scss?tag=dnn-chevron&encapsulation=shadow","src/components/dnn-chevron/dnn-chevron.tsx"],"names":["dnnChevronCss","DnnChevron","exports","class_1","hostRef","this","expandText","collapseText","expanded","prototype","handleExpandedChanged","newValue","changed","emit","render","_this","h","Host","aria-label","onClick","xmlns","height","viewBox","width","fill","d"],"mappings":"8JAAA,IAAMA,EAAgB,6fCSTC,EAAUC,EAAA,cAAA,WALvB,SAAAC,EAAAC,8CAQUC,KAAAC,WAAsB,SAGtBD,KAAAE,aAAwB,WAGMF,KAAAG,SAAqB,MAM3DL,EAAAM,UAAAC,sBAAA,SAAsBC,GACpBN,KAAKO,QAAQC,KAAKF,IAGpBR,EAAAM,UAAAK,OAAA,WAAA,IAAAC,EAAAV,KACE,OACEW,EAACC,EAAI,KACHD,EAAA,SAAA,CAAAE,aAAoBb,KAAKG,SAAWH,KAAKE,aAAeF,KAAKC,WAC3Da,QAAS,WAAM,OAAAJ,EAAKP,UAAYO,EAAKP,WAErCQ,EAAA,MAAA,CAAKI,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUR,EAAA,OAAA,CAAMS,EAAE,gBAAgBD,KAAK,SAAQR,EAAA,OAAA,CAAMS,EAAE,oMAzBtI","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,"sources":["src/components/dnn-chevron/dnn-chevron.scss?tag=dnn-chevron&encapsulation=shadow","src/components/dnn-chevron/dnn-chevron.tsx"],"names":["dnnChevronCss","DnnChevron","exports","class_1","hostRef","this","expandText","collapseText","expanded","prototype","handleExpandedChanged","newValue","changed","emit","render","_this","h","Host","aria-label","onClick","xmlns","height","viewBox","width","fill","d"],"mappings":"8JAAA,IAAMA,EAAgB,6fCSTC,EAAUC,EAAA,cAAA,WALvB,SAAAC,EAAAC,8CAQUC,KAAAC,WAAsB,SAGtBD,KAAAE,aAAwB,WAGMF,KAAAG,SAAqB,MAM3DL,EAAAM,UAAAC,sBAAA,SAAsBC,GACpBN,KAAKO,QAAQC,KAAKF,IAGpBR,EAAAM,UAAAK,OAAA,WAAA,IAAAC,EAAAV,KACE,OACEW,EAACC,EAAI,KACHD,EAAA,SAAA,CAAAE,aAAoBb,KAAKG,SAAWH,KAAKE,aAAeF,KAAKC,WAC3Da,QAAS,WAAM,OAAAJ,EAAKP,UAAYO,EAAKP,WAErCQ,EAAA,MAAA,CAAKI,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAUR,EAAA,OAAA,CAAMS,EAAE,gBAAgBD,KAAK,SAAQR,EAAA,OAAA,CAAMS,EAAE,oMAzBtI","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"]}

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

@@ -1,60 +1,63 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-b5a28c1d.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-20e42ad7.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) {
-    registerInstance(this, hostRef);
-    this.dnnCollapsibleHeightChanged = 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 (h(Host, null, h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "expanded": ["handledExpandedChanged"]
-  }; }
-};
+const DnnCollapsible = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dnnCollapsibleHeightChanged = 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 (h(Host, null, h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el, style: { transition: `max-height ${this.transitionDuration}ms ease-in-out` } }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "expanded": ["handledExpandedChanged"]
+  }; }
+};
 DnnCollapsible.style = dnnCollapsibleCss;
 
 export { DnnCollapsible as dnn_collapsible };

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

@@ -1 +1 @@
-{"file":"dnn-collapsible.entry.esm.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,QACE,EAAC,IAAI,QACH,WAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAClF,eAAa,CACX,CACD,EACP;GACH;;;;;;;;;;","names":[],"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.esm.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,QACE,EAAC,IAAI,QACH,WACE,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,IAExE,eAAa,CACX,CACD,EACP;GACH;;;;;;;;;;","names":[],"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}

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function o(e){try{s(i.next(e))}catch(e){a(e)}}function u(e){try{s(i["throw"](e))}catch(e){a(e)}}function s(e){e.done?n(e.value):r(e.value).then(o,u)}s((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,r,a,o;return o={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function u(e){return function(t){return s([e,t])}}function s(o){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(a=o[0]&2?r["return"]:o[0]?r["throw"]||((a=r["return"])&&a.call(r),0):r.next)&&!(a=a.call(r,o[1])).done)return a;if(r=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:n.label++;return{value:o[1],done:false};case 5:n.label++;r=o[1];o=[0];continue;case 7:o=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){n.label=o[1];break}if(o[0]===6&&n.label<a[1]){n.label=a[1];a=o;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(o);break}if(a[2])n.ops.pop();n.trys.pop();continue}o=t.call(e,n)}catch(e){o=[6,e];r=0}finally{i=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,n,i,r,a;return{setters:[function(e){t=e.r;n=e.e;i=e.h;r=e.f;a=e.g}],execute:function(){var o=":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";var u=e("dnn_collapsible",function(){function e(e){t(this,e);this.dnnCollapsibleHeightChanged=n(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150}e.prototype.handleHeightChanged=function(){var e=this;requestAnimationFrame((function(){e.updateSize()}))};e.prototype.updateSize=function(){return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(t){if(this.expanded){requestAnimationFrame((function(){e.container.style.maxHeight=e.container.scrollHeight+"px"}));setTimeout((function(){e.container.style.maxHeight="none"}),this.transitionDuration)}return[2]}))}))};e.prototype.handledExpandedChanged=function(e){var t=this;if(e){this.updateSize()}else{requestAnimationFrame((function(){t.container.style.maxHeight=t.container.scrollHeight+"px";requestAnimationFrame((function(){t.container.style.maxHeight="0px"}))}))}setTimeout((function(){requestAnimationFrame((function(){t.dnnCollapsibleHeightChanged.emit()}))}),this.transitionDuration)};e.prototype.render=function(){var e=this;return i(r,null,i("div",{id:"container",class:this.expanded&&"expanded",ref:function(t){return e.container=t}},i("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{expanded:["handledExpandedChanged"]}},enumerable:false,configurable:true});return e}());u.style=o}}}));
+var __awaiter=this&&this.__awaiter||function(t,e,n,i){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{u(i.next(t))}catch(t){o(t)}}function s(t){try{u(i["throw"](t))}catch(t){o(t)}}function u(t){t.done?n(t.value):r(t.value).then(a,s)}u((i=i.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:[]},i,r,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return u([t,e])}}function u(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(o=a[0]&2?r["return"]:a[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;if(r=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;r=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(t){a=[6,t];r=0}finally{i=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./index-c3cc3b5b.system.js"],(function(t){"use strict";var e,n,i,r,o;return{setters:[function(t){e=t.r;n=t.e;i=t.h;r=t.f;o=t.g}],execute:function(){var a=":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";var s=t("dnn_collapsible",function(){function t(t){e(this,t);this.dnnCollapsibleHeightChanged=n(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150}t.prototype.handleHeightChanged=function(){var t=this;requestAnimationFrame((function(){t.updateSize()}))};t.prototype.updateSize=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){if(this.expanded){requestAnimationFrame((function(){t.container.style.maxHeight="".concat(t.container.scrollHeight,"px")}));setTimeout((function(){t.container.style.maxHeight="none"}),this.transitionDuration)}return[2]}))}))};t.prototype.handledExpandedChanged=function(t){var e=this;if(t){this.updateSize()}else{requestAnimationFrame((function(){e.container.style.maxHeight="".concat(e.container.scrollHeight,"px");requestAnimationFrame((function(){e.container.style.maxHeight="0px"}))}))}setTimeout((function(){requestAnimationFrame((function(){e.dnnCollapsibleHeightChanged.emit()}))}),this.transitionDuration)};t.prototype.componentDidLoad=function(){this.container.style.transition="max-height ".concat(this.transitionDuration,"ms ease-in-out")};t.prototype.render=function(){var t=this;return i(r,null,i("div",{id:"container",class:this.expanded&&"expanded",ref:function(e){return t.container=e},style:{transition:"max-height ".concat(this.transitionDuration,"ms ease-in-out")}},i("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{expanded:["handledExpandedChanged"]}},enumerable:false,configurable:true});return t}());s.style=a}}}));
 //# sourceMappingURL=dnn-collapsible.system.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","src/components/dnn-collapsible/dnn-collapsible.tsx"],"names":["dnnCollapsibleCss","DnnCollapsible","exports","class_1","hostRef","this","expanded","transitionDuration","prototype","handleHeightChanged","_this","requestAnimationFrame","updateSize","container","style","maxHeight","scrollHeight","setTimeout","handledExpandedChanged","dnnCollapsibleHeightChanged","emit","render","h","Host","id","class","ref","el"],"mappings":"+lDAAA,IAAMA,EAAoB,2JCObC,EAAcC,EAAA,kBAAA,WAL3B,SAAAC,EAAAC,sFAUyBC,KAAAC,SAAoB,MAGnCD,KAAAE,mBAA8B,IAMtCJ,EAAAK,UAAAC,oBAAA,WAAA,IAAAC,EAAAL,KACEM,uBAAsB,WACpBD,EAAKE,iBAQHT,EAAAK,UAAAI,WAAN,2GACE,GAAIP,KAAKC,SAAS,CACdK,uBAAsB,WACpBD,EAAKG,UAAUC,MAAMC,UAAeL,EAAKG,UAAUG,aAAY,QAEjEC,YAAW,WACTP,EAAKG,UAAUC,MAAMC,UAAY,SAChCV,KAAKE,qCAKdJ,EAAAK,UAAAU,uBAAA,SAAuBZ,GAAvB,IAAAI,EAAAL,KACE,GAAIC,EAAS,CACXD,KAAKO,iBAEH,CACFD,uBAAsB,WACpBD,EAAKG,UAAUC,MAAMC,UAAeL,EAAKG,UAAUG,aAAY,KAC/DL,uBAAsB,WACpBD,EAAKG,UAAUC,MAAMC,UAAY,YAIvCE,YAAW,WACTN,uBAAsB,WACpBD,EAAKS,4BAA4BC,YAElCf,KAAKE,qBAKVJ,EAAAK,UAAAa,OAAA,WAAA,IAAAX,EAAAL,KACE,OACEiB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,GAAG,YAAYC,MAAOpB,KAAKC,UAAY,WAAYoB,IAAK,SAAAC,GAAM,OAAAjB,EAAKG,UAAYc,IAChFL,EAAA,OAAA,mQA7De","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,"sources":["src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","src/components/dnn-collapsible/dnn-collapsible.tsx"],"names":["dnnCollapsibleCss","DnnCollapsible","exports","class_1","hostRef","this","expanded","transitionDuration","prototype","handleHeightChanged","_this","requestAnimationFrame","updateSize","container","style","maxHeight","concat","scrollHeight","setTimeout","handledExpandedChanged","dnnCollapsibleHeightChanged","emit","componentDidLoad","transition","render","h","Host","id","class","ref","el"],"mappings":"+lDAAA,IAAMA,EAAoB,2JCObC,EAAcC,EAAA,kBAAA,WAL3B,SAAAC,EAAAC,sFAUyBC,KAAAC,SAAoB,MAGnCD,KAAAE,mBAA8B,IAMtCJ,EAAAK,UAAAC,oBAAA,WAAA,IAAAC,EAAAL,KACEM,uBAAsB,WACpBD,EAAKE,iBAQHT,EAAAK,UAAAI,WAAN,2GACE,GAAIP,KAAKC,SAAS,CACdK,uBAAsB,WACpBD,EAAKG,UAAUC,MAAMC,UAAY,GAAAC,OAAGN,EAAKG,UAAUI,aAAY,SAEjEC,YAAW,WACTR,EAAKG,UAAUC,MAAMC,UAAY,SAChCV,KAAKE,qCAKdJ,EAAAK,UAAAW,uBAAA,SAAuBb,GAAvB,IAAAI,EAAAL,KACE,GAAIC,EAAS,CACXD,KAAKO,iBAEH,CACFD,uBAAsB,WACpBD,EAAKG,UAAUC,MAAMC,UAAY,GAAAC,OAAGN,EAAKG,UAAUI,aAAY,MAC/DN,uBAAsB,WACpBD,EAAKG,UAAUC,MAAMC,UAAY,YAIvCG,YAAW,WACTP,uBAAsB,WACpBD,EAAKU,4BAA4BC,YAElChB,KAAKE,qBAKVJ,EAAAK,UAAAc,iBAAA,WACEjB,KAAKQ,UAAUC,MAAMS,WAAa,cAAAP,OAAcX,KAAKE,mBAAkB,mBAGzEJ,EAAAK,UAAAgB,OAAA,WAAA,IAAAd,EAAAL,KACE,OACEoB,EAACC,EAAI,KACHD,EAAA,MAAA,CACEE,GAAG,YACHC,MAAOvB,KAAKC,UAAY,WACxBuB,IAAK,SAAAC,GAAM,OAAApB,EAAKG,UAAYiB,GAC5BhB,MAAO,CAACS,WAAY,cAAAP,OAAcX,KAAKE,mBAAkB,oBAEvDkB,EAAA,OAAA,mQAtEe","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"]}