npm - @zanichelli/albe-web-components - Versions diffs - 16.0.0 → 16.1.0-rc2 - Mend

@zanichelli/albe-web-components 16.0.0 → 16.1.0-rc2

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

package/dist/collection/components/z-button-sort/test.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-button-sort/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;IAClE,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,EAAC,IAAI,EAAE,iCAAiC,EAAC,CAAC,CAAC;IACzE,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IACxD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE5D,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAClB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,yBAAyB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;IAE9D,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAClB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,yBAAyB,CAAC,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC,CAAC;AACjE,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\nit(\"Test ZButtonSort should emit buttonSortClick event\", async () => {\n const page = await newE2EPage({html: \"<z-button-sort></z-button-sort>\"});\n const btn = await page.find(\"z-button-sort >>> button\");\n const clickEvent = await page.spyOnEvent(\"buttonSortClick\");\n\n await btn.click();\n await page.waitForChanges();\n expect(clickEvent).toHaveReceivedEventDetail({sortAsc: true});\n\n await btn.click();\n await page.waitForChanges();\n expect(clickEvent).toHaveReceivedEventDetail({sortAsc: false});\n});\n"]}
1	+ {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-button-sort/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;IAClE,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,EAAC,IAAI,EAAE,iCAAiC,EAAC,CAAC,CAAC;IACzE,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IACxD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE5D,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAClB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,yBAAyB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;IAE9D,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAClB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,yBAAyB,CAAC,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC,CAAC;AACjE,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;IAC7E,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;QAC5B,IAAI,EAAE,2GAA2G;KAClH,CAAC,CAAC;IACH,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IACxD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,wCAAwC,CAAC,CAAC;IAE1E,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAClB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,yBAAyB,CAAC,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAE1C,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAClB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,yBAAyB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;IAC9D,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;AAC3C,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\nit(\"Test ZButtonSort should emit buttonSortClick event\", async () => {\n const page = await newE2EPage({html: \"<z-button-sort></z-button-sort>\"});\n const btn = await page.find(\"z-button-sort >>> button\");\n const clickEvent = await page.spyOnEvent(\"buttonSortClick\");\n\n await btn.click();\n await page.waitForChanges();\n expect(clickEvent).toHaveReceivedEventDetail({sortAsc: true});\n\n await btn.click();\n await page.waitForChanges();\n expect(clickEvent).toHaveReceivedEventDetail({sortAsc: false});\n});\n\nit(\"changes button label on click based on sortAsc event property\", async () => {\n const page = await newE2EPage({\n html: '<z-button-sort label=\"ascending\" desclabel=\"descending\" sortasc=\"true\" isselected=\"true\"></z-button-sort>',\n });\n const btn = await page.find(\"z-button-sort >>> button\");\n const clickEvent = await page.spyOnEvent(\"buttonSortClick\");\n const btnText = await page.find(\"z-button-sort >>> button span.ellipsis\");\n\n await btn.click();\n await page.waitForChanges();\n expect(clickEvent).toHaveReceivedEventDetail({sortAsc: false});\n expect(btnText).toEqualText(\"descending\");\n\n await btn.click();\n await page.waitForChanges();\n expect(clickEvent).toHaveReceivedEventDetail({sortAsc: true});\n expect(btnText).toEqualText(\"ascending\");\n});\n"]}

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

@@ -37,20 +37,20 @@ export class ZCard {
         ];
     }
     /**
-     * Template for the content div.
+     * Template for the content.
      */
-    renderContentDiv() {
+    renderContent() {
         return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
     }
     render() {
         if (this.variant === CardVariant.TEXT) {
-            return h(Host, null, this.renderContentDiv());
+            return h(Host, null, this.renderContent());
         }
         if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
             return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
                 h("slot", { name: "cover" }),
                 this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
-            ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
+            ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContent()));
         }
         return h(Host, null, this.renderColorCoverCard());
     }
@@ -138,7 +138,7 @@ export class ZCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable 'clickable' style like hover and focus style."
+                    "text": "Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc."
                 },
                 "attribute": "clickable",
                 "reflect": true,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAExC;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,KAAK;;;;0BAeH,KAAK;yBAIN,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,CAAC;IAED;;;OAGG;IACK,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,aAAa;oBACtB,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,UAAU,GAAQ;wBAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,WAAK,KAAK,EAAC,SAAS;oBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,~~gBAAgB~~;~~QACtB~~,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YAClB,YAAM,IAAI,EAAC,UAAU,GAAQ;YAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ;YACzB,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE,CAAC;YACtC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,~~gBAAgB~~,EAAE,CAAQ,CAAC;~~QAChD~~,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC/D,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,KAAK,EAAC,iBAAiB;oBACzB,IAAI,CAAC,aAAa,IAAI;wBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;wBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;qBAClG;oBACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD;gBACL,IAAI,CAAC,~~gBAAgB~~,EAAE,~~CACnB~~,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;IACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/*\n ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n /\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard {\n /\n Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n /\n @Prop({reflect: true})\n variant: CardVariant;\n\n /* Name of the icon to place over the image cover /\n @Prop()\n coverIcon: string;\n\n /* Enable shadow. Default: false. /\n @Prop({reflect: true})\n showShadow = false;\n\n /* Enable 'clickable' ~~style~~ like hover and focus ~~style~~. /\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /\n Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n /\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /\n Template for the content ~~div~~.\n */\n private ~~renderContentDiv~~(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.~~renderContentDiv~~()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY \|\| this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.~~renderContentDiv~~()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAExC;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,KAAK;;;;0BAeH,KAAK;yBAIN,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,CAAC;IAED;;;OAGG;IACK,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,aAAa;oBACtB,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,UAAU,GAAQ;wBAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,WAAK,KAAK,EAAC,SAAS;oBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YAClB,YAAM,IAAI,EAAC,UAAU,GAAQ;YAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ;YACzB,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE,CAAC;YACtC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;QAC7C,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC/D,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,KAAK,EAAC,iBAAiB;oBACzB,IAAI,CAAC,aAAa,IAAI;wBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;wBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;qBAClG;oBACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD;gBACL,IAAI,CAAC,aAAa,EAAE,CAChB,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;IACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/*\n ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n /\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard {\n /\n Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n /\n @Prop({reflect: true})\n variant: CardVariant;\n\n /* Name of the icon to place over the image cover /\n @Prop()\n coverIcon: string;\n\n /* Enable shadow. Default: false. /\n @Prop({reflect: true})\n showShadow = false;\n\n /* Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc. /\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /\n Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n /\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /\n Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY \|\| this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"]}

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

@@ -107,15 +107,14 @@ describe("Suite test ZCard", () => {
       </z-card>
     `);
     });
-    it("Test ZCard text variant", async () => {
+    it("Test render ZCard text variant", async () => {
         const page = await newSpecPage({
             components: [ZCard],
             html: `
         <z-card clickable variant="text" showshadow style="border: 1px solid black;">
           <h2 class="body-5" slot="metadata">metadata</h2>
           <h3 slot="title">Card title</h3>
-          <p class="body-3" slot="text">Some description for the content of the card. </p>
+          <p class="body-3" slot="text">Some description for the content of the card.</p>
           <z-icon name="share" slot="action" fill="color-primary01"></z-icon>
           <z-icon name="delete" slot="action" fill="color-primary01"></z-icon>
         </z-card>
@@ -135,16 +134,16 @@ describe("Suite test ZCard", () => {
         </mock:shadow-root>
         <h2 class="body-5" slot="metadata">metadata</h2>
         <h3 slot="title">Card title</h3>
-        <p class="body-3" slot="text">Some description for the content of the card. </p>
+        <p class="body-3" slot="text">Some description for the content of the card.</p>
         <z-icon name="share" slot="action" fill="color-primary01"></z-icon>
         <z-icon name="delete" slot="action" fill="color-primary01"></z-icon>
       </z-card>
     `);
     });
-    it("Test ZCard clickable click", async () => {
+    it("Test ZCard click", async () => {
         const page = await newSpecPage({
             components: [ZCard],
-            html: `<z-card>
+            html: `<z-card clickable>
         <h2 class="body-5" slot="metadata">metadata</h2>
         <button id="btn" slot="title">Card title</button>
         <p class="body-3" slot="text">Description</p>
@@ -152,9 +151,29 @@ describe("Suite test ZCard", () => {
         });
         const btn = page.body.querySelector("#btn");
         const buttonClickedCallback = jest.fn();
-        page.doc.addEventListener("click", buttonClickedCallback);
+        btn.addEventListener("click", buttonClickedCallback);
         btn.click();
         expect(buttonClickedCallback).toHaveBeenCalled();
     });
+    it("Should trigger the slotted action listener but not the one for ZCard", async () => {
+        const page = await newSpecPage({
+            components: [ZCard],
+            html: `<z-card>
+        <h2 class="body-5" slot="metadata">metadata</h2>
+        <button id="btn" slot="title">Card title</button>
+        <p class="body-3" slot="text">Description</p>
+        <button id="action-btn" slot="action"><z-icon name="gear" /></button>
+      </z-card>`,
+        });
+        const btn = page.body.querySelector("#btn");
+        const onCardClick = jest.fn();
+        const action = page.body.querySelector("#action-btn");
+        const onActionClick = jest.fn();
+        btn.addEventListener("click", onCardClick);
+        action.addEventListener("click", onActionClick);
+        action.click();
+        expect(onActionClick).toHaveBeenCalled();
+        expect(onCardClick).not.toHaveBeenCalled();
+    });
 });
 //# sourceMappingURL=index.spec.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-card/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;;;;gBAOI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;;;;gBAOI;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;gBAII;SACX,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,~~yBAAyB~~,EAAE,KAAK,IAAI,EAAE;~~QACvC~~,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE~~;;;;;;;;;OASL~~;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;KAkB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,~~4BAA4B~~,EAAE,KAAK,IAAI,EAAE;~~QAC1C~~,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;gBAII;SACX,CAAC,CAAC;QAEH,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAsB,CAAC;QACjE,MAAM,qBAAqB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACxC,~~IAAI,CAAC,~~GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC;~~QAC1D~~,GAAG,CAAC,KAAK,EAAE,CAAC;QAEZ,MAAM,CAAC,qBAAqB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZCard} from \"./index\";\n\ndescribe(\"Suite test ZCard\", () => {\n it(\"Test render ZCard with cover\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `<z-card>\n <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n <z-icon name=\"share\" slot=\"action\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\"></z-icon>\n </z-card>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-card>\n <mock:shadow-root>\n <div class=\"cover-container\">\n <slot name=\"cover\"></slot>\n </div>\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n <z-icon name=\"share\" slot=\"action\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\"></z-icon>\n </z-card>\n `);\n });\n\n it(\"Test render ZCard with cover and icon\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `<z-card cover-icon=\"play-filled\">\n <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n <z-icon name=\"share\" slot=\"action\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\"></z-icon>\n </z-card>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-card cover-icon=\"play-filled\">\n <mock:shadow-root>\n <div class=\"cover-container\">\n <slot name=\"cover\"></slot>\n <z-icon name=\"play-filled\"></z-icon>\n </div>\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n <z-icon name=\"share\" slot=\"action\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\"></z-icon>\n </z-card>\n `);\n });\n\n it(\"Test render ZCard with color cover\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `<z-card>\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n </z-card>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-card>\n <mock:shadow-root>\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n </z-card>\n `);\n });\n\n it(\"Test ZCard text variant\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `\n <z-card clickable variant=\"text\" showshadow style=\"border: 1px solid black;\">\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Some description for the content of the card~~. </~~p>\n\n <z-icon name=\"share\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n </z-card>\n `,\n });\n\n expect(page.root).toEqualHtml(`\n <z-card clickable variant=\"text\" showshadow style=\"border: 1px solid black;\">\n <mock:shadow-root>\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Some description for the content of the card~~. </~~p>\n <z-icon name=\"share\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n </z-card>\n `);\n });\n\n it(\"Test ZCard ~~clickable~~ click\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `<z-card>\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <button id=\"btn\" slot=\"title\">Card title</button>\n <p class=\"body-3\" slot=\"text\">Description</p>\n </z-card>`,\n });\n\n const btn = page.body.querySelector(\"#btn\") as HTMLButtonElement;\n const buttonClickedCallback = jest.fn();\n ~~page~~.~~doc.~~addEventListener(\"click\", buttonClickedCallback);\n btn.click();\n\n expect(buttonClickedCallback).toHaveBeenCalled();\n });\n});\n"]}
1	+ {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-card/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZCard} from \"./index\";\n\ndescribe(\"Suite test ZCard\", () => {\n it(\"Test render ZCard with cover\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `<z-card>\n <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n <z-icon name=\"share\" slot=\"action\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\"></z-icon>\n </z-card>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-card>\n <mock:shadow-root>\n <div class=\"cover-container\">\n <slot name=\"cover\"></slot>\n </div>\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n <z-icon name=\"share\" slot=\"action\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\"></z-icon>\n </z-card>\n `);\n });\n\n it(\"Test render ZCard with cover and icon\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `<z-card cover-icon=\"play-filled\">\n <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n <z-icon name=\"share\" slot=\"action\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\"></z-icon>\n </z-card>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-card cover-icon=\"play-filled\">\n <mock:shadow-root>\n <div class=\"cover-container\">\n <slot name=\"cover\"></slot>\n <z-icon name=\"play-filled\"></z-icon>\n </div>\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n <img slot=\"cover\" src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\" />\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n <z-icon name=\"share\" slot=\"action\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\"></z-icon>\n </z-card>\n `);\n });\n\n it(\"Test render ZCard with color cover\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `<z-card>\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n </z-card>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-card>\n <mock:shadow-root>\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Description</p>\n </z-card>\n `);\n });\n\n it(\"Test render ZCard text variant\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `\n <z-card clickable variant=\"text\" showshadow style=\"border: 1px solid black;\">\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Some description for the content of the card.</p>\n <z-icon name=\"share\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n </z-card>\n `,\n });\n\n expect(page.root).toEqualHtml(`\n <z-card clickable variant=\"text\" showshadow style=\"border: 1px solid black;\">\n <mock:shadow-root>\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </mock:shadow-root>\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <h3 slot=\"title\">Card title</h3>\n <p class=\"body-3\" slot=\"text\">Some description for the content of the card.</p>\n <z-icon name=\"share\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n <z-icon name=\"delete\" slot=\"action\" fill=\"color-primary01\"></z-icon>\n </z-card>\n `);\n });\n\n it(\"Test ZCard click\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `<z-card clickable>\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <button id=\"btn\" slot=\"title\">Card title</button>\n <p class=\"body-3\" slot=\"text\">Description</p>\n </z-card>`,\n });\n\n const btn = page.body.querySelector(\"#btn\") as HTMLButtonElement;\n const buttonClickedCallback = jest.fn();\n btn.addEventListener(\"click\", buttonClickedCallback);\n btn.click();\n\n expect(buttonClickedCallback).toHaveBeenCalled();\n });\n\n it(\"Should trigger the slotted action listener but not the one for ZCard\", async () => {\n const page = await newSpecPage({\n components: [ZCard],\n html: `<z-card>\n <h2 class=\"body-5\" slot=\"metadata\">metadata</h2>\n <button id=\"btn\" slot=\"title\">Card title</button>\n <p class=\"body-3\" slot=\"text\">Description</p>\n <button id=\"action-btn\" slot=\"action\"><z-icon name=\"gear\" /></button>\n </z-card>`,\n });\n\n const btn = page.body.querySelector(\"#btn\") as HTMLButtonElement;\n const onCardClick = jest.fn();\n const action = page.body.querySelector(\"#action-btn\") as HTMLButtonElement;\n const onActionClick = jest.fn();\n btn.addEventListener(\"click\", onCardClick);\n action.addEventListener(\"click\", onActionClick);\n action.click();\n\n expect(onActionClick).toHaveBeenCalled();\n expect(onCardClick).not.toHaveBeenCalled();\n });\n});\n"]}

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

@@ -248,19 +248,29 @@ export const TextVariantWhiteBackgroundAndBordered = {
       </button>
     </z-card>`,
 };
-export const WithImageAndClick = {
+export const WithImageAndClickListener = {
+    parameters: {
+        controls: {
+            exclude: ["clickable", "showShadow"],
+        },
+    },
     render: (args) => html `
     <script>
+      window.cardClickCount = 0;
       document.getElementById("btn-card").addEventListener("click", (e) => {
-        // emit event, do stuff
-        alert("Click on card");
+        window.cardClickCount = window.cardClickCount + 1;
+        const alertBox = document.getElementById("click-alert-container");
+        if (!alertBox) {
+          return;
+        }
+        alertBox.innerText = "Card click count: " + window.cardClickCount;
       });
     </script>
     <z-card
       class="demo-card"
-      .variant="${args.variant}"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
+      variant=${args.variant}
+      clickable
     >
       <img
         slot="cover"
@@ -287,6 +297,7 @@ export const WithImageAndClick = {
       <button slot="action"><z-icon name="share"></z-icon></button>
       <button slot="action"><z-icon name="delete"></z-icon></button>
     </z-card>
+    <div id="click-alert-container">Card click count: 0</div>
   `,
 };
 //# sourceMappingURL=index.stories.js.map

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 WithImageAndClick = {\n render: (args) => html`\n <script>\n document.getElementById(\"btn-card\").addEventListener(\"click\", (e) => {\n // emit event, do stuff\n alert(\"Click on card\");\n });\n </script>\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 <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 `,\n} satisfies Story;\n"]}
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"]}

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

@@ -23,6 +23,11 @@ respecting the grid indications of the design. */
   box-sizing: border-box;
 }
+*:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
 :host(:not([variant="overlay"])) .cover-container {
   position: relative;
   width: 100%;
@@ -100,6 +105,7 @@ Unfortunately the `aspect-ratio` property is still experimental */
 ::slotted([slot="metadata"]:not(:last-child)) {
   margin: 0 0 calc(var(--space-unit) * 0.25);
   -webkit-line-clamp: 1;
+  line-clamp: 1;
   text-transform: uppercase;
 }
@@ -109,17 +115,19 @@ Unfortunately the `aspect-ratio` property is still experimental */
   font-size: inherit;
   font-weight: var(--font-sb);
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   text-decoration: none;
 }
-::slotted([slot="title"]:focus) {
+::slotted([slot="title"]:focus:focus-visible) {
   box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
+  outline: none;
 }
 ::slotted([slot="text"]) {
   margin: 0;
   -webkit-line-clamp: 3;
+  line-clamp: 3;
 }
 .actions {

package/dist/collection/components/z-chip/test.e2e.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { newE2EPage } from "@stencil/core/testing";
+it("Clicks on chip component, not on the interactive icon", async () => {
+    const page = await newE2EPage({
+        html: '<z-chip type="default" icon="pdf" disabled="false" interactive-icon="multiply-circled">chip text</z-chip>',
+    });
+    const chip = await page.find("z-chip");
+    const clickEvent = await page.spyOnEvent("interactiveIconClick");
+    await chip.click();
+    await page.waitForChanges();
+    expect(clickEvent).not.toHaveReceivedEvent();
+});
+it("Clicks on chip interactive icon", async () => {
+    const page = await newE2EPage({
+        html: '<z-chip type="default" icon="pdf" disabled="false" interactive-icon="multiply-circled">chip text</z-chip>',
+    });
+    const chipIcon = await page.find("z-chip .interactive-icon");
+    const clickEvent = await page.spyOnEvent("interactiveIconClick");
+    await chipIcon.click();
+    await page.waitForChanges();
+    expect(clickEvent).toHaveReceivedEvent();
+});
+it("Clicks on chip interactive icon when disabled", async () => {
+    const page = await newE2EPage({
+        html: '<z-chip type="default" icon="pdf" disabled="true" interactive-icon="multiply-circled">chip text</z-chip>',
+    });
+    const chipIcon = await page.find("z-chip .interactive-icon");
+    const clickEvent = await page.spyOnEvent("interactiveIconClick");
+    await chipIcon.click();
+    await page.waitForChanges();
+    expect(clickEvent).not.toHaveReceivedEvent();
+});
+//# sourceMappingURL=test.e2e.js.map

package/dist/collection/components/z-chip/test.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-chip/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;IACrE,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;QAC5B,IAAI,EAAE,2GAA2G;KAClH,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACjE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;IAEnB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;IAC/C,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;QAC5B,IAAI,EAAE,2GAA2G;KAClH,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC7D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACjE,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;IAEvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,mBAAmB,EAAE,CAAC;AAC3C,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;IAC7D,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;QAC5B,IAAI,EAAE,0GAA0G;KACjH,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC7D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACjE,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;IAEvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\nit(\"Clicks on chip component, not on the interactive icon\", async () => {\n const page = await newE2EPage({\n html: '<z-chip type=\"default\" icon=\"pdf\" disabled=\"false\" interactive-icon=\"multiply-circled\">chip text</z-chip>',\n });\n const chip = await page.find(\"z-chip\");\n const clickEvent = await page.spyOnEvent(\"interactiveIconClick\");\n await chip.click();\n\n await page.waitForChanges();\n expect(clickEvent).not.toHaveReceivedEvent();\n});\n\nit(\"Clicks on chip interactive icon\", async () => {\n const page = await newE2EPage({\n html: '<z-chip type=\"default\" icon=\"pdf\" disabled=\"false\" interactive-icon=\"multiply-circled\">chip text</z-chip>',\n });\n const chipIcon = await page.find(\"z-chip .interactive-icon\");\n const clickEvent = await page.spyOnEvent(\"interactiveIconClick\");\n await chipIcon.click();\n\n await page.waitForChanges();\n expect(clickEvent).toHaveReceivedEvent();\n});\n\nit(\"Clicks on chip interactive icon when disabled\", async () => {\n const page = await newE2EPage({\n html: '<z-chip type=\"default\" icon=\"pdf\" disabled=\"true\" interactive-icon=\"multiply-circled\">chip text</z-chip>',\n });\n const chipIcon = await page.find(\"z-chip .interactive-icon\");\n const clickEvent = await page.spyOnEvent(\"interactiveIconClick\");\n await chipIcon.click();\n\n await page.waitForChanges();\n expect(clickEvent).not.toHaveReceivedEvent();\n});\n"]}

package/dist/collection/components/z-combobox/test.e2e.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { newE2EPage } from "@stencil/core/testing";
+const items = [
+    { id: "ite_m_1", name: "First item", checked: false, category: "Gruppo 1" },
+    { id: "ite_m_2", name: "Second item", checked: false, category: "Gruppo 1" },
+    { id: "it_em_3", name: "Other item", checked: false, category: "Gruppo 2" },
+    { id: "it_e_m_5", name: "Last item", checked: false, category: "Gruppo 3" },
+];
+it("Tests z-combobox search", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <z-combobox
+      checkalltext="Select all"
+      closesearchtext="Close"
+      hascheckall="true"
+      hassearch="true"
+      inputid="combo_1"
+      isfixed="true"
+      isopen="true"
+      items='${JSON.stringify(items)}'
+      label="Combobox Label"
+      maxcheckableitems="4"
+      hasgroupitems="false"
+      noresultslabel="No items"
+      searchlabel="Search Label"
+      searchplaceholder="Search Placeholder"
+      searchtitle="Search Title"
+      uncheckalltext="Uncheck All"
+    />
+  `);
+    const input = await page.find("z-combobox >>> z-input input");
+    const listbox = await page.find("z-combobox >>> #combo_1_list");
+    const listElements = await listbox.findAll("z-list-element");
+    expect(listElements.map(({ id }) => id)).toEqual(items.map(({ id }) => id));
+    await input.type(items[0].name);
+    await page.waitForChanges();
+    const filteredListElems = await listbox.findAll("z-list-element");
+    expect(filteredListElems.map(({ id }) => id)).toEqual([items[0].id]);
+    const clickEvent = await page.spyOnEvent("comboboxChange");
+    const checkbox = await filteredListElems[0].find("z-input div input");
+    console.log(checkbox);
+    await checkbox.click();
+    await page.waitForChanges();
+    expect(clickEvent).toHaveReceivedEvent();
+});
+//# sourceMappingURL=test.e2e.js.map

package/dist/collection/components/z-combobox/test.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,MAAM,KAAK,GAAG;IACZ,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;IACzE,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;IAC1E,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;IACzE,EAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;CAC1E,CAAC;AAEF,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;;eAST,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;;;;;;;;;GAUjC,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,MAAM,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAExE,MAAM,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,iBAAiB,GAAG,MAAM,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAElE,MAAM,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAEnE,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,MAAM,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACtE,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACtB,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;IACvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,UAAU,CAAC,CAAC,mBAAmB,EAAE,CAAC;AAC3C,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\nconst items = [\n {id: \"ite_m_1\", name: \"First item\", checked: false, category: \"Gruppo 1\"},\n {id: \"ite_m_2\", name: \"Second item\", checked: false, category: \"Gruppo 1\"},\n {id: \"it_em_3\", name: \"Other item\", checked: false, category: \"Gruppo 2\"},\n {id: \"it_e_m_5\", name: \"Last item\", checked: false, category: \"Gruppo 3\"},\n];\n\nit(\"Tests z-combobox search\", async () => {\n const page = await newE2EPage();\n await page.setContent(`\n <z-combobox\n checkalltext=\"Select all\"\n closesearchtext=\"Close\"\n hascheckall=\"true\"\n hassearch=\"true\"\n inputid=\"combo_1\"\n isfixed=\"true\"\n isopen=\"true\"\n items='${JSON.stringify(items)}'\n label=\"Combobox Label\"\n maxcheckableitems=\"4\"\n hasgroupitems=\"false\"\n noresultslabel=\"No items\"\n searchlabel=\"Search Label\"\n searchplaceholder=\"Search Placeholder\"\n searchtitle=\"Search Title\"\n uncheckalltext=\"Uncheck All\"\n />\n `);\n\n const input = await page.find(\"z-combobox >>> z-input input\");\n const listbox = await page.find(\"z-combobox >>> #combo_1_list\");\n const listElements = await listbox.findAll(\"z-list-element\");\n expect(listElements.map(({id}) => id)).toEqual(items.map(({id}) => id));\n\n await input.type(items[0].name);\n await page.waitForChanges();\n const filteredListElems = await listbox.findAll(\"z-list-element\");\n\n expect(filteredListElems.map(({id}) => id)).toEqual([items[0].id]);\n\n const clickEvent = await page.spyOnEvent(\"comboboxChange\");\n\n const checkbox = await filteredListElems[0].find(\"z-input div input\");\n console.log(checkbox);\n await checkbox.click();\n await page.waitForChanges();\n\n expect(clickEvent).toHaveReceivedEvent();\n});\n"]}

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

@@ -16,7 +16,6 @@ export class ZSearchbar {
         this.autocomplete = false;
         this.autocompleteMinChars = 3;
         this.resultsCount = undefined;
-        this.resultsEllipsis = true;
         this.searchHelperLabel = "Cerca {searchString}";
         this.resultsItems = undefined;
         this.sortResultsItems = false;
@@ -192,7 +191,7 @@ export class ZSearchbar {
         return listGroups;
     }
     renderItem(item, key, divider) {
-        return (h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, role: "option", tabindex: 0, dividerType: divider ? ListDividerType.ELEMENT : undefined, clickable: true, onClickItem: () => this.emitSearchItemClick(item) }, h("div", { class: "list-element" }, h("span", { class: { "item": true, "ellipsis": this.resultsEllipsis, "has-category": !!item.category } }, (item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) })), (item === null || item === void 0 ? void 0 : item.tag) && h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : ""))));
+        return (h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, role: "option", tabindex: 0, dividerType: divider ? ListDividerType.ELEMENT : undefined }, h("div", { class: "list-element", onClick: () => this.emitSearchItemClick(item) }, h("span", { class: "item ellipsis" }, (item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) })), (item === null || item === void 0 ? void 0 : item.tag) && h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), item.children && item.children.length > 0 ? (h("z-list", null, h("div", { class: "children-node" }, item.children.map((child, index) => this.renderItem(child, index, false))))) : null));
     }
     renderItemLabel(label) {
         if (!this.searchString) {
@@ -223,7 +222,7 @@ export class ZSearchbar {
         return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
     }
     render() {
-        return (h(Host, { key: 'af318a5b693c0048c368776744d9090bdebe6c8c', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'aba6d0bd87ba308a8f664ca5f86e5d0b96c734af', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '9e8e62ecafdfd6f8a26c88ae89de0af9ae888bb3', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '19ea613b5434d4ceb27402c47f00e58ba2661859', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
     }
     static get is() { return "z-searchbar"; }
     static get encapsulation() { return "shadow"; }
@@ -362,24 +361,6 @@ export class ZSearchbar {
                 "attribute": "results-count",
                 "reflect": false
             },
-            "resultsEllipsis": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Truncate results to single row"
-                },
-                "attribute": "results-ellipsis",
-                "reflect": false,
-                "defaultValue": "true"
-            },
             "searchHelperLabel": {
                 "type": "string",
                 "mutable": false,
@@ -576,7 +557,7 @@ export class ZSearchbar {
                 },
                 "complexType": {
                     "original": "SearchbarItem",
-                    "resolved": "{ label: string; id?: string; icon?: string; tag?: { icon?: string; text: string; }; category?: string; subcategory?: string; }",
+                    "resolved": "{ label: string; id?: string; icon?: string; tag?: { icon?: string; text: string; }; category?: string; subcategory?: string; children?: Omit<SearchbarItem, \"category\" | \"subcategory\">[]; }",
                     "references": {
                         "SearchbarItem": {
                             "location": "import",