FileMaster

Edit File: sc-choices.js

import{h}from"@stencil/core";let id=0;export class ScChoices{constructor(){this.inputId="choices-"+ ++id,this.helpId=`choices-help-text-${id}`,this.labelId=`choices-label-${id}`,this.label="",this.size="medium",this.autoWidth=void 0,this.required=!1,this.showLabel=!0,this.help="",this.hideLabel=!1,this.columns=1,this.errorMessage="",this.width=void 0}async triggerFocus(){this.el.focus()}componentDidLoad(){this.handleRequiredChange(),this.handleResize()}handleRequiredChange(){const e=[...this.el.querySelectorAll("sc-choice, sc-choice-container")];e.length&&e.forEach((e=>{e.required=this.required}))}handleResize(){"ResizeObserver"in window&&new window.ResizeObserver((e=>{e.forEach((e=>{this.width=e.contentRect.width}))})).observe(this.el)}render(){return h("fieldset",{key:"d16d969391579785448085416410df9974ac718b",part:"base",class:{choices:!0,"choices--hide-label":this.hideLabel,"choices--auto-width":this.autoWidth,"breakpoint-sm":this.width<384,"breakpoint-md":this.width>=384&&this.width<576,"breakpoint-lg":this.width>=576&&this.width<768,"breakpoint-xl":this.width>=768},role:"radiogroup"},h("sc-form-control",{key:"df78df0f0270281016eb7dbd353888b7e9d56ed9",exportparts:"label, help-text, form-control",size:this.size,required:this.required,label:this.label,showLabel:this.showLabel,help:this.help,inputId:this.inputId,helpId:this.helpId,labelId:this.labelId},h("div",{key:"7e26fe725433ee6e7a17a8fcefd9480c2a11a3c3",part:"choices",class:"choices__items"},h("slot",{key:"75b0824b63278ff41a6d4321a94ba89216b1b4ac"}))))}static get is(){return"sc-choices"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-choices.scss"]}}static get styleUrls(){return{$:["sc-choices.css"]}}static get properties(){return{label:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The group label. Required for proper accessibility. Alternatively, you can use the label slot."},attribute:"label",reflect:!1,defaultValue:"''"},size:{type:"string",mutable:!1,complexType:{original:"'small' | 'medium' | 'large'",resolved:'"large" | "medium" | "small"',references:{}},required:!1,optional:!1,docs:{tags:[],text:"Input size"},attribute:"size",reflect:!0,defaultValue:"'medium'"},autoWidth:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:""},attribute:"auto-width",reflect:!1},required:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Required"},attribute:"required",reflect:!1,defaultValue:"false"},showLabel:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Should we show the label"},attribute:"show-label",reflect:!1,defaultValue:"true"},help:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The input's help text."},attribute:"help",reflect:!1,defaultValue:"''"},hideLabel:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Hides the fieldset and legend that surrounds the group. The label will still be read by screen readers."},attribute:"hide-label",reflect:!1,defaultValue:"false"},columns:{type:"number",mutable:!1,complexType:{original:"number",resolved:"number",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Number of columns on desktop"},attribute:"columns",reflect:!1,defaultValue:"1"},errorMessage:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Validation error message."},attribute:"error-message",reflect:!1,defaultValue:"''"}}}static get states(){return{width:{}}}static get methods(){return{triggerFocus:{complexType:{signature:"() => Promise<void>",parameters:[],references:{Promise:{location:"global",id:"global::Promise"}},return:"Promise<void>"},docs:{text:"",tags:[]}}}}static get elementRef(){return"el"}static get watchers(){return[{propName:"required",methodName:"handleRequiredChange"}]}}

Back