npm - @zanichelli/albe-web-components - Versions diffs - 14.5.1 → 14.5.2-rc-anchor-navigation - Mend

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/file-upload/z-file-upload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAgB,MAAM,EAAE,WAAW,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AACnF,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAO/C,MAAM,OAAO,WAAW;;QAuDd,oBAAe,GAAG;YACxB,IAAI,EAAE,MAAM;YACZ,EAAE,EAAE,WAAW;YACf,QAAQ,EAAE,IAAI;SACf,CAAC;oBAxDsB,eAAe,CAAC,OAAO;;;;;;qBAwB/B,EAAE;8BAIQ,QAAQ;gCAIN,+CAA+C;8BAIhD,IAAI;;;IAsB/B,yDAAyD;IAEzD,kBAAkB,CAAC,CAAc;QAC/B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;IAED,mEAAmE;IAEnE,mBAAmB,CAAC,CAAc;QAChC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IACpD,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,EAAoB,CAAC;IAClD,CAAC;IAMO,gBAAgB;QACtB,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;IAED,kCAAkC;IAElC,KAAK,CAAC,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED,iCAAiC;IAEjC,KAAK,CAAC,UAAU,CAAC,QAAgB;QAC/B,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAEO,iBAAiB,CAAC,QAAgB;QACxC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;QAC1D,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAClC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBACf,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBACvB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC;IAEO,OAAO;QACb,IAAI,SAAS,EAAE,KAAK,MAAM,CAAC,OAAO,IAAI,SAAS,EAAE,KAAK,MAAM,CAAC,YAAY,EAAE,CAAC;YAC1E,OAAO,eAAe,CAAC,OAAO,CAAC;QACjC,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAEO,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;QAC1E,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,EAAE,CAAC;YACrC,QAAwB,CAAC,KAAK,EAAE,CAAC;QACpC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,EAAE,KAAK,eAAe,CAAC,OAAO;gBACxC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;gBAC7C,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,KAAa;QAC9B,MAAM,MAAM,GAAG,IAAI,GAAG,EAAoB,CAAC;QAC3C,MAAM,eAAe,GAAG,uBAAuB,IAAI,CAAC,WAAW,IAAI,CAAC;QACpE,MAAM,iBAAiB,GAAG,+BAA+B,CAAC;QAC1D,KAAK,CAAC,OAAO,CAAC,CAAC,IAAU,EAAE,EAAE;YAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;YACzC,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc;iBACrC,KAAK,CAAC,GAAG,CAAC;iBACV,IAAI,CAAC,CAAC,GAAW,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YACvE,MAAM,UAAU,GAAG,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC;YAChD,IAAI,UAAU,IAAI,YAAY,EAAE,CAAC;gBAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;oBAClD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;gBACxB,CAAC;gBAED,OAAO;YACT,CAAC;YACD,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC9C,CAAC;YACD,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,WAAW;QACjB,OAAO,YAAM,EAAE,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CAAC;IAClD,CAAC;IAEO,iBAAiB,CAAC,QAAQ;QAChC,OAAO,YAAM,KAAK,EAAE,QAAQ,IAAG,IAAI,CAAC,WAAW,CAAQ,CAAC;IAC1D,CAAC;IAEO,2BAA2B;QACjC,IAAI,gBAAgB,GAAG,EAAE,CAAC;QAC1B,IAAI,gBAAgB,GAAG,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc;iBACnC,KAAK,CAAC,IAAI,CAAC;iBACX,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;iBAClD,IAAI,CAAC,IAAI,CAAC,CAAC;YACd,gBAAgB,GAAG,gBAAgB,UAAU,EAAE,CAAC;QAClD,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,gBAAgB,GAAG,sBAAsB,IAAI,CAAC,WAAW,YAAY,CAAC;QACxE,CAAC;QAED,MAAM,WAAW,GAAG,qBAAqB,gBAAgB,GAAG,gBAAgB,GAAG,CAAC;QAEhF,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,gBAAgB,IAAI,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAQ,CAAC;IACjG,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,OAAO,CACL,eAAS,KAAK,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;YACrE,YAAM,KAAK,EAAC,cAAc,2BAA4B;YACtD,WAAK,KAAK,EAAC,eAAe;gBACxB,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB;YACN,iBAAW,IAAI,EAAE,WAAW,CAAC,MAAM,GAAI,CAC/B,CACX,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,6BACM,IAAI,CAAC,eAAe,IACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EACvC,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,IAChC,CACH,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,OAAO;YACL,IAAI,CAAC,WAAW,EAAE;YAClB,gBACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EACjC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;oBAChB,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;wBAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;oBACrB,CAAC;gBACH,CAAC,EACD,EAAE,EAAC,YAAY,EACf,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,IAEhC,IAAI,CAAC,cAAc,CACX;SACZ,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO;YACL,IAAI,CAAC,WAAW,EAAE;YAClB,YAAM,KAAK,EAAC,yBAAyB;;gBACxB,GAAG;gBACd,YACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EACjC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;wBAChB,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;4BAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;wBACrB,CAAC;oBACH,CAAC,EACD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,aAGhC;gBAAC,GAAG;mCAEN;SACR,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO;YACL,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC;YACnC,IAAI,CAAC,2BAA2B,EAAE;YAClC,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAI,CAAC,kBAAkB,EAAE;SAC1B,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,OAAO;YACL,IAAI,CAAC,iBAAiB,EAAE;YACxB,8CAAsC,IAAI,CAAC,gBAAgB;gBACzD,WAAK,KAAK,EAAC,gBAAgB;oBACxB,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC;oBAChC,IAAI,CAAC,gBAAgB,EAAE;oBACvB,IAAI,CAAC,2BAA2B,EAAE,CAC/B,CACU;SACnB,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,GAAG,EAAE,KAAK;;QAClC,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAErD,OAAO,CACL,YAAM,KAAK,EAAC,eAAe;;YACjB,YAAM,KAAK,EAAC,WAAW,IAAE,GAAG,CAAQ;iBAAE,MAAA,KAAK,CAAC,CAAC,CAAC,mCAAI,EAAE;YAC3D,UAAU,EACV,MAAA,KAAK,CAAC,CAAC,CAAC,mCAAI,EAAE;gBACV,CACR,CAAC;IACJ,CAAC;IAEO,uBAAuB;QAC7B,OAAO,CACL,WAAK,IAAI,EAAC,cAAc;YACtB,WAAK,KAAK,EAAC,eAAe;gBACxB,WAAK,KAAK,EAAC,OAAO,IACf,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;oBAClD,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAQ,CAAC;gBAC1E,CAAC,CAAC,CACE,CACF,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,EAAE,EAAE;gBAEnC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpC,IAAI,CAAC,OAAO,EAAE,IAAI,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAC7F;YACL,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAC3B,eACE,OAAO,EAAE,eAAe,IAAI,CAAC,IAAI,cAAc,EAC/C,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACrC,UAAU,EAAC,uBAAuB,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,EAAoB,CAAC,EACrE,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,EAAoB,CAAC,IAE9E,IAAI,CAAC,uBAAuB,EAAE,CACvB,CACX,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, EventEmitter, Event, State, Listen, Element, Host, Method} from \"@stencil/core\";\nimport {ButtonVariant, Device, DividerSize, ZFileUploadType} from \"../../../beans\";\nimport {getDevice} from \"../../../utils/utils\";\n\n@Component({\n tag: \"z-file-upload\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZFileUpload {\n /** Prop indicating the file upload type - can be default or dragdrop /\n @Prop({reflect: true})\n type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n /* Prop indicating the button variant/\n @Prop()\n buttonVariant?: ButtonVariant;\n\n /* Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" /\n @Prop()\n acceptedFormat?: string;\n\n /* Max file dimension in Megabyte /\n @Prop()\n fileMaxSize?: number;\n\n /* Title /\n @Prop()\n mainTitle?: string;\n\n /* Description /\n @Prop()\n description?: string;\n\n /* Files added by the user /\n @State()\n files: File[] = [];\n\n /* upoload button label /\n @Prop()\n uploadBtnLabel?: string = \"allega\";\n\n /* drag & drop button label /\n @Prop()\n dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n /* uploaded files history rendering /\n @Prop()\n hasFileSection?: boolean = true;\n\n /* List of files not allowed to be uploaded /\n @State()\n invalidFiles: Map<string, string[]>;\n\n @Element() el: HTMLZFileUploadElement;\n\n private input: HTMLInputElement;\n\n private button: HTMLZButtonElement;\n\n private errorModal: HTMLZModalElement;\n\n private uploadLink: HTMLSpanElement;\n\n private inputAttributes = {\n type: \"file\",\n id: \"file-elem\",\n multiple: true,\n };\n\n /* Listen removeFile event sent from z-file component /\n @Listen(\"removeFile\")\n removeFileListener(e: CustomEvent): void {\n this.removeFileHandler(e.detail);\n }\n\n /* Listen fileDropped event sent from z-dragdrop-area component /\n @Listen(\"fileDropped\")\n fileDroppedListener(e: CustomEvent): void {\n this.input.files = e.detail;\n this.fileInputHandler();\n }\n\n componentDidUpdate(): void {\n this.handleAccessibility();\n this.invalidFiles.size && this.errorModal.focus();\n }\n\n componentWillLoad(): void {\n this.invalidFiles = new Map<string, string[]>();\n }\n\n /* Emitted when user select one or more files /\n @Event()\n fileInput: EventEmitter;\n\n private fileInputHandler(): void {\n if (this.input.files.length) {\n this.invalidFiles = this.checkFiles(Array.from(this.input.files));\n }\n }\n\n /* get array of uploaded files /\n @Method()\n async getFiles(): Promise<File[]> {\n return this.files;\n }\n\n /* remove file from the array */\n @Method()\n async removeFile(fileName: string): Promise<void> {\n this.removeFileHandler(fileName);\n }\n\n private removeFileHandler(fileName: string): void {\n const files = this.files;\n const file = files.find((file) => file.name === fileName);\n if (file) {\n const index = files.indexOf(file);\n if (index >= 0) {\n files.splice(index, 1);\n this.files = [...files];\n }\n }\n }\n\n private getType(): ZFileUploadType {\n if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {\n return ZFileUploadType.DEFAULT;\n }\n\n return this.type;\n }\n\n private handleAccessibility(): void {\n const lastFile = this.el.querySelector(\"z-file:last-child z-chip button\");\n if (this.files.length > 0 && lastFile) {\n (lastFile as HTMLElement).focus();\n } else {\n this.getType() === ZFileUploadType.DEFAULT\n ? this.button.querySelector(\"button\").focus()\n : this.uploadLink.focus();\n }\n }\n\n private checkFiles(files: File[]): Map<string, string[]> {\n const errors = new Map<string, string[]>();\n const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;\n const formatErrorString = \" ha un formato non supportato\";\n files.forEach((file: File) => {\n const fileSize = file.size / 1024 / 1024;\n const fileFormatOk = this.acceptedFormat\n .split(\",\")\n .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n const fileSizeOk = fileSize <= this.fileMaxSize;\n if (fileSizeOk && fileFormatOk) {\n if (!this.files.find((f) => f.name === file.name)) {\n this.files.push(file);\n this.fileInput.emit(file);\n this.input.value = \"\";\n }\n\n return;\n }\n errors.set(file.name, []);\n if (!fileSizeOk) {\n errors.get(file.name).push(sizeErrorString);\n }\n if (!fileFormatOk) {\n errors.get(file.name).push(formatErrorString);\n }\n });\n\n return errors;\n }\n\n private renderTitle(): HTMLElement {\n return <span id=\"title\">{this.mainTitle}</span>;\n }\n\n private renderDescription(cssClass): HTMLElement {\n return <span class={cssClass}>{this.description}</span>;\n }\n\n private renderAllowedFileExtensions(): HTMLElement {\n let fileFormatString = \"\";\n let fileWeightString = \"\";\n\n if (this.acceptedFormat) {\n const fileFormat = this.acceptedFormat\n .split(\", \")\n .map((string) => string.substring(1).toUpperCase())\n .join(\", \");\n fileFormatString = ` nei formati ${fileFormat}`;\n }\n\n if (this.fileMaxSize) {\n fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n }\n\n const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;\n\n return <span class=\"body-3\">{fileFormatString \|\| fileWeightString ? finalString : null}</span>;\n }\n\n private renderFileSection(): HTMLElement {\n if (!this.hasFileSection) {\n return;\n }\n\n return (\n <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n <span class=\"heading-4-sb\">File appena caricati</span>\n <div class=\"files-wrapper\">\n <slot name=\"files\" />\n </div>\n <z-divider size={DividerSize.MEDIUM} />\n </section>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n {...this.inputAttributes}\n onChange={() => this.fileInputHandler()}\n accept={this.acceptedFormat}\n ref={(val) => (this.input = val)}\n />\n );\n }\n\n private renderUploadButton(): unknown[] {\n return [\n this.renderInput(),\n <z-button\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" \|\| e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n id=\"fileSelect\"\n variant={this.buttonVariant}\n icon=\"upload\"\n ref={(val) => (this.button = val)}\n >\n {this.uploadBtnLabel}\n </z-button>,\n ];\n }\n\n private renderUploadLink(): unknown[] {\n return [\n this.renderInput(),\n <span class=\"body-1 upload-link-text\">\n Trascina o{\" \"}\n <span\n tabIndex={0}\n class=\"body-1-sb upload-link\"\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" \|\| e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n ref={(val) => (this.uploadLink = val)}\n >\n carica\n </span>{\" \"}\n dal tuo computer\n </span>,\n ];\n }\n\n private renderDefaultMode(): unknown[] {\n return [\n this.renderDescription(\"body-3-sb\"),\n this.renderAllowedFileExtensions(),\n this.renderFileSection(),\n this.renderUploadButton(),\n ];\n }\n\n private renderDragDropMode(): unknown[] {\n return [\n this.renderFileSection(),\n <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n <div class=\"text-container\">\n {this.renderDescription(\"body-1\")}\n {this.renderUploadLink()}\n {this.renderAllowedFileExtensions()}\n </div>\n </z-dragdrop-area>,\n ];\n }\n\n private formatErrorString(key, value): string {\n const bothErrors = value[0] && value[1] ? \" e \" : \"\";\n\n return (\n <span class=\"error-message\">\n Il file <span class=\"file-name\">{key}</span> {value[1] ?? \"\"}\n {bothErrors}\n {value[0] ?? \"\"}.\n </span>\n );\n }\n\n private handleErrorModalContent(): HTMLDivElement {\n return (\n <div slot=\"modalContent\">\n <div class=\"modal-wrapper\">\n <div class=\"files\">\n {Array.from(this.invalidFiles).map(([key, value]) => {\n return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n })}\n </div>\n </div>\n </div>\n );\n }\n\n render(): HTMLZFileUploadElement {\n return (\n <Host>\n <div\n tabIndex={0}\n class={`container ${this.getType()}`}\n >\n {this.mainTitle && this.renderTitle()}\n {this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n </div>\n {!!this.invalidFiles.size && (\n <z-modal\n modalid={`file-upload-${this.type}-error-modal`}\n tabIndex={0}\n ref={(val) => (this.errorModal = val)}\n modaltitle=\"Errore di caricamento\"\n onModalClose={() => (this.invalidFiles = new Map<string, string[]>())}\n onModalBackgroundClick={() => (this.invalidFiles = new Map<string, string[]>())}\n >\n {this.handleErrorModalContent()}\n </z-modal>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, Device, DividerSize, ZFileUploadType} from \"../../../beans\";\nimport {getDevice} from \"../../../utils/utils\";\n\n@Component({\n tag: \"z-file-upload\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZFileUpload {\n /** Prop indicating the file upload type - can be default or dragdrop /\n @Prop({reflect: true})\n type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n /* Prop indicating the button variant/\n @Prop()\n buttonVariant?: ButtonVariant;\n\n /* Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" /\n @Prop()\n acceptedFormat?: string;\n\n /* Max file dimension in Megabyte /\n @Prop()\n fileMaxSize?: number;\n\n /* Title /\n @Prop()\n mainTitle?: string;\n\n /* Description /\n @Prop()\n description?: string;\n\n /* Files added by the user /\n @State()\n files: File[] = [];\n\n /* upoload button label /\n @Prop()\n uploadBtnLabel?: string = \"allega\";\n\n /* drag & drop button label /\n @Prop()\n dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n /* uploaded files history rendering /\n @Prop()\n hasFileSection?: boolean = true;\n\n /* List of files not allowed to be uploaded /\n @State()\n invalidFiles: Map<string, string[]>;\n\n @Element() el: HTMLZFileUploadElement;\n\n private input: HTMLInputElement;\n\n private button: HTMLZButtonElement;\n\n private errorModal: HTMLZModalElement;\n\n private uploadLink: HTMLSpanElement;\n\n private inputAttributes = {\n type: \"file\",\n id: \"file-elem\",\n multiple: true,\n };\n\n /* Listen removeFile event sent from z-file component /\n @Listen(\"removeFile\")\n removeFileListener(e: CustomEvent): void {\n this.removeFileHandler(e.detail);\n }\n\n /* Listen fileDropped event sent from z-dragdrop-area component /\n @Listen(\"fileDropped\")\n fileDroppedListener(e: CustomEvent): void {\n this.input.files = e.detail;\n this.fileInputHandler();\n }\n\n componentDidUpdate(): void {\n this.handleAccessibility();\n this.invalidFiles.size && this.errorModal.focus();\n }\n\n componentWillLoad(): void {\n this.invalidFiles = new Map<string, string[]>();\n }\n\n /* Emitted when user select one or more files /\n @Event()\n fileInput: EventEmitter;\n\n private fileInputHandler(): void {\n if (this.input.files.length) {\n this.invalidFiles = this.checkFiles(Array.from(this.input.files));\n }\n }\n\n /* get array of uploaded files /\n @Method()\n async getFiles(): Promise<File[]> {\n return this.files;\n }\n\n /* remove file from the array */\n @Method()\n async removeFile(fileName: string): Promise<void> {\n this.removeFileHandler(fileName);\n }\n\n private removeFileHandler(fileName: string): void {\n const files = this.files;\n const file = files.find((file) => file.name === fileName);\n if (file) {\n const index = files.indexOf(file);\n if (index >= 0) {\n files.splice(index, 1);\n this.files = [...files];\n }\n }\n }\n\n private getType(): ZFileUploadType {\n if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {\n return ZFileUploadType.DEFAULT;\n }\n\n return this.type;\n }\n\n private handleAccessibility(): void {\n const lastFile = this.el.querySelector(\"z-file:last-child z-chip button\");\n if (this.files.length > 0 && lastFile) {\n (lastFile as HTMLElement).focus();\n } else {\n this.getType() === ZFileUploadType.DEFAULT\n ? this.button.querySelector(\"button\").focus()\n : this.uploadLink.focus();\n }\n }\n\n private checkFiles(files: File[]): Map<string, string[]> {\n const errors = new Map<string, string[]>();\n const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;\n const formatErrorString = \" ha un formato non supportato\";\n files.forEach((file: File) => {\n const fileSize = file.size / 1024 / 1024;\n const fileFormatOk = this.acceptedFormat\n .split(\",\")\n .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n const fileSizeOk = fileSize <= this.fileMaxSize;\n if (fileSizeOk && fileFormatOk) {\n if (!this.files.find((f) => f.name === file.name)) {\n this.files.push(file);\n this.fileInput.emit(file);\n this.input.value = \"\";\n }\n\n return;\n }\n errors.set(file.name, []);\n if (!fileSizeOk) {\n errors.get(file.name).push(sizeErrorString);\n }\n if (!fileFormatOk) {\n errors.get(file.name).push(formatErrorString);\n }\n });\n\n return errors;\n }\n\n private renderTitle(): HTMLElement {\n return <span id=\"title\">{this.mainTitle}</span>;\n }\n\n private renderDescription(cssClass): HTMLElement {\n return <span class={cssClass}>{this.description}</span>;\n }\n\n private renderAllowedFileExtensions(): HTMLElement {\n let fileFormatString = \"\";\n let fileWeightString = \"\";\n\n if (this.acceptedFormat) {\n const fileFormat = this.acceptedFormat\n .split(\", \")\n .map((string) => string.substring(1).toUpperCase())\n .join(\", \");\n fileFormatString = ` nei formati ${fileFormat}`;\n }\n\n if (this.fileMaxSize) {\n fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n }\n\n const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;\n\n return <span class=\"body-3\">{fileFormatString \|\| fileWeightString ? finalString : null}</span>;\n }\n\n private renderFileSection(): HTMLElement {\n if (!this.hasFileSection) {\n return;\n }\n\n return (\n <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n <span class=\"heading-4-sb\">File appena caricati</span>\n <div class=\"files-wrapper\">\n <slot name=\"files\" />\n </div>\n <z-divider size={DividerSize.MEDIUM} />\n </section>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n {...this.inputAttributes}\n onChange={() => this.fileInputHandler()}\n accept={this.acceptedFormat}\n ref={(val) => (this.input = val)}\n />\n );\n }\n\n private renderUploadButton(): unknown[] {\n return [\n this.renderInput(),\n <z-button\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" \|\| e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n id=\"fileSelect\"\n variant={this.buttonVariant}\n icon=\"upload\"\n ref={(val) => (this.button = val)}\n >\n {this.uploadBtnLabel}\n </z-button>,\n ];\n }\n\n private renderUploadLink(): unknown[] {\n return [\n this.renderInput(),\n <span class=\"body-1 upload-link-text\">\n Trascina o{\" \"}\n <span\n tabIndex={0}\n class=\"body-1-sb upload-link\"\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" \|\| e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n ref={(val) => (this.uploadLink = val)}\n >\n carica\n </span>{\" \"}\n dal tuo computer\n </span>,\n ];\n }\n\n private renderDefaultMode(): unknown[] {\n return [\n this.renderDescription(\"body-3-sb\"),\n this.renderAllowedFileExtensions(),\n this.renderFileSection(),\n this.renderUploadButton(),\n ];\n }\n\n private renderDragDropMode(): unknown[] {\n return [\n this.renderFileSection(),\n <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n <div class=\"text-container\">\n {this.renderDescription(\"body-1\")}\n {this.renderUploadLink()}\n {this.renderAllowedFileExtensions()}\n </div>\n </z-dragdrop-area>,\n ];\n }\n\n private formatErrorString(key, value): string {\n const bothErrors = value[0] && value[1] ? \" e \" : \"\";\n\n return (\n <span class=\"error-message\">\n Il file <span class=\"file-name\">{key}</span> {value[1] ?? \"\"}\n {bothErrors}\n {value[0] ?? \"\"}.\n </span>\n );\n }\n\n private handleErrorModalContent(): HTMLDivElement {\n return (\n <div slot=\"modalContent\">\n <div class=\"modal-wrapper\">\n <div class=\"files\">\n {Array.from(this.invalidFiles).map(([key, value]) => {\n return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n })}\n </div>\n </div>\n </div>\n );\n }\n\n render(): HTMLZFileUploadElement {\n return (\n <Host>\n <div\n tabIndex={0}\n class={`container ${this.getType()}`}\n >\n {this.mainTitle && this.renderTitle()}\n {this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n </div>\n {!!this.invalidFiles.size && (\n <z-modal\n modalid={`file-upload-${this.type}-error-modal`}\n tabIndex={0}\n ref={(val) => (this.errorModal = val)}\n modaltitle=\"Errore di caricamento\"\n onModalClose={() => (this.invalidFiles = new Map<string, string[]>())}\n onModalBackgroundClick={() => (this.invalidFiles = new Map<string, string[]>())}\n >\n {this.handleErrorModalContent()}\n </z-modal>\n )}\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["~~../../../../~~src/components/file-upload/z-file-upload/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;;8BAMkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA6Bb,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;8BAKkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAoCI,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC5E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;;;8BAOkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0Bb,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZFileUpload} from \"./index\";\n\ndescribe(\"Suite test ZFileUpload\", () => {\n it(\"Test render ZFileUpload default\", async () => {\n const page = await newSpecPage({\n components: [ZFileUpload],\n html: `<z-file-upload type=\"default\"\n variant=\"primary\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">>\n </z-file-upload>`,\n });\n expect(page.root).toEqualHtml(`\n <z-file-upload accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\" file-max-size=\"50\" main-title=\"Allega un file\" type=\"default\" variant=\"primary\">\n <mock:shadow-root>\n <div class=\"container default\" tabindex=\"0\">\n <span id=\"title\">\n Allega un file\n </span>\n <span class=\"body-3-sb\">\n Vuoi allegare un file per chiarire meglio la tua richiesta?\n </span>\n <span class=\"body-3\">\n Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.\n </span>\n <section class=\"files-container hidden\">\n <span class=\"heading-4-sb\">\n File appena caricati\n </span>\n <div class=\"files-wrapper\">\n <slot name=\"files\"></slot>\n </div>\n <z-divider size=\"medium\"></z-divider>\n </section>\n <input accept=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" id=\"file-elem\" multiple=\"\" type=\"file\">\n <z-button icon=\"upload\" id=\"fileSelect\">\n allega\n </z-button>\n </div>\n </mock:shadow-root>\n >\n </z-file-upload>`);\n });\n\n it(\"Test render ZFileUpload dragdrop\", async () => {\n const page = await newSpecPage({\n components: [ZFileUpload],\n html: `<z-file-upload type=\"dragdrop\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">>\n </z-file-upload>`,\n });\n expect(page.root)\n .toEqualHtml(` <z-file-upload accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\" file-max-size=\"50\" main-title=\"Allega un file\" type=\"dragdrop\">\n <mock:shadow-root>\n <div class=\"container dragdrop\" tabindex=\"0\">\n <span id=\"title\">\n Allega un file\n </span>\n <section class=\"files-container hidden\">\n <span class=\"heading-4-sb\">\n File appena caricati\n </span>\n <div class=\"files-wrapper\">\n <slot name=\"files\"></slot>\n </div>\n <z-divider size=\"medium\"></z-divider>\n </section>\n <z-dragdrop-area drag-and-drop-label=\"Rilascia i file in questa area per allegarli.\">\n <div class=\"text-container\">\n <span class=\"body-1\">\n Vuoi allegare un file per chiarire meglio la tua richiesta?\n </span>\n <input accept=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" id=\"file-elem\" multiple=\"\" type=\"file\">\n <span class=\"body-1 upload-link-text\">\n Trascina o\n <span class=\"body-1-sb upload-link\" tabindex=\"0\">\n carica\n </span>\n dal tuo computer\n </span>\n <span class=\"body-3\">\n Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.\n </span>\n </div>\n </z-dragdrop-area>\n </div>\n </mock:shadow-root>\n >\n </z-file-upload>`);\n });\n\n it(\"Test render ZFileUpload with custom label and not main-title\", async () => {\n const page = await newSpecPage({\n components: [ZFileUpload],\n html: `<z-file-upload type=\"default\"\n variant=\"primary\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n upload-btn-label=\"testo custom\"\n drag-and-drop-label=\"drag and drop custom label\"\n file-max-size=\"50\">>\n </z-file-upload>`,\n });\n expect(page.root).toEqualHtml(`\n <z-file-upload accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\" file-max-size=\"50\" upload-btn-label=\"testo custom\" drag-and-drop-label=\"drag and drop custom label\" type=\"default\" variant=\"primary\">\n <mock:shadow-root>\n <div class=\"container default\" tabindex=\"0\">\n <span class=\"body-3-sb\">\n Vuoi allegare un file per chiarire meglio la tua richiesta?\n </span>\n <span class=\"body-3\">\n Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.\n </span>\n <section class=\"files-container hidden\">\n <span class=\"heading-4-sb\">\n File appena caricati\n </span>\n <div class=\"files-wrapper\">\n <slot name=\"files\"></slot>\n </div>\n <z-divider size=\"medium\"></z-divider>\n </section>\n <input accept=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" id=\"file-elem\" multiple=\"\" type=\"file\">\n <z-button icon=\"upload\" id=\"fileSelect\">\n testo custom\n </z-button>\n </div>\n </mock:shadow-root>\n >\n </z-file-upload>`);\n });\n});\n"]}
1	+ {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;;8BAMkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA6Bb,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;8BAKkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAoCI,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC5E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;;;8BAOkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0Bb,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZFileUpload} from \"./index\";\n\ndescribe(\"Suite test ZFileUpload\", () => {\n it(\"Test render ZFileUpload default\", async () => {\n const page = await newSpecPage({\n components: [ZFileUpload],\n html: `<z-file-upload type=\"default\"\n variant=\"primary\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">>\n </z-file-upload>`,\n });\n expect(page.root).toEqualHtml(`\n <z-file-upload accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\" file-max-size=\"50\" main-title=\"Allega un file\" type=\"default\" variant=\"primary\">\n <mock:shadow-root>\n <div class=\"container default\" tabindex=\"0\">\n <span id=\"title\">\n Allega un file\n </span>\n <span class=\"body-3-sb\">\n Vuoi allegare un file per chiarire meglio la tua richiesta?\n </span>\n <span class=\"body-3\">\n Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.\n </span>\n <section class=\"files-container hidden\">\n <span class=\"heading-4-sb\">\n File appena caricati\n </span>\n <div class=\"files-wrapper\">\n <slot name=\"files\"></slot>\n </div>\n <z-divider size=\"medium\"></z-divider>\n </section>\n <input accept=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" id=\"file-elem\" multiple=\"\" type=\"file\">\n <z-button icon=\"upload\" id=\"fileSelect\">\n allega\n </z-button>\n </div>\n </mock:shadow-root>\n >\n </z-file-upload>`);\n });\n\n it(\"Test render ZFileUpload dragdrop\", async () => {\n const page = await newSpecPage({\n components: [ZFileUpload],\n html: `<z-file-upload type=\"dragdrop\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">>\n </z-file-upload>`,\n });\n expect(page.root)\n .toEqualHtml(` <z-file-upload accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\" file-max-size=\"50\" main-title=\"Allega un file\" type=\"dragdrop\">\n <mock:shadow-root>\n <div class=\"container dragdrop\" tabindex=\"0\">\n <span id=\"title\">\n Allega un file\n </span>\n <section class=\"files-container hidden\">\n <span class=\"heading-4-sb\">\n File appena caricati\n </span>\n <div class=\"files-wrapper\">\n <slot name=\"files\"></slot>\n </div>\n <z-divider size=\"medium\"></z-divider>\n </section>\n <z-dragdrop-area drag-and-drop-label=\"Rilascia i file in questa area per allegarli.\">\n <div class=\"text-container\">\n <span class=\"body-1\">\n Vuoi allegare un file per chiarire meglio la tua richiesta?\n </span>\n <input accept=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" id=\"file-elem\" multiple=\"\" type=\"file\">\n <span class=\"body-1 upload-link-text\">\n Trascina o\n <span class=\"body-1-sb upload-link\" tabindex=\"0\">\n carica\n </span>\n dal tuo computer\n </span>\n <span class=\"body-3\">\n Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.\n </span>\n </div>\n </z-dragdrop-area>\n </div>\n </mock:shadow-root>\n >\n </z-file-upload>`);\n });\n\n it(\"Test render ZFileUpload with custom label and not main-title\", async () => {\n const page = await newSpecPage({\n components: [ZFileUpload],\n html: `<z-file-upload type=\"default\"\n variant=\"primary\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n upload-btn-label=\"testo custom\"\n drag-and-drop-label=\"drag and drop custom label\"\n file-max-size=\"50\">>\n </z-file-upload>`,\n });\n expect(page.root).toEqualHtml(`\n <z-file-upload accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\" file-max-size=\"50\" upload-btn-label=\"testo custom\" drag-and-drop-label=\"drag and drop custom label\" type=\"default\" variant=\"primary\">\n <mock:shadow-root>\n <div class=\"container default\" tabindex=\"0\">\n <span class=\"body-3-sb\">\n Vuoi allegare un file per chiarire meglio la tua richiesta?\n </span>\n <span class=\"body-3\">\n Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.\n </span>\n <section class=\"files-container hidden\">\n <span class=\"heading-4-sb\">\n File appena caricati\n </span>\n <div class=\"files-wrapper\">\n <slot name=\"files\"></slot>\n </div>\n <z-divider size=\"medium\"></z-divider>\n </section>\n <input accept=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" id=\"file-elem\" multiple=\"\" type=\"file\">\n <z-button icon=\"upload\" id=\"fileSelect\">\n testo custom\n </z-button>\n </div>\n </mock:shadow-root>\n >\n </z-file-upload>`);\n });\n});\n"]}

package/dist/collection/components/file-upload/z-file-upload/index.stories.js ADDED Viewed

@@ -0,0 +1,95 @@
+import { html } from "lit";
+import { ButtonVariant, ZFileUploadType } from "../../../beans";
+import "./index";
+const StoryMeta = {
+    title: "ZFileUpload",
+    component: "z-file-upload",
+    argTypes: {
+        type: {
+            options: Object.values(ZFileUploadType),
+            control: {
+                type: "inline-radio",
+            },
+        },
+        buttonVariant: {
+            options: Object.values(ButtonVariant),
+            control: {
+                type: "inline-radio",
+            },
+        },
+    },
+    args: {
+        fileMaxSize: 50,
+        acceptedFormat: ".pdf, .doc, .tiff, .png, .jpg",
+        mainTitle: "Allega un file",
+        description: "Vuoi allegare un file per chiarire meglio la tua richiesta?",
+        uploadBtnLabel: "allega",
+        hasFileSection: true,
+    },
+};
+export default StoryMeta;
+export const Default = {
+    args: {
+        buttonVariant: ButtonVariant.PRIMARY,
+    },
+    render: (args) => html `<h4 class="heading-4">
+        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before
+        using it!
+      </h4>
+      <z-file-upload
+        type=${ZFileUploadType.DEFAULT}
+        .hasFileSection=${args.hasFileSection}
+        description="${args.description}"
+        .buttonVariant=${args.buttonVariant}
+        .fileMaxSize=${args.fileMaxSize}
+        .acceptedFormat=${args.acceptedFormat}
+        .mainTitle=${args.mainTitle}
+        .uploadBtnLabel=${args.uploadBtnLabel}
+      >
+      </z-file-upload>
+      <script>
+        let uploaderDefault = document.querySelector("z-file-upload");
+        let fileNumber = 0;
+        document.addEventListener("fileInput", (e) => {
+          fileNumber++;
+          const item = e.detail;
+          const chip = document.createElement("Z-FILE");
+          chip.setAttribute("slot", "files");
+          chip.setAttribute("file-number", fileNumber);
+          chip.setAttribute("file-name", item.name);
+          uploaderDefault.appendChild(chip);
+        });
+      </script>`,
+};
+export const Dragdrop = {
+    args: {
+        dragAndDropLabel: "Rilascia i file in questa area per allegarli.",
+    },
+    render: (args) => html `<h4 class="heading-4">
+        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before
+        using it!
+      </h4>
+      <br />
+      <z-file-upload
+        type=${ZFileUploadType.DRAGDROP}
+        .hasFileSection=${args.hasFileSection}
+        description="${args.description}"
+        .fileMaxSize=${args.fileMaxSize}
+        .acceptedFormat=${args.acceptedFormat}
+        .mainTitle=${args.mainTitle}
+        .dragAndDropLabel=${args.dragAndDropLabel}
+      >
+      </z-file-upload>
+      <script>
+        const uploaderDragdrop = document.querySelector("z-file-upload");
+        document.addEventListener("fileInput", (e) => {
+          const item = e.detail;
+          const chip = document.createElement("Z-FILE");
+          chip.setAttribute("slot", "files");
+          chip.setAttribute("filetype", item.type);
+          chip.setAttribute("file-name", item.name);
+          uploaderDragdrop.appendChild(chip);
+        });
+      </script>`,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/file-upload/z-file-upload/index.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC;YACrC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,EAAE;QACf,cAAc,EAAE,+BAA+B;QAC/C,SAAS,EAAE,gBAAgB;QAC3B,WAAW,EAAE,6DAA6D;QAC1E,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,IAAI;KACrB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,aAAa,EAAE,aAAa,CAAC,OAAO;KACrC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;eAKO,eAAe,CAAC,OAAO;0BACZ,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;yBACd,IAAI,CAAC,aAAa;uBACpB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;0BACT,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;gBAe7B;CACC,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,gBAAgB,EAAE,+CAA+C;KAClE;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;eAMO,eAAe,CAAC,QAAQ;0BACb,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;gBAajC;CACC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFileUpload} from \".\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZFileUpload\",\n component: \"z-file-upload\",\n argTypes: {\n type: {\n options: Object.values(ZFileUploadType),\n control: {\n type: \"inline-radio\",\n },\n },\n buttonVariant: {\n options: Object.values(ButtonVariant),\n control: {\n type: \"inline-radio\",\n },\n },\n },\n args: {\n fileMaxSize: 50,\n acceptedFormat: \".pdf, .doc, .tiff, .png, .jpg\",\n mainTitle: \"Allega un file\",\n description: \"Vuoi allegare un file per chiarire meglio la tua richiesta?\",\n uploadBtnLabel: \"allega\",\n hasFileSection: true,\n },\n} satisfies Meta<ZFileUpload>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZFileUpload>;\n\nexport const Default = {\n args: {\n buttonVariant: ButtonVariant.PRIMARY,\n },\n render: (args) =>\n html`<h4 class=\"heading-4\">\n This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n using it!\n </h4>\n <z-file-upload\n type=${ZFileUploadType.DEFAULT}\n .hasFileSection=${args.hasFileSection}\n description=\"${args.description}\"\n .buttonVariant=${args.buttonVariant}\n .fileMaxSize=${args.fileMaxSize}\n .acceptedFormat=${args.acceptedFormat}\n .mainTitle=${args.mainTitle}\n .uploadBtnLabel=${args.uploadBtnLabel}\n >\n </z-file-upload>\n <script>\n let uploaderDefault = document.querySelector(\"z-file-upload\");\n let fileNumber = 0;\n document.addEventListener(\"fileInput\", (e) => {\n fileNumber++;\n const item = e.detail;\n const chip = document.createElement(\"Z-FILE\");\n chip.setAttribute(\"slot\", \"files\");\n chip.setAttribute(\"file-number\", fileNumber);\n chip.setAttribute(\"file-name\", item.name);\n uploaderDefault.appendChild(chip);\n });\n </script>`,\n} satisfies Story;\n\nexport const Dragdrop = {\n args: {\n dragAndDropLabel: \"Rilascia i file in questa area per allegarli.\",\n },\n render: (args) =>\n html`<h4 class=\"heading-4\">\n This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n using it!\n </h4>\n <br />\n <z-file-upload\n type=${ZFileUploadType.DRAGDROP}\n .hasFileSection=${args.hasFileSection}\n description=\"${args.description}\"\n .fileMaxSize=${args.fileMaxSize}\n .acceptedFormat=${args.acceptedFormat}\n .mainTitle=${args.mainTitle}\n .dragAndDropLabel=${args.dragAndDropLabel}\n >\n </z-file-upload>\n <script>\n const uploaderDragdrop = document.querySelector(\"z-file-upload\");\n document.addEventListener(\"fileInput\", (e) => {\n const item = e.detail;\n const chip = document.createElement(\"Z-FILE\");\n chip.setAttribute(\"slot\", \"files\");\n chip.setAttribute(\"filetype\", item.type);\n chip.setAttribute(\"file-name\", item.name);\n uploaderDragdrop.appendChild(chip);\n });\n </script>`,\n} satisfies Story;\n"]}

package/dist/collection/components/file-upload/z-file-upload/test.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["~~../../../../~~src/components/file-upload/z-file-upload/test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndescribe(\"z-file-upload test end2end\", () => {\n it(\"Test z-file-upload -> add z-file by click\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-file-upload type=\"default\"\n button-variant=\"primary\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">\n </z-file-upload>\n `);\n const zfu = await page.find(\"z-file-upload\");\n\n await zfu.setProperty(\"acceptedFormat\", \".md\");\n await page.waitForChanges();\n\n // simulate upload of file\n const button = await page.find(\"z-file-upload >>> div z-button >>> button\");\n button.click();\n const fileChooser = await page.waitForFileChooser();\n\n const fileInputEvent = await zfu.spyOnEvent(\"fileInput\");\n\n await fileChooser.accept([\"./readme.md\"]);\n await page.waitForChanges();\n\n expect(fileInputEvent).toHaveReceivedEvent();\n });\n\n it(\"Test z-file-upload -> add z-file by click ERROR: wrong file type\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-file-upload type=\"default\"\n button-variant=\"primary\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">\n </z-file-upload>\n `);\n const zfu = await page.find(\"z-file-upload\");\n\n // simulate upload of file\n const button = await page.find(\"z-file-upload >>> div z-button >>> button\");\n button.click();\n const fileChooser = await page.waitForFileChooser();\n\n const fileInputEvent = await zfu.spyOnEvent(\"fileInput\");\n\n await fileChooser.accept([\"./readme.md\"]);\n await page.waitForChanges();\n\n expect(fileInputEvent).not.toHaveReceivedEvent();\n\n const errorModal = await page.find(\"z-file-upload >>> z-modal\");\n expect(errorModal).not.toBeNull();\n });\n\n it(\"Test z-file-upload -> remove z-file\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-file-upload type=\"default\"\n button-variant=\"primary\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">\n <z-file slot=\"files\" class=\"hydrated\">Spike - Condivisione pagine Kitaboo-OK.pdf</z-file>\n </z-file-upload>\n `);\n\n const zf = await page.find(\"z-file-upload z-file\");\n\n expect(zf).not.toBeNull();\n\n page.evaluate(() => (document.querySelector(\"z-file-upload z-file z-chip z-icon\") as HTMLElement).click());\n await page.waitForChanges();\n const zfCheck = await page.find(\"z-file-upload z-file\");\n\n expect(zfCheck).toBeNull();\n });\n});\n"]}
1	+ {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndescribe(\"z-file-upload test end2end\", () => {\n it(\"Test z-file-upload -> add z-file by click\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-file-upload type=\"default\"\n button-variant=\"primary\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">\n </z-file-upload>\n `);\n const zfu = await page.find(\"z-file-upload\");\n\n await zfu.setProperty(\"acceptedFormat\", \".md\");\n await page.waitForChanges();\n\n // simulate upload of file\n const button = await page.find(\"z-file-upload >>> div z-button >>> button\");\n button.click();\n const fileChooser = await page.waitForFileChooser();\n\n const fileInputEvent = await zfu.spyOnEvent(\"fileInput\");\n\n await fileChooser.accept([\"./readme.md\"]);\n await page.waitForChanges();\n\n expect(fileInputEvent).toHaveReceivedEvent();\n });\n\n it(\"Test z-file-upload -> add z-file by click ERROR: wrong file type\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-file-upload type=\"default\"\n button-variant=\"primary\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">\n </z-file-upload>\n `);\n const zfu = await page.find(\"z-file-upload\");\n\n // simulate upload of file\n const button = await page.find(\"z-file-upload >>> div z-button >>> button\");\n button.click();\n const fileChooser = await page.waitForFileChooser();\n\n const fileInputEvent = await zfu.spyOnEvent(\"fileInput\");\n\n await fileChooser.accept([\"./readme.md\"]);\n await page.waitForChanges();\n\n expect(fileInputEvent).not.toHaveReceivedEvent();\n\n const errorModal = await page.find(\"z-file-upload >>> z-modal\");\n expect(errorModal).not.toBeNull();\n });\n\n it(\"Test z-file-upload -> remove z-file\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-file-upload type=\"default\"\n button-variant=\"primary\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">\n <z-file slot=\"files\" class=\"hydrated\">Spike - Condivisione pagine Kitaboo-OK.pdf</z-file>\n </z-file-upload>\n `);\n\n const zf = await page.find(\"z-file-upload z-file\");\n\n expect(zf).not.toBeNull();\n\n page.evaluate(() => (document.querySelector(\"z-file-upload z-file z-chip z-icon\") as HTMLElement).click());\n await page.waitForChanges();\n const zfCheck = await page.find(\"z-file-upload z-file\");\n\n expect(zfCheck).toBeNull();\n });\n});\n"]}

package/dist/collection/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../~~src/components/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,mBAAmB;AACnB,EAAE;AACF,oEAAoE;AACpE,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,EAAE","sourcesContent":["//\n// Temp workaround:\n//\n// Empty file to prevent errors when importing beans in stencil apps\n// Stencil apps with React bindings will not work\n//\n// Must be fixed\n//\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,mBAAmB;AACnB,EAAE;AACF,oEAAoE;AACpE,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,EAAE","sourcesContent":["//\n// Temp workaround:\n//\n// Empty file to prevent errors when importing beans in stencil apps\n// Stencil apps with React bindings will not work\n//\n// Must be fixed\n//\n"]}

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { ListSize, ListType } from "../../../beans";
 export class ZList {
     constructor() {
@@ -18,7 +18,7 @@ export class ZList {
         this.setChildrenSizeType();
     }
     render() {
-        return (h(Host, { key: 'd49a1ce7a55b23b7905e44d47184672765f9ba34' }, h("slot", { key: 'f813287a50cd22f3f3e0bf1444dc8c5a146fb6ae' })));
+        return (h(Host, { key: 'a5269da1127742a7a9e58e8b0e46174c4c990a39' }, h("slot", { key: 'ced862d8fb2e6e4d86212e9dd22ca1c12a184fe3' })));
     }
     static get is() { return "z-list"; }
     static get encapsulation() { return "shadow"; }
@@ -91,10 +91,10 @@ export class ZList {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "[optional] Sets role of the element."
+                    "text": "Sets role of the element."
                 },
                 "attribute": "role",
                 "reflect": true,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/list/z-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,~~CAAC~~,EAAE,IAAI,EAAE,~~IAAI~~,EAAC,MAAM,eAAe,CAAC;~~AAEhE~~,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOlD,MAAM,OAAO,KAAK;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;~~oBAMnB~~,MAAM;;~~IAEd~~,mBAAmB;QACzB,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,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,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Prop, ~~Host~~} from \"@stencil/core\";\n\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZList {\n @Element() host: HTMLZListElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\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]~~ Sets role of the element.\n */\n @Prop({reflect: true})\n role?: ~~string~~ = \"list\";\n\n private setChildrenSizeType(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n }\n }\n\n componentDidLoad(): void {\n this.setChildrenSizeType();\n }\n\n render(): HTMLZListElement {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOlD,MAAM,OAAO,KAAK;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;oBAM5B,MAAM;;IAEL,mBAAmB;QACzB,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,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,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZList {\n @Element() host: HTMLZListElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\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 Sets role of the element.\n */\n @Prop({reflect: true})\n role = \"list\";\n\n private setChildrenSizeType(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n }\n }\n\n componentDidLoad(): void {\n this.setChildrenSizeType();\n }\n\n render(): HTMLZListElement {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["~~../../../../~~src/components/list/z-list/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;QACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,oDAAoD;SAC3D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,iEAAiE;SACxE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZList} from \"./index\";\n\ndescribe(\"Suite test ZList\", () => {\n it(\"Test render ZList\", async () => {\n const page = await newSpecPage({\n components: [ZList],\n html: `<z-list><z-list-element></z-list-element></z-list>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-list list-type=\"none\" role=\"list\" size=\"medium\">\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n <z-list-element list-element-position=\"1\" list-type=\"none\" size=\"medium\"></z-list-element>\n </z-list>\n `);\n });\n\n it(\"Test render ZList size prop\", async () => {\n const page = await newSpecPage({\n components: [ZList],\n html: `<z-list size=\"large\"><z-list-element></z-list-element></z-list>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-list list-type=\"none\" role=\"list\" size=\"large\">\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n <z-list-element list-element-position=\"1\" list-type=\"none\" size=\"large\"></z-list-element>\n </z-list>\n `);\n });\n});\n"]}
1	+ {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;QACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,oDAAoD;SAC3D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,iEAAiE;SACxE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZList} from \"./index\";\n\ndescribe(\"Suite test ZList\", () => {\n it(\"Test render ZList\", async () => {\n const page = await newSpecPage({\n components: [ZList],\n html: `<z-list><z-list-element></z-list-element></z-list>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-list list-type=\"none\" role=\"list\" size=\"medium\">\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n <z-list-element list-element-position=\"1\" list-type=\"none\" size=\"medium\"></z-list-element>\n </z-list>\n `);\n });\n\n it(\"Test render ZList size prop\", async () => {\n const page = await newSpecPage({\n components: [ZList],\n html: `<z-list size=\"large\"><z-list-element></z-list-element></z-list>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-list list-type=\"none\" role=\"list\" size=\"large\">\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n <z-list-element list-element-position=\"1\" list-type=\"none\" size=\"large\"></z-list-element>\n </z-list>\n `);\n });\n});\n"]}

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

@@ -0,0 +1,185 @@
+import { html } from "lit";
+import { ListSize, ListType } from "../../../beans";
+import "../z-list-element/index";
+import "../z-list-group/index";
+import "./index";
+const StoryMeta = {
+    title: "ZList/ZList",
+    component: "z-list",
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+            },
+            options: Object.values(ListSize),
+        },
+        listType: {
+            control: {
+                type: "select",
+            },
+            options: Object.values(ListType),
+        },
+    },
+    args: {
+        size: ListSize.MEDIUM,
+        listType: ListType.NONE,
+    },
+    render: (args) => html `
+    <z-list
+      .listType=${args.listType}
+      size=${args.size}
+    >
+      <z-list-element
+        .listType=${args.listType}
+        size=${args.size}
+        >Elemento 1</z-list-element
+      >
+      <z-list-element
+        .listType=${args.listType}
+        size=${args.size}
+        >Elemento 2</z-list-element
+      >
+      <z-list-element
+        .listType=${args.listType}
+        size=${args.size}
+        >Elemento 3</z-list-element
+      >
+    </z-list>
+  `,
+};
+export default StoryMeta;
+export const Default = {};
+export const HeaderDivider = {
+    render: (args) => html `<z-list>
+      <z-list-group divider-type="header">
+        <div slot="header-title">Gruppo 1</div>
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 1</z-list-element
+        >
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 2</z-list-element
+        >
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 3</z-list-element
+        >
+      </z-list-group>
+      <z-list-group divider-type="header">
+        <div slot="header-title">Gruppo 2</div>
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 1</z-list-element
+        >
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 2</z-list-element
+        >
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 3</z-list-element
+        >
+      </z-list-group>
+    </z-list>`,
+};
+export const ElementDivider = {
+    render: (args) => html `<z-list>
+      <z-list-group divider-type="element">
+        <div slot="header-title">Gruppo 1</div>
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 1</z-list-element
+        >
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 2</z-list-element
+        >
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 3</z-list-element
+        >
+      </z-list-group>
+      <z-list-group divider-type="element">
+        <div slot="header-title">Gruppo 2</div>
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 1</z-list-element
+        >
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 2</z-list-element
+        >
+        <z-list-element
+          .listType=${args.listType}
+          size=${args.size}
+          >Elemento 3</z-list-element
+        >
+      </z-list-group>
+    </z-list>`,
+};
+export const ClickableElements = {
+    render: () => html `<z-list>
+      <z-list-group>
+        <z-list-element clickable>Elemento 1</z-list-element>
+        <z-list-element clickable>Elemento 2</z-list-element>
+        <z-list-element clickable>Elemento 3</z-list-element>
+      </z-list-group>
+    </z-list>`,
+};
+export const ExpandableElements = {
+    render: () => html `<z-list size="large">
+      <z-list-group divider-type="element">
+        <z-list-element
+          expandable
+          align-button="left"
+          expandable-style="accordion"
+          ><span>Elemento 1</span><span slot="inner-content">INNER CONTENT 1 BUTTON LEFT</span></z-list-element
+        >
+        <z-list-element
+          expandable
+          align-button="right"
+          expandable-style="menu"
+          ><span>Elemento 2</span><span slot="inner-content">INNER CONTENT 2</span></z-list-element
+        >
+        <z-list-element
+          expandable
+          align-button="right"
+          expandable-style="menu"
+          ><span>Elemento 3</span><span slot="inner-content">INNER CONTENT 3</span></z-list-element
+        >
+      </z-list-group>
+    </z-list>`,
+};
+export const UnorderedIndex = {
+    parameters: {
+        controls: {
+            exclude: ["size", "listType"],
+        },
+    },
+    args: {
+        listType: ListType.UNORDERED,
+    },
+};
+export const OrderedIndex = {
+    parameters: {
+        controls: {
+            exclude: ["size", "listType"],
+        },
+    },
+    args: {
+        listType: ListType.ORDERED,
+    },
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZList} from \".\";\nimport {ListSize, ListType} from \"../../../beans\";\nimport \"../z-list-element/index\";\nimport \"../z-list-group/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZList/ZList\",\n component: \"z-list\",\n argTypes: {\n size: {\n control: {\n type: \"select\",\n },\n options: Object.values(ListSize),\n },\n listType: {\n control: {\n type: \"select\",\n },\n options: Object.values(ListType),\n },\n },\n args: {\n size: ListSize.MEDIUM,\n listType: ListType.NONE,\n },\n render: (args) => html`\n <z-list\n .listType=${args.listType}\n size=${args.size}\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list>\n `,\n} satisfies Meta<ZList>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZList>;\n\nexport const Default = {} satisfies Story;\n\nexport const HeaderDivider = {\n render: (args) =>\n html`<z-list>\n <z-list-group divider-type=\"header\">\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group divider-type=\"header\">\n <div slot=\"header-title\">Gruppo 2</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const ElementDivider = {\n render: (args) =>\n html`<z-list>\n <z-list-group divider-type=\"element\">\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group divider-type=\"element\">\n <div slot=\"header-title\">Gruppo 2</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const ClickableElements = {\n render: () =>\n html`<z-list>\n <z-list-group>\n <z-list-element clickable>Elemento 1</z-list-element>\n <z-list-element clickable>Elemento 2</z-list-element>\n <z-list-element clickable>Elemento 3</z-list-element>\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const ExpandableElements = {\n render: () =>\n html`<z-list size=\"large\">\n <z-list-group divider-type=\"element\">\n <z-list-element\n expandable\n align-button=\"left\"\n expandable-style=\"accordion\"\n ><span>Elemento 1</span><span slot=\"inner-content\">INNER CONTENT 1 BUTTON LEFT</span></z-list-element\n >\n <z-list-element\n expandable\n align-button=\"right\"\n expandable-style=\"menu\"\n ><span>Elemento 2</span><span slot=\"inner-content\">INNER CONTENT 2</span></z-list-element\n >\n <z-list-element\n expandable\n align-button=\"right\"\n expandable-style=\"menu\"\n ><span>Elemento 3</span><span slot=\"inner-content\">INNER CONTENT 3</span></z-list-element\n >\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const UnorderedIndex = {\n parameters: {\n controls: {\n exclude: [\"size\", \"listType\"],\n },\n },\n args: {\n listType: ListType.UNORDERED,\n },\n} satisfies Story;\n\nexport const OrderedIndex = {\n parameters: {\n controls: {\n exclude: [\"size\", \"listType\"],\n },\n },\n args: {\n listType: ListType.ORDERED,\n },\n} satisfies Story;\n"]}

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

@@ -115,7 +115,7 @@ export class ZListElement {
         }
     }
     render() {
-        return (h(Host, { key: '237469383255a8c4b6927b6fc7fca35f16709937', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.htmlTabindex }, h("div", { key: 'eab49723116d003d80ee724895e2fc09a4e3cacd', class: "container", style: { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '43573c7439a4a176070a70c7fb9caa5d29c69883', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: 'b62c211ee47f6a05a2404a5f27d44aea4c4d3067', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.htmlTabindex }, h("div", { key: '33ba57474a0a13545a14e9b94b7bda1f762a11b0', class: "container", style: { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '1cfcd978c233414902faf1d4b624aa93cf3bcc11', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'dbe033f9d3a796cb344b640d6a02b4e923bebd2b', color: this.dividerColor, size: this.dividerSize }))));
     }
     static get is() { return "z-list-element"; }
     static get encapsulation() { return "shadow"; }
@@ -409,10 +409,10 @@ export class ZListElement {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "[optional] Sets element role."
+                    "text": "Sets element role."
                 },
                 "attribute": "role",
                 "reflect": true,