@aqua-ds/web-components
Version:
AquaDS Web Components
90 lines (85 loc) • 6.13 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { U as UniqueIdGenerator } from './uidGenerator.js';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$2 } from './aq-helper-text2.js';
const aqToggleCss = ".aq-toggle__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.aq-toggle__element{position:relative;display:-ms-inline-flexbox;display:inline-flex;width:48px;height:24px}.aq-toggle input{opacity:0;width:0;height:0}.aq-toggle__label{display:-ms-inline-flexbox;display:inline-flex;color:var(--color-ink-base);font-family:var(--font-family-basic);font-style:normal;font-weight:normal;font-size:var(--font-size-s);margin-left:var(--spacing-size-short);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center}.aq-toggle__slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-paper-base);-webkit-transition:0.4s;transition:0.4s;border-radius:var(--spacing-size-medium)}.aq-toggle__slider:before{position:absolute;content:\"\";height:var(--spacing-size-moderate);width:var(--spacing-size-moderate);left:var(--spacing-size-minor);bottom:var(--spacing-size-minor);background-color:white;-webkit-transition:0.4s;transition:0.4s;border-radius:50%}.aq-toggle__slider:hover::before{-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic)}.aq-toggle__helper-text{margin-top:var(--spacing-size-minor);height:var(--spacing-size-moderate);display:-ms-flexbox;display:flex}.aq-toggle--disabled .aq-toggle__label{color:var(--color-paper-light)}.aq-toggle--disabled .aq-toggle__slider{cursor:unset}input:checked+.aq-toggle__slider{background-color:var(--color-primary-base)}input:focus+.aq-toggle__slider{-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus)}input:active+.aq-toggle__slider{-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}input:disabled+.aq-toggle__slider{-webkit-box-shadow:none;box-shadow:none}input:disabled+.aq-toggle__slider{background-color:var(--color-paper-light)}input:checked:disabled+.aq-toggle__slider{background-color:var(--color-primary-light)}input:checked+.aq-toggle__slider:before{-webkit-transform:translateX(24px);-ms-transform:translateX(24px);transform:translateX(24px)}";
const AqToggle$1 = /*@__PURE__*/ proxyCustomElement(class AqToggle extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = false;
this.isDisabled = false;
this.hasLabel = false;
this.helperText = '';
this.idToggle = '';
this.uid = '';
}
watchHandler() {
this.vadidateId();
}
getStyleToggle() {
return {
'aq-toggle': true,
'aq-toggle--disabled': this.isDisabled,
};
}
vadidateId() {
this.uid = this.idToggle.length > 0 ? this.idToggle : new UniqueIdGenerator().generateId();
}
componentWillLoad() {
this.vadidateId();
}
updateToggle(event) {
event.preventDefault();
event.stopPropagation();
if (!this.isDisabled) {
this.value = !this.value;
emitEvent('input', this.hostElement, { value: this.value }, event);
emitEvent('change', this.hostElement, { value: this.value }, event);
}
}
get getIsHelperTextVisible() {
return !!this.helperText;
}
render() {
const cssClassToggle = this.getStyleToggle();
return (h(Host, { key: '2b112f9d68600014bc0d10156d9d75585a3f62c8', class: cssClassToggle }, h("div", { key: '71683613a0b00785a872ee56c713d8bc4a21f886', class: "aq-toggle__content " }, h("label", { key: '7a41c5efd9233e2ff10d4af6652d6dd68665220d', class: "aq-toggle__element" }, h("input", { key: 'e70e5bc8b1c4d8c2b0a8b0e9b09855579df0880b', type: "checkbox", checked: this.value, value: "true", id: this.uid, disabled: this.isDisabled, onClick: event => this.updateToggle(event) }), h("span", { key: 'a3ce62c1ecc0604bca0bef09574b6daa4669a133', class: "aq-toggle__slider" })), this.hasLabel && (h("label", { key: 'e1c47b4702586ee432cab7338828a65c9365cc59', class: "aq-toggle__label", htmlFor: this.uid }, h("div", { key: '25270e728e3d69fbc285d29e4c167b218e659ed6', hidden: !this.value }, h("slot", { key: '457906fe1893fe628cf760d48d539bd6e4556dc3', name: "on" }, "On")), h("div", { key: 'f9a1a11393491b982d02a83d8b17362cff176d7c', hidden: this.value }, h("slot", { key: '6ed6863f1c113dac340b3306a19b9753d99636ce', name: "off" }, "Off"))))), this.getIsHelperTextVisible && (h("div", { key: '67f747f99630c6332cfe82053523859f915733ab', class: "aq-toggle__helper-text" }, h("aq-helper-text", { key: 'caf961665a7008a066412371d2ba473bdbad6647' }, h("span", { key: '088f149aa4ded0864001eaafa9d42e03edce86cd', slot: "text" }, this.helperText))))));
}
get hostElement() { return this; }
static get watchers() { return {
"idToggle": ["watchHandler"]
}; }
static get style() { return aqToggleCss; }
}, [260, "aq-toggle", {
"value": [1540],
"isDisabled": [4, "is-disabled"],
"hasLabel": [4, "has-label"],
"helperText": [1, "helper-text"],
"idToggle": [1, "id-toggle"],
"uid": [32]
}, undefined, {
"idToggle": ["watchHandler"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-toggle", "aq-helper-text"];
components.forEach(tagName => { switch (tagName) {
case "aq-toggle":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqToggle$1);
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqToggle = AqToggle$1;
const defineCustomElement = defineCustomElement$1;
export { AqToggle, defineCustomElement };