@govtechsg/sgds-web-component 3.23.0-rc.0 → 3.23.0-rc.2

package/components/Radio/index.umd.min.js

@@ -92,7 +92,7 @@ window.ShadyDOM?.inUse&&!0===window.ShadyDOM?.noPatch&&window.ShadyDOM.wrap;cons
    * Copyright 2020 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-class extends Rt{constructor(t){if(super(t),t.type!==Mt&&t.type!==Ut&&t.type!==Nt)throw new Error("The `live` directive is not allowed on child or event bindings");if(void 0!==t.strings)throw new Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===et||e===it)return e;const i=t.element,s=t.name;if(t.type===Mt){if(e===i[s])return et}else if(t.type===Nt){if(!!e===i.hasAttribute(s))return et}else if(t.type===Ut&&i.getAttribute(s)===String(e))return et;return((t,e=Zt)=>{t._$committedValue=e})(t),e}});var Gt=o`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,Kt=o`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`,Yt=o`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-24)}`;class Xt extends Lt{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=qt("input"),this._labelId=qt("label")}setInvalid(t){this.invalid=t,t?this.emit("sgds-invalid"):this.emit("sgds-valid")}}Xt.styles=[...Lt.styles,Gt,Kt,Ft,Yt],t([Ct({reflect:!0})],Xt.prototype,"label",void 0),t([Ct({reflect:!0})],Xt.prototype,"hintText",void 0),t([Ct({reflect:!0})],Xt.prototype,"name",void 0),t([Ct({type:Boolean,reflect:!0})],Xt.prototype,"disabled",void 0),t([Ct({type:Boolean,reflect:!0})],Xt.prototype,"invalid",void 0);class Qt{constructor(t,e){(this.host=t).addController(this),this._internals=t._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(t,e)=>{t.invalid=e},value:t=>t.value,input:t=>t.input},e)}hostConnected(){this.host.addEventListener("invalid",t=>this.handleInvalid(t))}hostDisconnected(){this.host.removeEventListener("invalid",t=>this.handleInvalid(t))}handleInvalid(t){t.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(t){const e=t.target;this.options.setInvalid(this.host,!1),this.validateInput(e)}handleChange(t){const e=t.target;this.validateInput(e),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(t,e,i){return this._internals.setValidity(t,e,i)}setFormValue(){const t=this.options.value(this.host);this._internals.setFormValue(t)}validateInput(t){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const e=t.validity;if(e.valid)this._internals.setValidity({});else for(const i in e)e[i]&&(this.validationError=i.toString(),this._internals.setValidity({[this.validationError]:!0},t.validationMessage,t))}}const te=e=>{class i extends e{constructor(...t){super(...t),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var t;super.connectedCallback(),this._mixinShouldSkipSgdsValidation()||null!==(t=this.inputValidationController)&&void 0!==t||(this.inputValidationController=new Qt(this))}async firstUpdated(t){super.firstUpdated(t),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(t)}_mixinHandleInputChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(t)}_mixinResetValidity(t){this._mixinShouldSkipSgdsValidation()||(this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this.inputValidationController.validateInput(t),this._isTouched&&(this._isTouched=!1))}_mixinValidate(t){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(t)}_mixinSetFormValue(){const t=this.value;this._internals.setFormValue(t)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(t,e,i){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(t,e,i)}_mixinShouldSkipSgdsValidation(){const t=this.closest("form");return(null==t?void 0:t.noValidate)||this.noValidate}}return i.formAssociated=!0,t([It("sgds-input")],i.prototype,"sgdsInput",void 0),t([It("sgds-datepicker-input")],i.prototype,"sgdsDatepickerInput",void 0),i};var ee,ie=o`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;class se extends(te(Xt)){constructor(){super(...arguments),this.defaultValue="",this.value="",this.invalidFeedback="",this.hasFeedback=!1,this.required=!1,this.autofocus=!1,this._isTouched=!1}_handleValueChange(){this.emit("sgds-change",{detail:{value:this.value}}),this._updateCheckedRadio()}_handleInvalidChange(){this._radios.forEach(t=>t.invalid=this.invalid)}_mixinResetFormControl(){this.value=this.input.value=this.defaultValue,this._updateInputValue("reset"),this._mixinResetValidity(this.input)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.addEventListener("sgds-blur",()=>{this._isTouched=!0})}firstUpdated(t){super.firstUpdated(t);const e=this._radios;e.forEach((t,i)=>{if(e.length>1)switch(i){case 0:t.setAttribute("first-of-type","");break;case e.length-1:t.setAttribute("last-of-type","");break;default:t.setAttribute("nth-of-type","")}}),this.value&&this._updateInputValue("change")}_handleRadioClick(t){t.preventDefault();const e=t.target;if(e.disabled)return;this.value=e.value,this._updateInputValue();this._radios.forEach(t=>t.checked=t===e)}_updateInputValue(t="change"){this.input.value=this.value,this.input.dispatchEvent(new InputEvent(t))}_handleKeyDown(t){var e;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key))return;const i=this._radios.filter(t=>!t.disabled),s=null!==(e=i.find(t=>t.checked))&&void 0!==e?e:i[0],n=" "===t.key?0:["ArrowUp","ArrowLeft"].includes(t.key)?-1:1;let r=i.indexOf(s)+n;r<0&&(r=i.length-1),r>i.length-1&&(r=0),this._radios.forEach(t=>{t.checked=!1,t.tabIndex=-1}),this.value=i[r].value,this._updateInputValue(),i[r].checked=!0,i[r].tabIndex=0,t.preventDefault()}_handleSlotChange(){const t=this._radios;t.forEach(t=>(t.autofocus=this.autofocus,t.checked=t.value===this.value,t)),this._disabledChildRadios(),t.some(t=>t.checked)||t[0]&&(t[0].tabIndex=0)}_updateCheckedRadio(){this._radios.forEach(t=>t.checked=t.value===this.value)}_renderHintText(){const t=Q` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&t}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleIsTouched(){this._isTouched&&(this.invalid=!this.input.checkValidity())}_handleDisabledChange(){this.setInvalid(!1),this._disabledChildRadios()}_disabledChildRadios(){if(this.disabled){this._radios.forEach(t=>t.disabled=this.disabled)}}render(){const t=Q`
+class extends Rt{constructor(t){if(super(t),t.type!==Mt&&t.type!==Ut&&t.type!==Nt)throw new Error("The `live` directive is not allowed on child or event bindings");if(void 0!==t.strings)throw new Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===et||e===it)return e;const i=t.element,s=t.name;if(t.type===Mt){if(e===i[s])return et}else if(t.type===Nt){if(!!e===i.hasAttribute(s))return et}else if(t.type===Ut&&i.getAttribute(s)===String(e))return et;return((t,e=Zt)=>{t._$committedValue=e})(t),e}});var Gt=o`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,Kt=o`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`,Yt=o`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-24)}`;class Xt extends Lt{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=qt("input"),this._labelId=qt("label")}setInvalid(t){this.invalid=t,t?this.emit("sgds-invalid"):this.emit("sgds-valid")}}Xt.styles=[...Lt.styles,Gt,Kt,Ft,Yt],t([Ct({reflect:!0})],Xt.prototype,"label",void 0),t([Ct({reflect:!0})],Xt.prototype,"hintText",void 0),t([Ct({reflect:!0})],Xt.prototype,"name",void 0),t([Ct({type:Boolean,reflect:!0})],Xt.prototype,"disabled",void 0),t([Ct({type:Boolean,reflect:!0})],Xt.prototype,"invalid",void 0);class Qt{constructor(t,e){(this.host=t).addController(this),this._internals=t._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(t,e)=>{t.invalid=e},value:t=>t.value,input:t=>t.input},e)}hostConnected(){this.host.addEventListener("invalid",t=>this.handleInvalid(t))}hostDisconnected(){this.host.removeEventListener("invalid",t=>this.handleInvalid(t))}handleInvalid(t){t.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(t){const e=t.target;this.options.setInvalid(this.host,!1),this.validateInput(e)}handleChange(t){const e=t.target;this.validateInput(e),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(t,e,i){return this._internals.setValidity(t,e,i)}setFormValue(){const t=this.options.value(this.host);this._internals.setFormValue(t)}validateInput(t){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const e=t.validity;if(e.valid)this._internals.setValidity({});else for(const i in e)e[i]&&(this.validationError=i.toString(),this._internals.setValidity({[this.validationError]:!0},t.validationMessage,t))}}const te=e=>{class i extends e{constructor(...t){super(...t),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var t;super.connectedCallback(),null!==(t=this.inputValidationController)&&void 0!==t||(this.inputValidationController=new Qt(this))}async firstUpdated(t){super.firstUpdated(t),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(t)}_mixinHandleInputChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(t)}_mixinResetValidity(t){this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this._isTouched&&(this._isTouched=!1),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(t)}_mixinValidate(t){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(t)}_mixinSetFormValue(){const t=this.value;this._internals.setFormValue(t)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(t,e,i){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(t,e,i)}_mixinShouldSkipSgdsValidation(){const t=this.closest("form");return(null==t?void 0:t.noValidate)||this.noValidate}}return i.formAssociated=!0,t([It("sgds-input")],i.prototype,"sgdsInput",void 0),t([It("sgds-datepicker-input")],i.prototype,"sgdsDatepickerInput",void 0),i};var ee,ie=o`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;class se extends(te(Xt)){constructor(){super(...arguments),this.defaultValue="",this.value="",this.invalidFeedback="",this.hasFeedback=!1,this.required=!1,this.noValidate=!1,this.autofocus=!1,this._isTouched=!1}_handleValueChange(){this.emit("sgds-change",{detail:{value:this.value}}),this._updateCheckedRadio()}_handleInvalidChange(){this._radios.forEach(t=>t.invalid=this.invalid)}_mixinResetFormControl(){this.value=this.input.value=this.defaultValue,this._updateInputValue("reset"),this._mixinResetValidity(this.input)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.addEventListener("sgds-blur",()=>{this._isTouched=!0})}firstUpdated(t){super.firstUpdated(t);const e=this._radios;e.forEach((t,i)=>{if(e.length>1)switch(i){case 0:t.setAttribute("first-of-type","");break;case e.length-1:t.setAttribute("last-of-type","");break;default:t.setAttribute("nth-of-type","")}}),this.value&&this._updateInputValue("change")}_handleRadioClick(t){t.preventDefault();const e=t.target;if(e.disabled)return;this.value=e.value,this._updateInputValue();this._radios.forEach(t=>t.checked=t===e)}_updateInputValue(t="change"){this.input.value=this.value,this.input.dispatchEvent(new InputEvent(t))}_handleKeyDown(t){var e;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key))return;const i=this._radios.filter(t=>!t.disabled),s=null!==(e=i.find(t=>t.checked))&&void 0!==e?e:i[0],n=" "===t.key?0:["ArrowUp","ArrowLeft"].includes(t.key)?-1:1;let r=i.indexOf(s)+n;r<0&&(r=i.length-1),r>i.length-1&&(r=0),this._radios.forEach(t=>{t.checked=!1,t.tabIndex=-1}),this.value=i[r].value,this._updateInputValue(),i[r].checked=!0,i[r].tabIndex=0,t.preventDefault()}_handleSlotChange(){const t=this._radios;t.forEach(t=>(t.autofocus=this.autofocus,t.checked=t.value===this.value,t)),this._disabledChildRadios(),t.some(t=>t.checked)||t[0]&&(t[0].tabIndex=0)}_updateCheckedRadio(){this._radios.forEach(t=>t.checked=t.value===this.value)}_renderHintText(){const t=Q` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&t}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&(this.invalid=!this.input.checkValidity())}_handleDisabledChange(){this.setInvalid(!1),this._disabledChildRadios()}_disabledChildRadios(){if(this.disabled){this._radios.forEach(t=>t.disabled=this.disabled)}}render(){const t=Q`
       <slot
         class="radio-container"
         @click=${this._handleRadioClick}
@@ -136,5 +136,5 @@ class extends Rt{constructor(t){if(super(t),t.type!==Mt&&t.type!==Ut&&t.type!==N
               </div>
             `:it}
       </fieldset>
-    `}}function ne(t,e){customElements.get(t)||customElements.define(t,e)}se.styles=[...Xt.styles,ie],t([Tt("slot:not([name])")],se.prototype,"defaultSlot",void 0),t([Vt()],se.prototype,"defaultValue",void 0),t([Ct({reflect:!0})],se.prototype,"value",void 0),t([Ct({type:String,reflect:!0})],se.prototype,"invalidFeedback",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"hasFeedback",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"required",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"autofocus",void 0),t([jt("value",{waitUntilFirstUpdate:!0})],se.prototype,"_handleValueChange",null),t([jt("invalid",{waitUntilFirstUpdate:!0})],se.prototype,"_handleInvalidChange",null),t([Vt()],se.prototype,"_isTouched",void 0),t([(t,e)=>{const{slot:i,selector:s}=ee??{},n="slot"+(i?`[name=${i}]`:":not([name])");return Pt(t,e,{get(){const t=this.renderRoot?.querySelector(n),e=t?.assignedElements(ee)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}],se.prototype,"_radios",void 0),t([jt("_isTouched",{waitUntilFirstUpdate:!0})],se.prototype,"_handleIsTouched",null),t([jt("disabled",{waitUntilFirstUpdate:!0})],se.prototype,"_handleDisabledChange",null),ne("sgds-radio",Ht),ne("sgds-radio-group",se)});
+    `}}function ne(t,e){customElements.get(t)||customElements.define(t,e)}se.styles=[...Xt.styles,ie],t([Tt("slot:not([name])")],se.prototype,"defaultSlot",void 0),t([Vt()],se.prototype,"defaultValue",void 0),t([Ct({reflect:!0})],se.prototype,"value",void 0),t([Ct({type:String,reflect:!0})],se.prototype,"invalidFeedback",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"hasFeedback",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"required",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"noValidate",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"autofocus",void 0),t([jt("value",{waitUntilFirstUpdate:!0})],se.prototype,"_handleValueChange",null),t([jt("invalid",{waitUntilFirstUpdate:!0})],se.prototype,"_handleInvalidChange",null),t([Vt()],se.prototype,"_isTouched",void 0),t([(t,e)=>{const{slot:i,selector:s}=ee??{},n="slot"+(i?`[name=${i}]`:":not([name])");return Pt(t,e,{get(){const t=this.renderRoot?.querySelector(n),e=t?.assignedElements(ee)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}],se.prototype,"_radios",void 0),t([jt("_isTouched",{waitUntilFirstUpdate:!0})],se.prototype,"_handleIsTouched",null),t([jt("disabled",{waitUntilFirstUpdate:!0})],se.prototype,"_handleDisabledChange",null),ne("sgds-radio",Ht),ne("sgds-radio-group",se)});
 //# sourceMappingURL=index.umd.min.js.map