@govtechsg/sgds-web-component 1.1.0-rc.0 → 1.1.0

package/components/Input/index.umd.js

@@ -3467,7 +3467,9 @@
   class FormSubmitController {
       constructor(host, options) {
           (this.host = host).addController(this);
-          this.options = Object.assign({ form: (input) => input.closest("form"), name: (input) => input.name, value: (input) => input.value, defaultValue: (input) => input.defaultValue, disabled: (input) => input.disabled, reportValidity: (input) => {
+          this.options = Object.assign({ form: (input) => {
+                  return input.closest("form");
+              }, name: (input) => input.name, value: (input) => input.value, defaultValue: (input) => input.defaultValue, disabled: (input) => input.disabled, reportValidity: (input) => {
                   return typeof input.reportValidity === "function" ? input.reportValidity() : true;
               }, setValue: (input, value) => {
                   input.value = value;
@@ -3689,20 +3691,23 @@
       reportValidity() {
           return this.input.reportValidity();
       }
-      handleInvalid() {
-          this.invalid = true;
+      setCustomValidity(err) {
+          return this.input.setCustomValidity(err);
       }
-      handleChange(event) {
+      setInvalid(bool) {
+          this.invalid = bool;
+      }
+      _handleChange(event) {
           this.value = this.input.value;
           this.emit(event);
       }
-      handleFocus() {
+      _handleFocus() {
           this.emit("sgds-focus");
       }
-      handleBlur() {
+      _handleBlur() {
           this.emit("sgds-blur");
       }
-      handleKeyDown(event) {
+      _handleKeyDown(event) {
           const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
           // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
           // submitting to allow users to cancel the keydown event if they need to
@@ -3715,12 +3720,12 @@
               });
           }
       }
-      handleDisabledChange() {
+      _handleDisabledChange() {
           // Disabled form controls are always valid, so we need to recheck validity when the state changes
           this.input.disabled = this.disabled;
           this.invalid = !this.input.checkValidity();
       }
-      handleValueChange() {
+      _handleValueChange() {
           this.invalid = !this.input.checkValidity();
           this.valid = this.input.checkValidity();
           // remove validation for input that is not required, is already dirty and has empty value
@@ -3728,9 +3733,8 @@
               this.valid = false;
           }
       }
-      render() {
-          const input = html `
-      <input
+      _renderInput() {
+          return html `<input
         class=${classMap({
             "form-control": true,
             "is-invalid": this.hasFeedback && this.invalid,
@@ -3750,17 +3754,34 @@
         .value=${live(this.value)}
         minlength=${ifDefined(this.minlength)}
         maxlength=${ifDefined(this.maxlength)}
-        @input=${() => this.handleChange("sgds-input")}
-        @change=${() => this.handleChange("sgds-change")}
-        @keydown=${this.handleKeyDown}
-        @invalid=${this.handleInvalid}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
+        @input=${() => this._handleChange("sgds-input")}
+        @change=${() => this._handleChange("sgds-change")}
+        @keydown=${this._handleKeyDown}
+        @invalid=${() => this.setInvalid(true)}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
       />
       ${this.hasFeedback
             ? html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
-            : ""}
+            : ""} `;
+      }
+      _renderFeedback() {
+          return this.hasFeedback
+              ? html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
+              : "";
+      }
+      _renderLabel() {
+          const labelTemplate = html ` <label for=${this.inputId} class="form-label">${this.label}</label> `;
+          return this.label && labelTemplate;
+      }
+      _renderHintText() {
+          const hintTextTemplate = html `
+      <small id="${this.inputId}Help" class="text-muted form-text">${this.hintText}</small>
     `;
+          return this.hintText && hintTextTemplate;
+      }
+      render() {
+          const input = html `${this._renderInput()}`;
           // if iconName is defined
           const inputWithIcon = html `
       <div class="sgds form-control-group ${this.inputClasses}">
@@ -3769,12 +3790,9 @@
       </div>
     `;
           // if hintText is defined
-          const withHintText = html ` <small id="${this.inputId}Help" class="text-muted form-text">${this.hintText}</small> `;
-          // if label is defined
-          const withLabel = html ` <label for=${this.inputId} class="form-label">${this.label}</label> `;
           return html `
       <div class="d-flex flex-column w-100">
-        ${html `${this.label && withLabel} ${this.hintText && withHintText} ${this.icon ? inputWithIcon : input} `}
+        ${html `${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}
       </div>
     `;
       }
@@ -3845,10 +3863,10 @@
   ], SgdsInput.prototype, "valid", void 0);
   __decorate([
       watch("disabled", { waitUntilFirstUpdate: true })
-  ], SgdsInput.prototype, "handleDisabledChange", null);
+  ], SgdsInput.prototype, "_handleDisabledChange", null);
   __decorate([
       watch("value", { waitUntilFirstUpdate: true })
-  ], SgdsInput.prototype, "handleValueChange", null);
+  ], SgdsInput.prototype, "_handleValueChange", null);
 
   customElements.define("sgds-input", SgdsInput);