@dnncommunity/dnn-elements 0.13.0-beta.1

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

@@ -0,0 +1,87 @@
+: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;
+}

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

@@ -0,0 +1,272 @@
+import { Component, Element, Host, h, Prop, State, Event } from '@stencil/core';
+/**
+ * @slot Content of the button
+ */
+export class DnnButton {
+  constructor() {
+    /**
+     * Optional button style,
+     * can be either primary, secondary or tertiary and defaults to primary if not specified
+     */
+    this.type = 'primary';
+    /**
+     * Optionally reverses the button style.
+     */
+    this.reversed = false;
+    /**
+     * Optionally sets the button size, small normal or large, defaults to normal
+     */
+    this.size = 'normal';
+    /**
+     * Optionally add a confirmation dialog before firing the action.
+     */
+    this.confirm = false;
+    /**
+     * The text of the yes button for confirmation.
+     */
+    this.confirmYesText = "Yes";
+    /**
+     * The text of the no button for confirmation.
+     */
+    this.confirmNoText = "No";
+    /**
+     * The text of the confirmation message;
+     */
+    this.confirmMessage = "Are you sure ?";
+    /**
+     * Disables the button
+     */
+    this.disabled = false;
+    this.modalVisible = false;
+  }
+  componentDidLoad() {
+    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');
+  }
+  handleConfirm() {
+    this.modal.hide();
+    this.modalVisible = false;
+    this.confirmed.emit();
+  }
+  handleCancel() {
+    this.modal.hide();
+    this.modalVisible = false;
+    this.canceled.emit();
+  }
+  handleClick() {
+    if (this.confirm && !this.modalVisible) {
+      this.modal.show();
+      this.modalVisible = true;
+    }
+  }
+  render() {
+    return (h(Host, { disabled: this.disabled, style: { 'pointer-events': this.disabled ? 'none' : 'all' } },
+      h("button", { class: "button", onClick: () => this.handleClick(), disabled: this.disabled },
+        h("slot", null)),
+      this.confirm &&
+        h("dnn-modal", { showCloseButton: false, backdropDismiss: false },
+          h("p", null, this.confirmMessage),
+          h("div", { style: {
+              display: 'flex',
+              justifyContent: 'flex-end'
+            } },
+            h("dnn-button", { type: 'primary', style: { margin: '5px' }, onClick: () => this.handleConfirm() }, this.confirmYesText),
+            h("dnn-button", { type: 'secondary', style: { margin: '5px' }, onClick: () => this.handleCancel() }, this.confirmNoText)))));
+  }
+  static get is() { return "dnn-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-button.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'secondary' | 'tertiary'",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Optional button style,\r\ncan be either primary, secondary or tertiary and defaults to primary if not specified"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "reversed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Optionally reverses the button style."
+      },
+      "attribute": "reversed",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'normal' | 'large'",
+        "resolved": "\"large\" | \"normal\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optionally sets the button size, small normal or large, defaults to normal"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'normal'"
+    },
+    "confirm": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optionally add a confirmation dialog before firing the action."
+      },
+      "attribute": "confirm",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "confirmYesText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The text of the yes button for confirmation."
+      },
+      "attribute": "confirm-yes-text",
+      "reflect": false,
+      "defaultValue": "\"Yes\""
+    },
+    "confirmNoText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The text of the no button for confirmation."
+      },
+      "attribute": "confirm-no-text",
+      "reflect": false,
+      "defaultValue": "\"No\""
+    },
+    "confirmMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The text of the confirmation message;"
+      },
+      "attribute": "confirm-message",
+      "reflect": false,
+      "defaultValue": "\"Are you sure ?\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disables the button"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "modalVisible": {}
+  }; }
+  static get events() { return [{
+      "method": "confirmed",
+      "name": "confirmed",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when confirm is true and the user confirms the action."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "canceled",
+      "name": "canceled",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when confirm is true and the user cancels the action."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=dnn-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-button.js","sourceRoot":"","sources":["../../../src/components/dnn-button/dnn-button.tsx"],"names":[],"mappings":"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","sourcesContent":["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/collection/components/dnn-checkbox/dnn-checkbox.css

@@ -0,0 +1,27 @@
+:host {
+  /**
+  * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.
+  */
+  --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);
+}

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

@@ -0,0 +1,140 @@
+import { Component, Element, Host, h, Prop, Event } from '@stencil/core';
+export class DnnCheckbox {
+  constructor() {
+    /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */
+    this.checked = false;
+    /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */
+    this.useIntermediate = false;
+  }
+  changeState() {
+    if (!this.useIntermediate) {
+      this.checked = !this.checked;
+      this.emitEvents();
+      return;
+    }
+    if (this.checked === true) {
+      this.checked = false;
+      this.button.classList.remove("undefined");
+      this.emitEvents();
+      return;
+    }
+    if (this.checked === undefined) {
+      this.checked = true;
+      this.button.classList.remove("undefined");
+      this.emitEvents();
+      return;
+    }
+    if (this.checked === false) {
+      this.checked = undefined;
+      this.button.classList.add("undefined");
+      this.emitEvents();
+      return;
+    }
+  }
+  emitEvents() {
+    this.checkedchange.emit(this.checked);
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { class: "icon", onClick: () => this.changeState(), ref: el => this.button = el },
+        this.checked === false &&
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+            h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+            h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })),
+        this.checked === true &&
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+            h("path", { d: "M0 0h24v24H0z", fill: "none" }),
+            h("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })),
+        this.checked === undefined &&
+          h("svg", { class: "undefined", xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+            h("g", null,
+              h("rect", { fill: "none", height: "24", width: "24" })),
+            h("g", null,
+              h("g", null,
+                h("g", null,
+                  h("path", { d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z" })))))),
+      h("label", { htmlFor: this.el.id, onClick: () => this.changeState() },
+        h("slot", null))));
+  }
+  static get is() { return "dnn-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-checkbox.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean | undefined",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined)"
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "useIntermediate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state)"
+      },
+      "attribute": "use-intermediate",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value for this checkbox (not to be confused with its checked state)."
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "checkedchange",
+      "name": "checkedchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires up when the checkbox checked property changes."
+      },
+      "complexType": {
+        "original": "boolean | undefined",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=dnn-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-checkbox.js","sourceRoot":"","sources":["../../../src/components/dnn-checkbox/dnn-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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/collection/components/dnn-chevron/dnn-chevron.css

@@ -0,0 +1,30 @@
+: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);
+}