@govtechsg/sgds-web-component 2.0.1 → 2.1.0

package/components/Pagination/sgds-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-pagination.js","sources":["../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport paginationStyle from \"./pagination.css\";\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n *\n * @cssproperty --pagination-color - The text color of pagination\n * @cssproperty --pagination-bg - The background color of pagination\n * @cssproperty --pagination-hover-bg - The  background color of pagination in hover state\n * @cssproperty --pagination-active-color - The text color of pagination in active state\n * @cssproperty --pagination-active-bg - The background color of pagination in active state\n * @cssproperty --pagination-disabled-color - The text color of pagination in disabled state\n * @cssproperty --pagination-disabled-bg - The background color of pagination in disabled state\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the page limit to be displayed at any given render. e.g 3, 5, 7, 9 */\n  @property({ type: Number }) limit = 3;\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) directionVariant: directionVariant = \"icon-text\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: sizeVariant = \"sm\";\n\n  /** Toggles ellipsis buttons to be able to increment/decrement pages based on the ellipsisJump value set. By default, it will be false */\n  @property({ type: Boolean }) ellipsisOn = false;\n\n  /** When ellipsisOn is true, length of decrementing/incrementing of pages can be set with a number value*/\n  @property({ type: Number }) ellipsisJump = 3;\n  /** Enables rendering of the first-page button on the pagination, allowing users to jump to the initial page. By default, it will be false. When true, the first ellipsis will always be rendered */\n  @property({ type: Boolean }) showFirstPage = false;\n  /** Enables rendering of the last-page button on the pagination, allowing users to jump to the last page. By default, it will be false */\n  @property({ type: Boolean }) showLastPage = false;\n\n  /**@internal */\n  @watch(\"currentPage\")\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n  }\n\n  /** @internal */\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  /** @internal */\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  /** @internal */\n  private _handleNextEllipsisButton() {\n    this.currentPage = this.currentPage + this.ellipsisJump;\n    if (this.currentPage >= this.pages.length) this.currentPage = this.pages.length;\n  }\n\n  /** @internal */\n  private _handlePrevEllipsisButton() {\n    this.currentPage = this.currentPage - this.ellipsisJump;\n    if (this.currentPage <= 1) this.currentPage = this.pages[0];\n  }\n\n  /** @internal */\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  /** @internal */\n  private get _sanitizeLimit() {\n    return this.limit >= this.pages.length ? this.pages.length : this.limit;\n  }\n\n  /**@internal */\n  private _handleKeyDown(\n    event: KeyboardEvent,\n    action: string,\n    number?: number,\n    isFirstEllipsis?: boolean,\n    isPrevButton?: boolean\n  ) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"ellipsis\":\n          if (isFirstEllipsis) {\n            this._handlePrevEllipsisButton();\n          } else {\n            this._handleNextEllipsisButton();\n          }\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    let sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);\n\n    if (this.pages.length - sanitizeStartPage < this.limit) {\n      sanitizeStartPage = this.pages.length + 1 - this.limit;\n    }\n\n    if (sanitizeStartPage > 1) {\n      return html`\n        <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n            >1</span\n          >\n        </li>\n      `;\n    } else {\n      return null;\n    }\n  }\n  /** @internal */\n  private _renderPgNumbers() {\n    const pagesToShow = [];\n    let sanitizeStartPage = 1;\n    let endPage: number;\n\n    if (this.limit < this.pages.length) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);\n    }\n\n    if (this.pages.length - sanitizeStartPage < this.limit) {\n      sanitizeStartPage = this.pages.length + 1 - this.limit;\n    }\n\n    if (sanitizeStartPage <= 0) {\n      sanitizeStartPage = 1;\n    }\n\n    endPage = sanitizeStartPage + this._sanitizeLimit - 1;\n\n    if (endPage > this.pages.length) {\n      endPage = this.pages.length;\n    }\n\n    if (this.currentPage === this.pages.length) {\n      sanitizeStartPage = this.pages.length - this._sanitizeLimit + 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"visually-hidden\">Ellipsis</span>\n  `;\n\n  /** @internal */\n  private _renderFirstEllipsis = () => {\n    const isHidden = !(\n      this.pages.length !== this._sanitizeLimit && this.currentPage - Math.floor(this._sanitizeLimit / 2) > 1\n    );\n\n    if (isHidden) {\n      return null;\n    }\n\n    const tabIndex = isHidden ? -1 : 0;\n\n    return html`\n      <li\n        class=${classMap({ \"page-item\": true, \"ellipsis-disabled\": !this.ellipsisOn })}\n        @click=${this.ellipsisOn && this._handlePrevEllipsisButton}\n        @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"ellipsis\", undefined, true)}\n      >\n        <span class=\"page-link\" role=\"button\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  /** @internal */\n  private _renderLastEllipsis() {\n    const isEvenLimit = this._sanitizeLimit % 2 === 0;\n    const differentialLimitCondition = isEvenLimit\n      ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length\n      : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;\n\n    const shouldRenderEllipsis = this.pages.length !== this.limit && differentialLimitCondition;\n    const tabIndex = shouldRenderEllipsis && this.ellipsisOn ? 0 : -1;\n    if (!shouldRenderEllipsis || this._sanitizeLimit >= this.pages.length) {\n      return null;\n    }\n\n    if (this.ellipsisOn) {\n      return html`\n        <li\n          class=\"page-item ${this.ellipsisOn ? \"\" : \"ellipsis-disabled\"} \"\n          @click=${this.ellipsisOn && this._handleNextEllipsisButton}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"ellipsis\", undefined, false)}\n        >\n          <span class=\"page-link\" role=\"button\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n        </li>\n      `;\n    } else {\n      return html`\n        <li class=\"page-item ${this.ellipsisOn ? \"\" : \"ellipsis-disabled\"} \">\n          <span class=\"page-link disabled\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n        </li>\n      `;\n    }\n  }\n\n  private _renderLastPage() {\n    const isEvenLimit = this._sanitizeLimit % 2 === 0;\n    const differentialLimitCondition = isEvenLimit\n      ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length\n      : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;\n\n    if (this.pages.length !== this._sanitizeLimit && differentialLimitCondition) {\n      return html`\n        <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n            >${this.pages.length}</span\n          >\n        </li>\n      `;\n    } else {\n      return null;\n    }\n  }\n\n  /** @internal */\n  private _getLeftChevronSVG() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-chevron-left\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _getRightChevronSVG() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-chevron-right\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _renderDirectionButton(\n    directionLabel: string,\n    iconClass: string,\n    clickHandler: (event: MouseEvent) => void,\n    keydownHandler: (event: KeyboardEvent) => void,\n    directionVariant: string\n  ): TemplateResult {\n    const isDisabled = iconClass === \"left\" ? this.currentPage === 1 : this.currentPage === this.pages.length;\n\n    const tabIndex = isDisabled ? -1 : 0;\n\n    const keydownListener = (event: KeyboardEvent) => {\n      if (!isDisabled && event.key === \"Enter\") {\n        keydownHandler(event);\n      }\n    };\n\n    return html`\n      <li class=\"page-item ${isDisabled ? \"disabled\" : \"\"}\" @click=${isDisabled ? undefined : clickHandler}>\n        <span class=\"page-link\" tabindex=${tabIndex} @keydown=${keydownListener}>\n          ${directionVariant === \"icon-text\"\n            ? html`\n                ${iconClass === \"left\" ? this._getLeftChevronSVG() : \"\"} ${directionLabel}\n                ${iconClass === \"right\" ? this._getRightChevronSVG() : \"\"}\n              `\n            : directionVariant === \"text\"\n            ? html`${directionLabel}`\n            : directionVariant === \"icon\"\n            ? html`${iconClass === \"left\" ? this._getLeftChevronSVG() : this._getRightChevronSVG()}`\n            : html``}\n        </span>\n      </li>\n    `;\n  }\n\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size} sgds\" directionVariant=${this.directionVariant}>\n          ${this._renderDirectionButton(\n            \"Previous\",\n            \"left\",\n            this._handlePrevButton,\n            (e: KeyboardEvent) => this._handleKeyDown(e, \"directionButton\", undefined, undefined, true),\n            this.directionVariant\n          )}\n          ${this.showFirstPage ? this._renderFirstPage() : nothing}\n          ${this.showFirstPage || this.ellipsisOn ? this._renderFirstEllipsis() : nothing} ${this._renderPgNumbers()}\n          ${this._renderLastEllipsis()} ${this.showLastPage ? this._renderLastPage() : nothing}\n          ${this._renderDirectionButton(\n            \"Next\",\n            \"right\",\n            this._handleNextButton,\n            (e: KeyboardEvent) => this._handleKeyDown(e, \"directionButton\", undefined, undefined, false),\n            this.directionVariant\n          )}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport type directionVariant = \"icon\" | \"icon-text\" | \"text\";\n\nexport type sizeVariant = \"sm\" | \"md\";\n\nexport default SgdsPagination;\n"],"names":["paginationStyle"],"mappings":";;;;;;;;AAMA;;;;;;;;;;;;;AAaI;AACE,MAAO,cAAe,SAAQ,WAAW,CAAA;AAA/C,IAAA,WAAA,GAAA;;;QAI8B,IAAU,CAAA,UAAA,GAAG,CAAC,CAAC;;QAGf,IAAW,CAAA,WAAA,GAAG,CAAC,CAAC;;QAGhB,IAAY,CAAA,YAAA,GAAG,CAAC,CAAC;;QAGjB,IAAK,CAAA,KAAA,GAAG,CAAC,CAAC;;QAGV,IAAgB,CAAA,gBAAA,GAAqB,WAAW,CAAC;;QAGjD,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;;QAGxB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAGpB,IAAY,CAAA,YAAA,GAAG,CAAC,CAAC;;QAEhB,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;;QAEtB,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;QA6J1C,IAAe,CAAA,eAAA,GAAG,IAAI,CAAA,CAAA;;;GAG7B,CAAC;;QAGM,IAAoB,CAAA,oBAAA,GAAG,MAAK;AAClC,YAAA,MAAM,QAAQ,GAAG,EACf,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,GAAG,CAAC,CACxG,CAAC;YAEF,IAAI,QAAQ,EAAE;AACZ,gBAAA,OAAO,IAAI,CAAC;aACb;AAED,YAAA,MAAM,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEnC,YAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAA;AACrE,eAAA,EAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,yBAAyB,CAAA;AAC/C,iBAAA,EAAA,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;;yDAEnC,QAAQ,CAAA,CAAA,EAAI,IAAI,CAAC,eAAe,CAAA;;KAEpF,CAAC;AACJ,SAAC,CAAC;KA4JH;;IA/UC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KAC9E;;AAGO,IAAA,gBAAgB,CAAC,KAAiB,EAAA;AACxC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC7C,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEzC,IAAI,SAAS,EAAE;YACb,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1D,YAAA,IAAI,WAAW,KAAK,IAAI,CAAC,WAAW,EAAE;AACpC,gBAAA,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;aAChC;SACF;KACF;;IAGO,iBAAiB,GAAA;QACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;KACzC;;IAGO,iBAAiB,GAAA;QACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;KACzC;;IAGO,yBAAyB,GAAA;QAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC;QACxD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;KACjF;;IAGO,yBAAyB,GAAA;QAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC;AACxD,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC;YAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAC7D;;AAGD,IAAA,IAAY,KAAK,GAAA;QACf,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE;AACxE,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SACf;AACD,QAAA,OAAO,KAAK,CAAC;KACd;;AAGD,IAAA,IAAY,cAAc,GAAA;QACxB,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;KACzE;;IAGO,cAAc,CACpB,KAAoB,EACpB,MAAc,EACd,MAAe,EACf,eAAyB,EACzB,YAAsB,EAAA;AAEtB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,QAAQ,MAAM;AACZ,gBAAA,KAAK,YAAY;AACf,oBAAA,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;oBAC1B,MAAM;AACR,gBAAA,KAAK,UAAU;oBACb,IAAI,eAAe,EAAE;wBACnB,IAAI,CAAC,yBAAyB,EAAE,CAAC;qBAClC;yBAAM;wBACL,IAAI,CAAC,yBAAyB,EAAE,CAAC;qBAClC;oBACD,MAAM;AACR,gBAAA,KAAK,iBAAiB;oBACpB,IAAI,YAAY,EAAE;wBAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;qBAC1B;yBAAM;wBACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;qBAC1B;oBACD,MAAM;aACT;SACF;KACF;IAEO,gBAAgB,GAAA;AACtB,QAAA,IAAI,iBAAiB,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;AAE/E,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,iBAAiB,GAAG,IAAI,CAAC,KAAK,EAAE;AACtD,YAAA,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;SACxD;AAED,QAAA,IAAI,iBAAiB,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,IAAI,CAAA,CAAA;AACC,gBAAA,EAAA,CAAC,CAAqB,kBAAA,EAAA,IAAI,CAAC,WAAW,KAAK,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAA;;;;AAIzD,mBAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;AACnB,qBAAA,EAAA,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC,CAAA;;;;OAI7E,CAAC;SACH;aAAM;AACL,YAAA,OAAO,IAAI,CAAC;SACb;KACF;;IAEO,gBAAgB,GAAA;QACtB,MAAM,WAAW,GAAG,EAAE,CAAC;QACvB,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAC1B,QAAA,IAAI,OAAe,CAAC;QAEpB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AAClC,YAAA,iBAAiB,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;SAC5E;AAED,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,iBAAiB,GAAG,IAAI,CAAC,KAAK,EAAE;AACtD,YAAA,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;SACxD;AAED,QAAA,IAAI,iBAAiB,IAAI,CAAC,EAAE;YAC1B,iBAAiB,GAAG,CAAC,CAAC;SACvB;QAED,OAAO,GAAG,iBAAiB,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;QAEtD,IAAI,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AAC/B,YAAA,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;SAC7B;QAED,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AAC1C,YAAA,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;SACjE;AAED,QAAA,KAAK,IAAI,CAAC,GAAG,iBAAiB,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE;AACjD,YAAA,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SACrB;QACD,OAAO,WAAW,CAAC,GAAG,CACpB,MAAM,IAAI,IAAI,CAAA,CAAA;AACF,gBAAA,EAAA,MAAM,CAAqB,kBAAA,EAAA,IAAI,CAAC,WAAW,KAAK,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA;;;;AAInE,mBAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;AACnB,qBAAA,EAAA,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,CAAC,CAAA;eAC1E,MAAM,CAAA;;;AAGd,MAAA,CAAA,CACF,CAAC;KACH;;IA+BO,mBAAmB,GAAA;QACzB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,0BAA0B,GAAG,WAAW;cAC1C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;cAC3E,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAE/E,QAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,IAAI,0BAA0B,CAAC;AAC5F,QAAA,MAAM,QAAQ,GAAG,oBAAoB,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAClE,QAAA,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACrE,YAAA,OAAO,IAAI,CAAC;SACb;AAED,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,OAAO,IAAI,CAAA,CAAA;;6BAEY,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,mBAAmB,CAAA;AACpD,iBAAA,EAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,yBAAyB,CAAA;AAC/C,mBAAA,EAAA,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,CAAA;;2DAEpC,QAAQ,CAAA,CAAA,EAAI,IAAI,CAAC,eAAe,CAAA;;OAEpF,CAAC;SACH;aAAM;AACL,YAAA,OAAO,IAAI,CAAA,CAAA;+BACc,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,mBAAmB,CAAA;sDACnB,QAAQ,CAAA,CAAA,EAAI,IAAI,CAAC,eAAe,CAAA;;OAE/E,CAAC;SACH;KACF;IAEO,eAAe,GAAA;QACrB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,0BAA0B,GAAG,WAAW;cAC1C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;cAC3E,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAE/E,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,IAAI,0BAA0B,EAAE;AAC3E,YAAA,OAAO,IAAI,CAAA,CAAA;kBACC,IAAI,CAAC,KAAK,CAAC,MAAM,qBAAqB,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA;;;;AAIzF,mBAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;AACnB,qBAAA,EAAA,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;eACrF,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;;;OAGzB,CAAC;SACH;aAAM;AACL,YAAA,OAAO,IAAI,CAAC;SACb;KACF;;IAGO,kBAAkB,GAAA;AACxB,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;KAcV,CAAC;KACH;;IAGO,mBAAmB,GAAA;AACzB,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;KAcV,CAAC;KACH;;IAGO,sBAAsB,CAC5B,cAAsB,EACtB,SAAiB,EACjB,YAAyC,EACzC,cAA8C,EAC9C,gBAAwB,EAAA;QAExB,MAAM,UAAU,GAAG,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC,WAAW,KAAK,CAAC,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAE1G,QAAA,MAAM,QAAQ,GAAG,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAErC,QAAA,MAAM,eAAe,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBACxC,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;AACH,SAAC,CAAC;AAEF,QAAA,OAAO,IAAI,CAAA,CAAA;AACc,2BAAA,EAAA,UAAU,GAAG,UAAU,GAAG,EAAE,CAAY,SAAA,EAAA,UAAU,GAAG,SAAS,GAAG,YAAY,CAAA;AAC/D,yCAAA,EAAA,QAAQ,aAAa,eAAe,CAAA;AACnE,UAAA,EAAA,gBAAgB,KAAK,WAAW;cAC9B,IAAI,CAAA,CAAA;AACA,gBAAA,EAAA,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,IAAI,cAAc,CAAA;AACvE,gBAAA,EAAA,SAAS,KAAK,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAA;AAC1D,cAAA,CAAA;cACD,gBAAgB,KAAK,MAAM;AAC7B,kBAAE,IAAI,CAAA,CAAA,EAAG,cAAc,CAAE,CAAA;kBACvB,gBAAgB,KAAK,MAAM;sBAC3B,IAAI,CAAA,CAAA,EAAG,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAE,CAAA;sBACtF,IAAI,CAAA,CAAE,CAAA,CAAA;;;KAGf,CAAC;KACH;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,IAAI,CAA2B,wBAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;AACxF,UAAA,EAAA,IAAI,CAAC,sBAAsB,CAC3B,UAAU,EACV,MAAM,EACN,IAAI,CAAC,iBAAiB,EACtB,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,EAC3F,IAAI,CAAC,gBAAgB,CACtB,CAAA;AACC,UAAA,EAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,OAAO,CAAA;YACtD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,gBAAgB,EAAE,CAAA;AACxG,UAAA,EAAA,IAAI,CAAC,mBAAmB,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,OAAO,CAAA;AAClF,UAAA,EAAA,IAAI,CAAC,sBAAsB,CAC3B,MAAM,EACN,OAAO,EACP,IAAI,CAAC,iBAAiB,EACtB,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,EAC5F,IAAI,CAAC,gBAAgB,CACtB,CAAA;;;KAGN,CAAC;KACH;;AA9WM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAe,CAA1C,CAA4C;AAG7B,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAgB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAkB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAW,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGV,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAkD,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjD,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA0B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGxB,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAoB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpB,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAkB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEhB,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAuB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEtB,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAsB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIlD,UAAA,CAAA;IADC,KAAK,CAAC,aAAa,CAAC;AAGpB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-pagination.js","sources":["../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport paginationStyle from \"./pagination.css\";\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n *\n * @cssproperty --pagination-color - The text color of pagination\n * @cssproperty --pagination-bg - The background color of pagination\n * @cssproperty --pagination-hover-bg - The  background color of pagination in hover state\n * @cssproperty --pagination-active-color - The text color of pagination in active state\n * @cssproperty --pagination-active-bg - The background color of pagination in active state\n * @cssproperty --pagination-disabled-color - The text color of pagination in disabled state\n * @cssproperty --pagination-disabled-bg - The background color of pagination in disabled state\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the page limit to be displayed at any given render. e.g 3, 5, 7, 9 */\n  @property({ type: Number }) limit = 3;\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) directionVariant: directionVariant = \"icon-text\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: sizeVariant = \"sm\";\n\n  /** Toggles ellipsis buttons to be able to increment/decrement pages based on the ellipsisJump value set. By default, it will be false */\n  @property({ type: Boolean }) ellipsisOn = false;\n\n  /** When ellipsisOn is true, length of decrementing/incrementing of pages can be set with a number value*/\n  @property({ type: Number }) ellipsisJump = 3;\n  /** Enables rendering of the first-page button on the pagination, allowing users to jump to the initial page. By default, it will be false. When true, the first ellipsis will always be rendered */\n  @property({ type: Boolean }) showFirstPage = false;\n  /** Enables rendering of the last-page button on the pagination, allowing users to jump to the last page. By default, it will be false */\n  @property({ type: Boolean }) showLastPage = false;\n\n  /**@internal */\n  @watch(\"currentPage\")\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n  }\n\n  /** @internal */\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  /** @internal */\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  /** @internal */\n  private _handleNextEllipsisButton() {\n    this.currentPage = this.currentPage + this.ellipsisJump;\n    if (this.currentPage >= this.pages.length) this.currentPage = this.pages.length;\n  }\n\n  /** @internal */\n  private _handlePrevEllipsisButton() {\n    this.currentPage = this.currentPage - this.ellipsisJump;\n    if (this.currentPage <= 1) this.currentPage = this.pages[0];\n  }\n\n  /** @internal */\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  /** @internal */\n  private get _sanitizeLimit() {\n    return this.limit >= this.pages.length ? this.pages.length : this.limit;\n  }\n\n  /**@internal */\n  private _handleKeyDown(\n    event: KeyboardEvent,\n    action: string,\n    number?: number,\n    isFirstEllipsis?: boolean,\n    isPrevButton?: boolean\n  ) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"ellipsis\":\n          if (isFirstEllipsis) {\n            this._handlePrevEllipsisButton();\n          } else {\n            this._handleNextEllipsisButton();\n          }\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    let sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);\n\n    if (this.pages.length - sanitizeStartPage < this.limit) {\n      sanitizeStartPage = this.pages.length + 1 - this.limit;\n    }\n\n    if (sanitizeStartPage > 1) {\n      return html`\n        <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n            >1</span\n          >\n        </li>\n      `;\n    } else {\n      return null;\n    }\n  }\n  /** @internal */\n  private _renderPgNumbers() {\n    const pagesToShow = [];\n    let sanitizeStartPage = 1;\n    let endPage: number;\n\n    if (this.limit < this.pages.length) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);\n    }\n\n    if (this.pages.length - sanitizeStartPage < this.limit) {\n      sanitizeStartPage = this.pages.length + 1 - this.limit;\n    }\n\n    if (sanitizeStartPage <= 0) {\n      sanitizeStartPage = 1;\n    }\n\n    endPage = sanitizeStartPage + this._sanitizeLimit - 1;\n\n    if (endPage > this.pages.length) {\n      endPage = this.pages.length;\n    }\n\n    if (this.currentPage === this.pages.length) {\n      sanitizeStartPage = this.pages.length - this._sanitizeLimit + 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"visually-hidden\">Ellipsis</span>\n  `;\n\n  /** @internal */\n  private _renderFirstEllipsis = () => {\n    const isHidden = !(\n      this.pages.length !== this._sanitizeLimit && this.currentPage - Math.floor(this._sanitizeLimit / 2) > 1\n    );\n\n    if (isHidden) {\n      return null;\n    }\n\n    const tabIndex = isHidden ? -1 : 0;\n\n    return html`\n      <li\n        class=${classMap({ \"page-item\": true, \"ellipsis-disabled\": !this.ellipsisOn })}\n        @click=${this.ellipsisOn && this._handlePrevEllipsisButton}\n        @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"ellipsis\", undefined, true)}\n      >\n        <span class=\"page-link\" role=\"button\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  /** @internal */\n  private _renderLastEllipsis() {\n    const isEvenLimit = this._sanitizeLimit % 2 === 0;\n    const differentialLimitCondition = isEvenLimit\n      ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length\n      : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;\n\n    const shouldRenderEllipsis = this.pages.length !== this.limit && differentialLimitCondition;\n    const tabIndex = shouldRenderEllipsis && this.ellipsisOn ? 0 : -1;\n    if (!shouldRenderEllipsis || this._sanitizeLimit >= this.pages.length) {\n      return null;\n    }\n\n    if (this.ellipsisOn) {\n      return html`\n        <li\n          class=\"page-item ${this.ellipsisOn ? \"\" : \"ellipsis-disabled\"} \"\n          @click=${this.ellipsisOn && this._handleNextEllipsisButton}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"ellipsis\", undefined, false)}\n        >\n          <span class=\"page-link\" role=\"button\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n        </li>\n      `;\n    } else {\n      return html`\n        <li class=\"page-item ${this.ellipsisOn ? \"\" : \"ellipsis-disabled\"} \">\n          <span class=\"page-link disabled\" tabindex=${tabIndex}>${this.ellipsisContent}</span>\n        </li>\n      `;\n    }\n  }\n\n  private _renderLastPage() {\n    const isEvenLimit = this._sanitizeLimit % 2 === 0;\n    const differentialLimitCondition = isEvenLimit\n      ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length\n      : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;\n\n    if (this.pages.length !== this._sanitizeLimit && differentialLimitCondition) {\n      return html`\n        <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n          <span\n            class=\"page-link\"\n            tabindex=\"0\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n            >${this.pages.length}</span\n          >\n        </li>\n      `;\n    } else {\n      return null;\n    }\n  }\n\n  /** @internal */\n  private _getLeftChevronSVG() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-chevron-left\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _getRightChevronSVG() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-chevron-right\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _renderDirectionButton(\n    directionLabel: string,\n    iconClass: string,\n    clickHandler: (event: MouseEvent) => void,\n    keydownHandler: (event: KeyboardEvent) => void,\n    directionVariant: string\n  ): TemplateResult {\n    const isDisabled = iconClass === \"left\" ? this.currentPage === 1 : this.currentPage === this.pages.length;\n\n    const tabIndex = isDisabled ? -1 : 0;\n\n    const keydownListener = (event: KeyboardEvent) => {\n      if (!isDisabled && event.key === \"Enter\") {\n        keydownHandler(event);\n      }\n    };\n\n    return html`\n      <li class=\"page-item ${isDisabled ? \"disabled\" : \"\"}\" @click=${isDisabled ? undefined : clickHandler}>\n        <span class=\"page-link\" tabindex=${tabIndex} @keydown=${keydownListener}>\n          ${directionVariant === \"icon-text\"\n            ? html`\n                ${iconClass === \"left\" ? this._getLeftChevronSVG() : \"\"} ${directionLabel}\n                ${iconClass === \"right\" ? this._getRightChevronSVG() : \"\"}\n              `\n            : directionVariant === \"text\"\n            ? html`${directionLabel}`\n            : directionVariant === \"icon\"\n            ? html`${iconClass === \"left\" ? this._getLeftChevronSVG() : this._getRightChevronSVG()}`\n            : html``}\n        </span>\n      </li>\n    `;\n  }\n\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size} sgds\" directionVariant=${this.directionVariant}>\n          ${this._renderDirectionButton(\n            \"Previous\",\n            \"left\",\n            this._handlePrevButton,\n            (e: KeyboardEvent) => this._handleKeyDown(e, \"directionButton\", undefined, undefined, true),\n            this.directionVariant\n          )}\n          ${this.showFirstPage ? this._renderFirstPage() : nothing}\n          ${this.showFirstPage || this.ellipsisOn ? this._renderFirstEllipsis() : nothing} ${this._renderPgNumbers()}\n          ${this._renderLastEllipsis()} ${this.showLastPage ? this._renderLastPage() : nothing}\n          ${this._renderDirectionButton(\n            \"Next\",\n            \"right\",\n            this._handleNextButton,\n            (e: KeyboardEvent) => this._handleKeyDown(e, \"directionButton\", undefined, undefined, false),\n            this.directionVariant\n          )}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport type directionVariant = \"icon\" | \"icon-text\" | \"text\";\n\nexport type sizeVariant = \"sm\" | \"md\";\n\nexport default SgdsPagination;\n"],"names":["paginationStyle"],"mappings":"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"}

package/components/Progress/progress-bar.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Progress/progress-bar.cjs.js.map

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

package/components/Progress/progress-bar.js

@@ -1,3 +1,4 @@
+'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{width:100%}:host([variant=secondary]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-secondary)}:host([variant=warning]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-warning)}:host([variant=danger]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-danger)}:host([variant=success]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-success)}:host([variant=info]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-info)}:host([variant=dark]) .progress-bar{--sgds-progress-bar-bg:var(--sgds-dark)}progress{vertical-align:baseline}.progress-bar{--sgds-progress-bar-bg:var(--sgds-primary);--sgds-progress-bar-transition:width 0.6s ease;--sgds-progress-bar-color:var(--sgds-white);--sgds-progress-bar-font-size:0.75rem;background-color:var(--sgds-progress-bar-bg);color:var(--sgds-progress-bar-color);display:flex;flex-direction:column;font-size:var(--sgds-progress-bar-font-size);height:100%;justify-content:center;overflow:hidden;text-align:center;transition:var(--sgds-progress-bar-transition);white-space:nowrap}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}`;

package/components/Progress/progress-bar.js.map

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

package/components/Progress/progress.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Progress/progress.cjs.js.map

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

package/components/Progress/progress.js

@@ -1,3 +1,4 @@
+'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{--progress-height:1rem;display:block}.progress{background-color:var(--sgds-gray-200);border-radius:var(--sgds-border-radius);display:flex;height:var(--progress-height);overflow:hidden}`;

package/components/Progress/progress.js.map

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

package/components/Progress/sgds-progress-bar.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Progress/sgds-progress-bar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-progress-bar.cjs.js","sources":["../../../src/components/Progress/sgds-progress-bar.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressBarStyle from \"./progress-bar.css\";\nexport type ProgressBarVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"dark\";\n\nexport class SgdsProgressBar extends SgdsElement {\n  static styles = [progressBarStyle];\n\n  /** The background color of the progress bar */\n  @property({ type: String, reflect: true }) variant: ProgressBarVariant;\n  /**\n   * The current progress as a percentage, from 0 to 100.\n   */\n  @property({ type: Number, reflect: true }) value: number;\n\n  /**\n   * Sets the minimun aria range for assistive devices.\n   *\n   * The aria-valuemin attribute defines the minimun allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamin: number;\n  /**\n   * Sets the maximum aria range for assistive devices.\n   *\n   * The aria-valuemax attribute defines the maximum allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamax: number;\n  /**\n   * Sets the aria label for assistive devices.\n   */\n  @property({ type: String, reflect: true }) arialabel = \"\";\n\n  /** Add label on top of progress bar */\n  @property({ type: String, reflect: true }) label = \"\";\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"progress-bar\": true\n        })}\n        role=\"progressbar\"\n        style=${styleMap({ width: `${this.value}%` })}\n        aria-label=${this.arialabel}\n        aria-valuenow=${this.value}\n        aria-valuemin=${this.ariamin}\n        aria-valuemax=${this.ariamax}\n      >\n        ${this.label ? html`${this.label}` : undefined}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgressBar;\n"],"names":["SgdsElement","html","classMap","styleMap","progressBarStyle","__decorate","property"],"mappings":";;;;;;;;;;;;AAQM,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAsBE;;AAEG;QACwC,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;;QAGf,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;KAmBvD;IAjBC,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;SACrB,CAAC,CAAA;;gBAEMC,oBAAQ,CAAC,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA,EAAE,CAAC,CAAA;AAChC,mBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACX,sBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;AACV,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACZ,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAE1B,QAAA,EAAA,IAAI,CAAC,KAAK,GAAGF,QAAI,CAAA,CAAG,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,SAAS,CAAA;;KAEjD,CAAC;KACH;;AA7CM,eAAA,CAAA,MAAM,GAAG,CAACG,sBAAgB,CAAC,CAAC;AAGQC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5BD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOdD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMhBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGfD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-progress-bar.cjs.js","sources":["../../../src/components/Progress/sgds-progress-bar.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressBarStyle from \"./progress-bar.css\";\nexport type ProgressBarVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"dark\";\n\nexport class SgdsProgressBar extends SgdsElement {\n  static styles = [progressBarStyle];\n\n  /** The background color of the progress bar */\n  @property({ type: String, reflect: true }) variant: ProgressBarVariant;\n  /**\n   * The current progress as a percentage, from 0 to 100.\n   */\n  @property({ type: Number, reflect: true }) value: number;\n\n  /**\n   * Sets the minimun aria range for assistive devices.\n   *\n   * The aria-valuemin attribute defines the minimun allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamin: number;\n  /**\n   * Sets the maximum aria range for assistive devices.\n   *\n   * The aria-valuemax attribute defines the maximum allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamax: number;\n  /**\n   * Sets the aria label for assistive devices.\n   */\n  @property({ type: String, reflect: true }) arialabel = \"\";\n\n  /** Add label on top of progress bar */\n  @property({ type: String, reflect: true }) label = \"\";\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"progress-bar\": true\n        })}\n        role=\"progressbar\"\n        style=${styleMap({ width: `${this.value}%` })}\n        aria-label=${this.arialabel}\n        aria-valuenow=${this.value}\n        aria-valuemin=${this.ariamin}\n        aria-valuemax=${this.ariamax}\n      >\n        ${this.label ? html`${this.label}` : undefined}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgressBar;\n"],"names":["SgdsElement","html","classMap","styleMap","progressBarStyle","__decorate","property"],"mappings":";;;;;;;;;;;;;AAQM,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAsBE;;AAEG;QACwC,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;;QAGf,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;KAmBvD;IAjBC,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;SACrB,CAAC,CAAA;;gBAEMC,oBAAQ,CAAC,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA,EAAE,CAAC,CAAA;AAChC,mBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACX,sBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;AACV,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACZ,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAE1B,QAAA,EAAA,IAAI,CAAC,KAAK,GAAGF,QAAI,CAAA,CAAG,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,SAAS,CAAA;;KAEjD,CAAC;KACH;;AA7CM,eAAA,CAAA,MAAM,GAAG,CAACG,sBAAgB,CAAC,CAAC;AAGQC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5BD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOdD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMhBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGfD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/components/Progress/sgds-progress-bar.js

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

package/components/Progress/sgds-progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-progress-bar.js","sources":["../../../src/components/Progress/sgds-progress-bar.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressBarStyle from \"./progress-bar.css\";\nexport type ProgressBarVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"dark\";\n\nexport class SgdsProgressBar extends SgdsElement {\n  static styles = [progressBarStyle];\n\n  /** The background color of the progress bar */\n  @property({ type: String, reflect: true }) variant: ProgressBarVariant;\n  /**\n   * The current progress as a percentage, from 0 to 100.\n   */\n  @property({ type: Number, reflect: true }) value: number;\n\n  /**\n   * Sets the minimun aria range for assistive devices.\n   *\n   * The aria-valuemin attribute defines the minimun allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamin: number;\n  /**\n   * Sets the maximum aria range for assistive devices.\n   *\n   * The aria-valuemax attribute defines the maximum allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamax: number;\n  /**\n   * Sets the aria label for assistive devices.\n   */\n  @property({ type: String, reflect: true }) arialabel = \"\";\n\n  /** Add label on top of progress bar */\n  @property({ type: String, reflect: true }) label = \"\";\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"progress-bar\": true\n        })}\n        role=\"progressbar\"\n        style=${styleMap({ width: `${this.value}%` })}\n        aria-label=${this.arialabel}\n        aria-valuenow=${this.value}\n        aria-valuemin=${this.ariamin}\n        aria-valuemax=${this.ariamax}\n      >\n        ${this.label ? html`${this.label}` : undefined}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgressBar;\n"],"names":["progressBarStyle"],"mappings":";;;;;;;;AAQM,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAsBE;;AAEG;QACwC,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;;QAGf,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;KAmBvD;IAjBC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;SACrB,CAAC,CAAA;;gBAEM,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA,EAAE,CAAC,CAAA;AAChC,mBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACX,sBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;AACV,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACZ,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAE1B,QAAA,EAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA,CAAG,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,SAAS,CAAA;;KAEjD,CAAC;KACH;;AA7CM,eAAA,CAAA,MAAM,GAAG,CAACA,QAAgB,CAAC,CAAC;AAGQ,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5B,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOd,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-progress-bar.js","sources":["../../../src/components/Progress/sgds-progress-bar.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressBarStyle from \"./progress-bar.css\";\nexport type ProgressBarVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"dark\";\n\nexport class SgdsProgressBar extends SgdsElement {\n  static styles = [progressBarStyle];\n\n  /** The background color of the progress bar */\n  @property({ type: String, reflect: true }) variant: ProgressBarVariant;\n  /**\n   * The current progress as a percentage, from 0 to 100.\n   */\n  @property({ type: Number, reflect: true }) value: number;\n\n  /**\n   * Sets the minimun aria range for assistive devices.\n   *\n   * The aria-valuemin attribute defines the minimun allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamin: number;\n  /**\n   * Sets the maximum aria range for assistive devices.\n   *\n   * The aria-valuemax attribute defines the maximum allowed value for a range widget.\n   */\n  @property({ type: Number, reflect: true }) ariamax: number;\n  /**\n   * Sets the aria label for assistive devices.\n   */\n  @property({ type: String, reflect: true }) arialabel = \"\";\n\n  /** Add label on top of progress bar */\n  @property({ type: String, reflect: true }) label = \"\";\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"progress-bar\": true\n        })}\n        role=\"progressbar\"\n        style=${styleMap({ width: `${this.value}%` })}\n        aria-label=${this.arialabel}\n        aria-valuenow=${this.value}\n        aria-valuemin=${this.ariamin}\n        aria-valuemax=${this.ariamax}\n      >\n        ${this.label ? html`${this.label}` : undefined}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgressBar;\n"],"names":["progressBarStyle"],"mappings":";;;;;;;;;AAQM,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAsBE;;AAEG;QACwC,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;;QAGf,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;KAmBvD;IAjBC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;SACrB,CAAC,CAAA;;gBAEM,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA,EAAE,CAAC,CAAA;AAChC,mBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACX,sBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;AACV,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACZ,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAE1B,QAAA,EAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA,CAAG,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,SAAS,CAAA;;KAEjD,CAAC;KACH;;AA7CM,eAAA,CAAA,MAAM,GAAG,CAACA,QAAgB,CAAC,CAAC;AAGQ,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5B,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOd,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Progress/sgds-progress.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Progress/sgds-progress.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-progress.cjs.js","sources":["../../../src/components/Progress/sgds-progress.ts"],"sourcesContent":["import { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressStyle from \"./progress.css\";\nimport bgStyles from \"../../styles/bg-variants.css\";\n\n/**\n * @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.\n * @slot default - slot for progress-bar\n *\n * @cssprop --progress-height - Sets the height of the progress wrapper.\n */\n\nexport class SgdsProgress extends SgdsElement {\n  static styles = [...SgdsElement.styles, bgStyles, progressStyle];\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          progress: true\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgress;\n"],"names":["SgdsElement","html","classMap","bgStyles","progressStyle"],"mappings":";;;;;;;;;;AAMA;;;;;AAKG;AAEG,MAAO,YAAa,SAAQA,sBAAW,CAAA;IAG3C,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,QAAQ,EAAE,IAAI;SACf,CAAC,CAAA;;;;KAIL,CAAC;KACH;;AAZM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,qBAAQ,EAAEC,mBAAa,CAAC;;;;;"}
+{"version":3,"file":"sgds-progress.cjs.js","sources":["../../../src/components/Progress/sgds-progress.ts"],"sourcesContent":["import { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressStyle from \"./progress.css\";\nimport bgStyles from \"../../styles/bg-variants.css\";\n\n/**\n * @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.\n * @slot default - slot for progress-bar\n *\n * @cssprop --progress-height - Sets the height of the progress wrapper.\n */\n\nexport class SgdsProgress extends SgdsElement {\n  static styles = [...SgdsElement.styles, bgStyles, progressStyle];\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          progress: true\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgress;\n"],"names":["SgdsElement","html","classMap","bgStyles","progressStyle"],"mappings":";;;;;;;;;;;AAMA;;;;;AAKG;AAEG,MAAO,YAAa,SAAQA,sBAAW,CAAA;IAG3C,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,QAAQ,EAAE,IAAI;SACf,CAAC,CAAA;;;;KAIL,CAAC;KACH;;AAZM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,qBAAQ,EAAEC,mBAAa,CAAC;;;;;"}

package/components/Progress/sgds-progress.js

@@ -1,3 +1,4 @@
+'use client';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { html } from 'lit';

package/components/Progress/sgds-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-progress.js","sources":["../../../src/components/Progress/sgds-progress.ts"],"sourcesContent":["import { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressStyle from \"./progress.css\";\nimport bgStyles from \"../../styles/bg-variants.css\";\n\n/**\n * @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.\n * @slot default - slot for progress-bar\n *\n * @cssprop --progress-height - Sets the height of the progress wrapper.\n */\n\nexport class SgdsProgress extends SgdsElement {\n  static styles = [...SgdsElement.styles, bgStyles, progressStyle];\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          progress: true\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgress;\n"],"names":["bgStyles","progressStyle"],"mappings":";;;;;;AAMA;;;;;AAKG;AAEG,MAAO,YAAa,SAAQ,WAAW,CAAA;IAG3C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,QAAQ,EAAE,IAAI;SACf,CAAC,CAAA;;;;KAIL,CAAC;KACH;;AAZM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAQ,EAAEC,UAAa,CAAC;;;;"}
+{"version":3,"file":"sgds-progress.js","sources":["../../../src/components/Progress/sgds-progress.ts"],"sourcesContent":["import { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport progressStyle from \"./progress.css\";\nimport bgStyles from \"../../styles/bg-variants.css\";\n\n/**\n * @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.\n * @slot default - slot for progress-bar\n *\n * @cssprop --progress-height - Sets the height of the progress wrapper.\n */\n\nexport class SgdsProgress extends SgdsElement {\n  static styles = [...SgdsElement.styles, bgStyles, progressStyle];\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          progress: true\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsProgress;\n"],"names":["bgStyles","progressStyle"],"mappings":";;;;;;;AAMA;;;;;AAKG;AAEG,MAAO,YAAa,SAAQ,WAAW,CAAA;IAG3C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,QAAQ,EAAE,IAAI;SACf,CAAC,CAAA;;;;KAIL,CAAC;KACH;;AAZM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAQ,EAAEC,UAAa,CAAC;;;;"}

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

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

package/components/QuantityToggle/quantity-toggle.js

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

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-quantity-toggle.cjs.js","sources":["../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport SgdsButton, { ButtonVariant } from \"../Button/sgds-button\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @csspart base - The base wrapper of the quantity toggle component.\n * @csspart button - The plus and minus button of quantity toggle\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends ScopedElementsMixin(SgdsElement) implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, svgStyles, quantityToggleStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton,\n      \"sgds-input\": SgdsInput\n    };\n  }\n  /**@internal */\n  @query(\"sgds-input\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n\n  /** The name of the input */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The input's minimum value. */\n  @property({ type: Number, reflect: true }) min: number;\n  /** The input's maximum value. */\n  @property({ type: Number, reflect: true }) max: number;\n\n  /**Controls the size of the quantity toggle */\n  @property() size: \"sm\" | \"md\" = \"md\";\n\n  /**The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** Disables the entire quantity toggle  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The quantity toggle's button variants */\n  @property({ type: String }) buttonVariant: ButtonVariant = \"primary\";\n\n  /**\n   * Controls the incremental / decremental value of the input\n   */\n  @property({ type: Number }) step = 1;\n\n  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = 0;\n\n  /** @internal The id forwarded to input element */\n  private inputId: string = genId(\"quantity-toggle\", \"input\");\n\n  private _handleChange() {\n    if (parseInt(this.input.value) < this.step || this.input.value === \"\") {\n      this.input.value = \"0\";\n    }\n    this.value = parseInt(this.input.value);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private _onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  private _onMinus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.value < this.step) {\n      this.value = 0;\n    } else {\n      this.value = parseInt(this.input.value) - parseInt(this.input.step);\n    }\n  }\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          sgds: true,\n          disabled: this.disabled,\n          \"input-group\": true,\n          [`input-group-${this.size}`]: this.size\n        })}\"\n        variant=\"quantity-toggle\"\n        size=${this.size}\n      >\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`decrease by ${this.step}`}\n          part=\"button\"\n          @click=${this._onMinus}\n          ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-dash\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z\" />\n          </svg>\n        </sgds-button>\n        <sgds-input\n          type=\"number\"\n          class=\"quantity-toggle\"\n          name=${ifDefined(this.name)}\n          step=${ifDefined(this.step)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${live(this.value.toString())}\n          @sgds-change=${() => this._handleChange()}\n          @sgds-input=${() => this._handleChange()}\n          @keydown=${this._handleKeyDown}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n        ></sgds-input>\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`increase by ${this.step}`}\n          part=\"button\"\n          @click=${this._onPlus}\n          ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-plus\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </sgds-button>\n      </div>\n      <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["ScopedElementsMixin","SgdsElement","FormSubmitController","genId","SgdsButton","SgdsInput","html","classMap","ifDefined","live","svgStyles","quantityToggleStyle","__decorate","query","property","defaultValue"],"mappings":"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"}
+{"version":3,"file":"sgds-quantity-toggle.cjs.js","sources":["../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport SgdsButton, { ButtonVariant } from \"../Button/sgds-button\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @csspart base - The base wrapper of the quantity toggle component.\n * @csspart button - The plus and minus button of quantity toggle\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends ScopedElementsMixin(SgdsElement) implements SgdsFormControl {\n  static styles = [...SgdsElement.styles, svgStyles, quantityToggleStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton,\n      \"sgds-input\": SgdsInput\n    };\n  }\n  /**@internal */\n  @query(\"sgds-input\") private input: HTMLInputElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n  /**@internal */\n  @query(\"sgds-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n\n  /** The name of the input */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The input's minimum value. */\n  @property({ type: Number, reflect: true }) min: number;\n  /** The input's maximum value. */\n  @property({ type: Number, reflect: true }) max: number;\n\n  /**Controls the size of the quantity toggle */\n  @property() size: \"sm\" | \"md\" = \"md\";\n\n  /**The input's value. Set to 0 by default */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** Disables the entire quantity toggle  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The quantity toggle's button variants */\n  @property({ type: String }) buttonVariant: ButtonVariant = \"primary\";\n\n  /**\n   * Controls the incremental / decremental value of the input\n   */\n  @property({ type: Number }) step = 1;\n\n  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = 0;\n\n  /** @internal The id forwarded to input element */\n  private inputId: string = genId(\"quantity-toggle\", \"input\");\n\n  private _handleChange() {\n    if (parseInt(this.input.value) < this.step || this.input.value === \"\") {\n      this.input.value = \"0\";\n    }\n    this.value = parseInt(this.input.value);\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const allowedKeys = [\n      \"Backspace\",\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      ...Array.from(Array(10).keys()).map(key => key.toString()),\n      \"Tab\"\n    ];\n\n    // Allow keydown event only if the pressed key is in the allowedKeys array\n    if (!allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  }\n\n  /** Simulates a click on the plus button */\n  public plus() {\n    this.plusBtn.click();\n  }\n\n  /** Simulates a click on the minus button */\n  public minus() {\n    this.minusBtn.click();\n  }\n\n  private _onPlus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = parseInt(this.input.value) + parseInt(this.input.step);\n  }\n\n  private _onMinus(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.value < this.step) {\n      this.value = 0;\n    } else {\n      this.value = parseInt(this.input.value) - parseInt(this.input.step);\n    }\n  }\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          sgds: true,\n          disabled: this.disabled,\n          \"input-group\": true,\n          [`input-group-${this.size}`]: this.size\n        })}\"\n        variant=\"quantity-toggle\"\n        size=${this.size}\n      >\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`decrease by ${this.step}`}\n          part=\"button\"\n          @click=${this._onMinus}\n          ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-dash\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z\" />\n          </svg>\n        </sgds-button>\n        <sgds-input\n          type=\"number\"\n          class=\"quantity-toggle\"\n          name=${ifDefined(this.name)}\n          step=${ifDefined(this.step)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${live(this.value.toString())}\n          @sgds-change=${() => this._handleChange()}\n          @sgds-input=${() => this._handleChange()}\n          @keydown=${this._handleKeyDown}\n          ?disabled=${this.disabled}\n          id=${this.inputId}\n        ></sgds-input>\n        <sgds-button\n          variant=${this.buttonVariant}\n          ariaLabel=${`increase by ${this.step}`}\n          part=\"button\"\n          @click=${this._onPlus}\n          ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-plus\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </sgds-button>\n      </div>\n      <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n    `;\n  }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["ScopedElementsMixin","SgdsElement","FormSubmitController","genId","SgdsButton","SgdsInput","html","classMap","ifDefined","live","svgStyles","quantityToggleStyle","__decorate","query","property","defaultValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA;;;;;;;;;AASG;MACU,kBAAmB,SAAQA,kCAAmB,CAACC,sBAAW,CAAC,CAAA;AAAxE,IAAA,WAAA,GAAA;;;AAiBmB,QAAA,IAAA,CAAA,oBAAoB,GAAG,IAAIC,yBAAoB,CAAC,IAAI,CAAC,CAAC;;QAW3D,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;;QAGM,IAAK,CAAA,KAAA,GAAG,CAAC,CAAC;;QAGT,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjC,IAAa,CAAA,aAAA,GAAkB,SAAS,CAAC;AAErE;;AAEG;QACyB,IAAI,CAAA,IAAA,GAAG,CAAC,CAAC;;QAIrC,IAAY,CAAA,YAAA,GAAG,CAAC,CAAC;;AAGT,QAAA,IAAA,CAAA,OAAO,GAAWC,qBAAK,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;KAwH7D;;AAtKC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,aAAa,EAAEC,qBAAU;AACzB,YAAA,YAAY,EAAEC,mBAAS;SACxB,CAAC;KACH;IA2CO,aAAa,GAAA;QACnB,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;AACrE,YAAA,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;SACxB;QACD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACzC;AAEO,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,MAAM,WAAW,GAAG;YAClB,WAAW;YACX,SAAS;YACT,WAAW;YACX,WAAW;YACX,YAAY;YACZ,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;YAC1D,KAAK;SACN,CAAC;;QAGF,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;;IAGM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;KACvB;AAEO,IAAA,OAAO,CAAC,KAAiB,EAAA;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;KACrE;AAEO,IAAA,QAAQ,CAAC,KAAiB,EAAA;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE;AAC1B,YAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAChB;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;SACrE;KACF;IACD,MAAM,GAAA;AACJ,QAAA,OAAOC,kBAAI,CAAA,CAAA;;;AAGE,eAAA,EAAAC,oBAAQ,CAAC;AAChB,YAAA,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,aAAa,EAAE,IAAI;YACnB,CAAC,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;SACxC,CAAC,CAAA;;AAEK,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;AAGJ,kBAAA,EAAA,IAAI,CAAC,aAAa,CAAA;sBAChB,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAA;;AAE7B,iBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;sBACV,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;;;;;;;;;;;;;;;;AAgBxF,eAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACpB,eAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACrB,cAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnB,cAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAChB,iBAAA,EAAAC,YAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;AACrB,uBAAA,EAAA,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;AAC3B,sBAAA,EAAA,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;AAC7B,mBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AAClB,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACpB,aAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;;AAGP,kBAAA,EAAA,IAAI,CAAC,aAAa,CAAA;sBAChB,CAAe,YAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAA;;AAE7B,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;sBACT,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;;;;;;AAgBb,sFAAA,EAAA,IAAI,CAAC,KAAK,CAAA;KAC7F,CAAC;KACH;;AAvKM,kBAAA,CAAA,MAAM,GAAG,CAAC,GAAGR,sBAAW,CAAC,MAAM,EAAES,cAAS,EAAEC,yBAAmB,CAAzD,CAA2D;AAS3CC,gBAAA,CAAA;IAA5BC,mBAAK,CAAC,YAAY,CAAC;AAAiC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEGD,gBAAA,CAAA;IAAvDC,mBAAK,CAAC,uCAAuC,CAAC;AAAoC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE3BD,gBAAA,CAAA;IAAvDC,mBAAK,CAAC,uCAAuC,CAAC;AAAqC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMzCD,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGbF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEZF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG3CF,gBAAA,CAAA;AAAX,IAAAE,sBAAQ,EAAE;AAA0B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGMF,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;AAGTF,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;AAGjCF,gBAAA,CAAA;AAA3B,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA0C,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKzCF,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;AAIrCF,gBAAA,CAAA;AADC,IAAAG,yBAAY,EAAE;AACE,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

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

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

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

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

package/components/Radio/radio-group.js

@@ -1,3 +1,4 @@
+'use client';
 import { css } from 'lit';
 
 var css_248z = css`fieldset{border:0;display:flex;flex-direction:column;gap:var(--sgds-spacer-2);margin:0;min-width:0;padding:0}.radio-group-validation-input{display:none}`;

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

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

package/components/Radio/radio.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Radio/radio.cjs.js.map

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

package/components/Radio/radio.js

@@ -1,3 +1,4 @@
+'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:block;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:checked[type=radio],.form-check-input[checked][type=radio]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")}.form-check-input:disabled{border-color:var(--sgds-form-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid,.form-check-input:invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked,.form-check-input:invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus,.form-check-input:invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label,.form-check-input:invalid~.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right)}:host([last-of-type]) .form-check{margin-bottom:0}`;

package/components/Radio/radio.js.map

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

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html } 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 { FormSubmitController } from \"../../utils/form\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n *\n */\nexport class SgdsRadioGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, radioGroupStyles];\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this, {\n    defaultValue: (control: SgdsRadioGroup) => control.defaultValue\n  });\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n  /**@internal */\n  @query(\".radio-group-validation-input\") input: HTMLInputElement;\n  /**@internal */\n  @state() defaultValue = \"\";\n  /**@internal */\n  @state() private customErrorMessage = \"\";\n  /**  This will be true when the control is in an invalid state. */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /** The name assigned to the radio controls. */\n  @property({ reflect: true }) name = \"option\";\n\n  /** Ensures a child radio is checked before allowing the containing form to submit. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change\", { detail: { value: this.value } });\n    this._updateCheckedRadio();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n  }\n\n  firstUpdated() {\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  /** Gets and return the ValidityState object.  */\n  get validity(): ValidityState {\n    const hasMissingData = !((this.value && this.required) || !this.required);\n    const hasCustomError = this.customErrorMessage !== \"\";\n    return {\n      badInput: false,\n      customError: hasCustomError,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: hasMissingData ? false : true,\n      valueMissing: !hasMissingData\n    };\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity(): boolean {\n    const validity = this.validity;\n\n    this.invalid = !validity.valid;\n\n    if (!validity.valid) {\n      this._showNativeErrorMessage();\n    }\n\n    return !this.invalid;\n  }\n  /**@internal */\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio === target));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    radios[index].focus();\n\n    event.preventDefault();\n  }\n\n  private _handleLabelClick() {\n    const radios = this._radios;\n    const checked = radios.find(radio => radio.checked);\n    const radioToFocus = checked || radios[0];\n\n    // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n    if (radioToFocus) {\n      radioToFocus.focus();\n    }\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n    this._radios.forEach(radio => (radio.invalid = true));\n  }\n\n  private _showNativeErrorMessage() {\n    this.input.reportValidity();\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this.invalid = !this.validity.valid;\n    this._radios.forEach(radio => (radio.invalid = this.invalid));\n  }\n\n  render() {\n    const defaultSlot = html`\n      <div>\n        <slot\n          @click=${this._handleRadioClick}\n          @keydown=${this._handleKeyDown}\n          @slotchange=${this._handleSlotChange}\n          role=\"presentation\"\n        ></slot>\n      </div>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <label\n          @click=${this._handleLabelClick}\n          class=${classMap({\n            \"form-label\": true,\n            required: this.required\n          })}\n        >\n          <slot name=\"label\"></slot>\n        </label>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n        />\n        ${this.hasFeedback ? html`<div class=\"invalid-feedback\">${this.invalidFeedback}</div>` : \"\"}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsElement","FormSubmitController","html","classMap","feedbackStyles","formLabelStyles","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html } 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 { FormSubmitController } from \"../../utils/form\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n *\n */\nexport class SgdsRadioGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, radioGroupStyles];\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this, {\n    defaultValue: (control: SgdsRadioGroup) => control.defaultValue\n  });\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n  /**@internal */\n  @query(\".radio-group-validation-input\") input: HTMLInputElement;\n  /**@internal */\n  @state() defaultValue = \"\";\n  /**@internal */\n  @state() private customErrorMessage = \"\";\n  /**  This will be true when the control is in an invalid state. */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /** The name assigned to the radio controls. */\n  @property({ reflect: true }) name = \"option\";\n\n  /** Ensures a child radio is checked before allowing the containing form to submit. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change\", { detail: { value: this.value } });\n    this._updateCheckedRadio();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n  }\n\n  firstUpdated() {\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  /** Gets and return the ValidityState object.  */\n  get validity(): ValidityState {\n    const hasMissingData = !((this.value && this.required) || !this.required);\n    const hasCustomError = this.customErrorMessage !== \"\";\n    return {\n      badInput: false,\n      customError: hasCustomError,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: hasMissingData ? false : true,\n      valueMissing: !hasMissingData\n    };\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity(): boolean {\n    const validity = this.validity;\n\n    this.invalid = !validity.valid;\n\n    if (!validity.valid) {\n      this._showNativeErrorMessage();\n    }\n\n    return !this.invalid;\n  }\n  /**@internal */\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio === target));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    radios[index].focus();\n\n    event.preventDefault();\n  }\n\n  private _handleLabelClick() {\n    const radios = this._radios;\n    const checked = radios.find(radio => radio.checked);\n    const radioToFocus = checked || radios[0];\n\n    // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n    if (radioToFocus) {\n      radioToFocus.focus();\n    }\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n    this._radios.forEach(radio => (radio.invalid = true));\n  }\n\n  private _showNativeErrorMessage() {\n    this.input.reportValidity();\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this.invalid = !this.validity.valid;\n    this._radios.forEach(radio => (radio.invalid = this.invalid));\n  }\n\n  render() {\n    const defaultSlot = html`\n      <div>\n        <slot\n          @click=${this._handleRadioClick}\n          @keydown=${this._handleKeyDown}\n          @slotchange=${this._handleSlotChange}\n          role=\"presentation\"\n        ></slot>\n      </div>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <label\n          @click=${this._handleLabelClick}\n          class=${classMap({\n            \"form-label\": true,\n            required: this.required\n          })}\n        >\n          <slot name=\"label\"></slot>\n        </label>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n        />\n        ${this.hasFeedback ? html`<div class=\"invalid-feedback\">${this.invalidFeedback}</div>` : \"\"}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsElement","FormSubmitController","html","classMap","feedbackStyles","formLabelStyles","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { query, state, property, queryAssignedElements } from 'lit/decorators.js';