@govtechsg/sgds-web-component 2.1.0 → 2.1.2

package/components/QuantityToggle/quantity-toggle.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`sgds-input{--sgds-border-radius:0}sgds-button:first-of-type{--btn-border-radius:var(--sgds-border-radius) 0 0 var(--sgds-border-radius)}sgds-button:last-of-type{--btn-border-radius:0 var(--sgds-border-radius) var(--sgds-border-radius) 0}.input-group{align-items:stretch;display:flex;flex-wrap:wrap;position:relative}.input-group>sgds-input{flex:1 1 auto;min-width:0;position:relative}.input-group sgds-button:focus,.input-group>sgds-input:focus{z-index:3}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;

package/components/QuantityToggle/quantity-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"quantity-toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"quantity-toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/QuantityToggle/sgds-quantity-toggle.js

@@ -1,4 +1,3 @@
-'use client';
 import { __decorate } from 'tslib';
 import { query, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';

package/components/QuantityToggle/sgds-quantity-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-quantity-toggle.js","sources":["../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport SgdsButton, { ButtonVariant } from \"../Button/sgds-button\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @csspart base - The base wrapper of the quantity toggle component.\n * @csspart button - The plus and minus button of quantity toggle\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends ScopedElementsMixin(SgdsElement) implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, svgStyles, quantityToggleStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton,\n      \"sgds-input\": SgdsInput\n    };\n  }\n  /**@internal */\n  @query(\"sgds-input\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n\n  /** The name of the input */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The input's minimum value. */\n  @property({ type: Number, reflect: true }) min: number;\n  /** The input's maximum value. */\n  @property({ type: Number, reflect: true }) max: number;\n\n  /**Controls the size of the quantity toggle */\n  @property() size: \"sm\" | \"md\" = \"md\";\n\n  /**The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** Disables the entire quantity toggle  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The quantity toggle's button variants */\n  @property({ type: String }) buttonVariant: ButtonVariant = \"primary\";\n\n  /**\n   * Controls the incremental / decremental value of the input\n   */\n  @property({ type: Number }) step = 1;\n\n  /** 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. */\n  @defaultValue()\n  defaultValue = 0;\n\n  /** @internal The id forwarded to input element */\n  private inputId: string = genId(\"quantity-toggle\", \"input\");\n\n  private _handleChange() {\n    if (parseInt(this.input.value) < this.step || this.input.value === \"\") {\n      this.input.value = \"0\";\n    }\n    this.value = parseInt(this.input.value);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private _onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  private _onMinus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.value < this.step) {\n      this.value = 0;\n    } else {\n      this.value = parseInt(this.input.value) - parseInt(this.input.step);\n    }\n  }\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          sgds: true,\n          disabled: this.disabled,\n          \"input-group\": true,\n          [`input-group-${this.size}`]: this.size\n        })}\"\n        variant=\"quantity-toggle\"\n        size=${this.size}\n      >\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`decrease by ${this.step}`}\n          part=\"button\"\n          @click=${this._onMinus}\n          ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-dash\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z\" />\n          </svg>\n        </sgds-button>\n        <sgds-input\n          type=\"number\"\n          class=\"quantity-toggle\"\n          name=${ifDefined(this.name)}\n          step=${ifDefined(this.step)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${live(this.value.toString())}\n          @sgds-change=${() => this._handleChange()}\n          @sgds-input=${() => this._handleChange()}\n          @keydown=${this._handleKeyDown}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n        ></sgds-input>\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`increase by ${this.step}`}\n          part=\"button\"\n          @click=${this._onPlus}\n          ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-plus\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </sgds-button>\n      </div>\n      <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["svgStyles","quantityToggleStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-quantity-toggle.js","sources":["../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport SgdsButton, { ButtonVariant } from \"../Button/sgds-button\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @csspart base - The base wrapper of the quantity toggle component.\n * @csspart button - The plus and minus button of quantity toggle\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends ScopedElementsMixin(SgdsElement) implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, svgStyles, quantityToggleStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton,\n      \"sgds-input\": SgdsInput\n    };\n  }\n  /**@internal */\n  @query(\"sgds-input\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n\n  /** The name of the input */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The input's minimum value. */\n  @property({ type: Number, reflect: true }) min: number;\n  /** The input's maximum value. */\n  @property({ type: Number, reflect: true }) max: number;\n\n  /**Controls the size of the quantity toggle */\n  @property() size: \"sm\" | \"md\" = \"md\";\n\n  /**The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** Disables the entire quantity toggle  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The quantity toggle's button variants */\n  @property({ type: String }) buttonVariant: ButtonVariant = \"primary\";\n\n  /**\n   * Controls the incremental / decremental value of the input\n   */\n  @property({ type: Number }) step = 1;\n\n  /** 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. */\n  @defaultValue()\n  defaultValue = 0;\n\n  /** @internal The id forwarded to input element */\n  private inputId: string = genId(\"quantity-toggle\", \"input\");\n\n  private _handleChange() {\n    if (parseInt(this.input.value) < this.step || this.input.value === \"\") {\n      this.input.value = \"0\";\n    }\n    this.value = parseInt(this.input.value);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private _onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  private _onMinus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.value < this.step) {\n      this.value = 0;\n    } else {\n      this.value = parseInt(this.input.value) - parseInt(this.input.step);\n    }\n  }\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          sgds: true,\n          disabled: this.disabled,\n          \"input-group\": true,\n          [`input-group-${this.size}`]: this.size\n        })}\"\n        variant=\"quantity-toggle\"\n        size=${this.size}\n      >\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`decrease by ${this.step}`}\n          part=\"button\"\n          @click=${this._onMinus}\n          ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-dash\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z\" />\n          </svg>\n        </sgds-button>\n        <sgds-input\n          type=\"number\"\n          class=\"quantity-toggle\"\n          name=${ifDefined(this.name)}\n          step=${ifDefined(this.step)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${live(this.value.toString())}\n          @sgds-change=${() => this._handleChange()}\n          @sgds-input=${() => this._handleChange()}\n          @keydown=${this._handleKeyDown}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n        ></sgds-input>\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`increase by ${this.step}`}\n          part=\"button\"\n          @click=${this._onPlus}\n          ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-plus\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </sgds-button>\n      </div>\n      <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["svgStyles","quantityToggleStyle"],"mappings":"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"}

package/components/Radio/index.umd.js

@@ -3325,7 +3325,7 @@
       };
   }
 
-  var css_248z$3 = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:block;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:checked[type=radio],.form-check-input[checked][type=radio]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")}.form-check-input:disabled{border-color:var(--sgds-form-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid,.form-check-input:invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked,.form-check-input:invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus,.form-check-input:invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label,.form-check-input:invalid~.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right)}:host([last-of-type]) .form-check{margin-bottom:0}`;
+  var css_248z$3 = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:flex;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:checked[type=radio],.form-check-input[checked][type=radio]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")}.form-check-input:disabled{border-color:var(--sgds-form-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid,.form-check-input:invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked,.form-check-input:invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus,.form-check-input:invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label,.form-check-input:invalid~.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right)}:host([last-of-type]) .form-check{margin-bottom:0}`;
 
   var css_248z$2 = css`.form-label{color:var(--sgds-form-label-color);font-weight:var(--sgds-form-label-font-weight);margin-bottom:0}.form-label.required:after{color:var(--sgds-danger);content:"*"}.form-check-label{color:var(--sgds-form-label-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed;opacity:var(--sgds-disabled-opacity)}`;
 
@@ -3585,7 +3585,7 @@
 
   var css_248z$1 = css`fieldset{border:0;display:flex;flex-direction:column;gap:var(--sgds-spacer-2);margin:0;min-width:0;padding:0}.radio-group-validation-input{display:none}`;
 
-  var css_248z = css`.invalid-feedback{color:var(--sgds-form-invalid-color);display:none;font-size:var(--sgds-form-feedback-font-size);width:100%}.is-invalid~.invalid-feedback,.was-validated :invalid~.invalid-feedback{display:block}`;
+  var css_248z = css`.invalid-feedback{color:var(--sgds-form-invalid-color);font-size:var(--sgds-form-feedback-font-size);width:100%}`;
 
   /**
    * @summary RadioGroup group multiple radios so they function as a single form control.
@@ -3770,7 +3770,7 @@
           tabindex="-1"
           @invalid=${(e) => this._handleInvalid(e)}
         />
-        ${this.hasFeedback ? html `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
+        ${this.hasFeedback && this.invalid ? html `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
       </fieldset>
     `;
       }