@dnncommunity/dnn-elements 0.14.0-beta.3 → 0.14.0-beta.7

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
 
-const dnnButtonCss = ":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";
+const dnnButtonCss = ":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";
 
 let DnnButton = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"dnn-button.entry.esm.js","mappings":";;AAAA,MAAM,YAAY,GAAG,+8DAA+8D;;ICUv9D,SAAS;EALtB;;;;;;;;IAWU,SAAI,GAAyC,SAAS,CAAC;;;;IAKvD,aAAQ,GAAY,KAAK,CAAC;;;;IAK1B,SAAI,GAAkC,QAAQ,CAAC;;;;IAK/C,YAAO,GAAa,KAAK,CAAC;;;;IAK1B,mBAAc,GAAY,KAAK,CAAC;;;;IAKhC,kBAAa,GAAY,IAAI,CAAC;;;;IAK9B,mBAAc,GAAY,gBAAgB,CAAC;;;;IAK3C,aAAQ,GAAY,KAAK,CAAC;IAEzB,iBAAY,GAAY,KAAK,CAAC;GA+ExC;EA1DC,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAC;MACzB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GAC5D;EAEO,aAAa;IACnB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,EAAC;MACrC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,EAAC,IACtF,cAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC/E,eAAa,CACN,EACR,IAAI,CAAC,OAAO;MACT,iBAAW,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,IACvD,aAAI,IAAI,CAAC,cAAc,CAAK,EAC5B,WAAK,KAAK,EACR;UACE,OAAO,EAAE,MAAM;UACf,cAAc,EAAE,UAAU;SAC3B,IAED,kBAAY,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAc,EAC1H,kBAAY,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,aAAa,CAAc,CACtH,CACI,CAEX,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","./src/components/dnn-button/dnn-button.tsx"],"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}
+{"file":"dnn-button.entry.esm.js","mappings":";;AAAA,MAAM,YAAY,GAAG,igEAAigE;;ICUzgE,SAAS;EALtB;;;;;;;;IAWU,SAAI,GAAyC,SAAS,CAAC;;;;IAKvD,aAAQ,GAAY,KAAK,CAAC;;;;IAK1B,SAAI,GAAkC,QAAQ,CAAC;;;;IAK/C,YAAO,GAAa,KAAK,CAAC;;;;IAK1B,mBAAc,GAAY,KAAK,CAAC;;;;IAKhC,kBAAa,GAAY,IAAI,CAAC;;;;IAK9B,mBAAc,GAAY,gBAAgB,CAAC;;;;IAK3C,aAAQ,GAAY,KAAK,CAAC;IAEzB,iBAAY,GAAY,KAAK,CAAC;GA+ExC;EA1DC,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAC;MACzB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GAC5D;EAEO,aAAa;IACnB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,EAAC;MACrC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,EAAC,IACtF,cAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC/E,eAAa,CACN,EACR,IAAI,CAAC,OAAO;MACT,iBAAW,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,IACvD,aAAI,IAAI,CAAC,cAAc,CAAK,EAC5B,WAAK,KAAK,EACR;UACE,OAAO,EAAE,MAAM;UACf,cAAc,EAAE,UAAU;SAC3B,IAED,kBAAY,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAc,EAC1H,kBAAY,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,aAAa,CAAc,CACtH,CACI,CAEX,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","./src/components/dnn-button/dnn-button.tsx"],"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}

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

@@ -0,0 +1,2 @@
+System.register(["./index-5c2c8f16.system.js"],(function(o){"use strict";var r,e,t,n,a;return{setters:[function(o){r=o.r;e=o.e;t=o.h;n=o.f;a=o.g}],execute:function(){var s=":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";var i=o("dnn_button",function(){function o(o){r(this,o);this.confirmed=e(this,"confirmed",3);this.canceled=e(this,"canceled",3);this.type="primary";this.reversed=false;this.size="normal";this.confirm=false;this.confirmYesText="Yes";this.confirmNoText="No";this.confirmMessage="Are you sure ?";this.disabled=false;this.modalVisible=false}o.prototype.componentDidLoad=function(){this.el.classList.add(this.type);if(this.reversed){this.el.classList.add("reversed")}if(this.size!=="normal"){this.el.classList.add(this.size)}this.modal=this.el.shadowRoot.querySelector("dnn-modal")};o.prototype.handleConfirm=function(){this.modal.hide();this.modalVisible=false;this.confirmed.emit()};o.prototype.handleCancel=function(){this.modal.hide();this.modalVisible=false;this.canceled.emit()};o.prototype.handleClick=function(){if(this.confirm&&!this.modalVisible){this.modal.show();this.modalVisible=true}};o.prototype.render=function(){var o=this;return t(n,{disabled:this.disabled,style:{"pointer-events":this.disabled?"none":"all"}},t("button",{class:"button",onClick:function(){return o.handleClick()},disabled:this.disabled},t("slot",null)),this.confirm&&t("dnn-modal",{showCloseButton:false,backdropDismiss:false},t("p",null,this.confirmMessage),t("div",{style:{display:"flex",justifyContent:"flex-end"}},t("dnn-button",{type:"primary",style:{margin:"5px"},onClick:function(){return o.handleConfirm()}},this.confirmYesText),t("dnn-button",{type:"secondary",style:{margin:"5px"},onClick:function(){return o.handleCancel()}},this.confirmNoText))))};Object.defineProperty(o.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return o}());i.style=s}}}));
+//# sourceMappingURL=dnn-button.system.entry.js.map

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

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

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
 
-const dnnCheckboxCss = ":host{--focus-color:var(--dnn-color-primary, #3792ED);display:inline-flex;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:flex;justify-content:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{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 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) {

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

@@ -1 +1 @@
-{"file":"dnn-checkbox.entry.esm.js","mappings":";;AAAA,MAAM,cAAc,GAAG,mVAAmV;;ICO7V,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,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}

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

@@ -0,0 +1,2 @@
+System.register(["./index-5c2c8f16.system.js"],(function(e){"use strict";var t,n,i,c,s;return{setters:[function(e){t=e.r;n=e.e;i=e.h;c=e.f;s=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(c,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 s(this)},enumerable:false,configurable:true});return e}());r.style=h}}}));
+//# sourceMappingURL=dnn-checkbox.system.entry.js.map

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

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

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, f as Host } from './index-3e56049b.js';
 
-const dnnChevronCss = ":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{transform:rotate(90deg)}";
+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) {

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

@@ -1 +1 @@
-{"file":"dnn-chevron.entry.esm.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gXAAgX;;ICSzX,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;;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}

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

@@ -0,0 +1,2 @@
+System.register(["./index-5c2c8f16.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

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

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
 import { D as Debounce } from './debounce-06f55268.js';
 
-const dnnCollapsibleCss = ":host{display:block}:host #container{height:0;overflow:hidden;transition:height 300ms ease-in-out}";
+const dnnCollapsibleCss = ":host{display:block}:host #container{height:0;overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

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

@@ -1 +1 @@
-{"file":"dnn-collapsible.entry.esm.js","mappings":"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","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  #container{\r\n    height:0;\r\n    overflow: hidden;\r\n    transition: height 300ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\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  @State() animating: boolean = false;\r\n\r\n  @Watch(\"expanded\")\r\n  handleExpandedChanged(newValue: boolean){\r\n    this.animating = true;\r\n    requestAnimationFrame(() => {\r\n      const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n      if (newValue){\r\n        container.style.height = container.scrollHeight + \"px\";\r\n      }\r\n      else{\r\n        container.style.height = \"0px\";\r\n      }\r\n    });\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.animating = false;\r\n      this.dnnCollapsibleHeightChanged.emit();\r\n    });\r\n  }\r\n\r\n  /** Updates the component height, use to update after a slot content changes. */\r\n  @Debounce()\r\n  @Method()\r\n  async updateSize() {\r\n    this.updateComponentSize();\r\n  }\r\n\r\n  private updateComponentSize(){\r\n    if (this.expanded){\r\n      this.animating = true;\r\n      requestAnimationFrame(() => {\r\n        const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n        let newHeight = 0;\r\n        container.querySelector('slot').assignedElements().forEach(node => {\r\n          newHeight += node.scrollHeight;\r\n        });\r\n        container.style.height = newHeight + \"px\";\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen('dnnCollapsibleHeightChanged')\r\n  handleOtherCollapsibleHeightChanged(){\r\n    setTimeout(() => {\r\n      this.updateComponentSize();\r\n    }, this.transitionDuration);\r\n  }\r\n\r\n  private mutationObserver: MutationObserver;\r\n\r\n  private handleMutation(mutationList){\r\n    mutationList.forEach(mutation => {\r\n      requestAnimationFrame(() => {\r\n        mutation.target.closest('dnn-collapsible').updateSize();\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.mutationObserver = new MutationObserver((mutationList) => {\r\n      this.handleMutation(mutationList);\r\n    });\r\n  }\r\n\r\n  componentDidLoad(){\r\n    const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n    container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n    // Monitor for content changes and update own height\r\n    const childNodes = [this.el];\r\n    childNodes.forEach(element => {\r\n      this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n    });\r\n\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    slot.addEventListener(\"slotchange\", () => {\r\n      this.updateSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(){\r\n    this.mutationObserver.disconnect();\r\n  }\r\n  /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\">\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":"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","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  #container{\r\n    height:0;\r\n    overflow: hidden;\r\n    transition: height 300ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\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  @State() animating: boolean = false;\r\n\r\n  @Watch(\"expanded\")\r\n  handleExpandedChanged(newValue: boolean){\r\n    this.animating = true;\r\n    requestAnimationFrame(() => {\r\n      const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n      if (newValue){\r\n        container.style.height = container.scrollHeight + \"px\";\r\n      }\r\n      else{\r\n        container.style.height = \"0px\";\r\n      }\r\n    });\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.animating = false;\r\n      this.dnnCollapsibleHeightChanged.emit();\r\n    });\r\n  }\r\n\r\n  /** Updates the component height, use to update after a slot content changes. */\r\n  @Debounce()\r\n  @Method()\r\n  async updateSize() {\r\n    this.updateComponentSize();\r\n  }\r\n\r\n  private updateComponentSize(){\r\n    if (this.expanded){\r\n      this.animating = true;\r\n      requestAnimationFrame(() => {\r\n        const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n        let newHeight = 0;\r\n        container.querySelector('slot').assignedElements().forEach(node => {\r\n          newHeight += node.scrollHeight;\r\n        });\r\n        container.style.height = newHeight + \"px\";\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen('dnnCollapsibleHeightChanged')\r\n  handleOtherCollapsibleHeightChanged(){\r\n    setTimeout(() => {\r\n      this.updateComponentSize();\r\n    }, this.transitionDuration);\r\n  }\r\n\r\n  private mutationObserver: MutationObserver;\r\n\r\n  private handleMutation(mutationList){\r\n    mutationList.forEach(mutation => {\r\n      requestAnimationFrame(() => {\r\n        mutation.target.closest('dnn-collapsible').updateSize();\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.mutationObserver = new MutationObserver((mutationList) => {\r\n      this.handleMutation(mutationList);\r\n    });\r\n  }\r\n\r\n  componentDidLoad(){\r\n    const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n    container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n    // Monitor for content changes and update own height\r\n    const childNodes = [this.el];\r\n    childNodes.forEach(element => {\r\n      this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n    });\r\n\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    slot.addEventListener(\"slotchange\", () => {\r\n      this.updateSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(){\r\n    this.mutationObserver.disconnect();\r\n  }\r\n  /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\">\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"],"version":3}

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

@@ -0,0 +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,o){function a(e){try{s(i.next(e))}catch(e){o(e)}}function u(e){try{s(i["throw"](e))}catch(e){o(e)}}function s(e){e.done?n(e.value):r(e.value).then(a,u)}s((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){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:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function u(e){return function(t){return s([e,t])}}function s(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=t.call(e,n)}catch(e){a=[6,e];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-5c2c8f16.system.js","./debounce-eef81bf7.system.js"],(function(e){"use strict";var t,n,i,r,o,a;return{setters:[function(e){t=e.r;n=e.e;i=e.h;r=e.f;o=e.g},function(e){a=e.D}],execute:function(){var u=":host{display:block}:host #container{height:0;overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}";var s=undefined&&undefined.__decorate||function(e,t,n,i){var r=arguments.length,o=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,n):i,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,t,n,i);else for(var u=e.length-1;u>=0;u--)if(a=e[u])o=(r<3?a(o):r>3?a(t,n,o):a(t,n))||o;return r>3&&o&&Object.defineProperty(t,n,o),o};var l=e("dnn_collapsible",function(){function e(e){t(this,e);this.dnnCollapsibleHeightChanged=n(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150;this.animating=false}e.prototype.handleExpandedChanged=function(e){var t=this;this.animating=true;requestAnimationFrame((function(){var n=t.el.shadowRoot.querySelector("#container");if(e){n.style.height=n.scrollHeight+"px"}else{n.style.height="0px"}}));requestAnimationFrame((function(){t.animating=false;t.dnnCollapsibleHeightChanged.emit()}))};e.prototype.updateSize=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.updateComponentSize();return[2]}))}))};e.prototype.updateComponentSize=function(){var e=this;if(this.expanded){this.animating=true;requestAnimationFrame((function(){var t=e.el.shadowRoot.querySelector("#container");var n=0;t.querySelector("slot").assignedElements().forEach((function(e){n+=e.scrollHeight}));t.style.height=n+"px"}))}};e.prototype.handleOtherCollapsibleHeightChanged=function(){var e=this;setTimeout((function(){e.updateComponentSize()}),this.transitionDuration)};e.prototype.handleMutation=function(e){e.forEach((function(e){requestAnimationFrame((function(){e.target.closest("dnn-collapsible").updateSize()}))}))};e.prototype.componentWillLoad=function(){var e=this;this.mutationObserver=new MutationObserver((function(t){e.handleMutation(t)}))};e.prototype.componentDidLoad=function(){var e=this;var t=this.el.shadowRoot.querySelector("#container");t.style.transitionDuration=this.transitionDuration+"ms";var n=[this.el];n.forEach((function(t){e.mutationObserver.observe(t,{attributes:true,characterData:true,childList:true,subtree:true})}));var i=this.el.shadowRoot.querySelector("slot");i.addEventListener("slotchange",(function(){e.updateSize()}))};e.prototype.disconnectedCallback=function(){this.mutationObserver.disconnect()};e.prototype.render=function(){return i(r,null,i("div",{id:"container"},i("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{expanded:["handleExpandedChanged"]}},enumerable:false,configurable:true});return e}());s([a()],l.prototype,"updateSize",null);l.style=u}}}));
+//# sourceMappingURL=dnn-collapsible.system.entry.js.map

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

@@ -0,0 +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","animating","prototype","handleExpandedChanged","newValue","_this","requestAnimationFrame","container","el","shadowRoot","querySelector","style","height","scrollHeight","dnnCollapsibleHeightChanged","emit","updateSize","updateComponentSize","newHeight","assignedElements","forEach","node","handleOtherCollapsibleHeightChanged","setTimeout","handleMutation","mutationList","mutation","target","closest","componentWillLoad","mutationObserver","MutationObserver","componentDidLoad","childNodes","element","observe","attributes","characterData","childList","subtree","slot","addEventListener","disconnectedCallback","disconnect","render","h","Host","id","Debounce"],"mappings":"opDAAA,IAAMA,EAAoB,ggBCQbC,EAAcC,EAAA,kBAAA,WAL3B,SAAAC,EAAAC,sFAUyBC,KAAAC,SAAoB,MAGnCD,KAAAE,mBAA8B,IAE7BF,KAAAG,UAAqB,MAG9BL,EAAAM,UAAAC,sBAAA,SAAsBC,GAAtB,IAAAC,EAAAP,KACEA,KAAKG,UAAY,KACjBK,uBAAsB,WACpB,IAAMC,EAAYF,EAAKG,GAAGC,WAAWC,cAAc,cACnD,GAAIN,EAAS,CACXG,EAAUI,MAAMC,OAASL,EAAUM,aAAe,SAEhD,CACFN,EAAUI,MAAMC,OAAS,UAI7BN,uBAAsB,WACpBD,EAAKJ,UAAY,MACjBI,EAAKS,4BAA4BC,WAO/BnB,EAAAM,UAAAc,WAAN,gGACElB,KAAKmB,uCAGCrB,EAAAM,UAAAe,oBAAA,WAAA,IAAAZ,EAAAP,KACN,GAAIA,KAAKC,SAAS,CAChBD,KAAKG,UAAY,KACjBK,uBAAsB,WACpB,IAAMC,EAAYF,EAAKG,GAAGC,WAAWC,cAAc,cACnD,IAAIQ,EAAY,EAChBX,EAAUG,cAAc,QAAQS,mBAAmBC,SAAQ,SAAAC,GACzDH,GAAaG,EAAKR,gBAEpBN,EAAUI,MAAMC,OAASM,EAAY,UAS3CtB,EAAAM,UAAAoB,oCAAA,WAAA,IAAAjB,EAAAP,KACEyB,YAAW,WACTlB,EAAKY,wBACJnB,KAAKE,qBAKFJ,EAAAM,UAAAsB,eAAA,SAAeC,GACrBA,EAAaL,SAAQ,SAAAM,GACnBpB,uBAAsB,WACpBoB,EAASC,OAAOC,QAAQ,mBAAmBZ,oBAKjDpB,EAAAM,UAAA2B,kBAAA,WAAA,IAAAxB,EAAAP,KACEA,KAAKgC,iBAAmB,IAAIC,kBAAiB,SAACN,GAC5CpB,EAAKmB,eAAeC,OAIxB7B,EAAAM,UAAA8B,iBAAA,WAAA,IAAA3B,EAAAP,KACE,IAAMS,EAAYT,KAAKU,GAAGC,WAAWC,cAAc,cACnDH,EAAUI,MAAMX,mBAAqBF,KAAKE,mBAAqB,KAG/D,IAAMiC,EAAa,CAACnC,KAAKU,IACzByB,EAAWb,SAAQ,SAAAc,GACjB7B,EAAKyB,iBAAiBK,QAAQD,EAAS,CAACE,WAAY,KAAMC,cAAe,KAAMC,UAAW,KAAMC,QAAS,UAG3G,IAAMC,EAAO1C,KAAKU,GAAGC,WAAWC,cAAc,QAC9C8B,EAAKC,iBAAiB,cAAc,WAClCpC,EAAKW,iBAITpB,EAAAM,UAAAwC,qBAAA,WACE5C,KAAKgC,iBAAiBa,cAIxB/C,EAAAM,UAAA0C,OAAA,WACE,OACEC,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,GAAG,aACJF,EAAA,OAAA,kQAvGe,OAgCxBG","sourcesContent":[":host {\r\n  display: block;\r\n  #container{\r\n    height:0;\r\n    overflow: hidden;\r\n    transition: height 300ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\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  @State() animating: boolean = false;\r\n\r\n  @Watch(\"expanded\")\r\n  handleExpandedChanged(newValue: boolean){\r\n    this.animating = true;\r\n    requestAnimationFrame(() => {\r\n      const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n      if (newValue){\r\n        container.style.height = container.scrollHeight + \"px\";\r\n      }\r\n      else{\r\n        container.style.height = \"0px\";\r\n      }\r\n    });\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.animating = false;\r\n      this.dnnCollapsibleHeightChanged.emit();\r\n    });\r\n  }\r\n\r\n  /** Updates the component height, use to update after a slot content changes. */\r\n  @Debounce()\r\n  @Method()\r\n  async updateSize() {\r\n    this.updateComponentSize();\r\n  }\r\n\r\n  private updateComponentSize(){\r\n    if (this.expanded){\r\n      this.animating = true;\r\n      requestAnimationFrame(() => {\r\n        const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n        let newHeight = 0;\r\n        container.querySelector('slot').assignedElements().forEach(node => {\r\n          newHeight += node.scrollHeight;\r\n        });\r\n        container.style.height = newHeight + \"px\";\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen('dnnCollapsibleHeightChanged')\r\n  handleOtherCollapsibleHeightChanged(){\r\n    setTimeout(() => {\r\n      this.updateComponentSize();\r\n    }, this.transitionDuration);\r\n  }\r\n\r\n  private mutationObserver: MutationObserver;\r\n\r\n  private handleMutation(mutationList){\r\n    mutationList.forEach(mutation => {\r\n      requestAnimationFrame(() => {\r\n        mutation.target.closest('dnn-collapsible').updateSize();\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.mutationObserver = new MutationObserver((mutationList) => {\r\n      this.handleMutation(mutationList);\r\n    });\r\n  }\r\n\r\n  componentDidLoad(){\r\n    const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n    container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n    // Monitor for content changes and update own height\r\n    const childNodes = [this.el];\r\n    childNodes.forEach(element => {\r\n      this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n    });\r\n\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    slot.addEventListener(\"slotchange\", () => {\r\n      this.updateSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(){\r\n    this.mutationObserver.disconnect();\r\n  }\r\n  /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\">\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}

package/dist/dnn/dnn-color-picker.entry.js

@@ -192,7 +192,7 @@ class ColorInfo {
   }
 }
 
-const dnnColorPickerCss = ".dnn-color-picker{padding:15px;max-width:400px}.dnn-color-picker .dnn-color-sliders{display:flex;flex-direction:column;min-width:200px}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b{border:1px solid #ccc;padding-bottom:var(--color-box-height, 50%);position:relative;background-color:red}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(to right, white, red);mix-blend-mode:saturation}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:linear-gradient(to bottom, white, black);mix-blend-mode:luminosity}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button{position:absolute;bottom:calc(50% - 4px);left:calc(50% - 4px);width:8px;height:8px;z-index:3;display:block;background:none;border:none;margin-left:-4px;margin-bottom:-4px;padding:7px;background-color:#fff;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:before{content:\"\";position:absolute;top:-1px;left:-1px;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:after{content:\"\";position:absolute;top:0px;left:0px;border-radius:50%;width:10px;height:10px;border:2px solid #ccc}.dnn-color-picker .dnn-color-sliders .dnn-color-bar{display:flex;align-items:center;margin-top:15px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result{flex-direction:column;width:50px;height:50px;border-radius:50%;background:red}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue{flex:auto;margin-left:10px;height:16px;border:1px solid #ccc;position:relative;background:linear-gradient(to right, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button{width:10px;height:20px;position:absolute;top:-2px;left:calc(50% - 4px);border:0;padding:0;background-color:transparent;padding-left:-8px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button:before{content:\"\";position:absolute;top:-2px;left:0px;border-radius:3px;width:100%;height:100%;border:1px solid #ccc;background-color:#fff}.dnn-color-picker .dnn-color-fields{display:flex;flex-direction:column;justify-content:space-between}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch{display:flex;align-items:flex-end;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button{background-color:transparent;border:none}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button svg{width:3em;height:3em;pointer-events:none;outline:none}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields{display:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field{display:flex;flex-direction:column;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.red{border-color:red}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.green{border-color:green}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.blue{border-color:blue}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields{display:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field{display:flex;flex-direction:column;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields{display:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field{display:flex;flex-direction:column;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input{position:relative;border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.323em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input input{border:0;padding:0;margin:0;width:100%;height:100%;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button{position:absolute;height:100%;top:0;right:1em;background-color:transparent;border:0;padding:0;margin:0}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button svg{min-width:1em}";
+const dnnColorPickerCss = ".dnn-color-picker{padding:15px;max-width:400px}.dnn-color-picker .dnn-color-sliders{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:200px}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b{border:1px solid #ccc;padding-bottom:var(--color-box-height, 50%);position:relative;background-color:red}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:-webkit-gradient(linear, left top, right top, from(white), to(red));background:linear-gradient(to right, white, red);mix-blend-mode:saturation}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:-webkit-gradient(linear, left top, left bottom, from(white), to(black));background:linear-gradient(to bottom, white, black);mix-blend-mode:luminosity}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button{position:absolute;bottom:calc(50% - 4px);left:calc(50% - 4px);width:8px;height:8px;z-index:3;display:block;background:none;border:none;margin-left:-4px;margin-bottom:-4px;padding:7px;background-color:#fff;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:before{content:\"\";position:absolute;top:-1px;left:-1px;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:after{content:\"\";position:absolute;top:0px;left:0px;border-radius:50%;width:10px;height:10px;border:2px solid #ccc}.dnn-color-picker .dnn-color-sliders .dnn-color-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:15px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result{-ms-flex-direction:column;flex-direction:column;width:50px;height:50px;border-radius:50%;background:red}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue{-ms-flex:auto;flex:auto;margin-left:10px;height:16px;border:1px solid #ccc;position:relative;background:-webkit-gradient(linear, left top, right top, color-stop(0, #f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#f00));background:linear-gradient(to right, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button{width:10px;height:20px;position:absolute;top:-2px;left:calc(50% - 4px);border:0;padding:0;background-color:transparent;padding-left:-8px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button:before{content:\"\";position:absolute;top:-2px;left:0px;border-radius:3px;width:100%;height:100%;border:1px solid #ccc;background-color:#fff}.dnn-color-picker .dnn-color-fields{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button{background-color:transparent;border:none}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button svg{width:3em;height:3em;pointer-events:none;outline:none}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.red{border-color:red}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.green{border-color:green}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.blue{border-color:blue}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input{position:relative;border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.323em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input input{border:0;padding:0;margin:0;width:100%;height:100%;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button{position:absolute;height:100%;top:0;right:1em;background-color:transparent;border:0;padding:0;margin:0}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button svg{min-width:1em}";
 
 /** Reusable DNN UI component to pick a color
  * @copyright Copyright (c) .NET Foundation. All rights reserved.