wj-elements 0.1.135 → 0.1.137

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 (230) hide show
  1. package/dist/light.css +4 -0
  2. package/dist/wje-animation.js +4 -2
  3. package/dist/wje-animation.js.map +1 -1
  4. package/dist/wje-file-upload-item.js +2 -4
  5. package/dist/wje-file-upload-item.js.map +1 -1
  6. package/dist/wje-file-upload.js +1 -0
  7. package/dist/wje-file-upload.js.map +1 -1
  8. package/dist/wje-img.js +8 -0
  9. package/dist/wje-img.js.map +1 -1
  10. package/dist/wje-master.js +318 -4
  11. package/dist/wje-master.js.map +1 -1
  12. package/dist/wje-sliding-container.js +8 -12
  13. package/dist/wje-sliding-container.js.map +1 -1
  14. package/package.json +1 -1
  15. package/dist/packages/index.d.ts +0 -100
  16. package/dist/packages/localize/localize.d.ts +0 -17
  17. package/dist/packages/translations/en-gb.d.ts +0 -13
  18. package/dist/packages/translations/sk-sk.d.ts +0 -13
  19. package/dist/packages/utils/animations.d.ts +0 -2
  20. package/dist/packages/utils/date.d.ts +0 -1
  21. package/dist/packages/utils/element-utils.d.ts +0 -46
  22. package/dist/packages/utils/event.d.ts +0 -67
  23. package/dist/packages/utils/localize.d.ts +0 -4
  24. package/dist/packages/utils/permissions-api.d.ts +0 -34
  25. package/dist/packages/utils/utils.d.ts +0 -1
  26. package/dist/packages/utils/wje-import-firefox.d.ts +0 -0
  27. package/dist/packages/utils/wje-import.d.ts +0 -0
  28. package/dist/packages/wje-accordion/accordion.d.ts +0 -2
  29. package/dist/packages/wje-accordion/accordion.element.d.ts +0 -72
  30. package/dist/packages/wje-accordion-item/accordion-item.d.ts +0 -2
  31. package/dist/packages/wje-accordion-item/accordion-item.element.d.ts +0 -40
  32. package/dist/packages/wje-animation/animation.d.ts +0 -2
  33. package/dist/packages/wje-animation/animation.element.d.ts +0 -153
  34. package/dist/packages/wje-animation/animation.test.d.ts +0 -1
  35. package/dist/packages/wje-aside/aside.d.ts +0 -2
  36. package/dist/packages/wje-aside/aside.element.d.ts +0 -31
  37. package/dist/packages/wje-avatar/avatar.d.ts +0 -2
  38. package/dist/packages/wje-avatar/avatar.element.d.ts +0 -37
  39. package/dist/packages/wje-avatar/service/service.d.ts +0 -40
  40. package/dist/packages/wje-badge/badge.d.ts +0 -2
  41. package/dist/packages/wje-badge/badge.element.d.ts +0 -35
  42. package/dist/packages/wje-badge/badge.test.d.ts +0 -1
  43. package/dist/packages/wje-breadcrumb/breadcrumb.d.ts +0 -2
  44. package/dist/packages/wje-breadcrumb/breadcrumb.element.d.ts +0 -80
  45. package/dist/packages/wje-breadcrumbs/breadcrumbs.d.ts +0 -2
  46. package/dist/packages/wje-breadcrumbs/breadcrumbs.element.d.ts +0 -97
  47. package/dist/packages/wje-breadcrumbs/breadcrumbs.test.d.ts +0 -1
  48. package/dist/packages/wje-button/button.d.ts +0 -2
  49. package/dist/packages/wje-button/button.element.d.ts +0 -173
  50. package/dist/packages/wje-button/button.test.d.ts +0 -1
  51. package/dist/packages/wje-button-group/button-group.d.ts +0 -2
  52. package/dist/packages/wje-button-group/button-group.element.d.ts +0 -39
  53. package/dist/packages/wje-card/card.d.ts +0 -2
  54. package/dist/packages/wje-card/card.element.d.ts +0 -29
  55. package/dist/packages/wje-card-content/card-content.d.ts +0 -2
  56. package/dist/packages/wje-card-content/card-content.element.d.ts +0 -22
  57. package/dist/packages/wje-card-controls/card-controls.d.ts +0 -2
  58. package/dist/packages/wje-card-controls/card-controls.element.d.ts +0 -23
  59. package/dist/packages/wje-card-header/card-header.d.ts +0 -2
  60. package/dist/packages/wje-card-header/card-header.element.d.ts +0 -22
  61. package/dist/packages/wje-card-subtitle/card-subtitle.d.ts +0 -2
  62. package/dist/packages/wje-card-subtitle/card-subtitle.element.d.ts +0 -30
  63. package/dist/packages/wje-card-title/card-title.d.ts +0 -2
  64. package/dist/packages/wje-card-title/card-title.element.d.ts +0 -32
  65. package/dist/packages/wje-carousel/carousel.d.ts +0 -2
  66. package/dist/packages/wje-carousel/carousel.element.d.ts +0 -146
  67. package/dist/packages/wje-carousel-item/carousel-item.d.ts +0 -2
  68. package/dist/packages/wje-carousel-item/carousel-item.element.d.ts +0 -38
  69. package/dist/packages/wje-checkbox/checkbox.d.ts +0 -2
  70. package/dist/packages/wje-checkbox/checkbox.element.d.ts +0 -171
  71. package/dist/packages/wje-chip/chip.d.ts +0 -2
  72. package/dist/packages/wje-chip/chip.element.d.ts +0 -29
  73. package/dist/packages/wje-col/col.d.ts +0 -2
  74. package/dist/packages/wje-col/col.element.d.ts +0 -16
  75. package/dist/packages/wje-color-picker/color-picker.d.ts +0 -2
  76. package/dist/packages/wje-color-picker/color-picker.element.d.ts +0 -187
  77. package/dist/packages/wje-container/container.d.ts +0 -2
  78. package/dist/packages/wje-container/container.element.d.ts +0 -31
  79. package/dist/packages/wje-copy-button/copy-button.d.ts +0 -2
  80. package/dist/packages/wje-copy-button/copy-button.element.d.ts +0 -89
  81. package/dist/packages/wje-copy-button/service/service.d.ts +0 -12
  82. package/dist/packages/wje-dialog/dialog.d.ts +0 -2
  83. package/dist/packages/wje-dialog/dialog.element.d.ts +0 -116
  84. package/dist/packages/wje-divider/divider.d.ts +0 -2
  85. package/dist/packages/wje-divider/divider.element.d.ts +0 -32
  86. package/dist/packages/wje-dropdown/dropdown.d.ts +0 -2
  87. package/dist/packages/wje-dropdown/dropdown.element.d.ts +0 -85
  88. package/dist/packages/wje-element/element.d.ts +0 -313
  89. package/dist/packages/wje-element/service/universal-service.d.ts +0 -18
  90. package/dist/packages/wje-file-upload/file-upload.d.ts +0 -2
  91. package/dist/packages/wje-file-upload/file-upload.element.d.ts +0 -191
  92. package/dist/packages/wje-file-upload/service/service.d.ts +0 -70
  93. package/dist/packages/wje-file-upload-item/file-upload-item.d.ts +0 -2
  94. package/dist/packages/wje-file-upload-item/file-upload-item.element.d.ts +0 -64
  95. package/dist/packages/wje-footer/footer.d.ts +0 -2
  96. package/dist/packages/wje-footer/footer.element.d.ts +0 -28
  97. package/dist/packages/wje-form/form.d.ts +0 -2
  98. package/dist/packages/wje-form/form.element.d.ts +0 -28
  99. package/dist/packages/wje-format-digital/format-digital.d.ts +0 -2
  100. package/dist/packages/wje-format-digital/format-digital.element.d.ts +0 -87
  101. package/dist/packages/wje-format-digital/format-digital.test.d.ts +0 -1
  102. package/dist/packages/wje-grid/grid.d.ts +0 -2
  103. package/dist/packages/wje-grid/grid.element.d.ts +0 -26
  104. package/dist/packages/wje-header/header.d.ts +0 -2
  105. package/dist/packages/wje-header/header.element.d.ts +0 -35
  106. package/dist/packages/wje-icon/icon.d.ts +0 -2
  107. package/dist/packages/wje-icon/icon.element.d.ts +0 -40
  108. package/dist/packages/wje-icon/service/service.d.ts +0 -11
  109. package/dist/packages/wje-icon-picker/icon-picker.d.ts +0 -2
  110. package/dist/packages/wje-icon-picker/icon-picker.element.d.ts +0 -197
  111. package/dist/packages/wje-img/img.d.ts +0 -2
  112. package/dist/packages/wje-img/img.element.d.ts +0 -30
  113. package/dist/packages/wje-img-comparer/img-comparer.d.ts +0 -2
  114. package/dist/packages/wje-img-comparer/img-comparer.element.d.ts +0 -60
  115. package/dist/packages/wje-img-comparer/service/service.d.ts +0 -1
  116. package/dist/packages/wje-infinite-scroll/infinite-scroll.d.ts +0 -2
  117. package/dist/packages/wje-infinite-scroll/infinite-scroll.element.d.ts +0 -134
  118. package/dist/packages/wje-input/input.d.ts +0 -2
  119. package/dist/packages/wje-input/input.element.d.ts +0 -204
  120. package/dist/packages/wje-input-file/input-file.d.ts +0 -2
  121. package/dist/packages/wje-input-file/input-file.element.d.ts +0 -50
  122. package/dist/packages/wje-item/item.d.ts +0 -2
  123. package/dist/packages/wje-item/item.element.d.ts +0 -68
  124. package/dist/packages/wje-kanban/kanban.d.ts +0 -2
  125. package/dist/packages/wje-kanban/kanban.element.d.ts +0 -183
  126. package/dist/packages/wje-label/label.d.ts +0 -2
  127. package/dist/packages/wje-label/label.element.d.ts +0 -34
  128. package/dist/packages/wje-list/list.d.ts +0 -2
  129. package/dist/packages/wje-list/list.element.d.ts +0 -31
  130. package/dist/packages/wje-main/main.d.ts +0 -2
  131. package/dist/packages/wje-main/main.element.d.ts +0 -30
  132. package/dist/packages/wje-masonry/masonry.d.ts +0 -2
  133. package/dist/packages/wje-masonry/masonry.element.d.ts +0 -114
  134. package/dist/packages/wje-masonry/service/service.d.ts +0 -32
  135. package/dist/packages/wje-menu/menu.d.ts +0 -2
  136. package/dist/packages/wje-menu/menu.element.d.ts +0 -47
  137. package/dist/packages/wje-menu-button/menu-button.d.ts +0 -2
  138. package/dist/packages/wje-menu-button/menu-button.element.d.ts +0 -34
  139. package/dist/packages/wje-menu-item/menu-item.d.ts +0 -2
  140. package/dist/packages/wje-menu-item/menu-item.element.d.ts +0 -139
  141. package/dist/packages/wje-menu-label/menu-label.d.ts +0 -2
  142. package/dist/packages/wje-menu-label/menu-label.element.d.ts +0 -39
  143. package/dist/packages/wje-option/option.d.ts +0 -2
  144. package/dist/packages/wje-option/option.element.d.ts +0 -59
  145. package/dist/packages/wje-options/options.d.ts +0 -2
  146. package/dist/packages/wje-options/options.element.d.ts +0 -183
  147. package/dist/packages/wje-orgchart/orgchart.d.ts +0 -2
  148. package/dist/packages/wje-orgchart/orgchart.element.d.ts +0 -24
  149. package/dist/packages/wje-orgchart-group/orgchart-group.d.ts +0 -2
  150. package/dist/packages/wje-orgchart-group/orgchart-group.element.d.ts +0 -28
  151. package/dist/packages/wje-orgchart-item/orgchart-item.d.ts +0 -2
  152. package/dist/packages/wje-orgchart-item/orgchart-item.element.d.ts +0 -49
  153. package/dist/packages/wje-panel/panel.d.ts +0 -2
  154. package/dist/packages/wje-panel/panel.element.d.ts +0 -34
  155. package/dist/packages/wje-popup/popup.d.ts +0 -2
  156. package/dist/packages/wje-popup/popup.element.d.ts +0 -93
  157. package/dist/packages/wje-progress-bar/progress-bar.d.ts +0 -2
  158. package/dist/packages/wje-progress-bar/progress-bar.element.d.ts +0 -96
  159. package/dist/packages/wje-qr-code/qr-code.d.ts +0 -2
  160. package/dist/packages/wje-qr-code/qr-code.element.d.ts +0 -33
  161. package/dist/packages/wje-radio/radio.d.ts +0 -2
  162. package/dist/packages/wje-radio/radio.element.d.ts +0 -53
  163. package/dist/packages/wje-radio-group/radio-group.d.ts +0 -2
  164. package/dist/packages/wje-radio-group/radio-group.element.d.ts +0 -137
  165. package/dist/packages/wje-rate/rate.d.ts +0 -2
  166. package/dist/packages/wje-rate/rate.element.d.ts +0 -156
  167. package/dist/packages/wje-relative-time/relative-time.d.ts +0 -2
  168. package/dist/packages/wje-relative-time/relative-time.element.d.ts +0 -55
  169. package/dist/packages/wje-relative-time/relative-time.test.d.ts +0 -1
  170. package/dist/packages/wje-reorder/reorder.d.ts +0 -2
  171. package/dist/packages/wje-reorder/reorder.element.d.ts +0 -119
  172. package/dist/packages/wje-reorder-dropzone/reorder-dropzone.d.ts +0 -2
  173. package/dist/packages/wje-reorder-dropzone/reorder-dropzone.element.d.ts +0 -23
  174. package/dist/packages/wje-reorder-handle/reorder-handle.d.ts +0 -2
  175. package/dist/packages/wje-reorder-handle/reorder-handle.element.d.ts +0 -75
  176. package/dist/packages/wje-reorder-item/reorder-item.d.ts +0 -2
  177. package/dist/packages/wje-reorder-item/reorder-item.element.d.ts +0 -24
  178. package/dist/packages/wje-route/route.d.ts +0 -2
  179. package/dist/packages/wje-route/route.element.d.ts +0 -22
  180. package/dist/packages/wje-router/router.d.ts +0 -2
  181. package/dist/packages/wje-router/router.element.d.ts +0 -39
  182. package/dist/packages/wje-router-link/router-link.d.ts +0 -2
  183. package/dist/packages/wje-router-link/router-link.element.d.ts +0 -31
  184. package/dist/packages/wje-router-outlet/router-outlet.d.ts +0 -2
  185. package/dist/packages/wje-router-outlet/router-outlet.element.d.ts +0 -15
  186. package/dist/packages/wje-row/row.d.ts +0 -2
  187. package/dist/packages/wje-row/row.element.d.ts +0 -23
  188. package/dist/packages/wje-select/select.d.ts +0 -2
  189. package/dist/packages/wje-select/select.element.d.ts +0 -315
  190. package/dist/packages/wje-slider/slider.d.ts +0 -2
  191. package/dist/packages/wje-slider/slider.element.d.ts +0 -103
  192. package/dist/packages/wje-split-view/service/service.d.ts +0 -1
  193. package/dist/packages/wje-split-view/split-view.d.ts +0 -2
  194. package/dist/packages/wje-split-view/split-view.element.d.ts +0 -66
  195. package/dist/packages/wje-status/status.d.ts +0 -2
  196. package/dist/packages/wje-status/status.element.d.ts +0 -26
  197. package/dist/packages/wje-step/step.d.ts +0 -2
  198. package/dist/packages/wje-step/step.element.d.ts +0 -23
  199. package/dist/packages/wje-stepper/stepper.d.ts +0 -2
  200. package/dist/packages/wje-stepper/stepper.element.d.ts +0 -78
  201. package/dist/packages/wje-store/default-store-actions.d.ts +0 -25
  202. package/dist/packages/wje-store/pubsub.d.ts +0 -21
  203. package/dist/packages/wje-store/store.d.ts +0 -153
  204. package/dist/packages/wje-tab/tab.d.ts +0 -2
  205. package/dist/packages/wje-tab/tab.element.d.ts +0 -41
  206. package/dist/packages/wje-tab-group/tab-group.d.ts +0 -2
  207. package/dist/packages/wje-tab-group/tab-group.element.d.ts +0 -67
  208. package/dist/packages/wje-tab-panel/tab-panel.d.ts +0 -2
  209. package/dist/packages/wje-tab-panel/tab-panel.element.d.ts +0 -23
  210. package/dist/packages/wje-textarea/textarea.d.ts +0 -2
  211. package/dist/packages/wje-textarea/textarea.element.d.ts +0 -176
  212. package/dist/packages/wje-thumbnail/thumbnail.d.ts +0 -2
  213. package/dist/packages/wje-thumbnail/thumbnail.element.d.ts +0 -31
  214. package/dist/packages/wje-timeline/timeline.d.ts +0 -2
  215. package/dist/packages/wje-timeline/timeline.element.d.ts +0 -25
  216. package/dist/packages/wje-timeline-item/timeline-item.d.ts +0 -2
  217. package/dist/packages/wje-timeline-item/timeline-item.element.d.ts +0 -27
  218. package/dist/packages/wje-toast/toast.d.ts +0 -2
  219. package/dist/packages/wje-toast/toast.element.d.ts +0 -173
  220. package/dist/packages/wje-toast/toast.test.d.ts +0 -1
  221. package/dist/packages/wje-toggle/toggle.d.ts +0 -2
  222. package/dist/packages/wje-toggle/toggle.element.d.ts +0 -65
  223. package/dist/packages/wje-toolbar/toolbar.d.ts +0 -2
  224. package/dist/packages/wje-toolbar/toolbar.element.d.ts +0 -39
  225. package/dist/packages/wje-toolbar-action/toolbar-action.d.ts +0 -2
  226. package/dist/packages/wje-toolbar-action/toolbar-action.element.d.ts +0 -35
  227. package/dist/packages/wje-tooltip/tooltip.d.ts +0 -2
  228. package/dist/packages/wje-tooltip/tooltip.element.d.ts +0 -71
  229. package/dist/packages/wje-visually-hidden/visually-hidden.d.ts +0 -2
  230. package/dist/packages/wje-visually-hidden/visually-hidden.element.d.ts +0 -29
package/dist/light.css CHANGED
@@ -527,4 +527,8 @@
527
527
  --wje-tooltip-shadow: var(--wje-shadow-medium);
528
528
  --wje-tooltip-spacing: var(--wje-spacing-x-small);
529
529
  --wje-tooltip-border-radius: var(--wje-border-radius-medium);
530
+
531
+ /* Tree */
532
+ --wje-tree-item-indent: 1.3rem;
533
+ --wje-tree-item-indent-guid-width: 0px;
530
534
  }
@@ -4270,8 +4270,9 @@ class Animation extends WJElement {
4270
4270
  this.destroyAnimation();
4271
4271
  const element = this.slotEl.assignedElements()[0];
4272
4272
  this.animations = await this.getAnimationsArray();
4273
- const selected = this.animations.find((k) => k.name === this.name);
4274
- this.animation = element == null ? void 0 : element.animate(selected.keyframes, {
4273
+ const selected = await this.animations.find((k) => k.name === this.name);
4274
+ console.log("SELECTED:", selected, element);
4275
+ this.animation = element == null ? void 0 : element.animate(selected == null ? void 0 : selected.keyframes, {
4275
4276
  delay: +this.delay,
4276
4277
  endDelay: +this.endDelay,
4277
4278
  fill: this.fill,
@@ -4315,6 +4316,7 @@ class Animation extends WJElement {
4315
4316
  } else {
4316
4317
  console.warn("Animation is not initialized or cancel is not available");
4317
4318
  }
4319
+ console.log("ANIMATION CANCELLED", this.animation.playState);
4318
4320
  }
4319
4321
  }
4320
4322
  Animation.define("wje-animation", Animation);
@@ -1 +1 @@
1
- {"version":3,"file":"wje-animation.js","sources":["../packages/wje-animation/animation.element.js","../packages/wje-animation/animation.js"],"sourcesContent":["import animations from 'animate.css?inline';\n\nimport styles from '../styles/styles.css?inline';\nimport { fetchAndParseCSS } from '../utils/animations.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * @summary This class represents an Animation element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/animation\n * @status stable\n * @augments WJElement\n * @slot - The animation main content.\n * @cssproperty --size - The size of the avatar.\n * @tag wje-animation\n */\nexport default class Animation extends WJElement {\n /**\n * Constructor for the Animation class.\n */\n constructor() {\n super();\n this._animations = [];\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set name(value) {\n this.setAttribute('name', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get name() {\n return this.getAttribute('name') || 'heartBeat';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set duration(value) {\n this.setAttribute('duration', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get duration() {\n return +this.getAttribute('duration') || 1000;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set delay(value) {\n this.setAttribute('delay', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get delay() {\n return +this.getAttribute('delay') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set endDelay(value) {\n this.setAttribute('endDelay', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get endDelay() {\n return +this.getAttribute('endDelay') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get fill() {\n return this.getAttribute('fill') || 'auto';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set iterations(value) {\n this.setAttribute('iterations', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string|number}\n */\n get iterations() {\n return this.getAttribute('iterations') || Infinity;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set iterationStart(value) {\n this.setAttribute('iterationStart', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get iterationStart() {\n return +this.getAttribute('iterationStart') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set direction(value) {\n this.setAttribute('direction', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get direction() {\n return this.getAttribute('direction') || 'normal';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set easing(value) {\n this.setAttribute('easing', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get easing() {\n return this.getAttribute('easing') || 'linear';\n }\n\n /**\n * Setter for the animations property.\n * @param {Array} value The new value for the animations property.\n */\n set animations(value) {\n this._animations = value;\n }\n\n /**\n * Getter for the animations' property.\n * @returns {Array} The current value of the animations' property.\n */\n get animations() {\n return this._animations;\n }\n\n /**\n * The class name for the Animation element.\n * @type {string}\n */\n className = 'Animation';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {object} The styles for the Animation element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n * @returns {Array} An array containing the name of the observed attribute.\n */\n static get observedAttributes() {\n return ['name'];\n }\n\n /**\n * Method to setup attributes for the Animation element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Method to draw the Animation element.\n * @returns {object} The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let slot = document.createElement('slot');\n\n fragment.appendChild(slot);\n\n this.slotEl = slot;\n\n return fragment;\n }\n\n /**\n * Method to perform actions after the Animation element is drawn.\n * This method destroys any existing animation, fetches a new animations array,\n * selects the appropriate animation, and applies it to the element.\n */\n async afterDraw() {\n this.destroyAnimation();\n\n const element = this.slotEl.assignedElements()[0];\n this.animations = await this.getAnimationsArray();\n const selected = this.animations.find((k) => k.name === this.name);\n\n this.animation = element?.animate(selected.keyframes, {\n delay: +this.delay,\n endDelay: +this.endDelay,\n fill: this.fill,\n duration: +this.duration,\n iterationStart: +this.iterationStart,\n iterations: this.iterations,\n direction: this.direction,\n easing: this.easing,\n });\n if (this.animation) this.animation.play();\n }\n\n /**\n * Method to fetch and parse the animations array from a CSS file.\n * @returns {Array} An array of animation definitions parsed from the CSS file.\n */\n async getAnimationsArray() {\n return await fetchAndParseCSS(animations);\n }\n\n /**\n * Method to destroy the current animation.\n */\n destroyAnimation() {\n if (this.animation) {\n this.cancel();\n }\n }\n\n /**\n * Method to play the current animation.\n */\n play() {\n if (this.animation) {\n this.animation.play();\n }\n }\n\n /**\n * Method to cancel the current animation.\n */\n cancel() {\n if (this.animation && typeof this.animation.cancel === 'function') {\n this.animation.cancel();\n } else {\n console.warn('Animation is not initialized or cancel is not available');\n }\n }\n}\n","import Animation from './animation.element.js';\n\nexport default Animation;\n\nAnimation.define('wje-animation', Animation);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
1
+ {"version":3,"file":"wje-animation.js","sources":["../packages/wje-animation/animation.element.js","../packages/wje-animation/animation.js"],"sourcesContent":["import animations from 'animate.css?inline';\n\nimport styles from '../styles/styles.css?inline';\nimport { fetchAndParseCSS } from '../utils/animations.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * @summary This class represents an Animation element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/animation\n * @status stable\n * @augments WJElement\n * @slot - The animation main content.\n * @cssproperty --size - The size of the avatar.\n * @tag wje-animation\n */\nexport default class Animation extends WJElement {\n /**\n * Constructor for the Animation class.\n */\n constructor() {\n super();\n this._animations = [];\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set name(value) {\n this.setAttribute('name', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get name() {\n return this.getAttribute('name') || 'heartBeat';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set duration(value) {\n this.setAttribute('duration', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get duration() {\n return +this.getAttribute('duration') || 1000;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set delay(value) {\n this.setAttribute('delay', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get delay() {\n return +this.getAttribute('delay') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set endDelay(value) {\n this.setAttribute('endDelay', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get endDelay() {\n return +this.getAttribute('endDelay') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get fill() {\n return this.getAttribute('fill') || 'auto';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set iterations(value) {\n this.setAttribute('iterations', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string|number}\n */\n get iterations() {\n return this.getAttribute('iterations') || Infinity;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set iterationStart(value) {\n this.setAttribute('iterationStart', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {number}\n */\n get iterationStart() {\n return +this.getAttribute('iterationStart') || 0;\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set direction(value) {\n this.setAttribute('direction', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get direction() {\n return this.getAttribute('direction') || 'normal';\n }\n\n /**\n * Setter for the name attribute.\n * @param value\n */\n set easing(value) {\n this.setAttribute('easing', value);\n }\n\n /**\n * Getter for the name attribute.\n * @returns {string}\n */\n get easing() {\n return this.getAttribute('easing') || 'linear';\n }\n\n /**\n * Setter for the animations property.\n * @param {Array} value The new value for the animations property.\n */\n set animations(value) {\n this._animations = value;\n }\n\n /**\n * Getter for the animations' property.\n * @returns {Array} The current value of the animations' property.\n */\n get animations() {\n return this._animations;\n }\n\n /**\n * The class name for the Animation element.\n * @type {string}\n */\n className = 'Animation';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {object} The styles for the Animation element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n * @returns {Array} An array containing the name of the observed attribute.\n */\n static get observedAttributes() {\n return ['name'];\n }\n\n /**\n * Method to setup attributes for the Animation element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Method to draw the Animation element.\n * @returns {object} The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let slot = document.createElement('slot');\n\n fragment.appendChild(slot);\n\n this.slotEl = slot;\n\n return fragment;\n }\n\n /**\n * Method to perform actions after the Animation element is drawn.\n * This method destroys any existing animation, fetches a new animations array,\n * selects the appropriate animation, and applies it to the element.\n */\n async afterDraw() {\n this.destroyAnimation();\n\n const element = this.slotEl.assignedElements()[0];\n this.animations = await this.getAnimationsArray();\n const selected = await this.animations.find((k) => k.name === this.name);\n console.log(\"SELECTED:\", selected, element);\n this.animation = element?.animate(selected?.keyframes, {\n delay: +this.delay,\n endDelay: +this.endDelay,\n fill: this.fill,\n duration: +this.duration,\n iterationStart: +this.iterationStart,\n iterations: this.iterations,\n direction: this.direction,\n easing: this.easing,\n });\n if (this.animation) this.animation.play();\n }\n\n /**\n * Method to fetch and parse the animations array from a CSS file.\n * @returns {Array} An array of animation definitions parsed from the CSS file.\n */\n async getAnimationsArray() {\n return await fetchAndParseCSS(animations);\n }\n\n /**\n * Method to destroy the current animation.\n */\n destroyAnimation() {\n if (this.animation) {\n this.cancel();\n }\n }\n\n /**\n * Method to play the current animation.\n */\n play() {\n if (this.animation) {\n this.animation.play();\n }\n }\n\n /**\n * Method to cancel the current animation.\n */\n cancel() {\n if (this.animation && typeof this.animation.cancel === 'function') {\n this.animation.cancel();\n } else {\n console.warn('Animation is not initialized or cancel is not available');\n }\n\n console.log(\"ANIMATION CANCELLED\", this.animation.playState);\n }\n}\n","import Animation from './animation.element.js';\n\nexport default Animation;\n\nAnimation.define('wje-animation', Animation);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
@@ -63,11 +63,9 @@ class FileUploadItem extends WJElement {
63
63
  * @param {string} newValue The new value of the attribute.
64
64
  */
65
65
  attributeChangedCallback(name, oldValue, newValue) {
66
- console.log("attributeChangedCallback", name, oldValue, newValue, this.drawingStatus);
67
- if (name === "uploaded") {
68
- console.log("uploaded 1:", +newValue, +this.size, +newValue / +this.size * 100 || 0);
66
+ if (name === "uploaded" && oldValue !== newValue && this.uploadedEl) {
67
+ this.uploadedEl.setAttribute("value", newValue);
69
68
  let progress = +newValue / +this.size * 100 || 0;
70
- console.log("progress 2:", progress);
71
69
  this.sliderEl.setAttribute("progress", Math.round(progress, 0));
72
70
  }
73
71
  }
@@ -1 +1 @@
1
- {"version":3,"file":"wje-file-upload-item.js","sources":["../packages/wje-file-upload-item/file-upload-item.element.js","../packages/wje-file-upload-item/file-upload-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport FormatDigital from '../wje-format-digital/format-digital.js';\nimport Icon from '../wje-icon/icon.js';\nimport Slider from '../wje-slider/slider.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to upload files.\n * `FileUploadItem` is a custom web component that represents a file upload item.\n * It extends from `WJElement` and uses the `Localizer` utility for localization.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @csspart button - The delete button part\n * @csspart image - The image part\n * @csspart name - The name part\n * @csspart size - The size part\n * @slot img - Slot for the image\n * @slot action - Slot for the action buttons\n * @cssproperty --primary-color - The primary color of the file upload item.\n * //@fires wje-button:click - Dispatches when the delete button is clicked\n * @tag wje-file-upload\n */\nexport default class FileUploadItem extends WJElement {\n /**\n * Creates an instance of FileUploadItem.\n * @class\n */\n constructor() {\n super();\n this.localizer = new Localizer(this);\n }\n\n set size(value) {\n this.setAttribute('size', value);\n }\n\n get size() {\n return this.getAttribute('size');\n }\n\n /**\n * Dependencies for the component.\n * @type {object}\n */\n dependencies = {\n 'wje-format-digital': FormatDigital,\n 'wje-button': Button,\n 'wje-slider': Slider,\n 'wje-icon': Icon,\n };\n\n className = 'FileUploadItem';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['uploaded'];\n }\n\n /**\n * Called when an observed attribute has been added, removed, updated, or replaced.\n * @param {string} name The name of the attribute that has changed.\n * @param {string} oldValue The old value of the attribute.\n * @param {string} newValue The new value of the attribute.\n */\n attributeChangedCallback(name, oldValue, newValue) {\n console.log('attributeChangedCallback', name, oldValue, newValue, this.drawingStatus);\n if (name === 'uploaded') {\n console.log('uploaded 1:', +newValue, +this.size, (+newValue / +this.size) * 100 || 0);\n // this.uploadedEl.setAttribute('value', this.uploaded);\n\n let progress = ((+newValue / +this.size) * 100) || 0;\n\n console.log('progress 2:', progress);\n this.sliderEl.setAttribute(\"progress\", Math.round(progress, 0));\n }\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Method to draw the component on the screen.\n * @returns {DocumentFragment} The fragment containing the component.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-file-upload-item');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'img');\n\n let image = document.createElement('div');\n image.setAttribute('part', 'image');\n image.classList.add('image');\n\n let name = document.createElement('span');\n name.classList.add('name');\n name.innerText = this.name;\n\n let actions = document.createElement('slot');\n actions.classList.add('actions');\n actions.setAttribute('name', 'action');\n\n let button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n button.setAttribute('size', 'small');\n button.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n\n let sizeWrapper = document.createElement('span');\n sizeWrapper.classList.add('size');\n\n let uploaded = document.createElement('wje-format-digital');\n uploaded.setAttribute('value', this.uploaded || 0);\n uploaded.innerHTML = `<span slot=\"start\">${this.localizer.translate('wj.file.upload.uploaded')}</span>`;\n\n let size = document.createElement('wje-format-digital');\n size.setAttribute('value', this.size || 0);\n size.innerHTML = `<span slot=\"start\">&nbsp;${this.localizer.translate('wj.file.upload.from')} </span>`;\n\n let slider = document.createElement('wje-progress-bar');\n slider.classList.add('file-progress');\n slider.setAttribute('id', 'id-' + this.lastModified);\n slider.setAttribute('progress', this.progress);\n slider.setAttribute('color', 'success');\n\n image.appendChild(slot);\n actions.appendChild(button);\n\n sizeWrapper.appendChild(uploaded);\n sizeWrapper.appendChild(size);\n\n native.appendChild(image);\n native.appendChild(name);\n native.appendChild(sizeWrapper);\n native.appendChild(actions);\n native.appendChild(slider);\n\n fragment.appendChild(native);\n\n this.button = button;\n this.uploadedEl = uploaded;\n this.sliderEl = slider;\n\n return fragment;\n }\n\n /**\n * Called after the component has been drawn.\n */\n afterDraw() {\n this.button.addEventListener('wje-button:click', this.onDelete);\n }\n\n /**\n * Handles the delete action.\n */\n onDelete = () => {\n this.remove();\n };\n}\n","import FileUploadItem from './file-upload-item.element.js';\n\nexport default FileUploadItem;\n\nFileUploadItem.define('wje-file-upload-item', FileUploadItem);\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"wje-file-upload-item.js","sources":["../packages/wje-file-upload-item/file-upload-item.element.js","../packages/wje-file-upload-item/file-upload-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport FormatDigital from '../wje-format-digital/format-digital.js';\nimport Icon from '../wje-icon/icon.js';\nimport Slider from '../wje-slider/slider.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to upload files.\n * `FileUploadItem` is a custom web component that represents a file upload item.\n * It extends from `WJElement` and uses the `Localizer` utility for localization.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @csspart button - The delete button part\n * @csspart image - The image part\n * @csspart name - The name part\n * @csspart size - The size part\n * @slot img - Slot for the image\n * @slot action - Slot for the action buttons\n * @cssproperty --primary-color - The primary color of the file upload item.\n * //@fires wje-button:click - Dispatches when the delete button is clicked\n * @tag wje-file-upload\n */\nexport default class FileUploadItem extends WJElement {\n /**\n * Creates an instance of FileUploadItem.\n * @class\n */\n constructor() {\n super();\n this.localizer = new Localizer(this);\n }\n\n set size(value) {\n this.setAttribute('size', value);\n }\n\n get size() {\n return this.getAttribute('size');\n }\n\n /**\n * Dependencies for the component.\n * @type {object}\n */\n dependencies = {\n 'wje-format-digital': FormatDigital,\n 'wje-button': Button,\n 'wje-slider': Slider,\n 'wje-icon': Icon,\n };\n\n className = 'FileUploadItem';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['uploaded'];\n }\n\n /**\n * Called when an observed attribute has been added, removed, updated, or replaced.\n * @param {string} name The name of the attribute that has changed.\n * @param {string} oldValue The old value of the attribute.\n * @param {string} newValue The new value of the attribute.\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'uploaded' && oldValue !== newValue && this.uploadedEl) {\n this.uploadedEl.setAttribute('value', newValue);\n\n let progress = ((+newValue / +this.size) * 100) || 0;\n\n this.sliderEl.setAttribute(\"progress\", Math.round(progress, 0));\n }\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Method to draw the component on the screen.\n * @returns {DocumentFragment} The fragment containing the component.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-file-upload-item');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'img');\n\n let image = document.createElement('div');\n image.setAttribute('part', 'image');\n image.classList.add('image');\n\n let name = document.createElement('span');\n name.classList.add('name');\n name.innerText = this.name;\n\n let actions = document.createElement('slot');\n actions.classList.add('actions');\n actions.setAttribute('name', 'action');\n\n let button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n button.setAttribute('size', 'small');\n button.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n\n let sizeWrapper = document.createElement('span');\n sizeWrapper.classList.add('size');\n\n let uploaded = document.createElement('wje-format-digital');\n uploaded.setAttribute('value', this.uploaded || 0);\n uploaded.innerHTML = `<span slot=\"start\">${this.localizer.translate('wj.file.upload.uploaded')}</span>`;\n\n let size = document.createElement('wje-format-digital');\n size.setAttribute('value', this.size || 0);\n size.innerHTML = `<span slot=\"start\">&nbsp;${this.localizer.translate('wj.file.upload.from')} </span>`;\n\n let slider = document.createElement('wje-progress-bar');\n slider.classList.add('file-progress');\n slider.setAttribute('id', 'id-' + this.lastModified);\n slider.setAttribute('progress', this.progress);\n slider.setAttribute('color', 'success');\n\n image.appendChild(slot);\n actions.appendChild(button);\n\n sizeWrapper.appendChild(uploaded);\n sizeWrapper.appendChild(size);\n\n native.appendChild(image);\n native.appendChild(name);\n native.appendChild(sizeWrapper);\n native.appendChild(actions);\n native.appendChild(slider);\n\n fragment.appendChild(native);\n\n this.button = button;\n this.uploadedEl = uploaded;\n this.sliderEl = slider;\n\n return fragment;\n }\n\n /**\n * Called after the component has been drawn.\n */\n afterDraw() {\n this.button.addEventListener('wje-button:click', this.onDelete);\n }\n\n /**\n * Handles the delete action.\n */\n onDelete = () => {\n this.remove();\n };\n}\n","import FileUploadItem from './file-upload-item.element.js';\n\nexport default FileUploadItem;\n\nFileUploadItem.define('wje-file-upload-item', FileUploadItem);\n"],"names":[],"mappings":"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"}
@@ -115,6 +115,7 @@ async function uploadFileInChunks(url, file, preview, chunkSize = 1024 * 1024) {
115
115
  formData.append("file", new Blob([stream]));
116
116
  formData.append("chunkIndex", Math.floor(offset / chunkSize));
117
117
  formData.append("totalChunks", totalChunks);
118
+ formData.append("fileName", file.name);
118
119
  try {
119
120
  const response2 = await fetch(url, {
120
121
  method: "POST",
@@ -1 +1 @@
1
- {"version":3,"file":"wje-file-upload.js","sources":["../packages/wje-file-upload/service/service.js","../packages/wje-file-upload/file-upload.element.js","../packages/wje-file-upload/file-upload.js"],"sourcesContent":["/**\n * Returns a list of file type categories and their corresponding icon names.\n * @returns {Array<object>} An array of objects representing file type categories.\n * Each object contains the following properties:\n * - `type` {Array&lt;string>} A list of file extensions associated with the category.\n * - `name` {string} The name of the icon representing the category.\n * @example\n * const types = fileType();\n * console.log(types);\n * // [\n * // { type: [\"jpg\", \"jpeg\", \"png\", \"gif\", \"bpm\", \"tiff\", \"svg\"], name: \"photo\" },\n * // { type: [\"zip\", \"rar\", \"cab\", \"jar\", \"tar\", \"gzip\", \"uue\", \"bz2\", \"scorm\", \"war\"], name: \"file-type-zip\" },\n * // ...\n * // ]\n */\nfunction fileType() {\n return [\n {\n type: ['jpg', 'jpeg', 'png', 'gif', 'bpm', 'tiff', 'svg'],\n name: 'photo',\n },\n {\n type: ['zip', 'rar', 'cab', 'jar', 'tar', 'gzip', 'uue', 'bz2', 'scorm', 'war'],\n name: 'file-type-zip',\n },\n {\n type: ['mov', 'mp4', 'avi', 'flv'],\n name: 'video',\n },\n {\n type: ['m4a', 'mp3', 'wav'],\n name: 'audio',\n },\n {\n type: ['html', 'html'],\n name: 'file-type-html',\n },\n {\n type: ['css'],\n name: 'code',\n },\n {\n type: ['txt'],\n name: 'file-type-txt',\n },\n {\n type: ['doc', 'docx'],\n name: 'file-type-doc',\n },\n {\n type: ['xls', 'xlsx'],\n name: 'file-type-xls',\n },\n {\n type: ['pdf'],\n name: 'file-type-pdf',\n },\n {\n type: ['ppt', 'pptx', 'odp'],\n name: 'file-type-ppt',\n },\n ];\n}\n\n/**\n * Retrieves the icon name for a given file type.\n * @param {string} type The file type or category (e.g., \"pdf\", \"image\", \"folder\").\n * @returns {string} The name of the icon associated with the file type.\n * @example\n * getFileTypeIcon('pdf'); // Returns the icon name for PDF files.\n * getFileTypeIcon('folder'); // Returns 'folder'.\n */\nexport function getFileTypeIcon(type) {\n let searchType;\n if (type.toLowerCase() !== 'folder') {\n fileType().forEach((i) => {\n if (i.type.includes(type.toLowerCase())) {\n searchType = i.name;\n }\n });\n } else {\n searchType = 'folder';\n }\n\n return searchType;\n}\n\n/**\n * Checks if a given file matches any of the accepted file types.\n * @param {File} file The file to validate.\n * @param {string|string[]} acceptedFileTypes A comma-separated string or an array of accepted MIME types or file extensions.\n * @returns {boolean} Returns `true` if the file type is valid, otherwise `false`.\n * @throws {Error} Throws an error if `acceptedFileTypes` is empty.\n * @example\n * const file = new File([\"\"], \"example.png\", { type: \"image/png\" });\n * const isValid = isValidFileType(file, \"image/*,application/pdf\");\n * console.log(isValid); // true\n * @example\n * const file = new File([\"\"], \"example.txt\", { type: \"text/plain\" });\n * const isValid = isValidFileType(file, [\"text/plain\", \"application/json\"]);\n * console.log(isValid); // true\n */\nexport function isValidFileType(file, acceptedFileTypes) {\n // Get the base MIME type\n const baseMimeType = file.type.split('/')[0];\n // If acceptedFileTypes is a string, convert it to an array\n let acceptedTypes = Array.isArray(acceptedFileTypes) ? acceptedFileTypes : acceptedFileTypes.split(',');\n // If acceptedFileTypes is empty, throw an error\n if (acceptedTypes.length === 0) {\n throw new Error('acceptedFileTypes is empty');\n }\n\n // Iterate over acceptedFileTypes\n for (let type of acceptedTypes) {\n // ak type na image/* a file je napriklad image/png tak vratime true\n if (type.includes(baseMimeType + '/*')) {\n return true;\n }\n\n // Ak type suboru obsahuje konkretny typ a to bud ak je to zapisany napriklad image/png alebo len png tak vratime true\n if (type.includes(file.type) || type.includes(file.type.split('/')[1])) {\n return true;\n }\n }\n\n // Ak sme nic nenasli tak vratime false\n return false;\n}\n\n/**\n * Uploads a file in chunks using `XMLHttpRequest`, allowing for progress tracking.\n * @param {File} file The file to be uploaded.\n * @param {number} chunkSize The size of each chunk in bytes.\n * @param {HTMLElement} preview The element used to display upload progress.\n */\nexport function uploadFile(file, chunkSize, preview) {\n let offset = 0;\n const progressArray = new Array(Math.ceil(file.size / chunkSize)).fill(0);\n\n const readAndUploadChunk = (start, end) => {\n const reader = new FileReader();\n const chunkIndex = start / chunkSize;\n const chunk = file.slice(start, end);\n\n reader.onload = (e) => {\n const xhr = new XMLHttpRequest();\n console.log('uploadFile function:', start, end, file.size);\n xhr.open('POST', '/upload', true);\n xhr.setRequestHeader('Content-Range', `${start}-${end}/${file.size}`);\n\n xhr.upload.onprogress = (event) => {\n if (event.lengthComputable) {\n const progress = (event.loaded / event.total) * 100;\n progressArray[chunkIndex] = progress;\n const totalProgress = progressArray.reduce((a, b) => a + b, 0) / progressArray.length;\n // this.updateOverallProgress(progressArray, file.lastModified);\n // preview.setAttribute(\"progress\", totalProgress);\n }\n };\n\n xhr.onload = () => {\n if (xhr.status === 200 || xhr.status === 201) {\n progressArray[chunkIndex] = 100; // Táto časť je kompletná\n\n // Odoslanie ďalšej časti\n start += chunkSize;\n if (start < file.size) {\n preview.setAttribute('uploaded', start);\n readAndUploadChunk(start, Math.min(start + chunkSize, file.size));\n } else {\n preview.setAttribute('uploaded', start);\n }\n } else {\n console.error('Error during upload: ', xhr.statusText);\n }\n };\n xhr.send(e.target.result);\n };\n reader.readAsArrayBuffer(chunk);\n };\n\n readAndUploadChunk(offset, Math.min(offset + chunkSize, file.size));\n}\n\n/**\n * Returns a function for uploading files either in chunks or as a whole file, based on the provided options.\n * @param {string} url The URL to which the file will be uploaded.\n * @param {number} [chunkSize] The size of each chunk in bytes when uploading in chunks (default is 1MB).\n * @param {boolean} [wholeFile] Whether to upload the file as a whole. If `true`, the entire file is uploaded at once.\n * @returns {Function} A function that takes a file and a preview element as arguments and uploads the file.\n * @example\n * // Upload a file in chunks\n * const uploadInChunks = upload('/upload', 1024 * 512); // 512KB chunks\n * uploadInChunks(file, previewElement);\n * @example\n * // Upload a whole file\n * const uploadWhole = upload('/upload', undefined, true);\n * uploadWhole(file, previewElement);\n */\nexport function upload(url, chunkSize = 1024 * 1024, wholeFile = false) {\n if (wholeFile) {\n return (file, preview) => uploadWholeFile(url, file, preview);\n }\n return (file, preview) => uploadFileInChunks(url, file, preview, chunkSize);\n}\n\n/**\n * Uploads a file in chunks to a specified URL, allowing for progress tracking and resuming in case of errors.\n * @param {string} url The URL to which the file chunks will be uploaded.\n * @param {File} file The file to be uploaded in chunks.\n * @param {HTMLElement} preview The element used to display upload progress.\n * @param {number} [chunkSize] The size of each chunk in bytes (default is 1MB).\n * @returns {Promise<object>} Resolves with the response of the last chunk uploaded, parsed as JSON.\n * @throws {Error} - Throws an error if a chunk fails to upload.\n */\nexport async function uploadFileInChunks(url, file, preview, chunkSize = 1024 * 1024) {\n let offset = 0;\n const totalChunks = Math.ceil(file.size / chunkSize);\n const partResponses = [];\n\n while (offset < file.size) {\n const chunk = file.slice(offset, offset + chunkSize);\n\n // Creating a custom ReadableStream to track progress of the current chunk\n const stream = new ReadableStream({\n start(controller) {\n const reader = chunk.stream().getReader();\n let uploadedBytes = 0;\n\n reader.read().then(function process({ done, value }) {\n if (done) {\n controller.close();\n return Promise.resolve();\n }\n\n // Track progress\n uploadedBytes += value.byteLength;\n const percentComplete = ((offset + uploadedBytes) / file.size) * 100;\n console.log(`Upload Progress: ${percentComplete.toFixed(2)}%`);\n preview.setAttribute('uploaded', offset + uploadedBytes);\n\n // Enqueue chunk data into the stream\n controller.enqueue(value);\n\n // Read the next chunk\n return reader.read().then(process);\n });\n },\n });\n\n const formData = new FormData();\n formData.append('file', new Blob([stream])); // Send the current stream (chunk)\n formData.append('chunkIndex', Math.floor(offset / chunkSize)); // Send chunk index\n formData.append('totalChunks', totalChunks); // Send total chunks\n\n try {\n // Send the current chunk via Fetch\n const response = await fetch(url, {\n method: 'POST',\n body: formData,\n });\n\n if (!response.ok) {\n throw new Error(`Failed to upload chunk ${Math.floor(offset / chunkSize) + 1}: ${response.statusText}`);\n }\n\n console.log(`Chunk ${Math.floor(offset / chunkSize) + 1}/${totalChunks} uploaded successfully.`);\n partResponses.push(response);\n } catch (error) {\n console.error('Error uploading chunk:', error);\n break;\n }\n\n // Move to the next chunk\n offset += chunkSize;\n }\n\n console.log('File upload complete!');\n const response = await partResponses.at(-1).json();\n\n return {\n data: response,\n file,\n }\n}\n\n/**\n * Uploads a file to a specified URL using a `POST` request and updates the preview element with the uploaded file size.\n * @param {string} url The URL to which the file will be uploaded.\n * @param {File} file The file to be uploaded.\n * @param {HTMLElement} preview The element that displays the upload preview. It will be updated with the file size.\n * @returns {Promise<{data: object, file: File}>} - A promise that resolves with the server response and the uploaded file.\n * @throws {Error} - Logs an error to the console if the request fails.\n */\nexport function uploadWholeFile(url, file, preview) {\n const formData = new FormData();\n formData.append('file', file);\n\n //use fetch\n return fetch(url, {\n method: 'POST',\n body: formData,\n })\n .then((response) => response.json())\n .then((data) => {\n preview.setAttribute('uploaded', file.size);\n return {\n data,\n file,\n };\n })\n .catch((error) => {\n console.error('Error:', error);\n });\n}\n","import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport { getFileTypeIcon, isValidFileType, upload } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary FileUpload is a custom web component for uploading files.\n * It extends from WJElement and provides functionalities for file upload.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @slot - This is a default/unnamed slot.\n * @csspart native - The native file upload part.\n * @csspart file-list - The file list part.\n * @csspart upload-button - The label part.\n * @event change - Fires when the file input changes.\n * @event drop - Fires when a file is dropped into the component.\n * @attribute {string} accepted-types - The accepted file types for upload.\n * @attribute {number} chunk-size - The chunk size for file upload.\n * @attribute {number} max-file-size - The maximum file size for upload.\n * @attribute {string} upload-url - The URL to set as the upload URL.\n * @attribute {boolean} auto-process-files - The auto process files attribute.\n * @attribute {boolean} no-upload-button - The no upload button attribute.\n * @tag wje-file-upload\n */\nexport default class FileUpload extends WJElement {\n /**\n * Constructor for FileUpload.\n * Initializes a new instance of the Localizer.\n */\n constructor() {\n super();\n this.localizer = new Localizer(this);\n this._uploadedFiles = [];\n this._queuedFiles = [];\n }\n\n /**\n * Dependencies for the FileUpload component.\n * @type {object}\n */\n dependencies = {\n 'wje-button': Button,\n };\n\n /**\n * Setter for acceptedTypes attribute.\n * @param {string} value The accepted file types for upload.\n */\n set acceptedTypes(value) {\n this.setAttribute('accepted-types', value);\n }\n\n /**\n * Getter for acceptedTypes attribute.\n * @returns {string} The accepted file types for upload.\n */\n get acceptedTypes() {\n const accepted = this.getAttribute('accepted-types');\n return this.hasAttribute('accepted-types') ? accepted : '';\n }\n\n /**\n * Setter for chunkSize attribute.\n * @param {number} value The chunk size for file upload.\n */\n set chunkSize(value) {\n this.setAttribute('chunk-size', value);\n }\n\n /**\n * Getter for chunkSize attribute.\n * @returns {number} The chunk size for file upload.\n */\n get chunkSize() {\n const chunk = this.getAttribute('chunk-size');\n return this.hasAttribute('chunk-size') ? chunk : 1024 * 1024;\n }\n\n /**\n * Setter for maxFileSize attribute.\n * @param {number} value The maximum file size for upload.\n */\n set maxFileSize(value) {\n this.setAttribute('max-file-size', value);\n }\n\n /**\n * Getter for maxFileSize attribute.\n * @returns {number} The maximum file size for upload.\n */\n get maxFileSize() {\n const fileSize = this.getAttribute('max-file-size');\n return this.hasAttribute('max-file-size') ? fileSize * 1024 * 1024 : 1024 * 1024;\n }\n\n /**\n * Setter for label attribute.\n * @param {string} value The URL to set as the upload URL.\n */\n set uploadUrl(value) {\n this.setAttribute('upload-url', value);\n }\n\n /**\n * Gets the upload URL for the file upload element.\n * @returns {string} The upload URL for the file upload element.\n */\n get uploadUrl() {\n return this.getAttribute('upload-url') ?? '/upload';\n }\n\n /**\n * Sets the autoProcessFiles attribute.\n * @param value\n */\n set autoProcessFiles(value) {\n this.setAttribute('auto-process-files', value);\n }\n\n /**\n * Gets the autoProcessFiles attribute.\n * @returns {any|boolean}\n */\n get autoProcessFiles() {\n return JSON.parse(this.getAttribute('auto-process-files')) ?? true;\n }\n\n /**\n * Sets the noUploadButton attribute.\n * @param value\n */\n set noUploadButton(value) {\n this.setAttribute('no-upload-button', value);\n }\n\n /**\n * Gets the noUploadButton attribute.\n * @returns {boolean}\n */\n get noUploadButton() {\n return this.hasAttribute('no-upload-button');\n }\n\n /**\n * Sets the uploaded files.\n * @param value\n */\n set uploadedFiles(value) {\n this._uploadedFiles = value;\n }\n\n /**\n * Return the uploaded files.\n * @returns {[]}\n */\n get uploadedFiles() {\n return this._uploadedFiles;\n }\n\n /**\n * Sets the to-chunk attribute.\n * @param value\n */\n set toChunk(value) {\n this.setAttribute('to-chunk', value);\n }\n\n /**\n * Gets the to-chunk attribute.\n * @returns {boolean}\n */\n get toChunk() {\n return this.hasAttribute('to-chunk');\n }\n\n className = 'FileUpload';\n\n /**\n * Getter for cssStyleSheet.\n * @returns {string} The CSS styles for the component.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for observedAttributes.\n * @returns {Array} An empty array as no attributes are observed.\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Method to setup attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n beforeDraw() {\n console.log('beforeDraw', this.toChunk, !this.toChunk);\n this.uploadFunction = upload(this.uploadUrl, this.chunkSize, !this.toChunk);\n }\n\n /**\n * Method to draw the component on the screen.\n * @returns {DocumentFragment} The fragment containing the component.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-file-upload');\n native.setAttribute('part', 'native');\n\n let label = document.createElement('div');\n label.setAttribute('part', 'label');\n label.classList.add('file-label');\n label.setAttribute('part', 'file-label');\n\n let fileList = document.createElement('slot');\n fileList.setAttribute('name', 'item');\n fileList.setAttribute('part', 'items');\n fileList.classList.add('file-list');\n\n let slot = document.createElement('slot');\n label.appendChild(slot);\n\n let fileInput = document.createElement('input');\n fileInput.setAttribute('type', 'file');\n fileInput.setAttribute('multiple', '');\n fileInput.setAttribute('style', 'display:none;');\n\n if (!this.noUploadButton) {\n let button = document.createElement('wje-button');\n button.innerText = this.label || this.localizer.translate('wj.file.upload.button');\n button.setAttribute('part', 'upload-button');\n\n label.appendChild(button);\n\n this.button = button;\n }\n\n native.appendChild(fileInput);\n native.appendChild(label);\n native.appendChild(fileList);\n\n fragment.appendChild(native);\n\n this.native = native;\n this.fileList = fileList;\n this.fileInput = fileInput;\n\n return fragment;\n }\n\n /**\n * Method to perform actions after the component is drawn.\n */\n afterDraw() {\n this.button?.addEventListener('click', () => {\n this.fileInput.click();\n });\n\n this.fileInput.addEventListener('change', this.handleInputChange);\n this.native.addEventListener('drop', this.handleDrop);\n\n let dragEventCounter = 0;\n\n this.native.addEventListener('dragenter', (event) => {\n event.preventDefault();\n\n if (dragEventCounter === 0) {\n this.native.classList.add('highlight');\n }\n\n dragEventCounter += 1;\n });\n\n this.native.addEventListener('dragover', (event) => {\n event.preventDefault();\n\n if (dragEventCounter === 0) {\n dragEventCounter = 1;\n }\n });\n\n this.native.addEventListener('dragleave', (event) => {\n event.preventDefault();\n\n dragEventCounter -= 1;\n\n if (dragEventCounter <= 0) {\n dragEventCounter = 0;\n this.native.classList.remove('highlight');\n }\n });\n\n this.native.addEventListener('drop', (event) => {\n event.preventDefault();\n\n dragEventCounter = 0;\n this.native.classList.remove('highlight');\n });\n }\n\n /**\n * Method to handle form submission.\n * @param {Event} event The form submission event.\n */\n handleSubmit(event) {\n event.preventDefault();\n\n // TODO: TU TREBA PRIDAT ZOBRAZENIE SUBORU A JEHO PROCESSU\n\n this.addFilesToQueue(this.fileInput.files);\n }\n\n /**\n * Method to handle file drop event.\n * @param {Event} event The file drop event object.\n */\n handleDrop = (event) => {\n const fileList = event.dataTransfer.files;\n\n this.resetFormState();\n\n this.addFilesToQueue(fileList);\n };\n\n /**\n * Method to handle file input change event.\n * @param {Event} event The file input change event object.\n */\n handleInputChange = (event) => {\n this.resetFormState();\n\n try {\n this.handleSubmit(event);\n } catch (err) { }\n };\n\n /**\n * Method to add files to the queue.\n * @param files\n */\n addFilesToQueue(files) {\n this._queuedFiles = [...files];\n\n this.dispatchEvent(\n new CustomEvent('file-upload:files-added', { detail: files, bubbles: true, composed: true })\n );\n this.onAddedFiles?.();\n\n if (this.autoProcessFiles) {\n this.uploadFiles();\n }\n\n this.fileInput.value = '';\n }\n\n /**\n * Method to upload files.\n */\n uploadFiles() {\n if (this._queuedFiles.length === 0) {\n return;\n }\n\n const uploadPromises = this._queuedFiles.map((file) => this.createUploadPromise(file));\n uploadPromises\n .reduce((prev, curr) => {\n return prev.then(() => {\n return curr;\n });\n }, Promise.resolve())\n .then(() => {\n this.dispatchEvent(\n new CustomEvent('file-upload:all-files-uploaded', {\n detail: this.uploadedFiles,\n bubbles: true,\n composed: true,\n })\n );\n this.onAllFilesUploaded?.();\n this._queuedFiles = [];\n });\n }\n\n /**\n * Method to create an upload promise.\n * @param file\n * @returns {Promise<unknown>}\n */\n createUploadPromise = (file) => {\n return new Promise((resolve, reject) => {\n this.assertFilesValid(file);\n let preview;\n\n let reader = new FileReader();\n reader.onload = (e) => {\n this.dispatchEvent(\n new CustomEvent('file-upload:upload-started', { detail: file, bubbles: true, composed: true })\n );\n this.onUploadStarted?.(file);\n\n preview = this.createPreview(file, reader);\n this.appendChild(preview);\n\n this.uploadFunction(file, preview).then((res) => {\n this.dispatchEvent(\n new CustomEvent('file-upload:upladed-file-complete', {\n detail: res,\n bubbles: true,\n composed: true,\n })\n );\n this.onUploadedFileComplete?.(res);\n this.uploadedFiles.push(res.data);\n\n resolve(res);\n });\n };\n\n reader.readAsDataURL(file);\n });\n };\n\n /**\n * Method to create a preview for the file.\n * @param {File} file The file for which the preview is to be created.\n * @param {FileReader} reader The FileReader instance to read the file.\n * @returns {HTMLElement} The created preview.\n */\n createPreview(file, reader) {\n let preview = document.createElement('wje-file-upload-item');\n preview.setAttribute('slot', 'item');\n preview.setAttribute('name', file.name);\n preview.setAttribute('size', file.size);\n preview.setAttribute('uploaded', '0');\n preview.setAttribute('progress', '0');\n preview.innerHTML = `<wje-icon slot=\"img\" name=\"${getFileTypeIcon(file.type.split('/')[1])}\" size=\"large\"></wje-icon>`;\n\n return preview;\n }\n\n /**\n * Method to create a thumbnail for the file.\n * @param {File} file The file for which the thumbnail is to be created.\n * @param {FileReader} reader The FileReader instance to read the file.\n * @returns {HTMLElement} The created thumbnail.\n */\n createThumbnail(file, reader) {\n let img = document.createElement('img');\n img.setAttribute('src', reader.result);\n\n return img;\n }\n\n /**\n * Method to validate the files.\n * @param {File} file The file to be validated.\n * TODO: alowed types a size limit by malo byt cez attributy\n */\n assertFilesValid(file) {\n const { name: fileName, size: fileSize } = file;\n if (!isValidFileType(file, this.acceptedTypes)) {\n throw new Error(`❌ FILE: \"${fileName}\" Valid file types are: \"${this.acceptedTypes}\"`);\n }\n\n if (fileSize > this.maxFileSize) {\n throw new Error(\n `❌ File \"${fileName}\" could not be uploaded. Only images up to ${this.maxFileSize} MB are allowed. Nie je to ${fileSize}`\n );\n }\n }\n\n /**\n * Method to reset the form state.\n */\n resetFormState() {\n this.fileList.textContent = '';\n }\n}\n","import FileUpload from './file-upload.element.js';\n\nexport default FileUpload;\n\nFileUpload.define('wje-file-upload', FileUpload);\n"],"names":["response","_a"],"mappings":"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"}
1
+ {"version":3,"file":"wje-file-upload.js","sources":["../packages/wje-file-upload/service/service.js","../packages/wje-file-upload/file-upload.element.js","../packages/wje-file-upload/file-upload.js"],"sourcesContent":["/**\n * Returns a list of file type categories and their corresponding icon names.\n * @returns {Array<object>} An array of objects representing file type categories.\n * Each object contains the following properties:\n * - `type` {Array&lt;string>} A list of file extensions associated with the category.\n * - `name` {string} The name of the icon representing the category.\n * @example\n * const types = fileType();\n * console.log(types);\n * // [\n * // { type: [\"jpg\", \"jpeg\", \"png\", \"gif\", \"bpm\", \"tiff\", \"svg\"], name: \"photo\" },\n * // { type: [\"zip\", \"rar\", \"cab\", \"jar\", \"tar\", \"gzip\", \"uue\", \"bz2\", \"scorm\", \"war\"], name: \"file-type-zip\" },\n * // ...\n * // ]\n */\nfunction fileType() {\n return [\n {\n type: ['jpg', 'jpeg', 'png', 'gif', 'bpm', 'tiff', 'svg'],\n name: 'photo',\n },\n {\n type: ['zip', 'rar', 'cab', 'jar', 'tar', 'gzip', 'uue', 'bz2', 'scorm', 'war'],\n name: 'file-type-zip',\n },\n {\n type: ['mov', 'mp4', 'avi', 'flv'],\n name: 'video',\n },\n {\n type: ['m4a', 'mp3', 'wav'],\n name: 'audio',\n },\n {\n type: ['html', 'html'],\n name: 'file-type-html',\n },\n {\n type: ['css'],\n name: 'code',\n },\n {\n type: ['txt'],\n name: 'file-type-txt',\n },\n {\n type: ['doc', 'docx'],\n name: 'file-type-doc',\n },\n {\n type: ['xls', 'xlsx'],\n name: 'file-type-xls',\n },\n {\n type: ['pdf'],\n name: 'file-type-pdf',\n },\n {\n type: ['ppt', 'pptx', 'odp'],\n name: 'file-type-ppt',\n },\n ];\n}\n\n/**\n * Retrieves the icon name for a given file type.\n * @param {string} type The file type or category (e.g., \"pdf\", \"image\", \"folder\").\n * @returns {string} The name of the icon associated with the file type.\n * @example\n * getFileTypeIcon('pdf'); // Returns the icon name for PDF files.\n * getFileTypeIcon('folder'); // Returns 'folder'.\n */\nexport function getFileTypeIcon(type) {\n let searchType;\n if (type.toLowerCase() !== 'folder') {\n fileType().forEach((i) => {\n if (i.type.includes(type.toLowerCase())) {\n searchType = i.name;\n }\n });\n } else {\n searchType = 'folder';\n }\n\n return searchType;\n}\n\n/**\n * Checks if a given file matches any of the accepted file types.\n * @param {File} file The file to validate.\n * @param {string|string[]} acceptedFileTypes A comma-separated string or an array of accepted MIME types or file extensions.\n * @returns {boolean} Returns `true` if the file type is valid, otherwise `false`.\n * @throws {Error} Throws an error if `acceptedFileTypes` is empty.\n * @example\n * const file = new File([\"\"], \"example.png\", { type: \"image/png\" });\n * const isValid = isValidFileType(file, \"image/*,application/pdf\");\n * console.log(isValid); // true\n * @example\n * const file = new File([\"\"], \"example.txt\", { type: \"text/plain\" });\n * const isValid = isValidFileType(file, [\"text/plain\", \"application/json\"]);\n * console.log(isValid); // true\n */\nexport function isValidFileType(file, acceptedFileTypes) {\n // Get the base MIME type\n const baseMimeType = file.type.split('/')[0];\n // If acceptedFileTypes is a string, convert it to an array\n let acceptedTypes = Array.isArray(acceptedFileTypes) ? acceptedFileTypes : acceptedFileTypes.split(',');\n // If acceptedFileTypes is empty, throw an error\n if (acceptedTypes.length === 0) {\n throw new Error('acceptedFileTypes is empty');\n }\n\n // Iterate over acceptedFileTypes\n for (let type of acceptedTypes) {\n // ak type na image/* a file je napriklad image/png tak vratime true\n if (type.includes(baseMimeType + '/*')) {\n return true;\n }\n\n // Ak type suboru obsahuje konkretny typ a to bud ak je to zapisany napriklad image/png alebo len png tak vratime true\n if (type.includes(file.type) || type.includes(file.type.split('/')[1])) {\n return true;\n }\n }\n\n // Ak sme nic nenasli tak vratime false\n return false;\n}\n\n/**\n * Uploads a file in chunks using `XMLHttpRequest`, allowing for progress tracking.\n * @param {File} file The file to be uploaded.\n * @param {number} chunkSize The size of each chunk in bytes.\n * @param {HTMLElement} preview The element used to display upload progress.\n */\nexport function uploadFile(file, chunkSize, preview) {\n let offset = 0;\n const progressArray = new Array(Math.ceil(file.size / chunkSize)).fill(0);\n\n const readAndUploadChunk = (start, end) => {\n const reader = new FileReader();\n const chunkIndex = start / chunkSize;\n const chunk = file.slice(start, end);\n\n reader.onload = (e) => {\n const xhr = new XMLHttpRequest();\n console.log('uploadFile function:', start, end, file.size);\n xhr.open('POST', '/upload', true);\n xhr.setRequestHeader('Content-Range', `${start}-${end}/${file.size}`);\n\n xhr.upload.onprogress = (event) => {\n if (event.lengthComputable) {\n const progress = (event.loaded / event.total) * 100;\n progressArray[chunkIndex] = progress;\n const totalProgress = progressArray.reduce((a, b) => a + b, 0) / progressArray.length;\n // this.updateOverallProgress(progressArray, file.lastModified);\n // preview.setAttribute(\"progress\", totalProgress);\n }\n };\n\n xhr.onload = () => {\n if (xhr.status === 200 || xhr.status === 201) {\n progressArray[chunkIndex] = 100; // Táto časť je kompletná\n\n // Odoslanie ďalšej časti\n start += chunkSize;\n if (start < file.size) {\n preview.setAttribute('uploaded', start);\n readAndUploadChunk(start, Math.min(start + chunkSize, file.size));\n } else {\n preview.setAttribute('uploaded', start);\n }\n } else {\n console.error('Error during upload: ', xhr.statusText);\n }\n };\n xhr.send(e.target.result);\n };\n reader.readAsArrayBuffer(chunk);\n };\n\n readAndUploadChunk(offset, Math.min(offset + chunkSize, file.size));\n}\n\n/**\n * Returns a function for uploading files either in chunks or as a whole file, based on the provided options.\n * @param {string} url The URL to which the file will be uploaded.\n * @param {number} [chunkSize] The size of each chunk in bytes when uploading in chunks (default is 1MB).\n * @param {boolean} [wholeFile] Whether to upload the file as a whole. If `true`, the entire file is uploaded at once.\n * @returns {Function} A function that takes a file and a preview element as arguments and uploads the file.\n * @example\n * // Upload a file in chunks\n * const uploadInChunks = upload('/upload', 1024 * 512); // 512KB chunks\n * uploadInChunks(file, previewElement);\n * @example\n * // Upload a whole file\n * const uploadWhole = upload('/upload', undefined, true);\n * uploadWhole(file, previewElement);\n */\nexport function upload(url, chunkSize = 1024 * 1024, wholeFile = false) {\n if (wholeFile) {\n return (file, preview) => uploadWholeFile(url, file, preview);\n }\n return (file, preview) => uploadFileInChunks(url, file, preview, chunkSize);\n}\n\n/**\n * Uploads a file in chunks to a specified URL, allowing for progress tracking and resuming in case of errors.\n * @param {string} url The URL to which the file chunks will be uploaded.\n * @param {File} file The file to be uploaded in chunks.\n * @param {HTMLElement} preview The element used to display upload progress.\n * @param {number} [chunkSize] The size of each chunk in bytes (default is 1MB).\n * @returns {Promise<object>} Resolves with the response of the last chunk uploaded, parsed as JSON.\n * @throws {Error} - Throws an error if a chunk fails to upload.\n */\nexport async function uploadFileInChunks(url, file, preview, chunkSize = 1024 * 1024) {\n let offset = 0;\n const totalChunks = Math.ceil(file.size / chunkSize);\n const partResponses = [];\n\n while (offset < file.size) {\n const chunk = file.slice(offset, offset + chunkSize);\n\n // Creating a custom ReadableStream to track progress of the current chunk\n const stream = new ReadableStream({\n start(controller) {\n const reader = chunk.stream().getReader();\n let uploadedBytes = 0;\n\n reader.read().then(function process({ done, value }) {\n if (done) {\n controller.close();\n return Promise.resolve();\n }\n\n // Track progress\n uploadedBytes += value.byteLength;\n const percentComplete = ((offset + uploadedBytes) / file.size) * 100;\n console.log(`Upload Progress: ${percentComplete.toFixed(2)}%`);\n preview.setAttribute('uploaded', offset + uploadedBytes);\n\n // Enqueue chunk data into the stream\n controller.enqueue(value);\n\n // Read the next chunk\n return reader.read().then(process);\n });\n },\n });\n\n const formData = new FormData();\n formData.append('file', new Blob([stream])); // Send the current stream (chunk)\n formData.append('chunkIndex', Math.floor(offset / chunkSize)); // Send chunk index\n formData.append('totalChunks', totalChunks); // Send total chunks\n\t\t formData.append('fileName', file.name); // Send file name\n\n try {\n // Send the current chunk via Fetch\n const response = await fetch(url, {\n method: 'POST',\n body: formData,\n });\n\n if (!response.ok) {\n throw new Error(`Failed to upload chunk ${Math.floor(offset / chunkSize) + 1}: ${response.statusText}`);\n }\n\n console.log(`Chunk ${Math.floor(offset / chunkSize) + 1}/${totalChunks} uploaded successfully.`);\n partResponses.push(response);\n } catch (error) {\n console.error('Error uploading chunk:', error);\n break;\n }\n\n // Move to the next chunk\n offset += chunkSize;\n }\n\n console.log('File upload complete!');\n const response = await partResponses.at(-1).json();\n\n return {\n data: response,\n file,\n }\n}\n\n/**\n * Uploads a file to a specified URL using a `POST` request and updates the preview element with the uploaded file size.\n * @param {string} url The URL to which the file will be uploaded.\n * @param {File} file The file to be uploaded.\n * @param {HTMLElement} preview The element that displays the upload preview. It will be updated with the file size.\n * @returns {Promise<{data: object, file: File}>} - A promise that resolves with the server response and the uploaded file.\n * @throws {Error} - Logs an error to the console if the request fails.\n */\nexport function uploadWholeFile(url, file, preview) {\n const formData = new FormData();\n formData.append('file', file);\n\n //use fetch\n return fetch(url, {\n method: 'POST',\n body: formData,\n })\n .then((response) => response.json())\n .then((data) => {\n preview.setAttribute('uploaded', file.size);\n return {\n data,\n file,\n };\n })\n .catch((error) => {\n console.error('Error:', error);\n });\n}\n","import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport { getFileTypeIcon, isValidFileType, upload } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary FileUpload is a custom web component for uploading files.\n * It extends from WJElement and provides functionalities for file upload.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @slot - This is a default/unnamed slot.\n * @csspart native - The native file upload part.\n * @csspart file-list - The file list part.\n * @csspart upload-button - The label part.\n * @event change - Fires when the file input changes.\n * @event drop - Fires when a file is dropped into the component.\n * @attribute {string} accepted-types - The accepted file types for upload.\n * @attribute {number} chunk-size - The chunk size for file upload.\n * @attribute {number} max-file-size - The maximum file size for upload.\n * @attribute {string} upload-url - The URL to set as the upload URL.\n * @attribute {boolean} auto-process-files - The auto process files attribute.\n * @attribute {boolean} no-upload-button - The no upload button attribute.\n * @tag wje-file-upload\n */\nexport default class FileUpload extends WJElement {\n /**\n * Constructor for FileUpload.\n * Initializes a new instance of the Localizer.\n */\n constructor() {\n super();\n this.localizer = new Localizer(this);\n this._uploadedFiles = [];\n this._queuedFiles = [];\n }\n\n /**\n * Dependencies for the FileUpload component.\n * @type {object}\n */\n dependencies = {\n 'wje-button': Button,\n };\n\n /**\n * Setter for acceptedTypes attribute.\n * @param {string} value The accepted file types for upload.\n */\n set acceptedTypes(value) {\n this.setAttribute('accepted-types', value);\n }\n\n /**\n * Getter for acceptedTypes attribute.\n * @returns {string} The accepted file types for upload.\n */\n get acceptedTypes() {\n const accepted = this.getAttribute('accepted-types');\n return this.hasAttribute('accepted-types') ? accepted : '';\n }\n\n /**\n * Setter for chunkSize attribute.\n * @param {number} value The chunk size for file upload.\n */\n set chunkSize(value) {\n this.setAttribute('chunk-size', value);\n }\n\n /**\n * Getter for chunkSize attribute.\n * @returns {number} The chunk size for file upload.\n */\n get chunkSize() {\n const chunk = this.getAttribute('chunk-size');\n return this.hasAttribute('chunk-size') ? chunk : 1024 * 1024;\n }\n\n /**\n * Setter for maxFileSize attribute.\n * @param {number} value The maximum file size for upload.\n */\n set maxFileSize(value) {\n this.setAttribute('max-file-size', value);\n }\n\n /**\n * Getter for maxFileSize attribute.\n * @returns {number} The maximum file size for upload.\n */\n get maxFileSize() {\n const fileSize = this.getAttribute('max-file-size');\n return this.hasAttribute('max-file-size') ? fileSize * 1024 * 1024 : 1024 * 1024;\n }\n\n /**\n * Setter for label attribute.\n * @param {string} value The URL to set as the upload URL.\n */\n set uploadUrl(value) {\n this.setAttribute('upload-url', value);\n }\n\n /**\n * Gets the upload URL for the file upload element.\n * @returns {string} The upload URL for the file upload element.\n */\n get uploadUrl() {\n return this.getAttribute('upload-url') ?? '/upload';\n }\n\n /**\n * Sets the autoProcessFiles attribute.\n * @param value\n */\n set autoProcessFiles(value) {\n this.setAttribute('auto-process-files', value);\n }\n\n /**\n * Gets the autoProcessFiles attribute.\n * @returns {any|boolean}\n */\n get autoProcessFiles() {\n return JSON.parse(this.getAttribute('auto-process-files')) ?? true;\n }\n\n /**\n * Sets the noUploadButton attribute.\n * @param value\n */\n set noUploadButton(value) {\n this.setAttribute('no-upload-button', value);\n }\n\n /**\n * Gets the noUploadButton attribute.\n * @returns {boolean}\n */\n get noUploadButton() {\n return this.hasAttribute('no-upload-button');\n }\n\n /**\n * Sets the uploaded files.\n * @param value\n */\n set uploadedFiles(value) {\n this._uploadedFiles = value;\n }\n\n /**\n * Return the uploaded files.\n * @returns {[]}\n */\n get uploadedFiles() {\n return this._uploadedFiles;\n }\n\n /**\n * Sets the to-chunk attribute.\n * @param value\n */\n set toChunk(value) {\n this.setAttribute('to-chunk', value);\n }\n\n /**\n * Gets the to-chunk attribute.\n * @returns {boolean}\n */\n get toChunk() {\n return this.hasAttribute('to-chunk');\n }\n\n className = 'FileUpload';\n\n /**\n * Getter for cssStyleSheet.\n * @returns {string} The CSS styles for the component.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for observedAttributes.\n * @returns {Array} An empty array as no attributes are observed.\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Method to setup attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n beforeDraw() {\n console.log('beforeDraw', this.toChunk, !this.toChunk);\n this.uploadFunction = upload(this.uploadUrl, this.chunkSize, !this.toChunk);\n }\n\n /**\n * Method to draw the component on the screen.\n * @returns {DocumentFragment} The fragment containing the component.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-file-upload');\n native.setAttribute('part', 'native');\n\n let label = document.createElement('div');\n label.setAttribute('part', 'label');\n label.classList.add('file-label');\n label.setAttribute('part', 'file-label');\n\n let fileList = document.createElement('slot');\n fileList.setAttribute('name', 'item');\n fileList.setAttribute('part', 'items');\n fileList.classList.add('file-list');\n\n let slot = document.createElement('slot');\n label.appendChild(slot);\n\n let fileInput = document.createElement('input');\n fileInput.setAttribute('type', 'file');\n fileInput.setAttribute('multiple', '');\n fileInput.setAttribute('style', 'display:none;');\n\n if (!this.noUploadButton) {\n let button = document.createElement('wje-button');\n button.innerText = this.label || this.localizer.translate('wj.file.upload.button');\n button.setAttribute('part', 'upload-button');\n\n label.appendChild(button);\n\n this.button = button;\n }\n\n native.appendChild(fileInput);\n native.appendChild(label);\n native.appendChild(fileList);\n\n fragment.appendChild(native);\n\n this.native = native;\n this.fileList = fileList;\n this.fileInput = fileInput;\n\n return fragment;\n }\n\n /**\n * Method to perform actions after the component is drawn.\n */\n afterDraw() {\n this.button?.addEventListener('click', () => {\n this.fileInput.click();\n });\n\n this.fileInput.addEventListener('change', this.handleInputChange);\n this.native.addEventListener('drop', this.handleDrop);\n\n let dragEventCounter = 0;\n\n this.native.addEventListener('dragenter', (event) => {\n event.preventDefault();\n\n if (dragEventCounter === 0) {\n this.native.classList.add('highlight');\n }\n\n dragEventCounter += 1;\n });\n\n this.native.addEventListener('dragover', (event) => {\n event.preventDefault();\n\n if (dragEventCounter === 0) {\n dragEventCounter = 1;\n }\n });\n\n this.native.addEventListener('dragleave', (event) => {\n event.preventDefault();\n\n dragEventCounter -= 1;\n\n if (dragEventCounter <= 0) {\n dragEventCounter = 0;\n this.native.classList.remove('highlight');\n }\n });\n\n this.native.addEventListener('drop', (event) => {\n event.preventDefault();\n\n dragEventCounter = 0;\n this.native.classList.remove('highlight');\n });\n }\n\n /**\n * Method to handle form submission.\n * @param {Event} event The form submission event.\n */\n handleSubmit(event) {\n event.preventDefault();\n\n // TODO: TU TREBA PRIDAT ZOBRAZENIE SUBORU A JEHO PROCESSU\n\n this.addFilesToQueue(this.fileInput.files);\n }\n\n /**\n * Method to handle file drop event.\n * @param {Event} event The file drop event object.\n */\n handleDrop = (event) => {\n const fileList = event.dataTransfer.files;\n\n this.resetFormState();\n\n this.addFilesToQueue(fileList);\n };\n\n /**\n * Method to handle file input change event.\n * @param {Event} event The file input change event object.\n */\n handleInputChange = (event) => {\n this.resetFormState();\n\n try {\n this.handleSubmit(event);\n } catch (err) { }\n };\n\n /**\n * Method to add files to the queue.\n * @param files\n */\n addFilesToQueue(files) {\n this._queuedFiles = [...files];\n\n this.dispatchEvent(\n new CustomEvent('file-upload:files-added', { detail: files, bubbles: true, composed: true })\n );\n this.onAddedFiles?.();\n\n if (this.autoProcessFiles) {\n this.uploadFiles();\n }\n\n this.fileInput.value = '';\n }\n\n /**\n * Method to upload files.\n */\n uploadFiles() {\n if (this._queuedFiles.length === 0) {\n return;\n }\n\n const uploadPromises = this._queuedFiles.map((file) => this.createUploadPromise(file));\n uploadPromises\n .reduce((prev, curr) => {\n return prev.then(() => {\n return curr;\n });\n }, Promise.resolve())\n .then(() => {\n this.dispatchEvent(\n new CustomEvent('file-upload:all-files-uploaded', {\n detail: this.uploadedFiles,\n bubbles: true,\n composed: true,\n })\n );\n this.onAllFilesUploaded?.();\n this._queuedFiles = [];\n });\n }\n\n /**\n * Method to create an upload promise.\n * @param file\n * @returns {Promise<unknown>}\n */\n createUploadPromise = (file) => {\n return new Promise((resolve, reject) => {\n this.assertFilesValid(file);\n let preview;\n\n let reader = new FileReader();\n reader.onload = (e) => {\n this.dispatchEvent(\n new CustomEvent('file-upload:upload-started', { detail: file, bubbles: true, composed: true })\n );\n this.onUploadStarted?.(file);\n\n preview = this.createPreview(file, reader);\n this.appendChild(preview);\n\n this.uploadFunction(file, preview).then((res) => {\n this.dispatchEvent(\n new CustomEvent('file-upload:upladed-file-complete', {\n detail: res,\n bubbles: true,\n composed: true,\n })\n );\n this.onUploadedFileComplete?.(res);\n this.uploadedFiles.push(res.data);\n\n resolve(res);\n });\n };\n\n reader.readAsDataURL(file);\n });\n };\n\n /**\n * Method to create a preview for the file.\n * @param {File} file The file for which the preview is to be created.\n * @param {FileReader} reader The FileReader instance to read the file.\n * @returns {HTMLElement} The created preview.\n */\n createPreview(file, reader) {\n let preview = document.createElement('wje-file-upload-item');\n preview.setAttribute('slot', 'item');\n preview.setAttribute('name', file.name);\n preview.setAttribute('size', file.size);\n preview.setAttribute('uploaded', '0');\n preview.setAttribute('progress', '0');\n preview.innerHTML = `<wje-icon slot=\"img\" name=\"${getFileTypeIcon(file.type.split('/')[1])}\" size=\"large\"></wje-icon>`;\n\n return preview;\n }\n\n /**\n * Method to create a thumbnail for the file.\n * @param {File} file The file for which the thumbnail is to be created.\n * @param {FileReader} reader The FileReader instance to read the file.\n * @returns {HTMLElement} The created thumbnail.\n */\n createThumbnail(file, reader) {\n let img = document.createElement('img');\n img.setAttribute('src', reader.result);\n\n return img;\n }\n\n /**\n * Method to validate the files.\n * @param {File} file The file to be validated.\n * TODO: alowed types a size limit by malo byt cez attributy\n */\n assertFilesValid(file) {\n const { name: fileName, size: fileSize } = file;\n if (!isValidFileType(file, this.acceptedTypes)) {\n throw new Error(`❌ FILE: \"${fileName}\" Valid file types are: \"${this.acceptedTypes}\"`);\n }\n\n if (fileSize > this.maxFileSize) {\n throw new Error(\n `❌ File \"${fileName}\" could not be uploaded. Only images up to ${this.maxFileSize} MB are allowed. Nie je to ${fileSize}`\n );\n }\n }\n\n /**\n * Method to reset the form state.\n */\n resetFormState() {\n this.fileList.textContent = '';\n }\n}\n","import FileUpload from './file-upload.element.js';\n\nexport default FileUpload;\n\nFileUpload.define('wje-file-upload', FileUpload);\n"],"names":["response","_a"],"mappings":"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"}
package/dist/wje-img.js CHANGED
@@ -28,6 +28,14 @@ class Img extends WJElement {
28
28
  static get cssStyleSheet() {
29
29
  return styles;
30
30
  }
31
+ /**
32
+ * Returns the list of attributes to observe for changes.
33
+ * @static
34
+ * @returns {Array<string>}
35
+ */
36
+ static get observedAttributes() {
37
+ return ["src"];
38
+ }
31
39
  /**
32
40
  * Sets up the attributes for the component.
33
41
  */
@@ -1 +1 @@
1
- {"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n /**\n * Creates an instance of Img.\n * @class\n */\n constructor() {\n super();\n }\n\n set loader(value) {\n if (value) {\n this.setAttribute('loader', value);\n }\n }\n\n get loader() {\n return this.getAttribute('loader');\n }\n\n className = 'Img';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component for the image.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('img');\n native.setAttribute('part', 'native');\n native.setAttribute('src', this.loader || './assets/img/image-loader.gif');\n native.setAttribute('alt', this.alt || '');\n native.classList.add('lazy-loaded-image', 'lazy');\n\n this.native = native;\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /**\n * Called after the component has been drawn.\n */\n afterDraw() {\n let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.src = this.src;\n this.classList.remove('lazy');\n lazyImageObserver.unobserve(entry.target);\n }\n });\n });\n\n lazyImageObserver.observe(this.native);\n }\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,cAAc;AACV,UAAO;AAaX,qCAAY;AAAA,EAZhB;AAAA,EAEI,IAAI,OAAO,OAAO;AACd,QAAI,OAAO;AACP,WAAK,aAAa,UAAU,KAAK;AAAA,IAC7C;AAAA,EACA;AAAA,EAEI,IAAI,SAAS;AACT,WAAO,KAAK,aAAa,QAAQ;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,OAAO,KAAK,UAAU,+BAA+B;AACzE,WAAO,aAAa,OAAO,KAAK,OAAO,EAAE;AACzC,WAAO,UAAU,IAAI,qBAAqB,MAAM;AAEhD,SAAK,SAAS;AACd,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,oBAAoB,IAAI,qBAAqB,CAAC,SAAS,aAAa;AACpE,cAAQ,QAAQ,CAAC,UAAU;AACvB,YAAI,MAAM,gBAAgB;AACtB,gBAAM,OAAO,MAAM,KAAK;AACxB,eAAK,UAAU,OAAO,MAAM;AAC5B,4BAAkB,UAAU,MAAM,MAAM;AAAA,QAC5D;AAAA,MACA,CAAa;AAAA,IACb,CAAS;AAED,sBAAkB,QAAQ,KAAK,MAAM;AAAA,EAC7C;AACA;AChFA,IAAI,OAAO,WAAW,GAAG;"}
1
+ {"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n /**\n * Creates an instance of Img.\n * @class\n */\n constructor() {\n super();\n }\n\n set loader(value) {\n if (value) {\n this.setAttribute('loader', value);\n }\n }\n\n get loader() {\n return this.getAttribute('loader');\n }\n\n className = 'Img';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['src'];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component for the image.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('img');\n native.setAttribute('part', 'native');\n native.setAttribute('src', this.loader || './assets/img/image-loader.gif');\n native.setAttribute('alt', this.alt || '');\n native.classList.add('lazy-loaded-image', 'lazy');\n\n this.native = native;\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /**\n * Called after the component has been drawn.\n */\n afterDraw() {\n let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.src = this.src;\n this.classList.remove('lazy');\n lazyImageObserver.unobserve(entry.target);\n }\n });\n });\n\n lazyImageObserver.observe(this.native);\n }\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC,cAAc;AACV,UAAO;AAaX,qCAAY;AAAA,EAZhB;AAAA,EAEI,IAAI,OAAO,OAAO;AACd,QAAI,OAAO;AACP,WAAK,aAAa,UAAU,KAAK;AAAA,IAC7C;AAAA,EACA;AAAA,EAEI,IAAI,SAAS;AACT,WAAO,KAAK,aAAa,QAAQ;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,KAAK;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,OAAO,KAAK,UAAU,+BAA+B;AACzE,WAAO,aAAa,OAAO,KAAK,OAAO,EAAE;AACzC,WAAO,UAAU,IAAI,qBAAqB,MAAM;AAEhD,SAAK,SAAS;AACd,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,oBAAoB,IAAI,qBAAqB,CAAC,SAAS,aAAa;AACpE,cAAQ,QAAQ,CAAC,UAAU;AACvB,YAAI,MAAM,gBAAgB;AACtB,gBAAM,OAAO,MAAM,KAAK;AACxB,eAAK,UAAU,OAAO,MAAM;AAC5B,4BAAkB,UAAU,MAAM,MAAM;AAAA,QAC5D;AAAA,MACA,CAAa;AAAA,IACb,CAAS;AAED,sBAAkB,QAAQ,KAAK,MAAM;AAAA,EAC7C;AACA;ACzFA,IAAI,OAAO,WAAW,GAAG;"}