wj-elements 0.1.189 → 0.1.191

package/dist/wje-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-element.js","sources":["../packages/wje-element/element.js"],"sourcesContent":["import { UniversalService } from '../utils/universal-service.js';\nimport { Permissions } from '../utils/permissions.js';\nimport { WjElementUtils } from '../utils/element-utils.js';\nimport { event } from '../utils/event.js';\nimport { defaultStoreActions, store } from '../wje-store/store.js';\n\nconst template = document.createElement('template');\ntemplate.innerHTML = ``;\nexport default class WJElement extends HTMLElement {\n\t#drawingStatus;\n\t#isAttached;\n\t#isRendering;\n\t#originalVisibility;\n\t#pristine;\n\n\t/**\n\t * Initializes a new instance of the WJElement class.\n\t */\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.#isAttached = false;\n\t\tthis.service = new UniversalService({\n\t\t\tstore: store,\n\t\t});\n\n\t\t// definujeme vsetky zavislosti.\n\t\t// Do zavislosti patria len komponenty, ktore su zavisle od ktoreho je zavisly tento komponent\n\t\tthis.defineDependencies();\n\n\t\tthis.#isRendering = false;\n\t\tthis._dependencies = {};\n\n\t\t/**\n\t\t * @typedef {object} DrawingStatuses\n\t\t * @property {number} CREATED - The component has been created.\n\t\t * @property {number} ATTACHED - The component has been attached to the DOM.\n\t\t * @property {number} BEGINING - The component is beginning to draw.\n\t\t * @property {number} START - The component has started drawing.\n\t\t * @property {number} DRAWING - The component is drawing.\n\t\t * @property {number} DONE - The component has finished drawing.\n\t\t * @property {number} DISCONNECTED - The component has been disconnected from the DOM.\n\t\t */\n\n\t\t/**\n\t\t * WJElement is a base class for custom web components with managed lifecycle, attribute/property sync,\n\t\t * permission-based visibility, and extensibility hooks.\n\t\t * @property {boolean} isAttached - True if the component is currently attached to the DOM.\n\t\t * @property {DrawingStatuses} drawingStatuses - Enum of possible drawing states.\n\t\t * @property {number} drawingStatus - Current drawing status (see drawingStatuses).\n\t\t * @property {boolean} _pristine - True if the component has not been updated since last render.\n\t\t * @property {boolean} isRendering - True if a render is currently in progress.\n\t\t * @property {number|null} rafId - ID of the scheduled animation frame for rendering, or null.\n\t\t * @property {string|null} originalVisibility - Stores the original CSS visibility before rendering.\n\t\t * @property {object} params - Stores the current attributes/properties for rendering.\n\t\t * @property {Promise<void>} updateComplete - Promise resolved when the current update/render is complete.\n\t\t * @property {string[]} permission - List of required permissions (from 'permission' attribute).\n\t\t * @property {boolean} isPermissionCheck - Whether permission checking is enabled (from 'permission-check' attribute).\n\t\t * @property {boolean} noShow - Whether the element should be hidden (from 'no-show' attribute).\n\t\t * @property {string|undefined} isShadowRoot - Value of the 'shadow' attribute, if present.\n\t\t * @property {boolean} hasShadowRoot - True if the 'shadow' attribute is present.\n\t\t * @property {string} shadowType - Type of shadow root ('open' by default).\n\t\t * @property {object} store - Reference to the global store instance.\n\t\t * @property {object} defaultStoreActions - Default store actions for arrays and objects.\n\t\t * @property {string[]|undefined} removeClassAfterConnect - Classes to remove after connect (from 'remove-class-after-connect' attribute).\n\t\t * @property {object} dependencies - Registered component dependencies.\n\t\t * @property {HTMLElement|ShadowRoot} context - The rendering context (shadow root or element itself).\n\t\t */\n\t\tthis.drawingStatuses = {\n\t\t\tCREATED: 0,\n\t\t\tATTACHED: 1,\n\t\t\tBEGINING: 2,\n\t\t\tSTART: 3,\n\t\t\tDRAWING: 4,\n\t\t\tDONE: 5,\n\t\t\tDISCONNECTED: 6,\n\t\t};\n\n\t\tthis.#drawingStatus = this.drawingStatuses.CREATED;\n\n\t\tthis.#pristine = true;\n\t\tthis.#isRendering = false;\n\t\tthis.rafId = null;\n\t\tthis.#originalVisibility = null;\n\t\tthis.params = {};\n\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\t}\n\n\tget drawingStatus() {\n\t\treturn this.#drawingStatus;\n\t}\n\n\t/**\n\t * Sets the value of the 'permission' attribute.\n\t * @param {string[]} value The value to set for the 'permission' attribute.\n\t */\n\tset permission(value) {\n\t\tthis.setAttribute('permission', value.join(','));\n\t}\n\n\t/**\n\t * Gets the value of the 'permission-check' attribute.\n\t * @returns {string[]} The value of the 'permission' attribute.\n\t */\n\tget permission() {\n\t\treturn this.getAttribute('permission')?.split(',') || [];\n\t}\n\n\t/**\n\t * Sets the 'permission-check' attribute.\n\t * @param {boolean} value The value to set for the 'permission-check' attribute.\n\t */\n\tset isPermissionCheck(value) {\n\t\tif (value) this.setAttribute('permission-check', '');\n\t\telse this.removeAttribute('permission-check');\n\t}\n\n\t/**\n\t * Checks if the 'permission-check' attribute is present.\n\t * @returns {boolean} True if the 'permission-check' attribute is present.\n\t */\n\tget isPermissionCheck() {\n\t\treturn this.hasAttribute('permission-check');\n\t}\n\n\tset noShow(value) {\n\t\tif (value) this.setAttribute('no-show', '');\n\t\telse this.removeAttribute('no-show');\n\t}\n\n\t/**\n\t * Checks if the 'show' attribute is present.\n\t * @returns {boolean} True if the 'show' attribute is present.\n\t */\n\tget noShow() {\n\t\treturn this.hasAttribute('no-show');\n\t}\n\n\t/**\n\t * Sets the 'shadow' attribute.\n\t * @param {string} value The value to set for the 'shadow' attribute.\n\t */\n\tset isShadowRoot(value) {\n\t\treturn this.setAttribute('shadow', value);\n\t}\n\n\tget isShadowRoot() {\n\t\treturn this.getAttribute('shadow');\n\t}\n\n\t/**\n\t * Checks if the 'shadow' attribute is present.\n\t * @returns {boolean} True if the 'shadow' attribute is present.\n\t */\n\tget hasShadowRoot() {\n\t\treturn this.hasAttribute('shadow');\n\t}\n\n\t/**\n\t * Gets the value of the 'shadow' attribute or 'open' if not set.\n\t * @returns {string} The value of the 'shadow' attribute or 'open'.\n\t */\n\tget shadowType() {\n\t\treturn this.getAttribute('shadow') || 'open';\n\t}\n\n\t/**\n\t * Gets the rendering context, either the shadow root or the component itself.\n\t * @returns The rendering context.\n\t */\n\tget context() {\n\t\tif (this.hasShadowRoot) {\n\t\t\treturn this.shadowRoot;\n\t\t} else {\n\t\t\treturn this;\n\t\t}\n\t}\n\n\t/**\n\t * Gets the store instance.\n\t * @returns {object} The store instance.\n\t */\n\tget store() {\n\t\treturn store;\n\t}\n\n\t/**\n\t * @typedef {object} ArrayActions\n\t * @property {Function} addAction - Adds an item to the array.\n\t * @property {Function} deleteAction - Deletes an item from the array.\n\t * @property {Function} loadAction - Loads an array.\n\t * @property {Function} updateAction - Updates an item in the array.\n\t * @property {Function} addManyAction - Adds many items to the array.\n\t */\n\n\t/**\n\t * @typedef {object} ObjectActions\n\t * @property {Function} addAction - Replace old object with new object\n\t * @property {Function} deleteAction - Delete item based on key\n\t * @property {Function} updateAction - Update item based on key\n\t */\n\n\t/**\n\t * Gets the default store actions.\n\t * @returns The default store actions for arrays and objects.\n\t */\n\tget defaultStoreActions() {\n\t\treturn defaultStoreActions;\n\t}\n\n\t/**\n\t * Gets the classes to be removed after the component is connected.\n\t * @returns An array of class names to remove.\n\t */\n\tget removeClassAfterConnect() {\n\t\treturn this.getAttribute('remove-class-after-connect')?.split(' ');\n\t}\n\n\t/**\n\t * Sets the component dependencies.\n\t * @param value The dependencies to set.\n\t */\n\tset dependencies(value) {\n\t\tthis._dependencies = value;\n\t}\n\n\t/**\n\t * Gets the component dependencies.\n\t * @returns The component dependencies.\n\t */\n\tget dependencies() {\n\t\treturn this._dependencies;\n\t}\n\n\t/**\n\t * Processes and combines two templates into one.\n\t * @param pTemplate The primary template.\n\t * @param inputTemplate The secondary template.\n\t * @returns The combined template.\n\t */\n\tstatic processTemplates = (pTemplate, inputTemplate) => {\n\t\tconst newTemplate = document.createElement('template');\n\t\tnewTemplate.innerHTML = [inputTemplate.innerHTML, pTemplate?.innerHTML || ''].join('');\n\t\treturn newTemplate;\n\t};\n\n\t/**\n\t * Defines a custom element if not already defined.\n\t * @param name The name of the custom element.\n\t * @param [elementConstructor] The constructor for the custom element.\n\t * @param [options] Additional options for defining the element.\n\t */\n\tstatic define(name, elementConstructor = this, options = {}) {\n\t\tconst definedElement = customElements.get(name);\n\n\t\tif (!definedElement) {\n\t\t\tcustomElements.define(name, elementConstructor, options);\n\t\t}\n\t}\n\n\t/**\n\t * Defines component dependencies by registering custom elements.\n\t */\n\tdefineDependencies() {\n\t\tif (this.dependencies)\n\t\t\tObject.entries(this.dependencies).forEach((name, component) => WJElement.define(name, component));\n\t}\n\n\t/**\n\t * Hook for extending behavior before drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t */\n\tbeforeDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior before drawing\n\t}\n\n\t/**\n\t * Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t *   draw(context, appStoreObj, params) {\n\t *     const div = document.createElement('div');\n\t *     div.textContent = 'Hello, world!';\n\t *     context.appendChild(div);\n\t *   }\n\t * }\n\t */\n\tdraw(context, appStoreObj, params) {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Hook for extending behavior after drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t */\n\tafterDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior after drawing\n\t}\n\n\t/**\n\t * Lifecycle method invoked when the component is connected to the DOM.\n\t */\n\tconnectedCallback() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.#originalVisibility = this.#originalVisibility ?? this.style.visibility;\n\t\t\tthis.style.visibility = 'hidden';\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.ATTACHED;\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\t/**\n\t * Initializes the component, setting up attributes and rendering.\n\t * @param [force] Whether to force initialization.\n\t * @returns A promise that resolves when initialization is complete.\n\t */\n\tinitWjElement = (force = false) => {\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tthis.#drawingStatus = this.drawingStatuses.BEGINING;\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tif (this.hasShadowRoot) {\n\t\t\t\tif (!this.shadowRoot) this.attachShadow({ mode: this.shadowType || 'open' });\n\t\t\t}\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.START;\n\t\t\tawait this.display(force);\n\n\t\t\tconst sheet = new CSSStyleSheet();\n\t\t\tsheet.replaceSync(this.constructor.cssStyleSheet);\n\n\t\t\tthis.context.adoptedStyleSheets = [sheet];\n\n\t\t\tresolve();\n\t\t});\n\t};\n\n\t/**\n\t * Sets up attributes and event listeners for the component.\n\t * This method retrieves all custom events defined for the component\n\t * and adds event listeners for each of them. When an event is triggered,\n\t * it calls the corresponding method on the host element.\n\t */\n\tsetupAttributes() {\n\t\t// Keď neaký element si zadefinuje funkciu \"setupAttributes\" tak sa obsah tejto funkcie nezavolá\n\n\t\tlet allEvents = WjElementUtils.getEvents(this);\n\t\tallEvents.forEach((customEvent, domEvent) => {\n\t\t\tthis.addEventListener(domEvent, (e) => {\n\t\t\t\tthis.getRootNode().host[customEvent]?.();\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Hook for extending behavior before disconnecting the component.\n\t */\n\tbeforeDisconnect() {\n\t\t// Hook for extending behavior before disconnecting\n\t}\n\n\t/**\n\t * Hook for extending behavior after disconnecting the component.\n\t */\n\tafterDisconnect() {\n\t\t// Hook for extending behavior after disconnecting\n\t}\n\n\t/**\n\t * Hook for extending behavior before redrawing the component.\n\t */\n\tbeforeRedraw() {\n\t\t// Hook for extending behavior before redrawing\n\t}\n\n\t/**\n\t * Cleans up resources and event listeners for the component.\n\t */\n\tcomponentCleanup() {\n\t\t// Hook for cleaning up the component\n\t}\n\n\t/**\n\t * Lifecycle method invoked when the component is disconnected from the DOM.\n\t */\n\tdisconnectedCallback() {\n\t\tif (this.#isAttached) {\n\t\t\tthis.beforeDisconnect?.();\n\t\t\tthis.context.innerHTML = '';\n\t\t\tthis.afterDisconnect?.();\n\t\t\tthis.#isAttached = false;\n\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\tthis.#originalVisibility = null;\n\t\t}\n\n\t\tif (this.#isRendering) {\n\t\t\tthis.stopRenderLoop();\n\t\t}\n\n\t\tthis.#drawingStatus = this.drawingStatuses.DISCONNECTED;\n\n\t\tthis.componentCleanup();\n\t}\n\n\t/**\n\t * Enqueues an update for the component.\n\t * This method processes the current render promise and then refreshes the component.\n\t */\n\t#enqueueUpdate() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t}\n\t}\n\n\t/**\n\t * Lifecycle method invoked when an observed attribute changes.\n\t * @param name The name of the attribute that changed.\n\t * @param old The old value of the attribute.\n\t * @param newName The new value of the attribute.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (old !== newName) {\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\trefresh() {\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\n\t\tthis.#pristine = false;\n\t\tthis.#enqueueUpdate();\n\t}\n\n\t/**\n\t * Refreshes the component by reinitializing it if it is in a drawing state.\n\t * This method checks if the component's drawing status is at least in the START state.\n\t * If so, it performs the following steps:\n\t * 1. Calls the `beforeRedraw` hook if defined.\n\t * 2. Calls the `beforeDisconnect` hook if defined.\n\t * 3. Refreshes the update promise to manage the rendering lifecycle.\n\t * 4. Calls the `afterDisconnect` hook if defined.\n\t * 5. Reinitializes the component by calling `initWjElement` with `true` to force initialization.\n\t * If the component is not in a drawing state, it simply returns a resolved promise.\n\t */\n\tasync #refresh() {\n\t\tif (this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t\treturn; // Skip if async render is still processing\n\t\t}\n\n\t\tif (!this.#pristine) {\n\t\t\tthis.#pristine = true;\n\t\t\tthis.#isRendering = true;\n\n\t\t\tif (this.#isAttached) {\n\t\t\t\tthis.beforeRedraw?.();\n\t\t\t\tthis.beforeDisconnect?.();\n\t\t\t\tthis.afterDisconnect?.();\n\t\t\t} else {\n\t\t\t\tthis.stopRenderLoop();\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tawait this.initWjElement(true);\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Render error:', error);\n\t\t\t} finally {\n\t\t\t\tthis.#isRendering = false;\n\n\t\t\t\tif (!this.#pristine) {\n\t\t\t\t\tthis.#pristine = false;\n\t\t\t\t\tthis.#enqueueUpdate();\n\t\t\t\t} else {\n\t\t\t\t\tthis.finisPromise();\n\t\t\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tstopRenderLoop() {\n\t\tif (this.rafId) {\n\t\t\tcancelAnimationFrame(this.rafId);\n\t\t\tthis.rafId = null;\n\t\t}\n\t}\n\n\t/**\n\t * Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStore The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t *   draw(context, appStore, params) {\n\t *     const div = document.createElement('div');\n\t *     div.textContent = 'Hello, world!';\n\t *     context.appendChild(div);\n\t *   }\n\t * }\n\t */\n\tdraw(context, appStore, params) {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Displays the component's content, optionally forcing a re-render.\n\t * @param [force] Whether to force a re-render.\n\t * @returns A promise that resolves when the display is complete.\n\t */\n\tdisplay(force = false) {\n\t\tthis.template = this.constructor.customTemplate || document.createElement('template');\n\n\t\tif (force) {\n\t\t\t[...this.context.childNodes].forEach(this.context.removeChild.bind(this.context));\n\t\t}\n\n\t\tthis.context.append(this.template.content.cloneNode(true));\n\n\t\tif (this.noShow || (this.isPermissionCheck && !Permissions.isPermissionFulfilled(this.permission))) {\n\t\t\tthis.remove();\n\t\t\treturn Promise.resolve();\n\t\t}\n\n\t\treturn this.#resolveRender();\n\t}\n\n\t/**\n\t * Renders the component's content.\n\t */\n\tasync render() {\n\t\tthis.#drawingStatus = this.drawingStatuses.DRAWING;\n\n\t\tlet _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\tif (_draw instanceof Promise || _draw?.constructor.name === 'Promise') {\n\t\t\t_draw = await _draw;\n\t\t}\n\n\t\tlet rend = _draw;\n\t\tlet element;\n\n\t\tif (rend instanceof HTMLElement || rend instanceof DocumentFragment) {\n\t\t\telement = rend;\n\t\t} else {\n\t\t\tlet inputTemplate = document.createElement('template');\n\t\t\tinputTemplate.innerHTML = rend;\n\t\t\telement = inputTemplate.content.cloneNode(true);\n\t\t}\n\n\t\tlet rendered = element;\n\n\t\tthis.context.appendChild(rendered);\n\t}\n\n\t/**\n\t * Sanitizes a given name by converting it from kebab-case to camelCase.\n\t * @param {string} name The name in kebab-case format (e.g., \"example-name\").\n\t * @returns {string} The sanitized name in camelCase format (e.g., \"exampleName\").\n\t * @example\n\t * sanitizeName('example-name');\n\t * @example\n\t * sanitizeName('my-custom-component');\n\t */\n\tsanitizeName(name) {\n\t\tlet parts = name.split('-');\n\t\treturn [parts.shift(), ...parts.map((n) => n[0].toUpperCase() + n.slice(1))].join('');\n\t}\n\n\t/**\n\t * Checks if a property on an object has a getter or setter method defined.\n\t * @param {object} obj The object on which the property is defined.\n\t * @param {string} property The name of the property to check.\n\t * @returns {object} An object indicating the presence of getter and setter methods.\n\t * @property {Function|null} hasGetter The getter function if it exists, otherwise `null`.\n\t * @property {Function|null} hasSetter The setter function if it exists, otherwise `null`.\n\t * @example\n\t * const obj = {\n\t *   get name() { return 'value'; },\n\t *   set name(val) { console.log(val); }\n\t * };\n\t * checkGetterSetter(obj, 'name');\n\t * @example\n\t * const obj = { prop: 42 };\n\t * checkGetterSetter(obj, 'prop');\n\t */\n\tcheckGetterSetter(obj, property) {\n\t\tlet descriptor = Object.getOwnPropertyDescriptor(obj, property);\n\n\t\t// Check if the descriptor is found on the object itself\n\t\tif (descriptor) {\n\t\t\treturn {\n\t\t\t\thasGetter: typeof descriptor.get === 'function' ? descriptor.get : null,\n\t\t\t\thasSetter: typeof descriptor.set === 'function' ? descriptor.set : null,\n\t\t\t};\n\t\t}\n\n\t\t// Otherwise, check the prototype chain\n\t\tlet proto = Object.getPrototypeOf(obj);\n\t\tif (proto) {\n\t\t\treturn this.checkGetterSetter(proto, property);\n\t\t}\n\n\t\t// If the property doesn't exist at all\n\t\treturn { hasGetter: null, hasSetter: null };\n\t}\n\n\t/**\n\t * Sets up property accessors for the component's attributes.\n\t */\n\tsetUpAccessors() {\n\t\tlet attrs = this.getAttributeNames();\n\t\tattrs.forEach((name) => {\n\t\t\tconst sanitizedName = this.sanitizeName(name);\n\n\t\t\tconst { hasGetter, hasSetter } = this.checkGetterSetter(this, sanitizedName);\n\n\t\t\tObject.defineProperty(this, sanitizedName, {\n\t\t\t\tset: hasSetter ?? ((value) => this.setAttribute(name, value)),\n\t\t\t\tget: hasGetter ?? (() => this.getAttribute(name)),\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Resolves the rendering process of the component.\n\t * @returns A promise that resolves when rendering is complete.\n\t * @private\n\t */\n\t#resolveRender() {\n\t\tthis.params = WjElementUtils.getAttributes(this);\n\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tconst __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (__beforeDraw instanceof Promise || __beforeDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait __beforeDraw;\n\t\t\t}\n\n\t\t\tawait this.render();\n\n\t\t\tconst __afterDraw = this.afterDraw?.(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (__afterDraw instanceof Promise || __afterDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait __afterDraw;\n\t\t\t}\n\n\t\t\t// RHR toto je bicykel pre slickRouter  pretože routovanie nieje vykonané pokiaľ sa nezavolá updateComplete promise,\n\t\t\t// toto bude treba rozšíriť aby sme lepšie vedeli kontrolovať vykreslovanie elementov, a flow hookov.\n\t\t\tthis.#isRendering = false;\n\t\t\tthis.#isAttached = true;\n\n\t\t\tif (this.removeClassAfterConnect) {\n\t\t\t\tthis.classList.remove(...this.removeClassAfterConnect);\n\t\t\t}\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.DONE;\n\n\t\t\tresolve();\n\t\t}).catch((e) => {\n\t\t\tconsole.log(e);\n\t\t});\n\t}\n}\n\nlet __esModule = 'true';\nexport { __esModule, Permissions, WjElementUtils, event };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-element.js","sources":["../packages/wje-element/element.js"],"sourcesContent":["import { UniversalService } from '../utils/universal-service.js';\nimport { Permissions } from '../utils/permissions.js';\nimport { WjElementUtils } from '../utils/element-utils.js';\nimport { event } from '../utils/event.js';\nimport { defaultStoreActions, store } from '../wje-store/store.js';\n\nconst template = document.createElement('template');\ntemplate.innerHTML = ``;\nexport default class WJElement extends HTMLElement {\n\t#drawingStatus;\n\t#isAttached;\n\t#isRendering;\n\t#originalVisibility;\n\t#pristine;\n\n\t/**\n\t * Initializes a new instance of the WJElement class.\n\t */\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.#isAttached = false;\n\t\tthis.service = new UniversalService({\n\t\t\tstore: store,\n\t\t});\n\n\t\t// definujeme vsetky zavislosti.\n\t\t// Do zavislosti patria len komponenty, ktore su zavisle od ktoreho je zavisly tento komponent\n\t\tthis.defineDependencies();\n\n\t\tthis.#isRendering = false;\n\t\tthis._dependencies = {};\n\n\t\t/**\n\t\t * @typedef {object} DrawingStatuses\n\t\t * @property {number} CREATED - The component has been created.\n\t\t * @property {number} ATTACHED - The component has been attached to the DOM.\n\t\t * @property {number} BEGINING - The component is beginning to draw.\n\t\t * @property {number} START - The component has started drawing.\n\t\t * @property {number} DRAWING - The component is drawing.\n\t\t * @property {number} DONE - The component has finished drawing.\n\t\t * @property {number} DISCONNECTED - The component has been disconnected from the DOM.\n\t\t */\n\n\t\t/**\n\t\t * WJElement is a base class for custom web components with managed lifecycle, attribute/property sync,\n\t\t * permission-based visibility, and extensibility hooks.\n\t\t * @property {boolean} isAttached - True if the component is currently attached to the DOM.\n\t\t * @property {DrawingStatuses} drawingStatuses - Enum of possible drawing states.\n\t\t * @property {number} drawingStatus - Current drawing status (see drawingStatuses).\n\t\t * @property {boolean} _pristine - True if the component has not been updated since last render.\n\t\t * @property {boolean} isRendering - True if a render is currently in progress.\n\t\t * @property {number|null} rafId - ID of the scheduled animation frame for rendering, or null.\n\t\t * @property {string|null} originalVisibility - Stores the original CSS visibility before rendering.\n\t\t * @property {object} params - Stores the current attributes/properties for rendering.\n\t\t * @property {Promise<void>} updateComplete - Promise resolved when the current update/render is complete.\n\t\t * @property {string[]} permission - List of required permissions (from 'permission' attribute).\n\t\t * @property {boolean} isPermissionCheck - Whether permission checking is enabled (from 'permission-check' attribute).\n\t\t * @property {boolean} noShow - Whether the element should be hidden (from 'no-show' attribute).\n\t\t * @property {string|undefined} isShadowRoot - Value of the 'shadow' attribute, if present.\n\t\t * @property {boolean} hasShadowRoot - True if the 'shadow' attribute is present.\n\t\t * @property {string} shadowType - Type of shadow root ('open' by default).\n\t\t * @property {object} store - Reference to the global store instance.\n\t\t * @property {object} defaultStoreActions - Default store actions for arrays and objects.\n\t\t * @property {string[]|undefined} removeClassAfterConnect - Classes to remove after connect (from 'remove-class-after-connect' attribute).\n\t\t * @property {object} dependencies - Registered component dependencies.\n\t\t * @property {HTMLElement|ShadowRoot} context - The rendering context (shadow root or element itself).\n\t\t */\n\t\tthis.drawingStatuses = {\n\t\t\tCREATED: 0,\n\t\t\tATTACHED: 1,\n\t\t\tBEGINING: 2,\n\t\t\tSTART: 3,\n\t\t\tDRAWING: 4,\n\t\t\tDONE: 5,\n\t\t\tDISCONNECTED: 6,\n\t\t};\n\n\t\tthis.#drawingStatus = this.drawingStatuses.CREATED;\n\n\t\tthis.#pristine = true;\n\t\tthis.#isRendering = false;\n\t\tthis.rafId = null;\n\t\tthis.#originalVisibility = null;\n\t\tthis.params = {};\n\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\t}\n\n\tget drawingStatus() {\n\t\treturn this.#drawingStatus;\n\t}\n\n\t/**\n\t * Sets the value of the 'permission' attribute.\n\t * @param {string[]} value The value to set for the 'permission' attribute.\n\t */\n\tset permission(value) {\n\t\tthis.setAttribute('permission', value.join(','));\n\t}\n\n\t/**\n\t * Gets the value of the 'permission-check' attribute.\n\t * @returns {string[]} The value of the 'permission' attribute.\n\t */\n\tget permission() {\n\t\treturn this.getAttribute('permission')?.split(',') || [];\n\t}\n\n\t/**\n\t * Sets the 'permission-check' attribute.\n\t * @param {boolean} value The value to set for the 'permission-check' attribute.\n\t */\n\tset isPermissionCheck(value) {\n\t\tif (value) this.setAttribute('permission-check', '');\n\t\telse this.removeAttribute('permission-check');\n\t}\n\n\t/**\n\t * Checks if the 'permission-check' attribute is present.\n\t * @returns {boolean} True if the 'permission-check' attribute is present.\n\t */\n\tget isPermissionCheck() {\n\t\treturn this.hasAttribute('permission-check');\n\t}\n\n\tset noShow(value) {\n\t\tif (value) this.setAttribute('no-show', '');\n\t\telse this.removeAttribute('no-show');\n\t}\n\n\t/**\n\t * Checks if the 'show' attribute is present.\n\t * @returns {boolean} True if the 'show' attribute is present.\n\t */\n\tget noShow() {\n\t\treturn this.hasAttribute('no-show');\n\t}\n\n\t/**\n\t * Sets the 'shadow' attribute.\n\t * @param {string} value The value to set for the 'shadow' attribute.\n\t */\n\tset isShadowRoot(value) {\n\t\treturn this.setAttribute('shadow', value);\n\t}\n\n\tget isShadowRoot() {\n\t\treturn this.getAttribute('shadow');\n\t}\n\n\t/**\n\t * Checks if the 'shadow' attribute is present.\n\t * @returns {boolean} True if the 'shadow' attribute is present.\n\t */\n\tget hasShadowRoot() {\n\t\treturn this.hasAttribute('shadow');\n\t}\n\n\t/**\n\t * Gets the value of the 'shadow' attribute or 'open' if not set.\n\t * @returns {string} The value of the 'shadow' attribute or 'open'.\n\t */\n\tget shadowType() {\n\t\treturn this.getAttribute('shadow') || 'open';\n\t}\n\n\t/**\n\t * Gets the rendering context, either the shadow root or the component itself.\n\t * @returns The rendering context.\n\t */\n\tget context() {\n\t\tif (this.hasShadowRoot) {\n\t\t\treturn this.shadowRoot;\n\t\t} else {\n\t\t\treturn this;\n\t\t}\n\t}\n\n\t/**\n\t * Gets the store instance.\n\t * @returns {object} The store instance.\n\t */\n\tget store() {\n\t\treturn store;\n\t}\n\n\t/**\n\t * @typedef {object} ArrayActions\n\t * @property {Function} addAction - Adds an item to the array.\n\t * @property {Function} deleteAction - Deletes an item from the array.\n\t * @property {Function} loadAction - Loads an array.\n\t * @property {Function} updateAction - Updates an item in the array.\n\t * @property {Function} addManyAction - Adds many items to the array.\n\t */\n\n\t/**\n\t * @typedef {object} ObjectActions\n\t * @property {Function} addAction - Replace old object with new object\n\t * @property {Function} deleteAction - Delete item based on key\n\t * @property {Function} updateAction - Update item based on key\n\t */\n\n\t/**\n\t * Gets the default store actions.\n\t * @returns The default store actions for arrays and objects.\n\t */\n\tget defaultStoreActions() {\n\t\treturn defaultStoreActions;\n\t}\n\n\t/**\n\t * Gets the classes to be removed after the component is connected.\n\t * @returns An array of class names to remove.\n\t */\n\tget removeClassAfterConnect() {\n\t\treturn this.getAttribute('remove-class-after-connect')?.split(' ');\n\t}\n\n\t/**\n\t * Sets the component dependencies.\n\t * @param value The dependencies to set.\n\t */\n\tset dependencies(value) {\n\t\tthis._dependencies = value;\n\t}\n\n\t/**\n\t * Gets the component dependencies.\n\t * @returns The component dependencies.\n\t */\n\tget dependencies() {\n\t\treturn this._dependencies;\n\t}\n\n\t/**\n\t * Processes and combines two templates into one.\n\t * @param pTemplate The primary template.\n\t * @param inputTemplate The secondary template.\n\t * @returns The combined template.\n\t */\n\tstatic processTemplates = (pTemplate, inputTemplate) => {\n\t\tconst newTemplate = document.createElement('template');\n\t\tnewTemplate.innerHTML = [inputTemplate.innerHTML, pTemplate?.innerHTML || ''].join('');\n\t\treturn newTemplate;\n\t};\n\n\t/**\n\t * Defines a custom element if not already defined.\n\t * @param name The name of the custom element.\n\t * @param [elementConstructor] The constructor for the custom element.\n\t * @param [options] Additional options for defining the element.\n\t */\n\tstatic define(name, elementConstructor = this, options = {}) {\n\t\tconst definedElement = customElements.get(name);\n\n\t\tif (!definedElement) {\n\t\t\tcustomElements.define(name, elementConstructor, options);\n\t\t}\n\t}\n\n\t/**\n\t * Defines component dependencies by registering custom elements.\n\t */\n\tdefineDependencies() {\n\t\tif (this.dependencies)\n\t\t\tObject.entries(this.dependencies).forEach((name, component) => WJElement.define(name, component));\n\t}\n\n\t/**\n\t * Hook for extending behavior before drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t */\n\tbeforeDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior before drawing\n\t}\n\n\t/**\n\t * Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t *   draw(context, appStoreObj, params) {\n\t *     const div = document.createElement('div');\n\t *     div.textContent = 'Hello, world!';\n\t *     context.appendChild(div);\n\t *   }\n\t * }\n\t */\n\tdraw(context, appStoreObj, params) {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Hook for extending behavior after drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t */\n\tafterDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior after drawing\n\t}\n\n\t/**\n\t * Lifecycle method invoked when the component is connected to the DOM.\n\t */\n\tconnectedCallback() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.#originalVisibility = this.#originalVisibility ?? this.style.visibility;\n\t\t\tthis.style.visibility = 'hidden';\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.ATTACHED;\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\t/**\n\t * Initializes the component, setting up attributes and rendering.\n\t * @param [force] Whether to force initialization.\n\t * @returns A promise that resolves when initialization is complete.\n\t */\n\tinitWjElement = (force = false) => {\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tthis.#drawingStatus = this.drawingStatuses.BEGINING;\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tif (this.hasShadowRoot) {\n\t\t\t\tif (!this.shadowRoot) this.attachShadow({ mode: this.shadowType || 'open' });\n\t\t\t}\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.START;\n\t\t\tawait this.display(force);\n\n\t\t\tconst sheet = new CSSStyleSheet();\n\t\t\tsheet.replaceSync(this.constructor.cssStyleSheet);\n\n\t\t\tthis.context.adoptedStyleSheets = [sheet];\n\n\t\t\tresolve();\n\t\t});\n\t};\n\n\t/**\n\t * Sets up attributes and event listeners for the component.\n\t * This method retrieves all custom events defined for the component\n\t * and adds event listeners for each of them. When an event is triggered,\n\t * it calls the corresponding method on the host element.\n\t */\n\tsetupAttributes() {\n\t\t// Keď neaký element si zadefinuje funkciu \"setupAttributes\" tak sa obsah tejto funkcie nezavolá\n\n\t\tlet allEvents = WjElementUtils.getEvents(this);\n\t\tallEvents.forEach((customEvent, domEvent) => {\n\t\t\tthis.addEventListener(domEvent, (e) => {\n\t\t\t\tthis.getRootNode().host[customEvent]?.();\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Hook for extending behavior before disconnecting the component.\n\t */\n\tbeforeDisconnect() {\n\t\t// Hook for extending behavior before disconnecting\n\t}\n\n\t/**\n\t * Hook for extending behavior after disconnecting the component.\n\t */\n\tafterDisconnect() {\n\t\t// Hook for extending behavior after disconnecting\n\t}\n\n\t/**\n\t * Hook for extending behavior before redrawing the component.\n\t */\n\tbeforeRedraw() {\n\t\t// Hook for extending behavior before redrawing\n\t}\n\n\t/**\n\t * Cleans up resources and event listeners for the component.\n\t */\n\tcomponentCleanup() {\n\t\t// Hook for cleaning up the component\n\t}\n\n\t/**\n\t * Lifecycle method invoked when the component is disconnected from the DOM.\n\t */\n\tdisconnectedCallback() {\n\t\tif (this.#isAttached) {\n\t\t\tthis.beforeDisconnect?.();\n\t\t\tthis.context.innerHTML = '';\n\t\t\tthis.afterDisconnect?.();\n\t\t\tthis.#isAttached = false;\n\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\tthis.#originalVisibility = null;\n\t\t}\n\n\t\tif (this.#isRendering) {\n\t\t\tthis.stopRenderLoop();\n\t\t}\n\n\t\tthis.#drawingStatus = this.drawingStatuses.DISCONNECTED;\n\n\t\tthis.componentCleanup();\n\t}\n\n\t/**\n\t * Enqueues an update for the component.\n\t * This method processes the current render promise and then refreshes the component.\n\t */\n\t#enqueueUpdate() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t}\n\t}\n\n\t/**\n\t * Lifecycle method invoked when an observed attribute changes.\n\t * @param name The name of the attribute that changed.\n\t * @param old The old value of the attribute.\n\t * @param newName The new value of the attribute.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (old !== newName) {\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\trefresh() {\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\n\t\tthis.#pristine = false;\n\t\tthis.#enqueueUpdate();\n\t}\n\n\t/**\n\t * Refreshes the component by reinitializing it if it is in a drawing state.\n\t * This method checks if the component's drawing status is at least in the START state.\n\t * If so, it performs the following steps:\n\t * 1. Calls the `beforeRedraw` hook if defined.\n\t * 2. Calls the `beforeDisconnect` hook if defined.\n\t * 3. Refreshes the update promise to manage the rendering lifecycle.\n\t * 4. Calls the `afterDisconnect` hook if defined.\n\t * 5. Reinitializes the component by calling `initWjElement` with `true` to force initialization.\n\t * If the component is not in a drawing state, it simply returns a resolved promise.\n\t */\n\tasync #refresh() {\n\t\tif (this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t\treturn; // Skip if async render is still processing\n\t\t}\n\n\t\tif (!this.#pristine) {\n\t\t\tthis.#pristine = true;\n\t\t\tthis.#isRendering = true;\n\n\t\t\tif (this.#isAttached) {\n\t\t\t\tthis.beforeRedraw?.();\n\t\t\t\tthis.beforeDisconnect?.();\n\t\t\t\tthis.afterDisconnect?.();\n\t\t\t} else {\n\t\t\t\tthis.stopRenderLoop();\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tawait this.initWjElement(true);\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Render error:', error);\n\t\t\t} finally {\n\t\t\t\tthis.#isRendering = false;\n\n\t\t\t\tif (!this.#pristine) {\n\t\t\t\t\tthis.#pristine = false;\n\t\t\t\t\tthis.#enqueueUpdate();\n\t\t\t\t} else {\n\t\t\t\t\tthis.finisPromise();\n\t\t\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tstopRenderLoop() {\n\t\tif (this.rafId) {\n\t\t\tcancelAnimationFrame(this.rafId);\n\t\t\tthis.rafId = null;\n\t\t}\n\t}\n\n\t/**\n\t * Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStore The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t *   draw(context, appStore, params) {\n\t *     const div = document.createElement('div');\n\t *     div.textContent = 'Hello, world!';\n\t *     context.appendChild(div);\n\t *   }\n\t * }\n\t */\n\tdraw(context, appStore, params) {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Displays the component's content, optionally forcing a re-render.\n\t * @param [force] Whether to force a re-render.\n\t * @returns A promise that resolves when the display is complete.\n\t */\n\tdisplay(force = false) {\n\t\tthis.template = this.constructor.customTemplate || document.createElement('template');\n\n\t\tif (force) {\n\t\t\t[...this.context.childNodes].forEach(this.context.removeChild.bind(this.context));\n\t\t}\n\n\t\tthis.context.append(this.template.content.cloneNode(true));\n\n\t\tif (this.noShow || (this.isPermissionCheck && !Permissions.isPermissionFulfilled(this.permission))) {\n\t\t\tthis.remove();\n\t\t\treturn Promise.resolve();\n\t\t}\n\n\t\treturn this.#resolveRender();\n\t}\n\n\t/**\n\t * Renders the component's content.\n\t */\n\tasync render() {\n\t\tthis.#drawingStatus = this.drawingStatuses.DRAWING;\n\n\t\tlet _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\tif (_draw instanceof Promise || _draw?.constructor.name === 'Promise') {\n\t\t\t_draw = await _draw;\n\t\t}\n\n\t\tlet rend = _draw;\n\t\tlet element;\n\n\t\tif (rend instanceof HTMLElement || rend instanceof DocumentFragment) {\n\t\t\telement = rend;\n\t\t} else {\n\t\t\tlet inputTemplate = document.createElement('template');\n\t\t\tinputTemplate.innerHTML = rend;\n\t\t\telement = inputTemplate.content.cloneNode(true);\n\t\t}\n\n\t\tlet rendered = element;\n\n\t\tthis.context.appendChild(rendered);\n\t}\n\n\t/**\n\t * Sanitizes a given name by converting it from kebab-case to camelCase.\n\t * @param {string} name The name in kebab-case format (e.g., \"example-name\").\n\t * @returns {string} The sanitized name in camelCase format (e.g., \"exampleName\").\n\t * @example\n\t * sanitizeName('example-name');\n\t * @example\n\t * sanitizeName('my-custom-component');\n\t */\n\tsanitizeName(name) {\n\t\tlet parts = name.split('-');\n\t\treturn [parts.shift(), ...parts.map((n) => n[0].toUpperCase() + n.slice(1))].join('');\n\t}\n\n\t/**\n\t * Checks if a property on an object has a getter or setter method defined.\n\t * @param {object} obj The object on which the property is defined.\n\t * @param {string} property The name of the property to check.\n\t * @returns {object} An object indicating the presence of getter and setter methods.\n\t * @property {Function|null} hasGetter The getter function if it exists, otherwise `null`.\n\t * @property {Function|null} hasSetter The setter function if it exists, otherwise `null`.\n\t * @example\n\t * const obj = {\n\t *   get name() { return 'value'; },\n\t *   set name(val) { console.log(val); }\n\t * };\n\t * checkGetterSetter(obj, 'name');\n\t * @example\n\t * const obj = { prop: 42 };\n\t * checkGetterSetter(obj, 'prop');\n\t */\n\tcheckGetterSetter(obj, property) {\n\t\tlet descriptor = Object.getOwnPropertyDescriptor(obj, property);\n\n\t\t// Check if the descriptor is found on the object itself\n\t\tif (descriptor) {\n\t\t\treturn {\n\t\t\t\thasGetter: typeof descriptor.get === 'function' ? descriptor.get : null,\n\t\t\t\thasSetter: typeof descriptor.set === 'function' ? descriptor.set : null,\n\t\t\t};\n\t\t}\n\n\t\t// Otherwise, check the prototype chain\n\t\tlet proto = Object.getPrototypeOf(obj);\n\t\tif (proto) {\n\t\t\treturn this.checkGetterSetter(proto, property);\n\t\t}\n\n\t\t// If the property doesn't exist at all\n\t\treturn { hasGetter: null, hasSetter: null };\n\t}\n\n\t/**\n\t * Sets up property accessors for the component's attributes.\n\t */\n\tsetUpAccessors() {\n\t\tlet attrs = this.getAttributeNames();\n\t\tattrs.forEach((name) => {\n\t\t\tconst sanitizedName = this.sanitizeName(name);\n\n\t\t\tconst { hasGetter, hasSetter } = this.checkGetterSetter(this, sanitizedName);\n\n\t\t\tObject.defineProperty(this, sanitizedName, {\n\t\t\t\tset: hasSetter ?? ((value) => this.setAttribute(name, value)),\n\t\t\t\tget: hasGetter ?? (() => this.getAttribute(name)),\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Resolves the rendering process of the component.\n\t * @returns A promise that resolves when rendering is complete.\n\t * @private\n\t */\n\t#resolveRender() {\n\t\tthis.params = WjElementUtils.getAttributes(this);\n\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tconst __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (__beforeDraw instanceof Promise || __beforeDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait __beforeDraw;\n\t\t\t}\n\n\t\t\tawait this.render();\n\n\t\t\tconst __afterDraw = this.afterDraw?.(this.context, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (__afterDraw instanceof Promise || __afterDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait __afterDraw;\n\t\t\t}\n\n\t\t\t// RHR toto je bicykel pre slickRouter  pretože routovanie nieje vykonané pokiaľ sa nezavolá updateComplete promise,\n\t\t\t// toto bude treba rozšíriť aby sme lepšie vedeli kontrolovať vykreslovanie elementov, a flow hookov.\n\t\t\tthis.#isRendering = false;\n\t\t\tthis.#isAttached = true;\n\n\t\t\tif (this.removeClassAfterConnect) {\n\t\t\t\tthis.classList.remove(...this.removeClassAfterConnect);\n\t\t\t}\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.DONE;\n\n\t\t\tresolve();\n\t\t}).catch((e) => {\n\t\t\tconsole.error(e);\n\t\t});\n\t}\n}\n\nlet __esModule = 'true';\nexport { __esModule, Permissions, WjElementUtils, event };\n"],"names":[],"mappings":"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"}

package/dist/wje-file-upload.js

@@ -103,8 +103,7 @@ async function uploadFileInChunks(url, file, preview, chunkSize = 1024 * 1024) {
             return Promise.resolve();
           }
           uploadedBytes += value.byteLength;
-          const percentComplete = (offset + uploadedBytes) / file.size * 100;
-          console.log(`Upload Progress: ${percentComplete.toFixed(2)}%`);
+          (offset + uploadedBytes) / file.size * 100;
           preview.setAttribute("uploaded", offset + uploadedBytes);
           controller.enqueue(value);
           return reader.read().then(process);
@@ -124,7 +123,6 @@ async function uploadFileInChunks(url, file, preview, chunkSize = 1024 * 1024) {
       if (!response2.ok) {
         throw new Error(`Failed to upload chunk ${Math.floor(offset / chunkSize) + 1}: ${response2.statusText}`);
       }
-      console.log(`Chunk ${Math.floor(offset / chunkSize) + 1}/${totalChunks} uploaded successfully.`);
       partResponses.push(response2);
     } catch (error) {
       console.error("Error uploading chunk:", error);
@@ -132,7 +130,6 @@ async function uploadFileInChunks(url, file, preview, chunkSize = 1024 * 1024) {
     }
     offset += chunkSize;
   }
-  console.log("File upload complete!");
   const response = await partResponses.at(-1).json();
   return {
     data: response,
@@ -366,7 +363,6 @@ class FileUpload extends WJElement {
     this.isShadowRoot = "open";
   }
   beforeDraw() {
-    console.log("beforeDraw", this.toChunk, !this.toChunk);
     this.uploadFunction = upload(this.uploadUrl, this.chunkSize, !this.toChunk);
   }
   /**

package/dist/wje-file-upload.js.map

@@ -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        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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"}
+{"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            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                    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        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            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    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        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-infinite-scroll.js

@@ -338,7 +338,7 @@ class InfiniteScroll extends WJElement {
         this.endingEl.classList.add("show");
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
     } finally {
       this.hideLoader();
     }

package/dist/wje-infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-infinite-scroll.js","sources":["../packages/wje-infinite-scroll/infinite-scroll.element.js","../packages/wje-infinite-scroll/infinite-scroll.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InfiniteScroll` is a custom web component that represents an infinite scroll.\n * It extends from `WJElement`.\n * @summary This element allows users to scroll through a potentially infinite amount of content.\n * @documentation https://elements.webjet.sk/components/infinite-scroll\n * @status stable\n * @augments {WJElement}\n * @csspart loader - The loader part of the infinite scroll.\n * @slot - The default slot for the infinite scroll.\n * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.\n * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.\n * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.\n * @tag wje-infinite-scroll\n */\n\nexport default class InfiniteScroll extends WJElement {\n    #drawnItems;\n    #loadedItems;\n    #response;\n    #infiniteScrollTemplate;\n    #abortController;\n    #signal;\n    #loading;\n    /**\n     * Creates an instance of InfiniteScroll.\n     */\n    constructor() {\n        super();\n\n        this.totalPages = 0;\n        this.isLoading = [];\n        this.#response = {};\n        this.iterate = null;\n        this.#infiniteScrollTemplate = null;\n        this.#abortController = new AbortController();\n        this.#signal = this.#abortController.signal;\n        this.#drawnItems = [];\n        this.#loadedItems = [];\n        this.placementObj = this;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set infiniteScrollTemplate(value) {\n        this.#infiniteScrollTemplate = value;\n    }\n\n    /**\n     * Getter for the infiniteScrollTemplate property.\n     * @returns {null}\n     */\n    get infiniteScrollTemplate() {\n        return this.#infiniteScrollTemplate;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set response(value) {\n        this.#response = value;\n    }\n\n    /**\n     * Getter for the response property.\n     * @returns {*|{}}\n     */\n    get response() {\n        return this.#response;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set objectName(value) {\n        this.setAttribute('object-name', value);\n    }\n\n    get objectName() {\n        return this.getAttribute('object-name') ?? 'data';\n    }\n\n    className = 'InfiniteScroll';\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 [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component for updates before it is drawn.\n     * This method handles the removal of templates for iteration, adjusts the height styling of the component,\n     * and manages abort signals for loading operations.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        this.#loadedItems = [];\n        this.#drawnItems = [];\n\n        this.iterate = this.querySelector('[iterate]');\n\n        if (this.iterate) {\n            if (this.iterate.nodeName !== 'TEMPLATE') {\n                console.error('The iterate attribute must be a template element');\n                this.infiniteScrollTemplate = this.iterate?.outerHTML;\n            } else {\n                this.infiniteScrollTemplate = this.iterate?.innerHTML;\n            }\n\n            this.iterate?.remove(); // remove template\n        }\n\n        this.setAttribute('style', 'height: ' + this.height);\n\n        // if this.#loading is not fulfilled then cancel the promise\n        if (this.#signal) {\n            this.#abortController.abort();\n            this.#abortController = new AbortController();\n            this.#signal = this.#abortController.signal;\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing the structure for an infinite scroll component.\n     * The structure includes native elements, slots for customization, and optional loading content.\n     * @returns {DocumentFragment} The document fragment containing the component's DOM structure.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-infinite-scroll');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let slot = document.createElement('slot');\n\n        let ending = document.createElement('slot');\n        ending.setAttribute('name', 'ending');\n\n        if (WjElementUtils.hasSlot(this, 'loader')) {\n            let loading = document.createElement('div');\n            loading.classList.add('loading');\n\n            let loader = document.createElement('slot');\n            loader.setAttribute('name', 'loader');\n\n            loading.appendChild(loader);\n\n            this.loadingEl = loading;\n\n            fragment.appendChild(loading);\n        }\n\n        native.appendChild(slot);\n        native.appendChild(ending);\n\n        fragment.appendChild(native);\n\n        this.endingEl = ending;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    async afterDraw() {\n        this.queryParams = this.queryParams || '';\n        this.size = +this.size || 10;\n        this.currentPage = 0;\n\n        this.scrollEvent();\n        this.#loading = this.loadPages(this.currentPage);\n        await this.#loading;\n    }\n\n    /**\n     * Attaches a scroll event listener to the current object.\n     * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event\n     * of the current object. This enables handling of scroll events for\n     * specific functionality such as updating UI elements, loading content dynamically,\n     * or tracking user interaction with scrollable content.\n     */\n    scrollEvent = () => {\n        this.addEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A function that removes the scroll event listener from the current context.\n     * This function is used to unbind the `onScroll` event listener\n     * from the `scroll` event of the current object. It ensures that\n     * the scroll event no longer triggers the `onScroll` handler.\n     * @function\n     */\n    unScrollEvent = () => {\n        this.removeEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A scroll event handler function that checks the scroll position and triggers loading additional content\n     * when the user scrolls near the bottom of the page.\n     * Properties accessed:\n     * - `scrollTop`: The number of pixels that the content of an element is scrolled vertically.\n     * - `scrollHeight`: The total height of the element's content.\n     * - `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.\n     * Conditions:\n     * - Determines if the scroll position is within 300 pixels of the bottom of the element.\n     * - Verifies that the current page number is less than or equal to the total number of pages.\n     * - Checks if the current page is already in the loading state.\n     * Actions:\n     * - Increments the current page number when the conditions are met.\n     * - Initiates loading for the next page by calling the `loadPages` function.\n     * @param {Event} e The scroll event object.\n     */\n    onScroll = (e) => {\n        const { scrollTop, scrollHeight, clientHeight } = e.target;\n\n        if (\n            scrollTop + clientHeight >= scrollHeight - 300 &&\n            this.currentPage <= this.totalPages &&\n            this.isLoading.includes(this.currentPage)\n        ) {\n            this.currentPage++;\n            this.#loading = this.loadPages(this.currentPage);\n        }\n    };\n\n    /**\n     * Fetches the pages from the server.\n     * @param {number} page The page number.\n     * @returns {Promise<object>} The response from the server.\n     */\n    async getPages(page) {\n        let hasParams = this.url.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`,\n            {\n                signal: this.#signal,\n            }\n        );\n\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Hides the loader.\n     */\n    hideLoader() {\n        this?.loadingEl?.classList.remove('show');\n    }\n\n    /**\n     * Displays the loader element by adding the 'show' class to its class list.\n     * This method is useful for indicating a loading or processing state in the UI.\n     * @returns {void} No return value.\n     */\n    showLoader() {\n        this?.loadingEl?.classList.add('show');\n    }\n\n    /**\n     * Checks if there are more pages to load.\n     * @param {number} page The page number.\n     * @returns {boolean} Whether there are more pages to load.\n     */\n    hasMorePages(page) {\n        return this.totalPages === 0 || page < this.totalPages;\n    }\n\n    /**\n     * Loads the pages.\n     * @param {number} page The page number.\n     */\n    async loadPages(page) {\n        this.showLoader();\n        try {\n            event.dispatchCustomEvent(this, 'wje-infinite-scroll:start');\n            if (this.hasMorePages(page)) {\n                let response;\n                this.parser = new DOMParser();\n\n                if (typeof this.setCustomData === 'function') {\n                    response = await this.setCustomData(page, this.#signal);\n                } else {\n                    response = await this.getPages(page);\n                }\n\n                this.totalPages = response?.totalPages;\n                this.currentPage = page;\n\n                this.placementObj = this;\n\n                // if there is a \"container\" attribute, find the element\n                if (this.hasAttribute('placement')) this.placementObj = this.querySelector(this.placement);\n\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:load', response);\n\n                this.response = response;\n                this.#loadedItems = this.objectName ? response[this.objectName] : response;\n                const notDrawnItems = this.#loadedItems.filter(\n                    (item) => !this.#drawnItems.some(this.compareFunction.bind(this, item))\n                );\n                this.customForeach(notDrawnItems);\n                this.#drawnItems.push(...notDrawnItems);\n\n                this.isLoading.push(page);\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:finish', response);\n            } else {\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:complete');\n                this.endingEl.classList.add('show');\n            }\n        } catch (error) {\n            console.log(error);\n        } finally {\n            this.hideLoader();\n        }\n    }\n\n    compareFunction = (i, item) => i.id === item.id;\n\n    /**\n     * Converts a data item into an HTML element based on a template.\n     * This function takes a data item, interpolates it into a predefined template,\n     * parses the resulting HTML string, and returns the first child element of the parsed HTML content.\n     * @param {object} item The data object to interpolate into the HTML template.\n     * @returns {Element} The first child element generated from the interpolated HTML string.\n     */\n    dataToHtml = (item) => {\n        let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);\n        let doc = this.parser.parseFromString(interpolateItem, 'text/html');\n        let element = doc.activeElement.firstElementChild;\n\n        return element;\n    };\n\n    /**\n     * A custom implementation of the forEach method designed to iterate over an array of data,\n     * transform each item into an HTML element, and append the element to a specified placement object.\n     * Additionally, it adds an event listener to each generated element for handling click events.\n     * @param {Array} data An array of items to process. Each item is transformed into an HTML element\n     * and appended to the placement object specified in the context of `this`.\n     */\n    customForeach = (data) => {\n        data.forEach((item) => {\n            let element = this.dataToHtml(item);\n\n            let symbol = Symbol(\"infinite-scroll-item\");\n            element[symbol] = item;\n            item[symbol] = element;\n\n            event.addListener(element, 'click', 'wje-infinite-scroll:click-item', null);\n\n            this.placementObj.insertAdjacentElement('beforeend', element);\n        });\n    };\n\n    /**\n     * Interpolates a string template with values from the provided parameters object.\n     * The template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,\n     * which are replaced with the corresponding values from the `params` object.\n     * Placeholders support dot notation for accessing nested properties within the `params` object.\n     * @param {string} template The string template containing placeholders to be replaced.\n     * @param {object} params The object containing key-value pairs used for substitution in the template.\n     * @returns {string} A string with all placeholders replaced by their respective values from the `params` object.\n     */\n    interpolate = (template, params) => {\n        let keys = template.match(/\\{{.*?\\}}/g);\n\n        if (keys) {\n            for (let key of keys) {\n                let cleanKey = key.replace('{{', '').replace('}}', '');\n                let val = '';\n                cleanKey.split('.').forEach((k) => {\n                    val = val === '' ? params[k] : val[k];\n                });\n\n                template = template.replace(key, val);\n            }\n        }\n        return template;\n    };\n\n    addItem(item, place = 'beforeend') {\n        let element = this.dataToHtml(item);\n\n        let symbol = Symbol(\"infinite-scroll-item\");\n        element[symbol] = item;\n        item[symbol] = element;\n\n        this.placementObj.insertAdjacentElement(place, element);\n\n        this.#drawnItems.push(item);\n\n        // if drawnItems are more than page * size then add the page to isLoading\n        if (this.#drawnItems.length > this.size * this.currentPage) {\n            this.totalPages += 1;\n        }\n    }\n\n    removeItem(item) {\n        let drawnItem = this.#drawnItems.find(this.compareFunction.bind(this, item));\n        if (!drawnItem) {\n            console.error('Item not found');\n            return;\n        }\n        let symbol = Object.getOwnPropertySymbols(drawnItem).at(0);\n        let element = drawnItem[symbol];\n        if (!element) {\n            console.error('Element not found');\n            return;\n        }\n\n        element?.remove();\n\n        this.#drawnItems = this.#drawnItems.filter((i) => i !== item);\n        // if drawnItems are less than page * size then remove the page from isLoading\n        if (this.#drawnItems.length < this.size * this.currentPage) {\n            this.isLoading = this.isLoading.filter((i) => i !== this.currentPage);\n            this.currentPage--;\n        }\n    }\n}\n","import InfiniteScroll from './infinite-scroll.element.js';\n\nexport default InfiniteScroll;\n\nInfiniteScroll.define('wje-infinite-scroll', InfiniteScroll);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-infinite-scroll.js","sources":["../packages/wje-infinite-scroll/infinite-scroll.element.js","../packages/wje-infinite-scroll/infinite-scroll.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InfiniteScroll` is a custom web component that represents an infinite scroll.\n * It extends from `WJElement`.\n * @summary This element allows users to scroll through a potentially infinite amount of content.\n * @documentation https://elements.webjet.sk/components/infinite-scroll\n * @status stable\n * @augments {WJElement}\n * @csspart loader - The loader part of the infinite scroll.\n * @slot - The default slot for the infinite scroll.\n * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.\n * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.\n * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.\n * @tag wje-infinite-scroll\n */\n\nexport default class InfiniteScroll extends WJElement {\n    #drawnItems;\n    #loadedItems;\n    #response;\n    #infiniteScrollTemplate;\n    #abortController;\n    #signal;\n    #loading;\n    /**\n     * Creates an instance of InfiniteScroll.\n     */\n    constructor() {\n        super();\n\n        this.totalPages = 0;\n        this.isLoading = [];\n        this.#response = {};\n        this.iterate = null;\n        this.#infiniteScrollTemplate = null;\n        this.#abortController = new AbortController();\n        this.#signal = this.#abortController.signal;\n        this.#drawnItems = [];\n        this.#loadedItems = [];\n        this.placementObj = this;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set infiniteScrollTemplate(value) {\n        this.#infiniteScrollTemplate = value;\n    }\n\n    /**\n     * Getter for the infiniteScrollTemplate property.\n     * @returns {null}\n     */\n    get infiniteScrollTemplate() {\n        return this.#infiniteScrollTemplate;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set response(value) {\n        this.#response = value;\n    }\n\n    /**\n     * Getter for the response property.\n     * @returns {*|{}}\n     */\n    get response() {\n        return this.#response;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set objectName(value) {\n        this.setAttribute('object-name', value);\n    }\n\n    get objectName() {\n        return this.getAttribute('object-name') ?? 'data';\n    }\n\n    className = 'InfiniteScroll';\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 [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component for updates before it is drawn.\n     * This method handles the removal of templates for iteration, adjusts the height styling of the component,\n     * and manages abort signals for loading operations.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        this.#loadedItems = [];\n        this.#drawnItems = [];\n\n        this.iterate = this.querySelector('[iterate]');\n\n        if (this.iterate) {\n            if (this.iterate.nodeName !== 'TEMPLATE') {\n                console.error('The iterate attribute must be a template element');\n                this.infiniteScrollTemplate = this.iterate?.outerHTML;\n            } else {\n                this.infiniteScrollTemplate = this.iterate?.innerHTML;\n            }\n\n            this.iterate?.remove(); // remove template\n        }\n\n        this.setAttribute('style', 'height: ' + this.height);\n\n        // if this.#loading is not fulfilled then cancel the promise\n        if (this.#signal) {\n            this.#abortController.abort();\n            this.#abortController = new AbortController();\n            this.#signal = this.#abortController.signal;\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing the structure for an infinite scroll component.\n     * The structure includes native elements, slots for customization, and optional loading content.\n     * @returns {DocumentFragment} The document fragment containing the component's DOM structure.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-infinite-scroll');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let slot = document.createElement('slot');\n\n        let ending = document.createElement('slot');\n        ending.setAttribute('name', 'ending');\n\n        if (WjElementUtils.hasSlot(this, 'loader')) {\n            let loading = document.createElement('div');\n            loading.classList.add('loading');\n\n            let loader = document.createElement('slot');\n            loader.setAttribute('name', 'loader');\n\n            loading.appendChild(loader);\n\n            this.loadingEl = loading;\n\n            fragment.appendChild(loading);\n        }\n\n        native.appendChild(slot);\n        native.appendChild(ending);\n\n        fragment.appendChild(native);\n\n        this.endingEl = ending;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    async afterDraw() {\n        this.queryParams = this.queryParams || '';\n        this.size = +this.size || 10;\n        this.currentPage = 0;\n\n        this.scrollEvent();\n        this.#loading = this.loadPages(this.currentPage);\n        await this.#loading;\n    }\n\n    /**\n     * Attaches a scroll event listener to the current object.\n     * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event\n     * of the current object. This enables handling of scroll events for\n     * specific functionality such as updating UI elements, loading content dynamically,\n     * or tracking user interaction with scrollable content.\n     */\n    scrollEvent = () => {\n        this.addEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A function that removes the scroll event listener from the current context.\n     * This function is used to unbind the `onScroll` event listener\n     * from the `scroll` event of the current object. It ensures that\n     * the scroll event no longer triggers the `onScroll` handler.\n     * @function\n     */\n    unScrollEvent = () => {\n        this.removeEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A scroll event handler function that checks the scroll position and triggers loading additional content\n     * when the user scrolls near the bottom of the page.\n     * Properties accessed:\n     * - `scrollTop`: The number of pixels that the content of an element is scrolled vertically.\n     * - `scrollHeight`: The total height of the element's content.\n     * - `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.\n     * Conditions:\n     * - Determines if the scroll position is within 300 pixels of the bottom of the element.\n     * - Verifies that the current page number is less than or equal to the total number of pages.\n     * - Checks if the current page is already in the loading state.\n     * Actions:\n     * - Increments the current page number when the conditions are met.\n     * - Initiates loading for the next page by calling the `loadPages` function.\n     * @param {Event} e The scroll event object.\n     */\n    onScroll = (e) => {\n        const { scrollTop, scrollHeight, clientHeight } = e.target;\n\n        if (\n            scrollTop + clientHeight >= scrollHeight - 300 &&\n            this.currentPage <= this.totalPages &&\n            this.isLoading.includes(this.currentPage)\n        ) {\n            this.currentPage++;\n            this.#loading = this.loadPages(this.currentPage);\n        }\n    };\n\n    /**\n     * Fetches the pages from the server.\n     * @param {number} page The page number.\n     * @returns {Promise<object>} The response from the server.\n     */\n    async getPages(page) {\n        let hasParams = this.url.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`,\n            {\n                signal: this.#signal,\n            }\n        );\n\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Hides the loader.\n     */\n    hideLoader() {\n        this?.loadingEl?.classList.remove('show');\n    }\n\n    /**\n     * Displays the loader element by adding the 'show' class to its class list.\n     * This method is useful for indicating a loading or processing state in the UI.\n     * @returns {void} No return value.\n     */\n    showLoader() {\n        this?.loadingEl?.classList.add('show');\n    }\n\n    /**\n     * Checks if there are more pages to load.\n     * @param {number} page The page number.\n     * @returns {boolean} Whether there are more pages to load.\n     */\n    hasMorePages(page) {\n        return this.totalPages === 0 || page < this.totalPages;\n    }\n\n    /**\n     * Loads the pages.\n     * @param {number} page The page number.\n     */\n    async loadPages(page) {\n        this.showLoader();\n        try {\n            event.dispatchCustomEvent(this, 'wje-infinite-scroll:start');\n            if (this.hasMorePages(page)) {\n                let response;\n                this.parser = new DOMParser();\n\n                if (typeof this.setCustomData === 'function') {\n                    response = await this.setCustomData(page, this.#signal);\n                } else {\n                    response = await this.getPages(page);\n                }\n\n                this.totalPages = response?.totalPages;\n                this.currentPage = page;\n\n                this.placementObj = this;\n\n                // if there is a \"container\" attribute, find the element\n                if (this.hasAttribute('placement')) this.placementObj = this.querySelector(this.placement);\n\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:load', response);\n\n                this.response = response;\n                this.#loadedItems = this.objectName ? response[this.objectName] : response;\n                const notDrawnItems = this.#loadedItems.filter(\n                    (item) => !this.#drawnItems.some(this.compareFunction.bind(this, item))\n                );\n                this.customForeach(notDrawnItems);\n                this.#drawnItems.push(...notDrawnItems);\n\n                this.isLoading.push(page);\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:finish', response);\n            } else {\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:complete');\n                this.endingEl.classList.add('show');\n            }\n        } catch (error) {\n            console.error(error);\n        } finally {\n            this.hideLoader();\n        }\n    }\n\n    compareFunction = (i, item) => i.id === item.id;\n\n    /**\n     * Converts a data item into an HTML element based on a template.\n     * This function takes a data item, interpolates it into a predefined template,\n     * parses the resulting HTML string, and returns the first child element of the parsed HTML content.\n     * @param {object} item The data object to interpolate into the HTML template.\n     * @returns {Element} The first child element generated from the interpolated HTML string.\n     */\n    dataToHtml = (item) => {\n        let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);\n        let doc = this.parser.parseFromString(interpolateItem, 'text/html');\n        let element = doc.activeElement.firstElementChild;\n\n        return element;\n    };\n\n    /**\n     * A custom implementation of the forEach method designed to iterate over an array of data,\n     * transform each item into an HTML element, and append the element to a specified placement object.\n     * Additionally, it adds an event listener to each generated element for handling click events.\n     * @param {Array} data An array of items to process. Each item is transformed into an HTML element\n     * and appended to the placement object specified in the context of `this`.\n     */\n    customForeach = (data) => {\n        data.forEach((item) => {\n            let element = this.dataToHtml(item);\n\n            let symbol = Symbol(\"infinite-scroll-item\");\n            element[symbol] = item;\n            item[symbol] = element;\n\n            event.addListener(element, 'click', 'wje-infinite-scroll:click-item', null);\n\n            this.placementObj.insertAdjacentElement('beforeend', element);\n        });\n    };\n\n    /**\n     * Interpolates a string template with values from the provided parameters object.\n     * The template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,\n     * which are replaced with the corresponding values from the `params` object.\n     * Placeholders support dot notation for accessing nested properties within the `params` object.\n     * @param {string} template The string template containing placeholders to be replaced.\n     * @param {object} params The object containing key-value pairs used for substitution in the template.\n     * @returns {string} A string with all placeholders replaced by their respective values from the `params` object.\n     */\n    interpolate = (template, params) => {\n        let keys = template.match(/\\{{.*?\\}}/g);\n\n        if (keys) {\n            for (let key of keys) {\n                let cleanKey = key.replace('{{', '').replace('}}', '');\n                let val = '';\n                cleanKey.split('.').forEach((k) => {\n                    val = val === '' ? params[k] : val[k];\n                });\n\n                template = template.replace(key, val);\n            }\n        }\n        return template;\n    };\n\n    addItem(item, place = 'beforeend') {\n        let element = this.dataToHtml(item);\n\n        let symbol = Symbol(\"infinite-scroll-item\");\n        element[symbol] = item;\n        item[symbol] = element;\n\n        this.placementObj.insertAdjacentElement(place, element);\n\n        this.#drawnItems.push(item);\n\n        // if drawnItems are more than page * size then add the page to isLoading\n        if (this.#drawnItems.length > this.size * this.currentPage) {\n            this.totalPages += 1;\n        }\n    }\n\n    removeItem(item) {\n        let drawnItem = this.#drawnItems.find(this.compareFunction.bind(this, item));\n        if (!drawnItem) {\n            console.error('Item not found');\n            return;\n        }\n        let symbol = Object.getOwnPropertySymbols(drawnItem).at(0);\n        let element = drawnItem[symbol];\n        if (!element) {\n            console.error('Element not found');\n            return;\n        }\n\n        element?.remove();\n\n        this.#drawnItems = this.#drawnItems.filter((i) => i !== item);\n        // if drawnItems are less than page * size then remove the page from isLoading\n        if (this.#drawnItems.length < this.size * this.currentPage) {\n            this.isLoading = this.isLoading.filter((i) => i !== this.currentPage);\n            this.currentPage--;\n        }\n    }\n}\n","import InfiniteScroll from './infinite-scroll.element.js';\n\nexport default InfiniteScroll;\n\nInfiniteScroll.define('wje-infinite-scroll', InfiniteScroll);\n"],"names":[],"mappings":"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"}

package/dist/wje-input.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { F as FormAssociatedElement } from "./form-associated-element-CaIxmEod.js";
+import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    label {\n        margin: var(--wje-input-label-margin);\n        padding: var(--wje-input-label-padding);\n        display: var(--wje-input-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-label-line-height);\n        font-size: var(--wje-input-label-font-size);\n    }\n    .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        width: 100%;\n        > .input-wrapper {\n            grid-column: 2;\n        }\n    }\n    .native-input {\n        .input-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            slot[name='error'] {\n                position: static;\n\n                background: transparent;\n                padding: 0.25rem 0;\n                left: auto;\n                transform: none;\n                color: var(--wje-input-color-invalid);\n                font-size: 12px;\n                line-height: normal;\n            }\n        }\n    }\n}\n\n:host([type=hidden]) {\n    margin: 0;\n    .native-input {\n        padding: 0;\n        border-width: 0;\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: 0;\n    top: 3px;\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n\n:host([invalid]) {\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\n:host([disabled]) input {\n    opacity: 0.5;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
 class Input extends FormAssociatedElement {

package/dist/wje-kanban.js

@@ -342,7 +342,7 @@ class Kanban extends WJElement {
         this.renamePool(pool);
         break;
       default:
-        console.log(`Neznáma akcia: ${action}`);
+        console.error(`Neznáma akcia: ${action}`);
     }
   }
   /**