@aqua-ds/web-components
Version:
AquaDS Web Components
97 lines (91 loc) • 11.8 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
import { V as VisualState } from './VisualStates.js';
import { A as Alignment } from './Alignment.js';
var Size;
(function (Size) {
Size["SMALL"] = "small";
Size["MEDIUM"] = "medium";
Size["LARGE"] = "large";
})(Size || (Size = {}));
var ButtonType;
(function (ButtonType) {
ButtonType["BUTTON"] = "button";
ButtonType["SUBMIT"] = "submit";
ButtonType["RESET"] = "reset";
})(ButtonType || (ButtonType = {}));
const aqButtonCss = ":root{--aq-button-border-color:var(--color-paper-light);--aq-button-text-color:var(--color-ink-base);--aq-button-background-color:transparent;--aq-button-hover-background-color:var(--color-paper-lighter);--aq-button-disabled-background-color:var(--color-white);--aq-button-disabled-text-color:var(--color-paper-dark);--aq-button-spinner-color:var(--color-paper-light)}aq-button{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.aq-button{font-family:var(--font-family-basic);font-size:var(--font-size-s);line-height:var(--font-line-height-7);border:var(--spacing-size-basic) solid transparent;border-radius:var(--spacing-size-minor);font-weight:var(--font-weight-semi-bold);color:var(--aq-button-text-color);background-color:var(--aq-button-background-color);height:var(--spacing-size-big);cursor:pointer;padding:calc(var(--spacing-size-small) * 3) var(--spacing-size-medium);gap:var(--spacing-size-minor);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-transition:0.3s;transition:0.3s}.aq-button.primary{--aq-button-text-color:var(--color-primary-base);--aq-button-background-color:var(--color-primary-base);--aq-button-border-color:var(--color-primary-base);--aq-button-hover-background-color:var(--color-primary-dark);--aq-button-disabled-background-color:var(--color-primary-light);--aq-button-disabled-text-color:var(--color-white);--aq-button-spinner-color:var(--color-white)}.aq-button.primary:hover.is-outline,.aq-button.primary:hover.is-plain,.aq-button.primary:focus.is-outline,.aq-button.primary:focus.is-plain{--aq-button-text-color:var(--color-primary-base);--aq-button-hover-background-color:var(--color-primary-lighter)}.aq-button.primary:focus:not(.is-plain,.is-outline,:active){background-color:var(--color-primary-base)}.aq-button.primary.is-disabled.is-outline,.aq-button.primary.is-disabled.is-plain,.aq-button.primary.is-loading.is-outline,.aq-button.primary.is-loading.is-plain{--aq-button-text-color:var(--color-primary-base) !important;--aq-button-disabled-background-color:var(--color-white);--aq-button-disabled-text-color:var(--color-primary-light);--aq-button-border-color:var(--color-primary-light);--aq-button-spinner-color:var(--color-primary-light)}.aq-button.primary:not(.is-plain,.is-outline){--aq-button-text-color:var(--color-white)}.aq-button.success{--aq-button-text-color:var(--color-success-base);--aq-button-background-color:var(--color-success-base);--aq-button-border-color:var(--color-success-base);--aq-button-hover-background-color:var(--color-success-dark);--aq-button-disabled-background-color:var(--color-success-light);--aq-button-disabled-text-color:var(--color-white);--aq-button-spinner-color:var(--color-white)}.aq-button.success:hover.is-outline,.aq-button.success:hover.is-plain,.aq-button.success:focus.is-outline,.aq-button.success:focus.is-plain{--aq-button-text-color:var(--color-success-base);--aq-button-hover-background-color:var(--color-success-lighter)}.aq-button.success:focus:not(.is-plain,.is-outline,:active){background-color:var(--color-success-base)}.aq-button.success.is-disabled.is-outline,.aq-button.success.is-disabled.is-plain,.aq-button.success.is-loading.is-outline,.aq-button.success.is-loading.is-plain{--aq-button-text-color:var(--color-success-base) !important;--aq-button-disabled-background-color:var(--color-white);--aq-button-disabled-text-color:var(--color-success-light);--aq-button-border-color:var(--color-success-light);--aq-button-spinner-color:var(--color-success-light)}.aq-button.success:not(.is-plain,.is-outline){--aq-button-text-color:var(--color-white)}.aq-button.danger{--aq-button-text-color:var(--color-danger-base);--aq-button-background-color:var(--color-danger-base);--aq-button-border-color:var(--color-danger-base);--aq-button-hover-background-color:var(--color-danger-dark);--aq-button-disabled-background-color:var(--color-danger-light);--aq-button-disabled-text-color:var(--color-white);--aq-button-spinner-color:var(--color-white)}.aq-button.danger:hover.is-outline,.aq-button.danger:hover.is-plain,.aq-button.danger:focus.is-outline,.aq-button.danger:focus.is-plain{--aq-button-text-color:var(--color-danger-base);--aq-button-hover-background-color:var(--color-danger-lighter)}.aq-button.danger:focus:not(.is-plain,.is-outline,:active){background-color:var(--color-danger-base)}.aq-button.danger.is-disabled.is-outline,.aq-button.danger.is-disabled.is-plain,.aq-button.danger.is-loading.is-outline,.aq-button.danger.is-loading.is-plain{--aq-button-text-color:var(--color-danger-base) !important;--aq-button-disabled-background-color:var(--color-white);--aq-button-disabled-text-color:var(--color-danger-light);--aq-button-border-color:var(--color-danger-light);--aq-button-spinner-color:var(--color-danger-light)}.aq-button.danger:not(.is-plain,.is-outline){--aq-button-text-color:var(--color-white)}.aq-button.warning{--aq-button-text-color:var(--color-warning-base);--aq-button-background-color:var(--color-warning-base);--aq-button-border-color:var(--color-warning-base);--aq-button-hover-background-color:var(--color-warning-dark);--aq-button-disabled-background-color:var(--color-warning-light);--aq-button-disabled-text-color:var(--color-white);--aq-button-spinner-color:var(--color-white)}.aq-button.warning:hover.is-outline,.aq-button.warning:hover.is-plain,.aq-button.warning:focus.is-outline,.aq-button.warning:focus.is-plain{--aq-button-text-color:var(--color-warning-base);--aq-button-hover-background-color:var(--color-warning-lighter)}.aq-button.warning:focus:not(.is-plain,.is-outline,:active){background-color:var(--color-warning-base)}.aq-button.warning.is-disabled.is-outline,.aq-button.warning.is-disabled.is-plain,.aq-button.warning.is-loading.is-outline,.aq-button.warning.is-loading.is-plain{--aq-button-text-color:var(--color-warning-base) !important;--aq-button-disabled-background-color:var(--color-white);--aq-button-disabled-text-color:var(--color-warning-light);--aq-button-border-color:var(--color-warning-light);--aq-button-spinner-color:var(--color-warning-light)}.aq-button.warning:not(.is-plain,.is-outline){--aq-button-text-color:var(--color-white)}.aq-button.small{font-size:var(--font-size-xs);padding:var(--spacing-size-minor) var(--spacing-size-short);height:var(--spacing-size-large)}.aq-button.large{font-size:var(--font-size-m);padding:calc(var(--spacing-size-short) + var(--spacing-size-basic)) var(--spacing-size-medium);height:var(--spacing-size-greater)}.aq-button.is-outline{border-color:var(--aq-button-border-color);color:var(--aq-button-text-color);background-color:transparent}.aq-button.is-plain{color:var(--aq-button-text-color);border-color:transparent;background-color:transparent}.aq-button:active:not(.is-disabled,.is-loading){background:var(--aq-button-hover-background-color);-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}.aq-button:hover{background:var(--aq-button-hover-background-color);-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic)}.aq-button:focus-visible{outline:none}.aq-button:focus{background:var(--aq-button-hover-background-color);-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus);outline:unset}.aq-button:focus,.aq-button:active{-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus);z-index:1}.aq-button.is-loading{position:relative;color:transparent !important}.aq-button.is-loading::after{position:absolute;-webkit-box-sizing:inherit;box-sizing:inherit;-webkit-animation:rotateSpinner 0.5s linear infinite;animation:rotateSpinner 0.5s linear infinite;border-radius:9999px;content:\"\";display:block;height:1em;width:1em;rotate:45deg;left:calc(50% - 0.5em);top:calc(50% - 0.5em);border:calc(var(--spacing-size-basic) * 2) solid var(--aq-button-spinner-color);border-right-color:transparent;border-top-color:transparent}.aq-button.is-disabled,.aq-button.is-loading{-webkit-box-shadow:none;box-shadow:none;color:var(--aq-button-disabled-text-color);background:var(--aq-button-disabled-background-color);cursor:default;pointer-events:none}.aq-button__disclosure{padding-left:var(--spacing-size-small)}.aq-button:has(.aq-button__disclosure){padding:calc(var(--spacing-size-small) * 3) !important}";
const AqButton = /*@__PURE__*/ proxyCustomElement(class AqButton extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.type = ButtonType.BUTTON;
this.variant = VisualState.DEFAULT;
this.size = Size.MEDIUM;
this.isDisabled = false;
this.hasDisclosure = false;
this.isLoading = false;
this.isOutline = false;
this.isPlain = false;
this.info = '';
this.customClass = '';
this.handleClick = (event) => {
emitEvent('click', this.hostElement, { event }, event);
};
}
getTooltip() {
return (this.info && (h("aq-tooltip", { config: { placement: Alignment.TOP } }, h("span", null, this.info))));
}
getStyleClassMap() {
return {
'aq-button': true,
'is-disabled': this.isDisabled,
'is-loading': this.isLoading,
'is-outline': this.isOutline,
'is-plain': this.isPlain,
[this.size]: this.size !== Size.MEDIUM,
[`${this.variant}`]: this.variant !== VisualState.DEFAULT,
[this.customClass]: true,
};
}
render() {
const cssClass = this.getStyleClassMap();
const tooltip = this.getTooltip();
return (h("button", { key: '35a3d13844a9031a2017a173e38412dcba4722b9', onClick: (e) => this.handleClick(e), type: this.type, disabled: this.isDisabled, class: cssClass }, h("slot", { key: 'e820703cf741e81928b389f2716acada777efb8c' }), this.info && tooltip, this.hasDisclosure && h("span", { key: '60a19796ccac4bccf4a96e56c9af64782e6be489', class: "aq-button__disclosure aq-icon-chevron-down" })));
}
get hostElement() { return this; }
static get style() { return aqButtonCss; }
}, [260, "aq-button", {
"type": [1],
"variant": [1],
"size": [1],
"isDisabled": [4, "is-disabled"],
"hasDisclosure": [4, "has-disclosure"],
"isLoading": [4, "is-loading"],
"isOutline": [4, "is-outline"],
"isPlain": [4, "is-plain"],
"info": [1],
"customClass": [1, "custom-class"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-button", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqButton);
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqButton as A, Size as S, defineCustomElement as d };