mwcpl
Version:
Master's Web Component Pattern Library
178 lines (177 loc) • 5.34 kB
JavaScript
import { Component, h, Prop } from '@stencil/core';
export class MwcplButton {
constructor() {
/**
* Label for the button.
*/
this.label = '';
/**
* Makes the button text uppercase.
*/
this.uppercase = false;
/**
* Creates a fullwidth button.
*/
this.fullwidth = false;
/**
* Creates an outlined button.
*/
this.outlined = false;
/**
* Makes the button non interactive.
*/
this.disabled = false;
/**
* Creates a button with rounded corners.
*/
this.rounded = false;
/**
* Adds a loading indicator.
*/
this.loading = false;
}
render() {
return (h("button", { type: "button", disabled: this.disabled },
h("span", { class: "loading" },
h("span", { class: "line" })),
h("slot", { name: "leading-icon" }),
h("span", { class: "label" }, this.label),
h("slot", { name: "trailing-icon" })));
}
static get is() { return "mwcpl-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["mwcpl-button.scss"]
}; }
static get styleUrls() { return {
"$": ["mwcpl-button.css"]
}; }
static get properties() { return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label for the button."
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"uppercase": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Makes the button text uppercase."
},
"attribute": "uppercase",
"reflect": false,
"defaultValue": "false"
},
"fullwidth": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Creates a fullwidth button."
},
"attribute": "fullwidth",
"reflect": false,
"defaultValue": "false"
},
"outlined": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Creates an outlined button."
},
"attribute": "outlined",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Makes the button non interactive."
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"rounded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Creates a button with rounded corners."
},
"attribute": "rounded",
"reflect": false,
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Adds a loading indicator."
},
"attribute": "loading",
"reflect": false,
"defaultValue": "false"
}
}; }
}