primevue/togglebutton/togglebutton.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue=this.primevue||{},this.primevue.togglebutton=function(e,t,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(e),s=l(t),o={name:"ToggleButton",extends:n.default,emits:["update:modelValue","change","click","focus","blur"],props:{modelValue:Boolean,onIcon:String,offIcon:String,onLabel:{type:String,default:"Yes"},offLabel:{type:String,default:"No"},iconPos:{type:String,default:"left"},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},outsideClickListener:null,data:()=>({focused:!1}),mounted(){this.bindOutsideClickListener()},beforeUnmount(){this.unbindOutsideClickListener()},methods:{onClick(e){this.disabled||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",e),this.$emit("click",e),this.focused=!0)},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.focused&&!this.$refs.container.contains(e.target)&&(this.focused=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)}},computed:{buttonClass(){return["p-button p-togglebutton p-component",{"p-focus":this.focused,"p-button-icon-only":this.hasIcon&&!this.hasLabel,"p-disabled":this.disabled,"p-highlight":!0===this.modelValue}]},iconClass(){return[this.modelValue?this.onIcon:this.offIcon,"p-button-icon",{"p-button-icon-left":"left"===this.iconPos&&this.label,"p-button-icon-right":"right"===this.iconPos&&this.label}]},hasLabel(){return this.onLabel&&this.onLabel.length>0&&this.offLabel&&this.offLabel.length>0},hasIcon(){return this.$slots.icon||this.onIcon&&this.offIcon},label(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:" "}},directives:{ripple:s.default}};const a=["id","checked","value","aria-labelledby","aria-label"];return o.render=function(e,t,l,n,s,o){const u=i.resolveDirective("ripple");return i.withDirectives((i.openBlock(),i.createElementBlock("div",i.mergeProps({ref:"container",class:o.buttonClass,onClick:t[2]||(t[2]=e=>o.onClick(e))},e.ptm("root")),[i.createElementVNode("span",i.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper")),[i.createElementVNode("input",i.mergeProps({id:l.inputId,type:"checkbox",role:"switch",class:l.inputClass,style:l.inputStyle,checked:l.modelValue,value:l.modelValue,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>o.onFocus(e)),onBlur:t[1]||(t[1]=e=>o.onBlur(e))},{...l.inputProps,...e.ptm("hiddenInput")}),null,16,a)],16),i.renderSlot(e.$slots,"icon",{value:l.modelValue,class:i.normalizeClass(o.iconClass)},(()=>[l.onIcon||l.offIcon?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:0,class:o.iconClass},e.ptm("icon")),null,16)):i.createCommentVNode("",!0)])),i.createElementVNode("span",i.mergeProps({class:"p-button-label"},e.ptm("label")),i.toDisplayString(o.label),17)],16)),[[u]])},o}(primevue.basecomponent,primevue.ripple,Vue);