npm - @zanichelli/albe-web-components - Versions diffs - 18.3.1 → 18.3.2-rc1 - Mend

@zanichelli/albe-web-components 18.3.1 → 18.3.2-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/dist/collection/components/z-pagination/index.js CHANGED Viewed

@@ -2,6 +2,8 @@ import { Host, h } from "@stencil/core";
 import { InputType } from "../../beans";
 /**
  * Pagination bar component.
+ * @cssprop --z-pagination-background-color - background of the pagination's tabs. The default is --color-background
+ * @cssprop --z-pagination-background-color-hover - background of the pagination's tabs on hover. The default is --color-surface01
  */
 export class ZPagination {
     constructor() {
@@ -86,15 +88,17 @@ export class ZPagination {
      * 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}"]`);
-        if (!pageBtn) {
+        const navBtn = this.host.querySelector(".navigation-button");
+        if (!pageBtn || !container) {
             return;
         }
-        pageBtn.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "center",
-        });
+        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.
@@ -194,6 +198,7 @@ export class ZPagination {
         }
         this.setPagesContainerWidth();
         this.setMobile();
+        this.scrollToPage();
     }
     render() {
         if (this.isMobile) {

package/dist/collection/components/z-pagination/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-pagination/index.tsx"],"names":[],"mappings":"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","sourcesContent":["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 /\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 pageBtn = this.host.querySelector(`[data-page=\"${this.currentPage}\"]`) as HTMLElement;\n\n if (!pageBtn) {\n return;\n }\n\n pageBtn.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"center\",\n });\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 }\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=\"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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC;;;;GAIG;AAKH,MAAM,OAAO,WAAW;;;yBASV,IAAI;;oBAQT,CAAC;qBAIA,KAAK;;;2BAYC,CAAC;;6BAaS,IAAI,CAAC,YAAY;wBAI9B,KAAK;6BAIA,IAAI;;IAMpB;;OAEG;IAEH,sBAAsB;QACpB,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACtC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,2CAA2C,EAAE,MAAM,CAAC,CAAC;YAEjF,OAAO;QACT,CAAC;QAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/D,MAAM,eAAe,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,mCAAmC,CAAC,CAAC;QAClG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CACzB,2CAA2C,EAC3C,QAAQ,eAAe,MAAM,IAAI,CAAC,aAAa,GAAG,CACnD,CAAC;IACJ,CAAC;IAED;;;;OAIG;IAEH,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACvF,CAAC;IAED;;;OAGG;IAEH,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED;;;OAGG;IAEH,cAAc;QACZ,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,QAAQ;QACN,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED;;OAEG;IACK,SAAS;QACf,MAAM,gBAAgB,GAAG,+BAA+B,CAAC;QACzD,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACK,cAAc;QACpB,0CAA0C;QAC1C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAErE,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;QACjE,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC;YACjD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;QACzF,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED;;OAEG;IACK,YAAY;;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAgB,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,IAAI,CAAC,WAAW,IAAI,CAAgB,CAAC;QAC5F,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAgB,CAAC;QAE5E,IAAI,CAAC,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,MAAM,cAAc,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC/D,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC3D,MAAM,WAAW,GAAG,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,qBAAqB,EAAE,0CAAE,KAAK,mCAAI,CAAC,CAAC;QAEhE,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,GAAG,CAAC,CAAC;IAC5F,CAAC;IAED;;;;OAIG;IACK,UAAU,CAAC,IAAI;QACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAClE,CAAC;IAED;;;;OAIG;IACK,UAAU,CAAC,IAAI;QACrB,OAAO,CACL,cACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1D,KAAK,EAAE,mBAAmB,IAAI,EAAE,eACrB,IAAI,kBACD,IAAI,CAAC,WAAW,KAAK,IAAI,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAEnC,IAAI,CACE,CACV,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACK,oBAAoB,CAAC,IAAI;QAC/B,OAAO,CACL,cACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,mBAAmB,IAAI,EAAE,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAG7B,CACV,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,WAAW;QACjB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,IAAI,WAAW,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,WAAK,KAAK,EAAC,aAAa,IAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAO,CAAC,CAAC;IACjH,CAAC;IAED;;;OAGG;IACK,gBAAgB;QACtB,gGAAgG;QAChG,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1C,gGAAgG;YAChG,OAAO,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACjF,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3C,gEAAgE;YAChE,OAAO;gBACL,GAAG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC7E,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;gBAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC;aACjC,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACrG,iIAAiI;YACjI,OAAO;gBACL,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBAClB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;gBAC5D,GAAG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;gBACzG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;gBAC5D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC;aACjC,CAAC;QACJ,CAAC;QAED,gEAAgE;QAChE,OAAO;YACL,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YAClB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;YAC/D,GAAG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;SACjH,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,CACL,cACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;YAEpD,cAAQ,IAAI,EAAC,cAAc,GAAU,CAC9B,CACV,CAAC;IACJ,CAAC;IAEO,mBAAmB;QACzB,OAAO,CACL,cACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,0BAA0B,EAChC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,UAAU,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;YAEpD,cAAQ,IAAI,EAAC,eAAe,GAAU,CAC/B,CACV,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO;YACL,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ;YAEpE,WAAK,KAAK,EAAC,gBAAgB;gBACxB,IAAI,CAAC,gBAAgB,EAAE;gBAEvB,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB,WACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,CAAC,CAAC,IAEX,WAAW,CAAC,MAAM,GAAG,CAAC;oBACrB,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,WAAK,KAAK,EAAC,aAAa,IAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAO,CAAC,CACrG,CACP;gBAEA,IAAI,CAAC,QAAQ,IAAI,CAChB,YACE,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;wBACf,EAAE,CAAC,cAAc,EAAE,CAAC;wBACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;oBACtC,CAAC;oBAED,eACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,SAAS,CAAC,MAAM,EACtB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,CAAC,EAAc,EAAE,EAAE;4BAC1B,IAAI,CAAC,aAAa,GAAI,EAAE,CAAC,MAA4B,CAAC,KAAK,CAAC;wBAC9D,CAAC,EACD,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,EACxC,YAAY,EAAE,KAAK,GACV;oBACX,gBAAO,IAAI,IAAI,CAAC,UAAU,EAAE,CAAQ,CAC/B,CACR;gBAEA,IAAI,CAAC,mBAAmB,EAAE,CACvB;SACP,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,YAAY,EAAE,CAAQ,CAAC;QAC5C,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAC,gBAAgB;gBACxB,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBAEpE,IAAI,CAAC,KAAK,IAAI,CACb,cACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,eAG1B,CACV;gBAEA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAC/C,cACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,mBAAmB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE,EACxD,QAAQ,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;;oBAE1D,IAAI,CAAC,IAAI,CACJ,CACV;gBAEA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBAE1C,WACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CACtD;gBAEL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,mBAAmB,EAAE;gBAE5C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAC/C,cACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,mBAAmB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE,EACxD,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,EACxD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;;oBAE1D,IAAI,CAAC,IAAI,CACJ,CACV;gBAEA,IAAI,CAAC,KAAK,IAAI,CACb,cACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,mBAAmB,IAAI,CAAC,UAAU,EAAE,EAC3C,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,UAAU,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC;;oBAEvC,IAAI,CAAC,UAAU,CAChB,CACV,CACG;YACL,IAAI,CAAC,QAAQ,IAAI,CAChB,WAAK,KAAK,EAAC,YAAY;gBACrB,YAAM,KAAK,EAAC,iBAAiB,oBAAqB;gBAClD,WAAK,KAAK,EAAC,QAAQ;oBACjB,eACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,SAAS,CAAC,MAAM,EACtB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,OAAO,EAAE,KAAK,EACd,WAAW,EAAC,GAAG,EACf,YAAY,EAAE,KAAK,EACnB,OAAO,EAAE,CAAC,EAAc,EAAE,EAAE;4BAC1B,IAAI,CAAC,aAAa,GAAI,EAAE,CAAC,MAA4B,CAAC,KAAK,CAAC;wBAC9D,CAAC,EACD,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,GACnE;oBACX,gBACE,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,UAGzC,CACP,CACF,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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=\"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"]}

package/dist/collection/components/z-pagination/index.stories.js CHANGED Viewed

@@ -1,16 +1,18 @@
 import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { getColorTokenArgConfig } from "../../utils/storybook-utils";
 import "./index";
 const StoryMeta = {
     title: "ZPagination",
     component: "z-pagination",
     argTypes: {
-        totalPages: {
+        "totalPages": {
             control: {
                 type: "number",
                 min: 1,
             },
         },
-        visiblePages: {
+        "visiblePages": {
             control: {
                 type: "number",
                 min: 1,
@@ -20,34 +22,45 @@ const StoryMeta = {
                 truthy: false,
             },
         },
-        skip: {
+        "currentPage": {
             control: {
                 type: "number",
                 min: 1,
             },
         },
-        edges: {
+        "skip": {
+            control: {
+                type: "number",
+                min: 1,
+            },
+        },
+        "edges": {
             if: {
                 arg: "split",
                 truthy: false,
             },
         },
-        split: {
+        "split": {
             control: {
                 type: "number",
                 min: 1,
             },
         },
+        "--z-pagination-background-color": getColorTokenArgConfig(),
+        "--z-pagination-background-color-hover": getColorTokenArgConfig(),
     },
     args: {
-        label: "",
-        navArrows: true,
-        totalPages: 201,
-        visiblePages: 5,
-        goToPage: false,
-        split: undefined,
-        skip: 0,
-        edges: false,
+        "label": "",
+        "navArrows": true,
+        "totalPages": 201,
+        "visiblePages": 5,
+        "currentPage": 1,
+        "goToPage": false,
+        "split": undefined,
+        "skip": 0,
+        "edges": false,
+        "--z-pagination-background-color": "var(--color-background)",
+        "--z-pagination-background-color-hover": "var(--color-surface01)",
     },
     render: (args) => html `
     <z-pagination
@@ -56,8 +69,13 @@ const StoryMeta = {
       .totalPages=${args.totalPages}
       .visiblePages=${args.visiblePages}
       .skip=${args.skip}
+      .currentPage=${args.currentPage}
       .goToPage=${args.goToPage}
       .edges=${args.edges}
+      style=${styleMap({
+        "--z-pagination-background-color": args["--z-pagination-background-color"],
+        "--z-pagination-background-color-hover": args["--z-pagination-background-color-hover"],
+    })}
     ></z-pagination>
   `,
 };

package/dist/collection/components/z-pagination/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-pagination/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;~~AAEzB~~,OAAO,SAAS,CAAC;~~AAEjB~~,MAAM,SAAS,~~GAAsB~~;~~IACnC~~,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,~~UAAU~~,EAAE;~~YACV~~,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,~~YAAY~~,EAAE;~~YACZ~~,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;YACD,EAAE,EAAE;gBACF,GAAG,EAAE,OAAO;gBACZ,MAAM,EAAE,KAAK;aACd;SACF;QACD,IAAI,EAAE;~~YACJ~~,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,~~KAAK~~,EAAE;~~YACL~~,EAAE,EAAE;gBACF,GAAG,EAAE,OAAO;gBACZ,MAAM,EAAE,KAAK;aACd;SACF;QACD,~~KAAK~~,EAAE;~~YACL~~,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;~~KACF~~;IACD,IAAI,EAAE;QACJ,~~KAAK~~,EAAE,EAAE;~~QACT~~,~~SAAS~~,EAAE,IAAI;~~QACf~~,~~UAAU~~,EAAE,GAAG;~~QACf~~,~~YAAY~~,EAAE,CAAC;~~QACf~~,~~QAAQ~~,EAAE,~~KAAK~~;~~QACf~~,KAAK,EAAE,SAAS;~~QAChB~~,~~IAAI~~,EAAE,CAAC;~~QACP~~,~~KAAK~~,EAAE,KAAK;~~KACb~~;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;eAET,IAAI,CAAC,KAAK;mBACN,IAAI,CAAC,SAAS;oBACb,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;cACzB,IAAI,CAAC,IAAI;~~kBACL~~,IAAI,CAAC,QAAQ;eAChB,IAAI,CAAC,KAAK;;~~GAEtB~~;~~CAC0B~~,CAAC;~~AAE9B~~,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,CAAC;SACnB;KACF;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;KACT;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC;SACnC;KACF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;KACZ;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,CAAC;SACnB;KACF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,EAAE;KACT;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZPagination} from \".\";\nimport \"./index\";\n\nconst StoryMeta: ~~Meta<ZPagination>~~ = {\n title: \"ZPagination\",\n component: \"z-pagination\",\n argTypes: {\n totalPages: {\n control: {\n type: \"number\",\n min: 1,\n },\n },\n visiblePages: {\n control: {\n type: \"number\",\n min: 1,\n },\n if: {\n arg: \"split\",\n truthy: false,\n },\n },\n skip: {\n control: {\n type: \"number\",\n min: 1,\n },\n },\n edges: {\n if: {\n arg: \"split\",\n truthy: false,\n },\n },\n split: {\n control: {\n type: \"number\",\n min: 1,\n },\n },\n },\n args: {\n label: \"\",\n navArrows: true,\n totalPages: 201,\n visiblePages: 5,\n goToPage: false,\n split: undefined,\n skip: 0,\n edges: false,\n },\n render: (args) => html`\n <z-pagination\n .label=${args.label}\n .navArrows=${args.navArrows}\n .totalPages=${args.totalPages}\n .visiblePages=${args.visiblePages}\n .skip=${args.skip}\n .goToPage=${args.goToPage}\n .edges=${args.edges}\n ></z-pagination>\n `,\n} satisfies Meta<~~ZPagination~~>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZPagination>;\n\nexport const VisiblePages = {\n parameters: {\n controls: {\n exclude: [\"split\"],\n },\n },\n} satisfies Story;\n\n/*\n > Note that enabling `split` will shut off `visiblePages` and `edges`.\n */\nexport const Split = {\n args: {\n split: 1,\n },\n parameters: {\n controls: {\n exclude: [\"edges\", \"visiblePages\"],\n },\n },\n} satisfies Story;\n\nexport const Edges = {\n args: {\n edges: true,\n },\n parameters: {\n controls: {\n exclude: [\"split\"],\n },\n },\n} satisfies Story;\n\nexport const Skip = {\n args: {\n skip: 10,\n },\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-pagination/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,SAAS,CAAC;AAKjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,YAAY,EAAE;YACZ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,cAAc,EAAE;YACd,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;YACD,EAAE,EAAE;gBACF,GAAG,EAAE,OAAO;gBACZ,MAAM,EAAE,KAAK;aACd;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,OAAO,EAAE;YACP,EAAE,EAAE;gBACF,GAAG,EAAE,OAAO;gBACZ,MAAM,EAAE,KAAK;aACd;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACP;SACF;QACD,iCAAiC,EAAE,sBAAsB,EAAE;QAC3D,uCAAuC,EAAE,sBAAsB,EAAE;KAClE;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE;QACX,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,GAAG;QACjB,cAAc,EAAE,CAAC;QACjB,aAAa,EAAE,CAAC;QAChB,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,KAAK;QACd,iCAAiC,EAAE,yBAAyB;QAC5D,uCAAuC,EAAE,wBAAwB;KAClE;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;eAET,IAAI,CAAC,KAAK;mBACN,IAAI,CAAC,SAAS;oBACb,IAAI,CAAC,UAAU;sBACb,IAAI,CAAC,YAAY;cACzB,IAAI,CAAC,IAAI;qBACF,IAAI,CAAC,WAAW;kBACnB,IAAI,CAAC,QAAQ;eAChB,IAAI,CAAC,KAAK;cACX,QAAQ,CAAC;QACf,iCAAiC,EAAE,IAAI,CAAC,iCAAiC,CAAC;QAC1E,uCAAuC,EAAE,IAAI,CAAC,uCAAuC,CAAC;KACvF,CAAC;;GAEL;CACqC,CAAC;AAEzC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,CAAC;SACnB;KACF;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;KACT;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC;SACnC;KACF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;KACZ;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,CAAC;SACnB;KACF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,EAAE;KACT;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZPagination} from \".\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZPaginationStoriesArgs = ZPagination &\n CSSVarsArguments<\"--z-pagination-background-color\" \| \"--z-pagination-background-color-hover\">;\n\nconst StoryMeta = {\n title: \"ZPagination\",\n component: \"z-pagination\",\n argTypes: {\n \"totalPages\": {\n control: {\n type: \"number\",\n min: 1,\n },\n },\n \"visiblePages\": {\n control: {\n type: \"number\",\n min: 1,\n },\n if: {\n arg: \"split\",\n truthy: false,\n },\n },\n \"currentPage\": {\n control: {\n type: \"number\",\n min: 1,\n },\n },\n \"skip\": {\n control: {\n type: \"number\",\n min: 1,\n },\n },\n \"edges\": {\n if: {\n arg: \"split\",\n truthy: false,\n },\n },\n \"split\": {\n control: {\n type: \"number\",\n min: 1,\n },\n },\n \"--z-pagination-background-color\": getColorTokenArgConfig(),\n \"--z-pagination-background-color-hover\": getColorTokenArgConfig(),\n },\n args: {\n \"label\": \"\",\n \"navArrows\": true,\n \"totalPages\": 201,\n \"visiblePages\": 5,\n \"currentPage\": 1,\n \"goToPage\": false,\n \"split\": undefined,\n \"skip\": 0,\n \"edges\": false,\n \"--z-pagination-background-color\": \"var(--color-background)\",\n \"--z-pagination-background-color-hover\": \"var(--color-surface01)\",\n },\n render: (args) => html`\n <z-pagination\n .label=${args.label}\n .navArrows=${args.navArrows}\n .totalPages=${args.totalPages}\n .visiblePages=${args.visiblePages}\n .skip=${args.skip}\n .currentPage=${args.currentPage}\n .goToPage=${args.goToPage}\n .edges=${args.edges}\n style=${styleMap({\n \"--z-pagination-background-color\": args[\"--z-pagination-background-color\"],\n \"--z-pagination-background-color-hover\": args[\"--z-pagination-background-color-hover\"],\n })}\n ></z-pagination>\n `,\n} satisfies Meta<ZPaginationStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZPagination>;\n\nexport const VisiblePages = {\n parameters: {\n controls: {\n exclude: [\"split\"],\n },\n },\n} satisfies Story;\n\n/*\n > Note that enabling `split` will shut off `visiblePages` and `edges`.\n */\nexport const Split = {\n args: {\n split: 1,\n },\n parameters: {\n controls: {\n exclude: [\"edges\", \"visiblePages\"],\n },\n },\n} satisfies Story;\n\nexport const Edges = {\n args: {\n edges: true,\n },\n parameters: {\n controls: {\n exclude: [\"split\"],\n },\n },\n} satisfies Story;\n\nexport const Skip = {\n args: {\n skip: 10,\n },\n} satisfies Story;\n"]}

package/dist/collection/components/z-pagination/styles.css CHANGED Viewed

@@ -1,6 +1,8 @@
 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%;
@@ -45,7 +47,7 @@ z-pagination .pagination-bar button {
   justify-content: center;
   border: none;
   margin: 0;
-  background-color: var(--color-background);
+  background-color: var(--z-pagination-background-color);
   color: var(--color-primary01);
   cursor: pointer;
   font-family: inherit;
@@ -176,7 +178,7 @@ z-pagination .mobile-go-to-page > span {
 @media (hover: hover) {
   z-pagination .pagination-bar button:hover {
-    background-color: var(--color-surface01);
+    background-color: var(--z-pagination-background-color-hover);
   }
   z-pagination .pagination-bar .page-button:hover {

package/dist/collection/components/z-toast-notification/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { KeyboardCode, ToastNotificationTransition } from "../../beans";
+import { ToastNotificationTransition } from "../../beans";
+import { Breakpoints } from "../../constants/breakpoints";
 import Hammer from "hammerjs";
 export class ZToastNotification {
     constructor() {
@@ -44,10 +45,12 @@ export class ZToastNotification {
         this.toastClose.emit();
     }
     componentWillLoad() {
+        this.isMobile = window.innerWidth <= Breakpoints.MOBILE;
         this.validateAutoclose();
         this.percentage = 0;
     }
     componentDidLoad() {
+        this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;
         this.startTime = Date.now();
         if (this.autoclose && this.pauseonfocusloss) {
             document.addEventListener("visibilitychange", this.visibilityChangeEventHandler);
@@ -128,23 +131,56 @@ export class ZToastNotification {
     startClosingTimeout(time) {
         this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);
     }
-    renderContent() {
-        return (h("div", { id: "external-container", tabIndex: 0, class: { [this.type]: !!this.type } }, h("div", { id: "inner-container" }, h("div", { id: "text" }, this.heading && h("span", { class: "title" }, this.heading), h("span", { class: "message" }, this.message)), h("div", { id: "button" }, h("slot", { name: "button" }))), h("div", { id: "icon" }, this.closebutton && (h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
-                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
+    detectWrap() {
+        const parentWidth = this.container.offsetWidth;
+        const children = this.container.children;
+        let totalWidth = 0;
+        for (let i = 0; i < children.length; i++) {
+            totalWidth += children[i].offsetWidth;
+        }
+        return totalWidth > parentWidth;
+    }
+    renderText() {
+        return (h("div", { id: "text", ref: (el) => (this.toastText = el) }, this.heading && h("span", { class: "title" }, this.heading), h("span", { class: "message" }, this.message)));
+    }
+    renderButton() {
+        return (h("div", { id: "button" }, h("slot", { name: "button" })));
+    }
+    renderCloseIcon() {
+        if (!this.closebutton) {
+            return;
+        }
+        return (h("div", { id: "icon" }, h("z-icon", { tabIndex: 0, name: "multiply-circled", width: 15, height: 15, onClick: () => this.emitToastClose(this.mapSlideOutClass()), onKeyPress: (e) => {
+                if (e.keyCode == 32 || e.keyCode == 13) {
                     e.preventDefault();
                     this.emitToastClose(this.mapSlideOutClass());
                 }
-            } })))));
+            } })));
+    }
+    renderContainer() {
+        return (h("div", { tabIndex: 0, id: "external-container", class: {
+                [this.type]: !!this.type,
+                "several-lines-padding": this.isTextLong,
+            }, ref: (el) => (this.container = el) }, this.renderText(), this.renderButton(), this.renderCloseIcon()));
+    }
+    renderMobileContainer() {
+        return (h("div", { id: "external-container", class: {
+                [this.type]: !!this.type,
+                "several-lines-padding": this.isTextLong,
+                "mobile-wrapped": this.isTextLong,
+            } }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
     }
     render() {
-        return (h(Host, { key: 'f9b4a2fe7d3642b1cbbe6f2e433ddbbde49568fd', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
+        return (h(Host, { key: '1fcfaf1bf2d6d6701eabab75ef95d956e2886fb3', style: {
+                "--percentuale": `${this.percentage}%`,
+            }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, this.renderContent()));
+            } }, this.isMobile ? this.renderMobileContainer() : this.renderContainer()));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toast-notification/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, ToastNotification, ToastNotificationTransition} from \"../../beans\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n tag: \"z-toast-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToastNotification {\n @Element() hostElement: HTMLZToastNotificationElement;\n\n /** toast notification's title /\n @Prop()\n heading?: string;\n\n /* toast notification's message /\n @Prop()\n message: string;\n\n /* toggles closing button rendering /\n @Prop()\n closebutton: boolean;\n\n /* toast notification closing timeout (ms) /\n @Prop()\n autoclose?: number;\n\n /* toast notification autoclose can be paused /\n @Prop()\n pauseonfocusloss?: boolean = true;\n\n /* toast notification type: dark, light, accent, error, success, warning /\n @Prop()\n type?: ToastNotification;\n\n /* toast notification can be draggable/\n @Prop()\n isdraggable?: boolean = true;\n\n /* toast notification draggable percentage/\n @Prop()\n draggablepercentage?: number = 80;\n\n /* toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up/\n @Prop()\n transition?: ToastNotificationTransition;\n\n @State()\n percentage: number;\n\n private sliderManager: HammerManager;\n\n private elapsedTime: number;\n\n private timeoutHandle: number;\n\n private startTime: number;\n\n private isCloseEventCalled = false;\n\n @Watch(\"isdraggable\")\n watchPropIsdraggable(newValue: boolean): void {\n if (newValue) {\n this.sliderManager.get(\"pan\").set({enable: true});\n } else {\n this.sliderManager.get(\"pan\").set({enable: false});\n }\n }\n\n @Watch(\"autoclose\")\n watchPropAutoclose(newValue: number): void {\n clearTimeout(this.timeoutHandle);\n this.startClosingTimeout(newValue);\n }\n\n @Watch(\"pauseonfocusloss\")\n watchPropPauseonfocusloss(newValue: boolean): void {\n if (this.autoclose) {\n if (newValue) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n } else {\n document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n }\n }\n\n /* notification close event /\n @Event()\n toastClose: EventEmitter;\n\n private emitToastClose(cssClass: string): void {\n this.timeoutHandle = null;\n this.elapsedTime = null;\n this.hostElement.classList.add(cssClass);\n this.toastClose.emit();\n }\n\n componentWillLoad(): void {\n this.validateAutoclose();\n this.percentage = 0;\n }\n\n componentDidLoad(): void {\n this.startTime = Date.now();\n if (this.autoclose && this.pauseonfocusloss) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n\n this.isdraggable && this.handleSlideOutDragAnimation();\n }\n\n private visibilityChangeEventHandler(): void {\n if (document.visibilityState === \"hidden\") {\n this.timeoutHandle && this.onBlur();\n } else {\n this.elapsedTime && this.onFocus();\n }\n }\n\n private validateAutoclose(): void {\n if (!this.autoclose && !this.closebutton) {\n console.error(\"At least one between autoclose and closebutton must be present\");\n }\n }\n\n private mapSlideOutClass(): ToastNotificationTransition {\n switch (this.transition) {\n case ToastNotificationTransition.SLIDE_IN_DOWN:\n return ToastNotificationTransition.SLIDE_OUT_UP;\n case ToastNotificationTransition.SLIDE_IN_UP:\n return ToastNotificationTransition.SLIDE_OUT_DOWN;\n case ToastNotificationTransition.SLIDE_IN_LEFT:\n return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n case ToastNotificationTransition.SLIDE_IN_RIGHT:\n return ToastNotificationTransition.SLIDE_OUT_LEFT;\n }\n }\n\n private calculateDraggedPercentage(e): number {\n const bounding = this.hostElement.getBoundingClientRect();\n\n return Math.round((100 e.deltaX) / bounding.width);\n }\n\n private handleSlideOutDragAnimation(): void {\n this.sliderManager = new Hammer(this.hostElement);\n this.sliderManager.get(\"pan\").set({\n direction: Hammer.DIRECTION_HORIZONTAL,\n });\n\n this.sliderManager.on(\"pan\", (e) => {\n this.percentage = this.calculateDraggedPercentage(e);\n this.hostElement.style.transition = \"none\";\n this.hostElement.classList.remove(this.transition);\n const translateObj = {\n translate: `translateX(${this.percentage}%)`,\n translateBack: \"translateX(0)\",\n };\n\n this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n if (e.eventType === Hammer.DIRECTION_LEFT \|\| e.eventType === Hammer.DIRECTION_RIGHT) {\n this.hostElement.style.transform = translateObj.translate;\n if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n this.isCloseEventCalled = true;\n this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n }\n }\n\n if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n this.hostElement.style.transform = translateObj.translateBack;\n this.hostElement.style.transition = \"all 1s\";\n this.hostElement.style.opacity = \"100%\";\n this.percentage = 0;\n }\n });\n }\n\n private onFocus(): void {\n let time = this.autoclose;\n if (this.elapsedTime) {\n time = this.autoclose - this.elapsedTime;\n }\n if (time > 0) {\n this.startClosingTimeout(time);\n }\n }\n\n private onBlur(): void {\n this.elapsedTime = Date.now() - this.startTime;\n clearTimeout(this.timeoutHandle);\n }\n\n private startClosingTimeout(time: number): void {\n this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"external-container\"\n tabIndex={0}\n class={{[this.type]: !!this.type}}\n >\n <div id=\"inner-container\">\n <div id=\"text\">\n {this.heading && <span class=\"title\">{this.heading}</span>}\n <span class=\"message\">{this.message}</span>\n </div>\n <div id=\"button\">\n <slot name=\"button\" />\n </div>\n </div>\n <div id=\"icon\">\n {this.closebutton && (\n <z-icon\n tabIndex={0}\n name=\"multiply-circled\"\n width={15}\n height={15}\n onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n onKeyPress={(e) => {\n if (e.code == KeyboardCode.SPACE \|\| e.code == KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitToastClose(this.mapSlideOutClass());\n }\n }}\n />\n )}\n </div>\n </div>\n );\n }\n\n render(): HTMLZToastNotificationElement {\n return (\n <Host\n style={{\"--percentuale\": `${this.percentage}%`}}\n class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n onAnimationEnd={(e: AnimationEvent) => {\n if (this.autoclose && e.animationName.includes(\"slidein\")) {\n this.startClosingTimeout(this.autoclose);\n }\n if (e.animationName.includes(\"slideout\")) {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }}\n >\n {this.renderContent()}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n tag: \"z-toast-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToastNotification {\n @Element() hostElement: HTMLZToastNotificationElement;\n\n /** toast notification's title /\n @Prop()\n heading?: string;\n\n /* toast notification's message /\n @Prop()\n message: string;\n\n /* toggles closing button rendering /\n @Prop()\n closebutton: boolean;\n\n /* toast notification closing timeout (ms) /\n @Prop()\n autoclose?: number;\n\n /* toast notification autoclose can be paused /\n @Prop()\n pauseonfocusloss?: boolean = true;\n\n /* toast notification type: dark, light, accent, error, success, warning /\n @Prop()\n type?: ToastNotification;\n\n /* toast notification can be draggable/\n @Prop()\n isdraggable?: boolean = true;\n\n /* toast notification draggable percentage/\n @Prop()\n draggablepercentage?: number = 80;\n\n /* toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up/\n @Prop()\n transition?: ToastNotificationTransition;\n\n @State()\n percentage: number;\n\n private isTextLong: boolean;\n\n private container!: HTMLElement;\n\n private toastText!: HTMLElement;\n\n private sliderManager: HammerManager;\n\n private elapsedTime: number;\n\n private timeoutHandle: number;\n\n private startTime: number;\n\n private isMobile: boolean;\n\n private isCloseEventCalled = false;\n\n @Watch(\"isdraggable\")\n watchPropIsdraggable(newValue: boolean): void {\n if (newValue) {\n this.sliderManager.get(\"pan\").set({enable: true});\n } else {\n this.sliderManager.get(\"pan\").set({enable: false});\n }\n }\n\n @Watch(\"autoclose\")\n watchPropAutoclose(newValue: number): void {\n clearTimeout(this.timeoutHandle);\n this.startClosingTimeout(newValue);\n }\n\n @Watch(\"pauseonfocusloss\")\n watchPropPauseonfocusloss(newValue: boolean): void {\n if (this.autoclose) {\n if (newValue) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n } else {\n document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n }\n }\n\n /* notification close event /\n @Event()\n toastClose: EventEmitter;\n\n private emitToastClose(cssClass: string): void {\n this.timeoutHandle = null;\n this.elapsedTime = null;\n this.hostElement.classList.add(cssClass);\n this.toastClose.emit();\n }\n\n componentWillLoad(): void {\n this.isMobile = window.innerWidth <= Breakpoints.MOBILE;\n this.validateAutoclose();\n this.percentage = 0;\n }\n\n componentDidLoad(): void {\n this.isTextLong = this.detectWrap() \|\| this.toastText.offsetHeight > 20;\n this.startTime = Date.now();\n if (this.autoclose && this.pauseonfocusloss) {\n document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n }\n\n this.isdraggable && this.handleSlideOutDragAnimation();\n }\n\n private visibilityChangeEventHandler(): void {\n if (document.visibilityState === \"hidden\") {\n this.timeoutHandle && this.onBlur();\n } else {\n this.elapsedTime && this.onFocus();\n }\n }\n\n private validateAutoclose(): void {\n if (!this.autoclose && !this.closebutton) {\n console.error(\"At least one between autoclose and closebutton must be present\");\n }\n }\n\n private mapSlideOutClass(): ToastNotificationTransition {\n switch (this.transition) {\n case ToastNotificationTransition.SLIDE_IN_DOWN:\n return ToastNotificationTransition.SLIDE_OUT_UP;\n case ToastNotificationTransition.SLIDE_IN_UP:\n return ToastNotificationTransition.SLIDE_OUT_DOWN;\n case ToastNotificationTransition.SLIDE_IN_LEFT:\n return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n case ToastNotificationTransition.SLIDE_IN_RIGHT:\n return ToastNotificationTransition.SLIDE_OUT_LEFT;\n }\n }\n\n private calculateDraggedPercentage(e): number {\n const bounding = this.hostElement.getBoundingClientRect();\n\n return Math.round((100 e.deltaX) / bounding.width);\n }\n\n private handleSlideOutDragAnimation(): void {\n this.sliderManager = new Hammer(this.hostElement);\n this.sliderManager.get(\"pan\").set({\n direction: Hammer.DIRECTION_HORIZONTAL,\n });\n\n this.sliderManager.on(\"pan\", (e) => {\n this.percentage = this.calculateDraggedPercentage(e);\n this.hostElement.style.transition = \"none\";\n this.hostElement.classList.remove(this.transition);\n const translateObj = {\n translate: `translateX(${this.percentage}%)`,\n translateBack: \"translateX(0)\",\n };\n\n this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n if (e.eventType === Hammer.DIRECTION_LEFT \|\| e.eventType === Hammer.DIRECTION_RIGHT) {\n this.hostElement.style.transform = translateObj.translate;\n if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n this.isCloseEventCalled = true;\n this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n }\n }\n\n if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n this.hostElement.style.transform = translateObj.translateBack;\n this.hostElement.style.transition = \"all 1s\";\n this.hostElement.style.opacity = \"100%\";\n this.percentage = 0;\n }\n });\n }\n\n private onFocus(): void {\n let time = this.autoclose;\n if (this.elapsedTime) {\n time = this.autoclose - this.elapsedTime;\n }\n if (time > 0) {\n this.startClosingTimeout(time);\n }\n }\n\n private onBlur(): void {\n this.elapsedTime = Date.now() - this.startTime;\n clearTimeout(this.timeoutHandle);\n }\n\n private startClosingTimeout(time: number): void {\n this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n }\n\n private detectWrap(): boolean {\n const parentWidth = this.container.offsetWidth;\n const children = this.container.children;\n let totalWidth = 0;\n\n for (let i = 0; i < children.length; i++) {\n totalWidth += (children[i] as HTMLElement).offsetWidth;\n }\n\n return totalWidth > parentWidth;\n }\n\n private renderText(): HTMLDivElement {\n return (\n <div\n id=\"text\"\n ref={(el) => (this.toastText = el as HTMLElement)}\n >\n {this.heading && <span class=\"title\">{this.heading}</span>}\n <span class=\"message\">{this.message}</span>\n </div>\n );\n }\n\n private renderButton(): HTMLDivElement {\n return (\n <div id=\"button\">\n <slot name=\"button\" />\n </div>\n );\n }\n\n private renderCloseIcon(): HTMLDivElement {\n if (!this.closebutton) {\n return;\n }\n\n return (\n <div id=\"icon\">\n <z-icon\n tabIndex={0}\n name=\"multiply-circled\"\n width={15}\n height={15}\n onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n onKeyPress={(e) => {\n if (e.keyCode == 32 \|\| e.keyCode == 13) {\n e.preventDefault();\n this.emitToastClose(this.mapSlideOutClass());\n }\n }}\n />\n </div>\n );\n }\n\n private renderContainer(): HTMLDivElement {\n return (\n <div\n tabIndex={0}\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n }}\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n private renderMobileContainer(): HTMLDivElement {\n return (\n <div\n id=\"external-container\"\n class={{\n [this.type]: !!this.type,\n \"several-lines-padding\": this.isTextLong,\n \"mobile-wrapped\": this.isTextLong,\n }}\n >\n <div\n id=\"flex-container\"\n ref={(el) => (this.container = el as HTMLElement)}\n >\n {this.renderText()}\n {this.renderButton()}\n </div>\n {this.renderCloseIcon()}\n </div>\n );\n }\n\n render(): HTMLZToastNotificationElement {\n return (\n <Host\n style={{\n \"--percentuale\": `${this.percentage}%`,\n }}\n class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n onAnimationEnd={(e: AnimationEvent) => {\n if (this.autoclose && e.animationName.includes(\"slidein\")) {\n this.startClosingTimeout(this.autoclose);\n }\n if (e.animationName.includes(\"slideout\")) {\n this.hostElement.parentNode.removeChild(this.hostElement);\n }\n }}\n >\n {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/z-toast-notification/index.stories.js CHANGED Viewed

@@ -2,7 +2,6 @@ import { html } from "lit";
 import { ToastNotification, ToastNotificationTransition } from "../../beans";
 import "../z-button/index";
 import "./index";
-const longText = "Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.";
 const template = (args) => html `<div class="toast-container">
     <z-toast-notification
       heading="${args.heading}"
@@ -53,16 +52,14 @@ export const SlideInLeft = {
         transition: ToastNotificationTransition.SLIDE_IN_LEFT,
     },
 };
-export const SlideInDownNoCloseButton = {
+export const SlideInDown = {
     args: {
         transition: ToastNotificationTransition.SLIDE_IN_DOWN,
-        closebutton: false,
     },
 };
-export const SlideInUpLongText = {
+export const SlideInUp = {
     args: {
         transition: ToastNotificationTransition.SLIDE_IN_UP,
-        message: longText,
     },
 };
 export const SlottedButton = {
@@ -90,29 +87,4 @@ export const SlottedButton = {
       </z-toast-notification>
     </div>`,
 };
-export const SlottedButtonLongText = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_DOWN,
-    },
-    render: (args) => html `<div class="toast-container slotted-button">
-      <z-toast-notification
-        heading="Titolo abbastanza lungo"
-        message=${longText}
-        closebutton="${args.closebutton}"
-        autoclose="${args.autoclose}"
-        pauseonfocusloss="${args.pauseonfocusloss}"
-        type="${args.type}"
-        isdraggable="${args.isdraggable}"
-        draggablepercentage="${args.draggablepercentage}"
-        transition="${args.transition}"
-      >
-        <z-button
-          slot="button"
-          size="small"
-          variant="tertiary"
-          >button</z-button
-        >
-      </z-toast-notification>
-    </div>`,
-};
 //# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-toast-notification/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAE,2BAA2B,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AAEjB,MAAM,QAAQ,~~GACZ,uKAAuK,CAAC;AAE1K,MAAM,QAAQ,~~GAAG,CAAC,IAAI,EAAkB,EAAE,CACxC,IAAI,CAAA;;iBAEW,IAAI,CAAC,OAAO;iBACZ,IAAI,CAAC,OAAO;qBACR,IAAI,CAAC,WAAW;mBAClB,IAAI,CAAC,SAAS;0BACP,IAAI,CAAC,gBAAgB;cACjC,IAAI,CAAC,IAAI;qBACF,IAAI,CAAC,WAAW;6BACR,IAAI,CAAC,mBAAmB;oBACjC,IAAI,CAAC,UAAU;;SAE1B,CAAC;~~AAEV~~,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;SAC1C;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,2BAA2B,CAAC;SACpD;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE,iCAAiC;QAC1C,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,gBAAgB,EAAE,KAAK;QACvB,IAAI,EAAE,iBAAiB,CAAC,IAAI;QAC5B,WAAW,EAAE,IAAI;QACjB,mBAAmB,EAAE,EAAE;QACvB,UAAU,EAAE,2BAA2B,CAAC,cAAc;KACvD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACE,CAAC;~~AAErC~~,eAAe,SAAS,CAAC;AAGzB,MAAM,CAAC,MAAM,YAAY,GAAG,EAAkB,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,~~wBAAwB~~,GAAG;~~IACtC~~,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;~~QACrD,WAAW,EAAE,KAAK~~;~~KACnB;~~CACc,CAAC;AAElB,MAAM,CAAC,MAAM,~~iBAAiB~~,GAAG;~~IAC/B~~,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,WAAW;~~QACnD,OAAO,EAAE,QAAQ~~;~~KAClB;~~CACc,CAAC;AAElB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;mBAEW,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;uBACR,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;WAS1B;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;kBAGU,QAAQ;uBACH,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;WAS1B;CACM,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotification} from \".\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"./index\";\n\nconst ~~longText =\n \"Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.\";\n\nconst~~ template = (args): TemplateResult =>\n html`<div class=\"toast-container\">\n <z-toast-notification\n heading=\"${args.heading}\"\n message=\"${args.message}\"\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n ></z-toast-notification>\n </div>`;\n\nconst StoryMeta = {\n title: \"ZToastNotification\",\n component: \"z-toast-notification\",\n argTypes: {\n type: {\n control: {\n type: \"select\",\n },\n options: Object.values(ToastNotification),\n },\n transition: {\n control: {\n type: \"select\",\n },\n options: Object.values(ToastNotificationTransition),\n },\n },\n args: {\n heading: \"Titolo\",\n message: \"Questo è un messaggio di prova.\",\n closebutton: true,\n autoclose: null,\n pauseonfocusloss: false,\n type: ToastNotification.DARK,\n isdraggable: true,\n draggablepercentage: 80,\n transition: ToastNotificationTransition.SLIDE_IN_RIGHT,\n },\n render: (args) => template(args),\n} satisfies Meta<ZToastNotification>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotification>;\nexport const SlideInRight = {} satisfies Story;\n\nexport const SlideInLeft = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_LEFT,\n },\n} satisfies Story;\n\nexport const ~~SlideInDownNoCloseButton~~ = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n ~~closebutton: false,\n~~ },\n} satisfies Story;\n\nexport const ~~SlideInUpLongText~~ = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_UP,\n ~~message: longText,\n~~ },\n} satisfies Story;\n\nexport const SlottedButton = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n },\n render: (args) =>\n html`<div class=\"toast-container slotted-button\">\n <z-toast-notification\n heading=\"${args.heading}\"\n message=\"${args.message}\"\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n >\n <z-button\n slot=\"button\"\n size=\"small\"\n variant=\"tertiary\"\n >button</z-button\n >\n </z-toast-notification>\n </div>`,\n} satisfies Story;\n~~\nexport const SlottedButtonLongText = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n },\n render: (args) =>\n html`<div class=\~~"toast-container slotted-button\">\n <z-toast-notification\n heading=\"Titolo abbastanza lungo\"\n message=${longText}\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n >\n <z-button\n slot=\"button\"\n size=\"small\"\n variant=\"tertiary\"\n >button</z-button\n >\n </z-toast-notification>\n </div>`,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAE,2BAA2B,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AAEjB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAkB,EAAE,CACxC,IAAI,CAAA;;iBAEW,IAAI,CAAC,OAAO;iBACZ,IAAI,CAAC,OAAO;qBACR,IAAI,CAAC,WAAW;mBAClB,IAAI,CAAC,SAAS;0BACP,IAAI,CAAC,gBAAgB;cACjC,IAAI,CAAC,IAAI;qBACF,IAAI,CAAC,WAAW;6BACR,IAAI,CAAC,mBAAmB;oBACjC,IAAI,CAAC,UAAU;;SAE1B,CAAC;AACV,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;SAC1C;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,2BAA2B,CAAC;SACpD;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE,iCAAiC;QAC1C,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,gBAAgB,EAAE,KAAK;QACvB,IAAI,EAAE,iBAAiB,CAAC,IAAI;QAC5B,WAAW,EAAE,IAAI;QACjB,mBAAmB,EAAE,EAAE;QACvB,UAAU,EAAE,2BAA2B,CAAC,cAAc;KACvD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACE,CAAC;AACrC,eAAe,SAAS,CAAC;AAGzB,MAAM,CAAC,MAAM,YAAY,GAAG,EAAkB,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,WAAW;KACpD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,UAAU,EAAE,2BAA2B,CAAC,aAAa;KACtD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;mBAEW,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;uBACR,IAAI,CAAC,WAAW;qBAClB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;gBACjC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,WAAW;+BACR,IAAI,CAAC,mBAAmB;sBACjC,IAAI,CAAC,UAAU;;;;;;;;;WAS1B;CACM,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotification} from \".\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"./index\";\n\nconst template = (args): TemplateResult =>\n html`<div class=\"toast-container\">\n <z-toast-notification\n heading=\"${args.heading}\"\n message=\"${args.message}\"\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n ></z-toast-notification>\n </div>`;\nconst StoryMeta = {\n title: \"ZToastNotification\",\n component: \"z-toast-notification\",\n argTypes: {\n type: {\n control: {\n type: \"select\",\n },\n options: Object.values(ToastNotification),\n },\n transition: {\n control: {\n type: \"select\",\n },\n options: Object.values(ToastNotificationTransition),\n },\n },\n args: {\n heading: \"Titolo\",\n message: \"Questo è un messaggio di prova.\",\n closebutton: true,\n autoclose: null,\n pauseonfocusloss: false,\n type: ToastNotification.DARK,\n isdraggable: true,\n draggablepercentage: 80,\n transition: ToastNotificationTransition.SLIDE_IN_RIGHT,\n },\n render: (args) => template(args),\n} satisfies Meta<ZToastNotification>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotification>;\nexport const SlideInRight = {} satisfies Story;\n\nexport const SlideInLeft = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_LEFT,\n },\n} satisfies Story;\n\nexport const SlideInDown = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n },\n} satisfies Story;\n\nexport const SlideInUp = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_UP,\n },\n} satisfies Story;\n\nexport const SlottedButton = {\n args: {\n transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n },\n render: (args) =>\n html`<div class=\"toast-container slotted-button\">\n <z-toast-notification\n heading=\"${args.heading}\"\n message=\"${args.message}\"\n closebutton=\"${args.closebutton}\"\n autoclose=\"${args.autoclose}\"\n pauseonfocusloss=\"${args.pauseonfocusloss}\"\n type=\"${args.type}\"\n isdraggable=\"${args.isdraggable}\"\n draggablepercentage=\"${args.draggablepercentage}\"\n transition=\"${args.transition}\"\n >\n <z-button\n slot=\"button\"\n size=\"small\"\n variant=\"tertiary\"\n >button</z-button\n >\n </z-toast-notification>\n </div>`,\n} satisfies Story;\n"]}