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

package/dist/components/z-pagination.js

@@ -1,283 +1 @@
-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
+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}

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

@@ -1,66 +1 @@
-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: '7ccde7a594052fb877c381d8f2db8df80d64e96e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'f925fb70d03baa4a8a7f96006c515c9116785ff7', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'b0349cf006ded4cc02f686e1ea1adfbd76550fb8', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'c9393757ba1c849c8558dc668189f6f27b232e94', class: "panel-elem-link" }, h("a", { key: '7c552ae67030c9bf12a6e52e8d8f6f82df88b4a2', 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: 'f72a6a2634b41803ea7eaf8d51ba3439f095457a', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '6cd08ffd2e65f13d500f88682724f4f762c1f118', class: "panel-elem-desc" }, h("slot", { key: '01f55703602ee64f92eed8bc918ac5032927850c', 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
+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}

package/dist/components/z-popover.js

@@ -1,8 +1 @@
-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
+import{Z as o,d as s}from"./index17.js";const r=o,t=s;export{r as ZPopover,t as defineCustomElement}