@aqua-ds/web-components
Version:
AquaDS Web Components
143 lines (137 loc) • 8.4 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Fragment, Host } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
import { L as Label } from './label.js';
import { G as GroupOrientation } from './Orientation.js';
import { d as defineCustomElement$a } from './aq-card2.js';
import { d as defineCustomElement$9 } from './aq-card-content2.js';
import { d as defineCustomElement$8 } from './aq-checkbox2.js';
import { d as defineCustomElement$7 } from './aq-checkbox-button2.js';
import { d as defineCustomElement$6 } from './aq-checkbox-card2.js';
import { d as defineCustomElement$5 } from './aq-divider2.js';
import { d as defineCustomElement$4 } from './aq-helper-text2.js';
import { d as defineCustomElement$3 } from './aq-label2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';
var CheckboxGroupType;
(function (CheckboxGroupType) {
CheckboxGroupType["CHECKBOX"] = "checkbox";
CheckboxGroupType["CHECKBOX_BUTTON"] = "button";
CheckboxGroupType["CHECKBOX_CARD"] = "card";
})(CheckboxGroupType || (CheckboxGroupType = {}));
const aqCheckboxGroupCss = ".aq-checkbox-group--default{display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-size-short)}.aq-checkbox-group--button{display:-ms-inline-flexbox;display:inline-flex;padding:var(--spacing-size-small);border-radius:var(--spacing-size-minor);-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic)}.aq-checkbox-group--button .aq-checkbox-button{width:100%}.aq-checkbox-group--button .aq-checkbox-button:not(:hover,.aq-checkbox-button--checked),.aq-checkbox-group--button .aq-checkbox-button.is-disabled{border-color:transparent}.aq-checkbox-group--card{display:-ms-inline-flexbox;display:inline-flex;gap:var(--spacing-size-short)}.aq-checkbox-group--vertical{-ms-flex-direction:column;flex-direction:column}.aq-checkbox-group__divider{padding:var(--spacing-size-small) var(--spacing-size-minor)}.aq-checkbox-group__label .aq-label{padding-bottom:var(--spacing-size-minor)}.aq-checkbox-group__helper-text .aq-helper-text{padding-top:var(--spacing-size-minor)}";
const AqCheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class AqCheckboxGroup extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = [];
this.info = '';
this.label = '';
this.helperText = '';
this.isDisabled = false;
this.isRequired = false;
this.orientation = GroupOrientation.HORIZONTAL;
this.type = CheckboxGroupType.CHECKBOX;
this.labelHelper = Label(this);
}
handleCheckedChange(event) {
const { checked, value } = event.detail;
this.value = checked
? [...new Set([...this.value, value])]
: this.value.filter(item => item !== value);
emitEvent('input', this.hostElement, { value: this.value }, event);
emitEvent('change', this.hostElement, { value: this.value }, event);
}
get getLabel() {
return this.label;
}
getDividerOrientation() {
return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
}
getCheckboxCard() {
return (h("div", { class: `aq-checkbox-group--card aq-checkbox-group--${this.orientation}` }, this.options.map((item, idx) => (h("aq-checkbox-card", { isChecked: item.isChecked, indeterminate: item.indeterminate, isDisabled: item.isDisabled || this.isDisabled, icon: item.icon, label: item.label, name: item.name, idCheckbox: item.idCheckbox || `${item.label}-${idx}`, valueCheckbox: item.valueCheckbox || item.name, subLabel: item.subLabel, onChange: (e) => this.handleCheckedChange(e), onInput: (e) => e.stopPropagation() })))));
}
getCheckboxButton() {
return (h("div", { class: `aq-checkbox-group--button aq-checkbox-group--${this.orientation}` }, this.options.map((item, idx) => (h(Fragment, null, h("aq-checkbox-button", { isChecked: item.isChecked, indeterminate: item.indeterminate, isDisabled: item.isDisabled || this.isDisabled, orientation: item.orientation, icon: item.icon, label: item.label, name: item.name, tooltipWidth: item.tooltipWidth, idCheckbox: item.idCheckbox || `${item.label}-${idx}`, valueCheckbox: item.valueCheckbox || item.name, onChange: (e) => this.handleCheckedChange(e), onInput: (e) => e.stopPropagation() }), idx < this.options.length - 1 &&
h("aq-divider", { class: "aq-checkbox-group__divider", orientation: this.getDividerOrientation() }))))));
}
getCheckbox() {
return (h("div", { class: `aq-checkbox-group--default aq-checkbox-group--${this.orientation}` }, this.options.map((item, idx) => (h("aq-checkbox", { isChecked: item.isChecked, indeterminate: item.indeterminate, isRequired: item.isRequired, isDisabled: item.isDisabled || this.isDisabled, icon: item.icon, info: item.info, label: item.label, name: item.name, tooltipWidth: item.tooltipWidth, idCheckbox: item.idCheckbox || `${item.label}-${idx}`, valueCheckbox: item.valueCheckbox || item.name, onChange: (e) => this.handleCheckedChange(e), onInput: (e) => e.stopPropagation() })))));
}
render() {
return (h(Host, { key: '345fbb4613686dacab4e39e05b138892d03e4604', class: "aq-checkbox-group" }, h("aq-label", { key: 'c9868396ca43c440df023b215086f6748b9b4960', ...this.labelHelper.bindsLabel, class: "aq-checkbox-group__label" }, h("span", { key: '465b7eb1fb87208d34b35fe7ce4a84e53f02dc0b', slot: "text" }, this.label)), h("div", { key: 'c7b598ec2779d41f4dca61a061b1c5a46b309ab4' }, this.type === 'checkbox' && this.getCheckbox(), this.type === 'button' && this.getCheckboxButton(), this.type === 'card' && this.getCheckboxCard()), h("aq-helper-text", { key: 'bb5c8ed7a3144c9d08560b9bb97cc21d2b24f0e6', class: "aq-checkbox-group__helper-text" }, h("span", { key: 'd1f6bdda8b34488cad1ed90d39461b731f3c6f62', slot: "text" }, this.helperText))));
}
get hostElement() { return this; }
static get style() { return aqCheckboxGroupCss; }
}, [256, "aq-checkbox-group", {
"value": [1040],
"info": [1],
"label": [1],
"helperText": [1, "helper-text"],
"isDisabled": [4, "is-disabled"],
"isRequired": [4, "is-required"],
"orientation": [1],
"type": [1],
"options": [16]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-checkbox-group", "aq-card", "aq-card-content", "aq-checkbox", "aq-checkbox-button", "aq-checkbox-card", "aq-divider", "aq-helper-text", "aq-label", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-checkbox-group":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqCheckboxGroup$1);
}
break;
case "aq-card":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "aq-card-content":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "aq-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "aq-checkbox-button":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "aq-checkbox-card":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-divider":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqCheckboxGroup = AqCheckboxGroup$1;
const defineCustomElement = defineCustomElement$1;
export { AqCheckboxGroup, defineCustomElement };