FileMaster

Edit File: sc-switch.js

import{h}from"@stencil/core";import{FormSubmitController}from"../../../functions/form-data";let id=0;export class ScSwitch{constructor(){this.switchId="switch-"+ ++id,this.labelId=`switch-label-${id}`,this.hasDescription=void 0,this.hasFocus=!1,this.name=void 0,this.value=void 0,this.disabled=!1,this.required=!1,this.checked=!1,this.invalid=!1,this.reversed=void 0,this.edit=!1}async reportValidity(){return this.invalid=!this.input.checkValidity(),this.input.reportValidity()}handleClick(){this.checked=!this.checked,this.scChange.emit()}handleBlur(){this.hasFocus=!1,this.scBlur.emit()}handleFocus(){this.hasFocus=!0,this.scFocus.emit()}handleKeyDown(e){if(this.edit)return!0;"ArrowLeft"===e.key&&(e.preventDefault(),this.checked=!1,this.scChange.emit()),"ArrowRight"===e.key&&(e.preventDefault(),this.checked=!0,this.scChange.emit())," "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this.handleClick())}handleMouseDown(e){if(this.edit)return!0;e.preventDefault(),this.input.focus()}handleCheckedChange(){this.input&&(this.input.checked=this.checked,this.invalid=!this.input.checkValidity())}componentWillLoad(){this.hasDescription=!!this.el.querySelector('[slot="description"]')}componentDidLoad(){this.formController=new FormSubmitController(this.el,{value:e=>e.checked?e.value:void 0}).addFormData()}disconnectedCallback(){var e;null===(e=this.formController)||void 0===e||e.removeFormData()}render(){const e=this.edit?"div":"label";return h(e,{key:"33a9fa88f5b855e4e8eb83c0ce5b5fe0cbae83bb",part:"base",htmlFor:this.switchId,class:{switch:!0,"switch--is-required":this.required,"switch--checked":this.checked,"switch--disabled":this.disabled,"switch--focused":this.hasFocus,"switch--reversed":this.reversed,"switch--editing":this.edit,"switch--has-description":this.hasDescription},onMouseDown:e=>this.handleMouseDown(e)},h("span",{key:"4c3f96c2fad6efdbbc30fa3e696ed90cc4e3e232",part:"control",class:"switch__control"},h("span",{key:"7174406ae46eac1fcbfbf3c6266b062fdfb27aec",part:"thumb",class:"switch__thumb"}),h("input",{key:"4e1b8763cc744017160efeed786919709ab92e9f",ref:e=>this.input=e,id:this.switchId,type:"checkbox",role:"switch",name:this.name,value:this.value||"on",checked:this.checked,disabled:this.disabled,required:this.required,"aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:()=>this.handleClick(),onBlur:()=>this.handleBlur(),onFocus:()=>this.handleFocus(),onKeyDown:e=>this.handleKeyDown(e)})),h("span",{key:"d9eccee07e1358ceacab6e86dfff93112689235c",class:"switch__label",part:"label"},h("span",{key:"c8dc21e4254099103baf0cbbd28fe3c1c0fb9989",part:"title",id:this.labelId,class:"switch__title"},h("slot",{key:"586be2f69203bc370be78a6e09d5486fbfef8817"})),h("span",{key:"6696f2f9b944f3d18cadcc3b1bd5532bd3152966",class:"switch__description",part:"description"},h("slot",{key:"c6a24842971d8897aae00bb99eb1a1e4807eed68",name:"description"}))))}static get is(){return"sc-switch"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-switch.scss"]}}static get styleUrls(){return{$:["sc-switch.css"]}}static get properties(){return{name:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The switch's name attribute."},attribute:"name",reflect:!0},value:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The switch's value attribute."},attribute:"value",reflect:!1},disabled:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Disables the switch."},attribute:"disabled",reflect:!0,defaultValue:"false"},required:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Makes the switch a required field."},attribute:"required",reflect:!0,defaultValue:"false"},checked:{type:"boolean",mutable:!0,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Draws the switch in a checked state."},attribute:"checked",reflect:!0,defaultValue:"false"},invalid:{type:"boolean",mutable:!0,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"This will be true when the control is in an invalid state. Validity is determined by the `required` prop."},attribute:"invalid",reflect:!0,defaultValue:"false"},reversed:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:""},attribute:"reversed",reflect:!1},edit:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"This will be true as a workaround in the block editor to focus on the content."},attribute:"edit",reflect:!1,defaultValue:"false"}}}static get states(){return{hasDescription:{},hasFocus:{}}}static get events(){return[{method:"scBlur",name:"scBlur",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the control loses focus."},complexType:{original:"void",resolved:"void",references:{}}},{method:"scChange",name:"scChange",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the control's checked state changes."},complexType:{original:"void",resolved:"void",references:{}}},{method:"scFocus",name:"scFocus",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the control gains focus."},complexType:{original:"void",resolved:"void",references:{}}}]}static get methods(){return{reportValidity:{complexType:{signature:"() => Promise<boolean>",parameters:[],references:{Promise:{location:"global",id:"global::Promise"}},return:"Promise<boolean>"},docs:{text:"Checks for validity and shows the browser's validation message if the control is invalid.",tags:[]}}}}static get elementRef(){return"el"}static get watchers(){return[{propName:"checked",methodName:"handleCheckedChange"}]}}

Back