@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

package/dist/components/z-pagination.js

@@ -1 +1,283 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,Host as o,transformTag as s}from"@stencil/core/internal/client";import{I as e}from"./index2.js";import{d as r}from"./index5.js";import{d as l}from"./index3.js";import{d as p}from"./index7.js";import{d as g}from"./index8.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.pageChanged=a(this,"pageChanged",7),this.navArrows=!0,this.skip=0,this.edges=!1,this.currentPage=1,this._visiblePages=this.visiblePages,this.isMobile=!1,this.goToPageValue=null}setPagesContainerWidth(){if(!this._visiblePages||this.split)return void this.host.style.setProperty("--z-pagination--pages-container-max-width","100%");const t=window.getComputedStyle(this.host).getPropertyValue("--z-pagination--page-button-width");this.host.style.setProperty("--z-pagination--pages-container-max-width",`calc(${t} * ${this._visiblePages})`)}setVisiblePages(){this._visiblePages=Math.min(this.visiblePages||this.totalPages,this.totalPages)}onPageChanged(){this.pageChanged.emit(this.currentPage),this.scrollToPage()}onSplitChanged(){this.split&&(this.edges=!1)}onResize(){this.setMobile()}setMobile(){this.isMobile=window.matchMedia("screen and (max-width: 767px)").matches}getPagesChunks(){const t=Array.from({length:this.totalPages},((t,i)=>i+1)),i=[],a=Math.ceil(t.length/this._visiblePages);for(let n=0;n<a;n++)i.push(t.slice(n*this._visiblePages,(n+1)*this._visiblePages));return i}scrollToPage(){var t,i;const a=this.host.querySelector(".pages-container"),n=this.host.querySelector(`[data-page="${this.currentPage}"]`),o=this.host.querySelector(".navigation-button");if(!n||!a)return;const s=a.getBoundingClientRect().width,e=n.getBoundingClientRect().width,r=null!==(i=null===(t=null==o?void 0:o.getBoundingClientRect())||void 0===t?void 0:t.width)&&void 0!==i?i:0;a.scrollLeft=this.currentPage*e-r-s/2}selectPage(t){this.currentPage=Math.min(Math.max(t,1),this.totalPages)}renderPage(t){return n("button",{class:"page-button",type:"button","aria-current":this.currentPage===t?"page":"false",title:"Vai alla pagina "+t,"data-page":t,"data-current":this.currentPage===t,onClick:()=>this.selectPage(t)},t)}renderEllipsisButton(t){return n("button",{class:"ellipsis-button",type:"button",title:"Vai alla pagina "+t,onClick:()=>this.selectPage(t)},"…")}renderPages(){const t=this.getPagesChunks();if(!(t.length<=0))return t.map((t=>n("div",{class:"pages-chunk"},t.map((t=>this.renderPage(t))))))}renderSplitPages(){return this.totalPages<=2*this.split+5?Array.from({length:this.totalPages},((t,i)=>this.renderPage(i+1))):this.currentPage<=2*this.split+2?[...Array.from({length:2*this.split+3},((t,i)=>this.renderPage(i+1))),this.renderEllipsisButton(2*this.split+4),this.renderPage(this.totalPages)]:this.currentPage>2*this.split+2&&this.currentPage<this.totalPages-2*this.split-1?[this.renderPage(1),this.renderEllipsisButton(this.currentPage-this.split-1),...Array.from({length:2*this.split+1},((t,i)=>this.renderPage(this.currentPage-this.split+i))),this.renderEllipsisButton(this.currentPage+this.split+1),this.renderPage(this.totalPages)]:[this.renderPage(1),this.renderEllipsisButton(this.totalPages-2*this.split-3),...Array.from({length:2*this.split+3},((t,i)=>this.renderPage(this.totalPages-2*this.split-2+i)))]}renderBackButton(){return n("button",{class:"navigation-button",type:"button",title:"Vai alla pagina precedente",disabled:1===this.currentPage,onClick:()=>this.selectPage(this.currentPage-1)},n("z-icon",{name:"chevron-left"}))}renderForwardButton(){return n("button",{class:"navigation-button",type:"button",title:"Vai alla prossima pagina",disabled:this.currentPage===this.totalPages,onClick:()=>this.selectPage(this.currentPage+1)},n("z-icon",{name:"chevron-right"}))}renderMobile(){const t=this.getPagesChunks();return[this.label&&n("span",{class:"page-label body-1-sb"},this.label),n("div",{class:"pagination-bar"},this.renderBackButton(),!this.goToPage&&n("div",{class:"pages-container",role:"navigation",tabIndex:-1},t.length>0&&t.map((t=>n("div",{class:"pages-chunk"},t.map((t=>this.renderPage(t))))))),this.goToPage&&n("form",{class:"mobile-go-to-page",onSubmit:t=>{t.preventDefault(),this.selectPage(this.goToPageValue)}},n("z-input",{class:"go-to-page-input",type:e.NUMBER,min:1,max:this.totalPages,message:!1,onInput:t=>{this.goToPageValue=t.target.value},placeholder:""+this.currentPage,hasclearicon:!1}),n("span",null,"/"+this.totalPages)),this.renderForwardButton())]}componentDidLoad(){this.setVisiblePages()}componentDidRender(){this.split&&(this.edges=!1),this.setPagesContainerWidth(),this.setMobile(),this.scrollToPage()}render(){return this.isMobile?n(o,null,this.renderMobile()):n(o,null,n("div",{class:"pagination-bar"},this.label&&n("span",{class:"page-label body-1-sb"},this.label),this.edges&&n("button",{class:"pagination-button",type:"button",title:"Vai alla pagina 1",disabled:1===this.currentPage,onClick:()=>this.selectPage(1)},"Pagina 1"),this.skip<this.totalPages&&this.skip>1&&n("button",{class:"pagination-button",type:"button",title:"Vai alla pagina "+(this.currentPage-this.skip),disabled:this.currentPage<=this.skip,onClick:()=>this.selectPage(this.currentPage-this.skip)},"-",this.skip),this.navArrows&&this.renderBackButton(),n("div",{class:"pages-container",role:"navigation",tabIndex:-1},this.split?this.renderSplitPages():this.renderPages()),this.navArrows&&this.renderForwardButton(),this.skip<this.totalPages&&this.skip>1&&n("button",{class:"pagination-button",type:"button",title:"Vai alla pagina "+(this.currentPage+this.skip),disabled:this.currentPage>this.totalPages-this.skip,onClick:()=>this.selectPage(this.currentPage+this.skip)},"+",this.skip),this.edges&&n("button",{class:"pagination-button",type:"button",title:"Vai alla pagina "+this.totalPages,disabled:this.currentPage===this.totalPages,onClick:()=>this.selectPage(this.totalPages)},"Pagina ",this.totalPages)),this.goToPage&&n("div",{class:"go-to-page"},n("span",{class:"z-label body-5-sb"},"Vai a pagina:"),n("div",{class:"inputs"},n("z-input",{class:"go-to-page-input",type:e.NUMBER,min:1,max:this.totalPages,message:!1,placeholder:"2",hasclearicon:!1,onInput:t=>{this.goToPageValue=t.target.value},onKeyDown:t=>"Enter"===t.key&&this.selectPage(this.goToPageValue)}),n("z-button",{disabled:!this.goToPageValue,title:"Vai alla pagina inserita",onClick:()=>this.selectPage(this.goToPageValue)},"vai"))))}get host(){return this}static get watchers(){return{_visiblePages:[{setPagesContainerWidth:0}],visiblePages:[{setVisiblePages:0}],currentPage:[{onPageChanged:0}],split:[{onSplitChanged:0}]}}static get style(){return"z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;--z-pagination-background-color:var(--color-background);--z-pagination-background-color-hover:var(--color-surface01);display:flex;max-width:100%;flex-flow:column wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-primary01-icon)}z-pagination *:disabled z-icon{fill:var(--color-disabled03)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-default-text)}z-pagination .pagination-bar{display:flex;max-width:100%;height:48px;align-items:center}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;border:none;margin:0;background-color:var(--z-pagination-background-color);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,     color 0.15s ease-out,     border-bottom-color 0.15s ease-out,     font-size 0.15s ease-in-out,     font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-surface01);outline:none}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);font-weight:var(--font-sb);text-transform:uppercase;white-space:nowrap}z-pagination .pagination-bar .navigation-button{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)}z-pagination .pagination-bar .pagination-button:disabled,z-pagination .pagination-bar .navigation-button:disabled{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);pointer-events:none}z-pagination .pagination-bar .page-button,z-pagination .pagination-bar .ellipsis-button{width:var(--z-pagination--page-button-width)}z-pagination .pages-container{position:relative;display:inline-flex;max-width:100%;height:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-align:center;scrollbar-width:none}z-pagination .pages-container::-webkit-scrollbar{display:none}z-pagination .pages-chunk{display:flex;scroll-snap-align:center}z-pagination .pagination-bar .page-button{padding-top:var(--border-size-large) solid transparent;border-bottom:var(--border-size-large) solid transparent;font-size:var(--font-size-2);font-weight:var(--font-sb)}z-pagination .pagination-bar .page-button[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column}z-pagination .go-to-page .inputs{display:flex;column-gap:var(--space-unit)}z-pagination .go-to-page .inputs z-input{width:calc(var(--space-unit) * 11)}z-pagination .go-to-page .inputs z-input input,z-pagination .mobile-go-to-page z-input input{padding:0 calc(var(--space-unit) * 1.5) !important;appearance:none}z-pagination .mobile-go-to-page{display:flex;height:100%;flex:1 auto;align-items:center;justify-content:center;background-color:var(--color-surface02)}z-pagination .mobile-go-to-page z-input{width:var(--z-pagination--page-button-width);margin-right:var(--space-unit)}z-pagination .mobile-go-to-page z-input input{text-align:center}z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button{appearance:none}z-pagination .mobile-go-to-page>span{font-size:var(--font-size-2)}@media (hover: hover){z-pagination .pagination-bar button:hover{background-color:var(--z-pagination-background-color-hover)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-primary);color:var(--color-hover-primary)}}@media (min-width: 768px){z-pagination{--z-pagination--page-button-width:88px;flex-direction:row;align-items:flex-end}z-pagination .pages-container{max-width:var(--z-pagination--pages-container-max-width)}}"}},[0,"z-pagination",{label:[1],navArrows:[4,"nav-arrows"],totalPages:[2,"total-pages"],skip:[2],edges:[4],split:[2],visiblePages:[2,"visible-pages"],currentPage:[1026,"current-page"],goToPage:[4,"go-to-page"],_visiblePages:[32],isMobile:[32],goToPageValue:[32]},[[9,"resize","onResize"]],{_visiblePages:[{setPagesContainerWidth:0}],visiblePages:[{setVisiblePages:0}],currentPage:[{onPageChanged:0}],split:[{onSplitChanged:0}]}]),c=h,u=function(){"undefined"!=typeof customElements&&["z-pagination","z-button","z-icon","z-input","z-input-message"].forEach((t=>{switch(t){case"z-pagination":customElements.get(s(t))||customElements.define(s(t),h);break;case"z-button":customElements.get(s(t))||r();break;case"z-icon":customElements.get(s(t))||l();break;case"z-input":customElements.get(s(t))||p();break;case"z-input-message":customElements.get(s(t))||g()}}))};export{c as ZPagination,u as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { I as InputType } from './index2.js';
+import { d as defineCustomElement$5 } from './index5.js';
+import { d as defineCustomElement$4 } from './index10.js';
+import { d as defineCustomElement$3 } from './index12.js';
+import { d as defineCustomElement$2 } from './index13.js';
+
+const stylesCss = "z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;--z-pagination-background-color:var(--color-background);--z-pagination-background-color-hover:var(--color-surface01);display:flex;max-width:100%;flex-flow:column wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-primary01-icon)}z-pagination *:disabled z-icon{fill:var(--color-disabled03)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-default-text)}z-pagination .pagination-bar{display:flex;max-width:100%;height:48px;align-items:center}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;border:none;margin:0;background-color:var(--z-pagination-background-color);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,\n    color 0.15s ease-out,\n    border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out,\n    font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-surface01);outline:none}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);font-weight:var(--font-sb);text-transform:uppercase;white-space:nowrap}z-pagination .pagination-bar .navigation-button{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)}z-pagination .pagination-bar .pagination-button:disabled,z-pagination .pagination-bar .navigation-button:disabled{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);pointer-events:none}z-pagination .pagination-bar .page-button,z-pagination .pagination-bar .ellipsis-button{width:var(--z-pagination--page-button-width)}z-pagination .pages-container{position:relative;display:inline-flex;max-width:100%;height:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-align:center;scrollbar-width:none}z-pagination .pages-container::-webkit-scrollbar{display:none}z-pagination .pages-chunk{display:flex;scroll-snap-align:center}z-pagination .pagination-bar .page-button{padding-top:var(--border-size-large) solid transparent;border-bottom:var(--border-size-large) solid transparent;font-size:var(--font-size-2);font-weight:var(--font-sb)}z-pagination .pagination-bar .page-button[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column}z-pagination .go-to-page .inputs{display:flex;column-gap:var(--space-unit)}z-pagination .go-to-page .inputs z-input{width:calc(var(--space-unit) * 11)}z-pagination .go-to-page .inputs z-input input,z-pagination .mobile-go-to-page z-input input{padding:0 calc(var(--space-unit) * 1.5) !important;appearance:none}z-pagination .mobile-go-to-page{display:flex;height:100%;flex:1 auto;align-items:center;justify-content:center;background-color:var(--color-surface02)}z-pagination .mobile-go-to-page z-input{width:var(--z-pagination--page-button-width);margin-right:var(--space-unit)}z-pagination .mobile-go-to-page z-input input{text-align:center}z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button{appearance:none}z-pagination .mobile-go-to-page>span{font-size:var(--font-size-2)}@media (hover: hover){z-pagination .pagination-bar button:hover{background-color:var(--z-pagination-background-color-hover)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-primary);color:var(--color-hover-primary)}}@media (min-width: 768px){z-pagination{--z-pagination--page-button-width:88px;flex-direction:row;align-items:flex-end}z-pagination .pages-container{max-width:var(--z-pagination--pages-container-max-width)}}";
+const ZPaginationStyle0 = stylesCss;
+
+const ZPagination$1 = /*@__PURE__*/ proxyCustomElement(class ZPagination extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.pageChanged = createEvent(this, "pageChanged", 7);
+        this.label = undefined;
+        this.navArrows = true;
+        this.totalPages = undefined;
+        this.skip = 0;
+        this.edges = false;
+        this.split = undefined;
+        this.visiblePages = undefined;
+        this.currentPage = 1;
+        this.goToPage = undefined;
+        this._visiblePages = this.visiblePages;
+        this.isMobile = false;
+        this.goToPageValue = null;
+    }
+    /**
+     * Set the max width of the pages container.
+     */
+    setPagesContainerWidth() {
+        if (!this._visiblePages || this.split) {
+            this.host.style.setProperty("--z-pagination--pages-container-max-width", "100%");
+            return;
+        }
+        const pagesContainerStyle = window.getComputedStyle(this.host);
+        const pageButtonWidth = pagesContainerStyle.getPropertyValue("--z-pagination--page-button-width");
+        this.host.style.setProperty("--z-pagination--pages-container-max-width", `calc(${pageButtonWidth} * ${this._visiblePages})`);
+    }
+    /**
+     * Set visible pages.
+     * Ensure that the visible pages are always <= the total pages.
+     * If `visiblePages` isn't set, fallback to the total pages.
+     */
+    setVisiblePages() {
+        this._visiblePages = Math.min(this.visiblePages || this.totalPages, this.totalPages);
+    }
+    /**
+     * On page changed.
+     * @emits pageChanged
+     */
+    onPageChanged() {
+        this.pageChanged.emit(this.currentPage);
+        this.scrollToPage();
+    }
+    /**
+     * On split changed.
+     * Empty `edges` value. The split feature wins over the pages chunks and edges.
+     */
+    onSplitChanged() {
+        if (this.split) {
+            this.edges = false;
+        }
+    }
+    /**
+     * Hide stuff on mobile.
+     */
+    onResize() {
+        this.setMobile();
+    }
+    /**
+     * Set functionalities according to screen size.
+     */
+    setMobile() {
+        const mobileMediaQuery = "screen and (max-width: 767px)";
+        this.isMobile = window.matchMedia(mobileMediaQuery).matches;
+    }
+    /**
+     * Get a list of pages chunks, each of `visiblePages` length.
+     * @returns {number[][]}
+     */
+    getPagesChunks() {
+        // array of numbers from 1 to `totalPages`
+        const pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
+        const chunks = [];
+        const chunksCount = Math.ceil(pages.length / this._visiblePages);
+        for (let index = 0; index < chunksCount; index++) {
+            chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));
+        }
+        return chunks;
+    }
+    /**
+     * Scroll to the left the chunk of pages containing the current page.
+     */
+    scrollToPage() {
+        var _a, _b;
+        const container = this.host.querySelector(".pages-container");
+        const pageBtn = this.host.querySelector(`[data-page="${this.currentPage}"]`);
+        const navBtn = this.host.querySelector(".navigation-button");
+        if (!pageBtn || !container) {
+            return;
+        }
+        const containerWidth = container.getBoundingClientRect().width;
+        const pageBtnWidth = pageBtn.getBoundingClientRect().width;
+        const navBtnWidth = (_b = (_a = navBtn === null || navBtn === void 0 ? void 0 : navBtn.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
+        container.scrollLeft = this.currentPage * pageBtnWidth - navBtnWidth - containerWidth / 2;
+    }
+    /**
+     * Select a page.
+     * Do validations on the passed value before assigning it to `currentPage`.
+     * @param {number} page Page number to set
+     */
+    selectPage(page) {
+        this.currentPage = Math.min(Math.max(page, 1), this.totalPages);
+    }
+    /**
+     * Render page number button.
+     * @param {number} page Page number to render
+     * @returns {HTMLButtonElement}
+     */
+    renderPage(page) {
+        return (h("button", { class: "page-button", type: "button", "aria-current": this.currentPage === page ? "page" : "false", title: `Vai alla pagina ${page}`, "data-page": page, "data-current": this.currentPage === page, onClick: () => this.selectPage(page) }, page));
+    }
+    /**
+     * Render split button.
+     * @param {number} page Page to select on click.
+     * @returns {HTMLButtonElement}
+     */
+    renderEllipsisButton(page) {
+        return (h("button", { class: "ellipsis-button", type: "button", title: `Vai alla pagina ${page}`, onClick: () => this.selectPage(page) }, "\u2026"));
+    }
+    /**
+     * Render chunked page buttons.
+     * @returns {HTMLDivElement[]}
+     */
+    renderPages() {
+        const pagesChunks = this.getPagesChunks();
+        if (pagesChunks.length <= 0) {
+            return;
+        }
+        return pagesChunks.map((chunk) => h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page))));
+    }
+    /**
+     * Render page buttons when split feature is enabled.
+     * @returns {HTMLButtonElement[]}
+     */
+    renderSplitPages() {
+        // left and right split pages, current page, first and last page, left and right ellipsis button
+        if (this.totalPages <= this.split * 2 + 5) {
+            // Too few pages: ellipsis will never be rendered, so let's just render all pages and that's it.
+            return Array.from({ length: this.totalPages }, (_, i) => this.renderPage(i + 1));
+        }
+        if (this.currentPage <= this.split * 2 + 2) {
+            // Render first (2 * split + 3) pages, ellipsis, then last page.
+            return [
+                ...Array.from({ length: this.split * 2 + 3 }, (_, i) => this.renderPage(i + 1)),
+                this.renderEllipsisButton(this.split * 2 + 4),
+                this.renderPage(this.totalPages),
+            ];
+        }
+        if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {
+            // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.
+            return [
+                this.renderPage(1),
+                this.renderEllipsisButton(this.currentPage - this.split - 1),
+                ...Array.from({ length: this.split * 2 + 1 }, (_, i) => this.renderPage(this.currentPage - this.split + i)),
+                this.renderEllipsisButton(this.currentPage + this.split + 1),
+                this.renderPage(this.totalPages),
+            ];
+        }
+        // Render first page, ellipsis, then last (2 * split + 3) pages.
+        return [
+            this.renderPage(1),
+            this.renderEllipsisButton(this.totalPages - this.split * 2 - 3),
+            ...Array.from({ length: this.split * 2 + 3 }, (_, i) => this.renderPage(this.totalPages - this.split * 2 - 2 + i)),
+        ];
+    }
+    renderBackButton() {
+        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla pagina precedente", disabled: this.currentPage === 1, onClick: () => this.selectPage(this.currentPage - 1) }, h("z-icon", { name: "chevron-left" })));
+    }
+    renderForwardButton() {
+        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla prossima pagina", disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.currentPage + 1) }, h("z-icon", { name: "chevron-right" })));
+    }
+    renderMobile() {
+        const pagesChunks = this.getPagesChunks();
+        return [
+            this.label && h("span", { class: "page-label body-1-sb" }, this.label),
+            h("div", { class: "pagination-bar" }, this.renderBackButton(), !this.goToPage && (h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, pagesChunks.length > 0 &&
+                pagesChunks.map((chunk) => h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page)))))), this.goToPage && (h("form", { class: "mobile-go-to-page", onSubmit: (ev) => {
+                    ev.preventDefault();
+                    this.selectPage(this.goToPageValue);
+                } }, h("z-input", { class: "go-to-page-input", type: InputType.NUMBER, min: 1, max: this.totalPages, message: false, onInput: (ev) => {
+                    this.goToPageValue = ev.target.value;
+                }, placeholder: this.currentPage.toString(), hasclearicon: false }), h("span", null, `/${this.totalPages}`))), this.renderForwardButton()),
+        ];
+    }
+    componentDidLoad() {
+        this.setVisiblePages();
+    }
+    componentDidRender() {
+        if (this.split) {
+            this.edges = false;
+        }
+        this.setPagesContainerWidth();
+        this.setMobile();
+        this.scrollToPage();
+    }
+    render() {
+        if (this.isMobile) {
+            return h(Host, null, this.renderMobile());
+        }
+        return (h(Host, null, h("div", { class: "pagination-bar" }, this.label && h("span", { class: "page-label body-1-sb" }, this.label), this.edges && (h("button", { class: "pagination-button", type: "button", title: "Vai alla pagina 1", disabled: this.currentPage === 1, onClick: () => this.selectPage(1) }, "Pagina 1")), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage - this.skip}`, disabled: this.currentPage <= this.skip, onClick: () => this.selectPage(this.currentPage - this.skip) }, "-", this.skip)), this.navArrows && this.renderBackButton(), h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()), this.navArrows && this.renderForwardButton(), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) }, "+", this.skip)), this.edges && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.totalPages}`, disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.totalPages) }, "Pagina ", this.totalPages))), this.goToPage && (h("div", { class: "go-to-page" }, h("span", { class: "z-label body-5-sb" }, "Vai a pagina:"), h("div", { class: "inputs" }, h("z-input", { class: "go-to-page-input", type: InputType.NUMBER, min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
+                this.goToPageValue = ev.target.value;
+            }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }), h("z-button", { disabled: !this.goToPageValue, title: "Vai alla pagina inserita", onClick: () => this.selectPage(this.goToPageValue) }, "vai"))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "_visiblePages": ["setPagesContainerWidth"],
+        "visiblePages": ["setVisiblePages"],
+        "currentPage": ["onPageChanged"],
+        "split": ["onSplitChanged"]
+    }; }
+    static get style() { return ZPaginationStyle0; }
+}, [0, "z-pagination", {
+        "label": [1],
+        "navArrows": [4, "nav-arrows"],
+        "totalPages": [2, "total-pages"],
+        "skip": [2],
+        "edges": [4],
+        "split": [2],
+        "visiblePages": [2, "visible-pages"],
+        "currentPage": [1026, "current-page"],
+        "goToPage": [4, "go-to-page"],
+        "_visiblePages": [32],
+        "isMobile": [32],
+        "goToPageValue": [32]
+    }, [[9, "resize", "onResize"]], {
+        "_visiblePages": ["setPagesContainerWidth"],
+        "visiblePages": ["setVisiblePages"],
+        "currentPage": ["onPageChanged"],
+        "split": ["onSplitChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-pagination", "z-button", "z-icon", "z-input", "z-input-message"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZPagination$1);
+            }
+            break;
+        case "z-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "z-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-input-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZPagination = ZPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZPagination, defineCustomElement };
+
+//# sourceMappingURL=z-pagination.js.map

package/dist/components/z-pagination.js.map

@@ -0,0 +1 @@
+{"file":"z-pagination.js","mappings":"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","names":["ZPagination"],"sources":["src/components/z-pagination/styles.css?tag=z-pagination","src/components/z-pagination/index.tsx"],"sourcesContent":["z-pagination {\n  --z-pagination--page-button-width: 64px;\n  --z-pagination--pages-container-max-width: 100%;\n  --z-pagination-background-color: var(--color-background);\n  --z-pagination-background-color-hover: var(--color-surface01);\n\n  display: flex;\n  max-width: 100%;\n  flex-flow: column wrap;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);\n}\n\nz-pagination,\nz-pagination * {\n  box-sizing: border-box;\n}\n\nz-pagination button {\n  height: 100%;\n}\n\nz-pagination z-icon {\n  fill: var(--color-primary01-icon);\n}\n\nz-pagination *:disabled z-icon {\n  fill: var(--color-disabled03);\n}\n\nz-pagination .page-label {\n  margin-right: calc(var(--space-unit) * 3);\n  color: var(--color-default-text);\n}\n\nz-pagination .pagination-bar {\n  display: flex;\n  max-width: 100%;\n  height: 48px;\n  align-items: center;\n}\n\nz-pagination .pagination-bar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  margin: 0;\n  background-color: var(--z-pagination-background-color);\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-family: inherit;\n  font-weight: inherit;\n  transition:\n    background-color 0.15s ease-out,\n    color 0.15s ease-out,\n    border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out,\n    font-weight 0.15s ease-in-out;\n}\n\nz-pagination .pagination-bar button:focus-visible {\n  background-color: var(--color-surface01);\n  outline: none;\n}\n\nz-pagination .pagination-bar .pagination-button {\n  padding: calc(var(--space-unit) * 2);\n  font-weight: var(--font-sb);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\nz-pagination .pagination-bar .navigation-button {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);\n}\n\nz-pagination .pagination-bar .pagination-button:disabled,\nz-pagination .pagination-bar .navigation-button:disabled {\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  pointer-events: none;\n}\n\nz-pagination .pagination-bar .page-button,\nz-pagination .pagination-bar .ellipsis-button {\n  width: var(--z-pagination--page-button-width);\n}\n\nz-pagination .pages-container {\n  position: relative;\n  display: inline-flex;\n  max-width: 100%;\n  height: 100%;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  scroll-snap-align: center;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-pagination .pages-container::-webkit-scrollbar {\n  display: none;\n}\n\nz-pagination .pages-chunk {\n  display: flex;\n  scroll-snap-align: center;\n}\n\nz-pagination .pagination-bar .page-button {\n  padding-top: var(--border-size-large) solid transparent;\n  border-bottom: var(--border-size-large) solid transparent;\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n}\n\nz-pagination .pagination-bar .page-button[data-current] {\n  border-bottom-color: var(--color-primary01);\n  font-size: var(--font-size-7);\n}\n\nz-pagination .go-to-page {\n  display: flex;\n  flex-direction: column;\n}\n\nz-pagination .go-to-page .inputs {\n  display: flex;\n  column-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .inputs z-input {\n  width: calc(var(--space-unit) * 11);\n}\n\nz-pagination .go-to-page .inputs z-input input,\nz-pagination .mobile-go-to-page z-input input {\n  padding: 0 calc(var(--space-unit) * 1.5) !important;\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page {\n  display: flex;\n  height: 100%;\n  flex: 1 auto;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--color-surface02);\n}\n\nz-pagination .mobile-go-to-page z-input {\n  width: var(--z-pagination--page-button-width);\n  margin-right: var(--space-unit);\n}\n\nz-pagination .mobile-go-to-page z-input input {\n  text-align: center;\n}\n\nz-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,\nz-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button {\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page > span {\n  font-size: var(--font-size-2);\n}\n\n@media (hover: hover) {\n  z-pagination .pagination-bar button:hover {\n    background-color: var(--z-pagination-background-color-hover);\n  }\n\n  z-pagination .pagination-bar .page-button:hover {\n    border-bottom-color: var(--color-hover-primary);\n    color: var(--color-hover-primary);\n  }\n}\n\n@media (min-width: 768px) {\n  z-pagination {\n    --z-pagination--page-button-width: 88px;\n\n    flex-direction: row;\n    align-items: flex-end;\n  }\n\n  z-pagination .pages-container {\n    max-width: var(--z-pagination--pages-container-max-width);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputType} from \"../../beans\";\n\n/**\n * Pagination bar component.\n * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background\n * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01\n */\n@Component({\n  tag: \"z-pagination\",\n  styleUrl: \"styles.css\",\n})\nexport class ZPagination {\n  @Element() host: HTMLZPaginationElement;\n\n  /** Pagination label placed before the bar. */\n  @Prop()\n  label?: string;\n\n  /** Enable navigation arrows. */\n  @Prop()\n  navArrows = true;\n\n  /** Total number of pages. Required. */\n  @Prop()\n  totalPages!: number;\n\n  /** Number of pages to skip. */\n  @Prop()\n  skip = 0;\n\n  /** Enable buttons to go to the first and last pages. */\n  @Prop()\n  edges = false;\n\n  /** Number of pages to show left/right of the current, before showing \"load more\" symbol (…). */\n  @Prop()\n  split?: number;\n\n  /** Number of pages to show at a time. If not set, all pages will be shown. */\n  @Prop()\n  visiblePages?: number;\n\n  /** Current page. */\n  @Prop({mutable: true})\n  currentPage = 1;\n\n  /** Whether to show \"go to page\" feature. */\n  @Prop()\n  goToPage: boolean;\n\n  /**\n   * Internal visible pages variable.\n   * Needed to better handle conflicting props like `visiblePages` and `split`.\n   * This state will change based on props values and validation,\n   * keeping original `visiblePages` value intact.\n   */\n  @State()\n  private _visiblePages = this.visiblePages;\n\n  /** Used to hides/change some functionalities on smaller screen sizes */\n  @State()\n  isMobile = false;\n\n  /** Value of the go to page input */\n  @State()\n  goToPageValue = null;\n\n  /** Event emitted when the current page has changed. */\n  @Event()\n  pageChanged: EventEmitter;\n\n  /**\n   * Set the max width of the pages container.\n   */\n  @Watch(\"_visiblePages\")\n  setPagesContainerWidth(): void {\n    if (!this._visiblePages || this.split) {\n      this.host.style.setProperty(\"--z-pagination--pages-container-max-width\", \"100%\");\n\n      return;\n    }\n\n    const pagesContainerStyle = window.getComputedStyle(this.host);\n    const pageButtonWidth = pagesContainerStyle.getPropertyValue(\"--z-pagination--page-button-width\");\n    this.host.style.setProperty(\n      \"--z-pagination--pages-container-max-width\",\n      `calc(${pageButtonWidth} * ${this._visiblePages})`\n    );\n  }\n\n  /**\n   * Set visible pages.\n   * Ensure that the visible pages are always <= the total pages.\n   * If `visiblePages` isn't set, fallback to the total pages.\n   */\n  @Watch(\"visiblePages\")\n  setVisiblePages(): void {\n    this._visiblePages = Math.min(this.visiblePages || this.totalPages, this.totalPages);\n  }\n\n  /**\n   * On page changed.\n   * @emits pageChanged\n   */\n  @Watch(\"currentPage\")\n  onPageChanged(): void {\n    this.pageChanged.emit(this.currentPage);\n    this.scrollToPage();\n  }\n\n  /**\n   * On split changed.\n   * Empty `edges` value. The split feature wins over the pages chunks and edges.\n   */\n  @Watch(\"split\")\n  onSplitChanged(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n  }\n\n  /**\n   * Hide stuff on mobile.\n   */\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  onResize(): void {\n    this.setMobile();\n  }\n\n  /**\n   * Set functionalities according to screen size.\n   */\n  private setMobile(): void {\n    const mobileMediaQuery = \"screen and (max-width: 767px)\";\n    this.isMobile = window.matchMedia(mobileMediaQuery).matches;\n  }\n\n  /**\n   * Get a list of pages chunks, each of `visiblePages` length.\n   * @returns {number[][]}\n   */\n  private getPagesChunks(): number[][] {\n    // array of numbers from 1 to `totalPages`\n    const pages = Array.from({length: this.totalPages}, (_, i) => i + 1);\n\n    const chunks = [];\n    const chunksCount = Math.ceil(pages.length / this._visiblePages);\n    for (let index = 0; index < chunksCount; index++) {\n      chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));\n    }\n\n    return chunks;\n  }\n\n  /**\n   * Scroll to the left the chunk of pages containing the current page.\n   */\n  private scrollToPage(): void {\n    const container = this.host.querySelector(\".pages-container\") as HTMLElement;\n    const pageBtn = this.host.querySelector(`[data-page=\"${this.currentPage}\"]`) as HTMLElement;\n    const navBtn = this.host.querySelector(\".navigation-button\") as HTMLElement;\n\n    if (!pageBtn || !container) {\n      return;\n    }\n\n    const containerWidth = container.getBoundingClientRect().width;\n    const pageBtnWidth = pageBtn.getBoundingClientRect().width;\n    const navBtnWidth = navBtn?.getBoundingClientRect()?.width ?? 0;\n\n    container.scrollLeft = this.currentPage * pageBtnWidth - navBtnWidth - containerWidth / 2;\n  }\n\n  /**\n   * Select a page.\n   * Do validations on the passed value before assigning it to `currentPage`.\n   * @param {number} page Page number to set\n   */\n  private selectPage(page): void {\n    this.currentPage = Math.min(Math.max(page, 1), this.totalPages);\n  }\n\n  /**\n   * Render page number button.\n   * @param {number} page Page number to render\n   * @returns {HTMLButtonElement}\n   */\n  private renderPage(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"page-button\"\n        type=\"button\"\n        aria-current={this.currentPage === page ? \"page\" : \"false\"}\n        title={`Vai alla pagina ${page}`}\n        data-page={page}\n        data-current={this.currentPage === page}\n        onClick={() => this.selectPage(page)}\n      >\n        {page}\n      </button>\n    );\n  }\n\n  /**\n   * Render split button.\n   * @param {number} page Page to select on click.\n   * @returns {HTMLButtonElement}\n   */\n  private renderEllipsisButton(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"ellipsis-button\"\n        type=\"button\"\n        title={`Vai alla pagina ${page}`}\n        onClick={() => this.selectPage(page)}\n      >\n        …\n      </button>\n    );\n  }\n\n  /**\n   * Render chunked page buttons.\n   * @returns {HTMLDivElement[]}\n   */\n  private renderPages(): HTMLDivElement[] {\n    const pagesChunks = this.getPagesChunks();\n    if (pagesChunks.length <= 0) {\n      return;\n    }\n\n    return pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>);\n  }\n\n  /**\n   * Render page buttons when split feature is enabled.\n   * @returns {HTMLButtonElement[]}\n   */\n  private renderSplitPages(): HTMLButtonElement[] {\n    // left and right split pages, current page, first and last page, left and right ellipsis button\n    if (this.totalPages <= this.split * 2 + 5) {\n      // Too few pages: ellipsis will never be rendered, so let's just render all pages and that's it.\n      return Array.from({length: this.totalPages}, (_, i) => this.renderPage(i + 1));\n    }\n\n    if (this.currentPage <= this.split * 2 + 2) {\n      // Render first (2 * split + 3) pages, ellipsis, then last page.\n      return [\n        ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(i + 1)),\n        this.renderEllipsisButton(this.split * 2 + 4),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {\n      // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.\n      return [\n        this.renderPage(1),\n        this.renderEllipsisButton(this.currentPage - this.split - 1),\n        ...Array.from({length: this.split * 2 + 1}, (_, i) => this.renderPage(this.currentPage - this.split + i)),\n        this.renderEllipsisButton(this.currentPage + this.split + 1),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    // Render first page, ellipsis, then last (2 * split + 3) pages.\n    return [\n      this.renderPage(1),\n      this.renderEllipsisButton(this.totalPages - this.split * 2 - 3),\n      ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(this.totalPages - this.split * 2 - 2 + i)),\n    ];\n  }\n\n  private renderBackButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla pagina precedente\"\n        disabled={this.currentPage === 1}\n        onClick={() => this.selectPage(this.currentPage - 1)}\n      >\n        <z-icon name=\"chevron-left\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderForwardButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla prossima pagina\"\n        disabled={this.currentPage === this.totalPages}\n        onClick={() => this.selectPage(this.currentPage + 1)}\n      >\n        <z-icon name=\"chevron-right\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderMobile(): HTMLElement[] {\n    const pagesChunks = this.getPagesChunks();\n\n    return [\n      this.label && <span class=\"page-label body-1-sb\">{this.label}</span>,\n\n      <div class=\"pagination-bar\">\n        {this.renderBackButton()}\n\n        {!this.goToPage && (\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {pagesChunks.length > 0 &&\n              pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>)}\n          </div>\n        )}\n\n        {this.goToPage && (\n          <form\n            class=\"mobile-go-to-page\"\n            onSubmit={(ev) => {\n              ev.preventDefault();\n              this.selectPage(this.goToPageValue);\n            }}\n          >\n            <z-input\n              class=\"go-to-page-input\"\n              type={InputType.NUMBER}\n              min={1}\n              max={this.totalPages}\n              message={false}\n              onInput={(ev: InputEvent) => {\n                this.goToPageValue = (ev.target as HTMLZInputElement).value;\n              }}\n              placeholder={this.currentPage.toString()}\n              hasclearicon={false}\n            ></z-input>\n            <span>{`/${this.totalPages}`}</span>\n          </form>\n        )}\n\n        {this.renderForwardButton()}\n      </div>,\n    ];\n  }\n\n  componentDidLoad(): void {\n    this.setVisiblePages();\n  }\n\n  componentDidRender(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n\n    this.setPagesContainerWidth();\n    this.setMobile();\n    this.scrollToPage();\n  }\n\n  render(): HTMLZPaginationElement {\n    if (this.isMobile) {\n      return <Host>{this.renderMobile()}</Host>;\n    }\n\n    return (\n      <Host>\n        <div class=\"pagination-bar\">\n          {this.label && <span class=\"page-label body-1-sb\">{this.label}</span>}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title=\"Vai alla pagina 1\"\n              disabled={this.currentPage === 1}\n              onClick={() => this.selectPage(1)}\n            >\n              Pagina 1\n            </button>\n          )}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage - this.skip}`}\n              disabled={this.currentPage <= this.skip}\n              onClick={() => this.selectPage(this.currentPage - this.skip)}\n            >\n              -{this.skip}\n            </button>\n          )}\n\n          {this.navArrows && this.renderBackButton()}\n\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {this.split ? this.renderSplitPages() : this.renderPages()}\n          </div>\n\n          {this.navArrows && this.renderForwardButton()}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage + this.skip}`}\n              disabled={this.currentPage > this.totalPages - this.skip}\n              onClick={() => this.selectPage(this.currentPage + this.skip)}\n            >\n              +{this.skip}\n            </button>\n          )}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.totalPages}`}\n              disabled={this.currentPage === this.totalPages}\n              onClick={() => this.selectPage(this.totalPages)}\n            >\n              Pagina {this.totalPages}\n            </button>\n          )}\n        </div>\n        {this.goToPage && (\n          <div class=\"go-to-page\">\n            <span class=\"z-label body-5-sb\">Vai a pagina:</span>\n            <div class=\"inputs\">\n              <z-input\n                class=\"go-to-page-input\"\n                type={InputType.NUMBER}\n                min={1}\n                max={this.totalPages}\n                message={false}\n                placeholder=\"2\"\n                hasclearicon={false}\n                onInput={(ev: InputEvent) => {\n                  this.goToPageValue = (ev.target as HTMLZInputElement).value;\n                }}\n                onKeyDown={(ev) => ev.key === \"Enter\" && this.selectPage(this.goToPageValue)}\n              ></z-input>\n              <z-button\n                disabled={!this.goToPageValue}\n                title=\"Vai alla pagina inserita\"\n                onClick={() => this.selectPage(this.goToPageValue)}\n              >\n                vai\n              </z-button>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-panel-elem.js

@@ -1 +1,66 @@
-import{proxyCustomElement as e,HTMLElement as a,h as n,transformTag as i}from"@stencil/core/internal/client";import{d as l}from"./index3.js";const t=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.target="_blank",this.isdisabled=!1}render(){const e=this.elemid?this.elemid:"";return n("div",{key:"bf6057103a8e781435017171f363f109af47c187",class:"panel-elem-container"},(this.imgurl||this.imgalt)&&n("div",{key:"e0eece1dc3fff40916d2e84e6ab2ffd8ad93cc46","aria-hidden":"true",class:"panel-elem-icon"},n("img",{key:"1283e1f34165b450f80a60e1c34b39f84f161e1d",src:this.imgurl,alt:this.imgalt})),n("div",{key:"57e1b5dbd8050d48ad049789994ab7180d257bef",class:"panel-elem-link"},n("a",{key:"df2dbff9ef103b387ebc11226ad10446ee4b5426",class:{"z-link":!0,"z-link-disabled":this.isdisabled,"z-link-icon":!0,"z-link-blue":!0},id:e+"link_id",href:this.url,target:this.target},n("z-icon",{key:"55cec9fbbe2f357fcd5c0438eb1b1deeb3b690db",height:14,width:14,name:this.linkicon}),this.linklabel)),this.descrSlotName&&n("div",{key:"3dddbd3a8291ef131214a44ff5e7297c7b7117b1",class:"panel-elem-desc"},n("slot",{key:"6c0b10c119536f938d4d6e64fb2ba75af80a5935",name:this.descrSlotName})))}static get style(){return".sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}"}},[262,"z-panel-elem",{elemid:[1],imgurl:[1],imgalt:[1],linkicon:[1],linklabel:[1],url:[1],target:[1],isdisabled:[4],descrSlotName:[1,"descr-slot-name"]}]),s=t,c=function(){"undefined"!=typeof customElements&&["z-panel-elem","z-icon"].forEach((e=>{switch(e){case"z-panel-elem":customElements.get(i(e))||customElements.define(i(e),t);break;case"z-icon":customElements.get(i(e))||l()}}))};export{s as ZPanelElem,c as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index10.js';
+
+const stylesCss = ".sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}";
+const ZPanelElemStyle0 = stylesCss;
+
+const ZPanelElem$1 = /*@__PURE__*/ proxyCustomElement(class ZPanelElem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.elemid = undefined;
+        this.imgurl = undefined;
+        this.imgalt = undefined;
+        this.linkicon = undefined;
+        this.linklabel = undefined;
+        this.url = undefined;
+        this.target = "_blank";
+        this.isdisabled = false;
+        this.descrSlotName = undefined;
+    }
+    render() {
+        const elemId = this.elemid ? this.elemid : "";
+        return (h("div", { key: '5d734919b0fd927095c2e65ff1200ed550e48bd2', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '3d315fef58dfe7ecf601ade8f1652e447fdbe636', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '47f8a1c400949b67c984d25c5bdf9f20ee3d846b', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '9757e879ebe255ccdbdd815c7404a6cfe9f9cb1e', class: "panel-elem-link" }, h("a", { key: '4ee9897a9875081e871e4a72d7cdd9c6df23f6e1', class: {
+                "z-link": true,
+                "z-link-disabled": this.isdisabled,
+                "z-link-icon": true,
+                "z-link-blue": true,
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'b651e1ab06b937189e46634c0a91470afcde9168', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '5ab6f6ba7f8f3f50a3018b56b7ff3ea75f7e5aa5', class: "panel-elem-desc" }, h("slot", { key: 'c4d1f5928e8be8f25e36f1a3bf9a33f603b37148', name: this.descrSlotName })))));
+    }
+    static get style() { return ZPanelElemStyle0; }
+}, [6, "z-panel-elem", {
+        "elemid": [1],
+        "imgurl": [1],
+        "imgalt": [1],
+        "linkicon": [1],
+        "linklabel": [1],
+        "url": [1],
+        "target": [1],
+        "isdisabled": [4],
+        "descrSlotName": [1, "descr-slot-name"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-panel-elem", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-panel-elem":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZPanelElem$1);
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZPanelElem = ZPanelElem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZPanelElem, defineCustomElement };
+
+//# sourceMappingURL=z-panel-elem.js.map

package/dist/components/z-panel-elem.js.map

@@ -0,0 +1 @@
+{"file":"z-panel-elem.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2zBAA2zB,CAAC;AAC90B,yBAAe,SAAS;;MCUXA,YAAU;;;;;;;;;;sBA2BH,QAAQ;0BAIH,KAAK;;;IAM5B,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QAE9C,QACE,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,MAC1B,2EACc,MAAM,EAClB,KAAK,EAAC,iBAAiB,IAEvB,4DACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,GAChB,CACE,CACP,EACD,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,iBAAiB,EAAE,IAAI,CAAC,UAAU;gBAClC,aAAa,EAAE,IAAI;gBACnB,aAAa,EAAE,IAAI;aACpB,EACD,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,+DACE,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,IAAI,EAAE,IAAI,CAAC,QAAQ,GACX,EACT,IAAI,CAAC,SAAS,CACb,CACA,EACL,IAAI,CAAC,aAAa,KACjB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,6DAAM,IAAI,EAAE,IAAI,CAAC,aAAa,GAAI,CAC9B,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZPanelElem"],"sources":["src/components/z-panel-elem/styles.css?tag=z-panel-elem&encapsulation=scoped","src/components/z-panel-elem/index.tsx"],"sourcesContent":[":host {\n  width: inherit;\n  font-family: var(--font-family sans);\n  font-weight: var(--font-rg);\n}\n\n.panel-elem-container {\n  width: 100%;\n}\n\n.panel-elem-icon {\n  margin: auto calc(var(--space-unit) * 3);\n}\n\n.panel-elem-icon img {\n  display: block;\n  max-width: 96px;\n  height: 32px;\n  margin: auto;\n  object-fit: contain;\n}\n\n.panel-elem-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--space-unit) auto 0;\n  border-radius: var(--border-no-radius);\n  font-size: 12px;\n}\n\n.panel-elem-link > a.z-link {\n  padding: calc(var(--space-unit) * 0.5) 0;\n  font-weight: var(--font-sb);\n}\n\n.panel-elem-desc {\n  padding-top: var(--space-unit);\n  margin: 0;\n  letter-spacing: 0.16px;\n  text-align: center;\n}\n\na > z-icon {\n  margin-right: var(--space-unit);\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot `descrSlotName` - description content\n */\n@Component({\n  tag: \"z-panel-elem\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZPanelElem {\n  /** html element id (optional) */\n  @Prop()\n  elemid?: string;\n\n  /** image url source (optional) */\n  @Prop()\n  imgurl?: string;\n\n  /** alternative image text (optional) */\n  @Prop()\n  imgalt?: string;\n\n  /** icon link name (optional) */\n  @Prop()\n  linkicon?: string;\n\n  /** link label text*/\n  @Prop()\n  linklabel: string;\n\n  /** link url */\n  @Prop()\n  url: string;\n\n  /** link target (optional) */\n  @Prop()\n  target?: string = \"_blank\";\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** name of slot container (optional) */\n  @Prop()\n  descrSlotName?: string;\n\n  render(): HTMLDivElement {\n    const elemId = this.elemid ? this.elemid : \"\";\n\n    return (\n      <div class=\"panel-elem-container\">\n        {(this.imgurl || this.imgalt) && (\n          <div\n            aria-hidden=\"true\"\n            class=\"panel-elem-icon\"\n          >\n            <img\n              src={this.imgurl}\n              alt={this.imgalt}\n            />\n          </div>\n        )}\n        <div class=\"panel-elem-link\">\n          <a\n            class={{\n              \"z-link\": true,\n              \"z-link-disabled\": this.isdisabled,\n              \"z-link-icon\": true,\n              \"z-link-blue\": true,\n            }}\n            id={elemId + \"link_id\"}\n            href={this.url}\n            target={this.target}\n          >\n            <z-icon\n              height={14}\n              width={14}\n              name={this.linkicon}\n            ></z-icon>\n            {this.linklabel}\n          </a>\n        </div>\n        {this.descrSlotName && (\n          <div class=\"panel-elem-desc\">\n            <slot name={this.descrSlotName} />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-popover.js

@@ -1 +1,8 @@
-import{Z as o,d as s}from"./index17.js";const r=o,t=s;export{r as ZPopover,t as defineCustomElement}
+import { Z as ZPopover$1, d as defineCustomElement$1 } from './index24.js';
+
+const ZPopover = ZPopover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZPopover, defineCustomElement };
+
+//# sourceMappingURL=z-popover.js.map

package/dist/components/z-popover.js.map

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