@govtechsg/sgds-web-component 2.1.0 → 2.1.2

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

@@ -0,0 +1,364 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { watch } from '../../utils/watch.js';
+import { classMap } from 'lit/directives/class-map.js';
+import css_248z from './pagination.js';
+
+/**
+ * @summary The Pagination component enables the user to select a specific page from a range of pages
+ *
+ * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.
+ *
+ * @cssproperty --pagination-color - The text color of pagination
+ * @cssproperty --pagination-bg - The background color of pagination
+ * @cssproperty --pagination-hover-bg - The  background color of pagination in hover state
+ * @cssproperty --pagination-active-color - The text color of pagination in active state
+ * @cssproperty --pagination-active-bg - The background color of pagination in active state
+ * @cssproperty --pagination-disabled-color - The text color of pagination in disabled state
+ * @cssproperty --pagination-disabled-bg - The background color of pagination in disabled state
+ *
+ **/
+class SgdsPagination extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** Inserts the length value from a given sets of data objects*/
+        this.dataLength = 0;
+        /** Sets the starting active page upon render*/
+        this.currentPage = 1;
+        /** Sets the amount of data objects to be displayed per page */
+        this.itemsPerPage = 5;
+        /** Sets the page limit to be displayed at any given render. e.g 3, 5, 7, 9 */
+        this.limit = 3;
+        /** Sets the page direction button to contain text and/or icon */
+        this.directionVariant = "icon-text";
+        /** Sets the size of all page items. */
+        this.size = "sm";
+        /** Toggles ellipsis buttons to be able to increment/decrement pages based on the ellipsisJump value set. By default, it will be false */
+        this.ellipsisOn = false;
+        /** When ellipsisOn is true, length of decrementing/incrementing of pages can be set with a number value*/
+        this.ellipsisJump = 3;
+        /** 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 */
+        this.showFirstPage = false;
+        /** Enables rendering of the last-page button on the pagination, allowing users to jump to the last page. By default, it will be false */
+        this.showLastPage = false;
+        this.ellipsisContent = html `
+    <span aria-hidden="true">…</span>
+    <span class="visually-hidden">Ellipsis</span>
+  `;
+        /** @internal */
+        this._renderFirstEllipsis = () => {
+            const isHidden = !(this.pages.length !== this._sanitizeLimit && this.currentPage - Math.floor(this._sanitizeLimit / 2) > 1);
+            if (isHidden) {
+                return null;
+            }
+            const tabIndex = isHidden ? -1 : 0;
+            return html `
+      <li
+        class=${classMap({ "page-item": true, "ellipsis-disabled": !this.ellipsisOn })}
+        @click=${this.ellipsisOn && this._handlePrevEllipsisButton}
+        @keydown=${(e) => this._handleKeyDown(e, "ellipsis", undefined, true)}
+      >
+        <span class="page-link" role="button" tabindex=${tabIndex}>${this.ellipsisContent}</span>
+      </li>
+    `;
+        };
+    }
+    /**@internal */
+    _handleValueChange() {
+        this.emit("sgds-page-change", { detail: { currentPage: this.currentPage } });
+    }
+    /** @internal */
+    _handlePageClick(event) {
+        const liTarget = event.target;
+        const clickedLi = liTarget.closest("li");
+        if (clickedLi) {
+            const clickedPage = Number(clickedLi.getAttribute("key"));
+            if (clickedPage !== this.currentPage) {
+                this.currentPage = clickedPage;
+            }
+        }
+    }
+    /** @internal */
+    _handleNextButton() {
+        this.currentPage = this.currentPage + 1;
+    }
+    /** @internal */
+    _handlePrevButton() {
+        this.currentPage = this.currentPage - 1;
+    }
+    /** @internal */
+    _handleNextEllipsisButton() {
+        this.currentPage = this.currentPage + this.ellipsisJump;
+        if (this.currentPage >= this.pages.length)
+            this.currentPage = this.pages.length;
+    }
+    /** @internal */
+    _handlePrevEllipsisButton() {
+        this.currentPage = this.currentPage - this.ellipsisJump;
+        if (this.currentPage <= 1)
+            this.currentPage = this.pages[0];
+    }
+    /** @internal */
+    get pages() {
+        const pages = [];
+        for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
+    /** @internal */
+    get _sanitizeLimit() {
+        return this.limit >= this.pages.length ? this.pages.length : this.limit;
+    }
+    /**@internal */
+    _handleKeyDown(event, action, number, isFirstEllipsis, isPrevButton) {
+        if (event.key === "Enter") {
+            switch (action) {
+                case "pageNumber":
+                    this.currentPage = number;
+                    break;
+                case "ellipsis":
+                    if (isFirstEllipsis) {
+                        this._handlePrevEllipsisButton();
+                    }
+                    else {
+                        this._handleNextEllipsisButton();
+                    }
+                    break;
+                case "directionButton":
+                    if (isPrevButton) {
+                        this._handlePrevButton();
+                    }
+                    else {
+                        this._handleNextButton();
+                    }
+                    break;
+            }
+        }
+    }
+    _renderFirstPage() {
+        let sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);
+        if (this.pages.length - sanitizeStartPage < this.limit) {
+            sanitizeStartPage = this.pages.length + 1 - this.limit;
+        }
+        if (sanitizeStartPage > 1) {
+            return html `
+        <li key=${1} class="page-item ${this.currentPage === 1 ? "active" : ""}">
+          <span
+            class="page-link"
+            tabindex="0"
+            @click=${this._handlePageClick}
+            @keydown=${(e) => this._handleKeyDown(e, "pageNumber", 1)}
+            >1</span
+          >
+        </li>
+      `;
+        }
+        else {
+            return null;
+        }
+    }
+    /** @internal */
+    _renderPgNumbers() {
+        const pagesToShow = [];
+        let sanitizeStartPage = 1;
+        let endPage;
+        if (this.limit < this.pages.length) {
+            sanitizeStartPage = this.currentPage - Math.floor(this._sanitizeLimit / 2);
+        }
+        if (this.pages.length - sanitizeStartPage < this.limit) {
+            sanitizeStartPage = this.pages.length + 1 - this.limit;
+        }
+        if (sanitizeStartPage <= 0) {
+            sanitizeStartPage = 1;
+        }
+        endPage = sanitizeStartPage + this._sanitizeLimit - 1;
+        if (endPage > this.pages.length) {
+            endPage = this.pages.length;
+        }
+        if (this.currentPage === this.pages.length) {
+            sanitizeStartPage = this.pages.length - this._sanitizeLimit + 1;
+        }
+        for (let i = sanitizeStartPage; i <= endPage; i++) {
+            pagesToShow.push(i);
+        }
+        return pagesToShow.map(number => html `
+        <li key=${number} class="page-item ${this.currentPage === number ? "active" : ""}">
+          <span
+            class="page-link"
+            tabindex="0"
+            @click=${this._handlePageClick}
+            @keydown=${(e) => this._handleKeyDown(e, "pageNumber", number)}
+            >${number}</span
+          >
+        </li>
+      `);
+    }
+    /** @internal */
+    _renderLastEllipsis() {
+        const isEvenLimit = this._sanitizeLimit % 2 === 0;
+        const differentialLimitCondition = isEvenLimit
+            ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length
+            : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;
+        const shouldRenderEllipsis = this.pages.length !== this.limit && differentialLimitCondition;
+        const tabIndex = shouldRenderEllipsis && this.ellipsisOn ? 0 : -1;
+        if (!shouldRenderEllipsis || this._sanitizeLimit >= this.pages.length) {
+            return null;
+        }
+        if (this.ellipsisOn) {
+            return html `
+        <li
+          class="page-item ${this.ellipsisOn ? "" : "ellipsis-disabled"} "
+          @click=${this.ellipsisOn && this._handleNextEllipsisButton}
+          @keydown=${(e) => this._handleKeyDown(e, "ellipsis", undefined, false)}
+        >
+          <span class="page-link" role="button" tabindex=${tabIndex}>${this.ellipsisContent}</span>
+        </li>
+      `;
+        }
+        else {
+            return html `
+        <li class="page-item ${this.ellipsisOn ? "" : "ellipsis-disabled"} ">
+          <span class="page-link disabled" tabindex=${tabIndex}>${this.ellipsisContent}</span>
+        </li>
+      `;
+        }
+    }
+    _renderLastPage() {
+        const isEvenLimit = this._sanitizeLimit % 2 === 0;
+        const differentialLimitCondition = isEvenLimit
+            ? this.currentPage + Math.floor(this._sanitizeLimit / 2) <= this.pages.length
+            : this.currentPage + Math.floor(this._sanitizeLimit / 2) < this.pages.length;
+        if (this.pages.length !== this._sanitizeLimit && differentialLimitCondition) {
+            return html `
+        <li key=${this.pages.length} class="page-item ${this.currentPage === this.pages.length ? "active" : ""}">
+          <span
+            class="page-link"
+            tabindex="0"
+            @click=${this._handlePageClick}
+            @keydown=${(e) => this._handleKeyDown(e, "pageNumber", this.pages.length)}
+            >${this.pages.length}</span
+          >
+        </li>
+      `;
+        }
+        else {
+            return null;
+        }
+    }
+    /** @internal */
+    _getLeftChevronSVG() {
+        return html `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-chevron-left"
+        viewBox="0 0 16 16"
+      >
+        <path
+          fill-rule="evenodd"
+          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"
+        />
+      </svg>
+    `;
+    }
+    /** @internal */
+    _getRightChevronSVG() {
+        return html `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-chevron-right"
+        viewBox="0 0 16 16"
+      >
+        <path
+          fill-rule="evenodd"
+          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"
+        />
+      </svg>
+    `;
+    }
+    /** @internal */
+    _renderDirectionButton(directionLabel, iconClass, clickHandler, keydownHandler, directionVariant) {
+        const isDisabled = iconClass === "left" ? this.currentPage === 1 : this.currentPage === this.pages.length;
+        const tabIndex = isDisabled ? -1 : 0;
+        const keydownListener = (event) => {
+            if (!isDisabled && event.key === "Enter") {
+                keydownHandler(event);
+            }
+        };
+        return html `
+      <li class="page-item ${isDisabled ? "disabled" : ""}" @click=${isDisabled ? undefined : clickHandler}>
+        <span class="page-link" tabindex=${tabIndex} @keydown=${keydownListener}>
+          ${directionVariant === "icon-text"
+            ? html `
+                ${iconClass === "left" ? this._getLeftChevronSVG() : ""} ${directionLabel}
+                ${iconClass === "right" ? this._getRightChevronSVG() : ""}
+              `
+            : directionVariant === "text"
+                ? html `${directionLabel}`
+                : directionVariant === "icon"
+                    ? html `${iconClass === "left" ? this._getLeftChevronSVG() : this._getRightChevronSVG()}`
+                    : html ``}
+        </span>
+      </li>
+    `;
+    }
+    render() {
+        return html `
+      <nav aria-label="pagination" role="navigation">
+        <ul class="pagination pagination-${this.size} sgds" directionVariant=${this.directionVariant}>
+          ${this._renderDirectionButton("Previous", "left", this._handlePrevButton, (e) => this._handleKeyDown(e, "directionButton", undefined, undefined, true), this.directionVariant)}
+          ${this.showFirstPage ? this._renderFirstPage() : nothing}
+          ${this.showFirstPage || this.ellipsisOn ? this._renderFirstEllipsis() : nothing} ${this._renderPgNumbers()}
+          ${this._renderLastEllipsis()} ${this.showLastPage ? this._renderLastPage() : nothing}
+          ${this._renderDirectionButton("Next", "right", this._handleNextButton, (e) => this._handleKeyDown(e, "directionButton", undefined, undefined, false), this.directionVariant)}
+        </ul>
+      </nav>
+    `;
+    }
+}
+SgdsPagination.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "dataLength", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "itemsPerPage", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "limit", void 0);
+__decorate([
+    property({ type: String })
+], SgdsPagination.prototype, "directionVariant", void 0);
+__decorate([
+    property({ type: String })
+], SgdsPagination.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsPagination.prototype, "ellipsisOn", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsPagination.prototype, "ellipsisJump", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsPagination.prototype, "showFirstPage", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsPagination.prototype, "showLastPage", void 0);
+__decorate([
+    watch("currentPage")
+], SgdsPagination.prototype, "_handleValueChange", null);
+
+export { SgdsPagination, SgdsPagination as default };
+//# sourceMappingURL=sgds-pagination.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,7 @@
+'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}}`;
+
+export { css_248z as default };
+//# sourceMappingURL=progress-bar.js.map

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

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

package/react/components/Progress/progress.js

@@ -0,0 +1,7 @@
+'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}`;
+
+export { css_248z as default };
+//# sourceMappingURL=progress.js.map

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

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

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,59 @@
+'use client';
+import { __decorate } from 'tslib';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { html } from 'lit';
+import css_248z from './progress-bar.js';
+
+class SgdsProgressBar extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the aria label for assistive devices.
+         */
+        this.arialabel = "";
+        /** Add label on top of progress bar */
+        this.label = "";
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            "progress-bar": true
+        })}
+        role="progressbar"
+        style=${styleMap({ width: `${this.value}%` })}
+        aria-label=${this.arialabel}
+        aria-valuenow=${this.value}
+        aria-valuemin=${this.ariamin}
+        aria-valuemax=${this.ariamax}
+      >
+        ${this.label ? html `${this.label}` : undefined}
+      </div>
+    `;
+    }
+}
+SgdsProgressBar.styles = [css_248z];
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsProgressBar.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsProgressBar.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsProgressBar.prototype, "ariamin", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsProgressBar.prototype, "ariamax", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsProgressBar.prototype, "arialabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsProgressBar.prototype, "label", void 0);
+
+export { SgdsProgressBar, SgdsProgressBar as default };
+//# sourceMappingURL=sgds-progress-bar.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,30 @@
+'use client';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { html } from 'lit';
+import css_248z$1 from './progress.js';
+import css_248z from '../../styles/bg-variants.js';
+
+/**
+ * @summary Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
+ * @slot default - slot for progress-bar
+ *
+ * @cssprop --progress-height - Sets the height of the progress wrapper.
+ */
+class SgdsProgress extends SgdsElement {
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            progress: true
+        })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+SgdsProgress.styles = [...SgdsElement.styles, css_248z, css_248z$1];
+
+export { SgdsProgress, SgdsProgress as default };
+//# sourceMappingURL=sgds-progress.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,7 @@
+'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}`;
+
+export { css_248z as default };
+//# sourceMappingURL=quantity-toggle.js.map

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

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

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

@@ -0,0 +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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"}