@seniorsistemas/tecnologia-webcomponents
Version:
A webcomponents library for Senior Sistemas - Suite BPM products.
370 lines (369 loc) • 9.75 kB
JavaScript
import { Component, Host, h, Prop, Event } from '@stencil/core';
import { defaultTheme } from '../../defaultTheme';
import { TecStatus } from '../../models/status.model';
import { TecButtonColor, TecButtonIconMode, TecButtonMode, TecButtonSize } from './button.model';
export class TecButton {
constructor() {
this.theme = defaultTheme;
/**
* The status of button (color)
*/
this.status = TecStatus.primary;
/**
* Mode of button (like square or rounded)
*/
this.mode = TecButtonMode.rounded;
/**
* Colors of button (like gradient)
*/
this.color = TecButtonColor.solid;
/**
* Size of button
*/
this.size = TecButtonSize.small;
/**
* Boolean to indicate if button is disabled
*/
this.disabled = false;
/**
* If `true` button use `width: 100%`
*/
this.fullWidth = false;
/**
* If `true` button removes label
*/
this.onlyIcon = false;
/**
* Position of icon
*/
this.iconMode = TecButtonIconMode.left;
/**
* Add a loading indicator to button
* You need add a manual control to remove loading
*/
this.loading = false;
this.handleEventClick = (event) => {
if (!this.isDisabled)
this.clicked.emit(event);
};
}
componentDidLoad() {
if (this.onlyIcon && !this.icon) {
throw new Error(`When 'onlyIcon' property is enabled a 'icon' should be passed!`);
}
}
get isDisabled() {
return this.disabled || this.loading;
}
render() {
const classList = {
[this.color]: true,
[this.mode]: true,
[this.status]: true,
'disabled': this.isDisabled,
'responsive': this.fullWidth,
'text-sans': true,
'text-base': true,
};
const iconClasses = {
'reverse': !!this.icon && this.iconMode === TecButtonIconMode.right,
'no-margins': this.onlyIcon,
};
return (h(Host, null,
h("button", { type: "button", id: this.buttonId, class: classList, disabled: this.isDisabled, onClick: this.handleEventClick },
h("span", { class: iconClasses },
!!this.icon && h("i", { class: this.icon }),
!this.onlyIcon && this.label))));
}
static get is() { return "tec-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["button.scss"]
}; }
static get styleUrls() { return {
"$": ["button.css"]
}; }
static get properties() { return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TecnologiaTheme",
"resolved": "TecnologiaTheme.dark | TecnologiaTheme.light",
"references": {
"TecnologiaTheme": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "theme",
"reflect": true,
"defaultValue": "defaultTheme"
},
"buttonId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optional ID to be attached on button"
},
"attribute": "buttonid",
"reflect": true
},
"label": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Text to show inside button"
},
"attribute": "label",
"reflect": false
},
"status": {
"type": "string",
"mutable": true,
"complexType": {
"original": "TecStatus",
"resolved": "TecStatus.danger | TecStatus.info | TecStatus.primary | TecStatus.secondary | TecStatus.success | TecStatus.warn",
"references": {
"TecStatus": {
"location": "import",
"path": "../../models/status.model"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The status of button (color)"
},
"attribute": "status",
"reflect": false,
"defaultValue": "TecStatus.primary"
},
"mode": {
"type": "string",
"mutable": true,
"complexType": {
"original": "TecButtonMode",
"resolved": "TecButtonMode.radius | TecButtonMode.rounded | TecButtonMode.square",
"references": {
"TecButtonMode": {
"location": "import",
"path": "./button.model"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Mode of button (like square or rounded)"
},
"attribute": "mode",
"reflect": false,
"defaultValue": "TecButtonMode.rounded"
},
"color": {
"type": "string",
"mutable": true,
"complexType": {
"original": "TecButtonColor",
"resolved": "TecButtonColor.basic | TecButtonColor.gradient | TecButtonColor.outline | TecButtonColor.solid",
"references": {
"TecButtonColor": {
"location": "import",
"path": "./button.model"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Colors of button (like gradient)"
},
"attribute": "color",
"reflect": false,
"defaultValue": "TecButtonColor.solid"
},
"size": {
"type": "string",
"mutable": true,
"complexType": {
"original": "TecButtonSize",
"resolved": "TecButtonSize.giant | TecButtonSize.large | TecButtonSize.medium | TecButtonSize.small | TecButtonSize.tiny",
"references": {
"TecButtonSize": {
"location": "import",
"path": "./button.model"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size of button"
},
"attribute": "size",
"reflect": false,
"defaultValue": "TecButtonSize.small"
},
"disabled": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Boolean to indicate if button is disabled"
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"fullWidth": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true` button use `width: 100%`"
},
"attribute": "full-width",
"reflect": true,
"defaultValue": "false"
},
"onlyIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true` button removes label"
},
"attribute": "onlyicon",
"reflect": false,
"defaultValue": "false"
},
"iconMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TecButtonIconMode",
"resolved": "TecButtonIconMode.left | TecButtonIconMode.right",
"references": {
"TecButtonIconMode": {
"location": "import",
"path": "./button.model"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Position of icon"
},
"attribute": "iconmode",
"reflect": false,
"defaultValue": "TecButtonIconMode.left"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Icon class from FontAwesome 5 Free\nAllows to use: brands, regular, solid\nExample: 'far fa-paper-plane'"
},
"attribute": "icon",
"reflect": false
},
"loading": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Add a loading indicator to button\nYou need add a manual control to remove loading"
},
"attribute": "loading",
"reflect": true,
"defaultValue": "false"
}
}; }
static get events() { return [{
"method": "clicked",
"name": "clicked",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when button is clicked\nCaptured by onClick listener.\n> Note: if button was disabled event can't be dispatch"
},
"complexType": {
"original": "UIEvent",
"resolved": "UIEvent",
"references": {
"UIEvent": {
"location": "global"
}
}
}
}]; }
}