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

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

@@ -1,272 +1,276 @@
-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"; }
-}
+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.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;
+    }
+  }
+  getElementClasses() {
+    const classes = [];
+    classes.push(this.type);
+    if (this.reversed) {
+      classes.push('reversed');
+    }
+    if (this.size !== 'normal') {
+      classes.push(this.size);
+    }
+    return classes.join(' ');
+  }
+  render() {
+    return (h(Host, { class: this.getElementClasses(), 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,\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": true,
+      "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": true,
+      "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

@@ -1 +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"]}
+{"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';\n\n/**\n * @slot Content of the button\n */\n@Component({\n  tag: 'dnn-button',\n  styleUrl: 'dnn-button.scss',\n  shadow: true\n})\nexport class DnnButton {\n\n  /**\n   * Optional button style,\n   * can be either primary, secondary or tertiary and defaults to primary if not specified\n   */\n  @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * Optionally reverses the button style.\n   */\n  @Prop() reversed: boolean = false;\n\n  /**\n   * Optionally sets the button size, small normal or large, defaults to normal\n   */\n  @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\n\n  /**\n   * Optionally add a confirmation dialog before firing the action.\n   */\n  @Prop() confirm?: boolean = false;\n\n  /**\n   * The text of the yes button for confirmation.\n   */\n  @Prop() confirmYesText?: string = \"Yes\";\n\n  /**\n   * The text of the no button for confirmation.\n   */\n  @Prop() confirmNoText?: string = \"No\";\n\n  /**\n   * The text of the confirmation message;\n   */\n  @Prop() confirmMessage?: string = \"Are you sure ?\";\n  \n  /**\n   * Disables the button\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() modalVisible: boolean = false;\n\n  @Element() el!: HTMLDnnButtonElement;\n\n  private modal!: HTMLDnnModalElement;\n\n  /** \n   * Fires when confirm is true and the user confirms the action.\n  */\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) confirmed: EventEmitter;\n\n  /**\n   * Fires when confirm is true and the user cancels the action.\n   */\n  @Event({bubbles: true}) canceled: EventEmitter;\n\n  componentDidLoad(){\n    this.modal = this.el.shadowRoot.querySelector('dnn-modal');\n  }\n\n  private handleConfirm(){\n    this.modal.hide();\n    this.modalVisible = false;\n    this.confirmed.emit();\n  }\n\n  private handleCancel(){\n    this.modal.hide();\n    this.modalVisible = false;\n    this.canceled.emit();\n  }\n  \n  private handleClick(): void {\n    if (this.confirm && !this.modalVisible){\n      this.modal.show();\n      this.modalVisible = true;\n    }\n  }\n\n  private getElementClasses(): string | { [className: string]: boolean; } {\n    const classes: string[] = [];\n    classes.push(this.type);\n    if (this.reversed){\n      classes.push('reversed');\n    }\n    if (this.size !== 'normal'){\n      classes.push(this.size);\n    }\n    return classes.join(' ');\n  }\n\n  render() {\n    return (\n      <Host class={this.getElementClasses()} disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\n        <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\n          <slot></slot>\n        </button>\n        {this.confirm &&\n            <dnn-modal showCloseButton={false} backdropDismiss={false}>\n              <p>{this.confirmMessage}</p>\n              <div style={\n                {\n                  display: 'flex',\n                  justifyContent: 'flex-end'\n                }\n              }>\n                <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\n                <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\n              </div>\n            </dnn-modal>\n          }\n      </Host>\n    );\n  }\n}\n"]}