@govtechsg/sgds-web-component 3.2.0 → 3.3.0

package/components/Datepicker/index.umd.js

@@ -21616,13 +21616,14 @@
       property({ reflect: true, type: String })
   ], SgdsSpinner.prototype, "label", void 0);
 
-  var css_248z$2 = css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}`;
+  var css_248z$2 = css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:none}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
 
   /**
    * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
    *
    * @slot icon - The slot for leading icon of text input
-   *
+   * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true
+   * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot
    * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
    * @event sgds-input - Emitted when the control receives input and its value changes.
    * @event sgds-focus - Emitted when input is in focus.
@@ -21652,6 +21653,7 @@
           /**The input's value attribute. */
           this.value = "";
           this._isTouched = false;
+          this._showPassword = false;
       }
       /** Sets focus on the input. */
       focus(options) {
@@ -21744,7 +21746,7 @@
         ${this.prefix ? html `<span class="form-control-prefix">${this.prefix}</span>` : nothing}
         <input
           class="form-control"
-          type=${this.type}
+          type=${this._inputType()}
           id=${this._controlId}
           name=${ifDefined(this.name)}
           placeholder=${ifDefined(this.placeholder)}
@@ -21770,12 +21772,29 @@
             ? `${this._controlId}-invalid`
             : ""}"
         />
-        ${this.loading ? html `<sgds-spinner size="sm"></sgds-spinner>` : nothing}
-        ${this.valid ? html `<sgds-icon name="check-circle-fill" class="valid-icon"></sgds-icon>` : nothing}
+        ${this.type === "password" ? this._renderPasswordToggle() : nothing}
         ${this.suffix ? html `<span class="form-control-suffix">${this.suffix}</span>` : nothing}
+        <slot name="trailing-icon">
+          ${this.loading ? html `<sgds-spinner size="sm"></sgds-spinner>` : nothing}
+          ${this.valid ? html `<sgds-icon name="check-circle-fill" class="valid-icon"></sgds-icon>` : nothing}
+        </slot>
       </div>
     `;
       }
+      _renderPasswordToggle() {
+          return html `<sgds-icon
+      tabIndex="0"
+      role="button"
+      name=${this._showPassword ? "eye-slash-fill" : "eye-fill"}
+      @click=${() => (this._showPassword = !this._showPassword)}
+    ></sgds-icon>`;
+      }
+      _inputType() {
+          if (this.type === "password" && this._showPassword) {
+              return "text";
+          }
+          return this.type;
+      }
       _renderFeedback() {
           const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
           return this.invalid && wantFeedbackText
@@ -21812,7 +21831,12 @@
             disabled: this.disabled
         })}"
       >
-        ${this._renderLabel()} ${this._renderInput()} ${this._renderFeedback()}
+        ${this._renderLabel()}
+        <div class="form-control-row">
+          ${this._renderInput()}
+          <slot name="action"></slot>
+        </div>
+        ${this._renderFeedback()}
       </div>
     `;
       }
@@ -21883,6 +21907,9 @@
   __decorate([
       state()
   ], SgdsInput.prototype, "_isTouched", void 0);
+  __decorate([
+      state()
+  ], SgdsInput.prototype, "_showPassword", void 0);
   __decorate([
       watch("_isTouched", { waitUntilFirstUpdate: true })
   ], SgdsInput.prototype, "_handleIsTouched", null);
@@ -22049,7 +22076,17 @@
           this.required = false;
           /** When true, adds disabled attribute to input and button element */
           this.disabled = false;
-          /** The initial value of DatePicker on first load for single & range mode as array of string. eg.'["22/12/2023"]' for single & '["22/12/2023","25/12/2023"]' for range respectively  */
+          /** Sets the initial value of the datepicker. Replaces deprecated `initialValue`.
+           * Pass in dates in this format `dd/mm/yyyy` for single mode and  `dd/mm/yyyy - dd/mm/yyyy` for range mode
+           * For example, `value="22/12/2023"` for single mode or `value="22/12/2023 - 25/12/2023"` for range mode
+           */
+          this.value = "";
+          /**
+           * @deprecated since v3.1.1 in favour of `value`.
+           * The initial value of DatePicker on first load for single &
+           * range mode as array of string. eg.'["22/12/2023"]' for single &
+           * '["22/12/2023","25/12/2023"]' for range respectively
+           * */
           this.initialValue = [];
           this.dateFormat = "DD/MM/YYYY";
           /** ISO date string to set the lowest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
@@ -22068,8 +22105,8 @@
           this.noFlip = false;
           /** The drop position of menu relative to the toggle button */
           this.drop = "down";
-          /**@internal */
-          this.value = "";
+          /**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.defaultValue = "";
           /**@internal */
           this.invalid = false;
           this.view = "days";
@@ -22155,6 +22192,7 @@
           this.addEventListener("sgds-hide", this._handleCloseMenu);
           this.addEventListener("sgds-show", this._handleOpenMenu);
           this.addEventListener("blur", this._mixinCheckValidity);
+          this.initialValue = this.value ? this.value.split(" - ").map(v => v.trim()) : this.initialValue;
           this.initialDisplayDate = this.displayDate || new Date();
           if (this.initialValue && this.initialValue.length > 0) {
               // Validate initialValue against the dateFormat regex
@@ -22281,19 +22319,22 @@
           this._manageInternalsBadInput();
       }
       async _handleEmptyInput() {
-          this._manageEmptyInput();
+          if (this.required) {
+              this._manageEmptyInput();
+          }
+          return;
       }
-      async _resetDatepicker() {
+      async _resetDatepicker(resetValue = "") {
           this.displayDate = this.initialDisplayDate;
           this.selectedDateRange = [];
-          this.value = "";
+          this.value = resetValue;
           this.view = "days";
           const input = await this.datepickerInputAsync;
           input.setInvalid(false);
           input.destroyInputMask();
           await input.applyInputMask();
           this._mixinResetValidity(input);
-          if (this.isValueEmpty() && this.required) {
+          if (this.isValueEmpty()) {
               this._handleEmptyInput();
           }
       }
@@ -22327,7 +22368,7 @@
        * Handles the form "reset" event
        */
       async _mixinResetFormControl() {
-          this._resetDatepicker();
+          this._resetDatepicker(this.defaultValue);
       }
       async _handleInputMaskChange(e) {
           this.value = e.detail;
@@ -22421,6 +22462,9 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsDatepicker.prototype, "disabled", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsDatepicker.prototype, "value", void 0);
   __decorate([
       property({ type: Array, reflect: true })
   ], SgdsDatepicker.prototype, "initialValue", void 0);
@@ -22455,8 +22499,8 @@
       property({ attribute: false })
   ], SgdsDatepicker.prototype, "displayDate", void 0);
   __decorate([
-      state()
-  ], SgdsDatepicker.prototype, "value", void 0);
+      defaultValue()
+  ], SgdsDatepicker.prototype, "defaultValue", void 0);
   __decorate([
       state()
   ], SgdsDatepicker.prototype, "invalid", void 0);
@@ -22482,7 +22526,7 @@
       query("sgds-datepicker-input")
   ], SgdsDatepicker.prototype, "datepickerInput", void 0);
   __decorate([
-      watch("value")
+      watch("value", { waitUntilFirstUpdate: true })
   ], SgdsDatepicker.prototype, "_handleValueChange", null);
 
   /**