@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
38 lines (34 loc) • 15.7 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { r as registerInstance, h, H as Host, g as getElement } from './index-C4h1muVj.js';
import { c as createColorClasses } from './theme-B02IfvGX.js';
const buttonCss = "slot-fb[hidden],slot[hidden]{display:initial !important}:host{display:inline-block;border-radius:var(--lar-button-border-radius, 0.6rem);overflow:hidden}:host(.lar-button-full){display:block;width:100%}button{padding:var(--lar-button-padding-top, 1rem) var(--lar-button-padding-right, 1rem) var(--lar-button-padding-bottom, 1rem) var(--lar-button-padding-left, 1rem);font-size:var(--lar-button-font-size, 1.2rem);display:block;width:100%;height:100%;font-weight:500;letter-spacing:0.01em;text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden !important;border:0;cursor:pointer;position:relative}:host(.lar-button-small) button{padding:var(--lar-button-padding-top-small, 0.6rem) var(--lar-button-padding-right-small, 0.6rem) var(--lar-button-padding-bottom-small, 0.6rem) var(--lar-button-padding-left-small, 0.6rem);font-size:var(--lar-button-font-size-small, 1rem)}:host(.lar-button-small){border-radius:var(--lar-button-border-radius-small, 0.6rem)}button:focus{outline:none}:host(.lar-button-disabled){pointer-events:none;opacity:0.3;-webkit-filter:grayscale(0.4);filter:grayscale(0.4)}:host(.lar-button-outline){background:transparent;border:2px solid}:host(.lar-color-primary) button{background:var(--lar-color-primary, #780bb7) !important;color:var(--lar-color-primary-contrast, #fff) !important;fill:var(--lar-color-primary-contrast, #fff) !important;stroke:var(--lar-color-primary-contrast, #fff) !important}:host(.lar-color-primary) button:hover{background:var(--lar-color-primary-tint, rgb(133.5, 35.4, 190.2)) !important}:host(.lar-color-primary) button:active{background:var(--lar-color-primary-shade, rgb(105.6, 9.68, 161.04)) !important;color:var(--lar-color-primary-contrast, #fff) !important}:host(.lar-color-primary.lar-button-outline) button{background:transparent !important;color:inherit !important;fill:inherit !important;stroke:inherit !important}:host(.lar-color-primary.lar-button-outline){background:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.05) !important;border-color:var(--lar-color-primary, #780bb7) !important;color:var(--lar-color-primary, #780bb7) !important;fill:var(--lar-color-primary, #780bb7) !important;stroke:var(--lar-color-primary, #780bb7) !important}:host(.lar-color-primary.lar-button-outline) button:hover{background:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.12) !important}:host(.lar-color-primary.lar-button-outline) button:active{background:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.2) !important;color:var(--lar-color-primary, #780bb7) !important;fill:var(--lar-color-primary, #780bb7) !important;stroke:var(--lar-color-primary, #780bb7) !important}:host(.lar-color-secondary) button{background:var(--lar-color-secondary, #7fb800) !important;color:var(--lar-color-secondary-contrast, #fff) !important;fill:var(--lar-color-secondary-contrast, #fff) !important;stroke:var(--lar-color-secondary-contrast, #fff) !important}:host(.lar-color-secondary) button:hover{background:var(--lar-color-secondary-tint, rgb(139.8, 191.1, 25.5)) !important}:host(.lar-color-secondary) button:active{background:var(--lar-color-secondary-shade, rgb(111.76, 161.92, 0)) !important;color:var(--lar-color-secondary-contrast, #fff) !important}:host(.lar-color-secondary.lar-button-outline) button{background:transparent !important;color:inherit !important;fill:inherit !important;stroke:inherit !important}:host(.lar-color-secondary.lar-button-outline){background:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.05) !important;border-color:var(--lar-color-secondary, #7fb800) !important;color:var(--lar-color-secondary, #7fb800) !important;fill:var(--lar-color-secondary, #7fb800) !important;stroke:var(--lar-color-secondary, #7fb800) !important}:host(.lar-color-secondary.lar-button-outline) button:hover{background:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.12) !important}:host(.lar-color-secondary.lar-button-outline) button:active{background:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.2) !important;color:var(--lar-color-secondary, #7fb800) !important;fill:var(--lar-color-secondary, #7fb800) !important;stroke:var(--lar-color-secondary, #7fb800) !important}:host(.lar-color-tertiary) button{background:var(--lar-color-tertiary, #00a6ed) !important;color:var(--lar-color-tertiary-contrast, #fff) !important;fill:var(--lar-color-tertiary-contrast, #fff) !important;stroke:var(--lar-color-tertiary-contrast, #fff) !important}:host(.lar-color-tertiary) button:hover{background:var(--lar-color-tertiary-tint, rgb(25.5, 174.9, 238.8)) !important}:host(.lar-color-tertiary) button:active{background:var(--lar-color-tertiary-shade, rgb(0, 146.08, 208.56)) !important;color:var(--lar-color-tertiary-contrast, #fff) !important}:host(.lar-color-tertiary.lar-button-outline) button{background:transparent !important;color:inherit !important;fill:inherit !important;stroke:inherit !important}:host(.lar-color-tertiary.lar-button-outline){background:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.05) !important;border-color:var(--lar-color-tertiary, #00a6ed) !important;color:var(--lar-color-tertiary, #00a6ed) !important;fill:var(--lar-color-tertiary, #00a6ed) !important;stroke:var(--lar-color-tertiary, #00a6ed) !important}:host(.lar-color-tertiary.lar-button-outline) button:hover{background:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.12) !important}:host(.lar-color-tertiary.lar-button-outline) button:active{background:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.2) !important;color:var(--lar-color-tertiary, #00a6ed) !important;fill:var(--lar-color-tertiary, #00a6ed) !important;stroke:var(--lar-color-tertiary, #00a6ed) !important}:host(.lar-color-success) button{background:var(--lar-color-success, #7fb800) !important;color:var(--lar-color-success-contrast, #fff) !important;fill:var(--lar-color-success-contrast, #fff) !important;stroke:var(--lar-color-success-contrast, #fff) !important}:host(.lar-color-success) button:hover{background:var(--lar-color-success-tint, rgb(139.8, 191.1, 25.5)) !important}:host(.lar-color-success) button:active{background:var(--lar-color-success-shade, rgb(111.76, 161.92, 0)) !important;color:var(--lar-color-success-contrast, #fff) !important}:host(.lar-color-success.lar-button-outline) button{background:transparent !important;color:inherit !important;fill:inherit !important;stroke:inherit !important}:host(.lar-color-success.lar-button-outline){background:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.05) !important;border-color:var(--lar-color-success, #7fb800) !important;color:var(--lar-color-success, #7fb800) !important;fill:var(--lar-color-success, #7fb800) !important;stroke:var(--lar-color-success, #7fb800) !important}:host(.lar-color-success.lar-button-outline) button:hover{background:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.12) !important}:host(.lar-color-success.lar-button-outline) button:active{background:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.2) !important;color:var(--lar-color-success, #7fb800) !important;fill:var(--lar-color-success, #7fb800) !important;stroke:var(--lar-color-success, #7fb800) !important}:host(.lar-color-warning) button{background:var(--lar-color-warning, #ffb400) !important;color:var(--lar-color-warning-contrast, #fff) !important;fill:var(--lar-color-warning-contrast, #fff) !important;stroke:var(--lar-color-warning-contrast, #fff) !important}:host(.lar-color-warning) button:hover{background:var(--lar-color-warning-tint, rgb(255, 187.5, 25.5)) !important}:host(.lar-color-warning) button:active{background:var(--lar-color-warning-shade, rgb(224.4, 158.4, 0)) !important;color:var(--lar-color-warning-contrast, #fff) !important}:host(.lar-color-warning.lar-button-outline) button{background:transparent !important;color:inherit !important;fill:inherit !important;stroke:inherit !important}:host(.lar-color-warning.lar-button-outline){background:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.05) !important;border-color:var(--lar-color-warning, #ffb400) !important;color:var(--lar-color-warning, #ffb400) !important;fill:var(--lar-color-warning, #ffb400) !important;stroke:var(--lar-color-warning, #ffb400) !important}:host(.lar-color-warning.lar-button-outline) button:hover{background:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.12) !important}:host(.lar-color-warning.lar-button-outline) button:active{background:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.2) !important;color:var(--lar-color-warning, #ffb400) !important;fill:var(--lar-color-warning, #ffb400) !important;stroke:var(--lar-color-warning, #ffb400) !important}:host(.lar-color-danger) button{background:var(--lar-color-danger, #f6511d) !important;color:var(--lar-color-danger-contrast, #fff) !important;fill:var(--lar-color-danger-contrast, #fff) !important;stroke:var(--lar-color-danger-contrast, #fff) !important}:host(.lar-color-danger) button:hover{background:var(--lar-color-danger-tint, rgb(246.9, 98.4, 51.6)) !important}:host(.lar-color-danger) button:active{background:var(--lar-color-danger-shade, rgb(216.48, 71.28, 25.52)) !important;color:var(--lar-color-danger-contrast, #fff) !important}:host(.lar-color-danger.lar-button-outline) button{background:transparent !important;color:inherit !important;fill:inherit !important;stroke:inherit !important}:host(.lar-color-danger.lar-button-outline){background:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.05) !important;border-color:var(--lar-color-danger, #f6511d) !important;color:var(--lar-color-danger, #f6511d) !important;fill:var(--lar-color-danger, #f6511d) !important;stroke:var(--lar-color-danger, #f6511d) !important}:host(.lar-color-danger.lar-button-outline) button:hover{background:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.12) !important}:host(.lar-color-danger.lar-button-outline) button:active{background:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.2) !important;color:var(--lar-color-danger, #f6511d) !important;fill:var(--lar-color-danger, #f6511d) !important;stroke:var(--lar-color-danger, #f6511d) !important}:host(.lar-color-light) button{background:var(--lar-color-light, #f4f5f8) !important;color:var(--lar-color-light-contrast, #000) !important;fill:var(--lar-color-light-contrast, #000) !important;stroke:var(--lar-color-light-contrast, #000) !important}:host(.lar-color-light) button:hover{background:var(--lar-color-light-tint, rgb(245.1, 246, 248.7)) !important}:host(.lar-color-light) button:active{background:var(--lar-color-light-shade, rgb(214.72, 215.6, 218.24)) !important;color:var(--lar-color-light-contrast, #000) !important}:host(.lar-color-light.lar-button-outline) button{background:transparent !important;color:inherit !important;fill:inherit !important;stroke:inherit !important}:host(.lar-color-light.lar-button-outline){background:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.05) !important;border-color:var(--lar-color-light, #f4f5f8) !important;color:var(--lar-color-light, #f4f5f8) !important;fill:var(--lar-color-light, #f4f5f8) !important;stroke:var(--lar-color-light, #f4f5f8) !important}:host(.lar-color-light.lar-button-outline) button:hover{background:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.12) !important}:host(.lar-color-light.lar-button-outline) button:active{background:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.2) !important;color:var(--lar-color-light, #f4f5f8) !important;fill:var(--lar-color-light, #f4f5f8) !important;stroke:var(--lar-color-light, #f4f5f8) !important}:host(.lar-color-medium) button{background:var(--lar-color-medium, #d6d6d6) !important;color:var(--lar-color-medium-contrast, #000) !important;fill:var(--lar-color-medium-contrast, #000) !important;stroke:var(--lar-color-medium-contrast, #000) !important}:host(.lar-color-medium) button:hover{background:var(--lar-color-medium-tint, rgb(218.1, 218.1, 218.1)) !important}:host(.lar-color-medium) button:active{background:var(--lar-color-medium-shade, rgb(188.32, 188.32, 188.32)) !important;color:var(--lar-color-medium-contrast, #000) !important}:host(.lar-color-medium.lar-button-outline) button{background:transparent !important;color:inherit !important;fill:inherit !important;stroke:inherit !important}:host(.lar-color-medium.lar-button-outline){background:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.05) !important;border-color:var(--lar-color-medium, #d6d6d6) !important;color:var(--lar-color-medium, #d6d6d6) !important;fill:var(--lar-color-medium, #d6d6d6) !important;stroke:var(--lar-color-medium, #d6d6d6) !important}:host(.lar-color-medium.lar-button-outline) button:hover{background:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.12) !important}:host(.lar-color-medium.lar-button-outline) button:active{background:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.2) !important;color:var(--lar-color-medium, #d6d6d6) !important;fill:var(--lar-color-medium, #d6d6d6) !important;stroke:var(--lar-color-medium, #d6d6d6) !important}:host(.lar-color-dark) button{background:var(--lar-color-dark, #222428) !important;color:var(--lar-color-dark-contrast, #fff) !important;fill:var(--lar-color-dark-contrast, #fff) !important;stroke:var(--lar-color-dark-contrast, #fff) !important}:host(.lar-color-dark) button:hover{background:var(--lar-color-dark-tint, rgb(56.1, 57.9, 61.5)) !important}:host(.lar-color-dark) button:active{background:var(--lar-color-dark-shade, rgb(29.92, 31.68, 35.2)) !important;color:var(--lar-color-dark-contrast, #fff) !important}:host(.lar-color-dark.lar-button-outline) button{background:transparent !important;color:inherit !important;fill:inherit !important;stroke:inherit !important}:host(.lar-color-dark.lar-button-outline){background:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.05) !important;border-color:var(--lar-color-dark, #222428) !important;color:var(--lar-color-dark, #222428) !important;fill:var(--lar-color-dark, #222428) !important;stroke:var(--lar-color-dark, #222428) !important}:host(.lar-color-dark.lar-button-outline) button:hover{background:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.12) !important}:host(.lar-color-dark.lar-button-outline) button:active{background:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.2) !important;color:var(--lar-color-dark, #222428) !important;fill:var(--lar-color-dark, #222428) !important;stroke:var(--lar-color-dark, #222428) !important}";
const LarvaButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* outline styled button
*/
this.outline = false;
/**
* size
*/
this.size = 'default';
/**
* expand
*/
this.expand = 'full';
/**
* If `true`, the user cannot interact with the button.
*/
this.disabled = false;
}
render() {
return (h(Host, { key: '48a3c46d8b77e3df9fa0568880574409050d2196', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'lar-button': true, 'lar-button-disabled': this.disabled, 'lar-button-outline': this.outline, 'lar-button-small': this.size === 'small', 'lar-button-full': this.expand === 'full' }) }, h("button", { key: '9e9b44901468e3ce06b28fc48dd0c08164e0f7dc', disabled: this.disabled }, h("slot", { key: '796d182732bb1a885d796bb27d9ed17bda9eaca7' }))));
}
get el() { return getElement(this); }
};
LarvaButton.style = buttonCss;
export { LarvaButton as lar_button };
//# sourceMappingURL=lar-button.entry.js.map