FileMaster

Edit File: sc-choices2.js

import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./sc-form-control2.js";import{d as defineCustomElement$1}from"./sc-visually-hidden2.js";const scChoicesCss=":host {\n  display: block;\n}\n\n.choices {\n  container-type: inline-size;\n}\n.choices ::slotted(div) {\n  margin: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sc-choices-gap, 10px);\n}\n\n.choices:not(.choices--auto-width) ::slotted(div) {\n  margin: 0;\n  display: grid;\n  gap: var(--sc-choices-gap, 10px);\n}\n\n.breakpoint-lg ::slotted(div),\n.breakpoint-xl ::slotted(div) {\n  grid-template-columns: repeat(var(--columns, 1), 1fr);\n}\n\n.choices .choices__items {\n  margin: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sc-choices-gap, 10px);\n}\n\n.choices:not(.choices--auto-width) .choices__items {\n  display: grid;\n  gap: var(--sc-choices-gap, 10px);\n}\n\n.choices {\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n  margin: 0;\n}\n.choices .choices__label {\n  font-family: var(--sc-input-font-family);\n  font-size: var(--sc-input-font-size-medium);\n  font-weight: var(--sc-input-font-weight);\n  color: var(--sc-input-color);\n  padding: 0 var(--sc-spacing-xx-small);\n}\n\n.choices__items {\n  display: grid;\n  gap: var(--sc-choices-gap, 10px);\n  grid-auto-rows: 1fr;\n}\n\n.choices__items {\n  grid-template-columns: repeat(var(--columns, 1), 1fr);\n}\n\n@container (max-width: 419px) {\n  .choices__items {\n    grid-template-columns: repeat(1, 1fr);\n  }\n}",ScChoicesStyle0=scChoicesCss;let id=0;const ScChoices=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),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"}))))}get el(){return this}static get watchers(){return{required:["handleRequiredChange"]}}static get style(){return ScChoicesStyle0}},[1,"sc-choices",{label:[1],size:[513],autoWidth:[4,"auto-width"],required:[4],showLabel:[4,"show-label"],help:[1],hideLabel:[4,"hide-label"],columns:[2],errorMessage:[1,"error-message"],width:[32],triggerFocus:[64]},void 0,{required:["handleRequiredChange"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-choices","sc-form-control","sc-visually-hidden"].forEach((e=>{switch(e){case"sc-choices":customElements.get(e)||customElements.define(e,ScChoices);break;case"sc-form-control":customElements.get(e)||defineCustomElement$2();break;case"sc-visually-hidden":customElements.get(e)||defineCustomElement$1()}}))}export{ScChoices as S,defineCustomElement as d};

Back