@aqua-ds/web-components
Version:
AquaDS Web Components
88 lines (84 loc) • 10.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';
const aqCheckboxCss = ".aq-checkbox{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;cursor:pointer}.aq-checkbox__input{position:absolute;opacity:0;cursor:pointer}.aq-checkbox__input::after{border-color:var(--color-paper-base)}.aq-checkbox__input:hover:enabled~.aq-checkbox__item{-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic);-webkit-transform:rotate(0deg) scale(1);-ms-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1}.aq-checkbox__input:hover:enabled~.aq-checkbox__item::after{-webkit-transform:rotate(45deg) scale(1);-ms-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:calc(var(--spacing-size-minor) + var(--spacing-size-basic));top:var(--spacing-size-small);width:var(--spacing-size-minor);height:var(--spacing-size-short);border:solid var(--color-paper-base);border-width:0 var(--spacing-size-basic) var(--spacing-size-basic) 0;background-color:transparent;border-radius:0}.aq-checkbox__input:indeterminate~.aq-checkbox__item{background-color:var(--color-white);-webkit-transform:rotate(0deg) scale(1);-ms-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:var(--spacing-size-basic) solid var(--color-paper-base)}.aq-checkbox__input:indeterminate~.aq-checkbox__item::after{-webkit-transform:rotate(90deg) scale(1);transform:rotate(90deg) scale(1);opacity:1;left:calc(var(--spacing-size-minor) + var(--spacing-size-small));top:var(--spacing-size-minor);width:var(--spacing-size-basic);height:var(--spacing-size-short);border:0;border-width:0 var(--spacing-size-basic) var(--spacing-size-basic) 0;background-color:var(--color-ink-dark);border-radius:0}.aq-checkbox__input:indeterminate:disabled~.aq-checkbox__item{background-color:var(--color-white);border:var(--spacing-size-basic) solid var(--color-paper-base)}.aq-checkbox__input:indeterminate:disabled~.aq-checkbox__item::after{background-color:var(--color-paper-darker)}.aq-checkbox__input:indeterminate:checked~.aq-checkbox__item{background-color:var(--color-primary-base);-webkit-transform:rotate(0deg) scale(1);-ms-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:var(--spacing-size-basic) solid var(--color-primary-base)}.aq-checkbox__input:indeterminate:checked~.aq-checkbox__item::after{-webkit-transform:rotate(45deg) scale(1);-ms-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:calc(var(--spacing-size-minor) + var(--spacing-size-basic));top:var(--spacing-size-small);width:var(--spacing-size-minor);height:var(--spacing-size-short);border:solid var(--color-white);border-width:0 var(--spacing-size-basic) var(--spacing-size-basic) 0;background-color:transparent;border-radius:0}.aq-checkbox__input:hover:enabled:focus~.aq-checkbox__item,.aq-checkbox__input:focus:checked~.aq-checkbox__item,.aq-checkbox__input:focus~.aq-checkbox__item{-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus)}.aq-checkbox__input:hover:enabled:checked~.aq-checkbox__item,.aq-checkbox__input:checked~.aq-checkbox__item{background-color:var(--color-primary-base);-webkit-transform:rotate(0deg) scale(1);-ms-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:var(--spacing-size-basic) solid var(--color-primary-base)}.aq-checkbox__input:hover:enabled:checked~.aq-checkbox__item::after,.aq-checkbox__input:checked~.aq-checkbox__item::after{-webkit-transform:rotate(45deg) scale(1);-ms-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:calc(var(--spacing-size-minor) + var(--spacing-size-basic));top:var(--spacing-size-small);width:var(--spacing-size-minor);height:var(--spacing-size-short);border:solid var(--color-white);border-width:0 var(--spacing-size-basic) var(--spacing-size-basic) 0;background-color:transparent;border-radius:0}.aq-checkbox__input:focus:checked~.aq-checkbox__item,.aq-checkbox__input:active:checked~.aq-checkbox__item{background-color:var(--color-primary-base);border:var(--spacing-size-basic) solid var(--color-primary-base)}.aq-checkbox__input:active:checked{-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}.aq-checkbox__input:hover:enabled:active:checked~.aq-checkbox__item,.aq-checkbox__input:active:checked~.aq-checkbox__item{border:var(--spacing-size-basic) solid var(--color-primary-base);-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}.aq-checkbox__input:hover:enabled:active~.aq-checkbox__item,.aq-checkbox__input:active~.aq-checkbox__item{border:var(--spacing-size-basic) solid var(--color-paper-light);-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}.aq-checkbox__input:disabled~.aq-checkbox__item{border:var(--spacing-size-basic) solid var(--color-paper-light);-webkit-box-shadow:none;box-shadow:none}.aq-checkbox__input:disabled:checked~.aq-checkbox__item,.aq-checkbox__input:disabled:active:checked~.aq-checkbox__item{background-color:var(--color-primary-light);border:var(--spacing-size-basic) solid var(--color-primary-light)}.aq-checkbox__tooltip{pointer-events:all;font-size:var(--font-size-xs);padding-left:var(--spacing-size-small);color:var(--color-paper-base)}.aq-checkbox__item{height:var(--spacing-size-moderate);width:var(--spacing-size-moderate);border-radius:var(--spacing-size-small);cursor:pointer;background-color:var(--color-white);-webkit-transition:all 0.3;transition:all 0.3;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;border:1px solid var(--color-paper-light)}.aq-checkbox__item::after{position:absolute;content:\"\";left:var(--spacing-size-short);top:var(--spacing-size-short);height:0px;width:0px;border-radius:var(--spacing-size-small);border:solid var(--color-primary-dark);border-width:0 var(--spacing-size-minor) var(--spacing-size-minor) 0;-webkit-transform:rotate(0deg) scale(0);-ms-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);opacity:1;transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out}.aq-checkbox__title{display:-ms-inline-flexbox;display:inline-flex;padding-left:var(--spacing-size-short);gap:var(--spacing-size-small)}.aq-checkbox__label{font-size:var(--font-size-s)}.aq-checkbox__icon{font-size:var(--font-size-m)}.aq-checkbox--required::after{content:\"*\";vertical-align:top;font-size:var(--font-size-xs);gap:var(--spacing-size-small);color:var(--color-danger-base)}.aq-checkbox.is-disabled{pointer-events:none;cursor:default;color:var(--color-paper-base)}";
const AqCheckbox = /*@__PURE__*/ proxyCustomElement(class AqCheckbox extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = null;
this.isChecked = false;
this.indeterminate = false;
this.isDisabled = false;
this.icon = '';
this.info = '';
this.label = '';
this.tooltipWidth = '';
this.name = '';
this.idCheckbox = '';
this.valueCheckbox = '';
this.isRequired = false;
}
syncChecked(newVal) {
this.isChecked = newVal !== null && newVal !== undefined ? newVal : this.isChecked;
}
componentWillLoad() {
// Prioritize the external value
this.isChecked = this.value !== null && this.value !== undefined ? this.value : this.isChecked;
}
async handleCheckedChange(e) {
this.isChecked = this.checkboxInput.checked;
this.value = this.isChecked;
this.indeterminate = false;
emitEvent('change', this.hostElement, { checked: this.isChecked, value: this.valueCheckbox }, e);
}
get getLabel() {
return this.label;
}
render() {
return (h("label", { key: '29cb74069f530bf2e8db824b59d23fb2bb4700ed', class: `aq-checkbox ${this.isDisabled ? 'is-disabled' : ''}` }, h("input", { key: 'dcec3d17ad4e4bc87abf5acc40cb4ed9099225c5', type: "checkbox", class: "aq-checkbox__input", disabled: this.isDisabled, id: this.idCheckbox, indeterminate: this.indeterminate, name: this.getLabel, value: this.valueCheckbox, checked: this.isChecked, ref: el => (this.checkboxInput = el), onClick: (e) => this.handleCheckedChange(e), onChange: (e) => e.stopPropagation() }), h("span", { key: '57fae1c49f27b4303f6eda48d5b617d476823d0b', class: "aq-checkbox__item" }), (this.label || this.icon) &&
h("div", { key: '1ccc9fe26e302d11b88ae0bdd88c9c467369077f', class: "aq-checkbox__title" }, this.icon && h("em", { key: 'c5cd4bdaed3b4ea28d891b6a302b95364c63f5e3', class: `aq-checkbox__icon ${this.icon}` }), h("span", { key: '93b1cbc9064d8fd6af90faa8b41465a9059f9cd1', class: "aq-checkbox__label" }, this.label)), this.isRequired && h("span", { key: 'edb33eb15baa3280e027b9ed11f2c5d1ec1bf795', class: "aq-label__required" }, "*"), !!this.info &&
h("span", { key: 'eb3102d1547cac795e8f02b5514e0908f4909606', class: "aq-checkbox__tooltip" }, h("aq-tooltip", { key: '39b38e7c37db925b90f6168b08aeae32532af049', config: { placement: 'top', maxWidth: this.tooltipWidth } }, h("span", { key: '49a2265e402caaf4d2351c97528d2e2b87621b75' }, " ", this.info, " ")), h("em", { key: 'c7223a63fe2024f077dac519403896ae19460b1c', class: "aq-icon-info-circle" }))));
}
get hostElement() { return this; }
static get watchers() { return {
"value": ["syncChecked"]
}; }
static get style() { return aqCheckboxCss; }
}, [256, "aq-checkbox", {
"value": [1032],
"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"],
"isRequired": [4, "is-required"]
}, undefined, {
"value": ["syncChecked"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-checkbox", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-checkbox":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqCheckbox);
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqCheckbox as A, defineCustomElement as d };