@progress/kendo-vue-inputs/switch/Switch.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),t=require("@progress/kendo-vue-common"),u=require("@progress/kendo-vue-intl"),l=require("../messages/main.js"),o=require("../package-metadata.js"),h=s.defineComponent({name:"KendoSwitch",model:{event:"changemodel"},emits:{change:null,changemodel:null,"update:modelValue":null,focus:null,blur:null},props:{name:String,accessKey:String,checked:{type:Boolean,default:void 0},className:String,disabled:{type:Boolean,default:!1},defaultChecked:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},trackRounded:{type:String,default:"full",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},thumbRounded:{type:String,default:"full",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},dir:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,offLabel:{type:String,default:"OFF"},onLabel:{type:String,default:"ON"},required:{type:Boolean,default:!1},tabIndex:Number,valid:Boolean,validityStyles:{type:Boolean,default:!1},validationMessage:String,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:Boolean,default:void 0}},created(){t.validatePackage(o.packageMetadata),this._id=t.guid(),this.defaultValidationMessage=u.provideLocalizationService(this)},data(){return{currentChecked:this.$props.defaultChecked,valueDuringOnChange:void 0,focused:!1,currentDir:void 0}},computed:{computedValue(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.checked!==void 0?this.$props.checked:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentChecked},switchClassName(){const e=!this.validityStyles||this.validity().valid,i=this.$props.trackRounded;return{"k-switch":!0,[`k-switch-${t.kendoThemeMaps.sizeMap[this.$props.size]}`]:this.$props.size,[`k-rounded-${t.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-switch-on":this.computedValue,"k-switch-off":!this.computedValue,"k-focus":this.focused,"k-disabled":this.$props.disabled,"k-invalid":!e}},switchTrackClass(){const e=this.$props.trackRounded;return{"k-switch-track":!0,[`k-rounded-${t.kendoThemeMaps.roundedMap[e]||e}`]:e}},switchThumbClass(){const e=this.$props.thumbRounded;return{"k-switch-thumb":!0,[`k-rounded-${t.kendoThemeMaps.roundedMap[e]||e}`]:e}}},mounted(){this._element=t.getRef(this,"element"),this.input=t.getRef(this,"input"),this.currentDir=this.$props.dir!==void 0?this.$props.dir:t.isRtl(this.$el)?"rtl":"ltr",this.setValidity()},updated(){this.setValidity()},render(){const{disabled:e,id:i,offLabel:a,onLabel:d,tabIndex:n,required:r}=this.$props;return s.createVNode("span",{class:this.switchClassName,role:"switch","aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-checked":this.computedValue,"aria-disabled":e||void 0,dir:this.currentDir,onKeydown:this.handleKeyDown,onClick:this.handleClick,onFocusout:this.handleWrapperBlur,onFocusin:this.handleWrapperFocus,tabindex:t.getTabIndex(n,e,void 0),accesskey:this.$props.accessKey},[s.createVNode("span",{class:this.switchTrackClass,ref:t.setRef(this,"element")},[s.createVNode("input",{type:"checkbox",id:i||this._id,checked:this.$props.checked,ref:t.setRef(this,"input"),tabindex:-1,name:this.$props.name,required:r!==void 0?r:!1,"aria-hidden":!0,value:this.computedValue,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"},onChange:t.noop},null),s.createVNode("span",{class:"k-switch-label-on"},[d]),s.createVNode("span",{class:"k-switch-label-off"},[a])]),s.createVNode("span",{class:"k-switch-thumb-wrap"},[s.createVNode("span",{class:this.switchThumbClass},null)])])},methods:{focus(){this._element&&this._element.focus()},element(){return this._element},validity(){const e=this.$props.validationMessage!==void 0,i=this.$props.valid!==void 0?this.$props.valid:this.$props.required?!!this.computedValue:!0,a=this.$props.valid!==void 0?this.$props.valid:i;return{customError:e,valid:a,valueMissing:this.computedValue===null}},setValidity(){this.input&&this.input.setCustomValidity&&this.input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||this.defaultValidationMessage.toLanguageString(l.switchValidation,l.messages[l.switchValidation]))},limit(e,i,a){const d=a.offsetWidth,n=i.offsetWidth;return e<0?0:e>d-n?d-n:e},toggle(e,i){this.currentChecked=e,this.valueDuringOnChange=e,this.$emit("changemodel",e),this.$emit("update:modelValue",e),this.$emit("change",{event:i,component:this,target:{value:e},name:this.$props.name,value:e,validity:this.validity()}),this.valueDuringOnChange=void 0},handleClick(e){this.eventTimeStamp!==e.timeStamp&&(this.eventTimeStamp=e.timeStamp,this.toggle(!this.computedValue,e))},handleKeyDown(e){if(this.$props.disabled)return;const{keyCode:i}=e;(i===t.Keys.space||i===t.Keys.enter)&&this.toggle(!this.computedValue,e)},handleWrapperFocus(e){this.$props.disabled||(this.focused=!0,this.$emit("focus",e))},handleWrapperBlur(e){this.$props.disabled||(this.focused=!1,this.$emit("blur",e))}}});exports.Switch=h;