npm - @zanichelli/albe-web-components - Versions diffs - 17.3.0-RC1 → 18.0.0 - Mend

@zanichelli/albe-web-components 17.3.0-RC1 → 18.0.0

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 (884) hide show

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

@@ -256,7 +256,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: '5b7118a2f2aceeb8dd523f3514d5e3279ffa5b65', "menu-length": this.menuLength }, h("div", { key: '2d0b9f769636f8119febbc88cb85194d4dc86fea', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '29c5d63484289d6edaaf4f0d28b382efea5e58a3', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '4e30176102f7197af4bbeb015b46c4b3ce3045c8', class: "top-subtitle" }, h("slot", { key: '190f26a229b6dc2030fadead848dde3c706cf930', name: "top-subtitle" }))), h("div", { key: '3ac5b57fb62edf2a0a69e373a454529c16610d0b', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '759ef8df1d93f911a11f3e39dcc90da0b62d0573', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '4d742d71fa66f39098ffbf68a18dcd7daba26774', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'deb19086d893eeaceacd512803a62780679220e5', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'b08ab1c973b3ee270c8c89c79f9a0be0d6d45dca', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'c581eb6ba90e0ba820f2585757909b4e31e0d26f', "menu-length": this.menuLength }, h("div", { key: '0784330861f875d530a886ace7e1b6b535790187', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '3bb4a709956fdcd9871f85d74fa309a76d6e43ce', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '836c12142e78e7fe2b85022f35d2f8910a0bad75', class: "top-subtitle" }, h("slot", { key: '54891726347880ae252f2168223273ab0cad1a46', name: "top-subtitle" }))), h("div", { key: '81333471f5210087d44457a1fd44b483dfb2a57f', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '68d0b7682f4de8827b0a52988167f0be2ac21d19', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '388c1487fc487b57485209f128531e142db91f0e', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '9fd0390674dafc1c28cd1ab40d35beb82e06f2b5', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '47e56e491971f4b7c03458e4117878e356294baa', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -193,7 +193,7 @@
   right: calc(var(--space-unit) * -2);
   width: var(--border-size-small);
   height: 1em;
-  background-color: currentcolor;
+  background-color: var(--color-default-icon);
   content: "";
   font-size: var(--font-size-3);
   transform: translateY(-50%);

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

@@ -5,7 +5,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: 'dc1e0e9c0c7647c5a31dca6356c6ab016b2a07cf', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '3b1bcd618c4f1b45e2ae7e717a3c7e223d4faec6' })));
+        return (h(Host, { key: 'dba84aee69431be780e76cab58cb3aef34d0d22e', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'fdb6f5f6f4ef2f424a589b44ab97db436928141b' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

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

@@ -24,10 +24,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '77ef834dbf6ba1e73562dea4e1011196d8decee4', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '688337d77c969d1bd766c9c49229b02f72188132', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: '41eab447479aa532c45f39aae303d7388928aedf' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'e6ebedad5e2bf6c73107b174dad478ba0dd4c9d2', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: 'b3a2ec4a0f2cade4ab74d6a03e02d9c1382ed7c7' }, this.text.substring(0, 2)), this.image && (h("img", { key: '9b68953eebce40ec9f423d3c30f85e4fe665882b', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -193,10 +193,10 @@ export class ZBreadcrumb {
         ];
     }
     render() {
-        return (h(Host, { key: '3d0996a611fe483de9a015c3ac5b25b06d5e302c', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '8c45a561fcdebb6c7685010dc7105b6c756025e1', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '6eacddf1b7d5dfc6afa7a82f563e3b6b9d0c933f', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '9937193185a29b7c96e2f9c1a4447473d767b946', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: '5cbdbcb8a14a471ae6dbad1d5d7eeb4ca3c8482b' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: 'baaf7bc4c9a039cf29e4adca6523d017bcbb3ca2' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ import "./style.stories.css";
  * No slot is rendered inside the latter.
  * Like the other use case, don't pass a custom label to the first child because it will be overwritten by the default home value.
  * This mode can be also used by SEO non-relevant application.
- * @example```html
+ * @example```
  * <z-breadcrumb>
  *  <a href="./home_link"></a>
  *  <a href="./link1">link1</a>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-breadcrumb/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,yBAAyB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC;YAC3C,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,yBAAyB,CAAC;YACjD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,mBAAmB,CAAC,QAAQ;QACvC,eAAe,EAAE,yBAAyB,CAAC,IAAI;QAC/C,cAAc,EAAE,CAAC;QACjB,gBAAgB,EAAE,KAAK;QACvB,oBAAoB,EAAE,CAAC;QACvB,YAAY,EAAE,EAAE;KACjB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;qBAEa,IAAI,CAAC,SAAS;2BACR,IAAI,CAAC,eAAe;0BACrB,IAAI,CAAC,cAAc;4BACjB,IAAI,CAAC,gBAAgB;gCACjB,IAAI,CAAC,oBAAoB;wBACjC,IAAI,CAAC,YAAY;;;;;;;;WAQ9B;CACsB,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZBreadcrumb} from \".\";\nimport {BreadcrumbHomepageVariant, BreadcrumbPathStyle} from \"../../beans\";\nimport \"./index\";\nimport \"./style.stories.css\";\n\n/*\n Breadcrumb is a relevant component for SEO oriented applications.\n * As the crawlers flatten the light dom and the shadow dom, it is important to move all the relevant SEO content in the light DOM, to not affect indexability.\n \n The component will handle the logic for generating the proper markup inside the shadow dom.\n * No slot is rendered inside the latter.\n * Like the other use case, don't pass a custom label to the first child because it will be overwritten by the default home value.\n * This mode can be also used by SEO non-relevant application.\n * @example~~```html\~~n * <z-breadcrumb>\n * <a href=\"./home_link\"></a>\n * <a href=\"./link1\">link1</a>\n * <a href=\"./link2\">link2</a>\n * <a href=\"./link3\">link3</a>\n * </z-breadcrumb>```\n \n This component follows the accessibility guidelines provided by W3C https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/\n */\nconst StoryMeta = {\n title: \"ZBreadcrumb\",\n component: \"z-breadcrumb\",\n argTypes: {\n pathStyle: {\n options: Object.values(BreadcrumbPathStyle),\n control: {\n type: \"select\",\n },\n },\n homepageVariant: {\n options: Object.values(BreadcrumbHomepageVariant),\n control: {\n type: \"select\",\n },\n },\n },\n args: {\n pathStyle: BreadcrumbPathStyle.SEMIBOLD,\n homepageVariant: BreadcrumbHomepageVariant.ICON,\n maxNodesToShow: 5,\n preventFollowUrl: false,\n overflowMenuItemRows: 0,\n truncateChar: 30,\n },\n} satisfies Meta<ZBreadcrumb>;\n\nexport default StoryMeta;\n\nexport const Breadcrumb = {\n render: (args) =>\n html`<div class=\"z-breadcrumb-story-container\">\n <z-breadcrumb\n .pathStyle=${args.pathStyle}\n .homepageVariant=${args.homepageVariant}\n .maxNodesToShow=${args.maxNodesToShow}\n .preventFollowUrl=${args.preventFollowUrl}\n .overflowMenuItemRows=${args.overflowMenuItemRows}\n .truncateChar=${args.truncateChar}\n >\n <a href=\"https://www.zanichelli.it\"></a>\n <a href=\"./link1\">Lingua inglese - Scuola secondaria di primo grado</a>\n <a href=\"./link2\">Lingua Inglese - Lessico e funzioni linguistiche e comunicative</a>\n <a href=\"./link3\">Il tempo libero e i luoghi del tempo libero</a>\n <a href=\"./link4\">Chiedere di descrivere le proprie vacanze</a>\n </z-breadcrumb>\n </div>`,\n} satisfies StoryObj<ZBreadcrumb>;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-breadcrumb/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,yBAAyB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC;YAC3C,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,yBAAyB,CAAC;YACjD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,mBAAmB,CAAC,QAAQ;QACvC,eAAe,EAAE,yBAAyB,CAAC,IAAI;QAC/C,cAAc,EAAE,CAAC;QACjB,gBAAgB,EAAE,KAAK;QACvB,oBAAoB,EAAE,CAAC;QACvB,YAAY,EAAE,EAAE;KACjB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;qBAEa,IAAI,CAAC,SAAS;2BACR,IAAI,CAAC,eAAe;0BACrB,IAAI,CAAC,cAAc;4BACjB,IAAI,CAAC,gBAAgB;gCACjB,IAAI,CAAC,oBAAoB;wBACjC,IAAI,CAAC,YAAY;;;;;;;;WAQ9B;CACsB,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZBreadcrumb} from \".\";\nimport {BreadcrumbHomepageVariant, BreadcrumbPathStyle} from \"../../beans\";\nimport \"./index\";\nimport \"./style.stories.css\";\n\n/*\n Breadcrumb is a relevant component for SEO oriented applications.\n * As the crawlers flatten the light dom and the shadow dom, it is important to move all the relevant SEO content in the light DOM, to not affect indexability.\n \n The component will handle the logic for generating the proper markup inside the shadow dom.\n * No slot is rendered inside the latter.\n * Like the other use case, don't pass a custom label to the first child because it will be overwritten by the default home value.\n * This mode can be also used by SEO non-relevant application.\n * @example```\n * <z-breadcrumb>\n * <a href=\"./home_link\"></a>\n * <a href=\"./link1\">link1</a>\n * <a href=\"./link2\">link2</a>\n * <a href=\"./link3\">link3</a>\n * </z-breadcrumb>```\n \n This component follows the accessibility guidelines provided by W3C https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/\n */\nconst StoryMeta = {\n title: \"ZBreadcrumb\",\n component: \"z-breadcrumb\",\n argTypes: {\n pathStyle: {\n options: Object.values(BreadcrumbPathStyle),\n control: {\n type: \"select\",\n },\n },\n homepageVariant: {\n options: Object.values(BreadcrumbHomepageVariant),\n control: {\n type: \"select\",\n },\n },\n },\n args: {\n pathStyle: BreadcrumbPathStyle.SEMIBOLD,\n homepageVariant: BreadcrumbHomepageVariant.ICON,\n maxNodesToShow: 5,\n preventFollowUrl: false,\n overflowMenuItemRows: 0,\n truncateChar: 30,\n },\n} satisfies Meta<ZBreadcrumb>;\n\nexport default StoryMeta;\n\nexport const Breadcrumb = {\n render: (args) =>\n html`<div class=\"z-breadcrumb-story-container\">\n <z-breadcrumb\n .pathStyle=${args.pathStyle}\n .homepageVariant=${args.homepageVariant}\n .maxNodesToShow=${args.maxNodesToShow}\n .preventFollowUrl=${args.preventFollowUrl}\n .overflowMenuItemRows=${args.overflowMenuItemRows}\n .truncateChar=${args.truncateChar}\n >\n <a href=\"https://www.zanichelli.it\"></a>\n <a href=\"./link1\">Lingua inglese - Scuola secondaria di primo grado</a>\n <a href=\"./link2\">Lingua Inglese - Lessico e funzioni linguistiche e comunicative</a>\n <a href=\"./link3\">Il tempo libero e i luoghi del tempo libero</a>\n <a href=\"./link4\">Chiedere di descrivere le proprie vacanze</a>\n </z-breadcrumb>\n </div>`,\n} satisfies StoryObj<ZBreadcrumb>;\n"]}

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

@@ -65,6 +65,7 @@ a.missing-path {
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--line-clamp-mobile);
+  line-clamp: var(--line-clamp-mobile);
   text-overflow: ellipsis;
   white-space: initial;
 }
@@ -136,6 +137,7 @@ button.dots {
 @media (min-width: 768px) {
   .text-ellipsis {
     -webkit-line-clamp: var(--line-clamp-popover);
+    line-clamp: var(--line-clamp-popover);
   }
 }

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

@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '6f2fdeea8f8d8c233d6b06ce6a77a550ca003c43', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '2b73a9480490742c954d9f9319a035092e857313', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'ffabdef711dfc8489d816c34fd7c52254ac8c89f', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '7086a8caa5146d54b93affa0d901dbb60248d64b', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '17d0cce1ca76cc916bf8ff2af67570b755d5a12d', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '4ce76b1bdb36caa6731b04730c78fd6b6d551fc6', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '413e11d0f57a380042ba9af63469380b029edc0d', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '3e0882a73656dc7f620e1fca3c94413e9f74290a', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '74d4a35b5bab965770e04bbdbceac853767aaa58', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '1bc2e3e07e5984a7abca9bd21e5dd94261b03b36', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ button::-moz-focus-inner {
 button:hover {
   border-color: var(--color-hover-primary);
   color: var(--color-hover-primary);
-  fill: var(--color-hover-primary);
+  fill: var(--color-hover-primary-icon);
 }
 button:focus {
@@ -37,14 +37,14 @@ button:active {
   border-color: var(--color-pressed-primary);
   box-shadow: var(--shadow-2);
   color: var(--color-pressed-primary);
-  fill: var(--color-pressed-primary);
+  fill: var(--color-active-primary-icon);
 }
 button.selected {
-  border-color: var(--color-active-primary);
-  background-color: var(--color-active-primary);
+  border-color: var(--color-hover-primary);
+  background-color: var(--color-hover-primary);
   color: var(--color-text-inverse);
-  fill: var(--color-text-inverse);
+  fill: var(--color-inverse-icon);
 }
 button > span.ellipsis {

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

@@ -192,7 +192,7 @@ export const TextVariantPrimaryBackground = {
     </z-card>
   `,
 };
-export const TextVariantWhiteBackgroundAndBordered = {
+export const TextVariantSurfaceBackgroundAndBordered = {
     args: {
         "--z-card--text-border": "2px solid var(--gray800)",
         "--z-card--text-border-radius": "4px",
@@ -209,7 +209,7 @@ export const TextVariantWhiteBackgroundAndBordered = {
       .showShadow="${args.showShadow}"
       .clickable="${args.clickable}"
       style=${styleMap({
-        "--z-card--text-background": `var(--color-white)`,
+        "--z-card--text-background": `var(--color-surface01)`,
         "--z-card--text-border": `${args["--z-card--text-border"]}`,
         "--z-card--text-border-radius": `${args["--z-card--text-border-radius"]}`,
         "--z-card--text-padding": `${args["--z-card--text-padding"]}`,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-card/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZCard} from \".\";\nimport {CardVariant} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCardStoriesArgs = ZCard &\n CSSVarsArguments<\n \| \"z-card--color-cover-background\"\n \| \"z-card--color-cover-background\"\n \| \"z-card--text-border\"\n \| \"z-card--text-border-radius\"\n \| \"z-card--text-padding\"\n >;\nconst StoryMeta = {\n title: \"ZCard\",\n component: \"z-card\",\n argTypes: {\n variant: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"default\",\n },\n },\n options: [null, ...Object.values(CardVariant)],\n },\n },\n args: {\n variant: null,\n showShadow: false,\n clickable: false,\n },\n} satisfies Meta<ZCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCardStoriesArgs>;\n\nexport const WithImage = {\n render: (args) => html`\n <z-card\n class=\"demo-card\"\n .variant=\"${args.variant}\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n >\n <img\n slot=\"cover\"\n src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n />\n <span\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </span>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n </z-card>\n `,\n} satisfies Story;\n\nexport const WithImageAndIcon = {\n args: {\n coverIcon: \"play-filled\",\n },\n render: (args) => html`\n <z-card\n class=\"demo-card\"\n cover-icon=\"${args.coverIcon}\"\n .variant=\"${args.variant}\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n >\n <img\n slot=\"cover\"\n src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n />\n <h2\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </h2>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n </z-card>\n `,\n} satisfies Story;\n\nexport const ColorCover = {\n args: {\n \"--z-card--color-cover-background\": \"var(--yellow500)\",\n },\n render: (args) => html`\n <z-card\n class=\"demo-card\"\n .variant=\"${args.variant}\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n style=\"--z-card--color-cover-background: ${args[\"--z-card--color-cover-background\"]};\"\n >\n <h2\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </h2>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n </z-card>\n `,\n} satisfies Story;\n\nexport const TextVariantPrimaryBackground = {\n args: {\n \"--z-card--text-border-radius\": \"4px\",\n },\n parameters: {\n controls: {\n exclude: [\"variant\"],\n },\n },\n render: (args) => html`\n <z-card\n class=\"text-variant-card\"\n variant=\"text\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n style=${styleMap({\n \"--z-card--text-background\": \"var(--color-primary01)\",\n \"--z-card--text-border-radius\": `${args[\"--z-card--text-border-radius\"]}`,\n \"color\": \"var(--color-text-inverse)\",\n })}\n >\n <h2\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </h2>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\">\n <z-icon\n name=\"share\"\n fill=\"color-surface01\"\n ></z-icon>\n </button>\n <button slot=\"action\">\n <z-icon\n name=\"delete\"\n fill=\"color-surface01\"\n ></z-icon>\n </button>\n </z-card>\n `,\n} satisfies Story;\n\nexport const TextVariantWhiteBackgroundAndBordered = {\n args: {\n \"--z-card--text-border\": \"2px solid var(--gray800)\",\n \"--z-card--text-border-radius\": \"4px\",\n \"--z-card--text-padding\": \"16px 8px\",\n },\n parameters: {\n controls: {\n exclude: [\"variant\"],\n },\n },\n render: (args) =>\n html`<z-card\n class=\"text-variant-card\"\n variant=\"text\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n style=${styleMap({\n \"--z-card--text-background\": `var(--color-white)`,\n \"--z-card--text-border\": `${args[\"--z-card--text-border\"]}`,\n \"--z-card--text-border-radius\": `${args[\"--z-card--text-border-radius\"]}`,\n \"--z-card--text-padding\": `${args[\"--z-card--text-padding\"]}`,\n })}\n >\n <h2\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </h2>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\">\n <z-icon\n name=\"share\"\n fill=\"color-primary01\"\n ></z-icon>\n </button>\n <button slot=\"action\">\n <z-icon\n name=\"delete\"\n fill=\"color-primary01\"\n ></z-icon>\n </button>\n </z-card>`,\n} satisfies Story;\n\nexport const WithImageAndClickListener = {\n parameters: {\n controls: {\n exclude: [\"clickable\", \"showShadow\"],\n },\n },\n render: (args) => html`\n <script>\n window.cardClickCount = 0;\n document.getElementById(\"btn-card\").addEventListener(\"click\", (e) => {\n window.cardClickCount = window.cardClickCount + 1;\n const alertBox = document.getElementById(\"click-alert-container\");\n if (!alertBox) {\n return;\n }\n\n alertBox.innerText = \"Card click count: \" + window.cardClickCount;\n });\n </script>\n <z-card\n class=\"demo-card\"\n variant=${args.variant}\n clickable\n >\n <img\n slot=\"cover\"\n src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n />\n <span\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </span>\n <button\n id=\"btn-card\"\n slot=\"title\"\n >\n <span>Card title</span>\n </button>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n </z-card>\n <div id=\"click-alert-container\">Card click count: 0</div>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-card/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAExC,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAU7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,MAAM,EAAE;oBACN,IAAI,EAAE,SAAS;iBAChB;aACF;YACD,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;SAC/C;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;KACjB;CAC+B,CAAC;AAEnC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;kBAGN,IAAI,CAAC,OAAO;qBACT,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4B/B;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;oBAGJ,IAAI,CAAC,SAAS;kBAChB,IAAI,CAAC,OAAO;qBACT,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4B/B;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,kCAAkC,EAAE,kBAAkB;KACvD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;kBAGN,IAAI,CAAC,OAAO;qBACT,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;iDACe,IAAI,CAAC,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;GAwBtF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,IAAI,EAAE;QACJ,8BAA8B,EAAE,KAAK;KACtC;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,SAAS,CAAC;SACrB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;qBAIH,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;cACpB,QAAQ,CAAC;QACf,2BAA2B,EAAE,wBAAwB;QACrD,8BAA8B,EAAE,GAAG,IAAI,CAAC,8BAA8B,CAAC,EAAE;QACzE,OAAO,EAAE,2BAA2B;KACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCL;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,uCAAuC,GAAG;IACrD,IAAI,EAAE;QACJ,uBAAuB,EAAE,0BAA0B;QACnD,8BAA8B,EAAE,KAAK;QACrC,wBAAwB,EAAE,UAAU;KACrC;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,SAAS,CAAC;SACrB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;qBAGa,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;cACpB,QAAQ,CAAC;QACf,2BAA2B,EAAE,wBAAwB;QACrD,uBAAuB,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC,EAAE;QAC3D,8BAA8B,EAAE,GAAG,IAAI,CAAC,8BAA8B,CAAC,EAAE;QACzE,wBAAwB,EAAE,GAAG,IAAI,CAAC,wBAAwB,CAAC,EAAE;KAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCM;CACG,CAAC;AAElB,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC;SACrC;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;gBAeR,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BzB;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZCard} from \".\";\nimport {CardVariant} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCardStoriesArgs = ZCard &\n CSSVarsArguments<\n \| \"z-card--color-cover-background\"\n \| \"z-card--color-cover-background\"\n \| \"z-card--text-border\"\n \| \"z-card--text-border-radius\"\n \| \"z-card--text-padding\"\n >;\nconst StoryMeta = {\n title: \"ZCard\",\n component: \"z-card\",\n argTypes: {\n variant: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"default\",\n },\n },\n options: [null, ...Object.values(CardVariant)],\n },\n },\n args: {\n variant: null,\n showShadow: false,\n clickable: false,\n },\n} satisfies Meta<ZCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCardStoriesArgs>;\n\nexport const WithImage = {\n render: (args) => html`\n <z-card\n class=\"demo-card\"\n .variant=\"${args.variant}\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n >\n <img\n slot=\"cover\"\n src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n />\n <span\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </span>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n </z-card>\n `,\n} satisfies Story;\n\nexport const WithImageAndIcon = {\n args: {\n coverIcon: \"play-filled\",\n },\n render: (args) => html`\n <z-card\n class=\"demo-card\"\n cover-icon=\"${args.coverIcon}\"\n .variant=\"${args.variant}\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n >\n <img\n slot=\"cover\"\n src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n />\n <h2\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </h2>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n </z-card>\n `,\n} satisfies Story;\n\nexport const ColorCover = {\n args: {\n \"--z-card--color-cover-background\": \"var(--yellow500)\",\n },\n render: (args) => html`\n <z-card\n class=\"demo-card\"\n .variant=\"${args.variant}\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n style=\"--z-card--color-cover-background: ${args[\"--z-card--color-cover-background\"]};\"\n >\n <h2\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </h2>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n </z-card>\n `,\n} satisfies Story;\n\nexport const TextVariantPrimaryBackground = {\n args: {\n \"--z-card--text-border-radius\": \"4px\",\n },\n parameters: {\n controls: {\n exclude: [\"variant\"],\n },\n },\n render: (args) => html`\n <z-card\n class=\"text-variant-card\"\n variant=\"text\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n style=${styleMap({\n \"--z-card--text-background\": \"var(--color-primary01)\",\n \"--z-card--text-border-radius\": `${args[\"--z-card--text-border-radius\"]}`,\n \"color\": \"var(--color-text-inverse)\",\n })}\n >\n <h2\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </h2>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\">\n <z-icon\n name=\"share\"\n fill=\"color-surface01\"\n ></z-icon>\n </button>\n <button slot=\"action\">\n <z-icon\n name=\"delete\"\n fill=\"color-surface01\"\n ></z-icon>\n </button>\n </z-card>\n `,\n} satisfies Story;\n\nexport const TextVariantSurfaceBackgroundAndBordered = {\n args: {\n \"--z-card--text-border\": \"2px solid var(--gray800)\",\n \"--z-card--text-border-radius\": \"4px\",\n \"--z-card--text-padding\": \"16px 8px\",\n },\n parameters: {\n controls: {\n exclude: [\"variant\"],\n },\n },\n render: (args) =>\n html`<z-card\n class=\"text-variant-card\"\n variant=\"text\"\n .showShadow=\"${args.showShadow}\"\n .clickable=\"${args.clickable}\"\n style=${styleMap({\n \"--z-card--text-background\": `var(--color-surface01)`,\n \"--z-card--text-border\": `${args[\"--z-card--text-border\"]}`,\n \"--z-card--text-border-radius\": `${args[\"--z-card--text-border-radius\"]}`,\n \"--z-card--text-padding\": `${args[\"--z-card--text-padding\"]}`,\n })}\n >\n <h2\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </h2>\n <a\n href=\"https://google.it\"\n target=\"_blank\"\n slot=\"title\"\n >\n <span>Card title</span>\n </a>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\">\n <z-icon\n name=\"share\"\n fill=\"color-primary01\"\n ></z-icon>\n </button>\n <button slot=\"action\">\n <z-icon\n name=\"delete\"\n fill=\"color-primary01\"\n ></z-icon>\n </button>\n </z-card>`,\n} satisfies Story;\n\nexport const WithImageAndClickListener = {\n parameters: {\n controls: {\n exclude: [\"clickable\", \"showShadow\"],\n },\n },\n render: (args) => html`\n <script>\n window.cardClickCount = 0;\n document.getElementById(\"btn-card\").addEventListener(\"click\", (e) => {\n window.cardClickCount = window.cardClickCount + 1;\n const alertBox = document.getElementById(\"click-alert-container\");\n if (!alertBox) {\n return;\n }\n\n alertBox.innerText = \"Card click count: \" + window.cardClickCount;\n });\n </script>\n <z-card\n class=\"demo-card\"\n variant=${args.variant}\n clickable\n >\n <img\n slot=\"cover\"\n src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n />\n <span\n class=\"body-5\"\n slot=\"metadata\"\n >\n metadata\n </span>\n <button\n id=\"btn-card\"\n slot=\"title\"\n >\n <span>Card title</span>\n </button>\n <p\n class=\"body-3\"\n slot=\"text\"\n >\n Some description for the content of the card.\n </p>\n <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n </z-card>\n <div id=\"click-alert-container\">Card click count: 0</div>\n `,\n} satisfies Story;\n"]}

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

@@ -111,8 +111,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
 ::slotted([slot="title"]) {
   margin: 0;
-  color: inherit;
-  font-size: inherit;
+  font-size: var(--font-size-3);
   font-weight: var(--font-sb);
   -webkit-line-clamp: 2;
   line-clamp: 2;

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

@@ -146,10 +146,10 @@ export class ZCarousel {
         });
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b;
         (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
         this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
-        this.resizeObserver.observe(this.itemsContainer);
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.itemsContainer);
         this.setupItems();
         if (this.single) {
             this.setIntersectionObserver();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-carousel/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\n\n/*\n ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @cssprop --z-carousel-items-shadow - The shadow around the items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n /\n@Component({\n tag: \"z-carousel\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCarousel {\n @Element() host: HTMLZCarouselElement;\n\n /* The z-carousel is on loading state /\n @Prop()\n isLoading: boolean;\n\n /* The z-carousel title /\n @Prop()\n label?: string;\n\n /* Shows only one content at a time /\n @Prop({reflect: true})\n single = false;\n\n /* Arrow buttons position /\n @Prop({reflect: true})\n arrowsPosition?: CarouselArrowsPosition;\n\n /* Progress indicator type. Only available for `single` mode /\n @Prop()\n progressMode?: CarouselProgressMode;\n\n /\n Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n * If set to `false`, the arrows will not be visible on mobile.\n * Only meaningful with `arrowsPosition` set to `OVER`.\n /\n @Prop({reflect: true})\n fixedArrows = true;\n\n /* The height of the ghost loader (only visible when `isLoading` is set to `true`) /\n @Prop()\n ghostLoadingHeight = 100;\n\n /* When enabled, navigating next the last item will go back to the first item and vice versa. /\n @Prop()\n infinite = false;\n\n /* Current item index for single mode. /\n @State()\n current = 0;\n\n /* Items on the slider. /\n @State()\n items: HTMLLIElement[];\n\n /* Index of the indicator to highlight. /\n @State()\n highlightedIndicator: number;\n\n @State()\n canNavigatePrev: boolean;\n\n @State()\n canNavigateNext: boolean;\n\n /* Reference for the items container element. /\n protected itemsContainer: HTMLUListElement;\n\n /* Observer that handles current index change when scrolling on single mode. /\n private intersectionObserver: IntersectionObserver;\n\n /* Observer to check if navigation can still be enabled/showed when the size of the items' container changes /\n private resizeObserver: ResizeObserver;\n\n /* Flag indicating the items container is about to scroll programmatically towards the stored index. /\n private scrollingTo: number = null;\n\n /* Emitted on index change and only in `single` mode. /\n @Event()\n indexChange: EventEmitter<{currentItem: number}>;\n\n @Watch(\"current\")\n onIndexChange(): void {\n this.indexChange.emit({currentItem: this.current});\n }\n\n @Watch(\"single\")\n onSingleModeChange(): void {\n if (this.single && !this.intersectionObserver) {\n this.setIntersectionObserver();\n }\n }\n\n @Watch(\"infinite\")\n onInfiniteModeChange(): void {\n this.checkNavigationValidity();\n }\n\n /\n Set an intersection observer to:\n * - highlight the indicator of the intersecting item during scroll\n * - set the current item to the last intersecting item\n /\n private setIntersectionObserver(): void {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n const entry = entries.find(({isIntersecting}) => isIntersecting);\n if (!entry) {\n return;\n }\n\n const entryIndex = this.items.findIndex((item) => item === entry.target);\n this.highlightedIndicator = entryIndex;\n\n / skip setting the current item if intersection has been triggered by a programmatic scroll\n (@see `goTo` function) and the final index has not been reached /\n if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n return;\n }\n\n this.scrollingTo = null;\n this.current = entryIndex;\n },\n {\n root: this.itemsContainer,\n threshold: 0.5,\n }\n );\n\n this.items.forEach((element) => this.intersectionObserver.observe(element));\n }\n\n /* Update items' list and check conditions to allow navigation /\n private onSlotChange(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.checkNavigationValidity();\n this.setIntersectionObserver();\n this.goTo(this.current);\n }\n\n private onPrev(): void {\n if (this.single) {\n this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n return;\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite && this.itemsContainer.scrollLeft == 0\n ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n : -this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n private onNext(): void {\n if (this.single) {\n const next =\n this.infinite && this.current + 1 > this.items.length - 1\n ? 0\n : Math.min(this.current + 1, this.items.length - 1);\n\n return this.goTo(next);\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite &&\n this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n ? -this.itemsContainer.scrollWidth\n : this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Check if navigation buttons can be enabled and set the related local states.\n /\n private checkNavigationValidity(): void {\n if (this.single) {\n this.canNavigatePrev = this.current > 0;\n this.canNavigateNext = this.current < this.items.length - 1;\n\n return;\n }\n\n this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n this.canNavigateNext =\n this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n }\n\n /\n Check if footer has to be rendered.\n /\n private canShowFooter(): boolean {\n if (!this.canNavigatePrev && !this.canNavigateNext) {\n return false;\n }\n\n return (\n this.arrowsPosition === CarouselArrowsPosition.BOTTOM \|\|\n this.progressMode === CarouselProgressMode.DOTS \|\|\n this.progressMode === CarouselProgressMode.NUMBERS\n );\n }\n\n /\n Set current item to passed index.\n * @param index Index to set\n /\n private goTo(index: number): void {\n if (this.current === index) {\n return;\n }\n\n this.scrollingTo = index;\n const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n // the scroll will trigger the IntersectionObserver and set the current item\n this.itemsContainer.scroll({\n left,\n behavior: \"smooth\",\n });\n }\n\n /* Check if navigation of at least one direction is enabled */\n private get canNavigate(): boolean {\n return this.canNavigatePrev \|\| this.canNavigateNext;\n }\n\n private setupItems(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.items.forEach((item) => {\n item.setAttribute(\"aria-roledescription\", \"slide\");\n });\n }\n\n componentDidLoad(): void {\n this.itemsContainer?.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n this.resizeObserver.observe(this.itemsContainer);\n this.setupItems();\n if (this.single) {\n this.setIntersectionObserver();\n }\n this.checkNavigationValidity();\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLDivElement \| HTMLZCarouselElement {\n if (this.isLoading) {\n return (\n <div class=\"z-carousel-container\">\n {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n <div style={{height: `${this.ghostLoadingHeight}px`}}>\n <z-ghost-loading></z-ghost-loading>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div\n class=\"z-carousel-container\"\n aria-roledescription=\"carousel\"\n aria-label={this.label \|\| \"Carousel\"}\n >\n {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n <div class=\"z-carousel-wrapper\">\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"prev\"\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER \|\| !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n <ul\n class=\"z-carousel-items-container\"\n aria-atomic=\"false\"\n aria-live=\"polite\"\n ref={(el) => (this.itemsContainer = el)}\n >\n <slot onSlotchange={this.onSlotChange.bind(this)} />\n </ul>\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"next\"\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER \|\| !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n </div>\n </div>\n\n {this.canShowFooter() && (\n <div class=\"z-carousel-footer\">\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n )}\n {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n <div class=\"dots-progress\">\n {this.items.map((_, index) => (\n <button\n type=\"button\"\n class={{current: this.highlightedIndicator === index}}\n aria-label={\n this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n }\n onClick={() => this.goTo(index)}\n />\n ))}\n </div>\n )}\n {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n <div class=\"numbers-progress interactive-1\">\n <span class=\"current\">{this.current + 1}</span>\n <span>di</span>\n <span>{this.items.length}</span>\n </div>\n )}\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-carousel/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\n\n/*\n ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @cssprop --z-carousel-items-shadow - The shadow around the items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n /\n@Component({\n tag: \"z-carousel\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCarousel {\n @Element() host: HTMLZCarouselElement;\n\n /* The z-carousel is on loading state /\n @Prop()\n isLoading: boolean;\n\n /* The z-carousel title /\n @Prop()\n label?: string;\n\n /* Shows only one content at a time /\n @Prop({reflect: true})\n single = false;\n\n /* Arrow buttons position /\n @Prop({reflect: true})\n arrowsPosition?: CarouselArrowsPosition;\n\n /* Progress indicator type. Only available for `single` mode /\n @Prop()\n progressMode?: CarouselProgressMode;\n\n /\n Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n * If set to `false`, the arrows will not be visible on mobile.\n * Only meaningful with `arrowsPosition` set to `OVER`.\n /\n @Prop({reflect: true})\n fixedArrows = true;\n\n /* The height of the ghost loader (only visible when `isLoading` is set to `true`) /\n @Prop()\n ghostLoadingHeight = 100;\n\n /* When enabled, navigating next the last item will go back to the first item and vice versa. /\n @Prop()\n infinite = false;\n\n /* Current item index for single mode. /\n @State()\n current = 0;\n\n /* Items on the slider. /\n @State()\n items: HTMLLIElement[];\n\n /* Index of the indicator to highlight. /\n @State()\n highlightedIndicator: number;\n\n @State()\n canNavigatePrev: boolean;\n\n @State()\n canNavigateNext: boolean;\n\n /* Reference for the items container element. /\n protected itemsContainer: HTMLUListElement;\n\n /* Observer that handles current index change when scrolling on single mode. /\n private intersectionObserver: IntersectionObserver;\n\n /* Observer to check if navigation can still be enabled/showed when the size of the items' container changes /\n private resizeObserver: ResizeObserver;\n\n /* Flag indicating the items container is about to scroll programmatically towards the stored index. /\n private scrollingTo: number = null;\n\n /* Emitted on index change and only in `single` mode. /\n @Event()\n indexChange: EventEmitter<{currentItem: number}>;\n\n @Watch(\"current\")\n onIndexChange(): void {\n this.indexChange.emit({currentItem: this.current});\n }\n\n @Watch(\"single\")\n onSingleModeChange(): void {\n if (this.single && !this.intersectionObserver) {\n this.setIntersectionObserver();\n }\n }\n\n @Watch(\"infinite\")\n onInfiniteModeChange(): void {\n this.checkNavigationValidity();\n }\n\n /\n Set an intersection observer to:\n * - highlight the indicator of the intersecting item during scroll\n * - set the current item to the last intersecting item\n /\n private setIntersectionObserver(): void {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n const entry = entries.find(({isIntersecting}) => isIntersecting);\n if (!entry) {\n return;\n }\n\n const entryIndex = this.items.findIndex((item) => item === entry.target);\n this.highlightedIndicator = entryIndex;\n\n / skip setting the current item if intersection has been triggered by a programmatic scroll\n (@see `goTo` function) and the final index has not been reached /\n if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n return;\n }\n\n this.scrollingTo = null;\n this.current = entryIndex;\n },\n {\n root: this.itemsContainer,\n threshold: 0.5,\n }\n );\n\n this.items.forEach((element) => this.intersectionObserver.observe(element));\n }\n\n /* Update items' list and check conditions to allow navigation /\n private onSlotChange(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.checkNavigationValidity();\n this.setIntersectionObserver();\n this.goTo(this.current);\n }\n\n private onPrev(): void {\n if (this.single) {\n this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n return;\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite && this.itemsContainer.scrollLeft == 0\n ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n : -this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n private onNext(): void {\n if (this.single) {\n const next =\n this.infinite && this.current + 1 > this.items.length - 1\n ? 0\n : Math.min(this.current + 1, this.items.length - 1);\n\n return this.goTo(next);\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite &&\n this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n ? -this.itemsContainer.scrollWidth\n : this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Check if navigation buttons can be enabled and set the related local states.\n /\n private checkNavigationValidity(): void {\n if (this.single) {\n this.canNavigatePrev = this.current > 0;\n this.canNavigateNext = this.current < this.items.length - 1;\n\n return;\n }\n\n this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n this.canNavigateNext =\n this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n }\n\n /\n Check if footer has to be rendered.\n /\n private canShowFooter(): boolean {\n if (!this.canNavigatePrev && !this.canNavigateNext) {\n return false;\n }\n\n return (\n this.arrowsPosition === CarouselArrowsPosition.BOTTOM \|\|\n this.progressMode === CarouselProgressMode.DOTS \|\|\n this.progressMode === CarouselProgressMode.NUMBERS\n );\n }\n\n /\n Set current item to passed index.\n * @param index Index to set\n /\n private goTo(index: number): void {\n if (this.current === index) {\n return;\n }\n\n this.scrollingTo = index;\n const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n // the scroll will trigger the IntersectionObserver and set the current item\n this.itemsContainer.scroll({\n left,\n behavior: \"smooth\",\n });\n }\n\n /* Check if navigation of at least one direction is enabled */\n private get canNavigate(): boolean {\n return this.canNavigatePrev \|\| this.canNavigateNext;\n }\n\n private setupItems(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.items.forEach((item) => {\n item.setAttribute(\"aria-roledescription\", \"slide\");\n });\n }\n\n componentDidLoad(): void {\n this.itemsContainer?.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n this.resizeObserver?.observe(this.itemsContainer);\n this.setupItems();\n if (this.single) {\n this.setIntersectionObserver();\n }\n this.checkNavigationValidity();\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLDivElement \| HTMLZCarouselElement {\n if (this.isLoading) {\n return (\n <div class=\"z-carousel-container\">\n {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n <div style={{height: `${this.ghostLoadingHeight}px`}}>\n <z-ghost-loading></z-ghost-loading>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div\n class=\"z-carousel-container\"\n aria-roledescription=\"carousel\"\n aria-label={this.label \|\| \"Carousel\"}\n >\n {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n <div class=\"z-carousel-wrapper\">\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"prev\"\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER \|\| !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n <ul\n class=\"z-carousel-items-container\"\n aria-atomic=\"false\"\n aria-live=\"polite\"\n ref={(el) => (this.itemsContainer = el)}\n >\n <slot onSlotchange={this.onSlotChange.bind(this)} />\n </ul>\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"next\"\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER \|\| !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n </div>\n </div>\n\n {this.canShowFooter() && (\n <div class=\"z-carousel-footer\">\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n )}\n {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n <div class=\"dots-progress\">\n {this.items.map((_, index) => (\n <button\n type=\"button\"\n class={{current: this.highlightedIndicator === index}}\n aria-label={\n this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n }\n onClick={() => this.goTo(index)}\n />\n ))}\n </div>\n )}\n {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n <div class=\"numbers-progress interactive-1\">\n <span class=\"current\">{this.current + 1}</span>\n <span>di</span>\n <span>{this.items.length}</span>\n </div>\n )}\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -9,11 +9,11 @@ export class ZChip {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: 'fcd35190df7a13ddacf41430d0b47ab6484110a9', class: {
+        return (h("div", { key: '1bc99f432f17f5eb2233310ac9909cc0ace7dda3', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'd9eb68585be8533bb44ba769b34fa8a7163e17fc', name: this.icon }), h("slot", { key: '7ae9a9993086e2dc0489806bbc79bae8b0db20f7' }), this.interactiveIcon && (h("button", { key: 'e02544ca3661c6527a915bfdaa6578c64d284b6f', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '844d3269ee9f2c0206a4aec3554a4b6581351f10', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '9c77fb017180343a3b6961d1214d0ed1be1f43cd', name: this.icon }), h("slot", { key: '9ab62efb04412491b4ca1a0bb59bc95a898fea43' }), this.interactiveIcon && (h("button", { key: 'e1999e99ff5e31019aa06d7087286e8be0081cae', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '7d2445d7957b94f7959e3a0d0f47985daa170711', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,11 +3,11 @@
   min-height: 28px;
   align-items: center;
   padding: 0 calc(var(--space-unit) * 1.5);
-  border: var(--border-size-small) solid var(--gray400);
+  border: var(--border-size-small) solid var(--color-surface03);
   background-color: var(--color-surface01);
   border-radius: 14px;
   color: var(--color-default-text);
-  fill: var(--color-default-text);
+  fill: var(--color-default-icon);
   font-family: var(--font-family-sans);
   font-size: 14px;
   line-height: 28px;
@@ -29,12 +29,8 @@
   margin-right: calc(var(--space-unit) / 2);
 }
-:host > .z-chip-container:not([aria-disabled]):hover > z-icon:first-child {
-  fill: var(--color-default-icon);
-}
 :host > .z-chip-container .interactive-icon {
-  fill: var(--color-primary01);
+  fill: var(--color-primary01-icon);
 }
 :host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {
@@ -61,7 +57,7 @@
 :host > button:not([disabled]):active:hover .interactive-icon {
   color: var(--color-primary01);
-  fill: var(--color-primary01);
+  fill: var(--color-primary01-icon);
 }
 :host > .z-chip-container > z-icon,

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

@@ -228,10 +228,10 @@ export class ZCombobox {
         return h("ul", { role: "none" }, listGroups);
     }
     renderNoSearchResults() {
-        return (h("ul", { role: "none" }, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
+        return (h("div", { class: "no-results" }, h("z-icon", { name: "multiply-circle" }), h("span", null, this.noresultslabel)));
     }
     renderCloseButton() {
-        return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
+        return (h("div", { class: "close-search" }, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
     }
     renderSearchInput() {
         return (h("z-input", Object.assign({ htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, "aria-autocomplete": "list" }, this.getComboboxA11yAttributes(), { onKeyUp: (e) => {
@@ -251,7 +251,7 @@ export class ZCombobox {
         return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: '69b13355a675561cb0748a743e7509f8b944615e', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '95f645ad7df923046c25f5dd624d977171a8cc59', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {ZMyzListItem} from \"../../snowflakes/myz/list/z-myz-list-item\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* close combobox list text /\n @Prop()\n closesearchtext?: string = \"Chiudi\";\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n @State()\n checkboxes: HTMLInputElement[] = [];\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n @Watch(\"checkboxes\")\n watchCheckboxes(): void {\n this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n componentDidRender(): void {\n const checkboxes = this.getAllCheckboxes();\n if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n this.checkboxes = checkboxes;\n }\n }\n\n private getItemId(item: ComboItem): string {\n return `combo-checkbox-${this.inputid}-${item.id}`;\n }\n\n private getCheckboxClass(): string {\n return `combo-item-checkbox-input-${this.inputid}`;\n }\n\n private getAllCheckboxes(): HTMLInputElement[] {\n return Array.from(\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n ) as HTMLInputElement[];\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n if (!currElem) {\n return;\n }\n\n const checkboxes = this.checkboxes;\n if (!checkboxes.length) {\n return;\n }\n\n const currElemIndex = checkboxes.indexOf(currElem);\n const firstElemIndex = 0;\n const lastElemIndex = checkboxes.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n }\n\n this.focusComboboxItem(nextElem);\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) \|\| (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n }\n\n private handleCheckboxFocus(id: string): void {\n this.focusedItemId = id;\n }\n\n private focusComboboxItem(elem): void {\n this.checkboxes.forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n\n elem.setAttribute(\"tabindex\", \"0\");\n elem.focus();\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(): Record<string, unknown> {\n return {\n \"role\": \"combobox\",\n \"aria-label\": this.label,\n \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n \"aria-controls\": `${this.inputid}_list`,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <p class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </p>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n if (!this.isopen) {\n return;\n }\n\n return (\n <div class=\"open-combo-data\">\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable={true}\n id={`${this.inputid}_list`}\n aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n >\n {this.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div class={this.searchValue && \"search\"}>\n {this.renderList(this.renderItemsList)}\n {this.searchValue && this.renderCloseButton()}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n return (\n <z-list-element\n id={item.id}\n htmlTabindex={null}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={this.getItemId(item)}\n label={item.name}\n class={this.getCheckboxClass()}\n disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={item.checked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n onInputCheck={(e: CustomEvent) => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = e.detail.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"none\">\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const {category} = item;\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n\n return <ul role=\"none\">{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <ul role=\"none\">\n <z-myz-list-item\n id=\"no-results\"\n text={this.noresultslabel}\n listitemid=\"no-results\"\n icon=\"multiply-circle\"\n class={this.size}\n />\n </ul>\n );\n }\n\n private renderCloseButton(): HTMLDivElement {\n return (\n <div>\n <a\n onClick={() => this.closeFilterItems()}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n role=\"button\"\n tabindex={0}\n >\n {this.closesearchtext}\n </a>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes()}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (this.searchValue) {\n return;\n }\n\n const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n return (\n <div class=\"check-all-wrapper\">\n <z-input\n type={InputType.CHECKBOX}\n checked={allChecked}\n htmlid={checkAllId}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={allChecked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAY,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AACvG,OAAO,EAAC,oBAAoB,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAQjE,MAAM,OAAO,SAAS;IA+FpB,UAAU;QACR,IAAI,CAAC,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACtF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;QAC5E,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACpG,CAAC;IAMO,kBAAkB;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAC,CAAC,CAAC;IACtE,CAAC;IAED;QA7BQ,cAAS,GAAgB,EAAE,CAAC;QAE5B,cAAS,GAAc,SAAS,CAAC,IAAI,CAAC;uBAvFpC,SAAS,QAAQ,EAAE,EAAE;;;wBAYV,KAAK;yBAIJ,KAAK;;;;8BAgBD,kBAAkB;sBAInC,KAAK;uBAIJ,KAAK;+BAIY,QAAQ;2BAIX,KAAK;4BAIL,iBAAiB;8BAIf,mBAAmB;iCAIzB,CAAC;;oBAQA,WAAW,CAAC,GAAG;;;+BASL,EAAE;;0BAMA,EAAE;QAgCjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IAC9E,CAAC;IAED,kBAAkB;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC3C,IAAI,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YACnE,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC/B,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,IAAe;QAC/B,OAAO,kBAAkB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;IACrD,CAAC;IAEO,gBAAgB;QACtB,OAAO,6BAA6B,IAAI,CAAC,OAAO,EAAE,CAAC;IACrD,CAAC;IAEO,gBAAgB;QACtB,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CACxE,CAAC;IAC1B,CAAC;IAEO,oBAAoB;QAC1B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,WAAW,CAAC,OAAO;gBACtB,OAAO,QAAQ,CAAC,KAAK,CAAC;YACxB,KAAK,WAAW,CAAC,KAAK;gBACpB,OAAO,QAAQ,CAAC,MAAM,CAAC;YACzB;gBACE,OAAO,QAAQ,CAAC,KAAK,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,4BAA4B,CAAC,CAAgB,EAAE,MAAc;QACnE,IAAI,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACtG,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,MAAM,EAAE,CAAqB,CAAC;QACzF,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,cAAc,GAAG,CAAC,CAAC;QACzB,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAE5C,IAAI,QAAQ,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,EAAE,CAAC;YACtC,QAAQ,GAAG,aAAa,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;QAC1G,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,EAAE,CAAC;YAC3C,QAAQ,GAAG,aAAa,KAAK,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;QAC1G,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAEO,yBAAyB,CAAC,EAAiB;QACjD,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,KAAK,EAAE,CAAC;YAClC,EAAE,CAAC,cAAc,EAAE,CAAC;QACtB,CAAC;QACD,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9G,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,mBAAmB,CAAC,EAAU;QACpC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;IAC1B,CAAC;IAEO,iBAAiB,CAAC,IAAI;QAC5B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,UAAU,IAAI;YACpC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACnC,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAEO,qBAAqB;QAC3B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAEO,oBAAoB;QAC1B,MAAM,eAAe,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAe,EAAE,EAAE;YACzC,eAAe,CAAC,IAAI,mBAAK,IAAI,EAAE,CAAC;QAClC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;IACzC,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;YACnE,MAAM,GAAG,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;YACjC,MAAM,OAAO,GACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;gBAC7B,UAAU;gBACV,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC;gBAC/B,WAAW;gBACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAE7C,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YAEpB,OAAO,KAAK,IAAI,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,QAAQ,CAAC,OAAO,GAAG,IAAI;QAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,EAAE,CAAC,iCACpD,IAAI,KACP,OAAO,EAAE,OAAO,IAChB,CAAC,CAAC;QACJ,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;IAEO,yBAAyB;QAC/B,OAAO;YACL,MAAM,EAAE,UAAU;YAClB,YAAY,EAAE,IAAI,CAAC,KAAK;YACxB,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAC/C,uBAAuB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;YAC9D,eAAe,EAAE,GAAG,IAAI,CAAC,OAAO,OAAO;SACxC,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,OAAO,CACL,WACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,EACpC,SAAS,EAAE,CAAC,EAAiB,EAAE,EAAE;gBAC/B,IAAI,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC;YACrC,CAAC,EACD,OAAO,EAAE,CAAC,EAAiB,EAAE,EAAE,CAAC,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,EAC7E,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAE7C,SAAG,KAAK,EAAC,QAAQ;gBACd,IAAI,CAAC,KAAK;gBACX,gBAAO,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,eAAe,GAAG,CAAQ,CACrE;YACJ,cACE,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACE,CACP,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,iBAAiB;YACzB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1C,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,4BAAU,IAAI,CAAC,yBAAyB,EAAE,EAAI,CAAC,CAAC,CAAC,IAAI;YACxE,WACE,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,KAAK,0BACA,IAAI,EAC1B,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,OAAO,eACf,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAE/D,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;gBACzC,IAAI,CAAC,WAAW,EAAE,CACf,CACF,CACP,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,QAAQ;YACrC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;YACrC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,iBAAiB,EAAE,CACzC,CACP,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,IAAe,EAAE,KAAa,EAAE,MAAc;QAC/D,OAAO,CACL,sBACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,YAAY,EAAE,IAAI,EAClB,WAAW,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,EAClF,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE;YAEjC,eACE,IAAI,EAAE,SAAS,CAAC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,iBAAiB,EACnG,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACvE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC9C,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAC3F,YAAY,EAAE,CAAC,CAAc,EAAE,EAAE;oBAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAY,EAAE,EAAE;wBACnD,IAAI,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;4BACrB,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;wBAC/B,CAAC;wBAED,OAAO,CAAC,CAAC;oBACX,CAAC,CAAC,CAAC;oBACH,IAAI,CAAC,qBAAqB,EAAE,CAAC;oBAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC5B,CAAC,EACD,YAAY,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,GACvE,CACa,CAClB,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,KAAkB;QACnC,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACtC,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CACL,UAAI,IAAI,EAAC,MAAM,IACZ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACrB,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC,CAAC,CACC,CACN,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;;YAClD,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC;YACxB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAE7D,KAAK,CAAC,QAAQ,CAAC,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,mCAAI,EAAE,CAAC;YACxC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAEhC,OAAO,KAAK,CAAC;QACf,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAqD,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAC5G,OAAO,CACL,oCAA4B,eAAe,CAAC,OAAO;gBACjD,YACE,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,cAAc,IAElB,GAAG,CACC;gBACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CACb,CAChB,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,UAAI,IAAI,EAAC,MAAM,IAAE,UAAU,CAAM,CAAC;IAC3C,CAAC;IAEO,qBAAqB;QAC3B,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;YACrB,cAAQ,IAAI,EAAC,iBAAiB,GAAG;YACjC,gBAAO,IAAI,CAAC,cAAc,CAAQ,CAC9B,CACP,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,CACL,WAAK,KAAK,EAAC,cAAc;YACvB,SACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EACtC,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,oBAAoB,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,EAC7E,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,eAAe,CACnB,CACA,CACP,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,CACL,6BACE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,OAAO,EAAE,KAAK,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,uBACG,MAAM,IACpB,IAAI,CAAC,yBAAyB,EAAE,IACpC,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;gBAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG,EAAE,CAAC;oBAC/B,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC1B,CAAC;YACH,CAAC,EACD,aAAa,EAAE,CAAC,CAAc,EAAE,EAAE;gBAChC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YACpC,CAAC,IACD,CACH,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,kBAAkB,IAAI,CAAC,OAAO,YAAY,CAAC;QAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;QAElE,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;YAC5B,eACE,IAAI,EAAE,SAAS,CAAC,QAAQ,EACxB,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAC3D,QAAQ,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAClF,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACvE,IAAI,EAAC,QAAQ,mBACE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC5C,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC,EAAE,UAAU,CAAC,EACjF,YAAY,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACjE,YAAY,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,GACvE,CACE,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,2EACe,SAAS,IAAI,CAAC,OAAO,EAAE,EACpC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EACxE,EAAE,EAAE,IAAI,CAAC,OAAO;YAEf,IAAI,CAAC,YAAY,EAAE;YACnB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE,CACnC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* close combobox list text /\n @Prop()\n closesearchtext?: string = \"Chiudi\";\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n @State()\n checkboxes: HTMLInputElement[] = [];\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n @Watch(\"checkboxes\")\n watchCheckboxes(): void {\n this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n componentDidRender(): void {\n const checkboxes = this.getAllCheckboxes();\n if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n this.checkboxes = checkboxes;\n }\n }\n\n private getItemId(item: ComboItem): string {\n return `combo-checkbox-${this.inputid}-${item.id}`;\n }\n\n private getCheckboxClass(): string {\n return `combo-item-checkbox-input-${this.inputid}`;\n }\n\n private getAllCheckboxes(): HTMLInputElement[] {\n return Array.from(\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n ) as HTMLInputElement[];\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n if (!currElem) {\n return;\n }\n\n const checkboxes = this.checkboxes;\n if (!checkboxes.length) {\n return;\n }\n\n const currElemIndex = checkboxes.indexOf(currElem);\n const firstElemIndex = 0;\n const lastElemIndex = checkboxes.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n }\n\n this.focusComboboxItem(nextElem);\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) \|\| (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n }\n\n private handleCheckboxFocus(id: string): void {\n this.focusedItemId = id;\n }\n\n private focusComboboxItem(elem): void {\n this.checkboxes.forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n\n elem.setAttribute(\"tabindex\", \"0\");\n elem.focus();\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(): Record<string, string> {\n return {\n \"role\": \"combobox\",\n \"aria-label\": this.label,\n \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n \"aria-controls\": `${this.inputid}_list`,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <p class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </p>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n if (!this.isopen) {\n return;\n }\n\n return (\n <div class=\"open-combo-data\">\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable={true}\n id={`${this.inputid}_list`}\n aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n >\n {this.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div class={this.searchValue && \"search\"}>\n {this.renderList(this.renderItemsList)}\n {this.searchValue && this.renderCloseButton()}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n return (\n <z-list-element\n id={item.id}\n htmlTabindex={null}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={this.getItemId(item)}\n label={item.name}\n class={this.getCheckboxClass()}\n disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={item.checked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n onInputCheck={(e: CustomEvent) => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = e.detail.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"none\">\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const {category} = item;\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n\n return <ul role=\"none\">{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <z-icon name=\"multiply-circle\" />\n <span>{this.noresultslabel}</span>\n </div>\n );\n }\n\n private renderCloseButton(): HTMLDivElement {\n return (\n <div class=\"close-search\">\n <a\n onClick={() => this.closeFilterItems()}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n role=\"button\"\n tabindex={0}\n >\n {this.closesearchtext}\n </a>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes()}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (this.searchValue) {\n return;\n }\n\n const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n return (\n <div class=\"check-all-wrapper\">\n <z-input\n type={InputType.CHECKBOX}\n checked={allChecked}\n htmlid={checkAllId}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={allChecked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"]}