@govtechsg/sgds-web-component 3.21.0 → 3.21.1

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

@@ -2300,7 +2300,7 @@ class extends Le{constructor(e){if(super(e),e.type!==Se&&e.type!==Be&&e.type!==k
       clip-rule="evenodd"
     />
   </svg>
-`};var Ct,Mt,yt=r`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class bt extends Ge{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=xt[e];if(t)return t;console.warn(`Icon not found: ${e}`)}updated(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("svg");t&&(this.ariaLabel?(t.removeAttribute("aria-hidden"),t.setAttribute("aria-label",this.ariaLabel)):(t.removeAttribute("aria-label"),t.setAttribute("aria-hidden","true")))}render(){const e=this._getIconByName(this.name);return e||le}}bt.styles=[...Ge.styles,yt],e([Ve({type:String,reflect:!0})],bt.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],bt.prototype,"size",void 0),e([Ve({type:String})],bt.prototype,"ariaLabel",void 0);class _t extends(Qe(Ye)){constructor(){super(...arguments),this.type="text",this.placeholder="placeholder",this.autofocus=!1,this.readonly=!1,this.defaultValue="",this.valid=!1,this.loading=!1,this.required=!1,this.noValidate=!1,this.value="",this._isTouched=!1,this._showPassword=!1}focus(e){this.input.focus(e)}blur(){this.input.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setValidity(e,t,l){return this._mixinSetValidity(e,t,l)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleFocus(){this.emit("sgds-focus")}_handleBlur(){const e=this.emit("sgds-blur",{cancelable:!0});this._mixinShouldSkipSgdsValidation()||e.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleClick(){this.focus()}_handleChange(e){this.value=this.input.value;this.emit("sgds-change",{cancelable:!0}).defaultPrevented||super._mixinHandleChange(e)}_handleInputChange(e){this.value=this.input.value;this.emit("sgds-input",{cancelable:!0}).defaultPrevented||super._mixinHandleInputChange(e)}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}_renderInput(){const e="both"===this.hasFeedback||"style"===this.hasFeedback;return Oe`
+`};var Ct,Mt,yt=r`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class bt extends Ge{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=xt[e];if(t)return t;console.warn(`Icon not found: ${e}`)}updated(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("svg");t&&(this.ariaLabel?(t.removeAttribute("aria-hidden"),t.setAttribute("aria-label",this.ariaLabel)):(t.removeAttribute("aria-label"),t.setAttribute("aria-hidden","true")))}render(){const e=this._getIconByName(this.name);return e||le}}bt.styles=[...Ge.styles,yt],e([Ve({type:String,reflect:!0})],bt.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],bt.prototype,"size",void 0),e([Ve({type:String})],bt.prototype,"ariaLabel",void 0);class _t extends(Qe(Ye)){constructor(){super(...arguments),this.type="text",this.placeholder="placeholder",this.autofocus=!1,this.readonly=!1,this.defaultValue="",this.valid=!1,this.loading=!1,this.required=!1,this.noValidate=!1,this.value="",this._isTouched=!1,this._showPassword=!1}focus(e){this.input.focus(e)}blur(){this.input.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setValidity(e,t,l){return this._mixinSetValidity(e,t,l)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleFocus(){this.emit("sgds-focus")}_handleBlur(){const e=this.emit("sgds-blur",{cancelable:!0});this._mixinShouldSkipSgdsValidation()||e.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleClick(){this.focus()}_handleChange(e){this.value=this.input.value;this.emit("sgds-change",{cancelable:!0}).defaultPrevented||super._mixinHandleChange(e)}_handleInputChange(e){this.value=this.input.value;this.emit("sgds-input",{cancelable:!0}).defaultPrevented||super._mixinHandleInputChange(e)}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}_renderInput(){const e="both"===this.hasFeedback||"style"===this.hasFeedback,t="both"===this.hasFeedback||"text"===this.hasFeedback,l=[this.hintText?`${this._controlId}Help`:"",this.invalid&&t?`${this._controlId}-invalid`:""].filter(Boolean).join(" ")||void 0;return Oe`
       <div
         class="form-control-group ${Pe({disabled:this.disabled,readonly:this.readonly,"is-invalid":this.invalid&&e})}"
         @click=${this._handleClick}
@@ -2330,8 +2330,7 @@ class extends Le{constructor(e){if(super(e),e.type!==Se&&e.type!==Be&&e.type!==k
           @invalid=${()=>this.setInvalid(!0)}
           @focus=${this._handleFocus}
           @blur=${this._handleBlur}
-          aria-describedby=${Te(this.invalid&&this.hasFeedback?`${this._controlId}-invalid`:void 0)}
-          aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid&&this.hasFeedback?`${this._controlId}-invalid`:""}"
+          aria-describedby=${Te(l)}
         />
         ${"password"===this.type?this._renderPasswordToggle():le}
         ${this.suffix?Oe`<span class="form-control-suffix">${this.suffix}</span>`:le}