npm - @zanichelli/albe-web-components - Versions diffs - 19.3.0-RC1 → 19.3.0-RC3 - Mend

@zanichelli/albe-web-components 19.3.0-RC1 → 19.3.0-RC3

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;;oBAOH,QAAQ,CAAC,MAAM;2BAMD,eAAe,CAAC,IAAI;2BAMxB,WAAW,CAAC,KAAK;4BAMrB,SAAS;wBAMX,QAAQ,CAAC,IAAI;;oBAY5B,OAAO~~;;;IAUd~~,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,CAAC;YACD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI~~,qDACH,IAAI,EAAE,IAAI,CAAC,IAAI,qBACE,IAAI,CAAC,cAAc~~;~~YAEpC~~,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;oBAClD,0BAA0B,EAAE,IAAI,CAAC,YAAY;iBAC9C;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,kEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-group\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListGroup {\n @Element() host: HTMLZListGroupElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop({reflect: true})\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop({reflect: true})\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets the divider color.\n /\n @Prop({reflect: true})\n dividerColor?: string = \"gray200\";\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n [optional] check for tree items in grouped lists\n /\n @Prop()\n hasTreeItems?: boolean;\n\n /\n Sets element role.\n /\n @Prop({reflect: true})\n role = \"group\";\n\n ~~/\n [optional] Sets aria-labelledby attribute\n */\n @Prop({reflect: true})\n ariaLabelledby?: string;\n\n~~ private hasHeader: boolean;\n\n componentDidLoad(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n if (children.length - 1 > i) {\n children[i].setAttribute(\"divider-type\", this.dividerType);\n children[i].setAttribute(\"divider-size\", this.dividerSize);\n children[i].setAttribute(\"divider-color\", this.dividerColor);\n }\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", i.toString());\n }\n }\n\n componentWillLoad(): void {\n this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n }\n\n render(): HTMLZListGroupElement {\n return (\n <Host~~\n role={this.role}\n aria-labelledby={this.ariaLabelledby}\n~~ >\n <div\n class={{\n \"z-list-group-header-container\": true,\n \"has-header\": this.hasHeader && !this.hasTreeItems,\n \"grouped-tree-list-header\": this.hasTreeItems,\n }}\n >\n <slot name=\"header-title\" />\n {this.dividerType === ListDividerType.HEADER && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </div>\n <slot />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;;oBAOH,QAAQ,CAAC,MAAM;2BAMD,eAAe,CAAC,IAAI;2BAMxB,WAAW,CAAC,KAAK;4BAMrB,SAAS;wBAMX,QAAQ,CAAC,IAAI;;oBAY5B,OAAO;;IAId,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,CAAC;YACD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;oBAClD,0BAA0B,EAAE,IAAI,CAAC,YAAY;iBAC9C;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,kEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-group\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListGroup {\n @Element() host: HTMLZListGroupElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop({reflect: true})\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop({reflect: true})\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets the divider color.\n /\n @Prop({reflect: true})\n dividerColor?: string = \"gray200\";\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n [optional] check for tree items in grouped lists\n /\n @Prop()\n hasTreeItems?: boolean;\n\n /\n Sets element role.\n */\n @Prop({reflect: true})\n role = \"group\";\n\n private hasHeader: boolean;\n\n componentDidLoad(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n if (children.length - 1 > i) {\n children[i].setAttribute(\"divider-type\", this.dividerType);\n children[i].setAttribute(\"divider-size\", this.dividerSize);\n children[i].setAttribute(\"divider-color\", this.dividerColor);\n }\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", i.toString());\n }\n }\n\n componentWillLoad(): void {\n this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n }\n\n render(): HTMLZListGroupElement {\n return (\n <Host>\n <div\n class={{\n \"z-list-group-header-container\": true,\n \"has-header\": this.hasHeader && !this.hasTreeItems,\n \"grouped-tree-list-header\": this.hasTreeItems,\n }}\n >\n <slot name=\"header-title\" />\n {this.dividerType === ListDividerType.HEADER && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </div>\n <slot />\n </Host>\n );\n }\n}\n"]}

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

@@ -40,6 +40,7 @@ const StoryMeta = {
         dividerSize: DividerSize.SMALL,
         dividerColor: "gray200",
         listType: ListType.NONE,
+        role: "group",
     },
 };
 export default StoryMeta;
@@ -52,6 +53,7 @@ export const Default = {
         divider-size=${args.dividerSize}
         divider-color=${args.dividerColor}
         list-type=${args.listType}
+        role=${args.role}
       >
         <div slot="header-title">Gruppo 1</div>
         <z-list-element
@@ -85,6 +87,7 @@ export const Default = {
         divider-size=${args.dividerSize}
         divider-color=${args.dividerColor}
         list-type=${args.listType}
+        role=${args.role}
       >
         <div slot="header-title">Gruppo 1</div>
         <z-list-element

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-group/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAC,sBAAsB,EAAC,MAAM,gCAAgC,CAAC;AACtE,OAAO,yBAAyB,CAAC;AACjC,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;SACjC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;SACxC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;QACD,YAAY,EAAE,sBAAsB,EAAE;QACtC,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;SACjC;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ,CAAC,KAAK;QACpB,WAAW,EAAE,eAAe,CAAC,MAAM;QACnC,WAAW,EAAE,WAAW,CAAC,KAAK;QAC9B,YAAY,EAAE,SAAS;QACvB,QAAQ,EAAE,QAAQ,CAAC,IAAI;~~KACxB~~;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;eAGT,IAAI,CAAC,IAAI;uBACD,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;wBACf,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;;;;~~iBAIhB~~,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;;eAK5B,IAAI,CAAC,IAAI;uBACD,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;wBACf,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;;;;~~iBAIhB~~,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;;GAKxC;CACF,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListGroup} from \".\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\nimport {getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"../z-list-element/index\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZList/ZListGroup\",\n component: \"z-list-group\",\n argTypes: {\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListSize),\n },\n dividerType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListDividerType),\n },\n dividerSize: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(DividerSize),\n },\n dividerColor: getColorTokenArgConfig(),\n listType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListType),\n },\n },\n args: {\n size: ListSize.SMALL,\n dividerType: ListDividerType.HEADER,\n dividerSize: DividerSize.SMALL,\n dividerColor: \"gray200\",\n listType: ListType.NONE,\n },\n} satisfies Meta<ZListGroup>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) => html`\n <z-list>\n <z-list-group\n size=${args.size}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n list-type=${args.listType}\n >\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 1</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 2</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group\n size=${args.size}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n list-type=${args.listType}\n >\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 1</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 2</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>\n `,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-group/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListGroup} from \".\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\nimport {getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"../z-list-element/index\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZList/ZListGroup\",\n component: \"z-list-group\",\n argTypes: {\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListSize),\n },\n dividerType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListDividerType),\n },\n dividerSize: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(DividerSize),\n },\n dividerColor: getColorTokenArgConfig(),\n listType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListType),\n },\n },\n args: {\n size: ListSize.SMALL,\n dividerType: ListDividerType.HEADER,\n dividerSize: DividerSize.SMALL,\n dividerColor: \"gray200\",\n listType: ListType.NONE,\n role: \"group\",\n },\n} satisfies Meta<ZListGroup>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) => html`\n <z-list>\n <z-list-group\n size=${args.size}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n list-type=${args.listType}\n role=${args.role}\n >\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 1</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 2</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group\n size=${args.size}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n list-type=${args.listType}\n role=${args.role}\n >\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 1</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 2</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>\n `,\n};\n"]}

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

@@ -232,7 +232,7 @@ export class ZCombobox {
                 : undefined }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
-        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": Array.from(this.element.shadowRoot.querySelectorAll("[role='option']"))
+        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": Array.from(this.element.shadowRoot.querySelectorAll('[role="option"]'))
                 .map((item) => item.id)
                 .join(" ") }, this.renderItems())));
     }
@@ -245,7 +245,7 @@ export class ZCombobox {
         return (h("z-list-element", { htmlTabindex: -1, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: "presentation", disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => {
                 this.focusedItemId = "";
                 this.checkOption(optionId);
-            } }, h("z-icon", { name: item.checked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false", "aria-label": getPlainText(item.name), innerHTML: item.name }))));
+            } }, h("z-icon", { name: item.checked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false", "aria-label": isDisabled ? undefined : getPlainText(item.name) }, h("span", { "aria-hidden": "true", innerHTML: item.name })))));
     }
     renderList(items) {
         if (!items) {
@@ -271,7 +271,7 @@ export class ZCombobox {
             return group;
         }, {});
         const listGroups = Object.entries(newData).map(([key, value], index) => {
-            return (h("z-list-group", { size: this.getControlToListSize(), "divider-type": ListDividerType.ELEMENT, ariaLabelledby: `${this.inputid}_list_group_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.inputid}_list_group_${index}`, "aria-hidden": "true" }, key), value.map((item) => item)));
+            return (h("z-list-group", { size: this.getControlToListSize(), "divider-type": ListDividerType.ELEMENT, "aria-labelledby": `${this.inputid}_list_group_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.inputid}_list_group_${index}`, "aria-hidden": "true" }, key), value.map((item) => item)));
         });
         return (h("ul", { role: "presentation" }, this.renderCheckAll(), listGroups));
     }
@@ -294,7 +294,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: '00adbeec7501f6c4fcdb56c4ac7bd3ab911d97cb', "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: '6acd512eab150b46d8e80adf78e644877d480de0', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {getPlainText, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* the combobox aria-label /\n @Prop()\n htmlAriaLabel?: string;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId = \"\";\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private getOptionId(itemId: string): string {\n return `${this.inputid}-option-${itemId}`;\n }\n\n private getCheckAllOptionId(): string {\n return `${this.inputid}-check-all`;\n }\n\n private allOptionsSelected(): boolean {\n return this.selectedCounter === this.itemsList.length;\n }\n\n private hasReachedMaxSelections(): boolean {\n return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);\n }\n\n private handleHeaderKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {\n this.toggleComboBox();\n }\n\n if (!this.isopen \|\| this.hassearch) {\n return;\n }\n\n switch (e.code as KeyboardCode) {\n case KeyboardCode.SPACE:\n case KeyboardCode.ENTER:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n }\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n }\n }\n\n private handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.code as KeyboardCode) {\n case KeyboardCode.ENTER:\n case KeyboardCode.SPACE:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n break;\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n break;\n }\n this.closeFilterItems();\n break;\n case KeyboardCode.TAB:\n this.focusedItemId = \"\";\n break;\n }\n }\n\n private checkOption(optionId: string): void {\n if (optionId === this.getCheckAllOptionId()) {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: !this.allOptionsSelected(),\n }));\n\n this.focusedItemId = this.getCheckAllOptionId();\n } else {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (optionId === this.getOptionId(i.id)) {\n i.checked = !i.checked;\n }\n\n return i;\n });\n }\n\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;\n const options = Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'));\n\n if (!options.length) {\n return;\n }\n\n const currElemIndex = currElem ? options.indexOf(currElem) : null;\n const firstElemIndex = 0;\n const lastElemIndex = options.length - 1;\n\n let nextElem = null;\n if (e.code === KeyboardCode.ARROW_DOWN) {\n nextElem =\n currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] \|\| options[lastElemIndex];\n } else if (e.code === KeyboardCode.ARROW_UP) {\n nextElem =\n currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] \|\| options[firstElemIndex];\n }\n\n this.focusedItemId = nextElem.id;\n nextElem.scrollIntoView({block: \"center\"});\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n const role = \"combobox\";\n const ariaLabel = this.htmlAriaLabel;\n const ariaExpanded = this.isopen ? \"true\" : \"false\";\n const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n const ariaControls = `${this.inputid}_list`;\n\n if (isZInput) {\n return {\n \"role\": role,\n \"aria-label\": ariaLabel,\n \"html-aria-expanded\": ariaExpanded,\n \"html-aria-activedescendant\": ariaActivedescendant,\n \"html-aria-controls\": ariaControls,\n };\n }\n\n return {\n \"role\": role,\n \"aria-label\": ariaLabel,\n \"aria-expanded\": ariaExpanded,\n \"aria-activedescendant\": ariaActivedescendant,\n \"aria-controls\": ariaControls,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};\n\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(e: KeyboardEvent) => this.handleHeaderKeyDown(e)}\n role=\"button\"\n tabindex={0}\n aria-controls=\"open-combo-data\"\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n {...comboboxA11yAttributes}\n >\n <span\n class=\"body-3\"\n aria-label={\n this.label\n ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`\n : undefined\n }\n >\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </span>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"open-combo-data\"\n class=\"open-combo-data\"\n >\n {this.hassearch && this.renderSearchInput()}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable=\"true\"\n id={`${this.inputid}_list`}\n aria-owns={Array.from(this.element.shadowRoot.querySelectorAll(\"[role='option']\"))\n .map((item) => item.id)\n .join(\" \")}\n >\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div\n class={this.searchValue && \"search\"}\n tabIndex={-1}\n role=\"presentation\"\n >\n {this.renderList(this.renderItemsList)}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n const optionId = this.getOptionId(item.id);\n const isDisabled = !item.checked && this.hasReachedMaxSelections();\n\n return (\n <z-list-element\n htmlTabindex={-1}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n role=\"presentation\"\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => {\n this.focusedItemId = \"\";\n this.checkOption(optionId);\n }}\n >\n <z-icon\n name={item.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={item.checked ? \"true\" : \"false\"}\n aria-label={getPlainText(item.name)}\n innerHTML={item.name}\n />\n </span>\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const category = item.category \|\| \"Altra categoria\";\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(\n ([key, value], index) => {\n return (\n <z-list-group\n size={this.getControlToListSize()}\n divider-type={ListDividerType.ELEMENT}\n ariaLabelledby={`${this.inputid}_list_group_${index}`}\n >\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n id={`${this.inputid}_list_group_${index}`}\n aria-hidden=\"true\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n }\n );\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {listGroups}\n </ul>\n );\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <span>{this.noresultslabel}</span>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n html-aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes(true)}\n onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n this.focusedItemId = \"\";\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (!this.hascheckall \|\| this.searchValue) {\n return;\n }\n\n const optionId = this.getCheckAllOptionId();\n const allChecked = this.allOptionsSelected();\n const isDisabled =\n this.hasReachedMaxSelections() \|\| (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);\n\n return (\n <z-list-element\n class=\"check-all-wrapper\"\n role=\"presentation\"\n htmlTabindex={-1}\n dividerType={ListDividerType.ELEMENT}\n dividerColor=\"gray800\"\n size={this.getControlToListSize()}\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => this.checkOption(optionId)}\n >\n <z-icon\n name={allChecked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={allChecked ? \"true\" : \"false\"}\n >\n {allChecked ? this.uncheckalltext : this.checkalltext}\n </span>\n </span>\n </z-list-element>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {getPlainText, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* the combobox aria-label /\n @Prop()\n htmlAriaLabel?: string;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId = \"\";\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private getOptionId(itemId: string): string {\n return `${this.inputid}-option-${itemId}`;\n }\n\n private getCheckAllOptionId(): string {\n return `${this.inputid}-check-all`;\n }\n\n private allOptionsSelected(): boolean {\n return this.selectedCounter === this.itemsList.length;\n }\n\n private hasReachedMaxSelections(): boolean {\n return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);\n }\n\n private handleHeaderKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {\n this.toggleComboBox();\n }\n\n if (!this.isopen \|\| this.hassearch) {\n return;\n }\n\n switch (e.code as KeyboardCode) {\n case KeyboardCode.SPACE:\n case KeyboardCode.ENTER:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n }\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n }\n }\n\n private handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.code as KeyboardCode) {\n case KeyboardCode.ENTER:\n case KeyboardCode.SPACE:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n break;\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n break;\n }\n this.closeFilterItems();\n break;\n case KeyboardCode.TAB:\n this.focusedItemId = \"\";\n break;\n }\n }\n\n private checkOption(optionId: string): void {\n if (optionId === this.getCheckAllOptionId()) {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: !this.allOptionsSelected(),\n }));\n\n this.focusedItemId = this.getCheckAllOptionId();\n } else {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (optionId === this.getOptionId(i.id)) {\n i.checked = !i.checked;\n }\n\n return i;\n });\n }\n\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;\n const options = Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'));\n\n if (!options.length) {\n return;\n }\n\n const currElemIndex = currElem ? options.indexOf(currElem) : null;\n const firstElemIndex = 0;\n const lastElemIndex = options.length - 1;\n\n let nextElem = null;\n if (e.code === KeyboardCode.ARROW_DOWN) {\n nextElem =\n currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] \|\| options[lastElemIndex];\n } else if (e.code === KeyboardCode.ARROW_UP) {\n nextElem =\n currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] \|\| options[firstElemIndex];\n }\n\n this.focusedItemId = nextElem.id;\n nextElem.scrollIntoView({block: \"center\"});\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n const role = \"combobox\";\n const ariaLabel = this.htmlAriaLabel;\n const ariaExpanded = this.isopen ? \"true\" : \"false\";\n const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n const ariaControls = `${this.inputid}_list`;\n\n if (isZInput) {\n return {\n \"role\": role,\n \"aria-label\": ariaLabel,\n \"html-aria-expanded\": ariaExpanded,\n \"html-aria-activedescendant\": ariaActivedescendant,\n \"html-aria-controls\": ariaControls,\n };\n }\n\n return {\n \"role\": role,\n \"aria-label\": ariaLabel,\n \"aria-expanded\": ariaExpanded,\n \"aria-activedescendant\": ariaActivedescendant,\n \"aria-controls\": ariaControls,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};\n\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(e: KeyboardEvent) => this.handleHeaderKeyDown(e)}\n role=\"button\"\n tabindex={0}\n aria-controls=\"open-combo-data\"\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n {...comboboxA11yAttributes}\n >\n <span\n class=\"body-3\"\n aria-label={\n this.label\n ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`\n : undefined\n }\n >\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </span>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"open-combo-data\"\n class=\"open-combo-data\"\n >\n {this.hassearch && this.renderSearchInput()}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable=\"true\"\n id={`${this.inputid}_list`}\n aria-owns={Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'))\n .map((item) => item.id)\n .join(\" \")}\n >\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div\n class={this.searchValue && \"search\"}\n tabIndex={-1}\n role=\"presentation\"\n >\n {this.renderList(this.renderItemsList)}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n const optionId = this.getOptionId(item.id);\n const isDisabled = !item.checked && this.hasReachedMaxSelections();\n\n return (\n <z-list-element\n htmlTabindex={-1}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n role=\"presentation\"\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => {\n this.focusedItemId = \"\";\n this.checkOption(optionId);\n }}\n >\n <z-icon\n name={item.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={item.checked ? \"true\" : \"false\"}\n aria-label={isDisabled ? undefined : getPlainText(item.name)}\n >\n <span\n aria-hidden=\"true\"\n innerHTML={item.name}\n />\n </span>\n </span>\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const category = item.category \|\| \"Altra categoria\";\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(\n ([key, value], index) => {\n return (\n <z-list-group\n size={this.getControlToListSize()}\n divider-type={ListDividerType.ELEMENT}\n aria-labelledby={`${this.inputid}_list_group_${index}`}\n >\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n id={`${this.inputid}_list_group_${index}`}\n aria-hidden=\"true\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n }\n );\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {listGroups}\n </ul>\n );\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <span>{this.noresultslabel}</span>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n html-aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes(true)}\n onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n this.focusedItemId = \"\";\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (!this.hascheckall \|\| this.searchValue) {\n return;\n }\n\n const optionId = this.getCheckAllOptionId();\n const allChecked = this.allOptionsSelected();\n const isDisabled =\n this.hasReachedMaxSelections() \|\| (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);\n\n return (\n <z-list-element\n class=\"check-all-wrapper\"\n role=\"presentation\"\n htmlTabindex={-1}\n dividerType={ListDividerType.ELEMENT}\n dividerColor=\"gray800\"\n size={this.getControlToListSize()}\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => this.checkOption(optionId)}\n >\n <z-icon\n name={allChecked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={allChecked ? \"true\" : \"false\"}\n >\n {allChecked ? this.uncheckalltext : this.checkalltext}\n </span>\n </span>\n </z-list-element>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"]}

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

@@ -40,6 +40,7 @@ const StoryMeta = {
         searchtitle: "Search Title",
         uncheckalltext: "Uncheck All",
         size: ControlSize.BIG,
+        htmlAriaLabel: "",
     },
     render: (args) => html `<z-combobox
       checkalltext=${args.checkalltext}
@@ -59,6 +60,7 @@ const StoryMeta = {
       searchtitle=${args.searchtitle}
       uncheckalltext=${args.uncheckalltext}
       size=${args.size}
+      html-aria-label=${args.htmlAriaLabel}
     />`,
 };
 export default StoryMeta;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAY,WAAW,EAAC,MAAM,aAAa,CAAC;AACnD,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YAC1E,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;SACpD;QACvB,YAAY,EAAE,YAAY;QAC1B,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,gBAAgB;QACvB,iBAAiB,EAAE,CAAC;QACpB,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,cAAc;QAC3B,iBAAiB,EAAE,oBAAoB;QACvC,WAAW,EAAE,cAAc;QAC3B,cAAc,EAAE,aAAa;QAC7B,IAAI,EAAE,WAAW,CAAC,GAAG;~~KACtB~~;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;qBACa,IAAI,CAAC,YAAY;iBACrB,IAAI,CAAC,QAAQ;oBACV,IAAI,CAAC,WAAW;kBAClB,IAAI,CAAC,SAAS;gBAChB,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,OAAO;eACb,IAAI,CAAC,MAAM;eACX,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,KAAK;0BACE,IAAI,CAAC,iBAAiB;sBAC1B,IAAI,CAAC,aAAa;uBACjB,IAAI,CAAC,cAAc;oBACtB,IAAI,CAAC,WAAW;0BACV,IAAI,CAAC,iBAAiB;oBAC5B,IAAI,CAAC,WAAW;uBACb,IAAI,CAAC,cAAc;aAC7B,IAAI,CAAC,IAAI;~~OACf~~;CACoB,CAAC;AAE5B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE;QACJ,aAAa,EAAE,IAAI;KACpB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZCombobox} from \".\";\nimport {ComboItem, ControlSize} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZCombobox\",\n component: \"z-combobox\",\n argTypes: {\n items: {\n control: {\n type: \"object\",\n },\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n },\n args: {\n items: [\n {id: \"ite_m_1\", name: \"First item\", checked: false, category: \"Gruppo 1\"},\n {id: \"ite_m_2\", name: \"Second item\", checked: false, category: \"Gruppo 1\"},\n {id: \"it_em_3\", name: \"Other item\", checked: false, category: \"Gruppo 2\"},\n {id: \"it_e_m_5\", name: \"Last item\", checked: false, category: \"Gruppo 3\"},\n ] satisfies ComboItem[],\n checkalltext: \"Select all\",\n disabled: false,\n hascheckall: true,\n hassearch: true,\n inputid: \"combo_1\",\n isfixed: true,\n isopen: true,\n label: \"Combobox Label\",\n maxcheckableitems: 4,\n hasgroupitems: false,\n noresultslabel: \"No items\",\n searchlabel: \"Search Label\",\n searchplaceholder: \"Search Placeholder\",\n searchtitle: \"Search Title\",\n uncheckalltext: \"Uncheck All\",\n size: ControlSize.BIG,\n },\n render: (args) =>\n html`<z-combobox\n checkalltext=${args.checkalltext}\n disabled=${args.disabled}\n hascheckall=${args.hascheckall}\n hassearch=${args.hassearch}\n inputid=${args.inputid}\n isfixed=${args.isfixed}\n isopen=${args.isopen}\n .items=${args.items}\n label=${args.label}\n maxcheckableitems=${args.maxcheckableitems}\n hasgroupitems=${args.hasgroupitems}\n noresultslabel=${args.noresultslabel}\n searchlabel=${args.searchlabel}\n searchplaceholder=${args.searchplaceholder}\n searchtitle=${args.searchtitle}\n uncheckalltext=${args.uncheckalltext}\n size=${args.size}\n />`,\n} satisfies Meta<ZCombobox>;\n\nexport default StoryMeta;\ntype Story = StoryObj<ZCombobox>;\nexport const Default = {};\n\nexport const Groups = {\n args: {\n hasgroupitems: true,\n },\n} satisfies Story;\n\nexport const Disabled = {\n args: {\n disabled: true,\n },\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAY,WAAW,EAAC,MAAM,aAAa,CAAC;AACnD,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YAC1E,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;SACpD;QACvB,YAAY,EAAE,YAAY;QAC1B,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,gBAAgB;QACvB,iBAAiB,EAAE,CAAC;QACpB,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,cAAc;QAC3B,iBAAiB,EAAE,oBAAoB;QACvC,WAAW,EAAE,cAAc;QAC3B,cAAc,EAAE,aAAa;QAC7B,IAAI,EAAE,WAAW,CAAC,GAAG;QACrB,aAAa,EAAE,EAAE;KAClB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;qBACa,IAAI,CAAC,YAAY;iBACrB,IAAI,CAAC,QAAQ;oBACV,IAAI,CAAC,WAAW;kBAClB,IAAI,CAAC,SAAS;gBAChB,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,OAAO;eACb,IAAI,CAAC,MAAM;eACX,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,KAAK;0BACE,IAAI,CAAC,iBAAiB;sBAC1B,IAAI,CAAC,aAAa;uBACjB,IAAI,CAAC,cAAc;oBACtB,IAAI,CAAC,WAAW;0BACV,IAAI,CAAC,iBAAiB;oBAC5B,IAAI,CAAC,WAAW;uBACb,IAAI,CAAC,cAAc;aAC7B,IAAI,CAAC,IAAI;wBACE,IAAI,CAAC,aAAa;OACnC;CACoB,CAAC;AAE5B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE;QACJ,aAAa,EAAE,IAAI;KACpB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZCombobox} from \".\";\nimport {ComboItem, ControlSize} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZCombobox\",\n component: \"z-combobox\",\n argTypes: {\n items: {\n control: {\n type: \"object\",\n },\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n },\n args: {\n items: [\n {id: \"ite_m_1\", name: \"First item\", checked: false, category: \"Gruppo 1\"},\n {id: \"ite_m_2\", name: \"Second item\", checked: false, category: \"Gruppo 1\"},\n {id: \"it_em_3\", name: \"Other item\", checked: false, category: \"Gruppo 2\"},\n {id: \"it_e_m_5\", name: \"Last item\", checked: false, category: \"Gruppo 3\"},\n ] satisfies ComboItem[],\n checkalltext: \"Select all\",\n disabled: false,\n hascheckall: true,\n hassearch: true,\n inputid: \"combo_1\",\n isfixed: true,\n isopen: true,\n label: \"Combobox Label\",\n maxcheckableitems: 4,\n hasgroupitems: false,\n noresultslabel: \"No items\",\n searchlabel: \"Search Label\",\n searchplaceholder: \"Search Placeholder\",\n searchtitle: \"Search Title\",\n uncheckalltext: \"Uncheck All\",\n size: ControlSize.BIG,\n htmlAriaLabel: \"\",\n },\n render: (args) =>\n html`<z-combobox\n checkalltext=${args.checkalltext}\n disabled=${args.disabled}\n hascheckall=${args.hascheckall}\n hassearch=${args.hassearch}\n inputid=${args.inputid}\n isfixed=${args.isfixed}\n isopen=${args.isopen}\n .items=${args.items}\n label=${args.label}\n maxcheckableitems=${args.maxcheckableitems}\n hasgroupitems=${args.hasgroupitems}\n noresultslabel=${args.noresultslabel}\n searchlabel=${args.searchlabel}\n searchplaceholder=${args.searchplaceholder}\n searchtitle=${args.searchtitle}\n uncheckalltext=${args.uncheckalltext}\n size=${args.size}\n html-aria-label=${args.htmlAriaLabel}\n />`,\n} satisfies Meta<ZCombobox>;\n\nexport default StoryMeta;\ntype Story = StoryObj<ZCombobox>;\nexport const Default = {};\n\nexport const Groups = {\n args: {\n hasgroupitems: true,\n },\n} satisfies Story;\n\nexport const Disabled = {\n args: {\n disabled: true,\n },\n} satisfies Story;\n"]}

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

@@ -340,10 +340,10 @@ export class ZSelect {
     }
     renderInput() {
         let value = null;
-        if (!this.isOpen && this.selectedItem) {
-            value = this.selectedItem.name.replace(/<[^>]+>/g, "");
+        if (this.selectedItem) {
+            value = getPlainText(this.selectedItem.name);
         }
-        if (this.isOpen && this.searchString) {
+        if (this.isOpen && this.searchString !== undefined) {
             value = this.searchString;
         }
         return [
@@ -375,17 +375,17 @@ export class ZSelect {
                 "hide": hidden,
                 "reset-item": true,
                 "reset-item-margin": !this.hasGroupItems,
-            }, clickable: true, disabled: false, dividerType: ListDividerType.ELEMENT, role: hidden ? "presentation" : "option", "html-tabindex": 0, "aria-selected": "false", id: this.getResetOptionId(), size: this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType(), onClickItem: () => this.handleResetClick() }, h("div", { class: {
+            }, clickable: true, disabled: false, dividerType: ListDividerType.ELEMENT, role: hidden ? "presentation" : "option", "html-tabindex": 0, "aria-selected": "false", "aria-label": hidden ? undefined : this.resetItem, id: this.getResetOptionId(), size: this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType(), onClickItem: () => this.handleResetClick() }, h("div", { class: {
                 "reset-item-content": true,
                 "tree-list-reset-item": this.hasTreeItems,
                 "active": this.focusedItemId === this.getResetOptionId(),
-            } }, h("z-icon", { name: "multiply-circled" }), h("span", null, this.resetItem))));
+            }, "aria-hidden": "true" }, h("z-icon", { name: "multiply-circled" }), h("span", null, this.resetItem))));
     }
     renderItem(item, lastItem) {
-        return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: item.disabled ? "presentation" : "option", "html-tabindex": -1, "aria-selected": item.selected ? "true" : "false", id: this.getOptionId(item), size: this.listSizeType(), onClickItem: () => this.selectItem(item) }, h("div", { class: {
+        return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: item.disabled ? "presentation" : "option", "html-tabindex": -1, "aria-selected": item.selected ? "true" : "false", "aria-label": item.disabled ? undefined : getPlainText(item.name), id: this.getOptionId(item), size: this.listSizeType(), onClickItem: () => this.selectItem(item) }, h("div", { class: {
                 "list-element-container": true,
                 "active": this.focusedItemId === this.getOptionId(item),
-            } }, h("div", { class: {
+            }, "aria-hidden": "true" }, h("div", { class: {
                 "selected": !!item.selected,
                 "list-element-content": true,
             }, innerHTML: item.name }), item.icon && h("z-tag", { icon: item.icon }))));
@@ -433,7 +433,7 @@ export class ZSelect {
         return (h("z-list-element", { clickable: !item.disabled, disabled: isDisabled, class: {
                 "grouped-tree-parent-node": this.hasGroupItems && !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length),
                 "tree-search-item": this.hasGroupItems && isTopLevel && !((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) && !!this.searchString,
-            }, size: this.listSizeType(), dividerType: hasDivider, hasTreeItems: this.hasTreeItems, "html-tabindex": null, role: "presentation" }, h("div", { id: this.getOptionId(item), role: isDisabled ? "presentation" : "option", class: { "list-element": true, "active": this.focusedItemId === this.getOptionId(item) }, onClick: () => this.selectItem(item) }, h("span", { class: "item ellipsis" }, h("span", { class: {
+            }, size: this.listSizeType(), dividerType: hasDivider, hasTreeItems: this.hasTreeItems, "html-tabindex": null, role: "presentation" }, h("div", { id: this.getOptionId(item), role: isDisabled ? "presentation" : "option", "aria-label": isDisabled ? undefined : getPlainText(item.name), class: { "list-element": true, "active": this.focusedItemId === this.getOptionId(item) }, onClick: () => this.selectItem(item) }, h("span", { class: "item ellipsis", "aria-hidden": "true" }, h("span", { class: {
                 "item-label": true,
                 "selected": !!item.selected,
             }, title: item.name, innerHTML: item.name })), item.icon && h("z-tag", { icon: item.icon })), item.children && item.children.length > 0 ? (h("z-list", { role: "presentation" }, h("div", { class: "children-node" }, item.children.map((child, index, arr) => this.renderTreeItems(child, index === arr.length - 1, arr.length > 1, false, // isTopLevel = false for children
@@ -443,7 +443,7 @@ export class ZSelect {
         const groupedItems = this.getGroupedItems();
         return groupedItems.map(([category, items], index, entries) => {
             const parentHasSiblings = Object.values(groupedItems).some((groupItems) => groupItems.length > 1);
-            return (h("z-list-group", { "divider-type": index === entries.length - 1 ? undefined : ListDividerType.ELEMENT, hasTreeItems: true, ariaLabelledby: `${this.htmlid}_tree_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.htmlid}_tree_${index}`, "aria-hidden": "true" }, category), h("z-list", { role: "presentation" }, items.map((item, i, arr) => [
+            return (h("z-list-group", { "divider-type": index === entries.length - 1 ? undefined : ListDividerType.ELEMENT, hasTreeItems: true, "aria-labelledby": `${this.htmlid}_tree_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.htmlid}_tree_${index}`, "aria-hidden": "true" }, category), h("z-list", { role: "presentation" }, items.map((item, i, arr) => [
                 this.renderTreeItems(item, i === arr.length - 1, parentHasSiblings, true, item.disabled),
                 i < arr.length - 1 ? (h("z-divider", { key: `divider-${i}`, style: { zIndex: "100", height: "var(--border-size-small)" } })) : null,
             ])), index !== entries.length - 1 && h("z-divider", { style: { zIndex: "100", height: "var(--border-size-small)" } })));
@@ -453,7 +453,7 @@ export class ZSelect {
         const groupedItems = this.getGroupedItems();
         return groupedItems.map(([key, items], index) => {
             const isLastGroup = groupedItems.length === index + 1;
-            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT, ariaLabelledby: `${this.htmlid}_group_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.htmlid}_group_${index}`, "aria-hidden": "true" }, key), items.map((item, subindex) => {
+            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT, "aria-labelledby": `${this.htmlid}_group_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.htmlid}_group_${index}`, "aria-hidden": "true" }, key), items.map((item, subindex) => {
                 const isLastItem = items.length === subindex + 1;
                 return this.renderItem(item, isLastGroup && isLastItem);
             })));
@@ -469,7 +469,7 @@ export class ZSelect {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: '3c85f4afe14f668033ebca17e769ff275f011230', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '5797aaf1691ce826359e3cfc45a8fe6781877deb', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }