@govtechsg/sgds-web-component 3.0.6 → 3.1.0-rc.0

package/components/index.umd.js

@@ -10589,7 +10589,7 @@
       return ToBeValidatedElement;
   };
 
-  var css_248z$H = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
+  var css_248z$H = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);margin-bottom:var(--sgds-margin-3-xs);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
 
   /**
    * @summary Checkbox component is used when you require users to select multiple items from a list.
@@ -10606,14 +10606,14 @@
           super(...arguments);
           /** Draws the checkbox in a checked state. */
           this.checked = false;
-          /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-          this.hasFeedback = false;
           /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
           this.defaultChecked = false;
           /** Marks the checkbox input as indeterminate , with indeterminate logo  */
           this.indeterminate = false;
           /** Makes the checkbox a required field. */
           this.required = false;
+          /**Feedback text for error state when validated */
+          this.invalidFeedback = "";
           this._isTouched = false;
       }
       _handleInvalidChange() {
@@ -10638,7 +10638,6 @@
               this.indeterminate = !this.indeterminate;
           }
           this.checked = !this.checked;
-          this.value = this.input.value;
           super._mixinHandleChange(e);
           this.emit("sgds-change", { detail: { checked: this.checked, value: this.value } });
       }
@@ -10669,6 +10668,11 @@
               this.invalid = !this.input.checkValidity();
           }
       }
+      _handleChecked() {
+          this.checked
+              ? this.emit("sgds-check", { detail: { value: this.value } })
+              : this.emit("sgds-uncheck", { detail: { value: this.value } });
+      }
       _mixinResetFormControl() {
           this._isTouched = false;
           this.checked = this.input.checked = this.defaultChecked;
@@ -10700,14 +10704,20 @@
       get validationMessage() {
           return this._mixinGetValidationMessage();
       }
+      firstUpdated(_changedProperties) {
+          super.firstUpdated(_changedProperties);
+          this.checked && this.emit("sgds-check", { detail: { value: this.value } });
+      }
       render() {
+          const wantFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
+          const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
           return html$1 `
       <div class="form-check">
         <div class="form-check-input-container">
           <input
             class=${classMap({
             "form-check-input": true,
-            "is-invalid": this.hasFeedback && this.invalid
+            "is-invalid": wantFeedbackStyle && this.invalid
         })}
             type="checkbox"
             id=${this._controlId}
@@ -10729,6 +10739,23 @@
         </div>
         <label for="${this._controlId}" class="form-check-label" id="${this._labelId}"><slot></slot></label>
       </div>
+      ${wantFeedbackText && this.invalid
+            ? html$1 `
+            <div class="invalid-feedback-container">
+              <slot name="invalidIcon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path
+                    d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </slot>
+              <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">
+                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+              </div>
+            </div>
+          `
+            : nothing}
     `;
       }
   }
@@ -10740,7 +10767,7 @@
       property({ type: Boolean, reflect: true })
   ], SgdsCheckbox.prototype, "checked", void 0);
   __decorate([
-      property({ type: Boolean, reflect: true })
+      property({ type: String, reflect: true })
   ], SgdsCheckbox.prototype, "hasFeedback", void 0);
   __decorate([
       defaultValue("checked")
@@ -10751,6 +10778,9 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsCheckbox.prototype, "required", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsCheckbox.prototype, "invalidFeedback", void 0);
   __decorate([
       state()
   ], SgdsCheckbox.prototype, "_isTouched", void 0);
@@ -10763,8 +10793,11 @@
   __decorate([
       watch("_isTouched", { waitUntilFirstUpdate: true })
   ], SgdsCheckbox.prototype, "_handleIsTouched", null);
+  __decorate([
+      watch("checked", { waitUntilFirstUpdate: true })
+  ], SgdsCheckbox.prototype, "_handleChecked", null);
 
-  var css_248z$G = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}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)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
+  var css_248z$G = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}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)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.checkbox-group-validation-input{display:none}`;
 
   /**
    * @summary CheckboxGroup is the container that group multiple checkboxes under a single question field.
@@ -10774,10 +10807,9 @@
    * @slot invalidIcon - The slot for invalid icon
    *
    */
-  class SgdsCheckboxGroup extends SgdsElement {
+  class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {
       constructor() {
-          super();
-          this.hasInvalidCheckbox = false;
+          super(...arguments);
           /** The checkbox group's label  */
           this.label = "";
           /**Feedback text for error state when validated */
@@ -10786,27 +10818,126 @@
           this.hasFeedback = false;
           /** The checkbox group's hint text */
           this.hintText = "";
-          this.addEventListener("sgds-validity-change", (e) => {
-              this.hasInvalidCheckbox = e.detail.invalid;
-              this.validationMessage = e.detail.validationMessage;
-          });
-      }
-      _checkInvalidState() {
-          this.hasInvalidCheckbox = Array.from(this.checkboxes).some(checkbox => checkbox.invalid);
+          /** Makes the checkbox group a required field. Only available for when multiselect is true */
+          this.required = false;
+          /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */
+          this.value = "";
+          this._isTouched = false;
+          /**@internal */
+          this.defaultValue = "";
       }
-      /** Overrides hasFeedback from individual SgdsCheckbox  */
-      _forwardHasFeedback() {
-          Array.from(this.checkboxes).forEach(checkbox => (checkbox.hasFeedback = this.hasFeedback));
+      connectedCallback() {
+          super.connectedCallback();
+          this.defaultValue = this.value;
+          this.addEventListener("sgds-check", (e) => {
+              const { value } = e.detail;
+              !this.value.includes(value) && this._addValue(value);
+          });
+          this.addEventListener("sgds-uncheck", (e) => {
+              const { value } = e.detail;
+              this._removeValue(value);
+          });
+          this.addEventListener("sgds-blur", () => {
+              this._isTouched = true;
+          });
       }
       _renderHintText() {
           const hintTextTemplate = html$1 ` <div class="form-text">${this.hintText}</div> `;
           return this.hintText && hintTextTemplate;
       }
-      firstUpdated() {
-          this._forwardHasFeedback();
+      _addValue(newValue) {
+          const valueArray = this.value ? this.value.split(";") : [];
+          valueArray.push(newValue);
+          this.value = valueArray.join(";");
+      }
+      _removeValue(oldValue) {
+          const valueArray = this.value ? this.value.split(";") : [];
+          const newValueArray = valueArray.filter(v => v !== oldValue);
+          this.value = newValueArray.join(";");
+      }
+      _sanitizeSlot() {
+          const checkboxes = this._checkboxes;
+          checkboxes.forEach(checkbox => {
+              checkbox.checked = this.value.includes(checkbox.value);
+              checkbox.hasFeedback = this.hasFeedback ? "style" : null;
+              if (checkbox.required) {
+                  console.error("Checkboxes in a group cannot have required or hasFeedback prop set to true");
+                  checkbox.remove();
+              }
+          });
+          this._disabledChildCheckboxes();
       }
-      updated() {
-          this._checkInvalidState();
+      _disabledChildCheckboxes() {
+          if (this.disabled) {
+              const checkboxes = this._checkboxes;
+              checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));
+          }
+      }
+      _handleValueChange() {
+          const checkboxes = this._checkboxes;
+          checkboxes.forEach(checkbox => {
+              checkbox.checked = this.value.includes(checkbox.value);
+          });
+          this._updateInputValue();
+          this._updateInvalid();
+      }
+      _handleIsTouched() {
+          if (this._isTouched) {
+              this.invalid = !this.input.checkValidity();
+              this._updateInvalid();
+          }
+      }
+      _updateInvalid() {
+          const checkboxes = this._checkboxes;
+          checkboxes.forEach(ch => (ch.invalid = this.invalid));
+      }
+      /**
+       * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+       * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+       */
+      reportValidity() {
+          return this._mixinReportValidity();
+      }
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
+      }
+      /**
+       * radio requries a custom _mixinResetFormControl as the update of input value
+       * requires to fire a reset event manually
+       * */
+      _mixinResetFormControl() {
+          this.value = this.input.value = this.defaultValue;
+          this._updateInputValue("reset");
+          this._mixinResetValidity(this.input);
+      }
+      /**
+       * when input value is set programatically, need to manually dispatch a change event
+       * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input
+       */
+      _updateInputValue(eventName = "change") {
+          this.input.value = this.value;
+          this.input.dispatchEvent(new InputEvent(eventName));
+      }
+      firstUpdated(changedProperties) {
+          super.firstUpdated(changedProperties);
+          if (this.value) {
+              this._updateInputValue();
+          }
       }
       render() {
           return html$1 `
@@ -10816,9 +10947,21 @@
           ${this._renderHintText()}
         </div>
         <div class="checkbox-container">
-          <slot></slot>
+          <slot @slotchange=${this._sanitizeSlot}></slot>
         </div>
-        ${this.hasInvalidCheckbox && this.hasFeedback
+        <input
+          type="text"
+          class="checkbox-group-validation-input ${classMap({
+            "is-invalid": this.hasFeedback && this.invalid
+        })}"
+          ?required=${this.required}
+          tabindex="-1"
+          @change=${(e) => {
+            super._mixinHandleChange(e);
+        }}
+          .value=${live(this.value)}
+        />
+        ${this.invalid && this.hasFeedback
             ? html$1 `
               <div class="invalid-feedback-container">
                 <slot name="invalidIcon">
@@ -10844,11 +10987,8 @@
       queryAssignedElements({ flatten: true })
   ], SgdsCheckboxGroup.prototype, "checkboxes", void 0);
   __decorate([
-      state()
-  ], SgdsCheckboxGroup.prototype, "hasInvalidCheckbox", void 0);
-  __decorate([
-      state()
-  ], SgdsCheckboxGroup.prototype, "validationMessage", void 0);
+      queryAsync("slot")
+  ], SgdsCheckboxGroup.prototype, "checkboxesAsync", void 0);
   __decorate([
       property({ reflect: true })
   ], SgdsCheckboxGroup.prototype, "label", void 0);
@@ -10861,6 +11001,30 @@
   __decorate([
       property({ reflect: true })
   ], SgdsCheckboxGroup.prototype, "hintText", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], SgdsCheckboxGroup.prototype, "required", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsCheckboxGroup.prototype, "value", void 0);
+  __decorate([
+      state()
+  ], SgdsCheckboxGroup.prototype, "_isTouched", void 0);
+  __decorate([
+      state()
+  ], SgdsCheckboxGroup.prototype, "defaultValue", void 0);
+  __decorate([
+      queryAssignedElements()
+  ], SgdsCheckboxGroup.prototype, "_checkboxes", void 0);
+  __decorate([
+      watch("value", { waitUntilFirstUpdate: true })
+  ], SgdsCheckboxGroup.prototype, "_handleValueChange", null);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsCheckboxGroup.prototype, "_handleIsTouched", null);
+  __decorate([
+      watch("invalid", { waitUntilFirstUpdate: true })
+  ], SgdsCheckboxGroup.prototype, "_updateInvalid", null);
 
   var css_248z$F = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;