@govtechsg/sgds-web-component 1.1.0 → 1.2.1

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

@@ -47,9 +47,26 @@ class SgdsQuantityToggle extends sgdsElement["default"] {
         this.inputId = generateId["default"]("quantity-toggle", "input");
     }
     handleChange(event) {
+        if (parseInt(this.input.value) < this.step || this.input.value === "") {
+            this.input.value = "0";
+        }
         this.value = parseInt(this.input.value);
         this.emit(event);
     }
+    handleKeyDown(event) {
+        const allowedKeys = [
+            "Backspace",
+            "ArrowUp",
+            "ArrowDown",
+            "ArrowLeft",
+            "ArrowRight",
+            ...Array.from(Array(10).keys()).map(key => key.toString())
+        ];
+        // Allow keydown event only if the pressed key is in the allowedKeys array
+        if (!allowedKeys.includes(event.key)) {
+            event.preventDefault();
+        }
+    }
     /** Simulates a click on the plus button */
     plus() {
         this.plusBtn.click();
@@ -95,7 +112,7 @@ class SgdsQuantityToggle extends sgdsElement["default"] {
             [`btn-${this.buttonVariant}`]: this.buttonVariant
         })}
           @click=${this.onMinus}
-          ?disabled=${this.disabled}
+          ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -118,6 +135,7 @@ class SgdsQuantityToggle extends sgdsElement["default"] {
           .value=${live_js.live(this.value.toString())}
           @change=${() => this.handleChange("sgds-change")}
           @input=${() => this.handleChange("sgds-input")}
+          @keydown=${this.handleKeyDown}
           ?disabled=${this.disabled}
           id=${this.inputId}
           aria-label="quantity"
@@ -131,7 +149,7 @@ class SgdsQuantityToggle extends sgdsElement["default"] {
             [`btn-${this.buttonVariant}`]: this.buttonVariant
         })}
           @click=${this.onPlus}
-          ?disabled=${this.disabled}
+          ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -146,8 +164,8 @@ class SgdsQuantityToggle extends sgdsElement["default"] {
             />
           </svg>
         </button>
-        <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
       </div>
+      <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
     `;
     }
 }
@@ -162,7 +180,7 @@ tslib.__decorate([
     decorators_js.query("button[aria-label^='decrease by']")
 ], SgdsQuantityToggle.prototype, "minusBtn", void 0);
 tslib.__decorate([
-    decorators_js.property({ reflect: true })
+    decorators_js.property({ type: String, reflect: true })
 ], SgdsQuantityToggle.prototype, "name", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Number, reflect: true })
@@ -174,16 +192,16 @@ tslib.__decorate([
     decorators_js.property()
 ], SgdsQuantityToggle.prototype, "size", void 0);
 tslib.__decorate([
-    decorators_js.property({ reflect: true, type: Number })
+    decorators_js.property({ type: Number, reflect: true })
 ], SgdsQuantityToggle.prototype, "value", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsQuantityToggle.prototype, "disabled", void 0);
 tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
+    decorators_js.property({ type: String })
 ], SgdsQuantityToggle.prototype, "buttonVariant", void 0);
 tslib.__decorate([
-    decorators_js.property({ type: Number, reflect: true })
+    decorators_js.property({ type: Number })
 ], SgdsQuantityToggle.prototype, "step", void 0);
 tslib.__decorate([
     defaultvalue.defaultValue()

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-quantity-toggle.cjs.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 { ButtonVariant } from \"../Button/sgds-button\";\nimport styles from \"./sgds-quantity-toggle.scss\";\n\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 SgdsElement implements SgdsFormControl {\n  /**@internal */\n  @query(\"input.form-control\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"button[aria-label^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"button[aria-label^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  static styles = [SgdsElement.styles, styles];\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n\n  /** The name of the input */\n  @property({ 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\" | \"lg\" = \"sm\";\n\n  /**The input's value. Set to 0 by default */\n  @property({ reflect: true, type: Number }) 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, reflect: true }) buttonVariant: ButtonVariant = \"primary\";\n\n  /**\n   * Controls the incremental / decremental value of the input\n   */\n  @property({ type: Number, reflect: true }) 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  handleChange(event: string) {\n    this.value = parseInt(this.input.value);\n    this.emit(event);\n  }\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  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        <button\n          aria-label=${`decrease by ${this.step}`}\n          part=\"button\"\n          class=${classMap({\n            sgds: true,\n            btn: true,\n            [`btn-${this.buttonVariant}`]: this.buttonVariant\n          })}\n          @click=${this.onMinus}\n          ?disabled=${this.disabled}\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        </button>\n        <input\n          type=\"number\"\n          class=\"form-control ${\"form-control-\" + this.size} text-center\"\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          @change=${() => this.handleChange(\"sgds-change\")}\n          @input=${() => this.handleChange(\"sgds-input\")}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n          aria-label=\"quantity\"\n        />\n        <button\n          aria-label=${`increase by ${this.step}`}\n          part=\"button\"\n          class=${classMap({\n            sgds: true,\n            btn: true,\n            [`btn-${this.buttonVariant}`]: this.buttonVariant\n          })}\n          @click=${this.onPlus}\n          ?disabled=${this.disabled}\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        </button>\n        <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","live","styles","__decorate","query","property","defaultValue"],"mappings":"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"}
+{"version":3,"file":"sgds-quantity-toggle.cjs.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 { ButtonVariant } from \"../Button/sgds-button\";\nimport styles from \"./sgds-quantity-toggle.scss\";\n\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 SgdsElement implements SgdsFormControl {\n  /**@internal */\n  @query(\"input.form-control\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"button[aria-label^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"button[aria-label^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  static styles = [SgdsElement.styles, styles];\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\" | \"lg\" = \"sm\";\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  handleChange(event: string) {\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    this.emit(event);\n  }\n\n  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    ];\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  onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  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        <button\n          aria-label=${`decrease by ${this.step}`}\n          part=\"button\"\n          class=${classMap({\n            sgds: true,\n            btn: true,\n            [`btn-${this.buttonVariant}`]: this.buttonVariant\n          })}\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        </button>\n        <input\n          type=\"number\"\n          class=\"form-control ${\"form-control-\" + this.size} text-center\"\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          @change=${() => this.handleChange(\"sgds-change\")}\n          @input=${() => this.handleChange(\"sgds-input\")}\n          @keydown=${this.handleKeyDown}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n          aria-label=\"quantity\"\n        />\n        <button\n          aria-label=${`increase by ${this.step}`}\n          part=\"button\"\n          class=${classMap({\n            sgds: true,\n            btn: true,\n            [`btn-${this.buttonVariant}`]: this.buttonVariant\n          })}\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        </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":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","live","styles","__decorate","query","property","defaultValue"],"mappings":"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"}

package/components/QuantityToggle/sgds-quantity-toggle.d.ts

@@ -44,6 +44,7 @@ export declare class SgdsQuantityToggle extends SgdsElement implements SgdsFormC
     /** @internal The id forwarded to input element */
     private inputId;
     handleChange(event: string): void;
+    handleKeyDown(event: KeyboardEvent): void;
     /** Simulates a click on the plus button */
     plus(): void;
     /** Simulates a click on the minus button */

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

@@ -43,9 +43,26 @@ class SgdsQuantityToggle extends SgdsElement {
         this.inputId = genId("quantity-toggle", "input");
     }
     handleChange(event) {
+        if (parseInt(this.input.value) < this.step || this.input.value === "") {
+            this.input.value = "0";
+        }
         this.value = parseInt(this.input.value);
         this.emit(event);
     }
+    handleKeyDown(event) {
+        const allowedKeys = [
+            "Backspace",
+            "ArrowUp",
+            "ArrowDown",
+            "ArrowLeft",
+            "ArrowRight",
+            ...Array.from(Array(10).keys()).map(key => key.toString())
+        ];
+        // Allow keydown event only if the pressed key is in the allowedKeys array
+        if (!allowedKeys.includes(event.key)) {
+            event.preventDefault();
+        }
+    }
     /** Simulates a click on the plus button */
     plus() {
         this.plusBtn.click();
@@ -91,7 +108,7 @@ class SgdsQuantityToggle extends SgdsElement {
             [`btn-${this.buttonVariant}`]: this.buttonVariant
         })}
           @click=${this.onMinus}
-          ?disabled=${this.disabled}
+          ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -114,6 +131,7 @@ class SgdsQuantityToggle extends SgdsElement {
           .value=${live(this.value.toString())}
           @change=${() => this.handleChange("sgds-change")}
           @input=${() => this.handleChange("sgds-input")}
+          @keydown=${this.handleKeyDown}
           ?disabled=${this.disabled}
           id=${this.inputId}
           aria-label="quantity"
@@ -127,7 +145,7 @@ class SgdsQuantityToggle extends SgdsElement {
             [`btn-${this.buttonVariant}`]: this.buttonVariant
         })}
           @click=${this.onPlus}
-          ?disabled=${this.disabled}
+          ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -142,8 +160,8 @@ class SgdsQuantityToggle extends SgdsElement {
             />
           </svg>
         </button>
-        <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
       </div>
+      <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
     `;
     }
 }
@@ -158,7 +176,7 @@ __decorate([
     query("button[aria-label^='decrease by']")
 ], SgdsQuantityToggle.prototype, "minusBtn", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ type: String, reflect: true })
 ], SgdsQuantityToggle.prototype, "name", void 0);
 __decorate([
     property({ type: Number, reflect: true })
@@ -170,16 +188,16 @@ __decorate([
     property()
 ], SgdsQuantityToggle.prototype, "size", void 0);
 __decorate([
-    property({ reflect: true, type: Number })
+    property({ type: Number, reflect: true })
 ], SgdsQuantityToggle.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsQuantityToggle.prototype, "disabled", void 0);
 __decorate([
-    property({ type: String, reflect: true })
+    property({ type: String })
 ], SgdsQuantityToggle.prototype, "buttonVariant", void 0);
 __decorate([
-    property({ type: Number, reflect: true })
+    property({ type: Number })
 ], SgdsQuantityToggle.prototype, "step", void 0);
 __decorate([
     defaultValue()

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 { ButtonVariant } from \"../Button/sgds-button\";\nimport styles from \"./sgds-quantity-toggle.scss\";\n\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 SgdsElement implements SgdsFormControl {\n  /**@internal */\n  @query(\"input.form-control\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"button[aria-label^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"button[aria-label^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  static styles = [SgdsElement.styles, styles];\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n\n  /** The name of the input */\n  @property({ 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\" | \"lg\" = \"sm\";\n\n  /**The input's value. Set to 0 by default */\n  @property({ reflect: true, type: Number }) 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, reflect: true }) buttonVariant: ButtonVariant = \"primary\";\n\n  /**\n   * Controls the incremental / decremental value of the input\n   */\n  @property({ type: Number, reflect: true }) 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  handleChange(event: string) {\n    this.value = parseInt(this.input.value);\n    this.emit(event);\n  }\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  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        <button\n          aria-label=${`decrease by ${this.step}`}\n          part=\"button\"\n          class=${classMap({\n            sgds: true,\n            btn: true,\n            [`btn-${this.buttonVariant}`]: this.buttonVariant\n          })}\n          @click=${this.onMinus}\n          ?disabled=${this.disabled}\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        </button>\n        <input\n          type=\"number\"\n          class=\"form-control ${\"form-control-\" + this.size} text-center\"\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          @change=${() => this.handleChange(\"sgds-change\")}\n          @input=${() => this.handleChange(\"sgds-input\")}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n          aria-label=\"quantity\"\n        />\n        <button\n          aria-label=${`increase by ${this.step}`}\n          part=\"button\"\n          class=${classMap({\n            sgds: true,\n            btn: true,\n            [`btn-${this.buttonVariant}`]: this.buttonVariant\n          })}\n          @click=${this.onPlus}\n          ?disabled=${this.disabled}\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        </button>\n        <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["styles"],"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 { ButtonVariant } from \"../Button/sgds-button\";\nimport styles from \"./sgds-quantity-toggle.scss\";\n\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 SgdsElement implements SgdsFormControl {\n  /**@internal */\n  @query(\"input.form-control\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"button[aria-label^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"button[aria-label^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  static styles = [SgdsElement.styles, styles];\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\" | \"lg\" = \"sm\";\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  handleChange(event: string) {\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    this.emit(event);\n  }\n\n  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    ];\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  onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  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        <button\n          aria-label=${`decrease by ${this.step}`}\n          part=\"button\"\n          class=${classMap({\n            sgds: true,\n            btn: true,\n            [`btn-${this.buttonVariant}`]: this.buttonVariant\n          })}\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        </button>\n        <input\n          type=\"number\"\n          class=\"form-control ${\"form-control-\" + this.size} text-center\"\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          @change=${() => this.handleChange(\"sgds-change\")}\n          @input=${() => this.handleChange(\"sgds-input\")}\n          @keydown=${this.handleKeyDown}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n          aria-label=\"quantity\"\n        />\n        <button\n          aria-label=${`increase by ${this.step}`}\n          part=\"button\"\n          class=${classMap({\n            sgds: true,\n            btn: true,\n            [`btn-${this.buttonVariant}`]: this.buttonVariant\n          })}\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        </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":["styles"],"mappings":"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"}