@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

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

@@ -2,19 +2,18 @@ import { h } from "@stencil/core";
 import { ZChipType } from "../../beans";
 export class ZChip {
     constructor() {
-        /** z-chip size type, can be default, medium or small */
+        this.icon = undefined;
         this.type = ZChipType.DEFAULT;
-        /** set z-chip as disabled */
+        this.interactiveIcon = undefined;
         this.disabled = false;
-        /** z-chip aria-label string */
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '0f8834160a0c8e3ffd107233e2c5de6db6ab6df2', class: {
+        return (h("div", { key: '7dd8f9f2d4c632559d1e9b3b04e2d139d3cdd1ce', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '51451c287eb3c450f4cc8a59f40e0d2e71fe95e2', name: this.icon }), h("slot", { key: 'd1c6dce40bf102ab19ca5bfc06fdbc342c97e68e' }), this.interactiveIcon && (h("button", { key: '3274d75df1f052aab16bfb8b663292160757acc8', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '23605e0639429a9ac5d66eb3394a1a3c9740d601', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'af4721aa7ef2e3c8381685bb2eadd19a35effc81', name: this.icon }), h("slot", { key: '521b4fc72980f48dec8ee49c6fc3c06df3c9bf9a' }), this.interactiveIcon && (h("button", { key: '15cb6244073a9402ee3cb147f74cf3763b2a02cd', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'a7c434efafd9891a5262dffa24136724acc0f791', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -44,10 +43,8 @@ export class ZChip {
                     "tags": [],
                     "text": "Non interactive icon"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon"
+                "attribute": "icon",
+                "reflect": false
             },
             "type": {
                 "type": "string",
@@ -59,8 +56,7 @@ export class ZChip {
                         "ZChipType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ZChipType",
-                            "referenceLocation": "ZChipType"
+                            "id": "src/beans/index.tsx::ZChipType"
                         }
                     }
                 },
@@ -70,10 +66,8 @@ export class ZChip {
                     "tags": [],
                     "text": "z-chip size type, can be default, medium or small"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "type",
+                "reflect": true,
                 "defaultValue": "ZChipType.DEFAULT"
             },
             "interactiveIcon": {
@@ -90,10 +84,8 @@ export class ZChip {
                     "tags": [],
                     "text": "z-chip interactive icon"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "interactive-icon"
+                "attribute": "interactive-icon",
+                "reflect": true
             },
             "disabled": {
                 "type": "boolean",
@@ -109,10 +101,8 @@ export class ZChip {
                     "tags": [],
                     "text": "set z-chip as disabled"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "disabled",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "ariaLabel": {
@@ -129,10 +119,8 @@ export class ZChip {
                     "tags": [],
                     "text": "z-chip aria-label string"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "aria-label",
+                "reflect": false,
                 "defaultValue": "\"\""
             }
         };
@@ -157,3 +145,4 @@ export class ZChip {
     }
     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.stories.js

@@ -67,3 +67,4 @@ export const InteractiveIcon = {
     >
   `,
 };
+//# 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"]}

package/dist/collection/components/z-color-picker/index.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { ColorPickerPalette } from "../../beans";
 import { containsElement } from "../../utils/utils";
 const LOCALES = {
@@ -21,20 +21,15 @@ const COLOR_GROUPS = 9;
  */
 export class ZColorPicker {
     constructor() {
-        /**
-         * The language for the aria labels inside the color picker.
-         */
-        this.lng = "it";
-        /**
-         * Disables the transparent color option.
-         * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` ("dark gray 2").
-         */
-        this.disableTransparent = false;
         /**
          * The color keys arranged in row-major order for rendering and navigation.
          */
         this.colorKeysByRow = [];
         this._colorButtons = [];
+        this.selectedColor = undefined;
+        this.lng = "it";
+        this.htmlAriaLabel = undefined;
+        this.disableTransparent = false;
     }
     get colorButtons() {
         if (!this._colorButtons.length) {
@@ -192,7 +187,7 @@ export class ZColorPicker {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (h(Host, { key: 'c834820884acc8c3bdf4571379cbe6da74e7ea89', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (h(Host, { key: '24f0e76aecda9731ed826e8228f49ca5e08a14a5', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
             var _a;
             return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
         })));
@@ -216,13 +211,12 @@ export class ZColorPicker {
                 "mutable": true,
                 "complexType": {
                     "original": "ColorPickerPalette",
-                    "resolved": "\"#004466\" | \"#006633\" | \"#0088CC\" | \"#00CC66\" | \"#110066\" | \"#2200CC\" | \"#226600\" | \"#333333\" | \"#33BBFF\" | \"#33FF99\" | \"#44CC00\" | \"#5533FF\" | \"#660000\" | \"#660066\" | \"#662B00\" | \"#665600\" | \"#77FF33\" | \"#7E7E7E\" | \"#99DDFF\" | \"#99FFCC\" | \"#AA99FF\" | \"#BBFF99\" | \"#CC0000\" | \"#CC00CC\" | \"#CC5500\" | \"#CCAA00\" | \"#CCCCCC\" | \"#CCEEFF\" | \"#CCFFE5\" | \"#D4CCFF\" | \"#DDFFCC\" | \"#FF3333\" | \"#FF33FF\" | \"#FF8933\" | \"#FF9999\" | \"#FF99FF\" | \"#FFC399\" | \"#FFCCCC\" | \"#FFCCFF\" | \"#FFDD33\" | \"#FFE1CC\" | \"#FFEE99\" | \"#FFF7CC\" | \"#FFFFFF\" | \"#FFFFFF00\"",
+                    "resolved": "\"#FFFFFF00\" | \"#FFFFFF\" | \"#CCCCCC\" | \"#7E7E7E\" | \"#333333\" | \"#FFCCCC\" | \"#FF9999\" | \"#FF3333\" | \"#CC0000\" | \"#660000\" | \"#FFE1CC\" | \"#FFC399\" | \"#FF8933\" | \"#CC5500\" | \"#662B00\" | \"#FFF7CC\" | \"#FFEE99\" | \"#FFDD33\" | \"#CCAA00\" | \"#665600\" | \"#DDFFCC\" | \"#BBFF99\" | \"#77FF33\" | \"#44CC00\" | \"#226600\" | \"#CCFFE5\" | \"#99FFCC\" | \"#33FF99\" | \"#00CC66\" | \"#006633\" | \"#CCEEFF\" | \"#99DDFF\" | \"#33BBFF\" | \"#0088CC\" | \"#004466\" | \"#D4CCFF\" | \"#AA99FF\" | \"#5533FF\" | \"#2200CC\" | \"#110066\" | \"#FFCCFF\" | \"#FF99FF\" | \"#FF33FF\" | \"#CC00CC\" | \"#660066\"",
                     "references": {
                         "ColorPickerPalette": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ColorPickerPalette",
-                            "referenceLocation": "ColorPickerPalette"
+                            "id": "src/beans/index.tsx::ColorPickerPalette"
                         }
                     }
                 },
@@ -232,10 +226,8 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "The selected color to highlight."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected-color"
+                "attribute": "selected-color",
+                "reflect": false
             },
             "lng": {
                 "type": "string",
@@ -251,10 +243,8 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "The language for the aria labels inside the color picker."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "lng",
+                "reflect": false,
                 "defaultValue": "\"it\""
             },
             "htmlAriaLabel": {
@@ -271,10 +261,8 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "The aria-label for the color picker, e.g. \"Select a background color for the label\"."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "html-aria-label"
+                "attribute": "html-aria-label",
+                "reflect": false
             },
             "disableTransparent": {
                 "type": "boolean",
@@ -290,10 +278,8 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "Disables the transparent color option.\nSetting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\")."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "disable-transparent",
+                "reflect": false,
                 "defaultValue": "false"
             }
         };
@@ -311,13 +297,12 @@ export class ZColorPicker {
                 },
                 "complexType": {
                     "original": "ColorPickerPalette",
-                    "resolved": "\"#004466\" | \"#006633\" | \"#0088CC\" | \"#00CC66\" | \"#110066\" | \"#2200CC\" | \"#226600\" | \"#333333\" | \"#33BBFF\" | \"#33FF99\" | \"#44CC00\" | \"#5533FF\" | \"#660000\" | \"#660066\" | \"#662B00\" | \"#665600\" | \"#77FF33\" | \"#7E7E7E\" | \"#99DDFF\" | \"#99FFCC\" | \"#AA99FF\" | \"#BBFF99\" | \"#CC0000\" | \"#CC00CC\" | \"#CC5500\" | \"#CCAA00\" | \"#CCCCCC\" | \"#CCEEFF\" | \"#CCFFE5\" | \"#D4CCFF\" | \"#DDFFCC\" | \"#FF3333\" | \"#FF33FF\" | \"#FF8933\" | \"#FF9999\" | \"#FF99FF\" | \"#FFC399\" | \"#FFCCCC\" | \"#FFCCFF\" | \"#FFDD33\" | \"#FFE1CC\" | \"#FFEE99\" | \"#FFF7CC\" | \"#FFFFFF\" | \"#FFFFFF00\"",
+                    "resolved": "\"#FFFFFF00\" | \"#FFFFFF\" | \"#CCCCCC\" | \"#7E7E7E\" | \"#333333\" | \"#FFCCCC\" | \"#FF9999\" | \"#FF3333\" | \"#CC0000\" | \"#660000\" | \"#FFE1CC\" | \"#FFC399\" | \"#FF8933\" | \"#CC5500\" | \"#662B00\" | \"#FFF7CC\" | \"#FFEE99\" | \"#FFDD33\" | \"#CCAA00\" | \"#665600\" | \"#DDFFCC\" | \"#BBFF99\" | \"#77FF33\" | \"#44CC00\" | \"#226600\" | \"#CCFFE5\" | \"#99FFCC\" | \"#33FF99\" | \"#00CC66\" | \"#006633\" | \"#CCEEFF\" | \"#99DDFF\" | \"#33BBFF\" | \"#0088CC\" | \"#004466\" | \"#D4CCFF\" | \"#AA99FF\" | \"#5533FF\" | \"#2200CC\" | \"#110066\" | \"#FFCCFF\" | \"#FF99FF\" | \"#FF33FF\" | \"#CC00CC\" | \"#660066\"",
                     "references": {
                         "ColorPickerPalette": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ColorPickerPalette",
-                            "referenceLocation": "ColorPickerPalette"
+                            "id": "src/beans/index.tsx::ColorPickerPalette"
                         }
                     }
                 }
@@ -379,3 +364,4 @@ export class ZColorPicker {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-color-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-color-picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, Watch, h} from \"@stencil/core\";\nimport {ColorPickerPalette} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst LOCALES = {\n  it: {\n    \"Select a color\": \"Seleziona un colore\",\n    \"Color swatch\": \"Campione di colore\",\n  },\n  en: {\n    \"Select a color\": \"Select a color\",\n    \"Color swatch\": \"Color swatch\",\n  },\n} as const;\n\n/** Number of colors in each group (column) of the grid. */\nconst COLOR_GROUP_SIZE = 5;\n\n/** Number of color groups (columns) in the grid. */\nconst COLOR_GROUPS = 9;\n\n/**\n * Color picker component.\n * This component allows the user to pick a color from a predefined set.\n */\n@Component({\n  tag: \"z-color-picker\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZColorPicker {\n  @Element() host: HTMLZColorPickerElement;\n\n  /**\n   * The selected color to highlight.\n   */\n  @Prop({mutable: true})\n  selectedColor: ColorPickerPalette;\n\n  /**\n   * The language for the aria labels inside the color picker.\n   */\n  @Prop()\n  lng: \"it\" | \"en\" = \"it\";\n\n  /**\n   * The aria-label for the color picker, e.g. \"Select a background color for the label\".\n   */\n  @Prop()\n  htmlAriaLabel: string;\n\n  /**\n   * Disables the transparent color option.\n   * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\").\n   */\n  @Prop()\n  disableTransparent = false;\n\n  /**\n   * Event emitted when a color is selected.\n   */\n  @Event()\n  colorSelected: EventEmitter<ColorPickerPalette>;\n\n  /**\n   * The color keys arranged in row-major order for rendering and navigation.\n   */\n  private colorKeysByRow: ColorPickerPalette[] = [];\n\n  private _colorButtons: HTMLButtonElement[] = [];\n\n  private get colorButtons(): HTMLButtonElement[] {\n    if (!this._colorButtons.length) {\n      this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll(\"button\")) as HTMLButtonElement[];\n    }\n\n    return this._colorButtons;\n  }\n\n  /**\n   * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).\n   * This ensures button indices in the DOM match their visual position in the grid.\n   */\n  private sortColorKeysByRow(): ColorPickerPalette[] {\n    const allKeys = Object.keys(ColorPickerPalette) as ColorPickerPalette[];\n    const ordered: ColorPickerPalette[] = [];\n\n    // Iterate through visual positions (row by row, left to right)\n    for (let row = 0; row < COLOR_GROUP_SIZE; row++) {\n      for (let col = 0; col < COLOR_GROUPS; col++) {\n        const columnMajorIndex = col * COLOR_GROUP_SIZE + row;\n        if (columnMajorIndex < allKeys.length) {\n          ordered.push(allKeys[columnMajorIndex]);\n        }\n      }\n    }\n\n    return ordered;\n  }\n\n  /** Move focus to the specified color button by index. */\n  private moveFocusTo(index: number): void {\n    // Reset tabindex of other buttons and set tabindex to 0 on selected button\n    this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));\n    this.colorButtons[index].focus();\n  }\n\n  @Watch(\"disableTransparent\")\n  @Watch(\"selectedColor\")\n  validateTransparentSelection(): void {\n    if (this.disableTransparent && this.selectedColor === \"#FFFFFF00\") {\n      this.selectedColor = \"#333333\"; // Default to dark gray 2 if transparent is disabled and currently selected\n    }\n  }\n\n  @Watch(\"selectedColor\")\n  emitColorSelected(): void {\n    this.colorSelected.emit(this.selectedColor);\n  }\n\n  /**\n   * Focuses the selected or first enabled color button and makes the container non-tabbable.\n   */\n  @Listen(\"focus\")\n  @Method()\n  async setFocus(): Promise<void> {\n    // Reset tabindex of all buttons\n    this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    const firstSelectedOrEnabled =\n      this.colorButtons.find((btn) => btn.ariaSelected === \"true\") || this.colorButtons.find((btn) => !btn.disabled);\n    if (!firstSelectedOrEnabled) {\n      return;\n    }\n\n    firstSelectedOrEnabled.tabIndex = 0;\n    setTimeout(() => {\n      firstSelectedOrEnabled.focus();\n    }, 50);\n    // Set container as non-tabbable\n    this.host.tabIndex = -1;\n  }\n\n  /**\n   * Compute next index in row-major grid according to keyboard direction.\n   */\n  private getNextIndexByKey(currentIndex: number, key: string, totalColors: number): number {\n    const row = Math.floor(currentIndex / COLOR_GROUPS);\n    const col = currentIndex % COLOR_GROUPS;\n    let newIndex = currentIndex;\n\n    switch (key) {\n      case \"ArrowRight\": {\n        const newCol = col + 1;\n        const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowLeft\": {\n        const newCol = col - 1;\n        const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n      case \"ArrowDown\": {\n        let newRow = row + 1;\n        let newCol = col;\n        if (newRow >= COLOR_GROUP_SIZE) {\n          // Wrap to first item of next column\n          newRow = 0;\n          newCol = (col + 1) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowUp\": {\n        let newRow = row - 1;\n        let newCol = col;\n        if (newRow < 0) {\n          // Wrap to last item of previous column\n          newRow = COLOR_GROUP_SIZE - 1;\n          newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n    }\n\n    return newIndex;\n  }\n\n  /**\n   * Handle keyboard navigation within the color picker.\n   * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!target.dataset.color) {\n      return;\n    }\n\n    const currentIndex = this.colorButtons.indexOf(target as HTMLButtonElement);\n    const totalColors = this.colorButtons.length;\n    if (currentIndex < 0 || ![\"ArrowRight\", \"ArrowLeft\", \"ArrowDown\", \"ArrowUp\"].includes(event.key)) {\n      return;\n    }\n\n    let newIndex = currentIndex;\n    let attempts = 0;\n\n    do {\n      newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);\n      attempts++;\n    } while (attempts < totalColors && this.colorButtons[newIndex]?.disabled);\n\n    if (\n      newIndex !== currentIndex &&\n      newIndex >= 0 &&\n      newIndex < totalColors &&\n      !this.colorButtons[newIndex]?.disabled\n    ) {\n      this.moveFocusTo(newIndex);\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.\n   */\n  @Listen(\"blur\")\n  handleBlur(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (!containsElement(this.host, relatedTarget)) {\n      this.host.tabIndex = 0;\n      this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    }\n  }\n\n  componentWillLoad(): void {\n    this.colorKeysByRow = this.sortColorKeysByRow();\n  }\n\n  render(): HTMLZColorPickerElement {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-label={this.htmlAriaLabel || LOCALES[this.lng][\"Select a color\"]}\n        tabIndex={0}\n      >\n        {this.colorKeysByRow.map((colorKey: ColorPickerPalette) => (\n          <button\n            class=\"color-swatch\"\n            data-color={colorKey}\n            role=\"option\"\n            aria-selected={this.selectedColor?.toUpperCase() === colorKey.toUpperCase() ? \"true\" : \"false\"}\n            tabIndex={-1}\n            onClick={() => (this.selectedColor = colorKey)}\n            disabled={this.disableTransparent && colorKey === \"#FFFFFF00\"}\n          >\n            <div\n              class=\"color-swatch\"\n              role=\"img\"\n              aria-roledescription={LOCALES[this.lng][\"Color swatch\"]}\n              aria-label={ColorPickerPalette[colorKey][this.lng]}\n              title={ColorPickerPalette[colorKey][this.lng]}\n              style={{backgroundColor: colorKey}}\n            ></div>\n          </button>\n        ))}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-color-picker/index.stories.js

@@ -31,3 +31,4 @@ export const Default = {
       .disableTransparent=${args.disableTransparent}
     ></z-color-picker>`,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-color-picker/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAC/C,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,OAAO,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;YAC/B,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;SACtB;QACD,aAAa,EAAE;YACb,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;aAC1G;YACD,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC;SACzC;KACF;IACD,IAAI,EAAE;QACJ,GAAG,EAAE,IAAI;QACT,aAAa,EAAE,qBAAqB;QACpC,aAAa,EAAE,SAAS;QACxB,kBAAkB,EAAE,KAAK;KAC1B;CAC2B,CAAC;AAE/B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;uBACe,IAAI,CAAC,aAAa;4BACb,IAAI,CAAC,kBAAkB;uBAC5B;CACN,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZColorPicker} from \".\";\nimport {ColorPickerPalette} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZColorPicker\",\n  component: \"z-color-picker\",\n  argTypes: {\n    lng: {\n      control: {type: \"inline-radio\"},\n      options: [\"it\", \"en\"],\n    },\n    selectedColor: {\n      control: {\n        type: \"select\",\n        labels: Object.fromEntries(Object.entries(ColorPickerPalette).map(([color, label]) => [color, label.it])),\n      },\n      options: Object.keys(ColorPickerPalette),\n    },\n  },\n  args: {\n    lng: \"it\",\n    htmlAriaLabel: \"Seleziona un colore\",\n    selectedColor: undefined,\n    disableTransparent: false,\n  },\n} satisfies Meta<ZColorPicker>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZColorPicker>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-color-picker\n      .selectedColor=${args.selectedColor}\n      .disableTransparent=${args.disableTransparent}\n    ></z-color-picker>`,\n} satisfies Story;\n"]}

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

@@ -14,32 +14,30 @@ export class ZCombobox {
         this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
     }
     constructor() {
-        /** input unique id */
+        this.itemsList = [];
+        this.inputType = InputType.TEXT;
         this.inputid = `combo-${randomId()}`;
-        /** the combobox is disabled */
+        this.items = undefined;
+        this.label = undefined;
         this.disabled = false;
-        /** show search input flag (optional) */
         this.hassearch = false;
-        /** no result text message */
+        this.searchlabel = undefined;
+        this.searchplaceholder = undefined;
+        this.searchtitle = undefined;
         this.noresultslabel = "Nessun risultato";
-        /** toggle combo list opening flag */
         this.isopen = false;
-        /** fixed style flag */
         this.isfixed = false;
-        /** show "check all" checkbox (optional) */
         this.hascheckall = false;
-        /** check all label (optional) */
         this.checkalltext = "Seleziona tutti";
-        /** uncheck all label (optional) */
         this.uncheckalltext = "Deseleziona tutti";
-        /** max number of checkable items (0 = unlimited) */
         this.maxcheckableitems = 0;
-        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+        this.hasgroupitems = undefined;
         this.size = ControlSize.BIG;
-        this.renderItemsList = []; // used for render only
+        this.htmlAriaLabel = undefined;
+        this.searchValue = undefined;
+        this.selectedCounter = undefined;
+        this.renderItemsList = [];
         this.focusedItemId = "";
-        this.itemsList = [];
-        this.inputType = InputType.TEXT;
         this.toggleComboBox = this.toggleComboBox.bind(this);
         this.closeFilterItems = this.closeFilterItems.bind(this);
     }
@@ -294,7 +292,7 @@ export class ZCombobox {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: 'f65a92eded2c6cd7d4bb42ddc5f667806a4f5582', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '3d2a5f02bd730efb2ff1390c4e21e96224a4e552', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -324,10 +322,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "input unique id"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "inputid",
+                "reflect": false,
                 "defaultValue": "`combo-${randomId()}`"
             },
             "items": {
@@ -340,8 +336,7 @@ export class ZCombobox {
                         "ComboItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ComboItem",
-                            "referenceLocation": "ComboItem"
+                            "id": "src/beans/index.tsx::ComboItem"
                         }
                     }
                 },
@@ -351,10 +346,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "list items array"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "items"
+                "attribute": "items",
+                "reflect": false
             },
             "label": {
                 "type": "string",
@@ -370,10 +363,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "label text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
+                "attribute": "label",
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
@@ -389,10 +380,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "the combobox is disabled"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "disabled",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "hassearch": {
@@ -409,10 +398,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "show search input flag (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "hassearch",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "searchlabel": {
@@ -429,10 +416,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input label text (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "searchlabel"
+                "attribute": "searchlabel",
+                "reflect": false
             },
             "searchplaceholder": {
                 "type": "string",
@@ -448,10 +433,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input placeholder text (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "searchplaceholder"
+                "attribute": "searchplaceholder",
+                "reflect": false
             },
             "searchtitle": {
                 "type": "string",
@@ -467,10 +450,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input title text (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "searchtitle"
+                "attribute": "searchtitle",
+                "reflect": false
             },
             "noresultslabel": {
                 "type": "string",
@@ -486,10 +467,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "no result text message"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "noresultslabel",
+                "reflect": false,
                 "defaultValue": "\"Nessun risultato\""
             },
             "isopen": {
@@ -506,10 +485,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "toggle combo list opening flag"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "isopen",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "isfixed": {
@@ -526,10 +503,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "fixed style flag"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "isfixed",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "hascheckall": {
@@ -546,10 +521,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "show \"check all\" checkbox (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "hascheckall",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "checkalltext": {
@@ -566,10 +539,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "check all label (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "checkalltext",
+                "reflect": false,
                 "defaultValue": "\"Seleziona tutti\""
             },
             "uncheckalltext": {
@@ -586,10 +557,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "uncheck all label (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "uncheckalltext",
+                "reflect": false,
                 "defaultValue": "\"Deseleziona tutti\""
             },
             "maxcheckableitems": {
@@ -606,10 +575,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "max number of checkable items (0 = unlimited)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "maxcheckableitems",
+                "reflect": false,
                 "defaultValue": "0"
             },
             "hasgroupitems": {
@@ -626,10 +593,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "group items by category"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "hasgroupitems"
+                "attribute": "hasgroupitems",
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -641,8 +606,7 @@ export class ZCombobox {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize",
-                            "referenceLocation": "ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize"
                         }
                     }
                 },
@@ -652,10 +616,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "size",
+                "reflect": false,
                 "defaultValue": "ControlSize.BIG"
             },
             "htmlAriaLabel": {
@@ -672,10 +634,8 @@ export class ZCombobox {
                     "tags": [],
                     "text": "the combobox aria-label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "html-aria-label"
+                "attribute": "html-aria-label",
+                "reflect": false
             }
         };
     }
@@ -716,3 +676,4 @@ export class ZCombobox {
             }];
     }
 }
+//# sourceMappingURL=index.js.map