v4web-components
Version:
Stencil Component Starter
213 lines (212 loc) • 5.83 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsButton {
constructor() {
this.size = 'medium';
this.type = 'button';
this.variant = 'primary';
this.disabled = undefined;
this.loading = undefined;
this.leadingIcon = undefined;
this.stepIcon = undefined;
this.label = undefined;
this.maxWidth = false;
}
handleClick() {
this.handleButton.emit();
}
render() {
return (h("button", { disabled: this.disabled || this.loading, onClick: () => this.handleClick(), type: this.type, class: `button ${this.maxWidth ? 'max-width' : ''} ${this.variant} ${this.size} ${this.loading && 'loading'}` }, h("span", { class: "label" }, this.leadingIcon && h("lab-ds-icon-not-selectable", { class: "leading-icon", size: this.size === 'large' ? 's-medium' : 'small', icon: this.leadingIcon }), this.label && h("span", { class: "label-text" }, this.label), this.stepIcon && h("lab-ds-icon-not-selectable", { class: "step-icon", size: this.size === 'large' ? 's-medium' : 'small', icon: this.stepIcon })), h("div", { class: "icon-loading" }, h("span", { class: "material-symbols-outlined icon" }, "progress_activity"))));
}
static get is() { return "lab-ds-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-button.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-button.css"]
};
}
static get properties() {
return {
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'small' | 'medium' | 'large'",
"resolved": "\"large\" | \"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "'medium'"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'button' | 'submit'",
"resolved": "\"button\" | \"submit\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false,
"defaultValue": "'button'"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'outlined' | 'link-button' | 'cta' | 'danger-primary' | 'danger-outlined'",
"resolved": "\"cta\" | \"danger-outlined\" | \"danger-primary\" | \"link-button\" | \"outlined\" | \"primary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "variant",
"reflect": false,
"defaultValue": "'primary'"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "loading",
"reflect": false
},
"leadingIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "leading-icon",
"reflect": false
},
"stepIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "step-icon",
"reflect": false
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false
},
"maxWidth": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "max-width",
"reflect": false,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "handleButton",
"name": "handleButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
}
//# sourceMappingURL=lab-ds-button.js.map