@aqua-ds/web-components
Version:
AquaDS Web Components
148 lines (142 loc) • 9.71 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { S as Size, d as defineCustomElement$9 } from './aq-button2.js';
import { d as defineCustomElement$8 } from './aq-divider2.js';
import { d as defineCustomElement$7 } from './aq-dropdown2.js';
import { d as defineCustomElement$6 } from './aq-dropdown-item2.js';
import { d as defineCustomElement$5 } from './aq-list-menu-host.js';
import { d as defineCustomElement$4 } from './aq-popover2.js';
import { d as defineCustomElement$3 } from './aq-tooltip2.js';
import { d as defineCustomElement$2 } from './aq-virtual-list2.js';
import { P as PopoverWidths } from './PopoverWidths.js';
import { V as VisualState } from './VisualStates.js';
var ButtonType;
(function (ButtonType) {
ButtonType["BUTTON"] = "button";
ButtonType["SUBMIT"] = "submit";
ButtonType["RESET"] = "reset";
})(ButtonType || (ButtonType = {}));
const aqButtonSplitCss = ".aq-button-split{display:-ms-inline-flexbox;display:inline-flex}.aq-button-split__container{display:-ms-inline-flexbox;display:inline-flex}.aq-button-split__container>:last-child .aq-button{border-radius:0 var(--spacing-size-minor) var(--spacing-size-minor) 0;margin-left:-1px !important;border-left:none !important}.aq-button-split__container>:first-child .aq-button{border-radius:var(--spacing-size-minor) 0 0 var(--spacing-size-minor)}.aq-button-split .aq-button.small{height:1.5625rem !important}.aq-button-split .aq-button.small.is-loading::after{left:calc(50% + 0.5em)}.aq-button-split .aq-button.large.is-loading::after{left:calc(50% + 0.6875em)}.aq-button-split .aq-button.is-loading::after{left:calc(50% + 0.825em);z-index:12}.aq-button-split__left-button{border-radius:var(--spacing-size-minor) var(--spacing-size-minor) !important}.aq-button-split__left-button .aq-button{border-right:none !important}.aq-button-split__left-button [class^=aq-icon-]{line-height:0}.aq-button-split__divider{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;z-index:10}.aq-button-split__divider .aq-divider{background:var(--color-white)}.aq-button-split__divider--small{padding:0.375rem 0}.aq-button-split__divider--small [class^=aq-icon-]{font-size:var(--font-size-s);height:0.875rem}.aq-button-split__divider--medium{margin:0.375rem 0rem !important;height:1.25rem !important}.aq-button-split__divider--medium [class^=aq-icon-]{font-size:var(--font-size-m);height:0.875rem}.aq-button-split__divider--large{margin:0.375rem 0px !important;height:1.75rem !important}.aq-button-split__divider--large [class^=aq-icon-]{font-size:var(--font-size-xl);height:0.875rem}.aq-button-split__divider--primary .aq-divider{background:var(--color-primary-base)}.aq-button-split__divider--success .aq-divider{background:var(--color-success-base)}.aq-button-split__divider--warning .aq-divider{background:var(--color-warning-base)}.aq-button-split__divider--danger .aq-divider{background:var(--color-danger-base)}.aq-button-split__divider--default .aq-divider{background:var(--color-paper-light)}.aq-button-split.is-disabled .aq-button-split__divider--primary .aq-divider{background:var(--color-primary-light) !important}.aq-button-split.is-disabled .aq-button-split__divider--success .aq-divider{background:var(--color-success-light) !important}.aq-button-split.is-disabled .aq-button-split__divider--warning .aq-divider{background:var(--color-warning-light) !important}.aq-button-split.is-disabled .aq-button-split__divider--danger .aq-divider{background:var(--color-danger-light) !important}";
const AqButtonSplit$1 = /*@__PURE__*/ proxyCustomElement(class AqButtonSplit extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.clickLeft = createEvent(this, "clickLeft", 7);
this.clickRight = createEvent(this, "clickRight", 7);
this.clickItem = createEvent(this, "clickItem", 7);
this.type = ButtonType.BUTTON;
this.variant = VisualState.DEFAULT;
this.size = Size.MEDIUM;
this.isLoading = false;
this.isDisabled = false;
this.isOutline = false;
this.isPlain = false;
this.info = '';
this.items = [];
this.customClass = '';
}
onClickLeft(event) {
this.clickLeft.emit({ event });
}
onClickRight(event) {
if (event.detail.value === undefined) {
this.clickRight.emit({ event });
}
}
onClickItem(e, itemId) {
e.stopPropagation();
this.clickItem.emit({ value: itemId });
}
cssClassAqButtonLeft() {
return {
'aq-button-split__left-button': true,
};
}
cssClassAqButtonDivider() {
return {
'aq-button-split__divider': true,
'aq-button-split__divider__outline': this.isOutline || this.isPlain,
[`aq-button-split__divider--${this.variant}`]: this.isOutline || this.isPlain || this.variant === VisualState.DEFAULT,
[`aq-button-split__divider--${this.size}`]: true,
};
}
getTooltip() {
return (this.info && (h("aq-tooltip", { config: { placement: 'top' } }, h("span", null, this.info))));
}
render() {
const cssClassAqButtonLeft = this.cssClassAqButtonLeft();
const cssClassAqButtonDivider = this.cssClassAqButtonDivider();
const tooltip = this.getTooltip();
return (h("div", { key: '3887f6a0a6ee007fe3b20402c19914e35e62406e', class: `aq-button-split ${this.isDisabled ? 'is-disabled' : ''}` }, h("div", { key: 'f8c0faed06ed36236d39f7554cebdea62779202d' }, this.info && tooltip, h("div", { key: '57d4de52eca2a749a52b8a139822eb898c9d5322', class: "aq-button-split__container" }, h("aq-button", { key: '6e9c3be2810938543bd52bf9681df76450f1f69e', onClick: (e) => this.onClickLeft(e), class: cssClassAqButtonLeft, variant: this.variant, size: this.size, isOutline: this.isOutline, isPlain: this.isPlain, type: this.type, isDisabled: this.isDisabled, isLoading: this.isLoading, customClass: this.customClass }, h("div", { key: '2369dab94efe19a60d3ab9faabd6b9361a9b8909', style: { visibility: this.isLoading ? 'hidden' : 'visible', zIndex: '10' } }, h("slot", { key: '8ceff594fc98e4785448b99845575d3a40666f85' }))), !this.isLoading && h("aq-divider", { key: '66d9c1e81f232c4395a0fe7cbaed8623b180bf63', class: cssClassAqButtonDivider, orientation: "vertical" }), h("div", { key: '59939764e382ee77f87df19db84c949213321acc', class: "aq-button-split__right" }, h("aq-dropdown", { key: '4678c66a7da2b1ff8308277a2ae9073c76b1bbf8', id: "dropdown-3", placement: "bottom", popoverWidth: PopoverWidths.AUTO, "is-disabled": this.isDisabled || this.isLoading, onClick: (e) => this.onClickRight(e) }, h("aq-button", { key: '27e55b1061fe73f08e6e343ca73037678649276c', slot: "activator", variant: this.variant, size: this.size, isOutline: this.isOutline, isPlain: this.isPlain, type: this.type, customClass: this.customClass }, h("em", { key: '60306490956117ec8f4ff9c9eeb48632e776577e', class: "aq-icon-chevron-down", style: { visibility: this.isLoading ? 'hidden' : 'visible' } })), h("div", { key: 'd0820ee6ee553f1f7cddea871cfa80f6b1f8782c', slot: "content" }, this.items.map((item) => (h("aq-dropdown-item", { class: "dropdown_item", id: item.id, onClick: (e) => this.onClickItem(e, item.id) }, item.name))))))))));
}
get hostElement() { return this; }
static get style() { return aqButtonSplitCss; }
}, [260, "aq-button-split", {
"type": [1],
"variant": [1],
"size": [1],
"isLoading": [4, "is-loading"],
"isDisabled": [4, "is-disabled"],
"isOutline": [4, "is-outline"],
"isPlain": [4, "is-plain"],
"info": [1],
"items": [16],
"customClass": [1, "custom-class"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-button-split", "aq-button", "aq-divider", "aq-dropdown", "aq-dropdown-item", "aq-list-menu", "aq-popover", "aq-tooltip", "aq-virtual-list"];
components.forEach(tagName => { switch (tagName) {
case "aq-button-split":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqButtonSplit$1);
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "aq-divider":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "aq-dropdown":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "aq-dropdown-item":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-list-menu":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-popover":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-virtual-list":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqButtonSplit = AqButtonSplit$1;
const defineCustomElement = defineCustomElement$1;
export { AqButtonSplit, defineCustomElement };