@govtechsg/sgds-web-component 3.0.0-rc.0 → 3.0.0-rc.2

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

@@ -1,61 +1,100 @@
 'use client';
 import { __decorate } from 'tslib';
-import { query, property } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { query, property, queryAsync } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import FormControlElement from '../../base/form-control-element.js';
+import css_248z from '../../styles/form-placeholder.js';
+import css_248z$1 from '../../styles/svg.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
-import { FormSubmitController } from '../../utils/form.js';
-import genId from '../../utils/generateId.js';
+import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
 import { SgdsIconButton } from '../IconButton/sgds-icon-button.js';
-import css_248z$1 from './quantity-toggle.js';
 import { SgdsInput } from '../Input/sgds-input.js';
-import css_248z from '../../styles/svg.js';
+import css_248z$2 from './quantity-toggle.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
 
 /**
  * @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.
  *
- * @csspart base - The base wrapper of the quantity toggle component.
- * @csspart button - The plus and minus button of quantity toggle
- *
  * @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.
  *
  */
-class SgdsQuantityToggle extends FormControlElement {
+class SgdsQuantityToggle extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {
     constructor() {
         super(...arguments);
-        /** @internal */
-        this.formSubmitController = new FormSubmitController(this);
         /** Controls the size of the quantity toggle */
         this.size = "md";
         /** The input's value. Set to 0 by default */
         this.value = 0;
-        /** Disables the entire quantity toggle  */
-        this.disabled = false;
-        /** The quantity toggle's button variants */
-        this.iconButtonVariant = "ghost";
+        // /** The quantity toggle's button variants */
+        // @property({ type: String }) iconButtonVariant = "ghost";
         /**  Controls the incremental / decremental value of the input */
         this.step = 1;
         /** 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 = 0;
-        /** @internal The id forwarded to input element */
-        this.inputId = genId("quantity-toggle", "input");
     }
     /** @internal */
     static get scopedElements() {
         return {
             "sgds-input": SgdsInput,
-            "sgds-icon-button": SgdsIconButton
+            "sgds-icon-button": SgdsIconButton,
+            "sgds-icon": SgdsIcon
         };
     }
-    _handleChange() {
-        if (parseInt(this.input.value) < this.step || this.input.value === "") {
-            this.input.value = "0";
+    /**
+     * 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();
+    }
+    async _handleChange() {
+        const sgdsInput = await this._sgdsInput;
+        if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
+            sgdsInput.value = "0";
         }
-        this.value = parseInt(this.input.value);
+        this.value = parseInt(sgdsInput.value);
+        this._mixinSetFormValue();
+        this._mixinValidate(sgdsInput.input);
+        this.invalid = !this._mixinReportValidity();
+    }
+    async _handleInputChange() {
+        const sgdsInput = await this._sgdsInput;
+        this.invalid = false;
+        if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
+            sgdsInput.value = "0";
+        }
+        this.value = parseInt(sgdsInput.value);
+        this._mixinSetFormValue();
+        this._mixinValidate(sgdsInput.input);
+    }
+    async _mixinResetFormControl() {
+        const sgdsInput = await this._sgdsInput;
+        this.value = this.defaultValue;
+        sgdsInput.input.value = this.value.toString();
+        this._mixinResetValidity(sgdsInput.input);
     }
     _handleKeyDown(event) {
         const allowedKeys = [
@@ -72,6 +111,12 @@ class SgdsQuantityToggle extends FormControlElement {
             event.preventDefault();
         }
     }
+    _handleInvalid() {
+        this.invalid = true;
+    }
+    _handleValid() {
+        this.invalid = false;
+    }
     /** Simulates a click on the plus button */
     plus() {
         this.plusBtn.click();
@@ -80,23 +125,41 @@ class SgdsQuantityToggle extends FormControlElement {
     minus() {
         this.minusBtn.click();
     }
-    _onPlus(event) {
+    async _onPlus(event) {
+        const sgdsInput = await this._sgdsInput;
         event.preventDefault();
         event.stopPropagation();
-        this.value = parseInt(this.input.value) + parseInt(this.input.step);
+        this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());
+        this._validateOnClick(sgdsInput.input);
     }
-    _onMinus(event) {
+    async _onMinus(event) {
+        const sgdsInput = await this._sgdsInput;
         event.preventDefault();
         event.stopPropagation();
         if (this.value < this.step) {
             this.value = 0;
         }
         else {
-            this.value = parseInt(this.input.value) - parseInt(this.input.step);
+            this.value = parseInt(sgdsInput.value) - parseInt(sgdsInput.step.toString());
         }
+        this._validateOnClick(sgdsInput.input);
+    }
+    /**
+     * Validates the input on button clicks of the toggle.
+     * Input is validated every time the button is click to update the invalid state
+     * to indiciate the validity of quantity toggle
+     * @param input native HTMLInputElement
+     */
+    async _validateOnClick(input) {
+        const sgdsInput = await this._sgdsInput;
+        await sgdsInput.updateComplete;
+        this._mixinSetFormValue();
+        this._mixinValidate(input);
+        this.invalid = !this._mixinReportValidity();
     }
     _renderFeedback() {
-        return this.invalid && this.hasFeedback
+        const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
+        return this.invalid && wantFeedbackText
             ? html ` <div class="invalid-feedback-container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path
@@ -104,17 +167,20 @@ class SgdsQuantityToggle extends FormControlElement {
               fill="#B90000"
             />
           </svg>
-          <div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+          <div id="${this._controlId}-invalid" class="invalid-feedback">
+            ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}
+          </div>
         </div>`
             : html `${this._renderHintText()}`;
     }
     _renderLabel() {
         const labelTemplate = html `
       <label
-        for=${this.inputId}
-        id=${this.labelId}
+        for=${this._controlId}
+        id=${this._labelId}
         class=${classMap({
-            "form-label": true
+            "form-label": true,
+            disabled: this.disabled
         })}
         >${this.label}</label
       >
@@ -122,30 +188,22 @@ class SgdsQuantityToggle extends FormControlElement {
         return this.label && labelTemplate;
     }
     _renderHintText() {
-        const hintTextTemplate = html ` <div id="${this.inputId}Help" class="form-text">${this.hintText}</div> `;
+        const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
         return this.hintText && hintTextTemplate;
     }
     render() {
         return html `
       <div class="form-control-container">
         ${this._renderLabel()}
-        <div
-          part="base"
-          class="${classMap({
-            disabled: this.disabled,
-            "input-group": true,
-            [`input-group-${this.size}`]: this.size
-        })}"
-          variant="quantity-toggle"
-          size=${this.size}
-        >
+        <div class="input-group">
           <sgds-icon-button
-            variant=${this.iconButtonVariant}
+            variant="ghost"
             ariaLabel=${`decrease by ${this.step}`}
-            part="button"
             ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}
             @click=${this._onMinus}
-          ></sgds-icon-button>
+          >
+            <sgds-icon name="dash"></sgds-icon>
+          </sgds-icon-button>
           <sgds-input
             type="number"
             class="quantity-toggle"
@@ -153,21 +211,24 @@ class SgdsQuantityToggle extends FormControlElement {
             step=${ifDefined(this.step)}
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
-            .value=${live(this.value.toString())}
-            @sgds-change=${() => this._handleChange()}
-            @sgds-input=${() => this._handleChange()}
+            .value=${live(this.value)}
+            @sgds-change=${this._handleChange}
+            @sgds-input=${this._handleInputChange}
+            @sgds-invalid=${this._handleInvalid}
+            @sgds-valid=${this._handleValid}
             @keydown=${this._handleKeyDown}
             ?disabled=${this.disabled}
+            id=${this._controlId}
             ?invalid=${this.invalid}
-            id=${this.inputId}
+            hasFeedback=${ifDefined(this.hasFeedback !== "text" ? "style" : undefined)}
           ></sgds-input>
           <sgds-icon-button
-            variant=${this.iconButtonVariant}
+            variant="ghost"
             ariaLabel=${`increase by ${this.step}`}
-            part="button"
             @click=${this._onPlus}
             ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}
-          ></sgds-icon-button>
+            ><sgds-icon name="plus"></sgds-icon>
+          </sgds-icon-button>
         </div>
         <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
         ${this._renderFeedback()}
@@ -175,10 +236,7 @@ class SgdsQuantityToggle extends FormControlElement {
     `;
     }
 }
-SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z, css_248z$1];
-__decorate([
-    query("sgds-input")
-], SgdsQuantityToggle.prototype, "input", void 0);
+SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z, css_248z$1, css_248z$2];
 __decorate([
     query("sgds-icon-button[ariaLabel^='increase by']")
 ], SgdsQuantityToggle.prototype, "plusBtn", void 0);
@@ -191,18 +249,27 @@ __decorate([
 __decorate([
     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 })
-], SgdsQuantityToggle.prototype, "iconButtonVariant", void 0);
 __decorate([
     property({ type: Number })
 ], SgdsQuantityToggle.prototype, "step", void 0);
+__decorate([
+    property()
+], SgdsQuantityToggle.prototype, "min", void 0);
+__decorate([
+    property()
+], SgdsQuantityToggle.prototype, "max", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsQuantityToggle.prototype, "hasFeedback", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsQuantityToggle.prototype, "invalidFeedback", void 0);
 __decorate([
     defaultValue()
 ], SgdsQuantityToggle.prototype, "defaultValue", void 0);
+__decorate([
+    queryAsync("sgds-input")
+], SgdsQuantityToggle.prototype, "_sgdsInput", void 0);
 
 export { SgdsQuantityToggle, SgdsQuantityToggle as default };
 //# sourceMappingURL=sgds-quantity-toggle.js.map

package/react/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 FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\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 FormControlElement implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, svgStyles, quantityToggleStyle];\n  /** @internal */\n  static get scopedElements() {\n    return {\n      \"sgds-input\": SgdsInput,\n      \"sgds-icon-button\": SgdsIconButton\n    };\n  }\n  /** @internal */\n  @query(\"sgds-input\") private input: HTMLInputElement;\n  /** @internal */\n  @query(\"sgds-icon-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n  /** @internal */\n  @query(\"sgds-icon-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this);\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 }) iconButtonVariant = \"ghost\";\n\n  /**  Controls the incremental / decremental value of the input */\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\n  protected _renderFeedback() {\n    return this.invalid && this.hasFeedback\n      ? html` <div class=\"invalid-feedback-container\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path\n              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\"\n              fill=\"#B90000\"\n            />\n          </svg>\n          <div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this.inputId}\n        id=${this.labelId}\n        class=${classMap({\n          \"form-label\": true\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  render() {\n    return html`\n      <div class=\"form-control-container\">\n        ${this._renderLabel()}\n        <div\n          part=\"base\"\n          class=\"${classMap({\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-icon-button\n            variant=${this.iconButtonVariant}\n            ariaLabel=${`decrease by ${this.step}`}\n            part=\"button\"\n            ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}\n            @click=${this._onMinus}\n          ></sgds-icon-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            ?invalid=${this.invalid}\n            id=${this.inputId}\n          ></sgds-input>\n          <sgds-icon-button\n            variant=${this.iconButtonVariant}\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          ></sgds-icon-button>\n        </div>\n        <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["svgStyles","quantityToggleStyle"],"mappings":";;;;;;;;;;;;;;;;AAaA;;;;;;;;;AASG;AACG,MAAO,kBAAmB,SAAQ,kBAAkB,CAAA;AAA1D,IAAA,WAAA,GAAA;;;AAiBmB,QAAA,IAAA,CAAA,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAC;;QAG3D,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;;QAGM,IAAK,CAAA,KAAA,GAAG,CAAC,CAAC;;QAGT,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjC,IAAiB,CAAA,iBAAA,GAAG,OAAO,CAAC;;QAG5B,IAAI,CAAA,IAAA,GAAG,CAAC,CAAC;;QAIrC,IAAY,CAAA,YAAA,GAAG,CAAC,CAAC;;AAGT,QAAA,IAAA,CAAA,OAAO,GAAW,KAAK,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;KAqI7D;;AAzKC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,YAAY,EAAE,SAAS;AACvB,YAAA,kBAAkB,EAAE,cAAc;SACnC,CAAC;KACH;IAiCO,aAAa,GAAA;QACnB,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;AACrE,YAAA,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;SACxB;QACD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACzC;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,MAAM,WAAW,GAAG;YAClB,WAAW;YACX,SAAS;YACT,WAAW;YACX,WAAW;YACX,YAAY;YACZ,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;YAC1D,KAAK;SACN,CAAC;;QAGF,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;;IAGM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;KACvB;AAEO,IAAA,OAAO,CAAC,KAAiB,EAAA;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;KACrE;AAEO,IAAA,QAAQ,CAAC,KAAiB,EAAA;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE;AAC1B,YAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAChB;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;SACrE;KACF;IAES,eAAe,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;cACnC,IAAI,CAAA,CAAA;;;;;;;AAOS,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAsC,mCAAA,EAAA,IAAI,CAAC,eAAe,CAAA;AAC5E,cAAA,CAAA;cACP,IAAI,CAAA,CAAA,EAAG,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE,CAAC;KACrC;IAES,YAAY,GAAA;QACpB,MAAM,aAAa,GAAG,IAAI,CAAA,CAAA;;AAEhB,YAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACb,WAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACT,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;SACnB,CAAC,CAAA;AACC,SAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;KAEhB,CAAC;AACF,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;KACpC;IACS,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAAa,UAAA,EAAA,IAAI,CAAC,OAAO,CAA2B,wBAAA,EAAA,IAAI,CAAC,QAAQ,SAAS,CAAC;AACxG,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;UAEL,IAAI,CAAC,YAAY,EAAE,CAAA;;;AAGV,iBAAA,EAAA,QAAQ,CAAC;YAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,aAAa,EAAE,IAAI;YACnB,CAAC,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;SACxC,CAAC,CAAA;;AAEK,eAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;AAGJ,oBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;wBACpB,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAA;;wBAE1B,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;AACtF,mBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;;;AAKf,iBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACpB,iBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACrB,gBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnB,gBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAChB,mBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;AACrB,yBAAA,EAAA,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;AAC3B,wBAAA,EAAA,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;AAC7B,qBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AAClB,sBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACd,qBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AAClB,eAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;;AAGP,oBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;wBACpB,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAA;;AAE7B,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;wBACT,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGb,wFAAA,EAAA,IAAI,CAAC,KAAK,CAAA;UAC1F,IAAI,CAAC,eAAe,EAAE,CAAA;;KAE3B,CAAC;KACH;;AA1KM,kBAAA,CAAA,MAAM,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAEA,QAAS,EAAEC,UAAmB,CAAhE,CAAkE;AASlD,UAAA,CAAA;IAA5B,KAAK,CAAC,YAAY,CAAC;AAAiC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEQ,UAAA,CAAA;IAA5D,KAAK,CAAC,4CAA4C,CAAC;AAAoC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE3B,UAAA,CAAA;IAA5D,KAAK,CAAC,4CAA4C,CAAC;AAAqC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAM7E,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAA0B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGM,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGT,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjC,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA6B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5B,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAU,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIrC,UAAA,CAAA;AADC,IAAA,YAAY,EAAE;AACE,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-quantity-toggle.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { property, query, queryAsync } 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 FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\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 * @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\n  extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement))\n  implements SgdsFormControl\n{\n  static styles = [...FormControlElement.styles, formPlaceholderStyles, svgStyles, quantityToggleStyle];\n\n  /** @internal */\n  static get scopedElements() {\n    return {\n      \"sgds-input\": SgdsInput,\n      \"sgds-icon-button\": SgdsIconButton,\n      \"sgds-icon\": SgdsIcon\n    };\n  }\n  /** @internal */\n  @query(\"sgds-icon-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n  /** @internal */\n  @query(\"sgds-icon-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\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  // /** The quantity toggle's button variants */\n  // @property({ type: String }) iconButtonVariant = \"ghost\";\n\n  /**  Controls the incremental / decremental value of the input */\n  @property({ type: Number }) step = 1;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\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  @queryAsync(\"sgds-input\") private _sgdsInput: Promise<SgdsInput>;\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * 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\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  private async _handleChange() {\n    const sgdsInput = await this._sgdsInput;\n    if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n      sgdsInput.value = \"0\";\n    }\n    this.value = parseInt(sgdsInput.value);\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput.input);\n    this.invalid = !this._mixinReportValidity();\n  }\n  private async _handleInputChange() {\n    const sgdsInput = await this._sgdsInput;\n    this.invalid = false;\n    if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n      sgdsInput.value = \"0\";\n    }\n    this.value = parseInt(sgdsInput.value);\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput.input);\n  }\n\n  private async _mixinResetFormControl() {\n    const sgdsInput = await this._sgdsInput;\n    this.value = this.defaultValue;\n    sgdsInput.input.value = this.value.toString();\n    this._mixinResetValidity(sgdsInput.input);\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  private _handleInvalid() {\n    this.invalid = true;\n  }\n  private _handleValid() {\n    this.invalid = false;\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 async _onPlus(event: MouseEvent) {\n    const sgdsInput = await this._sgdsInput;\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());\n    this._validateOnClick(sgdsInput.input);\n  }\n  private async _onMinus(event: MouseEvent) {\n    const sgdsInput = await this._sgdsInput;\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.value < this.step) {\n      this.value = 0;\n    } else {\n      this.value = parseInt(sgdsInput.value) - parseInt(sgdsInput.step.toString());\n    }\n\n    this._validateOnClick(sgdsInput.input);\n  }\n\n  /**\n   * Validates the input on button clicks of the toggle.\n   * Input is validated every time the button is click to update the invalid state\n   * to indiciate the validity of quantity toggle\n   * @param input native HTMLInputElement\n   */\n  private async _validateOnClick(input: HTMLInputElement) {\n    const sgdsInput = await this._sgdsInput;\n    await sgdsInput.updateComplete;\n    this._mixinSetFormValue();\n    this._mixinValidate(input);\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path\n              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\"\n              fill=\"#B90000\"\n            />\n          </svg>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          disabled: this.disabled\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  render() {\n    return html`\n      <div class=\"form-control-container\">\n        ${this._renderLabel()}\n        <div class=\"input-group\">\n          <sgds-icon-button\n            variant=\"ghost\"\n            ariaLabel=${`decrease by ${this.step}`}\n            ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}\n            @click=${this._onMinus}\n          >\n            <sgds-icon name=\"dash\"></sgds-icon>\n          </sgds-icon-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)}\n            @sgds-change=${this._handleChange}\n            @sgds-input=${this._handleInputChange}\n            @sgds-invalid=${this._handleInvalid}\n            @sgds-valid=${this._handleValid}\n            @keydown=${this._handleKeyDown}\n            ?disabled=${this.disabled}\n            id=${this._controlId}\n            ?invalid=${this.invalid}\n            hasFeedback=${ifDefined(this.hasFeedback !== \"text\" ? \"style\" : undefined)}\n          ></sgds-input>\n          <sgds-icon-button\n            variant=\"ghost\"\n            ariaLabel=${`increase by ${this.step}`}\n            @click=${this._onPlus}\n            ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}\n            ><sgds-icon name=\"plus\"></sgds-icon>\n          </sgds-icon-button>\n        </div>\n        <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["formPlaceholderStyles","svgStyles","quantityToggleStyle"],"mappings":"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"}