@oiz/stzh-components 2.9.0-beta → 2.9.0

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 (59) hide show
  1. package/dist/cjs/{app-globals-51c074d3.js → app-globals-ac2e4efd.js} +2 -2
  2. package/dist/cjs/{app-globals-51c074d3.js.map → app-globals-ac2e4efd.js.map} +1 -1
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/stzh-components.cjs.js +1 -1
  5. package/dist/cjs/stzh-pagebottom.cjs.entry.js.map +1 -1
  6. package/dist/cjs/stzh-upload.cjs.entry.js +63 -35
  7. package/dist/cjs/stzh-upload.cjs.entry.js.map +1 -1
  8. package/dist/collection/assets/i18n/de.json +2 -1
  9. package/dist/collection/assets/i18n/en.json +2 -1
  10. package/dist/collection/components/stzh-cspace/stzh-cspace.stories.js +1 -1
  11. package/dist/collection/components/stzh-page-skiplinks/stzh-page-skiplinks.stories.js +1 -1
  12. package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.js.map +1 -1
  13. package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.stories.js +1 -1
  14. package/dist/collection/components/stzh-ratio/stzh-ratio.stories.js +1 -1
  15. package/dist/collection/components/stzh-upload/stzh-upload.css +7 -2
  16. package/dist/collection/components/stzh-upload/stzh-upload.js +63 -35
  17. package/dist/collection/components/stzh-upload/stzh-upload.js.map +1 -1
  18. package/dist/collection/components/stzh-upload/stzh-upload.localization.js.map +1 -1
  19. package/dist/collection/utils/story-utils.js +2 -1
  20. package/dist/collection/utils/story-utils.js.map +1 -1
  21. package/dist/components/index.js +1 -1
  22. package/dist/components/stzh-pagebottom.js.map +1 -1
  23. package/dist/components/stzh-upload.js +63 -35
  24. package/dist/components/stzh-upload.js.map +1 -1
  25. package/dist/custom-elements.json +6362 -0
  26. package/dist/esm/{app-globals-b350c01d.js → app-globals-6921f653.js} +2 -2
  27. package/dist/esm/{app-globals-b350c01d.js.map → app-globals-6921f653.js.map} +1 -1
  28. package/dist/esm/loader.js +1 -1
  29. package/dist/esm/stzh-components.js +1 -1
  30. package/dist/esm/stzh-pagebottom.entry.js.map +1 -1
  31. package/dist/esm/stzh-upload.entry.js +63 -35
  32. package/dist/esm/stzh-upload.entry.js.map +1 -1
  33. package/dist/esm-es5/{app-globals-b350c01d.js → app-globals-6921f653.js} +2 -2
  34. package/dist/esm-es5/{app-globals-b350c01d.js.map → app-globals-6921f653.js.map} +1 -1
  35. package/dist/esm-es5/loader.js +1 -1
  36. package/dist/esm-es5/stzh-components.js +1 -1
  37. package/dist/esm-es5/stzh-pagebottom.entry.js.map +1 -1
  38. package/dist/esm-es5/stzh-upload.entry.js +1 -1
  39. package/dist/esm-es5/stzh-upload.entry.js.map +1 -1
  40. package/dist/stzh-components/assets/i18n/de.json +2 -1
  41. package/dist/stzh-components/assets/i18n/en.json +2 -1
  42. package/dist/stzh-components/p-2e77c845.system.entry.js.map +1 -1
  43. package/dist/stzh-components/p-ae6a75cc.entry.js.map +1 -1
  44. package/dist/stzh-components/{p-ace81cde.js → p-b7be3f1d.js} +2 -2
  45. package/dist/stzh-components/{p-ace81cde.js.map → p-b7be3f1d.js.map} +1 -1
  46. package/dist/stzh-components/{p-5a34a1d8.entry.js → p-c98cfc88.entry.js} +2 -2
  47. package/dist/stzh-components/p-c98cfc88.entry.js.map +1 -0
  48. package/dist/stzh-components/{p-3692ab41.system.entry.js → p-ccc38fcc.system.entry.js} +2 -2
  49. package/dist/stzh-components/p-ccc38fcc.system.entry.js.map +1 -0
  50. package/dist/stzh-components/{p-0e061116.system.js → p-d47ab627.system.js} +2 -2
  51. package/dist/stzh-components/{p-0e061116.system.js.map → p-d47ab627.system.js.map} +1 -1
  52. package/dist/stzh-components/{p-35ec50a1.system.js → p-e72565dc.system.js} +2 -2
  53. package/dist/stzh-components/stzh-components.esm.js +1 -1
  54. package/dist/stzh-components/stzh-components.js +1 -1
  55. package/dist/types/components/stzh-upload/stzh-upload.localization.d.ts +2 -1
  56. package/package.json +4 -3
  57. package/dist/stzh-components/p-3692ab41.system.entry.js.map +0 -1
  58. package/dist/stzh-components/p-5a34a1d8.entry.js.map +0 -1
  59. /package/dist/stzh-components/{p-35ec50a1.system.js.map → p-e72565dc.system.js.map} +0 -0
@@ -10345,7 +10345,7 @@ window.Dropzone = Dropzone;
10345
10345
  ;
10346
10346
  });
10347
10347
 
10348
- const stzhUploadCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}stzh-upload[hidden]{display:none}stzh-upload *,stzh-upload *::before,stzh-upload *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-upload .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}stzh-upload .stzh-fylingfocus-focused{outline-style:none !important}stzh-upload .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;position:relative;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;}.stzh-upload__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-upload__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-upload__error,.stzh-upload__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-upload__error{color:var(--stzh-color-error)}.stzh-upload__error-list{list-style:none;margin:0;padding:0}.stzh-upload__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-upload__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-upload__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-upload__description-long-popover[open]:not([open=false]) .stzh-upload__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-upload__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload stzh-icon.stzh-upload__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-xxsmall)}.stzh-upload__label{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);color:var(--stzh-base-lead-color);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__label{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-text-letter-spacing)}}.stzh-upload__clickarea{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding:var(--stzh-space-xxlarge);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;text-align:center;border:0.0625rem solid var(--stzh-base-border-color);border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD4SURBVHgB7dlBCoMwEAXQSXqBHsUj9ChWdK2eoN6gdi/W3shjtLssWxDTmZKFFGqhphDhPxBDIOEbJAyMIpYkSay1PvJwSxPjOO7btu1oBq8t3NqPFuxj+Dk1TVOpNE0PwzBcZLLrOkMBieNYDm7LH7DTPCgowJDCZTKvk+YTtRQ4yahpJRDUNwlaUuDkeiMAAFhGalEKXJZlOVdQ+kyBs9bWKEp8Q1DfENQ3VPg+ocIHAPAAFb5HqPD/YVVBjes+BMllM5soim78s175TX3f3ykgk/bNQ8kEdx0qDpsrpd5PtuRmVD23mWumfbs5ftqHMxl+SmmmPQHYcmyn56UnaQAAAABJRU5ErkJggg==');border-image-slice:12;border-image-width:0.75rem;border-image-repeat:round;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxxlarge)}}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7d3BbeJAFMbxsYXFlRLYDtgKllIsC0vcEiqIU8EmB04glu2EdEAHYTvgbgv2vawdcdokni/ikP9Pwp6YyB59YCcej/SS0MrzfDQYDG6sOW1fb2qa5tt2uz2ECHbcsR33OQhcoT/70+n0uNlstt2G9LWRprmtqvCOMM/n89FWi9jOu3Yf9yHCFfszsdx+zWaz225D4ouyLG9Wq9WjfzpZlo3quj7Yjo8B/2VBTpMkOVp2e8/QcvudFEWRe8r2xnd/I+DDLi4T95Zl6tdNP21GAX112f3wa+jEW+v1ehfQ16FdT9OAaJd/bwhUjEDFCFSMQMUIVIxAxQhU5+Vfpy7QqMEJhGCjTv8ynM/n4wAJv6cPAAAAAAAAAPBVMCiq44P1qc8au5zfiH4sw7umaZ67Z0p3AbEqX3SBMpVRhMfIYgQqRqBiBCpGoGIEKkagYgQqRqBiBCpGoGIEKkagYgSqwxx7JebYfwIeJwEAAAAAAAD4UhgU1WGOvRBz7PUqXzDHXozHyGIEKkagYgQqRqBiBCr2GqhXqwmI5oHuvJFl2TigFy+y0jb3HuiTt+q6pjpNT3bL+ZKd11Ya2A8Pdj9/9DpCZVlOvMgKdUHe5pdIP6v9i2jZ7e1buvBCVUn3C0VR3KZp+vMD+6wseMm8Uq9FZB9kFeJuga/Zn4Ud+8EbyeXWtraSlwOavGcvw+FwvFwu/4QIyhJqV+jPzl5PfpZ3BVb+AjID1CfgWYnZAAAAAElFTkSuQmCC');border-image-slice:24}}.stzh-upload__button{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__button{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-upload__button{margin-top:var(--stzh-space-large)}}.stzh-upload stzh-icon.stzh-upload__delete-icon{display:none}.stzh-upload__preview{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:0.0625rem solid var(--stzh-base-border-color);border-bottom:none;padding:var(--stzh-space-xsmall);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-small)}.stzh-upload__preview:not(.dz-error):last-child,.stzh-upload__errors:last-child .stzh-upload__preview:last-child{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-upload__errors .stzh-upload__preview:first-child,.stzh-upload__errors:empty+.stzh-upload__preview{border-top-left-radius:var(--stzh-button-border-radius);border-top-right-radius:var(--stzh-button-border-radius)}.stzh-upload__preview:last-child{border-bottom-left-radius:var(--stzh-button-border-radius);border-bottom-right-radius:var(--stzh-button-border-radius)}.stzh-upload:has(>.stzh-upload__preview) .stzh-upload__errors .stzh-upload__preview:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.stzh-upload__preview.dz-error .stzh-upload__title,.stzh-upload__preview.dz-error .stzh-upload__link[href]:not([href=\"\"]),.stzh-upload__preview.dz-error .stzh-upload__link[href]:not([href=\"\"]):hover{color:var(--stzh-color-error)}.stzh-upload__preview.dz-error .stzh-upload__error-message{display:block}.stzh-upload__preview.dz-error .stzh-upload__meta{display:none}.stzh-upload__preview.dz-complete:not(.dz-error) stzh-icon.stzh-upload__delete-icon-error{display:none}.stzh-upload__preview.dz-complete:not(.dz-error) stzh-icon.stzh-upload__delete-icon{display:-ms-inline-flexbox;display:inline-flex}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-processing{display:none}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-complete{display:-ms-flexbox;display:flex}.stzh-upload__preview.dz-empty .stzh-upload__extension::after{display:none}.stzh-upload__preview.dz-empty .stzh-upload__size{display:none}.stzh-upload__details{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;overflow:hidden}.stzh-upload__info-wrapper-processing,.stzh-upload__info-wrapper-complete{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden}.stzh-upload__info-wrapper-complete{display:none}.stzh-upload__actions{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-upload__infos{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.stzh-upload__title,.stzh-upload__subtitle{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-upload__title{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-upload__link[href]:not([href=\"\"]){color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__link[href]:not([href=\"\"]):hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload__meta{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em}.stzh-upload__info-wrapper-processing .stzh-upload__meta{display:none}.stzh-upload__size strong{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__image{display:none}.stzh-upload__progress{display:block;height:0.5rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13);margin-top:var(--stzh-space-xsmall)}.stzh-upload__progress-bar{display:block;height:100%;width:0;border-radius:0.75rem;background:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__progress-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;margin-left:var(--stzh-space-medium);font-variant-numeric:tabular-nums}.stzh-upload__extension{text-transform:uppercase}.stzh-upload__extension::after{content:\" | \"}.stzh-upload__extension:empty::after{display:none}.stzh-upload__download,.stzh-upload__delete{margin-left:var(--stzh-space-xsmall)}.stzh-upload__download[variant=tertiary][icon-only],.stzh-upload__delete[variant=tertiary][icon-only]{--color:var(--stzh-color-grey70)}.stzh-upload__download[variant=tertiary]{display:none}.stzh-upload__download[variant=tertiary][href]{display:-ms-flexbox;display:flex}.stzh-upload__error-message{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;color:var(--stzh-color-error);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);display:none}.stzh-upload.dz-started .stzh-upload__errors{margin-top:var(--stzh-space-small)}.stzh-upload:has(.stzh-upload__preview) .stzh-upload__errors{margin-top:var(--stzh-space-small)}.stzh-upload.dz-drag-hover .stzh-upload__clickarea{background-color:var(--stzh-color-primary4)}.stzh-upload.dz-drag-hover .stzh-upload__button{--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload--has-hidden-progress .stzh-upload__progress,.stzh-upload--has-hidden-progress .stzh-upload__progress-text,.stzh-upload--has-hidden-progress-while-idle .stzh-upload__preview:not(.dz-processing) .stzh-upload__progress,.stzh-upload--has-hidden-progress-while-idle .stzh-upload__preview:not(.dz-processing) .stzh-upload__progress-text{display:none}.stzh-upload--has-hidden-progress .stzh-upload__info-wrapper-processing .stzh-upload__meta,.stzh-upload--has-hidden-progress-while-idle .stzh-upload__preview:not(.dz-processing) .stzh-upload__info-wrapper-processing .stzh-upload__meta{display:block}.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD/SURBVHgB7dlBasJAFAbg/71supy16aI9Qm7Qo7QnsDlBvUHrCdqeKPUEXbUunY0gCPOcMQgimIWOMOL/bRJC8vgJITz4BVFX1c9ieI+nDnss4KXB3xcGdKhfRbfPHnXGHG+waRP+JzLT0VsI4RtY+QbeoyAdXHxxdw5V9SQ/Wi8sLB9LC7nT4cGJrn8RgxoKlzIqrgSD5qbxA21RuPR7AxERnSftoijcTO/H3J5yY9DcGDQ3Bs2NGz4R0a3ghp8RN/xLuKqgvm8fypTKhnjwGleoNlUkJYbtM62cQaayvaCjiZiMIQeFGELbhPnH4LC+TPscuufkORYLMUObyrQNlY5lla7HUdEAAAAASUVORK5CYII=')}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIwSURBVHgB7d1NUhNBGIfxf3dKrdJNNlaJYTFu3Zg5gTlKbjByAuAEwgn0KHKCTk4gLhCrXJiFKy3mdXomCeoCQuYFFjy/DZOhauh6CGE+uqqDlpKGwxifVmZhoqCJNmD1xatS307VQ9KLIsTBZzm48/GYZhZ1XF6cfVztipfffTY1hYONYpoWJu31HXyWj9H83EP1cV/jCRoH04eknXf/7J/HnSp/zb+dpNE4v1uFayXtTnKvvD2Pu1XuFtJgNM2Vrf5Vlvo+E25s9TFhssPYxKy63U94V25t0LYLFt6GWRxZfjGuz4KwlaRiGOLvH3k7Cr2VOl2stgnqjKDOCOqMoM4I6oygzgjqpz11aoP2vjmB5k6XuobNWX4huMjX9AIAAAAAAACAh4Kbon5yy5hnjaX43/xG3Ng8vtzPLdtnSkFxX+ilnaysy6eeTGV0wmNkZwR1RlBnBHVGUGcEdUZQZwR1RlBnBHVGUGcEdUZQZwT1wxx7T8yxvwU8TgIAAAAAAADwoHBT1A9z7B0xx94Zc+xvCY+RnRHUGUGdEdQZQZ0R1Nk6KOt/+IjNGemnbvNRIWylueSctBtms2jBTrrdg4Wwpa6dWThu17FIcdReyyc9H69r40r5I3LZq2hfLxuuF1TJO5oX7zc9YJAdvKm/uswrzWsRWXM89bgEvs/xmOq9sj4/6sbxl6TRNARVeSWrTQ70uK6L1zr/oh48l1C78/E0/38shBPVP49KLdo/+z+8SbPi8H5KCQAAAABJRU5ErkJggg==')}}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-small)}.stzh-upload--is-disabled .stzh-upload__clickarea{cursor:not-allowed;background-color:var(--stzh-color-black8)}";
10348
+ const stzhUploadCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}stzh-upload[hidden]{display:none}stzh-upload *,stzh-upload *::before,stzh-upload *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-upload .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}stzh-upload .stzh-fylingfocus-focused{outline-style:none !important}stzh-upload .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-upload{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;position:relative;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;}.stzh-upload__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-upload__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-upload__error,.stzh-upload__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-upload__error{color:var(--stzh-color-error)}.stzh-upload__error-list{list-style:none;margin:0;padding:0}.stzh-upload__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-upload__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-upload__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-upload__description-long-popover[open]:not([open=false]) .stzh-upload__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-upload__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload stzh-icon.stzh-upload__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-xxsmall)}.stzh-upload__label{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);color:var(--stzh-base-lead-color);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__label{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-text-letter-spacing)}}.stzh-upload__clickarea{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding:var(--stzh-space-xxlarge);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;text-align:center;border:0.0625rem solid var(--stzh-base-border-color);border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD4SURBVHgB7dlBCoMwEAXQSXqBHsUj9ChWdK2eoN6gdi/W3shjtLssWxDTmZKFFGqhphDhPxBDIOEbJAyMIpYkSay1PvJwSxPjOO7btu1oBq8t3NqPFuxj+Dk1TVOpNE0PwzBcZLLrOkMBieNYDm7LH7DTPCgowJDCZTKvk+YTtRQ4yahpJRDUNwlaUuDkeiMAAFhGalEKXJZlOVdQ+kyBs9bWKEp8Q1DfENQ3VPg+ocIHAPAAFb5HqPD/YVVBjes+BMllM5soim78s175TX3f3ykgk/bNQ8kEdx0qDpsrpd5PtuRmVD23mWumfbs5ftqHMxl+SmmmPQHYcmyn56UnaQAAAABJRU5ErkJggg==');border-image-slice:12;border-image-width:0.75rem;border-image-repeat:round;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-upload__clickarea{padding:var(--stzh-space-xxxxlarge)}}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7d3BbeJAFMbxsYXFlRLYDtgKllIsC0vcEiqIU8EmB04glu2EdEAHYTvgbgv2vawdcdokni/ikP9Pwp6YyB59YCcej/SS0MrzfDQYDG6sOW1fb2qa5tt2uz2ECHbcsR33OQhcoT/70+n0uNlstt2G9LWRprmtqvCOMM/n89FWi9jOu3Yf9yHCFfszsdx+zWaz225D4ouyLG9Wq9WjfzpZlo3quj7Yjo8B/2VBTpMkOVp2e8/QcvudFEWRe8r2xnd/I+DDLi4T95Zl6tdNP21GAX112f3wa+jEW+v1ehfQ16FdT9OAaJd/bwhUjEDFCFSMQMUIVIxAxQhU5+Vfpy7QqMEJhGCjTv8ynM/n4wAJv6cPAAAAAAAAAPBVMCiq44P1qc8au5zfiH4sw7umaZ67Z0p3AbEqX3SBMpVRhMfIYgQqRqBiBCpGoGIEKkagYgQqRqBiBCpGoGIEKkagYgSqwxx7JebYfwIeJwEAAAAAAAD4UhgU1WGOvRBz7PUqXzDHXozHyGIEKkagYgQqRqBiBCr2GqhXqwmI5oHuvJFl2TigFy+y0jb3HuiTt+q6pjpNT3bL+ZKd11Ya2A8Pdj9/9DpCZVlOvMgKdUHe5pdIP6v9i2jZ7e1buvBCVUn3C0VR3KZp+vMD+6wseMm8Uq9FZB9kFeJuga/Zn4Ud+8EbyeXWtraSlwOavGcvw+FwvFwu/4QIyhJqV+jPzl5PfpZ3BVb+AjID1CfgWYnZAAAAAElFTkSuQmCC');border-image-slice:24}}.stzh-upload__button{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-upload__button{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-upload__button{margin-top:var(--stzh-space-large)}}.stzh-upload stzh-icon.stzh-upload__delete-icon{display:none}.stzh-upload__preview{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:0.0625rem solid var(--stzh-base-border-color);border-bottom:none;padding:var(--stzh-space-xsmall);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-small)}.stzh-upload__preview:not(.dz-error):last-child,.stzh-upload__errors:last-child .stzh-upload__preview:last-child{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-upload__errors .stzh-upload__preview:first-child,.stzh-upload__errors:empty+.stzh-upload__previews>.stzh-upload__preview{border-top-left-radius:var(--stzh-button-border-radius);border-top-right-radius:var(--stzh-button-border-radius)}.stzh-upload__preview:last-child{border-bottom-left-radius:var(--stzh-button-border-radius);border-bottom-right-radius:var(--stzh-button-border-radius)}.stzh-upload:has(.stzh-upload__previews>.stzh-upload__preview) .stzh-upload__errors .stzh-upload__preview:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.stzh-upload__preview.dz-error .stzh-upload__title,.stzh-upload__preview.dz-error .stzh-upload__link[href]:not([href=\"\"]),.stzh-upload__preview.dz-error .stzh-upload__link[href]:not([href=\"\"]):hover{color:var(--stzh-color-error)}.stzh-upload__preview.dz-error .stzh-upload__error-message{display:block}.stzh-upload__preview.dz-error .stzh-upload__meta{display:none}.stzh-upload__preview.dz-complete:not(.dz-error) stzh-icon.stzh-upload__delete-icon-error{display:none}.stzh-upload__preview.dz-complete:not(.dz-error) stzh-icon.stzh-upload__delete-icon{display:-ms-inline-flexbox;display:inline-flex}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-processing{display:none}.stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-complete{display:-ms-flexbox;display:flex}.stzh-upload__preview.dz-empty .stzh-upload__extension::after{display:none}.stzh-upload__preview.dz-empty .stzh-upload__size{display:none}.stzh-upload__details{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;overflow:hidden}.stzh-upload__info-wrapper{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;overflow:hidden}.stzh-upload__info-wrapper-processing,.stzh-upload__info-wrapper-complete{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden}.stzh-upload__info-wrapper-complete{display:none}.stzh-upload__actions{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-upload__infos{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.stzh-upload__title,.stzh-upload__subtitle{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-upload__title{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-upload__link[href]:not([href=\"\"]){color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__link[href]:not([href=\"\"]):hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload__meta{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em}.stzh-upload__info-wrapper-processing .stzh-upload__meta{display:none}.stzh-upload__size strong{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-upload__image{display:none}.stzh-upload__progress{display:block;height:0.5rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13);margin-top:var(--stzh-space-xsmall)}.stzh-upload__progress-bar{display:block;height:100%;width:0;border-radius:0.75rem;background:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-upload__progress-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;margin-left:var(--stzh-space-medium);font-variant-numeric:tabular-nums}.stzh-upload__extension{text-transform:uppercase}.stzh-upload__extension::after{content:\" | \"}.stzh-upload__extension:empty::after{display:none}.stzh-upload__download,.stzh-upload__delete{margin-left:var(--stzh-space-xsmall)}.stzh-upload__download[variant=tertiary][icon-only],.stzh-upload__delete[variant=tertiary][icon-only]{--color:var(--stzh-color-grey70)}.stzh-upload__download[variant=tertiary]{display:none}.stzh-upload__download[variant=tertiary][href]{display:-ms-flexbox;display:flex}.stzh-upload__error-message{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;color:var(--stzh-color-error);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);display:none}.stzh-upload.dz-started .stzh-upload__errors{margin-top:var(--stzh-space-small)}.stzh-upload:has(.stzh-upload__preview) .stzh-upload__errors{margin-top:var(--stzh-space-small)}.stzh-upload.dz-drag-hover .stzh-upload__clickarea{background-color:var(--stzh-color-primary4)}.stzh-upload.dz-drag-hover .stzh-upload__button{--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-upload--has-hidden-progress .stzh-upload__progress,.stzh-upload--has-hidden-progress .stzh-upload__progress-text,.stzh-upload--has-hidden-progress-while-idle .stzh-upload__preview:not(.dz-processing) .stzh-upload__progress,.stzh-upload--has-hidden-progress-while-idle .stzh-upload__preview:not(.dz-processing) .stzh-upload__progress-text{display:none}.stzh-upload--has-hidden-progress .stzh-upload__info-wrapper-processing .stzh-upload__meta,.stzh-upload--has-hidden-progress-while-idle .stzh-upload__preview:not(.dz-processing) .stzh-upload__info-wrapper-processing .stzh-upload__meta{display:block}.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD/SURBVHgB7dlBasJAFAbg/71supy16aI9Qm7Qo7QnsDlBvUHrCdqeKPUEXbUunY0gCPOcMQgimIWOMOL/bRJC8vgJITz4BVFX1c9ieI+nDnss4KXB3xcGdKhfRbfPHnXGHG+waRP+JzLT0VsI4RtY+QbeoyAdXHxxdw5V9SQ/Wi8sLB9LC7nT4cGJrn8RgxoKlzIqrgSD5qbxA21RuPR7AxERnSftoijcTO/H3J5yY9DcGDQ3Bs2NGz4R0a3ghp8RN/xLuKqgvm8fypTKhnjwGleoNlUkJYbtM62cQaayvaCjiZiMIQeFGELbhPnH4LC+TPscuufkORYLMUObyrQNlY5lla7HUdEAAAAASUVORK5CYII=')}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.stzh-upload--is-invalid .stzh-upload__clickarea{border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIwSURBVHgB7d1NUhNBGIfxf3dKrdJNNlaJYTFu3Zg5gTlKbjByAuAEwgn0KHKCTk4gLhCrXJiFKy3mdXomCeoCQuYFFjy/DZOhauh6CGE+uqqDlpKGwxifVmZhoqCJNmD1xatS307VQ9KLIsTBZzm48/GYZhZ1XF6cfVztipfffTY1hYONYpoWJu31HXyWj9H83EP1cV/jCRoH04eknXf/7J/HnSp/zb+dpNE4v1uFayXtTnKvvD2Pu1XuFtJgNM2Vrf5Vlvo+E25s9TFhssPYxKy63U94V25t0LYLFt6GWRxZfjGuz4KwlaRiGOLvH3k7Cr2VOl2stgnqjKDOCOqMoM4I6oygzgjqpz11aoP2vjmB5k6XuobNWX4huMjX9AIAAAAAAACAh4Kbon5yy5hnjaX43/xG3Ng8vtzPLdtnSkFxX+ilnaysy6eeTGV0wmNkZwR1RlBnBHVGUGcEdUZQZwR1RlBnBHVGUGcEdUZQZwT1wxx7T8yxvwU8TgIAAAAAAADwoHBT1A9z7B0xx94Zc+xvCY+RnRHUGUGdEdQZQZ0R1Nk6KOt/+IjNGemnbvNRIWylueSctBtms2jBTrrdg4Wwpa6dWThu17FIcdReyyc9H69r40r5I3LZq2hfLxuuF1TJO5oX7zc9YJAdvKm/uswrzWsRWXM89bgEvs/xmOq9sj4/6sbxl6TRNARVeSWrTQ70uK6L1zr/oh48l1C78/E0/38shBPVP49KLdo/+z+8SbPi8H5KCQAAAABJRU5ErkJggg==')}}.stzh-upload--has-error .stzh-upload__error,.stzh-upload--has-description .stzh-upload__description{margin-top:var(--stzh-space-small)}.stzh-upload--is-disabled .stzh-upload__clickarea{cursor:not-allowed;background-color:var(--stzh-color-black8)}";
10349
10349
 
10350
10350
  window.Dropzone.autoDiscover = false;
10351
10351
  const ATTR_NAME = "data-dz-name";
@@ -10353,8 +10353,12 @@ const ATTR_TYPE = "data-dz-type";
10353
10353
  const ATTR_SIZE = "data-dz-size";
10354
10354
  const ATTR_LINK = "data-dz-link";
10355
10355
  const ATTR_EXTENSION = "data-dz-extension";
10356
+ const ATTR_META_ID = "data-dz-meta-id";
10357
+ const ATTR_ERROR_MESSAGE_ID = "data-dz-error-message-id";
10356
10358
  const ATTR_PROGRESS_TEXT = "data-dz-progress-text";
10359
+ const ATTR_REMOVE = "data-dz-remove";
10357
10360
  let uploadCounter = 0;
10361
+ let previewCounter = 0;
10358
10362
  const StzhUpload = class {
10359
10363
  constructor(hostRef) {
10360
10364
  index.registerInstance(this, hostRef);
@@ -10395,6 +10399,9 @@ const StzhUpload = class {
10395
10399
  }
10396
10400
  return `<strong>${selectedSize}</strong> ${this.options.dictFileSizeUnits[selectedUnit]}`;
10397
10401
  };
10402
+ this.filePreviewId = function (file) {
10403
+ return `${this.uploadId}-${file._id}`;
10404
+ };
10398
10405
  this.existingFiles = [];
10399
10406
  this.label = "";
10400
10407
  this.description = "";
@@ -10506,11 +10513,15 @@ const StzhUpload = class {
10506
10513
  node.setAttribute("href", fileHref);
10507
10514
  node.setAttribute("download", file.name);
10508
10515
  const isStzh = utils.isStzhElement(node);
10509
- node.setAttribute(isStzh ? "analytics-id" : "s-object-id", `${self.localization.download} ${file.name}`);
10516
+ const fileId = self.filePreviewId(file);
10517
+ node.setAttribute(isStzh ? "analytics-id" : "s-object-id", `${self.localization.downloadFile} ${file.name}`);
10518
+ node.setAttribute(isStzh ? "a11y-label" : "aria-label", `${self.localization.downloadFile} ${file.name}`);
10519
+ node.setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${fileId}-error-message ${fileId}-meta`);
10510
10520
  }
10511
10521
  }
10512
10522
  }
10513
10523
  this.dropzone = new window.Dropzone(this.dropzoneElement, {
10524
+ previewsContainer: this.previewsElement,
10514
10525
  url: this.url,
10515
10526
  method: this.method,
10516
10527
  withCredentials: this.withCredentials,
@@ -10538,6 +10549,7 @@ const StzhUpload = class {
10538
10549
  dictRemoveFileConfirmation: null,
10539
10550
  dictMaxFilesExceeded: this.localization.maxFilesExceeded,
10540
10551
  dictRemoveFile: this.localization.removeFile,
10552
+ dictDeleteFile: this.localization.deleteFile,
10541
10553
  dictCancelUploadConfirmation: this.localization.cancelUploadConfirmation,
10542
10554
  dictUploadCanceled: this.localization.uploadCanceled,
10543
10555
  dictCancelUpload: this.localization.cancelUpload,
@@ -10548,6 +10560,7 @@ const StzhUpload = class {
10548
10560
  // Receives `file`
10549
10561
  // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L594
10550
10562
  addedfile(file) {
10563
+ file._id = previewCounter++;
10551
10564
  if (this.element === this.previewsContainer) {
10552
10565
  this.element.classList.add("dz-started");
10553
10566
  }
@@ -10564,8 +10577,14 @@ const StzhUpload = class {
10564
10577
  for (node of file.previewElement.querySelectorAll(`[${ATTR_SIZE}]`)) {
10565
10578
  node.innerHTML = self.filesize.call(this, file.size);
10566
10579
  }
10580
+ for (node of file.previewElement.querySelectorAll(`[${ATTR_META_ID}]`)) {
10581
+ node.setAttribute("id", `${self.filePreviewId(file)}-meta`);
10582
+ }
10583
+ for (node of file.previewElement.querySelectorAll(`[${ATTR_ERROR_MESSAGE_ID}]`)) {
10584
+ node.setAttribute("id", `${self.filePreviewId(file)}-error-message`);
10585
+ }
10567
10586
  if (this.options.addRemoveLinks) {
10568
- file._removeLink = window.Dropzone.createElement(`<a class="dz-remove" href="javascript:undefined;" data-dz-remove>
10587
+ file._removeLink = window.Dropzone.createElement(`<a class="dz-remove" href="javascript:undefined;" ${ATTR_REMOVE}>
10569
10588
  ${this.options.dictRemoveFile}
10570
10589
  </a>`);
10571
10590
  file.previewElement.appendChild(file._removeLink);
@@ -10585,10 +10604,13 @@ const StzhUpload = class {
10585
10604
  }
10586
10605
  }
10587
10606
  };
10588
- for (let removeLink of file.previewElement.querySelectorAll("[data-dz-remove]")) {
10607
+ for (let removeLink of file.previewElement.querySelectorAll(`[${ATTR_REMOVE}]`)) {
10589
10608
  removeLink.addEventListener("click", removeFileEvent);
10590
10609
  const isStzh = utils.isStzhElement(removeLink);
10591
- removeLink.setAttribute(isStzh ? "analytics-id" : "s-object-id", `${this.options.dictRemoveFile} ${file.name}`);
10610
+ const fileId = self.filePreviewId(file);
10611
+ removeLink.setAttribute(isStzh ? "analytics-id" : "s-object-id", `${this.options.dictRemoveFile}`);
10612
+ removeLink.setAttribute(isStzh ? "a11y-label" : "aria-label", `${this.options.dictRemoveFile} ${file.name}`);
10613
+ removeLink.setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${fileId}-error-message ${fileId}-meta`);
10592
10614
  }
10593
10615
  if (!self.downloadDisabled && !self.downloadDisabledWhileProcessing) {
10594
10616
  enableDownload(file);
@@ -10598,9 +10620,13 @@ const StzhUpload = class {
10598
10620
  // When the upload is finished, either with success or an error.
10599
10621
  // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L752
10600
10622
  complete(file) {
10601
- for (let node of file.previewElement.querySelectorAll("[data-dz-remove]")) {
10602
- node.setAttribute("title", this.options.dictRemoveFile);
10603
- node.setAttribute("aria-label", this.options.dictRemoveFile);
10623
+ for (let node of file.previewElement.querySelectorAll(`[${ATTR_REMOVE}]`)) {
10624
+ const hasErrorState = (file.status === "error");
10625
+ const removeOrDeleteLabel = hasErrorState ? this.options.dictRemoveFile : this.options.dictDeleteFile;
10626
+ const isStzh = utils.isStzhElement(node);
10627
+ const fileId = self.filePreviewId(file);
10628
+ node.setAttribute(isStzh ? "a11y-label" : "aria-label", `${removeOrDeleteLabel} ${file.name}`);
10629
+ node.setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${fileId}-error-message ${fileId}-meta`);
10604
10630
  }
10605
10631
  // move file uploads with errors to another element, so they are grouped together
10606
10632
  if (file.status === "error") {
@@ -10663,38 +10689,40 @@ const StzhUpload = class {
10663
10689
  </div>
10664
10690
 
10665
10691
  <div class="stzh-upload__details">
10666
- <div class="stzh-upload__info-wrapper-processing">
10667
- <div class="stzh-upload__infos">
10668
- <div class="stzh-upload__subtitle">
10669
- <a class="stzh-upload__link" ${ATTR_NAME} ${ATTR_LINK}></a>
10692
+ <div class="stzh-upload__info-wrapper">
10693
+ <div class="stzh-upload__info-wrapper-processing">
10694
+ <div class="stzh-upload__infos">
10695
+ <div class="stzh-upload__subtitle">
10696
+ <a class="stzh-upload__link" ${ATTR_NAME} ${ATTR_LINK}></a>
10697
+ </div>
10698
+ <div class="stzh-upload__progress-text">
10699
+ <span ${ATTR_PROGRESS_TEXT}></span>
10700
+ </div>
10670
10701
  </div>
10671
- <div class="stzh-upload__progress-text">
10672
- <span ${ATTR_PROGRESS_TEXT}></span>
10702
+ <div class="stzh-upload__meta">
10703
+ <span class="stzh-upload__extension" ${ATTR_EXTENSION}></span>
10704
+ <span class="stzh-upload__size" ${ATTR_SIZE}></span>
10705
+ </div>
10706
+ <div class="stzh-upload__progress">
10707
+ <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
10673
10708
  </div>
10674
10709
  </div>
10675
- <div class="stzh-upload__meta">
10676
- <span class="stzh-upload__extension" ${ATTR_EXTENSION}></span>
10677
- <span class="stzh-upload__size" ${ATTR_SIZE}></span>
10678
- </div>
10679
- <div class="stzh-upload__progress">
10680
- <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
10681
- </div>
10682
- </div>
10683
- <div class="stzh-upload__info-wrapper-complete">
10684
- <div class="stzh-upload__title">
10685
- <a class="stzh-upload__link" ${ATTR_NAME} ${ATTR_LINK}></a>
10686
- </div>
10687
- <div class="stzh-upload__meta">
10688
- <span class="stzh-upload__extension" ${ATTR_EXTENSION}></span>
10689
- <span class="stzh-upload__size" ${ATTR_SIZE}></span>
10690
- </div>
10691
- <div class="stzh-upload__error-message">
10692
- <span data-dz-errormessage></span>
10710
+ <div class="stzh-upload__info-wrapper-complete">
10711
+ <div class="stzh-upload__title">
10712
+ <a class="stzh-upload__link" ${ATTR_NAME} ${ATTR_LINK}></a>
10713
+ </div>
10714
+ <div class="stzh-upload__meta" ${ATTR_META_ID}>
10715
+ <span class="stzh-upload__extension" ${ATTR_EXTENSION}></span>
10716
+ <span class="stzh-upload__size" ${ATTR_SIZE}></span>
10717
+ </div>
10718
+ <div class="stzh-upload__error-message" ${ATTR_ERROR_MESSAGE_ID}>
10719
+ <span data-dz-errormessage></span>
10720
+ </div>
10693
10721
  </div>
10694
10722
  </div>
10695
10723
  <div class="stzh-upload__actions">
10696
- <stzh-button variant="tertiary" size="tiny" icon-only icon="download" class="stzh-upload__download" ${ATTR_LINK} aria-label="${this.localization.download}" title="${this.localization.download}"></stzh-button>
10697
- <stzh-button variant="tertiary" size="tiny" icon-only class="stzh-upload__delete" data-dz-remove aria-label="${this.localization.cancelUpload}" title="${this.localization.cancelUpload}">
10724
+ <stzh-button variant="tertiary" size="tiny" icon-only icon="download" class="stzh-upload__download" ${ATTR_LINK}></stzh-button>
10725
+ <stzh-button variant="tertiary" size="tiny" icon-only class="stzh-upload__delete" ${ATTR_REMOVE}>
10698
10726
  <stzh-icon slot="icon" class="stzh-upload__delete-icon" name="delete"></stzh-icon>
10699
10727
  <stzh-icon slot="icon" class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
10700
10728
  </stzh-button>
@@ -10795,7 +10823,7 @@ const StzhUpload = class {
10795
10823
  "stzh-upload--has-error": errorUsed,
10796
10824
  "stzh-upload--has-instructions": !!this.description || !!this.localization.description
10797
10825
  };
10798
- return (index.h(index.Host, null, index.h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, index.h("div", { ref: (el) => (this.hiddenInputContainerElement = el) }), index.h("div", { id: `${this.uploadId}-label` }, this.label && index.h("div", { class: "stzh-upload__label" }, this.label)), index.h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, index.h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), index.h("stzh-button", { size: "small", class: "stzh-upload__button", ref: (el) => (this.buttonElement = el), a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled }, this.button ? this.button : this.localization.button)), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }), index.h("div", { class: "stzh-upload__errors", ref: (el) => (this.errorsElement = el) }))));
10826
+ return (index.h(index.Host, null, index.h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, index.h("div", { ref: (el) => (this.hiddenInputContainerElement = el) }), index.h("div", { id: `${this.uploadId}-label` }, this.label && index.h("div", { class: "stzh-upload__label" }, this.label)), index.h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, index.h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), index.h("stzh-button", { size: "small", class: "stzh-upload__button", ref: (el) => (this.buttonElement = el), a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, this.button ? this.button : this.localization.button)), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }), index.h("div", { id: `${this.uploadId}-previews` }, index.h("div", { class: "stzh-upload__errors", ref: (el) => (this.errorsElement = el) }), index.h("div", { class: "stzh-upload__previews dropzone-previews", ref: (el) => (this.previewsElement = el) })))));
10799
10827
  }
10800
10828
  get element() { return index.getElement(this); }
10801
10829
  static get watchers() { return {