@aqua-ds/web-components
Version:
AquaDS Web Components
102 lines (98 loc) • 5.95 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { G as GroupOrientation } from './Orientation.js';
import { d as defineCustomElement$2 } from './aq-checkbox2.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
const aqCheckboxButtonCss = ".aq-checkbox-button{font-family:var(--font-family-basic);font-size:var(--font-size-s);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-7);border:var(--spacing-size-basic) solid var(--color-paper-base);border-radius:var(--spacing-size-minor);color:var(--color-ink-base);background-color:transparent;cursor:pointer;padding:calc(var(--spacing-size-minor) + var(--spacing-size-small)) 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-checkbox-button__icon{font-size:var(--font-size-l)}.aq-checkbox-button:active:not(.is-disabled){-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}.aq-checkbox-button:hover{background:var(--color-paper-lighter);-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic)}.aq-checkbox-button:focus-visible{outline:none}.aq-checkbox-button:focus,.aq-checkbox-button:has(input:focus),.aq-checkbox-button:active{background:var(--color-paper-lighter);-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus);z-index:1}.aq-checkbox-button.is-disabled{pointer-events:none;color:var(--color-paper-base);background:var(--color-white);cursor:default}.aq-checkbox-button--checked{color:var(--color-primary-base);border-color:var(--color-primary-base)}.aq-checkbox-button--checked:focus,.aq-checkbox-button--checked:has(input:focus),.aq-checkbox-button--checked:hover,.aq-checkbox-button--checked:active:not(.is-disabled){background:var(--color-primary-lighter)}.aq-checkbox-button--checked.is-disabled{border-color:var(--color-primary-light);background:var(--color-white)}.aq-checkbox-button--checked.is-disabled *{color:var(--color-primary-light)}.aq-checkbox-button--vertical{-ms-flex-direction:column;flex-direction:column;padding:var(--spacing-size-short) var(--spacing-size-moderate)}.aq-checkbox-button .aq-checkbox__item{display:none}.aq-checkbox-button .aq-checkbox__title{padding:0}";
const AqCheckboxButton = /*@__PURE__*/ proxyCustomElement(class AqCheckboxButton extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = false;
this.isChecked = false;
this.indeterminate = false;
this.isDisabled = false;
this.icon = '';
this.info = '';
this.label = '';
this.tooltipWidth = '';
this.name = '';
this.idCheckbox = '';
this.valueCheckbox = '';
this.orientation = GroupOrientation.HORIZONTAL;
}
syncChecked(newVal) {
if (newVal !== null || newVal !== undefined)
this.isChecked = newVal;
}
componentWillLoad() {
if (this.value !== null || this.value !== undefined)
this.isChecked = this.value;
}
handleAqChange(event) {
this.isChecked = event.detail.checked;
this.value = this.isChecked;
this.indeterminate = false;
}
getTooltip() {
return (this.info && (h("aq-tooltip", { config: { placement: 'top', maxWidth: this.tooltipWidth } }, h("span", null, this.info))));
}
getCheckboxClassMap() {
return {
'is-disabled': this.isDisabled,
'aq-checkbox-button': true,
'aq-checkbox-button--checked': this.isChecked,
[`aq-checkbox-button--${this.orientation}`]: true,
};
}
render() {
const checkboxClass = this.getCheckboxClassMap();
const tooltip = this.getTooltip();
return (h("label", { key: '76a61dd03ace287de3bb8de4d02e577aa16fe293', class: checkboxClass }, this.icon &&
h("span", { key: 'c5efb9604252c31206f4bd8d6210130631354088', class: `${this.icon} aq-checkbox-button__icon` }), this.label && (h("aq-checkbox", { key: 'e8cc06e4c7cf183387068f5d2639e6bffaf0a44c', value: this.value, isDisabled: this.isDisabled, label: this.label, name: this.name, isChecked: this.isChecked, idCheckbox: this.idCheckbox, valueCheckbox: this.valueCheckbox, onChange: (event) => this.handleAqChange(event) })), this.info && tooltip));
}
static get watchers() { return {
"value": ["syncChecked"]
}; }
static get style() { return aqCheckboxButtonCss; }
}, [256, "aq-checkbox-button", {
"value": [1028],
"isChecked": [1028, "is-checked"],
"indeterminate": [1028],
"isDisabled": [4, "is-disabled"],
"icon": [1],
"info": [1],
"label": [1],
"tooltipWidth": [1, "tooltip-width"],
"name": [1],
"idCheckbox": [1, "id-checkbox"],
"valueCheckbox": [1, "value-checkbox"],
"orientation": [1]
}, undefined, {
"value": ["syncChecked"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-checkbox-button", "aq-checkbox", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-checkbox-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqCheckboxButton);
}
break;
case "aq-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqCheckboxButton as A, defineCustomElement as d };