npm - @zanichelli/albe-web-components - Versions diffs - 16.0.0 → 16.2.0-rc - Mend

@zanichelli/albe-web-components 16.0.0 → 16.2.0-rc

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

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":"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,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;;;;;OAQL;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;KAkB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;QAChC,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,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC;QACrD,GAAG,CAAC,KAAK,EAAE,CAAC;QAEZ,MAAM,CAAC,qBAAqB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sEAAsE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;;gBAKI;SACX,CAAC,CAAC;QAEH,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAsB,CAAC;QACjE,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAsB,CAAC;QAC3E,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAChC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC3C,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QAChD,MAAM,CAAC,KAAK,EAAE,CAAC;QAEf,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,EAAE,CAAC;QACzC,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAC7C,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 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-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",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-searchbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ControlSize,\n Device,\n ListDividerType,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n} from \"../../beans\";\nimport {getDevice, handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n/*\n @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);\n * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);\n /\n@Component({\n tag: \"z-searchbar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSearchbar {\n /* the id of the searchbar element /\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /* Prevent submit action /\n @Prop()\n preventSubmit?: boolean = false;\n\n /* Input search string /\n @Prop()\n value?: string;\n\n /* Search input placeholder /\n @Prop()\n placeholder?: string;\n\n /* Show autocomplete results /\n @Prop()\n autocomplete?: boolean = false;\n\n /* Minimun number of characters to dispatch typing event /\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /* Number of results shown - default all /\n @Prop()\n resultsCount?: number;\n\n /* Truncate results to single row /\n @Prop()\n resultsEllipsis?: boolean = true;\n\n /* Search helper text /\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /* Autocomplete results items /\n @Prop()\n resultsItems?: SearchbarItem[] \| string;\n\n /* Sort autocomplete results items /\n @Prop()\n sortResultsItems?: boolean = false;\n\n /* Show submit button /\n @Prop()\n showSearchButton?: boolean = false;\n\n /* Set button icon without label/\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. /\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount = 0;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @Element() element: HTMLZSearchbarElement;\n\n private resultsItemsList: SearchbarItem[] \| undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n private resizeObserver: ResizeObserver;\n\n /* Emitted on search submit, return search string /\n @Event()\n searchSubmit: EventEmitter<string>;\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n /* Emitted on search typing, return search string /\n @Event()\n searchTyping: EventEmitter<string>;\n\n private emitSearchTyping(search: string): void {\n this.searchTyping.emit(search);\n }\n\n /* Emitted on search result click, return item /\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.emitSearchTyping(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n if (getDevice() === Device.MOBILE && !this.isMobile) {\n this.isMobile = true;\n }\n if (getDevice() !== Device.MOBILE && this.isMobile) {\n this.isMobile = false;\n }\n });\n this.resizeObserver.observe(this.element);\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n this.currResultsCount = this.resultsCount;\n }\n\n private getResultsItemsList(): SearchbarItem[] \| undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(items: SearchbarItem[]): SearchbarGroupedItem {\n const groupedItems = {};\n items.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private checkResultsCount(counter: number): boolean {\n if (!this.currResultsCount \|\| counter < this.currResultsCount) {\n return true;\n }\n\n return false;\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n\n const searchbar = cp.find((elem: HTMLElement) => elem.nodeName === \"Z-SEARCHBAR\");\n if (!searchbar \|\| (searchbar as HTMLZSearchbarElement).htmlid !== this.htmlid) {\n this.showResults = false;\n\n return;\n }\n\n if (cp.find((elem: HTMLElement) => elem?.nodeName === \"Z-INPUT\" \|\| elem?.classList?.contains(\"results\"))) {\n this.showResults = true;\n\n return;\n }\n\n this.showResults = false;\n }\n\n private renderInput(): HTMLZInputElement {\n return (\n <z-input\n ref={(val) => {\n this.inputRef = val;\n }}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.handleSubmit())}\n value={this.value}\n ariaLabel={this.placeholder}\n size={this.size}\n />\n );\n }\n\n private renderButton(): HTMLZButtonElement \| null {\n if (!this.showSearchButton) {\n return null;\n }\n\n const iconProp = this.searchButtonIconOnly ? {icon: \"search\"} : null;\n const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n const defaultProps = {\n disabled: this.preventSubmit,\n variant: this.variant,\n size: this.size,\n onClick: () => this.handleSubmit(),\n ...iconProp,\n };\n\n return <z-button {...defaultProps}>{buttonLabel}</z-button>;\n }\n\n private renderResults(): HTMLDivElement \| null {\n if (\n !this.showResults \|\|\n !this.autocomplete \|\|\n !this.searchString \|\|\n this.searchString.length < this.autocompleteMinChars \|\|\n !this.resultsItemsList\n ) {\n return null;\n }\n\n return (\n <div class=\"results-wrapper\">\n <div class=\"results\">{this.renderResultsList()}</div>\n </div>\n );\n }\n\n private renderResultsList(): HTMLZListElement \| HTMLSpanElement {\n if (this.preventSubmit && !this.resultsItemsList?.length) {\n return (\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </span>\n );\n }\n\n return (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n >\n {this.renderSearchHelper(!!this.resultsItemsList?.length)}\n {this.renderItems()}\n {this.renderShowAllResults()}\n </z-list>\n );\n }\n\n private renderItems(): HTMLZListGroupElement[] {\n if (!this.resultsItemsList?.length) {\n return [];\n }\n\n const groupedItems = this.getGroupedItems(this.resultsItemsList);\n const listGroups: HTMLZListGroupElement[] = [];\n let counter = 0;\n\n Object.values(groupedItems).forEach((groupItem: SearchbarGroup, index: number, array) => {\n if (this.checkResultsCount(counter)) {\n const listGroupsElements: HTMLZListElement[] = [];\n groupItem.items.forEach((item: SearchbarItem, subindex: number, subarray) => {\n if (this.checkResultsCount(counter)) {\n const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n }\n counter++;\n });\n\n if (listGroupsElements.length) {\n listGroups.push(\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n {this.renderItemCategory(groupItem)}\n {listGroupsElements}\n </z-list-group>\n );\n }\n }\n });\n\n return listGroups;\n }\n\n private renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${key}`}\n role=\"option\"\n tabindex={0}\n dividerType={divider ? ListDividerType.ELEMENT : undefined}\n clickable\n onClickItem={() => this.emitSearchItemClick(item)}\n >\n <div class=\"list-element\">\n <span class={{\"item\": true, \"ellipsis\": this.resultsEllipsis, \"has-category\": !!item.category}}>\n {item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n <span\n class=\"item-label\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n </span>\n {item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n </z-list-element>\n );\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItemCategory(groupItem: SearchbarGroup): HTMLSpanElement \| null {\n if (!groupItem?.category) {\n return null;\n }\n\n return (\n <span\n class=\"category-heading\"\n slot=\"header-title\"\n >\n <span class=\"category\">{groupItem.category}</span>\n {groupItem?.subcategory && <span class=\"subcategory\">{groupItem.subcategory}</span>}\n </span>\n );\n }\n\n private renderSearchHelper(hasDivider = true): HTMLZListElement \| null {\n if (!this.autocomplete \|\| this.preventSubmit \|\| !this.searchString) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n clickable\n id={`list-item-${this.htmlid}-search`}\n onClickItem={() => this.emitSearchSubmit()}\n >\n <span class=\"item item-search\">\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <span\n class=\"item-label\"\n innerHTML={this.searchHelperLabel.replace(\"{searchString}\", `<mark>${this.searchString}</mark>`)}\n />\n </span>\n </z-list-element>\n );\n }\n\n private renderShowAllResults(): HTMLZListElement \| null {\n if (\n !this.currResultsCount \|\|\n !this.searchString \|\|\n !this.resultsItemsList?.length \|\|\n this.currResultsCount >= this.resultsItemsList?.length\n ) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n clickable\n id={`list-item-${this.htmlid}-show-all`}\n onClickItem={() => (this.currResultsCount = 0)}\n color=\"color-primary01\"\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n );\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e) => this.handleOutsideClick(e)}\n class={{\"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete}}\n >\n <div class=\"input-container\">\n {this.renderInput()}\n {this.renderResults()}\n </div>\n {this.renderButton()}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-searchbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ControlSize,\n Device,\n ListDividerType,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n} from \"../../beans\";\nimport {getDevice, handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n/*\n @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);\n * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);\n /\n@Component({\n tag: \"z-searchbar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSearchbar {\n /* the id of the searchbar element /\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /* Prevent submit action /\n @Prop()\n preventSubmit?: boolean = false;\n\n /* Input search string /\n @Prop()\n value?: string;\n\n /* Search input placeholder /\n @Prop()\n placeholder?: string;\n\n /* Show autocomplete results /\n @Prop()\n autocomplete?: boolean = false;\n\n /* Minimun number of characters to dispatch typing event /\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /* Number of results shown - default all /\n @Prop()\n resultsCount?: number;\n\n /* Search helper text /\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /* Autocomplete results items /\n @Prop()\n resultsItems?: SearchbarItem[] \| string;\n\n /* Sort autocomplete results items /\n @Prop()\n sortResultsItems?: boolean = false;\n\n /* Show submit button /\n @Prop()\n showSearchButton?: boolean = false;\n\n /* Set button icon without label/\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. /\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount = 0;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @Element() element: HTMLZSearchbarElement;\n\n private resultsItemsList: SearchbarItem[] \| undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n private resizeObserver: ResizeObserver;\n\n /* Emitted on search submit, return search string /\n @Event()\n searchSubmit: EventEmitter<string>;\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n /* Emitted on search typing, return search string /\n @Event()\n searchTyping: EventEmitter<string>;\n\n private emitSearchTyping(search: string): void {\n this.searchTyping.emit(search);\n }\n\n /* Emitted on search result click, return item /\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.emitSearchTyping(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n if (getDevice() === Device.MOBILE && !this.isMobile) {\n this.isMobile = true;\n }\n if (getDevice() !== Device.MOBILE && this.isMobile) {\n this.isMobile = false;\n }\n });\n this.resizeObserver.observe(this.element);\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n this.currResultsCount = this.resultsCount;\n }\n\n private getResultsItemsList(): SearchbarItem[] \| undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(items: SearchbarItem[]): SearchbarGroupedItem {\n const groupedItems = {};\n items.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private checkResultsCount(counter: number): boolean {\n if (!this.currResultsCount \|\| counter < this.currResultsCount) {\n return true;\n }\n\n return false;\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n\n const searchbar = cp.find((elem: HTMLElement) => elem.nodeName === \"Z-SEARCHBAR\");\n if (!searchbar \|\| (searchbar as HTMLZSearchbarElement).htmlid !== this.htmlid) {\n this.showResults = false;\n\n return;\n }\n\n if (cp.find((elem: HTMLElement) => elem?.nodeName === \"Z-INPUT\" \|\| elem?.classList?.contains(\"results\"))) {\n this.showResults = true;\n\n return;\n }\n\n this.showResults = false;\n }\n\n private renderInput(): HTMLZInputElement {\n return (\n <z-input\n ref={(val) => {\n this.inputRef = val;\n }}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.handleSubmit())}\n value={this.value}\n ariaLabel={this.placeholder}\n size={this.size}\n />\n );\n }\n\n private renderButton(): HTMLZButtonElement \| null {\n if (!this.showSearchButton) {\n return null;\n }\n\n const iconProp = this.searchButtonIconOnly ? {icon: \"search\"} : null;\n const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n const defaultProps = {\n disabled: this.preventSubmit,\n variant: this.variant,\n size: this.size,\n onClick: () => this.handleSubmit(),\n ...iconProp,\n };\n\n return <z-button {...defaultProps}>{buttonLabel}</z-button>;\n }\n\n private renderResults(): HTMLDivElement \| null {\n if (\n !this.showResults \|\|\n !this.autocomplete \|\|\n !this.searchString \|\|\n this.searchString.length < this.autocompleteMinChars \|\|\n !this.resultsItemsList\n ) {\n return null;\n }\n\n return (\n <div class=\"results-wrapper\">\n <div class=\"results\">{this.renderResultsList()}</div>\n </div>\n );\n }\n\n private renderResultsList(): HTMLZListElement \| HTMLSpanElement {\n if (this.preventSubmit && !this.resultsItemsList?.length) {\n return (\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </span>\n );\n }\n\n return (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n >\n {this.renderSearchHelper(!!this.resultsItemsList?.length)}\n {this.renderItems()}\n {this.renderShowAllResults()}\n </z-list>\n );\n }\n\n private renderItems(): HTMLZListGroupElement[] {\n if (!this.resultsItemsList?.length) {\n return [];\n }\n\n const groupedItems = this.getGroupedItems(this.resultsItemsList);\n const listGroups: HTMLZListGroupElement[] = [];\n let counter = 0;\n\n Object.values(groupedItems).forEach((groupItem: SearchbarGroup, index: number, array) => {\n if (this.checkResultsCount(counter)) {\n const listGroupsElements: HTMLZListElement[] = [];\n groupItem.items.forEach((item: SearchbarItem, subindex: number, subarray) => {\n if (this.checkResultsCount(counter)) {\n const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n }\n counter++;\n });\n\n if (listGroupsElements.length) {\n listGroups.push(\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n {this.renderItemCategory(groupItem)}\n {listGroupsElements}\n </z-list-group>\n );\n }\n }\n });\n\n return listGroups;\n }\n\n private renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${key}`}\n role=\"option\"\n tabindex={0}\n dividerType={divider ? ListDividerType.ELEMENT : undefined}\n >\n <div\n class=\"list-element\"\n onClick={() => this.emitSearchItemClick(item)}\n >\n <span class=\"item ellipsis\">\n {item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n <span\n class=\"item-label\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n </span>\n {item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n {item.children && item.children.length > 0 ? (\n <z-list>\n <div class=\"children-node\">{item.children.map((child, index) => this.renderItem(child, index, false))}</div>\n </z-list>\n ) : null}\n </z-list-element>\n );\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItemCategory(groupItem: SearchbarGroup): HTMLSpanElement \| null {\n if (!groupItem?.category) {\n return null;\n }\n\n return (\n <span\n class=\"category-heading\"\n slot=\"header-title\"\n >\n <span class=\"category\">{groupItem.category}</span>\n {groupItem?.subcategory && <span class=\"subcategory\">{groupItem.subcategory}</span>}\n </span>\n );\n }\n\n private renderSearchHelper(hasDivider = true): HTMLZListElement \| null {\n if (!this.autocomplete \|\| this.preventSubmit \|\| !this.searchString) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n clickable\n id={`list-item-${this.htmlid}-search`}\n onClickItem={() => this.emitSearchSubmit()}\n >\n <span class=\"item item-search\">\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <span\n class=\"item-label\"\n innerHTML={this.searchHelperLabel.replace(\"{searchString}\", `<mark>${this.searchString}</mark>`)}\n />\n </span>\n </z-list-element>\n );\n }\n\n private renderShowAllResults(): HTMLZListElement \| null {\n if (\n !this.currResultsCount \|\|\n !this.searchString \|\|\n !this.resultsItemsList?.length \|\|\n this.currResultsCount >= this.resultsItemsList?.length\n ) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n clickable\n id={`list-item-${this.htmlid}-show-all`}\n onClickItem={() => (this.currResultsCount = 0)}\n color=\"color-primary01\"\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n );\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e) => this.handleOutsideClick(e)}\n class={{\"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete}}\n >\n <div class=\"input-container\">\n {this.renderInput()}\n {this.renderResults()}\n </div>\n {this.renderButton()}\n </Host>\n );\n }\n}\n"]}

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

@@ -138,7 +138,6 @@ describe("Suite test ZSearchbar", () => {
                       role="option"
                       tabindex="0"
                       dividerType="element"
-                      clickable
                     >
                     <div class="list-element">
                       <span class="item ellipsis">
@@ -336,7 +335,6 @@ const resultsItems = () => `
       role="option"
       tabindex="0"
       dividerType="element"
-      clickable
     >
     <div class="list-element">
       <span class="item ellipsis">
@@ -350,7 +348,6 @@ const resultsItems = () => `
       role="option"
       tabindex="0"
       dividerType="element"
-      clickable
     >
     <div class="list-element">
       <span class="item ellipsis">
@@ -362,7 +359,6 @@ const resultsItems = () => `
       id="list-item-my-id-2"
       role="option"
       tabindex="0"
-      clickable
     >
     <div class="list-element">
       <span class="item ellipsis">
@@ -390,8 +386,8 @@ const showAllResults = () => `
     role="option"
     tabindex="0"
     id="list-item-my-id-show-all"
-    clickable
     color="color-primary01"
+    clickable
   >
     <div class="item-show-all">Vedi tutti i risultati</div>
   </z-list-element>