@spw-ds/spw-stencil-library 0.0.1

package/dist/collection/components/spw-mosaic/spw-mosaic.js

@@ -0,0 +1,301 @@
+import { Host, h } from "@stencil/core";
+import Masonry from "masonry-layout";
+export class SpwMosaic {
+    constructor() {
+        this.items = undefined;
+        this.isMasonry = false;
+        this.colsMobile = 1;
+        this.colsTablet = 2;
+        this.colsDesktop = 3;
+        this.initialized = false;
+    }
+    itemsChanged(newValue, oldValue) {
+        if (newValue !== oldValue && this.isMasonry) {
+            this.refreshMasonryLayout();
+        }
+    }
+    isMasonryChanged(newValue) {
+        if (newValue) {
+            this.initializeMasonry();
+        }
+        else {
+            this.destroyMasonry();
+        }
+    }
+    async waitForImages() {
+        const images = this.el.shadowRoot.querySelectorAll('img');
+        const loadPromises = Array.from(images).map(image => {
+            return new Promise(resolve => {
+                if (image.complete) {
+                    resolve();
+                }
+                else {
+                    image.addEventListener('load', () => resolve(), { once: true });
+                }
+            });
+        });
+        await Promise.all(loadPromises);
+    }
+    emitConfigurationChanged() {
+        const event = new CustomEvent('mosaicConfigurationChanged', {
+            detail: {
+                colsMobile: this.colsMobile,
+                colsTablet: this.colsTablet,
+                colsDesktop: this.colsDesktop,
+            },
+            bubbles: true,
+            composed: true,
+        });
+        this.el.dispatchEvent(event);
+    }
+    configurationChanged() {
+        this.emitConfigurationChanged();
+    }
+    async refreshMasonryLayout() {
+        if (!this.isMasonry)
+            return;
+        await this.waitForImages();
+        this.initializeMasonry();
+    }
+    componentDidLoad() {
+        if (this.isMasonry) {
+            this.initializeMasonry();
+        }
+        this.observeSlotChanges();
+        this.emitConfigurationChanged();
+    }
+    componentDidUpdate() {
+        if (this.isMasonry) {
+            this.refreshMasonryLayout();
+        }
+    }
+    disconnectedCallback() {
+        this.destroyMasonry();
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    async initializeMasonry() {
+        if (!this.isMasonry)
+            return;
+        requestAnimationFrame(() => {
+            const slot = this.el.shadowRoot.querySelector('slot');
+            const masonryItems = slot.assignedElements({ flatten: true });
+            if (masonryItems.length > 0) {
+                this.masonry = new Masonry(this.el, {
+                    itemSelector: 'spw-mosaic-item',
+                    columnWidth: 'spw-mosaic-item',
+                    percentPosition: true,
+                });
+                this.initialized = true;
+                masonryItems.forEach(item => {
+                    const images = item.querySelectorAll('img');
+                    images.forEach(image => {
+                        if (!image.complete) {
+                            image.addEventListener('load', this.updateMasonryLayout.bind(this), { once: true });
+                        }
+                    });
+                });
+            }
+        });
+    }
+    updateMasonryLayout() {
+        if (this.masonry && this.initialized && this.isMasonry) {
+            this.masonry.layout();
+        }
+    }
+    destroyMasonry() {
+        if (this.masonry) {
+            this.masonry.destroy();
+            this.masonry = null;
+            this.initialized = false;
+        }
+    }
+    observeSlotChanges() {
+        const slot = this.el.shadowRoot.querySelector('slot');
+        this.observer = new MutationObserver(mutations => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList' && this.initialized && this.isMasonry) {
+                    this.initializeMasonry();
+                }
+            }
+        });
+        this.observer.observe(slot, { childList: true });
+    }
+    get elementClass() {
+        return {
+            'spw-mosaic--no-masonry': !this.isMasonry,
+        };
+    }
+    render() {
+        return (h(Host, { key: '1437ea42434276d63459b3aa137916123de1c8e9' }, h("div", { key: 'c024eb5ed7580382d42559746c79c031d7f25bf6', class: this.elementClass }, h("slot", { key: '65290a9d3d8bf83f365e2c4881ba55172f2b1499' }))));
+    }
+    static get is() { return "spw-mosaic"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-mosaic.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-mosaic.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Liste des \u00E9l\u00E9ments \u00E0 afficher dans la mosa\u00EFque"
+                },
+                "attribute": "items",
+                "reflect": false
+            },
+            "isMasonry": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Active le mode \"masonry\" pour une mise en page en grille ajustable"
+                },
+                "attribute": "is-masonry",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "colsMobile": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre de colonnes \u00E0 afficher en vue mobile"
+                },
+                "attribute": "cols-mobile",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "colsTablet": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre de colonnes \u00E0 afficher en vue tablette"
+                },
+                "attribute": "cols-tablet",
+                "reflect": false,
+                "defaultValue": "2"
+            },
+            "colsDesktop": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre de colonnes \u00E0 afficher en vue desktop"
+                },
+                "attribute": "cols-desktop",
+                "reflect": false,
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "initialized": {}
+        };
+    }
+    static get methods() {
+        return {
+            "waitForImages": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "initializeMasonry": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "itemsChanged"
+            }, {
+                "propName": "isMasonry",
+                "methodName": "isMasonryChanged"
+            }, {
+                "propName": "colsMobile",
+                "methodName": "configurationChanged"
+            }, {
+                "propName": "colsTablet",
+                "methodName": "configurationChanged"
+            }, {
+                "propName": "colsDesktop",
+                "methodName": "configurationChanged"
+            }];
+    }
+}
+//# sourceMappingURL=spw-mosaic.js.map

package/dist/collection/components/spw-mosaic/spw-mosaic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-mosaic.js","sourceRoot":"","sources":["../../../src/components/spw-mosaic/spw-mosaic.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Host, h, Method, State, Watch } from '@stencil/core';\nimport Masonry from 'masonry-layout';\n\n@Component({\n  tag: 'spw-mosaic',\n  styleUrl: 'spw-mosaic.scss',\n  shadow: true,\n})\nexport class SpwMosaic {\n  @Element() el: HTMLSpwMosaicElement;\n\n  /** Liste des éléments à afficher dans la mosaïque */\n  @Prop() items?: any;\n  /** Active le mode \"masonry\" pour une mise en page en grille ajustable */\n  @Prop() isMasonry?: boolean = false;\n  /** Nombre de colonnes à afficher en vue mobile */\n  @Prop() colsMobile: number = 1;\n  /** Nombre de colonnes à afficher en vue tablette */\n  @Prop() colsTablet: number = 2;\n  /** Nombre de colonnes à afficher en vue desktop */\n  @Prop() colsDesktop: number = 3;\n\n  private masonry: any;\n  private observer: MutationObserver;\n\n  @State() initialized = false;\n\n  @Watch('items')\n  itemsChanged(newValue: any[], oldValue: any[]) {\n    if (newValue !== oldValue && this.isMasonry) {\n      this.refreshMasonryLayout();\n    }\n  }\n\n  @Watch('isMasonry')\n  isMasonryChanged(newValue: boolean) {\n    if (newValue) {\n      this.initializeMasonry();\n    } else {\n      this.destroyMasonry();\n    }\n  }\n\n  @Method()\n  async waitForImages() {\n    const images = this.el.shadowRoot.querySelectorAll('img');\n    const loadPromises = Array.from(images).map(image => {\n      return new Promise<void>(resolve => {\n        if (image.complete) {\n          resolve();\n        } else {\n          image.addEventListener('load', () => resolve(), { once: true });\n        }\n      });\n    });\n\n    await Promise.all(loadPromises);\n  }\n\n  private emitConfigurationChanged() {\n    const event = new CustomEvent('mosaicConfigurationChanged', {\n      detail: {\n        colsMobile: this.colsMobile,\n        colsTablet: this.colsTablet,\n        colsDesktop: this.colsDesktop,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.el.dispatchEvent(event);\n  }\n\n  @Watch('colsMobile')\n  @Watch('colsTablet')\n  @Watch('colsDesktop')\n  configurationChanged() {\n    this.emitConfigurationChanged();\n  }\n\n  private async refreshMasonryLayout() {\n    if (!this.isMasonry) return;\n\n    await this.waitForImages();\n    this.initializeMasonry();\n  }\n\n  componentDidLoad() {\n    if (this.isMasonry) {\n      this.initializeMasonry();\n    }\n    this.observeSlotChanges();\n    this.emitConfigurationChanged();\n  }\n\n  componentDidUpdate() {\n    if (this.isMasonry) {\n      this.refreshMasonryLayout();\n    }\n  }\n\n  disconnectedCallback() {\n    this.destroyMasonry();\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  @Method()\n  async initializeMasonry() {\n    if (!this.isMasonry) return;\n\n    requestAnimationFrame(() => {\n      const slot = this.el.shadowRoot.querySelector('slot');\n      const masonryItems = slot.assignedElements({ flatten: true });\n      if (masonryItems.length > 0) {\n        this.masonry = new Masonry(this.el, {\n          itemSelector: 'spw-mosaic-item',\n          columnWidth: 'spw-mosaic-item',\n          percentPosition: true,\n        });\n        this.initialized = true;\n\n        masonryItems.forEach(item => {\n          const images = item.querySelectorAll('img');\n          images.forEach(image => {\n            if (!image.complete) {\n              image.addEventListener('load', this.updateMasonryLayout.bind(this), { once: true });\n            }\n          });\n        });\n      }\n    });\n  }\n\n  private updateMasonryLayout() {\n    if (this.masonry && this.initialized && this.isMasonry) {\n      this.masonry.layout();\n    }\n  }\n\n  private destroyMasonry() {\n    if (this.masonry) {\n      this.masonry.destroy();\n      this.masonry = null;\n      this.initialized = false;\n    }\n  }\n\n  private observeSlotChanges() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    this.observer = new MutationObserver(mutations => {\n      for (const mutation of mutations) {\n        if (mutation.type === 'childList' && this.initialized && this.isMasonry) {\n          this.initializeMasonry();\n        }\n      }\n    });\n\n    this.observer.observe(slot, { childList: true });\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-mosaic--no-masonry': !this.isMasonry,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/spw-pagination/spw-pagination.css

@@ -0,0 +1,2 @@
+
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-pagination__item button,.spw-pagination__item--dots{border-radius:32px;font-size:14px;font-weight:700;height:32px;line-height:32px;min-width:32px;text-align:center}.spw-pagination__item button:focus-visible,.spw-pagination__item--dots:focus-visible{outline:3px solid var(--spw-ds-focus)}.spw-pagination{align-items:center;display:flex;flex-direction:column}@media (min-width:768px){.spw-pagination{align-items:flex-start}}.spw-pagination ul{align-items:center;display:flex;padding:0}.spw-pagination__item{margin-right:12px}.spw-pagination__item spw-icon{font-size:18px}.spw-pagination__item button{background:none;border:none;color:var(--spw-color-themes-grey-grey-900);cursor:pointer;margin:0;padding:0 6px}.spw-pagination__item:not(.spw-pagination__item--active,.spw-pagination__item--dots,.spw-pagination__item--disabled):hover button{background:var(--spw-color-themes-grey-grey-200)}.spw-pagination__item:not(.spw-pagination__item--active,.spw-pagination__item--dots,.spw-pagination__item--disabled):active button{background:var(--spw-color-themes-grey-grey-300)}.spw-pagination__item--arrow button{align-items:center;display:flex;gap:8px;padding:0 12px;text-decoration:underline}.spw-pagination__item--arrow button:hover{text-decoration:none}.spw-pagination__item--dots{align-items:center;background:none;color:var(--spw-color-themes-grey-grey-400);cursor:default;display:inline-flex;justify-content:center;position:relative;top:3px}.spw-pagination__item--dots spw-icon{font-size:16px}.spw-pagination__item--desktop{display:none}@media (min-width:768px){.spw-pagination__item--desktop{display:inline-block}}.spw-pagination__item--active button{background:var(--spw-ds-primary);color:#fff}.spw-pagination__input spw-text-field{--spw-input-height:32px;--spw-input-padding:0 4px;--spw-input-text-align:center;--spw-input-font-size:14px;width:3ch}.spw-pagination__mobile-arrows{margin-top:12px}@media (min-width:768px){.spw-pagination__mobile-arrows{display:none!important}}.spw-pagination__total-pages{font-size:14px;margin:0 12px 0 6px}.spw-tw-mb-10{margin-bottom:2.5rem}.spw-tw-mb-6{margin-bottom:1.5rem}.spw-tw-ml-2{margin-left:.5rem}.spw-tw-mr-4{margin-right:1rem}.spw-tw-mt-12{margin-top:3rem}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}

package/dist/collection/components/spw-pagination/spw-pagination.js

@@ -0,0 +1,305 @@
+import { Fragment, Host, h } from "@stencil/core";
+export class SpwPagination {
+    constructor() {
+        this.updateIsMobile = () => {
+            this.isMobile = window.innerWidth < 800;
+        };
+        this.totalItems = undefined;
+        this.itemsPerPage = undefined;
+        this.isDisabled = false;
+        this.variant = 'numbers';
+        this.currentPage = 1;
+        this.inputPageValue = '';
+        this.isMobile = window.innerWidth < 800;
+    }
+    componentWillLoad() {
+        this.calculateTotalPages();
+        this.inputPageValue = this.currentPage.toString();
+        window.addEventListener('resize', this.updateIsMobile);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateIsMobile);
+    }
+    calculateTotalPages() {
+        this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+    }
+    goToPage(page) {
+        if (page !== this.currentPage && !this.isDisabled && page >= 1 && page <= this.totalPages) {
+            this.currentPage = page;
+            this.inputPageValue = this.currentPage.toString();
+            this.pageChanged.emit(this.currentPage);
+        }
+    }
+    handleInputChange(event) {
+        const inputValue = event.target.value;
+        this.inputPageValue = inputValue;
+        const page = parseInt(inputValue, 10);
+        if (!isNaN(page) && page >= 1 && page <= this.totalPages) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => {
+                this.goToPage(page);
+            }, 500);
+        }
+    }
+    getPaginationClass() {
+        var _a, _b;
+        const pages = this.calculatePageRange();
+        const ellipsisCount = pages.filter(({ page }) => page === '...').length;
+        const hasEllipsisStart = ellipsisCount > 0 && ((_a = pages[1]) === null || _a === void 0 ? void 0 : _a.page) === '...';
+        const hasEllipsisEnd = ellipsisCount > 0 && ((_b = pages[pages.length - 2]) === null || _b === void 0 ? void 0 : _b.page) === '...';
+        let paginationClass = `spw-pagination spw-pagination--${this.currentPage} spw-pagination--total-${this.totalPages}`;
+        if (ellipsisCount === 2) {
+            paginationClass += ' spw-pagination--double-ellipsis';
+        }
+        else if (hasEllipsisStart) {
+            paginationClass += ' spw-pagination--ellipsis-start';
+        }
+        else if (hasEllipsisEnd) {
+            paginationClass += ' spw-pagination--ellipsis-end';
+        }
+        return paginationClass;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            const page = parseInt(this.inputPageValue, 10);
+            if (!isNaN(page)) {
+                this.goToPage(page);
+            }
+        }
+    }
+    calculateWidth() {
+        const length = this.inputPageValue.length;
+        if (length <= 1) {
+            return '3ch';
+        }
+        return `${length + 1}ch`;
+    }
+    calculatePageRange() {
+        const pages = [];
+        const { currentPage, totalPages, isMobile } = this;
+        if (isMobile) {
+            // Mode mobile
+            if (totalPages <= 5) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push({ page: i, class: 'spw-pagination__item--small-range' });
+                }
+            }
+            else if (currentPage <= 3) {
+                for (let i = 1; i <= 3; i++) {
+                    pages.push({ page: i, class: 'spw-pagination__item--start-range' });
+                }
+                pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });
+                pages.push({ page: totalPages, class: 'spw-pagination__item--end' });
+            }
+            else if (currentPage >= totalPages - 2) {
+                pages.push({ page: 1, class: 'spw-pagination__item--start' });
+                pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });
+                for (let i = totalPages - 2; i <= totalPages; i++) {
+                    pages.push({ page: i, class: 'spw-pagination__item--end-range' });
+                }
+            }
+            else {
+                pages.push({ page: 1, class: 'spw-pagination__item--start' });
+                pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });
+                for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+                    pages.push({ page: i, class: 'spw-pagination__item--middle-range' });
+                }
+                pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });
+                pages.push({ page: totalPages, class: 'spw-pagination__item--end' });
+            }
+        }
+        else {
+            // Mode desktop
+            if (totalPages <= 7) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push({ page: i, class: 'spw-pagination__item--small-range' });
+                }
+            }
+            else if (currentPage <= 4) {
+                for (let i = 1; i <= 4; i++) {
+                    pages.push({ page: i, class: 'spw-pagination__item--start-range' });
+                }
+                pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });
+                pages.push({ page: totalPages, class: 'spw-pagination__item--end' });
+            }
+            else if (currentPage >= totalPages - 3) {
+                pages.push({ page: 1, class: 'spw-pagination__item--start' });
+                pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });
+                for (let i = totalPages - 3; i <= totalPages; i++) {
+                    pages.push({ page: i, class: 'spw-pagination__item--end-range' });
+                }
+            }
+            else {
+                pages.push({ page: 1, class: 'spw-pagination__item--start' });
+                pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });
+                for (let i = currentPage - 2; i <= currentPage + 2; i++) {
+                    pages.push({ page: i, class: 'spw-pagination__item--middle-range' });
+                }
+                pages.push({ page: '...', class: 'spw-pagination__item--ellipsis' });
+                pages.push({ page: totalPages, class: 'spw-pagination__item--end' });
+            }
+        }
+        return pages;
+    }
+    render() {
+        const pages = this.calculatePageRange();
+        const showPrevArrow = this.currentPage > 1;
+        const showNextArrow = this.currentPage < this.totalPages;
+        const prevArrow = showPrevArrow && (h("li", { key: '92ef42761d0175b2c97a9efe65e8645d0f2336a4', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '795383fd33cd7d4483f857a130858a8e3140ac32', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '083a017a27b2fbc126f602e15a2102d2a5fd24fa', icon: "fa-chevron-left" }), " ", h("span", { key: '5c2d2ac7e3a0eda5dfde49080f3239c97922d663', class: "spw-pagination__item-arrow-text" }, "Pr\u00E9c\u00E9dent"))));
+        const nextArrow = showNextArrow && (h("li", { key: '9217f13b26fdd534353493612a74c9cd80c63e02', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: 'ad665dfb749a5770ffdf6bd53982f8b79b565efb', onClick: () => this.goToPage(this.currentPage + 1) }, h("span", { key: '1e788ff34cdb5ac89df8ee9d69142048dfc423cf', class: "spw-pagination__item-arrow-text" }, "Suivant"), " ", h("spw-icon", { key: 'e1263d3d81c527d4c8f559c7efbe4a882e44f880', icon: "fa-chevron-right" }))));
+        const prevArrowMobile = this.currentPage > 1 && (h("li", { key: '155ccc9ef12e82ff0ff4053e6e9121f71d3347e9', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '4846fba3c684879086a4445ab59d11b9fedbd729', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: 'fcc99138e3ba55024e89ac7da3acc4d6e4c0a811', icon: "fa-chevron-left" }), " ", h("span", { key: '86a1e9d336d69919ac1deed354d85138e73c8315' }, "Pr\u00E9c\u00E9dent"))));
+        const nextArrowMobile = this.currentPage < this.totalPages && (h("li", { key: '6492294cc5f678aef792ca166c1f276b0e9f97b9', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '48db42f6df00985e6e75eeba69afdb4a8de54af5', onClick: () => this.goToPage(this.currentPage + 1), disabled: this.currentPage >= this.totalPages }, h("span", { key: 'c637153995e2e2999c2f4d9c05a5ac5a1eb9daaf' }, "Suivant"), " ", h("spw-icon", { key: '82941730947e3f827215e800efcc3320e4886b2c', icon: "fa-chevron-right" }))));
+        const mobileArrows = (h("ul", { key: '49c47245a12a39a869eb8e6446fbbb18b6c81b72', class: "spw-pagination__mobile-arrows" }, prevArrowMobile, nextArrowMobile));
+        return (h(Host, { key: 'fd390d68353001dcbc9aadb5f54d367ac512b152' }, h("div", { key: '52264d5fb04ce2b901619c9cd8300fe8e982d460', class: this.getPaginationClass() }, this.variant === 'input' && (h(Fragment, { key: '5c8accb96a11eb63350e56df10c927cdaa8cf0d1' }, h("ul", { key: '9fa4233681297a17bc205d8a0433bd8069c27d5c' }, prevArrow, h("li", { key: '68a58a3f690f81a1e57a04e63db1612ada7b745e', class: "spw-pagination__input" }, h("spw-text-field", { key: '8fe43453a3a780d77e4ce6d16805f8b6ae63901f', value: this.inputPageValue, type: "number", onInput: event => this.handleInputChange(event), onKeyDown: event => this.handleKeyDown(event), disabled: this.isDisabled, style: { width: this.calculateWidth() } })), h("li", { key: '38727323566f8d52440dbc75c87befa17394cdb8', class: "spw-pagination__total-pages" }, "sur ", this.totalPages, " pages"), nextArrow), mobileArrows)), this.variant === 'numbers' && (h(Fragment, { key: '54277117ac1b6a806bc7af5b4abf1b3a964d137f' }, h("ul", { key: 'a0c936f6ac0029c7863f30bdfce1bf46224060dc' }, prevArrow, pages.map(({ page, class: pageClass }) => {
+            if (page === '...') {
+                return (h("li", { class: `spw-pagination__item spw-pagination__item--dots ${pageClass}` }, h("spw-icon", { icon: "fa-ellipsis" })));
+            }
+            return (h("li", { class: {
+                    'spw-pagination__item': true,
+                    'spw-pagination__item--active': page === this.currentPage,
+                    [pageClass]: true,
+                } }, h("button", { onClick: () => this.goToPage(page), disabled: page === this.currentPage }, page)));
+        }), nextArrow), mobileArrows)))));
+    }
+    static get is() { return "spw-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-pagination.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "totalItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre total d'\u00E9l\u00E9ments \u00E0 paginer"
+                },
+                "attribute": "total-items",
+                "reflect": false
+            },
+            "itemsPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre d'\u00E9l\u00E9ments \u00E0 afficher par page"
+                },
+                "attribute": "items-per-page",
+                "reflect": false
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si la pagination est d\u00E9sactiv\u00E9e"
+                },
+                "attribute": "is-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'numbers' | 'input'",
+                    "resolved": "\"input\" | \"numbers\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type de variante de la pagination : 'numbers' ou 'input'"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'numbers'"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Page actuellement s\u00E9lectionn\u00E9e, mutable"
+                },
+                "attribute": "current-page",
+                "reflect": false,
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputPageValue": {},
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pageChanged",
+                "name": "pageChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement \u00E9mis lorsque la page est chang\u00E9e, renvoie le num\u00E9ro de la nouvelle page"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "totalItems",
+                "methodName": "calculateTotalPages"
+            }, {
+                "propName": "itemsPerPage",
+                "methodName": "calculateTotalPages"
+            }, {
+                "propName": "currentPage",
+                "methodName": "calculateTotalPages"
+            }];
+    }
+}
+//# sourceMappingURL=spw-pagination.js.map