@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

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

@@ -0,0 +1,148 @@
+import { h } from "@stencil/core";
+import { ZChipType } from "../../beans";
+export class ZChip {
+    constructor() {
+        this.icon = undefined;
+        this.type = ZChipType.DEFAULT;
+        this.interactiveIcon = undefined;
+        this.disabled = false;
+        this.ariaLabel = "";
+    }
+    render() {
+        return (h("div", { key: '97f98567047b81864de0326e6ec89153d83cc1c1', class: {
+                "z-chip-container": true,
+                "z-chip-interactive": !!this.interactiveIcon,
+                [this.type]: true,
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '45a3661a2cbda05351c56bbc9fd697fad9bc96ea', name: this.icon }), h("slot", { key: '9d81610f7d11777a0ab71772f35e610796d65e98' }), this.interactiveIcon && (h("button", { key: '53c13cdad61a96cb139c32923c469e9e1237bc15', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '0baf684cbd662f7b3cedbd2a7468215f896472c6', class: "interactive-icon", name: this.interactiveIcon })))));
+    }
+    static get is() { return "z-chip"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Non interactive icon"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ZChipType",
+                    "resolved": "ZChipType.DEFAULT | ZChipType.MEDIUM | ZChipType.SMALL",
+                    "references": {
+                        "ZChipType": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ZChipType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "z-chip size type, can be default, medium or small"
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "ZChipType.DEFAULT"
+            },
+            "interactiveIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "z-chip interactive icon"
+                },
+                "attribute": "interactive-icon",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "set z-chip as disabled"
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "z-chip aria-label string"
+                },
+                "attribute": "aria-label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "interactiveIconClick",
+                "name": "interactiveIconClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "click on interactive icon"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAQtC,MAAM,OAAO,KAAK;;;oBASG,SAAS,CAAC,OAAO;;wBAQf,KAAK;yBAId,EAAE;;IAMd,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;aAClB,mBACc,IAAI,CAAC,QAAQ;YAE3B,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC,8DAAQ;YACP,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType} from \"../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** z-chip aria-label string */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n        }}\n        aria-disabled={this.disabled}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.ariaLabel}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-chip/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-chip/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,kCAAkC;SACzC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,qCAAqC;SAC5C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,kFAAkF;SACzF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,qFAAqF;SAC5F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;QACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,8FAA8F;SACrG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,mFAAmF;SAC1F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZChip} from \"./index\";\n\ndescribe(\"Suite test ZChip\", () => {\n  it(\"Test render ZChip empty\", async () => {\n    const page = await newSpecPage({\n      components: [ZChip],\n      html: `<z-chip type=\"default\"></z-chip>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-chip type=\"default\">\n        <div class=\"default z-chip-container\"></div>\n      </z-chip>\n    `);\n  });\n\n  it(\"Test render ZChip type medium\", async () => {\n    const page = await newSpecPage({\n      components: [ZChip],\n      html: `<z-chip type=\"medium\">text</z-chip>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-chip type=\"medium\">\n        <div class=\"medium z-chip-container\">text</div>\n      </z-chip>\n    `);\n  });\n\n  it(\"Test render ZChip with icon\", async () => {\n    const page = await newSpecPage({\n      components: [ZChip],\n      html: `<z-chip icon=\"pdf\" type=\"default\">text</z-chip>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-chip icon=\"pdf\" type=\"default\">\n        <div class=\"default z-chip-container\">\n          <z-icon name=\"pdf\"></z-icon>\n          text\n        </div>\n      </z-chip>\n    `);\n  });\n\n  it(\"Test render ZChip with interactive-icon\", async () => {\n    const page = await newSpecPage({\n      components: [ZChip],\n      html: `<z-chip icon=\"\" interactive-icon=\"multiply-circled\" type=\"default\">text</z-chip>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-chip icon=\"\" interactive-icon=\"multiply-circled\" type=\"default\">\n        <div class=\"default z-chip-container z-chip-interactive\">\n          text\n          <button aria-label=\"\" type=\"button\">\n            <z-icon class=\"interactive-icon\" name=\"multiply-circled\"></z-icon>\n          </button\n        </div>\n      </z-chip>\n    `);\n  });\n\n  it(\"Test render ZChip with interactive-icon and icon \", async () => {\n    const page = await newSpecPage({\n      components: [ZChip],\n      html: `<z-chip icon=\"pdf\" interactive-icon=\"multiply-circled\" type=\"default\">text</z-chip>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-chip icon=\"pdf\" interactive-icon=\"multiply-circled\" type=\"default\">\n        <div class=\"default z-chip-container z-chip-interactive\">\n          <z-icon name=\"pdf\"></z-icon>\n          text\n          <button aria-label=\"\" type=\"button\">\n            <z-icon class=\"interactive-icon\" name=\"multiply-circled\"></z-icon>\n          </button\n        </div>\n      </z-chip>\n    `);\n  });\n\n  it(\"Test render ZChip with interactive-icon and icon disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZChip],\n      html: `<z-chip disabled icon=\"pdf\" interactive-icon=\"multiply-circled\" type=\"default\">text</z-chip>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-chip disabled=\"\" icon=\"pdf\" interactive-icon=\"multiply-circled\" type=\"default\">\n        <div aria-disabled=\"\" class=\"default z-chip-container z-chip-interactive\">\n            <z-icon name=\"pdf\"></z-icon>\n            text\n            <button aria-label=\"\" disabled=\"\" type=\"button\">\n              <z-icon class=\"interactive-icon\" name=\"multiply-circled\"></z-icon>\n            </button\n        </div>\n      </z-chip>\n    `);\n  });\n\n  it(\"Test render ZChip with interactive-icon and icon type small\", async () => {\n    const page = await newSpecPage({\n      components: [ZChip],\n      html: `<z-chip icon=\"pdf\" interactive-icon=\"multiply-circled\" type=\"small\">text</z-chip>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-chip icon=\"pdf\" interactive-icon=\"multiply-circled\" type=\"small\">\n        <div class=\"small z-chip-container z-chip-interactive\">\n          <z-icon name=\"pdf\"></z-icon>\n          text\n          <button aria-label=\"\" type=\"button\">\n          <z-icon class=\"interactive-icon\" name=\"multiply-circled\"></z-icon>\n          </button\n        </div>\n      </z-chip>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-chip/index.stories.js

@@ -0,0 +1,70 @@
+import { html } from "lit";
+import { ZChipType } from "../../beans";
+import { ICONS } from "../../constants/iconset";
+import "./index";
+const StoryMeta = {
+    title: "ZChip",
+    argTypes: {
+        type: {
+            options: Object.values(ZChipType),
+            control: {
+                type: "radio",
+            },
+        },
+    },
+    args: {
+        type: ZChipType.DEFAULT,
+        icon: "pdf",
+    },
+};
+export default StoryMeta;
+export const Default = {
+    render: (args) => html `
+    <z-chip
+      type=${args.type}
+      icon=${args.icon}
+      >my custom element</z-chip
+    >
+  `,
+};
+export const DifferentFontWeight = {
+    render: (args) => html `
+    <z-chip
+      type=${args.type}
+      icon=${args.icon}
+    >
+      <strong>my</strong>
+      <span style="margin-left: 4px">custom element</span>
+    </z-chip>
+  `,
+};
+export const InteractiveIcon = {
+    argTypes: {
+        icon: {
+            options: Object.keys(ICONS),
+            control: {
+                type: "select",
+            },
+        },
+        interactiveIcon: {
+            options: Object.keys(ICONS),
+            control: {
+                type: "select",
+            },
+        },
+    },
+    args: {
+        interactiveIcon: "multiply-circled",
+        disabled: false,
+    },
+    render: (args) => html `
+    <z-chip
+      type=${args.type}
+      icon=${args.icon}
+      disabled=${args.disabled}
+      .interactiveIcon=${args.interactiveIcon}
+      >my custom element</z-chip
+    >
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-chip/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-chip/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;YACjC,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO;aACd;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS,CAAC,OAAO;QACvB,IAAI,EAAE,KAAK;KACZ;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEX,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;;;GAGnB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEX,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;;;;;GAKnB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,kBAAkB;QACnC,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEX,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;iBACL,IAAI,CAAC,QAAQ;yBACL,IAAI,CAAC,eAAe;;;GAG1C;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZChip} from \".\";\nimport {ZChipType} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZChip\",\n  argTypes: {\n    type: {\n      options: Object.values(ZChipType),\n      control: {\n        type: \"radio\",\n      },\n    },\n  },\n  args: {\n    type: ZChipType.DEFAULT,\n    icon: \"pdf\",\n  },\n} satisfies Meta<ZChip>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZChip>;\n\nexport const Default = {\n  render: (args) => html`\n    <z-chip\n      type=${args.type}\n      icon=${args.icon}\n      >my custom element</z-chip\n    >\n  `,\n} satisfies Story;\n\nexport const DifferentFontWeight = {\n  render: (args) => html`\n    <z-chip\n      type=${args.type}\n      icon=${args.icon}\n    >\n      <strong>my</strong>\n      <span style=\"margin-left: 4px\">custom element</span>\n    </z-chip>\n  `,\n} satisfies Story;\n\nexport const InteractiveIcon = {\n  argTypes: {\n    icon: {\n      options: Object.keys(ICONS),\n      control: {\n        type: \"select\",\n      },\n    },\n    interactiveIcon: {\n      options: Object.keys(ICONS),\n      control: {\n        type: \"select\",\n      },\n    },\n  },\n  args: {\n    interactiveIcon: \"multiply-circled\",\n    disabled: false,\n  },\n  render: (args) => html`\n    <z-chip\n      type=${args.type}\n      icon=${args.icon}\n      disabled=${args.disabled}\n      .interactiveIcon=${args.interactiveIcon}\n      >my custom element</z-chip\n    >\n  `,\n} satisfies Story;\n"]}