@govtechsg/sgds-web-component 3.2.0 → 3.3.0

package/components/Dropdown/dropdown-item.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
+var css_248z = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=dropdown-item.js.map

package/components/Dropdown/index.umd.js

@@ -11023,7 +11023,7 @@
       property({ type: String, reflect: true })
   ], SgdsIcon.prototype, "size", void 0);
 
-  var css_248z = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
+  var css_248z = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
 
   /**
    * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`

package/components/IconList/icon-list.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
+var css_248z = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:flex-start;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=icon-list.js.map

package/components/IconList/index.umd.js

@@ -4268,7 +4268,7 @@
   /** @internal */
   SgdsElement.dependencies = {};
 
-  var css_248z = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
+  var css_248z = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:flex-start;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
 
   /**
    * @summary A IconList can be used to display content related to the same topic. Each list item begins an icon.

package/components/Input/index.umd.js

@@ -4975,7 +4975,7 @@
       property({ reflect: true, type: String })
   ], SgdsSpinner.prototype, "label", void 0);
 
-  var css_248z$1 = 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$1 = 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)}`;
 
   var Archive = html$1 `
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -7463,7 +7463,8 @@
    * @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.
@@ -7493,6 +7494,7 @@
           /**The input's value attribute. */
           this.value = "";
           this._isTouched = false;
+          this._showPassword = false;
       }
       /** Sets focus on the input. */
       focus(options) {
@@ -7585,7 +7587,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)}
@@ -7611,12 +7613,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
@@ -7653,7 +7672,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>
     `;
       }
@@ -7724,6 +7748,9 @@
   __decorate([
       state()
   ], SgdsInput.prototype, "_isTouched", void 0);
+  __decorate([
+      state()
+  ], SgdsInput.prototype, "_showPassword", void 0);
   __decorate([
       watch("_isTouched", { waitUntilFirstUpdate: true })
   ], SgdsInput.prototype, "_handleIsTouched", null);