@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
5 lines • 7.35 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import{r,c as o,h as a,H as e,g as l}from"./p-C4h1muVj.js";import{r as t}from"./p-ue25B_tw.js";import{c}from"./p-B02IfvGX.js";import{createGesture as n}from"./p-Bg81B2hG.js";const i="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 s=class{constructor(a){r(this,a);this.larchange=o(this,"larchange");this.larfocus=o(this,"larfocus");this.larblur=o(this,"larblur");this.inputId=`lar-tg-${d++}`;this.pivotX=0;this.activated=false;this.keyFocus=false;this.name=this.inputId;this.checked=false;this.disabled=false;this.value="on";this.onChange=r=>{this.checked=!this.checked;r.stopPropagation();r.preventDefault()};this.onKeyUp=()=>{this.keyFocus=true};this.onFocus=r=>{this.larfocus.emit();r.stopPropagation();r.preventDefault()};this.onBlur=r=>{this.keyFocus=false;this.larblur.emit();r.stopPropagation();r.preventDefault()}}checkedChanged(r){this.larchange.emit({checked:r,value:this.value})}async disabledChanged(){var r;try{(r=this.gesture)===null||r===void 0?void 0:r.enable(!Boolean(this.disabled))}catch(r){console.error(r)}}async componentDidLoad(){try{this.gesture=n({el:this.el,gestureName:"toggle",gesturePriority:100,threshold:0,onStart:r=>this.onStart(r),onMove:r=>this.onMove(r),onEnd:r=>this.onEnd(r)});this.disabledChanged()}catch(r){console.error(r)}}onStart(r){var o,a;this.pivotX=r.currentX;this.activated=true;(o=r.event)===null||o===void 0?void 0:o.preventDefault();(a=r.event)===null||a===void 0?void 0:a.stopPropagation();return true}onMove(r){var o,a;const e=r.currentX;if(g(this.checked,e-this.pivotX,-5)){this.checked=!this.checked;this.pivotX=e}(o=r.event)===null||o===void 0?void 0:o.preventDefault();(a=r.event)===null||a===void 0?void 0:a.stopPropagation()}onEnd(r){var o,a;const e=r.currentX-this.pivotX;if(g(this.checked,e,0)){this.checked=!this.checked}this.activated=false;(o=r.event)===null||o===void 0?void 0:o.preventDefault();(a=r.event)===null||a===void 0?void 0:a.stopPropagation()}getValue(){return this.value||""}render(){const r=this.getValue();t(this.el,this.name,this.checked?r:"",this.disabled);return a(e,{key:"b1f85ce51876a6631f452c8a60fe9dae1d6ab64e",class:Object.assign(Object.assign({},c(this.color)),{"lar-toggle-activated":this.activated,"lar-toggle-checked":this.checked,"lar-toggle-disabled":this.disabled,"lar-toggle-key":this.keyFocus})},a("div",{key:"438cee8f7280ab24888b019e1282d49a763f6a04",class:"lar-toggle-icon"},a("div",{key:"8fb613f5b12e55a2f8c664020f216699097662d2",class:"lar-toggle-inner"})),a("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:r,disabled:this.disabled}),a("slot",{key:"6a8ab1614ed8b91a051bd7855e48187cce533751"}))}get el(){return l(this)}static get watchers(){return{checked:["checkedChanged"],disabled:["disabledChanged"]}}};function g(r,o,a){if(r){return a>=o}else{return-a<=o}}let d=0;s.style=i;export{s as lar_toggle};
//# sourceMappingURL=p-e956712f.entry.js.map