@wavelengthusaf/web-components 1.10.0 → 1.11.0

package/dist/cjs/index.cjs

@@ -6345,6 +6345,168 @@ if (!customElements.get("wavelength-menu")) {
   customElements.define("wavelength-menu", WavelengthMenu);
 }
 
+// src/web-components/wavelength-pagination.template.html
+var wavelength_pagination_template_default = '<style>\n  :host {\n    display: block;\n    --local-font: var(--font, "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);\n    font-family: var(--local-font);\n  }\n\n  .pagination-list,\n  .pagination-list * {\n    font-family: inherit;\n    font-size: var(--font-size, 16px);\n    color: var(--text-color, black);\n  }\n\n  .pagination-list {\n    display: flex;\n    list-style: none;\n    padding: var(--padding, 10px);\n    margin: 0;\n    align-items: center;\n  }\n\n  .page-item {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    user-select: none;\n    background-color: var(--background-color, white);\n  }\n\n  .page-item.disabled,\n  .page-item.disabled * {\n    cursor: default;\n    background-color: var(--background-color, white);\n    color: var(--disabled-color, #ccc);\n    border-color: var(--disabled-color, #ccc);\n  }\n\n  /* --- BASIC VARIANT --- */\n  .pagination-list.basic {\n    gap: 15px;\n  }\n\n  .pagination-list.basic .page-info {\n    margin-right: 10px;\n    font-weight: 500;\n  }\n\n  .pagination-list.basic .page-item {\n    width: 32px;\n    height: 32px;\n    border: var(--border, none);\n    border-radius: var(--border-radius, 50%);\n  }\n\n  .pagination-list.basic .page-item:not(.disabled):hover {\n    filter: brightness(0.95);\n  }\n\n  /* --- COMMON VARIANT --- */\n  .pagination-list.common {\n    gap: 8px;\n  }\n\n  .pagination-list.common .page-item {\n    width: 40px;\n    height: 40px;\n    border: var(--border, none);\n    border-radius: var(--border-radius, 50%);\n  }\n\n  .pagination-list.common .page-item.active,\n  .pagination-list.common .page-item.active * {\n    background-color: var(--active-color, #49baf7);\n    color: var(--active-text-color, #fff);\n    border-color: var(--active-color, #49baf7);\n  }\n\n  .pagination-list.common .page-item:not(.disabled):not(.active):hover {\n    filter: brightness(0.95);\n    transform: scale(1.1);\n  }\n</style>\n<nav aria-label="pagination">\n  <ul class="pagination-list"></ul>\n</nav>\n';
+
+// src/web-components/wavelength-pagination.ts
+var WavelengthPagination = class extends HTMLElement {
+  constructor() {
+    super();
+    this.styleAttributes = ["variant", "text-color", "font", "font-size", "border", "border-radius", "padding", "active-color", "active-text-color", "background-color", "disabled-color"];
+    this.renderAttributes = ["variant", "total-pages", "current-page"];
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_pagination_template_default;
+  }
+  static get observedAttributes() {
+    return [
+      "variant",
+      "text-color",
+      "font",
+      "font-size",
+      "border",
+      "border-radius",
+      "padding",
+      "total-pages",
+      "current-page",
+      "active-color",
+      "active-text-color",
+      "background-color",
+      "disabled-color"
+    ];
+  }
+  get totalPages() {
+    const parsed = Number.parseInt(this.getAttribute("total-pages") || "1", 10);
+    return isNaN(parsed) ? 1 : parsed;
+  }
+  set totalPages(val) {
+    this.setAttribute("total-pages", val.toString());
+  }
+  get currentPage() {
+    const parsed = Number.parseInt(this.getAttribute("current-page") || "1", 10);
+    return isNaN(parsed) ? 1 : parsed;
+  }
+  set currentPage(val) {
+    this.setAttribute("current-page", val.toString());
+  }
+  connectedCallback() {
+    this._clearAndRender();
+    this._syncStyles();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (this.styleAttributes.includes(name)) {
+      this.style.setProperty(`--${name}`, newValue);
+    }
+    if (this.renderAttributes.includes(name)) {
+      this._clearAndRender();
+    }
+  }
+  _clearAndRender() {
+    const list = this.shadow.querySelector(".pagination-list");
+    if (!list) return;
+    const variant = this.getAttribute("variant") || "basic";
+    list.innerHTML = "";
+    list.className = `pagination-list ${variant}`;
+    this._renderByVariant(list, variant);
+  }
+  _renderByVariant(container, variant) {
+    if (variant === "basic") {
+      this._renderBasic(container);
+    } else {
+      this._renderCommon(container);
+    }
+  }
+  _renderBasic(container) {
+    const { singlePrevSvg, singleNextSvg } = this._getIcons();
+    const textInfo = document.createElement("span");
+    textInfo.className = "page-info";
+    textInfo.textContent = `Page ${this.currentPage} of ${this.totalPages}`;
+    container.appendChild(textInfo);
+    const prevBtn = this._createButton(singlePrevSvg, () => this._changePage(this.currentPage - 1), this.currentPage === 1);
+    const nextBtn = this._createButton(singleNextSvg, () => this._changePage(this.currentPage + 1), this.currentPage === this.totalPages);
+    container.appendChild(prevBtn);
+    container.appendChild(nextBtn);
+  }
+  _getIcons() {
+    const doubleArrowPath = `M185.27637,135.6062q-.36694.4466-.77393.85608c-.00732.00745-.01318.01575-.021.02307l-72,72a12.0001,12.0001,0,0,1-16.97071-16.9707L147.02539,140H31.99609a12,12,0,0,1,0-24h115.0293L95.51074,64.48535a12.0001,12.0001,0,0,1,16.97071-16.9707l72,72c.00781.00732.01367.01562.021.02307q.40723.409.77393.85608c.11425.1394.21386.28662.32129.42993.12744.17.25927.33643.37744.51318.11474.17115.21386.34888.31836.5243.09619.1604.19677.31726.28515.48242.09619.17944.17725.36389.26368.547.08105.17188.1665.34083.23974.51685.07373.17847.1333.36084.19824.54187.06787.18836.14014.37415.19825.56677.05468.18116.09472.36524.14111.54834.04932.19641.10449.39038.144.59034.042.21167.0669.42553.09766.63867.0249.17431.05762.3457.07519.52221a12.07306,12.07306,0,0,1,0,2.36866c-.01757.17651-.05029.3479-.07519.52221-.03076.21314-.05567.427-.09766.63867-.03955.2-.09472.39393-.144.59034-.04639.1831-.08643.36718-.14111.54834-.0586.19287-.13086.3789-.19825.56762-.06494.18067-.12451.36255-.19824.54078-.07324.17651-.15918.34558-.24023.5177-.08594.18286-.16748.36718-.26319.54638-.08838.16516-.189.322-.28515.48242-.1045.17542-.20362.35315-.31836.5243-.11817.17675-.25.34314-.37744.51318C185.49023,135.31958,185.39062,135.4668,185.27637,135.6062ZM216,28a12,12,0,0,0-12,12V216a12,12,0,0,0,24,0V40A12,12,0,0,0,216,28Z`;
+    const singleArrowPath = `M426.6 755.2L375 703.6l193.1-193.2L375 317.3l51.6-51.6 244.7 244.7z`;
+    const iconStyle = `width: 24px; height: 24px;`;
+    return {
+      nextSvg: `<svg fill="currentColor" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg" style="${iconStyle}"><g id="SVGRepo_iconCarrier"> <path d="${doubleArrowPath}"></path> </g></svg>`,
+      prevSvg: `<svg fill="currentColor" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg" style="${iconStyle} transform: scaleX(-1);"><g id="SVGRepo_iconCarrier"> <path d="${doubleArrowPath}"></path> </g></svg>`,
+      singleNextSvg: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="${iconStyle}"><g id="SVGRepo_iconCarrier"><path d="${singleArrowPath}" fill="currentColor"></path></g></svg>`,
+      singlePrevSvg: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="${iconStyle} transform: scaleX(-1);"><g id="SVGRepo_iconCarrier"><path d="${singleArrowPath}" fill="currentColor"></path></g></svg>`
+    };
+  }
+  _renderCommon(container) {
+    const { nextSvg, prevSvg, singleNextSvg, singlePrevSvg } = this._getIcons();
+    container.appendChild(this._createButton(prevSvg, () => this._changePage(1), this.currentPage === 1));
+    container.appendChild(this._createButton(singlePrevSvg, () => this._changePage(this.currentPage - 1), this.currentPage === 1));
+    let startPage = Math.max(1, this.currentPage - 3);
+    const endPage = Math.min(this.totalPages, startPage + 6);
+    if (endPage - startPage < 6) {
+      startPage = Math.max(1, endPage - 6);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      const btn = this._createButton(i.toString(), () => this._changePage(i), false);
+      if (i === this.currentPage) btn.classList.add("active");
+      container.appendChild(btn);
+    }
+    container.appendChild(this._createButton(singleNextSvg, () => this._changePage(this.currentPage + 1), this.currentPage === this.totalPages, false, "Next Page"));
+    container.appendChild(this._createButton(nextSvg, () => this._changePage(this.totalPages), this.currentPage === this.totalPages, false, "Last Page"));
+  }
+  _createButton(content, onClick, disabled, isActive = false, ariaLabel) {
+    const li = document.createElement("li");
+    li.className = "page-item";
+    const btn = document.createElement("button");
+    btn.style.all = "unset";
+    btn.style.width = "100%";
+    btn.style.height = "100%";
+    btn.style.display = "flex";
+    btn.style.alignItems = "center";
+    btn.style.justifyContent = "center";
+    btn.style.cursor = disabled ? "default" : "pointer";
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    if (isActive) btn.setAttribute("aria-current", "page");
+    btn.disabled = disabled;
+    if (!disabled) {
+      btn.onclick = onClick;
+    }
+    if (isActive) li.classList.add("active");
+    if (disabled) li.classList.add("disabled");
+    if (content.includes("<svg")) {
+      btn.innerHTML = content;
+    } else {
+      btn.textContent = content;
+    }
+    li.appendChild(btn);
+    return li;
+  }
+  _changePage(newPage) {
+    if (newPage < 1 || newPage > this.totalPages) return;
+    this.setAttribute("current-page", newPage.toString());
+    this.dispatchEvent(
+      new CustomEvent("page-change", {
+        detail: { page: newPage },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _syncStyles() {
+    this.styleAttributes.forEach((attr) => {
+      const value = this.getAttribute(attr);
+      if (value) {
+        this.style.setProperty(`--${attr}`, value);
+      }
+    });
+  }
+};
+if (!customElements.get("wavelength-pagination")) {
+  customElements.define("wavelength-pagination", WavelengthPagination);
+}
+
+
 
 
 
@@ -6367,7 +6529,7 @@ if (!customElements.get("wavelength-menu")) {
 
 
 
-exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
+exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js:

package/dist/cjs/index.d.cts

@@ -2286,4 +2286,26 @@ declare class WavelengthMenu extends HTMLElement {
     private _dispatchSelectEvent;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };
+declare class WavelengthPagination extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    private styleAttributes;
+    private renderAttributes;
+    constructor();
+    get totalPages(): number;
+    set totalPages(val: number);
+    get currentPage(): number;
+    set currentPage(val: number);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private _clearAndRender;
+    private _renderByVariant;
+    private _renderBasic;
+    private _getIcons;
+    private _renderCommon;
+    private _createButton;
+    private _changePage;
+    private _syncStyles;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.d.ts

@@ -2286,4 +2286,26 @@ declare class WavelengthMenu extends HTMLElement {
     private _dispatchSelectEvent;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };
+declare class WavelengthPagination extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    private styleAttributes;
+    private renderAttributes;
+    constructor();
+    get totalPages(): number;
+    set totalPages(val: number);
+    get currentPage(): number;
+    set currentPage(val: number);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private _clearAndRender;
+    private _renderByVariant;
+    private _renderBasic;
+    private _getIcons;
+    private _renderCommon;
+    private _createButton;
+    private _changePage;
+    private _syncStyles;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.js

@@ -6344,6 +6344,167 @@ var WavelengthMenu = class extends HTMLElement {
 if (!customElements.get("wavelength-menu")) {
   customElements.define("wavelength-menu", WavelengthMenu);
 }
+
+// src/web-components/wavelength-pagination.template.html
+var wavelength_pagination_template_default = '<style>\n  :host {\n    display: block;\n    --local-font: var(--font, "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);\n    font-family: var(--local-font);\n  }\n\n  .pagination-list,\n  .pagination-list * {\n    font-family: inherit;\n    font-size: var(--font-size, 16px);\n    color: var(--text-color, black);\n  }\n\n  .pagination-list {\n    display: flex;\n    list-style: none;\n    padding: var(--padding, 10px);\n    margin: 0;\n    align-items: center;\n  }\n\n  .page-item {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    user-select: none;\n    background-color: var(--background-color, white);\n  }\n\n  .page-item.disabled,\n  .page-item.disabled * {\n    cursor: default;\n    background-color: var(--background-color, white);\n    color: var(--disabled-color, #ccc);\n    border-color: var(--disabled-color, #ccc);\n  }\n\n  /* --- BASIC VARIANT --- */\n  .pagination-list.basic {\n    gap: 15px;\n  }\n\n  .pagination-list.basic .page-info {\n    margin-right: 10px;\n    font-weight: 500;\n  }\n\n  .pagination-list.basic .page-item {\n    width: 32px;\n    height: 32px;\n    border: var(--border, none);\n    border-radius: var(--border-radius, 50%);\n  }\n\n  .pagination-list.basic .page-item:not(.disabled):hover {\n    filter: brightness(0.95);\n  }\n\n  /* --- COMMON VARIANT --- */\n  .pagination-list.common {\n    gap: 8px;\n  }\n\n  .pagination-list.common .page-item {\n    width: 40px;\n    height: 40px;\n    border: var(--border, none);\n    border-radius: var(--border-radius, 50%);\n  }\n\n  .pagination-list.common .page-item.active,\n  .pagination-list.common .page-item.active * {\n    background-color: var(--active-color, #49baf7);\n    color: var(--active-text-color, #fff);\n    border-color: var(--active-color, #49baf7);\n  }\n\n  .pagination-list.common .page-item:not(.disabled):not(.active):hover {\n    filter: brightness(0.95);\n    transform: scale(1.1);\n  }\n</style>\n<nav aria-label="pagination">\n  <ul class="pagination-list"></ul>\n</nav>\n';
+
+// src/web-components/wavelength-pagination.ts
+var WavelengthPagination = class extends HTMLElement {
+  constructor() {
+    super();
+    this.styleAttributes = ["variant", "text-color", "font", "font-size", "border", "border-radius", "padding", "active-color", "active-text-color", "background-color", "disabled-color"];
+    this.renderAttributes = ["variant", "total-pages", "current-page"];
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_pagination_template_default;
+  }
+  static get observedAttributes() {
+    return [
+      "variant",
+      "text-color",
+      "font",
+      "font-size",
+      "border",
+      "border-radius",
+      "padding",
+      "total-pages",
+      "current-page",
+      "active-color",
+      "active-text-color",
+      "background-color",
+      "disabled-color"
+    ];
+  }
+  get totalPages() {
+    const parsed = Number.parseInt(this.getAttribute("total-pages") || "1", 10);
+    return isNaN(parsed) ? 1 : parsed;
+  }
+  set totalPages(val) {
+    this.setAttribute("total-pages", val.toString());
+  }
+  get currentPage() {
+    const parsed = Number.parseInt(this.getAttribute("current-page") || "1", 10);
+    return isNaN(parsed) ? 1 : parsed;
+  }
+  set currentPage(val) {
+    this.setAttribute("current-page", val.toString());
+  }
+  connectedCallback() {
+    this._clearAndRender();
+    this._syncStyles();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (this.styleAttributes.includes(name)) {
+      this.style.setProperty(`--${name}`, newValue);
+    }
+    if (this.renderAttributes.includes(name)) {
+      this._clearAndRender();
+    }
+  }
+  _clearAndRender() {
+    const list = this.shadow.querySelector(".pagination-list");
+    if (!list) return;
+    const variant = this.getAttribute("variant") || "basic";
+    list.innerHTML = "";
+    list.className = `pagination-list ${variant}`;
+    this._renderByVariant(list, variant);
+  }
+  _renderByVariant(container, variant) {
+    if (variant === "basic") {
+      this._renderBasic(container);
+    } else {
+      this._renderCommon(container);
+    }
+  }
+  _renderBasic(container) {
+    const { singlePrevSvg, singleNextSvg } = this._getIcons();
+    const textInfo = document.createElement("span");
+    textInfo.className = "page-info";
+    textInfo.textContent = `Page ${this.currentPage} of ${this.totalPages}`;
+    container.appendChild(textInfo);
+    const prevBtn = this._createButton(singlePrevSvg, () => this._changePage(this.currentPage - 1), this.currentPage === 1);
+    const nextBtn = this._createButton(singleNextSvg, () => this._changePage(this.currentPage + 1), this.currentPage === this.totalPages);
+    container.appendChild(prevBtn);
+    container.appendChild(nextBtn);
+  }
+  _getIcons() {
+    const doubleArrowPath = `M185.27637,135.6062q-.36694.4466-.77393.85608c-.00732.00745-.01318.01575-.021.02307l-72,72a12.0001,12.0001,0,0,1-16.97071-16.9707L147.02539,140H31.99609a12,12,0,0,1,0-24h115.0293L95.51074,64.48535a12.0001,12.0001,0,0,1,16.97071-16.9707l72,72c.00781.00732.01367.01562.021.02307q.40723.409.77393.85608c.11425.1394.21386.28662.32129.42993.12744.17.25927.33643.37744.51318.11474.17115.21386.34888.31836.5243.09619.1604.19677.31726.28515.48242.09619.17944.17725.36389.26368.547.08105.17188.1665.34083.23974.51685.07373.17847.1333.36084.19824.54187.06787.18836.14014.37415.19825.56677.05468.18116.09472.36524.14111.54834.04932.19641.10449.39038.144.59034.042.21167.0669.42553.09766.63867.0249.17431.05762.3457.07519.52221a12.07306,12.07306,0,0,1,0,2.36866c-.01757.17651-.05029.3479-.07519.52221-.03076.21314-.05567.427-.09766.63867-.03955.2-.09472.39393-.144.59034-.04639.1831-.08643.36718-.14111.54834-.0586.19287-.13086.3789-.19825.56762-.06494.18067-.12451.36255-.19824.54078-.07324.17651-.15918.34558-.24023.5177-.08594.18286-.16748.36718-.26319.54638-.08838.16516-.189.322-.28515.48242-.1045.17542-.20362.35315-.31836.5243-.11817.17675-.25.34314-.37744.51318C185.49023,135.31958,185.39062,135.4668,185.27637,135.6062ZM216,28a12,12,0,0,0-12,12V216a12,12,0,0,0,24,0V40A12,12,0,0,0,216,28Z`;
+    const singleArrowPath = `M426.6 755.2L375 703.6l193.1-193.2L375 317.3l51.6-51.6 244.7 244.7z`;
+    const iconStyle = `width: 24px; height: 24px;`;
+    return {
+      nextSvg: `<svg fill="currentColor" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg" style="${iconStyle}"><g id="SVGRepo_iconCarrier"> <path d="${doubleArrowPath}"></path> </g></svg>`,
+      prevSvg: `<svg fill="currentColor" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg" style="${iconStyle} transform: scaleX(-1);"><g id="SVGRepo_iconCarrier"> <path d="${doubleArrowPath}"></path> </g></svg>`,
+      singleNextSvg: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="${iconStyle}"><g id="SVGRepo_iconCarrier"><path d="${singleArrowPath}" fill="currentColor"></path></g></svg>`,
+      singlePrevSvg: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="${iconStyle} transform: scaleX(-1);"><g id="SVGRepo_iconCarrier"><path d="${singleArrowPath}" fill="currentColor"></path></g></svg>`
+    };
+  }
+  _renderCommon(container) {
+    const { nextSvg, prevSvg, singleNextSvg, singlePrevSvg } = this._getIcons();
+    container.appendChild(this._createButton(prevSvg, () => this._changePage(1), this.currentPage === 1));
+    container.appendChild(this._createButton(singlePrevSvg, () => this._changePage(this.currentPage - 1), this.currentPage === 1));
+    let startPage = Math.max(1, this.currentPage - 3);
+    const endPage = Math.min(this.totalPages, startPage + 6);
+    if (endPage - startPage < 6) {
+      startPage = Math.max(1, endPage - 6);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      const btn = this._createButton(i.toString(), () => this._changePage(i), false);
+      if (i === this.currentPage) btn.classList.add("active");
+      container.appendChild(btn);
+    }
+    container.appendChild(this._createButton(singleNextSvg, () => this._changePage(this.currentPage + 1), this.currentPage === this.totalPages, false, "Next Page"));
+    container.appendChild(this._createButton(nextSvg, () => this._changePage(this.totalPages), this.currentPage === this.totalPages, false, "Last Page"));
+  }
+  _createButton(content, onClick, disabled, isActive = false, ariaLabel) {
+    const li = document.createElement("li");
+    li.className = "page-item";
+    const btn = document.createElement("button");
+    btn.style.all = "unset";
+    btn.style.width = "100%";
+    btn.style.height = "100%";
+    btn.style.display = "flex";
+    btn.style.alignItems = "center";
+    btn.style.justifyContent = "center";
+    btn.style.cursor = disabled ? "default" : "pointer";
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    if (isActive) btn.setAttribute("aria-current", "page");
+    btn.disabled = disabled;
+    if (!disabled) {
+      btn.onclick = onClick;
+    }
+    if (isActive) li.classList.add("active");
+    if (disabled) li.classList.add("disabled");
+    if (content.includes("<svg")) {
+      btn.innerHTML = content;
+    } else {
+      btn.textContent = content;
+    }
+    li.appendChild(btn);
+    return li;
+  }
+  _changePage(newPage) {
+    if (newPage < 1 || newPage > this.totalPages) return;
+    this.setAttribute("current-page", newPage.toString());
+    this.dispatchEvent(
+      new CustomEvent("page-change", {
+        detail: { page: newPage },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _syncStyles() {
+    this.styleAttributes.forEach((attr) => {
+      const value = this.getAttribute(attr);
+      if (value) {
+        this.style.setProperty(`--${attr}`, value);
+      }
+    });
+  }
+};
+if (!customElements.get("wavelength-pagination")) {
+  customElements.define("wavelength-pagination", WavelengthPagination);
+}
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
@@ -6362,6 +6523,7 @@ export {
   WavelengthMultiSelectAutocomplete,
   WavelengthNavBar,
   WavelengthNotificationPanel,
+  WavelengthPagination,
   WavelengthPlaneTrail,
   WavelengthProgressBar,
   WavelengthSnackbar,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/web-components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Common component library used by Wavelength developers (NATIVE WEB COMPONENTS)",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",