@govtechsg/sgds-web-component 3.30.1-rc.0 → 3.30.1-rc.10

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-quantity-toggle.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle","SgdsInput","SgdsIconButton","classMap","ifDefined","live","query","property","defaultValue","queryAsync"],"sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { 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 formControlStyle from \"../../styles/form-text-control.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 * @slot invalidIcon - The slot for invalid icon\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 * @event sgds-invalid - Emitted when the control's invalid state is set to true.\n * @event sgds-valid - Emitted when the control's invalid state is set to false.\n *\n */\nexport class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [\n    ...FormControlElement.styles,\n    formPlaceholderStyles,\n    svgStyles,\n    formControlStyle,\n    quantityToggleStyle\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-input\": SgdsInput,\n    \"sgds-icon-button\": SgdsIconButton\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  /** The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\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({ type: Number }) min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property({ type: Number }) 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  /** Disables native and sgds validation for the quantity toggle. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n  /** Sets the quantity toggle as readonly  */\n  @property({ type: Boolean, reflect: true }) readonly = false;\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 _handleValueChange(e: Event, eventName: \"sgds-change\" | \"sgds-input\") {\n    e.stopPropagation();\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.emit(eventName);\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (eventName === \"sgds-input\") {\n      this.invalid = false;\n    }\n    this._mixinValidate(sgdsInput.input);\n    if (eventName === \"sgds-change\") {\n      this.invalid = !this._mixinReportValidity();\n    }\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    this.emit(\"sgds-change\");\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    this._validateOnClick(sgdsInput.input);\n    this.emit(\"sgds-change\");\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    if (this._mixinShouldSkipSgdsValidation()) return;\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          <slot name=\"invalidIcon\">\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=\"currentColor\"\n              />\n            </svg>\n          </slot>\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 m-width-160\">\n        ${this._renderLabel()}\n        <div class=\"input-group\">\n          <sgds-icon-button\n            class=\"minus-btn\"\n            variant=\"outline\"\n            tone=\"neutral\"\n            size=\"md\"\n            ariaLabel=${`decrease by ${this.step}`}\n            ?disabled=${this.disabled ||\n            (this.min !== undefined ? this.value <= this.min : this.value < 1) ||\n            this.readonly}\n            @click=${this._onMinus}\n            name=\"dash\"\n          >\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=${(e: Event) => this._handleValueChange(e, \"sgds-change\")}\n            @sgds-input=${(e: Event) => this._handleValueChange(e, \"sgds-input\")}\n            @sgds-invalid=${this._handleInvalid}\n            @sgds-valid=${this._handleValid}\n            @keydown=${this._handleKeyDown}\n            ?disabled=${this.disabled}\n            ?noValidate=${this._mixinShouldSkipSgdsValidation()}\n            id=${this._controlId}\n            ?invalid=${this.invalid}\n            hasFeedback=${ifDefined(this.hasFeedback !== \"text\" ? \"style\" : undefined)}\n          ></sgds-input>\n          <sgds-icon-button\n            class=\"plus-btn\"\n            variant=\"outline\"\n            tone=\"neutral\"\n            size=\"md\"\n            ariaLabel=${`increase by ${this.step}`}\n            @click=${this._onPlus}\n            ?disabled=${this.disabled ||\n            (this.max !== undefined && this.max && this.value >= this.max) ||\n            this.readonly}\n            name=\"plus\"\n          >\n          </sgds-icon-button>\n        </div>\n        <div id=\"${this._controlId}-announcer\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-quantity-toggle.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle","SgdsInput","SgdsIconButton","classMap","ifDefined","live","query","property","defaultValue","queryAsync","watch"],"sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { 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 { watch } from \"../../utils/watch\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport formControlStyle from \"../../styles/form-text-control.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 * @slot invalidIcon - The slot for invalid icon\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 * @event sgds-invalid - Emitted when the control's invalid state is set to true.\n * @event sgds-valid - Emitted when the control's invalid state is set to false.\n *\n */\nexport class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [\n    ...FormControlElement.styles,\n    formPlaceholderStyles,\n    svgStyles,\n    formControlStyle,\n    quantityToggleStyle\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-input\": SgdsInput,\n    \"sgds-icon-button\": SgdsIconButton\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  /** The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\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({ type: Number }) min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property({ type: Number }) 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  /** Disables native and sgds validation for the quantity toggle. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n  /** Sets the quantity toggle as readonly  */\n  @property({ type: Boolean, reflect: true }) readonly = false;\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  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValuePropertyChange() {\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    const sgdsInput = await this._sgdsInput;\n    this._mixinValidate(sgdsInput.input);\n  }\n\n  private async _handleValueChange(e: Event, eventName: \"sgds-change\" | \"sgds-input\") {\n    e.stopPropagation();\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.emit(eventName);\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (eventName === \"sgds-input\") {\n      this.invalid = false;\n    }\n    this._mixinValidate(sgdsInput.input);\n    if (eventName === \"sgds-change\") {\n      this.invalid = !this._mixinReportValidity();\n    }\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    this.emit(\"sgds-change\");\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    this._validateOnClick(sgdsInput.input);\n    this.emit(\"sgds-change\");\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    if (this._mixinShouldSkipSgdsValidation()) return;\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          <slot name=\"invalidIcon\">\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=\"currentColor\"\n              />\n            </svg>\n          </slot>\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 m-width-160\">\n        ${this._renderLabel()}\n        <div class=\"input-group\">\n          <sgds-icon-button\n            class=\"minus-btn\"\n            variant=\"outline\"\n            tone=\"neutral\"\n            size=\"md\"\n            ariaLabel=${`decrease by ${this.step}`}\n            ?disabled=${this.disabled ||\n            (this.min !== undefined ? this.value <= this.min : this.value < 1) ||\n            this.readonly}\n            @click=${this._onMinus}\n            name=\"dash\"\n          >\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=${(e: Event) => this._handleValueChange(e, \"sgds-change\")}\n            @sgds-input=${(e: Event) => this._handleValueChange(e, \"sgds-input\")}\n            @sgds-invalid=${this._handleInvalid}\n            @sgds-valid=${this._handleValid}\n            @keydown=${this._handleKeyDown}\n            ?disabled=${this.disabled}\n            ?noValidate=${this._mixinShouldSkipSgdsValidation()}\n            id=${this._controlId}\n            ?invalid=${this.invalid}\n            hasFeedback=${ifDefined(this.hasFeedback !== \"text\" ? \"style\" : undefined)}\n          ></sgds-input>\n          <sgds-icon-button\n            class=\"plus-btn\"\n            variant=\"outline\"\n            tone=\"neutral\"\n            size=\"md\"\n            ariaLabel=${`increase by ${this.step}`}\n            @click=${this._onPlus}\n            ?disabled=${this.disabled ||\n            (this.max !== undefined && this.max && this.value >= this.max) ||\n            this.readonly}\n            name=\"plus\"\n          >\n          </sgds-icon-button>\n        </div>\n        <div id=\"${this._controlId}-announcer\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 "use client";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+import { watch } from "../../utils/watch.js";
 import { SgdsIconButton } from "../IconButton/sgds-icon-button.js";
 import css_248z from "../../styles/form-placeholder.js";
 import FormControlElement from "../../base/form-control-element.js";
@@ -75,6 +76,13 @@ var SgdsQuantityToggle = class extends SgdsFormValidatorMixin(FormControlElement
 	get validationMessage() {
 		return this._mixinGetValidationMessage();
 	}
+	async _handleValuePropertyChange() {
+		this._mixinSetFormValue();
+		await this.updateComplete;
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		const sgdsInput = await this._sgdsInput;
+		this._mixinValidate(sgdsInput.input);
+	}
 	async _handleValueChange(e, eventName) {
 		e.stopPropagation();
 		const sgdsInput = await this._sgdsInput;
@@ -262,6 +270,7 @@ __decorate([property({
 })], SgdsQuantityToggle.prototype, "readonly", void 0);
 __decorate([defaultValue()], SgdsQuantityToggle.prototype, "defaultValue", void 0);
 __decorate([queryAsync("sgds-input")], SgdsQuantityToggle.prototype, "_sgdsInput", void 0);
+__decorate([watch("value", { waitUntilFirstUpdate: true })], SgdsQuantityToggle.prototype, "_handleValuePropertyChange", null);
 //#endregion
 export { SgdsQuantityToggle, SgdsQuantityToggle as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-quantity-toggle.js","names":["formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle"],"sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { 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 formControlStyle from \"../../styles/form-text-control.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 * @slot invalidIcon - The slot for invalid icon\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 * @event sgds-invalid - Emitted when the control's invalid state is set to true.\n * @event sgds-valid - Emitted when the control's invalid state is set to false.\n *\n */\nexport class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [\n    ...FormControlElement.styles,\n    formPlaceholderStyles,\n    svgStyles,\n    formControlStyle,\n    quantityToggleStyle\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-input\": SgdsInput,\n    \"sgds-icon-button\": SgdsIconButton\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  /** The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\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({ type: Number }) min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property({ type: Number }) 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  /** Disables native and sgds validation for the quantity toggle. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n  /** Sets the quantity toggle as readonly  */\n  @property({ type: Boolean, reflect: true }) readonly = false;\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 _handleValueChange(e: Event, eventName: \"sgds-change\" | \"sgds-input\") {\n    e.stopPropagation();\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.emit(eventName);\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (eventName === \"sgds-input\") {\n      this.invalid = false;\n    }\n    this._mixinValidate(sgdsInput.input);\n    if (eventName === \"sgds-change\") {\n      this.invalid = !this._mixinReportValidity();\n    }\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    this.emit(\"sgds-change\");\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    this._validateOnClick(sgdsInput.input);\n    this.emit(\"sgds-change\");\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    if (this._mixinShouldSkipSgdsValidation()) return;\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          <slot name=\"invalidIcon\">\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=\"currentColor\"\n              />\n            </svg>\n          </slot>\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 m-width-160\">\n        ${this._renderLabel()}\n        <div class=\"input-group\">\n          <sgds-icon-button\n            class=\"minus-btn\"\n            variant=\"outline\"\n            tone=\"neutral\"\n            size=\"md\"\n            ariaLabel=${`decrease by ${this.step}`}\n            ?disabled=${this.disabled ||\n            (this.min !== undefined ? this.value <= this.min : this.value < 1) ||\n            this.readonly}\n            @click=${this._onMinus}\n            name=\"dash\"\n          >\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=${(e: Event) => this._handleValueChange(e, \"sgds-change\")}\n            @sgds-input=${(e: Event) => this._handleValueChange(e, \"sgds-input\")}\n            @sgds-invalid=${this._handleInvalid}\n            @sgds-valid=${this._handleValid}\n            @keydown=${this._handleKeyDown}\n            ?disabled=${this.disabled}\n            ?noValidate=${this._mixinShouldSkipSgdsValidation()}\n            id=${this._controlId}\n            ?invalid=${this.invalid}\n            hasFeedback=${ifDefined(this.hasFeedback !== \"text\" ? \"style\" : undefined)}\n          ></sgds-input>\n          <sgds-icon-button\n            class=\"plus-btn\"\n            variant=\"outline\"\n            tone=\"neutral\"\n            size=\"md\"\n            ariaLabel=${`increase by ${this.step}`}\n            @click=${this._onPlus}\n            ?disabled=${this.disabled ||\n            (this.max !== undefined && this.max && this.value >= this.max) ||\n            this.readonly}\n            name=\"plus\"\n          >\n          </sgds-icon-button>\n        </div>\n        <div id=\"${this._controlId}-announcer\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-quantity-toggle.js","names":["formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle"],"sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { 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 { watch } from \"../../utils/watch\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport formControlStyle from \"../../styles/form-text-control.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 * @slot invalidIcon - The slot for invalid icon\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 * @event sgds-invalid - Emitted when the control's invalid state is set to true.\n * @event sgds-valid - Emitted when the control's invalid state is set to false.\n *\n */\nexport class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [\n    ...FormControlElement.styles,\n    formPlaceholderStyles,\n    svgStyles,\n    formControlStyle,\n    quantityToggleStyle\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-input\": SgdsInput,\n    \"sgds-icon-button\": SgdsIconButton\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  /** The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\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({ type: Number }) min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property({ type: Number }) 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  /** Disables native and sgds validation for the quantity toggle. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n  /** Sets the quantity toggle as readonly  */\n  @property({ type: Boolean, reflect: true }) readonly = false;\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  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValuePropertyChange() {\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    const sgdsInput = await this._sgdsInput;\n    this._mixinValidate(sgdsInput.input);\n  }\n\n  private async _handleValueChange(e: Event, eventName: \"sgds-change\" | \"sgds-input\") {\n    e.stopPropagation();\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.emit(eventName);\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (eventName === \"sgds-input\") {\n      this.invalid = false;\n    }\n    this._mixinValidate(sgdsInput.input);\n    if (eventName === \"sgds-change\") {\n      this.invalid = !this._mixinReportValidity();\n    }\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    this.emit(\"sgds-change\");\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    this._validateOnClick(sgdsInput.input);\n    this.emit(\"sgds-change\");\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    if (this._mixinShouldSkipSgdsValidation()) return;\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          <slot name=\"invalidIcon\">\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=\"currentColor\"\n              />\n            </svg>\n          </slot>\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 m-width-160\">\n        ${this._renderLabel()}\n        <div class=\"input-group\">\n          <sgds-icon-button\n            class=\"minus-btn\"\n            variant=\"outline\"\n            tone=\"neutral\"\n            size=\"md\"\n            ariaLabel=${`decrease by ${this.step}`}\n            ?disabled=${this.disabled ||\n            (this.min !== undefined ? this.value <= this.min : this.value < 1) ||\n            this.readonly}\n            @click=${this._onMinus}\n            name=\"dash\"\n          >\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=${(e: Event) => this._handleValueChange(e, \"sgds-change\")}\n            @sgds-input=${(e: Event) => this._handleValueChange(e, \"sgds-input\")}\n            @sgds-invalid=${this._handleInvalid}\n            @sgds-valid=${this._handleValid}\n            @keydown=${this._handleKeyDown}\n            ?disabled=${this.disabled}\n            ?noValidate=${this._mixinShouldSkipSgdsValidation()}\n            id=${this._controlId}\n            ?invalid=${this.invalid}\n            hasFeedback=${ifDefined(this.hasFeedback !== \"text\" ? \"style\" : undefined)}\n          ></sgds-input>\n          <sgds-icon-button\n            class=\"plus-btn\"\n            variant=\"outline\"\n            tone=\"neutral\"\n            size=\"md\"\n            ariaLabel=${`increase by ${this.step}`}\n            @click=${this._onPlus}\n            ?disabled=${this.disabled ||\n            (this.max !== undefined && this.max && this.value >= this.max) ||\n            this.readonly}\n            name=\"plus\"\n          >\n          </sgds-icon-button>\n        </div>\n        <div id=\"${this._controlId}-announcer\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"mappings":"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"}

package/react/components/Radio/sgds-radio-group.cjs.js

@@ -36,8 +36,12 @@ var SgdsRadioGroup = class extends require_validatorMixin.SgdsFormValidatorMixin
 	static {
 		this.styles = [...require_form_control_element.default.styles, require_radio_group.default];
 	}
-	_handleValueChange() {
+	async _handleValueChange() {
 		this._updateCheckedRadio();
+		this._mixinSetFormValue();
+		await this.updateComplete;
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
 	}
 	_handleInvalidChange() {
 		this._radios.forEach((r) => r.invalid = this.invalid);

package/react/components/Radio/sgds-radio-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-radio-group.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","radioGroupStyles","classMap","live","nothing","query","state","property","watch","queryAssignedElements"],"sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n * @event sgds-invalid - Emitted when the radio group's invalid state is set to true.\n * @event sgds-valid - Emitted when the radio group's invalid state is set to false.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, radioGroupStyles];\n\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the radio group. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Automatically focuses the selected radio input in the group when it becomes checked. */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this._updateCheckedRadio();\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this._radios.forEach(r => (r.invalid = this.invalid));\n  }\n\n  @state() private _isTouched = false;\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n    if (this.value) {\n      this._updateInputValue(\"change\");\n    }\n  }\n\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n\n    this._updateInputValue();\n\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n    this._updateInputValue();\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      radio.autofocus = this.autofocus;\n      radio.checked = radio.value === this.value;\n\n      return radio;\n    });\n    this._disabledChildRadios();\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\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   * 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  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n    this._disabledChildRadios();\n  }\n\n  private _disabledChildRadios() {\n    if (this.disabled) {\n      const radios = this._radios;\n      radios.forEach(radio => (radio.disabled = this.disabled));\n    }\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => super._mixinHandleChange(e)}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\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=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-radio-group.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","radioGroupStyles","classMap","live","nothing","query","state","property","watch","queryAssignedElements"],"sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n * @event sgds-invalid - Emitted when the radio group's invalid state is set to true.\n * @event sgds-valid - Emitted when the radio group's invalid state is set to false.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, radioGroupStyles];\n\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the radio group. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Automatically focuses the selected radio input in the group when it becomes checked. */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._updateCheckedRadio();\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this._radios.forEach(r => (r.invalid = this.invalid));\n  }\n\n  @state() private _isTouched = false;\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n    if (this.value) {\n      this._updateInputValue(\"change\");\n    }\n  }\n\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n\n    this._updateInputValue();\n\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n    this._updateInputValue();\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      radio.autofocus = this.autofocus;\n      radio.checked = radio.value === this.value;\n\n      return radio;\n    });\n    this._disabledChildRadios();\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\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   * 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  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n    this._disabledChildRadios();\n  }\n\n  private _disabledChildRadios() {\n    if (this.disabled) {\n      const radios = this._radios;\n      radios.forEach(radio => (radio.disabled = this.disabled));\n    }\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => super._mixinHandleChange(e)}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\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=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"mappings":"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"}

package/react/components/Radio/sgds-radio-group.js

@@ -36,8 +36,12 @@ var SgdsRadioGroup = class extends SgdsFormValidatorMixin(FormControlElement) {
 	static {
 		this.styles = [...FormControlElement.styles, css_248z];
 	}
-	_handleValueChange() {
+	async _handleValueChange() {
 		this._updateCheckedRadio();
+		this._mixinSetFormValue();
+		await this.updateComplete;
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
 	}
 	_handleInvalidChange() {
 		this._radios.forEach((r) => r.invalid = this.invalid);

package/react/components/Radio/sgds-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-radio-group.js","names":["radioGroupStyles"],"sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n * @event sgds-invalid - Emitted when the radio group's invalid state is set to true.\n * @event sgds-valid - Emitted when the radio group's invalid state is set to false.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, radioGroupStyles];\n\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the radio group. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Automatically focuses the selected radio input in the group when it becomes checked. */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this._updateCheckedRadio();\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this._radios.forEach(r => (r.invalid = this.invalid));\n  }\n\n  @state() private _isTouched = false;\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n    if (this.value) {\n      this._updateInputValue(\"change\");\n    }\n  }\n\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n\n    this._updateInputValue();\n\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n    this._updateInputValue();\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      radio.autofocus = this.autofocus;\n      radio.checked = radio.value === this.value;\n\n      return radio;\n    });\n    this._disabledChildRadios();\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\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   * 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  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n    this._disabledChildRadios();\n  }\n\n  private _disabledChildRadios() {\n    if (this.disabled) {\n      const radios = this._radios;\n      radios.forEach(radio => (radio.disabled = this.disabled));\n    }\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => super._mixinHandleChange(e)}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\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=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-radio-group.js","names":["radioGroupStyles"],"sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n * @event sgds-invalid - Emitted when the radio group's invalid state is set to true.\n * @event sgds-valid - Emitted when the radio group's invalid state is set to false.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, radioGroupStyles];\n\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the radio group. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Automatically focuses the selected radio input in the group when it becomes checked. */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._updateCheckedRadio();\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this._radios.forEach(r => (r.invalid = this.invalid));\n  }\n\n  @state() private _isTouched = false;\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n    if (this.value) {\n      this._updateInputValue(\"change\");\n    }\n  }\n\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n\n    this._updateInputValue();\n\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n    this._updateInputValue();\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      radio.autofocus = this.autofocus;\n      radio.checked = radio.value === this.value;\n\n      return radio;\n    });\n    this._disabledChildRadios();\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\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   * 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  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n    this._disabledChildRadios();\n  }\n\n  private _disabledChildRadios() {\n    if (this.disabled) {\n      const radios = this._radios;\n      radios.forEach(radio => (radio.disabled = this.disabled));\n    }\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => super._mixinHandleChange(e)}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\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=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"mappings":"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"}

package/react/components/Sidenav/sgds-sidenav-item.cjs.js

@@ -179,7 +179,9 @@ var SgdsSidenavItem = class extends require_sgds_element.default {
         </div>
       </div>
     `;
-		const noMenuTemplate = lit.html` <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot> `;
+		const noMenuTemplate = lit.html`<div class="no-menu-wrapper">
+      <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot>
+    </div>`;
 		return lit.html`
       <div class="sidenav-item" aria-haspopup="${!this.isLink}">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>
     `;

package/react/components/Sidenav/sgds-sidenav-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.cjs.js","names":["SgdsElement","genId","sidenavItemStyle","SgdsIcon","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","classMap","ifDefined","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.cjs.js","names":["SgdsElement","genId","sidenavItemStyle","SgdsIcon","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","classMap","ifDefined","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html`<div class=\"no-menu-wrapper\">\n      <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot>\n    </div>`;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":"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"}

package/react/components/Sidenav/sgds-sidenav-item.js

@@ -179,7 +179,9 @@ var SgdsSidenavItem = class extends SgdsElement {
         </div>
       </div>
     `;
-		const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot> `;
+		const noMenuTemplate = html`<div class="no-menu-wrapper">
+      <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot>
+    </div>`;
 		return html`
       <div class="sidenav-item" aria-haspopup="${!this.isLink}">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>
     `;

package/react/components/Sidenav/sgds-sidenav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.js","names":["genId","sidenavItemStyle"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,kBAAb,cAAqC,YAAY;;;EActC,KAAA,SAAA;EAME,KAAA,WAAA;EAQe,KAAA,SAAA;EAMIA,KAAAA,cAAAA,mBAAM,WAAW,UAAU;EAK7BA,KAAAA,YAAAA,mBAAM,WAAW,QAAQ;EAElCA,KAAAA,WAAAA,mBAAM,WAAW,MAAM;EAClB,KAAA,gBAAA,iBAAiB,KAAK;EACrB,KAAA,iBAAA,kBAAkB,KAAK;EACxB,KAAA,gBAAA,iBAAiB,KAAK;EAG9B,KAAA,QAAA;;;EA9CA,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQC,QAAgB;;;EAElC,KAAA,eAAA,EACpB,aAAa,SACf;;CA4CA,YAAoB;EAClB,KAAK,KAAK,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,EAAE,CAAC;CAC5D;;CAGA,MAAa,OAAO;EAClB,IAAI,KAAK,QAAQ;EACjB,IAAI,KAAK,QACP;EAGF,KAAK,SAAS;EACd,OAAO,aAAa,MAAM,iBAAiB;CAC7C;;CAGA,MAAa,OAAO;EAClB,IAAI,KAAK,QAAQ;EACjB,IAAI,CAAC,KAAK,QACR;EAEF,KAAK,SAAS;EACd,OAAO,aAAa,MAAM,iBAAiB;CAC7C;CAEA,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,UAAU,IAAI,KAAK,aAAa;CACvC;CACA,aAAa,mBAA2C;EACtD,MAAM,aAAa,iBAAiB;EAEpC,IAAI,CAAC,KAAK,QAAQ;GAChB,KAAK,KAAK,SAAS,CAAC,KAAK;GACzB,KAAK,KAAK,MAAM,SAAS,KAAK,SAAS,SAAS;EAClD;EAEA,KAAK,gBAAgB;CACvB;;;;;;CAOA,kBAA0B;EACxB,IAAI,CAAC,KAAK,QACR,KAAK,SAAS,KAAK,OAAO,MAAM,MAAyC,EAAE,MAAM;CAErF;CACA,sBAA8B;EAC5B,IAAI,KAAK,QACP,KAAK,KAAK;OAEV,KAAK,KAAK;EAGZ,KAAK,UAAU;EACf,KAAK,OAAO,MAAM;CACpB;CACA,sBAA8B,OAAsB;EAClD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAe;GAErB,IAAI,KAAK,QACP,KAAK,KAAK;QAEV,KAAK,KAAK;EAEd;EAEA,IAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;GACxD,MAAM,eAAe;GACrB,KAAK,KAAK;EACZ;EAEA,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,cAAc;GAC3D,MAAM,eAAe;GACrB,KAAK,KAAK;EACZ;CACF;CAEA,MACM,oBAAoB;EACxB,IAAI,KAAK,QAAQ;EACjB,IAAI,KAAK,QAAQ;GAGf,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,SAAS;IACd;GACF;GAEA,MAAM,eAAe,KAAK,IAAI;GAC9B,KAAK,KAAK,SAAS;GAEnB,MAAM,EAAE,WAAW,YAAY,aAAa,MAAM,cAAc;GAChE,MAAM,UAAU,KAAK,MAAM,wBAAwB,WAAW,KAAK,KAAK,YAAY,GAAG,OAAO;GAC9F,KAAK,KAAK,MAAM,SAAS;GAEzB,KAAK,KAAK,iBAAiB;EAC7B,OAAO;GAGL,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,SAAS;IACd;GACF;GAEA,MAAM,eAAe,KAAK,IAAI;GAE9B,MAAM,EAAE,WAAW,YAAY,aAAa,MAAM,cAAc;GAChE,MAAM,UAAU,KAAK,MAAM,wBAAwB,WAAW,KAAK,KAAK,YAAY,GAAG,OAAO;GAC9F,KAAK,KAAK,SAAS;GACnB,KAAK,KAAK,MAAM,SAAS;GAEzB,KAAK,KAAK,iBAAiB;EAC7B;CACF;CAEA,kBAA0B,GAAU;EAClC,MAAM,cAAe,EAAE,OACpB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QAAO,SAAQ,KAAK,QAAQ,YAAY,MAAM,GAAG;EAEpD,IAAI,YAAY,SAAS,GACvB,OAAO,QAAQ,MAAM,wDAAwD;OACxE,IAAI,YAAY,WAAW,GAAG;GACnC,MAAM,SAAS,YAAY;GAC3B,KAAK,YAAY,OAAO,aAAa,YAAY,IAAI;GACrD,KAAK,UAAU,OAAO,aAAa,gBAAgB,MAAM;GACzD,OAAQ,KAAK,SAAS;EACxB;;EAOA,EALwB,OACrB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QAAO,SAAQ,KAAK,QAAQ,YAAY,MAAM,mBAGtC,CAAC,CAAC,SAAQ,MAAK;GACxB,MAAM,eAAe,MAAM,KAAK,EAAE,SAAS,CAAC,CAAC,QAAO,MAAK,EAAE,WAAW,aAAa,CAAC,CAAC,CAAC;GACtF,EAAE,UAAU,QAAQ,cAAc,KAAK,cAAc;EACvD,CAAC;;EAED,IAAI,MAAM,KAAK,KAAK,SAAS,CAAC,CAAC,MAAK,MAAK,EAAE,WAAW,cAAc,CAAC,GACnE,KAAK,OAAO,SAAS,MAAuB,EAAE,UAAU,IAAI,KAAK,aAAa,CAAC;EAGjF,KAAK,gBAAgB;CACvB;CAEA,SAAS;EACP,MAAM,mBAAmB,IAAI;;iBAEhB,KAAK,oBAAoB;mBACvB,KAAK,sBAAsB;6BACjB,SAAS;GAC5B,UAAU,KAAK;GACf,QAAQ,KAAK;EACf,CAAC,EAAE;wBACa,KAAK,OAAO;wBACZ,KAAK,YAAY;uBAClB,KAAK,OAAO;qBACd,UAAU,KAAK,SAAS,EAAE;aAClC,KAAK,UAAU;oBACR,KAAK,SAAS;wBACV,KAAK,WAAW,SAAS,QAAQ;;;;;;;;sCAQnB,KAAK,YAAY;qDACF,KAAK,UAAU;8CACtB,KAAK,kBAAkB;;;;EAKjE,MAAM,iBAAiB,IAAI,sBAAsB,KAAK,kBAAkB;EACxE,OAAO,IAAI;iDACkC,CAAC,KAAK,OAAO,IAAI,KAAK,SAAS,iBAAiB,iBAAiB;;CAEhH;AACF;AApOG,WAAA,CAAA,MAAM,eAAe,CAAA,GAAA,gBAAA,WAAA,QAAA,KAAA,CAAA;AAErB,WAAA,CAAA,MAAM,cAAc,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIpB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAMzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAMzC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,gBAAA,WAAA,aAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,MAAM,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAuGN,WAAA,CAAA,MAAM,UAAU,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,qBAAA,IAAA;AAqC9C,WAAA,CAAA,sBAAsB,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAoEzB,oBAAoB,gBAAgB;CAClC,WAAW,CACT;EAAE,QAAQ;EAAK,SAAS;CAAI,GAC5B;EAAE,QAAQ;EAAQ,SAAS;CAAI,CACjC;CACA,SAAS;EAAE,UAAU;EAAK,QAAQ;CAAc;AAClD,CAAC;AAED,oBAAoB,gBAAgB;CAClC,WAAW,CACT;EAAE,QAAQ;EAAQ,SAAS;CAAI,GAC/B;EAAE,QAAQ;EAAK,SAAS;CAAI,CAC9B;CACA,SAAS;EAAE,UAAU;EAAK,QAAQ;CAAc;AAClD,CAAC"}
+{"version":3,"file":"sgds-sidenav-item.js","names":["genId","sidenavItemStyle"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html`<div class=\"no-menu-wrapper\">\n      <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot>\n    </div>`;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":"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"}

package/react/components/Sidenav/sgds-sidenav-link.cjs.js

@@ -37,7 +37,7 @@ var SgdsSidenavLink = class extends require_sgds_element.default {
 		}
 	}
 	render() {
-		return lit.html` <slot @slotchange=${this._handleSlotChange}></slot> `;
+		return lit.html`<div class="sidenav-link"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 require_decorate.default([(0, lit_decorators_js.property)({