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

package/react/components/Mainnav/sgds-mainnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.js","sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\nimport { HasSlotController } from \"../../utils/slot\";\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  xxl: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n  /** Indicates if mobile menu is open or closed */\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  private expanded = false;\n  /** Denotes the transition state of mobile mainnav menu opening  */\n  @state()\n  private expanding = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\");\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this._handleResize();\n\n    window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    window.addEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    window.removeEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n  }\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.body.style.overflow = \"hidden\";\n      this.show();\n    }\n  }\n\n  private _handleResize() {\n    const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n    if (newBreakpointReachedValue !== this.breakpointReached) {\n      this.requestUpdate();\n    } else {\n      this.body ? (this.body.hidden = true) : null;\n      // this.expanded = false;\n      this.expanding = false;\n    }\n\n    if (newBreakpointReachedValue) {\n      this._handleMobileNav();\n\n      if (!this._breakpointReached) {\n        this._breakpointReached = true;\n\n        window.addEventListener(\"scrollend\", this._handleMobileNavBound);\n      }\n    } else {\n      this._handleDesktopNav();\n      this._breakpointReached = false;\n      window.removeEventListener(\"scrollend\", this._handleMobileNavBound);\n    }\n  }\n\n  private _handleMobileNavBound = this._handleMobileNav.bind(this);\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n\n    const { bottom } = this.nav.getBoundingClientRect();\n    const navBodyPaddingY =\n      parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);\n\n    this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanding = false;\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.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  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanding = false;\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n    this.emit(\"sgds-after-hide\");\n  }\n  /** @internal */\n  @watch(\"expanding\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanding) {\n      // Show\n      await this._animateToShow();\n      this.expanded = true;\n    } else {\n      this.header.focus();\n      // Hide\n      await this._animateToHide();\n      this.expanded = false;\n    }\n  }\n\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanding = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n\n    this.expanding = false;\n    document.body.style.removeProperty(\"overflow\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot\n            name=\"non-collapsible\"\n            class=${classMap({ \"non-collapsible-empty\": !this.hasNonCollapsibleSlot })}\n          ></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            .ariaLabel=${\"Toggle navigation\"}\n          ></sgds-icon-button>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.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(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["mainnavStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.js","sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\nimport { HasSlotController } from \"../../utils/slot\";\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\nexport type MainnavTone = \"default\" | \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  xxl: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n  /** Indicates if mobile menu is open or closed */\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  private expanded = false;\n  /** Denotes the transition state of mobile mainnav menu opening  */\n  @state()\n  private expanding = false;\n\n  @query(\"nav\") private nav: HTMLElement;\n  @query(\".navbar\") private navbar: HTMLElement;\n  @query(\".navbar-toggler\") private header: HTMLElement;\n  @query(\".navbar-body\") private body: HTMLElement;\n  @query(\".navbar-nav-scroll\") private navScroll: HTMLElement;\n  @query(\".navbar-end\") private navbarEnd: HTMLElement;\n\n  /** @internal Whether sgds-mainnav-profile is slotted in the profile slot */\n  @state()\n  private _hasProfileComponent = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  @property({ type: String, reflect: true })\n  tone: MainnavTone = \"default\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @state()\n  private breakpointReached = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\");\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this._handleResize();\n\n    window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    window.addEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    window.removeEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n  }\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !(this.header && e.composedPath().includes(this.header))) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.body.style.overflow = \"hidden\";\n      this.show();\n    }\n  }\n\n  private _handleResize() {\n    const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n    if (newBreakpointReachedValue !== this.breakpointReached) {\n      this.requestUpdate();\n    } else {\n      this.body ? (this.body.hidden = true) : null;\n      // this.expanded = false;\n      this.expanding = false;\n    }\n\n    if (newBreakpointReachedValue) {\n      this._handleMobileNav();\n\n      if (!this._breakpointReached) {\n        this._breakpointReached = true;\n\n        window.addEventListener(\"scrollend\", this._handleMobileNavBound);\n      }\n    } else {\n      this._handleDesktopNav();\n      this._breakpointReached = false;\n      window.removeEventListener(\"scrollend\", this._handleMobileNavBound);\n    }\n  }\n\n  private _handleMobileNavBound = this._handleMobileNav.bind(this);\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n\n    const { bottom } = this.nav.getBoundingClientRect();\n    const navBodyPaddingY =\n      parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);\n\n    this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.navbarEnd);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanding = false;\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.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  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanding = false;\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n    this.emit(\"sgds-after-hide\");\n  }\n  /** @internal */\n  @watch(\"expanding\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanding) {\n      // Show\n      await this._animateToShow();\n      this.expanded = true;\n    } else {\n      this.header?.focus();\n      // Hide\n      await this._animateToHide();\n      this.expanded = false;\n    }\n  }\n\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanding = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n\n    this.expanding = false;\n    document.body.style.removeProperty(\"overflow\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n\n    if (this._hasProfileComponent && childElements.length > 0) {\n      console.warn(\n        \"[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. \" +\n          \"The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. \" +\n          \"Use a sidebar for navigation in operational apps.\"\n      );\n    }\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n      e.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileComponent = childElements.some(el => el.tagName.toLowerCase() === \"sgds-mainnav-profile\");\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n\n    if (this._hasProfileComponent && this.defaultSlotItems.length > 0) {\n      console.warn(\n        \"[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. \" +\n          \"The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. \" +\n          \"Use a sidebar for navigation in operational apps.\"\n      );\n    }\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\"></slot>\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div class=\"navbar-end\">\n            <slot\n              name=\"non-collapsible\"\n              class=${classMap({ \"non-collapsible-empty\": !this.hasNonCollapsibleSlot })}\n            ></slot>\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n            ${!(this._hasProfileComponent && this.breakpointReached)\n              ? html`<sgds-icon-button\n                  name=${this.expanded ? \"cross\" : \"menu\"}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  tone=${this.tone !== \"default\" ? \"fixed-light\" : nothing}\n                  class=\"navbar-toggler\"\n                  @click=${this._handleSummaryClick}\n                  aria-controls=\"${this.collapseId}\"\n                  aria-expanded=\"${this.expanded}\"\n                  .ariaLabel=${\"Toggle navigation\"}\n                ></sgds-icon-button>`\n              : nothing}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.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(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["mainnavStyle"],"mappings":"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"}

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

@@ -69,34 +69,32 @@ class SgdsQuantityToggle extends validatorMixin.SgdsFormValidatorMixin(formContr
     get validationMessage() {
         return this._mixinGetValidationMessage();
     }
-    async _handleChange() {
+    async _handleChange(e) {
+        e.stopPropagation();
         const sgdsInput = await this._sgdsInput;
         if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
             sgdsInput.value = "0";
         }
         this.value = parseInt(sgdsInput.value);
         this._mixinSetFormValue();
+        this.emit("sgds-change");
         if (this._mixinShouldSkipSgdsValidation())
             return;
         this._mixinValidate(sgdsInput.input);
         this.invalid = !this._mixinReportValidity();
     }
-    async _handleInputChange() {
+    async _handleInputChange(e) {
+        e.stopPropagation();
         const sgdsInput = await this._sgdsInput;
-        if (this._mixinShouldSkipSgdsValidation()) {
-            if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
-                sgdsInput.value = "0";
-            }
-            this.value = parseInt(sgdsInput.value);
-            this._mixinSetFormValue();
-            return;
-        }
-        this.invalid = false;
         if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
             sgdsInput.value = "0";
         }
         this.value = parseInt(sgdsInput.value);
         this._mixinSetFormValue();
+        this.emit("sgds-input");
+        if (this._mixinShouldSkipSgdsValidation())
+            return;
+        this.invalid = false;
         this._mixinValidate(sgdsInput.input);
     }
     async _mixinResetFormControl() {

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-quantity-toggle.cjs.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query, 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 _handleChange() {\n    const sgdsInput = await this._sgdsInput;\n    if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n      sgdsInput.value = \"0\";\n    }\n    this.value = parseInt(sgdsInput.value);\n    this._mixinSetFormValue();\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(sgdsInput.input);\n    this.invalid = !this._mixinReportValidity();\n  }\n  private async _handleInputChange() {\n    const sgdsInput = await this._sgdsInput;\n    if (this._mixinShouldSkipSgdsValidation()) {\n      if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n        sgdsInput.value = \"0\";\n      }\n      this.value = parseInt(sgdsInput.value);\n      this._mixinSetFormValue();\n      return;\n    }\n    this.invalid = false;\n    if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n      sgdsInput.value = \"0\";\n    }\n    this.value = parseInt(sgdsInput.value);\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput.input);\n  }\n\n  private async _mixinResetFormControl() {\n    const sgdsInput = await this._sgdsInput;\n    this.value = this.defaultValue;\n    sgdsInput.input.value = this.value.toString();\n    this._mixinResetValidity(sgdsInput.input);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  private _handleInvalid() {\n    this.invalid = true;\n  }\n  private _handleValid() {\n    this.invalid = false;\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private async _onPlus(event: MouseEvent) {\n    const sgdsInput = await this._sgdsInput;\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());\n    this._validateOnClick(sgdsInput.input);\n    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=${this._handleChange}\n            @sgds-input=${this._handleInputChange}\n            @sgds-invalid=${this._handleInvalid}\n            @sgds-valid=${this._handleValid}\n            @keydown=${this._handleKeyDown}\n            ?disabled=${this.disabled}\n            ?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"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle","SgdsInput","SgdsIconButton","__decorate","query","property","defaultValue","queryAsync"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;;;;;AAUG;MACU,kBAAmB,SAAQA,qCAAsB,CAACC,6BAAkB,CAAC,CAAA;AAAlF,IAAA,WAAA,GAAA;;;QAoB6C,IAAK,CAAA,KAAA,GAAG,CAAC,CAAC;;QAGzB,IAAI,CAAA,IAAA,GAAG,CAAC,CAAC;;QAaO,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAEnB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAI7D,IAAY,CAAA,YAAA,GAAG,CAAC,CAAC;KAyOlB;AArOC;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AAED;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;AAEO,IAAA,MAAM,aAAa,GAAA;AACzB,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;AACxC,QAAA,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,KAAK,EAAE,EAAE;AACnE,YAAA,SAAS,CAAC,KAAK,GAAG,GAAG,CAAC;SACvB;QACD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;YAAE,OAAO;AAClD,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7C;AACO,IAAA,MAAM,kBAAkB,GAAA;AAC9B,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;AACxC,QAAA,IAAI,IAAI,CAAC,8BAA8B,EAAE,EAAE;AACzC,YAAA,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,KAAK,EAAE,EAAE;AACnE,gBAAA,SAAS,CAAC,KAAK,GAAG,GAAG,CAAC;aACvB;YACD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACvC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,OAAO;SACR;AACD,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;AACrB,QAAA,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,KAAK,EAAE,EAAE;AACnE,YAAA,SAAS,CAAC,KAAK,GAAG,GAAG,CAAC;SACvB;QACD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KACtC;AAEO,IAAA,MAAM,sBAAsB,GAAA;AAClC,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;AACxC,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAC/B,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AAC9C,QAAA,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KAC3C;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,MAAM,WAAW,GAAG;YAClB,WAAW;YACX,SAAS;YACT,WAAW;YACX,WAAW;YACX,YAAY;YACZ,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;YAC1D,KAAK;SACN,CAAC;;QAGF,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAEO,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;IACO,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;;IAGM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;KACvB;IAEO,MAAM,OAAO,CAAC,KAAiB,EAAA;AACrC,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;QACxC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;AAC7E,QAAA,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1B;IACO,MAAM,QAAQ,CAAC,KAAiB,EAAA;AACtC,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;QACxC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE;AAC1B,YAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAChB;aAAM;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;SAC9E;AACD,QAAA,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1B;AAED;;;;;AAKG;IACK,MAAM,gBAAgB,CAAC,KAAuB,EAAA;AACpD,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;QACxC,MAAM,SAAS,CAAC,cAAc,CAAC;QAC/B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;YAAE,OAAO;AAClD,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7C;IAES,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC;AACpF,QAAA,OAAO,IAAI,CAAC,OAAO,IAAI,gBAAgB;cACnCC,kBAAI,CAAA,CAAA;;;;;;;;;AASS,mBAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACtB,YAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAA;;AAEnE,cAAA,CAAA;cACPA,kBAAI,CAAA,CAAA,EAAG,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE,CAAC;KACrC;IAES,YAAY,GAAA;QACpB,MAAM,aAAa,GAAGA,kBAAI,CAAA,CAAA;;AAEhB,YAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AAChB,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACV,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACC,SAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;KAEhB,CAAC;AACF,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;KACpC;IAES,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAGD,kBAAI,CAAA,CAAa,UAAA,EAAA,IAAI,CAAC,UAAU,CAA2B,wBAAA,EAAA,IAAI,CAAC,QAAQ,SAAS,CAAC;AAC3G,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;IAED,MAAM,GAAA;AACJ,QAAA,OAAOA,kBAAI,CAAA,CAAA;;UAEL,IAAI,CAAC,YAAY,EAAE,CAAA;;;;;;;wBAOL,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAA;AAC1B,sBAAA,EAAA,IAAI,CAAC,QAAQ;aACxB,IAAI,CAAC,GAAG,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;AAClE,YAAA,IAAI,CAAC,QAAQ,CAAA;AACJ,mBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;;;;;AAOf,iBAAA,EAAAE,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACpB,iBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACrB,gBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnB,gBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAChB,mBAAA,EAAAC,YAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AACV,yBAAA,EAAA,IAAI,CAAC,aAAa,CAAA;AACnB,wBAAA,EAAA,IAAI,CAAC,kBAAkB,CAAA;AACrB,0BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACrB,wBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AACpB,qBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AAClB,sBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;0BACX,IAAI,CAAC,8BAA8B,EAAE,CAAA;AAC9C,eAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACT,qBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACT,wBAAA,EAAAD,sBAAS,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;;;;;;;wBAO9D,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAA;AAC7B,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACT,sBAAA,EAAA,IAAI,CAAC,QAAQ;AACzB,aAAC,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC;AAC9D,YAAA,IAAI,CAAC,QAAQ,CAAA;;;;;AAKN,iBAAA,EAAA,IAAI,CAAC,UAAU,CAA6D,0DAAA,EAAA,IAAI,CAAC,KAAK,CAAA;UAC/F,IAAI,CAAC,eAAe,EAAE,CAAA;;KAE3B,CAAC;KACH;;AAjRM,kBAAA,CAAA,MAAM,GAAG;IACd,GAAGH,6BAAkB,CAAC,MAAM;IAC5BK,0BAAqB;IACrBC,cAAS;IACTC,0BAAgB;IAChBC,yBAAmB;AACpB,CANY,CAMX;AAEF;AACO,kBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,YAAY,EAAEC,mBAAS;AACvB,IAAA,kBAAkB,EAAEC,6BAAc;AACnC,CAHkB,CAGjB;AAE2DC,gBAAA,CAAA;IAA5DC,mBAAK,CAAC,4CAA4C,CAAC;AAAoC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE3BD,gBAAA,CAAA;IAA5DC,mBAAK,CAAC,4CAA4C,CAAC;AAAqC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG9CD,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGzBF,gBAAA,CAAA;AAA3B,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAU,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGTF,gBAAA,CAAA;AAA3B,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZF,gBAAA,CAAA;AAA3B,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEGF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAwC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvCF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAyB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAoB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEnBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI7DF,gBAAA,CAAA;AADC,IAAAG,yBAAY,EAAE;AACE,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEiBH,gBAAA,CAAA;IAAjCI,wBAAU,CAAC,YAAY,CAAC;AAAwC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-quantity-toggle.cjs.js","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 _handleChange(e: Event) {\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(\"sgds-change\");\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(sgdsInput.input);\n    this.invalid = !this._mixinReportValidity();\n  }\n  private async _handleInputChange(e: Event) {\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(\"sgds-input\");\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this.invalid = false;\n    this._mixinValidate(sgdsInput.input);\n  }\n\n  private async _mixinResetFormControl() {\n    const sgdsInput = await this._sgdsInput;\n    this.value = this.defaultValue;\n    sgdsInput.input.value = this.value.toString();\n    this._mixinResetValidity(sgdsInput.input);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  private _handleInvalid() {\n    this.invalid = true;\n  }\n  private _handleValid() {\n    this.invalid = false;\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private async _onPlus(event: MouseEvent) {\n    const sgdsInput = await this._sgdsInput;\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());\n    this._validateOnClick(sgdsInput.input);\n    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=${this._handleChange}\n            @sgds-input=${this._handleInputChange}\n            @sgds-invalid=${this._handleInvalid}\n            @sgds-valid=${this._handleValid}\n            @keydown=${this._handleKeyDown}\n            ?disabled=${this.disabled}\n            ?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"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle","SgdsInput","SgdsIconButton","__decorate","query","property","defaultValue","queryAsync"],"mappings":"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"}

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

@@ -65,34 +65,32 @@ class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElement) {
     get validationMessage() {
         return this._mixinGetValidationMessage();
     }
-    async _handleChange() {
+    async _handleChange(e) {
+        e.stopPropagation();
         const sgdsInput = await this._sgdsInput;
         if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
             sgdsInput.value = "0";
         }
         this.value = parseInt(sgdsInput.value);
         this._mixinSetFormValue();
+        this.emit("sgds-change");
         if (this._mixinShouldSkipSgdsValidation())
             return;
         this._mixinValidate(sgdsInput.input);
         this.invalid = !this._mixinReportValidity();
     }
-    async _handleInputChange() {
+    async _handleInputChange(e) {
+        e.stopPropagation();
         const sgdsInput = await this._sgdsInput;
-        if (this._mixinShouldSkipSgdsValidation()) {
-            if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
-                sgdsInput.value = "0";
-            }
-            this.value = parseInt(sgdsInput.value);
-            this._mixinSetFormValue();
-            return;
-        }
-        this.invalid = false;
         if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
             sgdsInput.value = "0";
         }
         this.value = parseInt(sgdsInput.value);
         this._mixinSetFormValue();
+        this.emit("sgds-input");
+        if (this._mixinShouldSkipSgdsValidation())
+            return;
+        this.invalid = false;
         this._mixinValidate(sgdsInput.input);
     }
     async _mixinResetFormControl() {

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-quantity-toggle.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query, 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 _handleChange() {\n    const sgdsInput = await this._sgdsInput;\n    if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n      sgdsInput.value = \"0\";\n    }\n    this.value = parseInt(sgdsInput.value);\n    this._mixinSetFormValue();\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(sgdsInput.input);\n    this.invalid = !this._mixinReportValidity();\n  }\n  private async _handleInputChange() {\n    const sgdsInput = await this._sgdsInput;\n    if (this._mixinShouldSkipSgdsValidation()) {\n      if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n        sgdsInput.value = \"0\";\n      }\n      this.value = parseInt(sgdsInput.value);\n      this._mixinSetFormValue();\n      return;\n    }\n    this.invalid = false;\n    if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n      sgdsInput.value = \"0\";\n    }\n    this.value = parseInt(sgdsInput.value);\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput.input);\n  }\n\n  private async _mixinResetFormControl() {\n    const sgdsInput = await this._sgdsInput;\n    this.value = this.defaultValue;\n    sgdsInput.input.value = this.value.toString();\n    this._mixinResetValidity(sgdsInput.input);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  private _handleInvalid() {\n    this.invalid = true;\n  }\n  private _handleValid() {\n    this.invalid = false;\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private async _onPlus(event: MouseEvent) {\n    const sgdsInput = await this._sgdsInput;\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());\n    this._validateOnClick(sgdsInput.input);\n    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=${this._handleChange}\n            @sgds-input=${this._handleInputChange}\n            @sgds-invalid=${this._handleInvalid}\n            @sgds-valid=${this._handleValid}\n            @keydown=${this._handleKeyDown}\n            ?disabled=${this.disabled}\n            ?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"],"names":["formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-quantity-toggle.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query, 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 _handleChange(e: Event) {\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(\"sgds-change\");\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(sgdsInput.input);\n    this.invalid = !this._mixinReportValidity();\n  }\n  private async _handleInputChange(e: Event) {\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(\"sgds-input\");\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this.invalid = false;\n    this._mixinValidate(sgdsInput.input);\n  }\n\n  private async _mixinResetFormControl() {\n    const sgdsInput = await this._sgdsInput;\n    this.value = this.defaultValue;\n    sgdsInput.input.value = this.value.toString();\n    this._mixinResetValidity(sgdsInput.input);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  private _handleInvalid() {\n    this.invalid = true;\n  }\n  private _handleValid() {\n    this.invalid = false;\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private async _onPlus(event: MouseEvent) {\n    const sgdsInput = await this._sgdsInput;\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());\n    this._validateOnClick(sgdsInput.input);\n    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=${this._handleChange}\n            @sgds-input=${this._handleInputChange}\n            @sgds-invalid=${this._handleInvalid}\n            @sgds-valid=${this._handleValid}\n            @keydown=${this._handleKeyDown}\n            ?disabled=${this.disabled}\n            ?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"],"names":["formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle"],"mappings":";;;;;;;;;;;;;;;;;AAeA;;;;;;;;;;AAUG;MACU,kBAAmB,SAAQ,sBAAsB,CAAC,kBAAkB,CAAC,CAAA;AAAlF,IAAA,WAAA,GAAA;;;QAoB6C,IAAK,CAAA,KAAA,GAAG,CAAC,CAAC;;QAGzB,IAAI,CAAA,IAAA,GAAG,CAAC,CAAC;;QAaO,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAEnB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAI7D,IAAY,CAAA,YAAA,GAAG,CAAC,CAAC;KAsOlB;AAlOC;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AAED;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;IAEO,MAAM,aAAa,CAAC,CAAQ,EAAA;QAClC,CAAC,CAAC,eAAe,EAAE,CAAC;AACpB,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;AACxC,QAAA,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,KAAK,EAAE,EAAE;AACnE,YAAA,SAAS,CAAC,KAAK,GAAG,GAAG,CAAC;SACvB;QACD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACzB,IAAI,IAAI,CAAC,8BAA8B,EAAE;YAAE,OAAO;AAClD,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7C;IACO,MAAM,kBAAkB,CAAC,CAAQ,EAAA;QACvC,CAAC,CAAC,eAAe,EAAE,CAAC;AACpB,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;AACxC,QAAA,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,KAAK,KAAK,EAAE,EAAE;AACnE,YAAA,SAAS,CAAC,KAAK,GAAG,GAAG,CAAC;SACvB;QACD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACxB,IAAI,IAAI,CAAC,8BAA8B,EAAE;YAAE,OAAO;AAClD,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KACtC;AAEO,IAAA,MAAM,sBAAsB,GAAA;AAClC,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;AACxC,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAC/B,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AAC9C,QAAA,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KAC3C;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,MAAM,WAAW,GAAG;YAClB,WAAW;YACX,SAAS;YACT,WAAW;YACX,WAAW;YACX,YAAY;YACZ,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;YAC1D,KAAK;SACN,CAAC;;QAGF,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAEO,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;IACO,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;;IAGM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;KACvB;IAEO,MAAM,OAAO,CAAC,KAAiB,EAAA;AACrC,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;QACxC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;AAC7E,QAAA,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1B;IACO,MAAM,QAAQ,CAAC,KAAiB,EAAA;AACtC,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;QACxC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE;AAC1B,YAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAChB;aAAM;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;SAC9E;AACD,QAAA,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1B;AAED;;;;;AAKG;IACK,MAAM,gBAAgB,CAAC,KAAuB,EAAA;AACpD,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC;QACxC,MAAM,SAAS,CAAC,cAAc,CAAC;QAC/B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;YAAE,OAAO;AAClD,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7C;IAES,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC;AACpF,QAAA,OAAO,IAAI,CAAC,OAAO,IAAI,gBAAgB;cACnC,IAAI,CAAA,CAAA;;;;;;;;;AASS,mBAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACtB,YAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAA;;AAEnE,cAAA,CAAA;cACP,IAAI,CAAA,CAAA,EAAG,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE,CAAC;KACrC;IAES,YAAY,GAAA;QACpB,MAAM,aAAa,GAAG,IAAI,CAAA,CAAA;;AAEhB,YAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AAChB,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACV,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACC,SAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;KAEhB,CAAC;AACF,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;KACpC;IAES,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAAa,UAAA,EAAA,IAAI,CAAC,UAAU,CAA2B,wBAAA,EAAA,IAAI,CAAC,QAAQ,SAAS,CAAC;AAC3G,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;UAEL,IAAI,CAAC,YAAY,EAAE,CAAA;;;;;;;wBAOL,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAA;AAC1B,sBAAA,EAAA,IAAI,CAAC,QAAQ;aACxB,IAAI,CAAC,GAAG,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;AAClE,YAAA,IAAI,CAAC,QAAQ,CAAA;AACJ,mBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;;;;;AAOf,iBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACpB,iBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACrB,gBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnB,gBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAChB,mBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AACV,yBAAA,EAAA,IAAI,CAAC,aAAa,CAAA;AACnB,wBAAA,EAAA,IAAI,CAAC,kBAAkB,CAAA;AACrB,0BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACrB,wBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AACpB,qBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AAClB,sBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;0BACX,IAAI,CAAC,8BAA8B,EAAE,CAAA;AAC9C,eAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACT,qBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACT,wBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;;;;;;;wBAO9D,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAA;AAC7B,mBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACT,sBAAA,EAAA,IAAI,CAAC,QAAQ;AACzB,aAAC,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC;AAC9D,YAAA,IAAI,CAAC,QAAQ,CAAA;;;;;AAKN,iBAAA,EAAA,IAAI,CAAC,UAAU,CAA6D,0DAAA,EAAA,IAAI,CAAC,KAAK,CAAA;UAC/F,IAAI,CAAC,eAAe,EAAE,CAAA;;KAE3B,CAAC;KACH;;AA9QM,kBAAA,CAAA,MAAM,GAAG;IACd,GAAG,kBAAkB,CAAC,MAAM;IAC5BA,QAAqB;IACrBC,UAAS;IACTC,UAAgB;IAChBC,UAAmB;AACpB,CANY,CAMX;AAEF;AACO,kBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,YAAY,EAAE,SAAS;AACvB,IAAA,kBAAkB,EAAE,cAAc;AACnC,CAHkB,CAGjB;AAE2D,UAAA,CAAA;IAA5D,KAAK,CAAC,4CAA4C,CAAC;AAAoC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE3B,UAAA,CAAA;IAA5D,KAAK,CAAC,4CAA4C,CAAC;AAAqC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG9C,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGzB,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAU,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGT,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZ,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEG,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAwC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvC,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAyB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAoB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEnB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI7D,UAAA,CAAA;AADC,IAAA,YAAY,EAAE;AACE,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEiB,UAAA,CAAA;IAAjC,UAAU,CAAC,YAAY,CAAC;AAAwC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/index.cjs.js

@@ -40,46 +40,47 @@ var index$x = require('./input/index.cjs.js');
 var index$y = require('./link/index.cjs.js');
 var index$z = require('./mainnav-dropdown/index.cjs.js');
 var index$A = require('./mainnav-item/index.cjs.js');
-var index$B = require('./mainnav/index.cjs.js');
-var index$C = require('./masthead/index.cjs.js');
-var index$D = require('./modal/index.cjs.js');
-var index$E = require('./overflow-menu/index.cjs.js');
-var index$F = require('./pagination/index.cjs.js');
-var index$G = require('./progress-bar/index.cjs.js');
-var index$H = require('./quantity-toggle/index.cjs.js');
-var index$I = require('./radio-group/index.cjs.js');
-var index$J = require('./radio/index.cjs.js');
-var index$K = require('./select-option/index.cjs.js');
-var index$L = require('./select/index.cjs.js');
-var index$M = require('./sidebar-group/index.cjs.js');
-var index$N = require('./sidebar-item/index.cjs.js');
-var index$O = require('./sidebar-section/index.cjs.js');
-var index$P = require('./sidebar/index.cjs.js');
-var index$Q = require('./sidenav-item/index.cjs.js');
-var index$R = require('./sidenav-link/index.cjs.js');
-var index$S = require('./sidenav/index.cjs.js');
-var index$T = require('./skeleton/index.cjs.js');
-var index$U = require('./spinner/index.cjs.js');
-var index$V = require('./step/index.cjs.js');
-var index$W = require('./stepper/index.cjs.js');
-var index$X = require('./subnav-item/index.cjs.js');
-var index$Y = require('./subnav/index.cjs.js');
-var index$Z = require('./switch/index.cjs.js');
-var index$_ = require('./system-banner-item/index.cjs.js');
-var index$$ = require('./system-banner/index.cjs.js');
-var index$10 = require('./tab-group/index.cjs.js');
-var index$11 = require('./tab-panel/index.cjs.js');
-var index$12 = require('./tab/index.cjs.js');
-var index$13 = require('./table-cell/index.cjs.js');
-var index$14 = require('./table-head/index.cjs.js');
-var index$15 = require('./table-row/index.cjs.js');
-var index$16 = require('./table/index.cjs.js');
-var index$17 = require('./table-of-contents/index.cjs.js');
-var index$18 = require('./textarea/index.cjs.js');
-var index$19 = require('./thumbnail-card/index.cjs.js');
-var index$1a = require('./toast-container/index.cjs.js');
-var index$1b = require('./toast/index.cjs.js');
-var index$1c = require('./tooltip/index.cjs.js');
+var index$B = require('./mainnav-profile/index.cjs.js');
+var index$C = require('./mainnav/index.cjs.js');
+var index$D = require('./masthead/index.cjs.js');
+var index$E = require('./modal/index.cjs.js');
+var index$F = require('./overflow-menu/index.cjs.js');
+var index$G = require('./pagination/index.cjs.js');
+var index$H = require('./progress-bar/index.cjs.js');
+var index$I = require('./quantity-toggle/index.cjs.js');
+var index$J = require('./radio-group/index.cjs.js');
+var index$K = require('./radio/index.cjs.js');
+var index$L = require('./select-option/index.cjs.js');
+var index$M = require('./select/index.cjs.js');
+var index$N = require('./sidebar-group/index.cjs.js');
+var index$O = require('./sidebar-item/index.cjs.js');
+var index$P = require('./sidebar-section/index.cjs.js');
+var index$Q = require('./sidebar/index.cjs.js');
+var index$R = require('./sidenav-item/index.cjs.js');
+var index$S = require('./sidenav-link/index.cjs.js');
+var index$T = require('./sidenav/index.cjs.js');
+var index$U = require('./skeleton/index.cjs.js');
+var index$V = require('./spinner/index.cjs.js');
+var index$W = require('./step/index.cjs.js');
+var index$X = require('./stepper/index.cjs.js');
+var index$Y = require('./subnav-item/index.cjs.js');
+var index$Z = require('./subnav/index.cjs.js');
+var index$_ = require('./switch/index.cjs.js');
+var index$$ = require('./system-banner-item/index.cjs.js');
+var index$10 = require('./system-banner/index.cjs.js');
+var index$11 = require('./tab-group/index.cjs.js');
+var index$12 = require('./tab-panel/index.cjs.js');
+var index$13 = require('./tab/index.cjs.js');
+var index$14 = require('./table-of-contents/index.cjs.js');
+var index$15 = require('./textarea/index.cjs.js');
+var index$16 = require('./table-cell/index.cjs.js');
+var index$17 = require('./table-head/index.cjs.js');
+var index$18 = require('./table-row/index.cjs.js');
+var index$19 = require('./table/index.cjs.js');
+var index$1a = require('./thumbnail-card/index.cjs.js');
+var index$1b = require('./toast-container/index.cjs.js');
+var index$1c = require('./toast/index.cjs.js');
+var index$1d = require('./tooltip/index.cjs.js');
 
 
 
@@ -120,44 +121,45 @@ exports.SgdsInput = index$x["default"];
 exports.SgdsLink = index$y["default"];
 exports.SgdsMainnavDropdown = index$z["default"];
 exports.SgdsMainnavItem = index$A["default"];
-exports.SgdsMainnav = index$B["default"];
-exports.SgdsMasthead = index$C["default"];
-exports.SgdsModal = index$D["default"];
-exports.SgdsOverflowMenu = index$E["default"];
-exports.SgdsPagination = index$F["default"];
-exports.SgdsProgressBar = index$G["default"];
-exports.SgdsQuantityToggle = index$H["default"];
-exports.SgdsRadioGroup = index$I["default"];
-exports.SgdsRadio = index$J["default"];
-exports.SgdsSelectOption = index$K["default"];
-exports.SgdsSelect = index$L["default"];
-exports.SgdsSidebarGroup = index$M["default"];
-exports.SgdsSidebarItem = index$N["default"];
-exports.SgdsSidebarSection = index$O["default"];
-exports.SgdsSidebar = index$P["default"];
-exports.SgdsSidenavItem = index$Q["default"];
-exports.SgdsSidenavLink = index$R["default"];
-exports.SgdsSidenav = index$S["default"];
-exports.SgdsSkeleton = index$T["default"];
-exports.SgdsSpinner = index$U["default"];
-exports.SgdsStep = index$V["default"];
-exports.SgdsStepper = index$W["default"];
-exports.SgdsSubnavItem = index$X["default"];
-exports.SgdsSubnav = index$Y["default"];
-exports.SgdsSwitch = index$Z["default"];
-exports.SgdsSystemBannerItem = index$_["default"];
-exports.SgdsSystemBanner = index$$["default"];
-exports.SgdsTabGroup = index$10["default"];
-exports.SgdsTabPanel = index$11["default"];
-exports.SgdsTab = index$12["default"];
-exports.SgdsTableCell = index$13["default"];
-exports.SgdsTableHead = index$14["default"];
-exports.SgdsTableRow = index$15["default"];
-exports.SgdsTable = index$16["default"];
-exports.SgdsTableOfContents = index$17["default"];
-exports.SgdsTextarea = index$18["default"];
-exports.SgdsThumbnailCard = index$19["default"];
-exports.SgdsToastContainer = index$1a["default"];
-exports.SgdsToast = index$1b["default"];
-exports.SgdsTooltip = index$1c["default"];
+exports.SgdsMainnavProfile = index$B["default"];
+exports.SgdsMainnav = index$C["default"];
+exports.SgdsMasthead = index$D["default"];
+exports.SgdsModal = index$E["default"];
+exports.SgdsOverflowMenu = index$F["default"];
+exports.SgdsPagination = index$G["default"];
+exports.SgdsProgressBar = index$H["default"];
+exports.SgdsQuantityToggle = index$I["default"];
+exports.SgdsRadioGroup = index$J["default"];
+exports.SgdsRadio = index$K["default"];
+exports.SgdsSelectOption = index$L["default"];
+exports.SgdsSelect = index$M["default"];
+exports.SgdsSidebarGroup = index$N["default"];
+exports.SgdsSidebarItem = index$O["default"];
+exports.SgdsSidebarSection = index$P["default"];
+exports.SgdsSidebar = index$Q["default"];
+exports.SgdsSidenavItem = index$R["default"];
+exports.SgdsSidenavLink = index$S["default"];
+exports.SgdsSidenav = index$T["default"];
+exports.SgdsSkeleton = index$U["default"];
+exports.SgdsSpinner = index$V["default"];
+exports.SgdsStep = index$W["default"];
+exports.SgdsStepper = index$X["default"];
+exports.SgdsSubnavItem = index$Y["default"];
+exports.SgdsSubnav = index$Z["default"];
+exports.SgdsSwitch = index$_["default"];
+exports.SgdsSystemBannerItem = index$$["default"];
+exports.SgdsSystemBanner = index$10["default"];
+exports.SgdsTabGroup = index$11["default"];
+exports.SgdsTabPanel = index$12["default"];
+exports.SgdsTab = index$13["default"];
+exports.SgdsTableOfContents = index$14["default"];
+exports.SgdsTextarea = index$15["default"];
+exports.SgdsTableCell = index$16["default"];
+exports.SgdsTableHead = index$17["default"];
+exports.SgdsTableRow = index$18["default"];
+exports.SgdsTable = index$19["default"];
+exports.SgdsThumbnailCard = index$1a["default"];
+exports.SgdsToastContainer = index$1b["default"];
+exports.SgdsToast = index$1c["default"];
+exports.SgdsTooltip = index$1d["default"];
 //# sourceMappingURL=index.cjs.js.map

package/react/index.cjs.js.map

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