@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
150 lines (146 loc) • 10 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-C4h1muVj.js';
import { r as renderHiddenInput } from './helpers-ue25B_tw.js';
import { c as createColorClasses } from './theme-B02IfvGX.js';
import { createGesture } from './index-Bg81B2hG.js';
const toggleCss = "slot-fb[hidden],slot[hidden]{display:initial !important}:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;contain:content;cursor:pointer;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;width:2.75rem;height:1.5rem}:host(:focus){outline:none}:host(.lar-toggle-disabled){pointer-events:none;opacity:0.3;-webkit-filter:grayscale(0.4);filter:grayscale(0.4)}input{left:0;top:0;margin:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;pointer-events:none}.lar-toggle-icon{border-radius:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;position:relative;width:100%;height:100%;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease;background:rgba(0, 0, 0, 0.1);overflow:visible;pointer-events:none}.lar-toggle-inner{position:absolute;top:50%;left:0.15rem;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-radius:50%;width:1.2rem;height:1.2rem;background:var(--lar-background-color, #000);-webkit-transition:left 0.2s ease;transition:left 0.2s ease;will-change:left}:host(.lar-toggle-checked) .lar-toggle-inner{left:calc(100% - 1.2rem - 0.15rem)}:host(.lar-color-primary.lar-toggle-checked) .lar-toggle-icon{background:var(--lar-color-primary, #780bb7)}:host(.lar-color-primary.lar-toggle-checked) .lar-toggle-inner{background:var(--lar-background-color, #000)}:host(.lar-color-primary) .lar-toggle-icon{background:rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.6)}:host(.lar-color-secondary.lar-toggle-checked) .lar-toggle-icon{background:var(--lar-color-secondary, #7fb800)}:host(.lar-color-secondary.lar-toggle-checked) .lar-toggle-inner{background:var(--lar-background-color, #000)}:host(.lar-color-secondary) .lar-toggle-icon{background:rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.6)}:host(.lar-color-tertiary.lar-toggle-checked) .lar-toggle-icon{background:var(--lar-color-tertiary, #00a6ed)}:host(.lar-color-tertiary.lar-toggle-checked) .lar-toggle-inner{background:var(--lar-background-color, #000)}:host(.lar-color-tertiary) .lar-toggle-icon{background:rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.6)}:host(.lar-color-success.lar-toggle-checked) .lar-toggle-icon{background:var(--lar-color-success, #7fb800)}:host(.lar-color-success.lar-toggle-checked) .lar-toggle-inner{background:var(--lar-background-color, #000)}:host(.lar-color-success) .lar-toggle-icon{background:rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.6)}:host(.lar-color-warning.lar-toggle-checked) .lar-toggle-icon{background:var(--lar-color-warning, #ffb400)}:host(.lar-color-warning.lar-toggle-checked) .lar-toggle-inner{background:var(--lar-background-color, #000)}:host(.lar-color-warning) .lar-toggle-icon{background:rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.6)}:host(.lar-color-danger.lar-toggle-checked) .lar-toggle-icon{background:var(--lar-color-danger, #f6511d)}:host(.lar-color-danger.lar-toggle-checked) .lar-toggle-inner{background:var(--lar-background-color, #000)}:host(.lar-color-danger) .lar-toggle-icon{background:rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.6)}:host(.lar-color-light.lar-toggle-checked) .lar-toggle-icon{background:var(--lar-color-light, #f4f5f8)}:host(.lar-color-light.lar-toggle-checked) .lar-toggle-inner{background:var(--lar-background-color, #000)}:host(.lar-color-light) .lar-toggle-icon{background:rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.6)}:host(.lar-color-medium.lar-toggle-checked) .lar-toggle-icon{background:var(--lar-color-medium, #d6d6d6)}:host(.lar-color-medium.lar-toggle-checked) .lar-toggle-inner{background:var(--lar-background-color, #000)}:host(.lar-color-medium) .lar-toggle-icon{background:rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.6)}:host(.lar-color-dark.lar-toggle-checked) .lar-toggle-icon{background:var(--lar-color-dark, #222428)}:host(.lar-color-dark.lar-toggle-checked) .lar-toggle-inner{background:var(--lar-background-color, #000)}:host(.lar-color-dark) .lar-toggle-icon{background:rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.6)}";
const Toggle = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.larchange = createEvent(this, "larchange");
this.larfocus = createEvent(this, "larfocus");
this.larblur = createEvent(this, "larblur");
this.inputId = `lar-tg-${toggleIds++}`;
this.pivotX = 0;
this.activated = false;
this.keyFocus = false;
/**
* The name of the control, which is submitted with the form data.
*/
this.name = this.inputId;
/**
* If `true`, the toggle is selected. Defaults to `false`.
*/
this.checked = false;
/**
* If `true`, the user cannot interact with the toggle. Defaults to `false`.
*/
this.disabled = false;
/**
* The value of the toggle does not mean if it's checked or not, use the `checked`
* property for that.
*
* The value of a toggle is analogous to the value of a `<input type="checkbox">`,
* it's only used when the toggle participates in a native `<form>`.
* Defaults to `on`.
*/
this.value = 'on';
this.onChange = (event) => {
this.checked = !this.checked;
event.stopPropagation();
event.preventDefault();
};
this.onKeyUp = () => {
this.keyFocus = true;
};
this.onFocus = (event) => {
this.larfocus.emit();
event.stopPropagation();
event.preventDefault();
};
this.onBlur = (event) => {
this.keyFocus = false;
this.larblur.emit();
event.stopPropagation();
event.preventDefault();
};
}
checkedChanged(isChecked) {
this.larchange.emit({
checked: isChecked,
value: this.value
});
}
async disabledChanged() {
var _a;
try {
(_a = this.gesture) === null || _a === void 0 ? void 0 : _a.enable(!Boolean(this.disabled));
}
catch (err) {
console.error(err);
}
}
async componentDidLoad() {
try {
this.gesture = createGesture({
el: this.el,
gestureName: 'toggle',
gesturePriority: 100,
threshold: 0,
onStart: ev => this.onStart(ev),
onMove: ev => this.onMove(ev),
onEnd: ev => this.onEnd(ev),
});
this.disabledChanged();
}
catch (err) {
console.error(err);
}
}
onStart(detail) {
var _a, _b;
this.pivotX = detail.currentX;
this.activated = true;
// touch-action does not work in iOS
(_a = detail.event) === null || _a === void 0 ? void 0 : _a.preventDefault();
(_b = detail.event) === null || _b === void 0 ? void 0 : _b.stopPropagation();
return true;
}
onMove(detail) {
var _a, _b;
const currentX = detail.currentX;
if (shouldToggle(this.checked, currentX - this.pivotX, -5)) {
this.checked = !this.checked;
this.pivotX = currentX;
}
(_a = detail.event) === null || _a === void 0 ? void 0 : _a.preventDefault();
(_b = detail.event) === null || _b === void 0 ? void 0 : _b.stopPropagation();
}
onEnd(detail) {
var _a, _b;
const delta = detail.currentX - this.pivotX;
if (shouldToggle(this.checked, delta, 0)) {
this.checked = !this.checked;
}
this.activated = false;
(_a = detail.event) === null || _a === void 0 ? void 0 : _a.preventDefault();
(_b = detail.event) === null || _b === void 0 ? void 0 : _b.stopPropagation();
}
getValue() {
return this.value || '';
}
render() {
const value = this.getValue();
renderHiddenInput(this.el, this.name, (this.checked ? value : ''), this.disabled);
return (h(Host, { key: 'b1f85ce51876a6631f452c8a60fe9dae1d6ab64e', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'lar-toggle-activated': this.activated, 'lar-toggle-checked': this.checked, 'lar-toggle-disabled': this.disabled, 'lar-toggle-key': this.keyFocus }) }, h("div", { key: '438cee8f7280ab24888b019e1282d49a763f6a04', class: "lar-toggle-icon" }, h("div", { key: '8fb613f5b12e55a2f8c664020f216699097662d2', class: "lar-toggle-inner" })), h("input", { key: 'b07c48a2e0894dd66a5ab06fe7096263975010ca', type: "checkbox", onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyUp: this.onKeyUp, checked: this.checked, id: this.inputId, name: this.name, value: value, disabled: this.disabled }), h("slot", { key: '6a8ab1614ed8b91a051bd7855e48187cce533751' })));
}
get el() { return getElement(this); }
static get watchers() { return {
"checked": ["checkedChanged"],
"disabled": ["disabledChanged"]
}; }
};
function shouldToggle(checked, deltaX, margin) {
if (checked) {
return (margin >= deltaX);
}
else {
return (-margin <= deltaX);
}
}
let toggleIds = 0;
Toggle.style = toggleCss;
export { Toggle as lar_toggle };
//# sourceMappingURL=lar-toggle.entry.js.map