@seniorsistemas/tecnologia-webcomponents
Version:
A webcomponents library for Senior Sistemas - Suite BPM products.
113 lines (106 loc) • 7.12 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-9e7d65d0.js');
const defaultTheme = require('./defaultTheme-b024b6fb.js');
const status_model = require('./status.model-c36e8192.js');
var TecButtonSize;
(function (TecButtonSize) {
TecButtonSize["tiny"] = "tiny";
TecButtonSize["small"] = "small";
TecButtonSize["medium"] = "medium";
TecButtonSize["large"] = "large";
TecButtonSize["giant"] = "giant";
})(TecButtonSize || (TecButtonSize = {}));
var TecButtonMode;
(function (TecButtonMode) {
TecButtonMode["rounded"] = "rounded";
TecButtonMode["square"] = "square";
TecButtonMode["radius"] = "radius";
})(TecButtonMode || (TecButtonMode = {}));
var TecButtonColor;
(function (TecButtonColor) {
TecButtonColor["solid"] = "solid";
TecButtonColor["gradient"] = "gradient";
TecButtonColor["outline"] = "outline";
TecButtonColor["basic"] = "basic";
})(TecButtonColor || (TecButtonColor = {}));
var TecButtonIconMode;
(function (TecButtonIconMode) {
TecButtonIconMode["left"] = "left";
TecButtonIconMode["right"] = "right";
})(TecButtonIconMode || (TecButtonIconMode = {}));
const buttonCss = "@import url(https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Volkhov:wght@400;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Oxygen+Mono&family=Roboto+Mono:wght@300;400;500;600;700&display=swap);.bg-default{background:#f6f8fa}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2x1{font-size:1.5rem;line-height:2rem}.text-3x1{font-size:1.875rem;line-height:2.25rem}.text-4x1{font-size:2.25rem;line-height:2.5rem}.text-5x1{font-size:3rem;line-height:3rem}.text-6x1{font-size:3.75rem;line-height:3.75rem}.text-7x1{font-size:4.5rem;line-height:4.5rem}.text-8x1{font-size:6rem;line-height:6rem}.text-9x1{font-size:8rem;line-height:8rem}.text-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Roboto,Almarai,Inter,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-serif{font-family:ui-serif,Volkhov,Libre Baskerville,Georgia,serif,serif}.text-mono{font-family:ui-monospace,Fira Mono,Roboto Mono,Oxygen Mono,Consolas,monospace,monospace}.text-title{font-family:Inter,sans-serif}@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@500;700&family=Open+Sans:wght@400;600&display=swap\"); *{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([theme=light]){--tecnologia-color-primary:#3c9bec;--tecnologia-color-secondary:#cbd0d8;--tecnologia-color-danger:#ec3c43;--tecnologia-color-success:#00c99a;--tecnologia-color-warning:#ff9800}:host([theme=light]) .bg-primary{background-color:#3c9bec}:host([theme=light]) .bg-secondary{background-color:#cbd0d8}:host([theme=light]) .bg-danger{background-color:#ec3c43}:host([theme=light]) .bg-success{background-color:#00c99a}:host([theme=light]) .bg-warning{background-color:#ff9800}:host([theme=dark]){--tecnologia-color-primary:#7dbcf2;--tecnologia-color-secondary:#cbd0d8;--tecnologia-color-danger:#ec3c43;--tecnologia-color-success:#00c99a;--tecnologia-color-warning:#ff9800}:host([theme=dark]) .bg-primary{background-color:#7dbcf2}:host([theme=dark]) .bg-secondary{background-color:#cbd0d8}:host([theme=dark]) .bg-danger{background-color:#ec3c43}:host([theme=dark]) .bg-success{background-color:#00c99a}:host([theme=dark]) .bg-warning{background-color:#ff9800}:host{display:block}:host([size=tiny]) button{font-size:0.75rem;padding:0.2rem 1rem;height:30px}:host([size=small]) button{font-size:0.875rem;padding:0.313rem 1.25rem;height:38px}:host([size=medium]) button{font-size:1rem;padding:0.5rem 1.5rem;height:44px}:host([size=large]) button{font-size:1.125rem;padding:0.8rem 1.8rem;height:55px}:host([size=giant]) button{font-size:1.25rem;padding:1.2rem 2.3rem;height:65px}button{outline:none;cursor:pointer;border:none;color:#ffffff;-webkit-transition:all cubic-bezier(0.16, 0.97, 0.58, 0.94) 250ms;transition:all cubic-bezier(0.16, 0.97, 0.58, 0.94) 250ms;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;font-size:0.875rem;padding:0.313rem 1.25rem;height:38px}button.primary{background:#3c9bec}button.primary:hover{background:#368bd4}button.success{background:#00c99a}button.success:hover{background:#00b48a}button.responsive{width:100%}button.rounded{border-radius:5rem}button:disabled{background-color:#e2e8f0;color:#9ea2a8;cursor:not-allowed}button:disabled:hover{background:#e2e8f0}";
const TecButton = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.clicked = index.createEvent(this, "clicked", 7);
this.theme = defaultTheme.defaultTheme;
/**
* The status of button (color)
*/
this.status = status_model.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 (index.h(index.Host, null, index.h("button", { type: "button", id: this.buttonId, class: classList, disabled: this.isDisabled, onClick: this.handleEventClick }, index.h("span", { class: iconClasses }, !!this.icon && index.h("i", { class: this.icon }), !this.onlyIcon && this.label))));
}
};
TecButton.style = buttonCss;
exports.tec_button = TecButton;