@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
326 lines (325 loc) • 11.9 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { Host, h } from "@stencil/core";
import { renderHiddenInput } from "../../../utils/helpers";
import { createColorClasses } from "../../../utils/theme";
import { createGesture } from "../../../utils/gesture";
export class Toggle {
constructor() {
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' })));
}
static get is() { return "lar-toggle"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["toggle.scss"]
};
}
static get styleUrls() {
return {
"$": ["toggle.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the control, which is submitted with the form data."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name",
"defaultValue": "this.inputId"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the toggle is selected. Defaults to `false`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "checked",
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the user cannot interact with the toggle. Defaults to `false`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | null",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`.\nDefaults to `on`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value",
"defaultValue": "'on'"
}
};
}
static get states() {
return {
"activated": {},
"keyFocus": {}
};
}
static get events() {
return [{
"method": "larchange",
"name": "larchange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the value property has changed."
},
"complexType": {
"original": "CheckedInputChangeEvent",
"resolved": "CheckedInputChangeEvent",
"references": {
"CheckedInputChangeEvent": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::CheckedInputChangeEvent"
}
}
}
}, {
"method": "larfocus",
"name": "larfocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the toggle has focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "larblur",
"name": "larblur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the toggle loses focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "checked",
"methodName": "checkedChanged"
}, {
"propName": "disabled",
"methodName": "disabledChanged"
}];
}
}
function shouldToggle(checked, deltaX, margin) {
if (checked) {
return (margin >= deltaX);
}
else {
return (-margin <= deltaX);
}
}
let toggleIds = 0;
//# sourceMappingURL=toggle.js.map