@zanichelli/albe-web-components 3.0.0 → 3.2.0

package/dist/types/components.d.ts

@@ -1243,6 +1243,44 @@ export namespace Components {
         "message"?: string;
         "status"?: InputStatusBean;
     }
+    interface ZPagination {
+        /**
+          * Current page.
+         */
+        "currentPage": number;
+        /**
+          * Enable buttons to go to the first and last pages.
+         */
+        "edges": boolean;
+        /**
+          * Whether to show "go to page" feature.
+         */
+        "goToPage": boolean;
+        /**
+          * Pagination label placed before the bar.
+         */
+        "label"?: string;
+        /**
+          * Enable navigation arrows.
+         */
+        "navArrows": boolean;
+        /**
+          * Number of pages to skip.
+         */
+        "skip": number;
+        /**
+          * Number of pages to show left/right of the current, before showing "load more" symbol (…).
+         */
+        "split"?: number;
+        /**
+          * Total number of pages. Required.
+         */
+        "totalPages": number;
+        /**
+          * Number of pages to show at a time. If not set, all pages will be shown.
+         */
+        "visiblePages"?: number;
+    }
     interface ZPaginationBar {
         /**
           * current displayed page (mutable)
@@ -2188,6 +2226,12 @@ declare global {
         prototype: HTMLZOtpElement;
         new (): HTMLZOtpElement;
     };
+    interface HTMLZPaginationElement extends Components.ZPagination, HTMLStencilElement {
+    }
+    var HTMLZPaginationElement: {
+        prototype: HTMLZPaginationElement;
+        new (): HTMLZPaginationElement;
+    };
     interface HTMLZPaginationBarElement extends Components.ZPaginationBar, HTMLStencilElement {
     }
     var HTMLZPaginationBarElement: {
@@ -2466,6 +2510,7 @@ declare global {
         "z-notification": HTMLZNotificationElement;
         "z-offcanvas": HTMLZOffcanvasElement;
         "z-otp": HTMLZOtpElement;
+        "z-pagination": HTMLZPaginationElement;
         "z-pagination-bar": HTMLZPaginationBarElement;
         "z-pagination-page": HTMLZPaginationPageElement;
         "z-panel-elem": HTMLZPanelElemElement;
@@ -3900,6 +3945,48 @@ declare namespace LocalJSX {
         "onOtpChange"?: (event: CustomEvent<any>) => void;
         "status"?: InputStatusBean;
     }
+    interface ZPagination {
+        /**
+          * Current page.
+         */
+        "currentPage"?: number;
+        /**
+          * Enable buttons to go to the first and last pages.
+         */
+        "edges"?: boolean;
+        /**
+          * Whether to show "go to page" feature.
+         */
+        "goToPage"?: boolean;
+        /**
+          * Pagination label placed before the bar.
+         */
+        "label"?: string;
+        /**
+          * Enable navigation arrows.
+         */
+        "navArrows"?: boolean;
+        /**
+          * Event emitted when the current page has changed.
+         */
+        "onPageChanged"?: (event: CustomEvent<any>) => void;
+        /**
+          * Number of pages to skip.
+         */
+        "skip"?: number;
+        /**
+          * Number of pages to show left/right of the current, before showing "load more" symbol (…).
+         */
+        "split"?: number;
+        /**
+          * Total number of pages. Required.
+         */
+        "totalPages": number;
+        /**
+          * Number of pages to show at a time. If not set, all pages will be shown.
+         */
+        "visiblePages"?: number;
+    }
     interface ZPaginationBar {
         /**
           * current displayed page (mutable)
@@ -4555,6 +4642,7 @@ declare namespace LocalJSX {
         "z-notification": ZNotification;
         "z-offcanvas": ZOffcanvas;
         "z-otp": ZOtp;
+        "z-pagination": ZPagination;
         "z-pagination-bar": ZPaginationBar;
         "z-pagination-page": ZPaginationPage;
         "z-panel-elem": ZPanelElem;
@@ -4663,6 +4751,7 @@ declare module "@stencil/core" {
             "z-notification": LocalJSX.ZNotification & JSXBase.HTMLAttributes<HTMLZNotificationElement>;
             "z-offcanvas": LocalJSX.ZOffcanvas & JSXBase.HTMLAttributes<HTMLZOffcanvasElement>;
             "z-otp": LocalJSX.ZOtp & JSXBase.HTMLAttributes<HTMLZOtpElement>;
+            "z-pagination": LocalJSX.ZPagination & JSXBase.HTMLAttributes<HTMLZPaginationElement>;
             "z-pagination-bar": LocalJSX.ZPaginationBar & JSXBase.HTMLAttributes<HTMLZPaginationBarElement>;
             "z-pagination-page": LocalJSX.ZPaginationPage & JSXBase.HTMLAttributes<HTMLZPaginationPageElement>;
             "z-panel-elem": LocalJSX.ZPanelElem & JSXBase.HTMLAttributes<HTMLZPanelElemElement>;

package/dist/web-components-library/p-14c9344f.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as a,g as n}from"./p-98268a57.js";const o=class{constructor(a){t(this,a),this.pageChanged=i(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));let i=[];const 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(){const t=this.host.querySelector(`[data-page="${this.currentPage}"]`);t&&t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}selectPage(t){this.currentPage=Math.min(Math.max(t,1),this.totalPages)}renderPage(t){return a("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 a("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=>a("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 a("button",{class:"navigation-button",type:"button",title:"Vai alla pagina precedente",disabled:1===this.currentPage,onClick:()=>this.selectPage(this.currentPage-1)},a("z-icon",{name:"chevron-left"}))}renderForwardButton(){return a("button",{class:"navigation-button",type:"button",title:"Vai alla prossima pagina",disabled:this.currentPage===this.totalPages,onClick:()=>this.selectPage(this.currentPage+1)},a("z-icon",{name:"chevron-right"}))}renderMobile(){const t=this.getPagesChunks();return[this.label&&a("span",{class:"page-label body-1-sb"},this.label),a("div",{class:"pagination-bar"},this.renderBackButton(),!this.goToPage&&a("div",{class:"pages-container",role:"navigation",tabIndex:-1},t.length>0&&t.map((t=>a("div",{class:"pages-chunk"},t.map((t=>this.renderPage(t))))))),this.goToPage&&a("form",{class:"mobile-go-to-page",onSubmit:t=>{t.preventDefault(),this.selectPage(this.goToPageValue)}},a("z-input",{class:"go-to-page-input",type:"number",hasmessage:!1,onInput:t=>{this.goToPageValue=t.target.value},placeholder:this.currentPage.toString(),hasclearicon:!1}),a("span",null,`/${this.totalPages}`)),this.renderForwardButton())]}componentDidLoad(){this.setVisiblePages()}componentDidRender(){this.split&&(this.edges=!1),this.setPagesContainerWidth(),this.setMobile()}render(){return this.isMobile?this.renderMobile():[a("div",{class:"pagination-bar"},this.label&&a("span",{class:"page-label body-1-sb"},this.label),this.edges&&a("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&&a("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(),a("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&&a("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&&a("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&&a("div",{class:"go-to-page"},a("span",{class:"label body-5-sb"},"Vai a pagina:"),a("div",{class:"inputs"},a("z-input",{class:"go-to-page-input",type:"number",hasmessage:!1,placeholder:"2",hasclearicon:!1,onInput:t=>{this.goToPageValue=t.target.value},onKeyDown:t=>"Enter"===t.key&&this.selectPage(this.goToPageValue)}),a("z-button",{disabled:!this.goToPageValue,title:"Vai alla pagina inserita",onClick:()=>this.selectPage(this.goToPageValue)},"vai")))]}get host(){return n(this)}static get watchers(){return{_visiblePages:["setPagesContainerWidth"],visiblePages:["setVisiblePages"],currentPage:["onPageChanged"],split:["onSplitChanged"]}}};o.style="z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;display:flex;flex-direction:column;gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);max-width:100%;flex-wrap:wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-icon01)}z-pagination *:disabled z-icon{fill:var(--color-disabled02)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-text02)}z-pagination .pagination-bar{display:flex;align-items:center;height:48px;max-width:100%}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;margin:0;background-color:var(--color-surface03);transition:background-color .150s ease-out,\n    color .150s ease-out,\n    border-bottom-color .150s ease-out,\n    font-size .150s ease-in-out,\n    font-weight .150s ease-in-out;color:var(--color-primary01);border:none;font-family:inherit;font-weight:inherit;cursor:pointer}z-pagination .pagination-bar button:focus-visible{outline:none;box-shadow:inset var(--shadow-focus-primary);background-color:var(--color-hover-surface)}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);text-transform:uppercase;white-space:nowrap;font-weight:var(--font-sb)}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{background-color:var(--color-disabled01);color:var(--color-disabled02);cursor:default;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:focus-visible{border-bottom-color:var(--color-hover-light)}z-pagination .pagination-bar .page-button[data-current]{font-size:var(--font-size-7);border-bottom-color:var(--color-primary01)}z-pagination .go-to-page{display:flex;flex-direction:column;row-gap:var(--space-unit)}z-pagination .go-to-page .label{color:var(--color-text02);text-transform:uppercase}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;-moz-appearance:none}z-pagination .mobile-go-to-page{display:flex;justify-content:center;align-items:center;flex:1 auto;height:100%;background-color:var(--color-surface03)}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;-webkit-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(--color-hover-surface)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-light)}}@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)}}";export{o as z_pagination}