wj-elements 0.3.0 → 0.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"wje-file-upload-item.js","sources":["../packages/wje-file-upload-item/file-upload-item.element.js","../packages/wje-file-upload-item/file-upload-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport FormatDigital from '../wje-format-digital/format-digital.js';\nimport Icon from '../wje-icon/icon.js';\nimport Slider from '../wje-slider/slider.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to upload files.\n * `FileUploadItem` is a custom web component that represents a file upload item.\n * It extends from `WJElement` and uses the `Localizer` utility for localization.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @csspart button - The delete button part\n * @csspart image - The image part\n * @csspart name - The name part\n * @csspart size - The size part\n * @slot img - Slot for the image\n * @slot action - Slot for the action buttons\n * @cssproperty --primary-color - The primary color of the file upload item.\n * //@fires wje-button:click - Dispatches when the delete button is clicked\n * @tag wje-file-upload\n */\nexport default class FileUploadItem extends WJElement {\n    /**\n     * Creates an instance of FileUploadItem.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the 'is-uploaded' attribute to indicate the uploaded status.\n     * @param {boolean} value The value to determine if the element is uploaded.\n     */\n    set isUploaded(value) {\n        this.setAttribute('is-uploaded', '');\n    }\n\n    /**\n     * Checks if the 'is-uploaded' attribute is present on the element.\n     * @returns {boolean} True if the 'is-uploaded' attribute exists, otherwise false.\n     */\n    get isUploaded() {\n        return this.hasAttribute('is-uploaded');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the value of the 'size' attribute.\n     * @returns {string|null} The value of the 'size' attribute, or null if the attribute is not present.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Dependencies for the component.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-format-digital': FormatDigital,\n        'wje-button': Button,\n        'wje-slider': Slider,\n        'wje-icon': Icon,\n    };\n\n    className = 'FileUploadItem';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['uploaded', 'is-uploaded'];\n    }\n\n    /**\n     * A lifecycle method that is called when one of the observed attributes of the custom element is added, removed, or changed.\n     * This method is used to react to changes in the specified attributes.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.\n     * @param {string|null} newValue The new value of the attribute after the change, or null if the attribute has been removed.\n     * @returns {void} This method does not return a value.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (super.attributeChangedCallback) {\n            super.attributeChangedCallback(name, oldValue, newValue);\n        }\n\n        if (name === 'uploaded' && oldValue !== newValue && this.uploadedEl) {\n            this.uploadedEl.setAttribute('value', newValue);\n\n            let progress = (+newValue / +this.size) * 100 || 0;\n\n            this.progress =  Math.round(progress, 0);\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Method to draw the component on the screen.\n     * @returns {DocumentFragment} The fragment containing the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-file-upload-item');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'img');\n\n        let image = document.createElement('div');\n        image.setAttribute('part', 'image');\n        image.classList.add('image');\n\n        let name = document.createElement('span');\n        name.classList.add('name');\n        name.innerText = this.name;\n\n        let actions = document.createElement('slot');\n        actions.classList.add('actions');\n        actions.setAttribute('name', 'action');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        button.setAttribute('size', 'small');\n        button.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n\n        let sizeWrapper = document.createElement('span');\n        sizeWrapper.classList.add('size');\n\n        let uploaded = document.createElement('wje-format-digital');\n        uploaded.setAttribute('value', this.uploaded || 0);\n        uploaded.innerHTML = `<span slot=\"start\">${this.localizer.translate('wj.file.upload.uploaded')}</span>`;\n\n        let size = document.createElement('wje-format-digital');\n        size.setAttribute('value', this.size || 0);\n        size.innerHTML = `<span slot=\"start\">&nbsp;${this.localizer.translate('wj.file.upload.from')} </span>`;\n\n        let size2 = document.createElement('wje-format-digital');\n        size2.setAttribute('value', this.size || 0);\n\n        let slider = document.createElement('wje-progress-bar');\n        slider.classList.add('file-progress');\n        slider.setAttribute('id', 'id-' + this.lastModified);\n        slider.setAttribute('progress', this.progress);\n        slider.setAttribute('color', 'success');\n\n        image.appendChild(slot);\n        actions.appendChild(button);\n\n        sizeWrapper.appendChild(uploaded);\n        sizeWrapper.appendChild(size);\n\n        native.appendChild(image);\n        native.appendChild(name);\n\n        if (!this.isUploaded)\n            native.appendChild(sizeWrapper);\n        else\n            native.appendChild(size2);\n\n        native.appendChild(actions);\n\n        if (!this.isUploaded)\n            native.appendChild(slider);\n\n        fragment.appendChild(native);\n\n        this.button = button;\n        this.uploadedEl = uploaded;\n        this.sliderEl = slider;\n        this.nameEl = name;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        this.button.addEventListener('wje-button:click', this.onDelete);\n    }\n\n    /**\n     * Sync ARIA attributes on host and actions.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'listitem' });\n        }\n\n        const nameText = (this.nameEl?.textContent || this.name || '').trim();\n        if (nameText && !this.hasAttribute('aria-label')) {\n            this.setAriaState({ label: nameText });\n        }\n\n        if (this.button && !this.button.hasAttribute('aria-label')) {\n            const label = nameText ? `Remove ${nameText}` : 'Remove file';\n            this.button.setAttribute('aria-label', label);\n        }\n    }\n\n    /**\n     * Handles the delete action.\n     */\n    onDelete = () => {\n        event.dispatchCustomEvent(this, 'wje-file-upload-item:remove', this.data);\n\n        this.remove();\n    };\n}\n","import FileUploadItem from './file-upload-item.element.js';\n\nexport default FileUploadItem;\n\nFileUploadItem.define('wje-file-upload-item', FileUploadItem);\n"],"names":[],"mappings":";;;;;;;;;;;AAyBe,MAAM,uBAAuB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlD,cAAc;AACV,UAAO;AAwCX;AAAA;AAAA;AAAA;AAAA,wCAAe;AAAA,MACX,sBAAsB;AAAA,MACtB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,IACf;AAED,qCAAY;AA+JZ;AAAA;AAAA;AAAA,oCAAW,MAAM;AACb,YAAM,oBAAoB,MAAM,+BAA+B,KAAK,IAAI;AAExE,WAAK,OAAQ;AAAA,IAChB;AAjNG,SAAK,YAAY,IAAI,UAAU,IAAI;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW,OAAO;AAClB,SAAK,aAAa,eAAe,EAAE;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,aAAa;AACb,WAAO,KAAK,aAAa,aAAa;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,YAAY,aAAa;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,yBAAyB,MAAM,UAAU,UAAU;AAC/C,QAAI,MAAM,0BAA0B;AAChC,YAAM,yBAAyB,MAAM,UAAU,QAAQ;AAAA,IACnE;AAEQ,QAAI,SAAS,cAAc,aAAa,YAAY,KAAK,YAAY;AACjE,WAAK,WAAW,aAAa,SAAS,QAAQ;AAE9C,UAAI,WAAY,CAAC,WAAW,CAAC,KAAK,OAAQ,OAAO;AAEjD,WAAK,WAAY,KAAK,MAAM,UAAU,CAAC;AAAA,IACnD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAU;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,yBAAyB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,KAAK;AAE/B,QAAI,QAAQ,SAAS,cAAc,KAAK;AACxC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,UAAU,IAAI,OAAO;AAE3B,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,UAAU,IAAI,MAAM;AACzB,SAAK,YAAY,KAAK;AAEtB,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,UAAU,IAAI,SAAS;AAC/B,YAAQ,aAAa,QAAQ,QAAQ;AAErC,QAAI,SAAS,SAAS,cAAc,YAAY;AAChD,WAAO,aAAa,QAAQ,MAAM;AAClC,WAAO,aAAa,QAAQ,OAAO;AACnC,WAAO,YAAY;AAEnB,QAAI,cAAc,SAAS,cAAc,MAAM;AAC/C,gBAAY,UAAU,IAAI,MAAM;AAEhC,QAAI,WAAW,SAAS,cAAc,oBAAoB;AAC1D,aAAS,aAAa,SAAS,KAAK,YAAY,CAAC;AACjD,aAAS,YAAY,sBAAsB,KAAK,UAAU,UAAU,yBAAyB,CAAC;AAE9F,QAAI,OAAO,SAAS,cAAc,oBAAoB;AACtD,SAAK,aAAa,SAAS,KAAK,QAAQ,CAAC;AACzC,SAAK,YAAY,4BAA4B,KAAK,UAAU,UAAU,qBAAqB,CAAC;AAE5F,QAAI,QAAQ,SAAS,cAAc,oBAAoB;AACvD,UAAM,aAAa,SAAS,KAAK,QAAQ,CAAC;AAE1C,QAAI,SAAS,SAAS,cAAc,kBAAkB;AACtD,WAAO,UAAU,IAAI,eAAe;AACpC,WAAO,aAAa,MAAM,QAAQ,KAAK,YAAY;AACnD,WAAO,aAAa,YAAY,KAAK,QAAQ;AAC7C,WAAO,aAAa,SAAS,SAAS;AAEtC,UAAM,YAAY,IAAI;AACtB,YAAQ,YAAY,MAAM;AAE1B,gBAAY,YAAY,QAAQ;AAChC,gBAAY,YAAY,IAAI;AAE5B,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,IAAI;AAEvB,QAAI,CAAC,KAAK;AACN,aAAO,YAAY,WAAW;AAAA;AAE9B,aAAO,YAAY,KAAK;AAE5B,WAAO,YAAY,OAAO;AAE1B,QAAI,CAAC,KAAK;AACN,aAAO,YAAY,MAAM;AAE7B,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AACd,SAAK,aAAa;AAClB,SAAK,WAAW;AAChB,SAAK,SAAS;AAEd,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,SAAU;AACf,SAAK,OAAO,iBAAiB,oBAAoB,KAAK,QAAQ;AAAA,EACtE;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW;;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,WAAU,CAAE;AAAA,IAClD;AAEQ,UAAM,cAAY,UAAK,WAAL,mBAAa,gBAAe,KAAK,QAAQ,IAAI,KAAM;AACrE,QAAI,YAAY,CAAC,KAAK,aAAa,YAAY,GAAG;AAC9C,WAAK,aAAa,EAAE,OAAO,SAAQ,CAAE;AAAA,IACjD;AAEQ,QAAI,KAAK,UAAU,CAAC,KAAK,OAAO,aAAa,YAAY,GAAG;AACxD,YAAM,QAAQ,WAAW,UAAU,QAAQ,KAAK;AAChD,WAAK,OAAO,aAAa,cAAc,KAAK;AAAA,IACxD;AAAA,EACA;AAUA;AC9OA,eAAe,OAAO,wBAAwB,cAAc;"}
+{"version":3,"file":"wje-file-upload-item.js","sources":["../packages/wje-file-upload-item/file-upload-item.element.js","../packages/wje-file-upload-item/file-upload-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport FormatDigital from '../wje-format-digital/format-digital.js';\nimport Icon from '../wje-icon/icon.js';\nimport Slider from '../wje-slider/slider.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to upload files.\n * `FileUploadItem` is a custom web component that represents a file upload item.\n * It extends from `WJElement` and uses the `Localizer` utility for localization.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @csspart button - The delete button part\n * @csspart image - The image part\n * @csspart name - The name part\n * @csspart size - The size part\n * @slot img - Slot for the image\n * @slot action - Slot for the action buttons\n * @cssproperty --primary-color - The primary color of the file upload item.\n * //@fires wje-button:click - Dispatches when the delete button is clicked\n * @tag wje-file-upload\n */\nexport default class FileUploadItem extends WJElement {\n    /**\n     * Creates an instance of FileUploadItem.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the 'is-uploaded' attribute to indicate the uploaded status.\n     * @param {boolean} value The value to determine if the element is uploaded.\n     */\n    set isUploaded(value) {\n        this.setAttribute('is-uploaded', '');\n    }\n\n    /**\n     * Checks if the 'is-uploaded' attribute is present on the element.\n     * @returns {boolean} True if the 'is-uploaded' attribute exists, otherwise false.\n     */\n    get isUploaded() {\n        return this.hasAttribute('is-uploaded');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the value of the 'size' attribute.\n     * @returns {string|null} The value of the 'size' attribute, or null if the attribute is not present.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Dependencies for the component.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-format-digital': FormatDigital,\n        'wje-button': Button,\n        'wje-slider': Slider,\n        'wje-icon': Icon,\n    };\n\n    className = 'FileUploadItem';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['uploaded', 'is-uploaded'];\n    }\n\n    /**\n     * A lifecycle method that is called when one of the observed attributes of the custom element is added, removed, or changed.\n     * This method is used to react to changes in the specified attributes.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.\n     * @param {string|null} newValue The new value of the attribute after the change, or null if the attribute has been removed.\n     * @returns {void} This method does not return a value.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (super.attributeChangedCallback) {\n            super.attributeChangedCallback(name, oldValue, newValue);\n        }\n\n        if (name === 'uploaded' && oldValue !== newValue && this.uploadedEl) {\n            this.uploadedEl.setAttribute('value', newValue);\n\n            let progress = (+newValue / +this.size) * 100 || 0;\n\n            this.progress =  Math.round(progress, 0);\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Method to draw the component on the screen.\n     * @returns {DocumentFragment} The fragment containing the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-file-upload-item');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'img');\n\n        let image = document.createElement('div');\n        image.setAttribute('part', 'image');\n        image.classList.add('image');\n\n        let name = document.createElement('span');\n        name.classList.add('name');\n        name.innerText = this.name;\n\n        let actions = document.createElement('slot');\n        actions.classList.add('actions');\n        actions.setAttribute('name', 'action');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        button.setAttribute('size', 'small');\n        button.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n\n        let sizeWrapper = document.createElement('span');\n        sizeWrapper.classList.add('size');\n\n        let uploaded = document.createElement('wje-format-digital');\n        uploaded.setAttribute('value', this.uploaded || 0);\n        uploaded.innerHTML = `<span slot=\"start\">${this.localizer.translate('wj.file.upload.uploaded')}</span>`;\n\n        let size = document.createElement('wje-format-digital');\n        size.setAttribute('value', this.size || 0);\n        size.innerHTML = `<span slot=\"start\">&nbsp;${this.localizer.translate('wj.file.upload.from')} </span>`;\n\n        let size2 = document.createElement('wje-format-digital');\n        size2.setAttribute('value', this.size || 0);\n\n        let slider = document.createElement('wje-progress-bar');\n        slider.classList.add('file-progress');\n        slider.setAttribute('id', 'id-' + this.lastModified);\n        slider.setAttribute('progress', this.progress);\n        slider.setAttribute('color', 'success');\n\n        image.appendChild(slot);\n        actions.appendChild(button);\n\n        sizeWrapper.appendChild(uploaded);\n        sizeWrapper.appendChild(size);\n\n        native.appendChild(image);\n        native.appendChild(name);\n\n        if (!this.isUploaded)\n            native.appendChild(sizeWrapper);\n        else\n            native.appendChild(size2);\n\n        native.appendChild(actions);\n\n        if (!this.isUploaded)\n            native.appendChild(slider);\n\n        fragment.appendChild(native);\n\n        this.button = button;\n        this.uploadedEl = uploaded;\n        this.sliderEl = slider;\n        this.nameEl = name;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        this.button.addEventListener('wje-button:click', this.onDelete);\n    }\n\n    /**\n     * Sync ARIA attributes on host and actions.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'listitem' });\n        }\n\n        const nameText = (this.nameEl?.textContent || this.name || '').trim();\n        if (nameText && !this.hasAttribute('aria-label')) {\n            this.setAriaState({ label: nameText });\n        }\n\n        if (this.button && !this.button.hasAttribute('aria-label')) {\n            const label = nameText ? `Remove ${nameText}` : 'Remove file';\n            this.button.setAttribute('aria-label', label);\n        }\n    }\n\n    /**\n     * Handles the delete action.\n     */\n    onDelete = () => {\n        event.dispatchCustomEvent(this, 'wje-file-upload-item:remove', this.data);\n\n        this.remove();\n    };\n}\n","import FileUploadItem from './file-upload-item.element.js';\n\nexport default FileUploadItem;\n\nFileUploadItem.define('wje-file-upload-item', FileUploadItem);\n"],"names":[],"mappings":"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"}

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 * 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 { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport { isValidFileType } from '../utils/utils.js';\nimport { getFileTypeIcon, upload } from './service/service.js';\n\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 : 'image/*';\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    /**\n     * Sets the maximum number of files that can be uploaded or managed.\n     * Assigns the specified value to the 'max-files' attribute.\n     * @param {number} value The maximum allowable number of files.\n     */\n    set maxFiles(value) {\n        this.setAttribute('max-files', value);\n    }\n\n    /**\n     * Sets the label attribute for the upload button.\n     * @param {string} value\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Gets the label attribute for the upload button.\n     * @returns {string}\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Retrieves the maximum number of files allowed from the `max-files` attribute.\n     * If the attribute is not set or is invalid, defaults to 0.\n     * @returns {number} The maximum number of files allowed.\n     */\n    get maxFiles() {\n        return parseInt(this.getAttribute('max-files')) || 10;\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 ['label'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'label' && this.button) {\n            const nextLabel = this.label || this.localizer.translate('wj.file.upload.button');\n            this.button.innerText = nextLabel;\n            this.button.setAttribute('aria-label', nextLabel);\n        }\n    }\n\n    /**\n     * Method to setup attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({\n            role: 'group',\n        });\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', 'file-label');\n        label.classList.add('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        fileInput.setAttribute('aria-hidden', 'true');\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            button.setAttribute('aria-label', button.innerText);\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', (e) => {handleInputChange\n            e.preventDefault();\n\n            if (dragEventCounter === 0) {\n                this.native.classList.add('highlight');\n            }\n\n            dragEventCounter += 1;\n        });\n\n        this.native.addEventListener('dragover', (e) => {\n            e.preventDefault();\n\n            if (dragEventCounter === 0) {\n                dragEventCounter = 1;\n            }\n        });\n\n        this.native.addEventListener('dragleave', (e) => {\n            e.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', (e) => {\n            event.preventDefault();\n\n            dragEventCounter = 0;\n            this.native.classList.remove('highlight');\n        });\n\n        this.addEventListener('wje-file-upload-item:remove', (e) => {\n            const file = e.detail;\n\n            if (!(file instanceof File)) {\n                return;\n            }\n\n            let count = this.uploadedFiles.length;\n\n            this.uploadedFiles = this.uploadedFiles.filter((entry) => {\n                return entry?.file?.lastModified !== file.lastModified;\n            });\n\n            if(count !== this.uploadedFiles.length)\n                event.dispatchCustomEvent(this, 'wje-file-upload:file-removed', file);\n        });\n    }\n\n    /**\n     * Method to handle form submission.\n     * @param {Event} e The form submission event.\n     */\n    handleSubmit(e) {\n        e.preventDefault();\n\n        this.addFilesToQueue(this.fileInput.files);\n    }\n\n    /**\n     * Method to handle file drop event.\n     * @param {Event} e The file drop event object.\n     */\n    handleDrop = (e) => {\n        const fileList = e.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} e The file input change event object.\n     */\n    handleInputChange = (e) => {\n        const files = Array.from(e.target.files);\n\n        event.dispatchCustomEvent(this, 'wje-file-upload:files-selected', files);\n\n        this.resetFormState();\n\n        try {\n            this.handleSubmit(e);\n        } catch (err) {\n            console.error(err);\n        }\n    };\n\n    /**\n     * Method to add files to the queue.\n     * @param files\n     */\n    addFilesToQueue(files) {\n        const currentCount = (Array.isArray(this.uploadedFiles) ? this.uploadedFiles.length : 0) + (Array.isArray(this._queuedFiles) ? this._queuedFiles.length : 0);\n        const newTotal = currentCount + files.length;\n\n        if (this.maxFiles && newTotal > this.maxFiles) {\n            const detail = {\n                code: 'MAX-FILES-EXCEEDED',\n                files,\n                maxFiles: this.maxFiles,\n                currentCount,\n                attemptedToAdd: files.length,\n                allowedRemaining: Math.max(this.maxFiles - currentCount, 0),\n            };\n\n            event.dispatchCustomEvent(this, 'wje-file-upload:error', detail);\n\n            return;\n        }\n\n        this._queuedFiles = [...(this._queuedFiles || []), ...files];\n\n        event.dispatchCustomEvent(this, 'wje-file-upload:files-added', files);\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                event.dispatchCustomEvent(this, 'wje-file-upload:files-uploaded', this.uploadedFiles);\n\n                this.onAllFilesUploaded?.();\n                this._queuedFiles = [];\n            }).catch((err) => {\n                this._queuedFiles = this._queuedFiles.filter((file) => file !== err.file);\n\n                event.dispatchCustomEvent(this,'wje-file-upload:error', err);\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 = () => {\n                event.dispatchCustomEvent(this, 'wje-file-upload:started', file);\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                    res.item = preview;\n\n                    event.dispatchCustomEvent(this, 'wje-file-upload:file-uploaded', res);\n\n                    this.onUploadedFileComplete?.(res);\n\n                    this.uploadedFiles.push(res);\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.innerHTML = `<wje-icon slot=\"img\" name=\"${getFileTypeIcon(file.type.split('/')[1])}\" size=\"large\"></wje-icon>`;\n        preview.data = file;\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\n        if (!isValidFileType(file, this.acceptedTypes)) {\n            const err = new Error('');\n            err.code = 'INVALID-FILE-TYPE';\n            err.file = file;\n            err.acceptedTypes = this.acceptedTypes;\n\n            throw err;\n        }\n\n        if (fileSize > this.maxFileSize) {\n            const err = new Error('');\n            err.code = 'FILE-TOO-LARGE';\n            err.file = file;\n            err.maxFileSize = this.maxFileSize;\n\n            throw err;\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 * 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 { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport { isValidFileType } from '../utils/utils.js';\nimport { getFileTypeIcon, upload } from './service/service.js';\n\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 : 'image/*';\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    /**\n     * Sets the maximum number of files that can be uploaded or managed.\n     * Assigns the specified value to the 'max-files' attribute.\n     * @param {number} value The maximum allowable number of files.\n     */\n    set maxFiles(value) {\n        this.setAttribute('max-files', value);\n    }\n\n    /**\n     * Sets the label attribute for the upload button.\n     * @param {string} value\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Gets the label attribute for the upload button.\n     * @returns {string}\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Retrieves the maximum number of files allowed from the `max-files` attribute.\n     * If the attribute is not set or is invalid, defaults to 0.\n     * @returns {number} The maximum number of files allowed.\n     */\n    get maxFiles() {\n        return parseInt(this.getAttribute('max-files')) || 10;\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 ['label'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'label' && this.button) {\n            const nextLabel = this.label || this.localizer.translate('wj.file.upload.button');\n            this.button.innerText = nextLabel;\n            this.button.setAttribute('aria-label', nextLabel);\n        }\n    }\n\n    /**\n     * Method to setup attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({\n            role: 'group',\n        });\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', 'file-label');\n        label.classList.add('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        fileInput.setAttribute('aria-hidden', 'true');\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            button.setAttribute('aria-label', button.innerText);\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', (e) => {handleInputChange\n            e.preventDefault();\n\n            if (dragEventCounter === 0) {\n                this.native.classList.add('highlight');\n            }\n\n            dragEventCounter += 1;\n        });\n\n        this.native.addEventListener('dragover', (e) => {\n            e.preventDefault();\n\n            if (dragEventCounter === 0) {\n                dragEventCounter = 1;\n            }\n        });\n\n        this.native.addEventListener('dragleave', (e) => {\n            e.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', (e) => {\n            event.preventDefault();\n\n            dragEventCounter = 0;\n            this.native.classList.remove('highlight');\n        });\n\n        this.addEventListener('wje-file-upload-item:remove', (e) => {\n            const file = e.detail;\n\n            if (!(file instanceof File)) {\n                return;\n            }\n\n            let count = this.uploadedFiles.length;\n\n            this.uploadedFiles = this.uploadedFiles.filter((entry) => {\n                return entry?.file?.lastModified !== file.lastModified;\n            });\n\n            if(count !== this.uploadedFiles.length)\n                event.dispatchCustomEvent(this, 'wje-file-upload:file-removed', file);\n        });\n    }\n\n    /**\n     * Method to handle form submission.\n     * @param {Event} e The form submission event.\n     */\n    handleSubmit(e) {\n        e.preventDefault();\n\n        this.addFilesToQueue(this.fileInput.files);\n    }\n\n    /**\n     * Method to handle file drop event.\n     * @param {Event} e The file drop event object.\n     */\n    handleDrop = (e) => {\n        const fileList = e.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} e The file input change event object.\n     */\n    handleInputChange = (e) => {\n        const files = Array.from(e.target.files);\n\n        event.dispatchCustomEvent(this, 'wje-file-upload:files-selected', files);\n\n        this.resetFormState();\n\n        try {\n            this.handleSubmit(e);\n        } catch (err) {\n            console.error(err);\n        }\n    };\n\n    /**\n     * Method to add files to the queue.\n     * @param files\n     */\n    addFilesToQueue(files) {\n        const currentCount = (Array.isArray(this.uploadedFiles) ? this.uploadedFiles.length : 0) + (Array.isArray(this._queuedFiles) ? this._queuedFiles.length : 0);\n        const newTotal = currentCount + files.length;\n\n        if (this.maxFiles && newTotal > this.maxFiles) {\n            const detail = {\n                code: 'MAX-FILES-EXCEEDED',\n                files,\n                maxFiles: this.maxFiles,\n                currentCount,\n                attemptedToAdd: files.length,\n                allowedRemaining: Math.max(this.maxFiles - currentCount, 0),\n            };\n\n            event.dispatchCustomEvent(this, 'wje-file-upload:error', detail);\n\n            return;\n        }\n\n        this._queuedFiles = [...(this._queuedFiles || []), ...files];\n\n        event.dispatchCustomEvent(this, 'wje-file-upload:files-added', files);\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                event.dispatchCustomEvent(this, 'wje-file-upload:files-uploaded', this.uploadedFiles);\n\n                this.onAllFilesUploaded?.();\n                this._queuedFiles = [];\n            }).catch((err) => {\n                this._queuedFiles = this._queuedFiles.filter((file) => file !== err.file);\n\n                event.dispatchCustomEvent(this,'wje-file-upload:error', err);\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 = () => {\n                event.dispatchCustomEvent(this, 'wje-file-upload:started', file);\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                    res.item = preview;\n\n                    event.dispatchCustomEvent(this, 'wje-file-upload:file-uploaded', res);\n\n                    this.onUploadedFileComplete?.(res);\n\n                    this.uploadedFiles.push(res);\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.innerHTML = `<wje-icon slot=\"img\" name=\"${getFileTypeIcon(file.type.split('/')[1])}\" size=\"large\"></wje-icon>`;\n        preview.data = file;\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\n        if (!isValidFileType(file, this.acceptedTypes)) {\n            const err = new Error('');\n            err.code = 'INVALID-FILE-TYPE';\n            err.file = file;\n            err.acceptedTypes = this.acceptedTypes;\n\n            throw err;\n        }\n\n        if (fileSize > this.maxFileSize) {\n            const err = new Error('');\n            err.code = 'FILE-TOO-LARGE';\n            err.file = file;\n            err.maxFileSize = this.maxFileSize;\n\n            throw err;\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-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-footer.js","sources":["../packages/wje-footer/footer.element.js","../packages/wje-footer/footer.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents a footer. `Footer` is a custom web component that represents a footer.\n * @documentation https://elements.webjet.sk/components/footer\n * @status stable\n * @augments WJElement\n * @slot default - Default slot for the footer content\n * @cssproperty --primary-color - The primary color of the footer\n */\n\nexport default class Footer extends WJElement {\n    /**\n     * Creates an instance of Footer.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Footer';\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     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Footer from './footer.element.js';\n\nexport default Footer;\n\nFooter.define('wje-footer', Footer);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1C,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;ACzDA,OAAO,OAAO,cAAc,MAAM;"}
+{"version":3,"file":"wje-footer.js","sources":["../packages/wje-footer/footer.element.js","../packages/wje-footer/footer.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents a footer. `Footer` is a custom web component that represents a footer.\n * @documentation https://elements.webjet.sk/components/footer\n * @status stable\n * @augments WJElement\n * @slot default - Default slot for the footer content\n * @cssproperty --primary-color - The primary color of the footer\n */\n\nexport default class Footer extends WJElement {\n    /**\n     * Creates an instance of Footer.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Footer';\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     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Footer from './footer.element.js';\n\nexport default Footer;\n\nFooter.define('wje-footer', Footer);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1C,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;ACzDA,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-form.js","sources":["../packages/wje-form/form.element.js","../packages/wje-form/form.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\n\nimport styles from './scss/styles.scss?inline';\n\n/**\n * @summary The Form class is a custom\n * web component that extends WJElement. It is a simple form that can hold other elements or components.\n * It provides a slot for adding child elements or components.\n * @documentation https://elements.webjet.sk/components/form\n * @status stable\n * @augments WJElement\n * @slot - The slot for adding child elements or components.\n * @tag wje-form\n */\nexport default class Form extends WJElement {\n    /**\n     * Constructor for the Form class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Form class.\n     * @type {string}\n     */\n    className = 'Form';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the Form.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Form.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Form from './form.element.js';\n\nexport default Form;\n\nForm.define('wje-form', Form);\n"],"names":[],"mappings":";;;;;AAce,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;AC5DA,KAAK,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-form.js","sources":["../packages/wje-form/form.element.js","../packages/wje-form/form.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\n\nimport styles from './scss/styles.scss?inline';\n\n/**\n * @summary The Form class is a custom\n * web component that extends WJElement. It is a simple form that can hold other elements or components.\n * It provides a slot for adding child elements or components.\n * @documentation https://elements.webjet.sk/components/form\n * @status stable\n * @augments WJElement\n * @slot - The slot for adding child elements or components.\n * @tag wje-form\n */\nexport default class Form extends WJElement {\n    /**\n     * Constructor for the Form class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Form class.\n     * @type {string}\n     */\n    className = 'Form';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the Form.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Form.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Form from './form.element.js';\n\nexport default Form;\n\nForm.define('wje-form', Form);\n"],"names":[],"mappings":";;;;;AAce,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;AC5DA,KAAK,OAAO,YAAY,IAAI;"}

package/dist/wje-format-digital.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-format-digital.js","sources":["../packages/wje-format-digital/format-digital.element.js","../packages/wje-format-digital/format-digital.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element formats and displays digital values such as file sizes or data transfer rates.\n * `FormatDigital` is a custom web component that represents a formatted digital value with units like\n * bytes or bits. It extends from `WJElement` and utilizes the `Localizer` class for locale-aware formatting.\n * @documentation https://elements.webjet.sk/components/format-digital\n * @status stable\n * @augments {WJElement}\n * @attribute {number} value - The numeric value to format (e.g., 1024 for 1 KB).\n * @attribute {string} unit - The unit of the value (`byte` or `bit`). Defaults to `byte`.\n * @attribute {string} unitDisplay - The display style of the unit (`short`, `long`, or `narrow`). Defaults to `short`.\n * @csspart native - The native part of the component.\n * @csspart formatted - The part representing the formatted value.\n * @csspart start - Slot for content before the formatted value.\n * @csspart end - Slot for content after the formatted value.\n * @tag wje-format-digital\n */\n\nexport default class FormatDigital extends WJElement {\n    /**\n     * Creates an instance of FormatDigital.\n     * Initializes the `Localizer` for locale-specific formatting.\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the value of the digital format.\n     * This value determines the size in bytes or bits to be displayed.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Returns the value of the digital format.\n     * @returns {number} The current value of the component.\n     */\n    get value() {\n        return +this.getAttribute('value');\n    }\n\n    /**\n     * Sets the unit of the digital format.\n     * Valid values are `bit` or `byte`.\n     * @param {string} value The unit to set.\n     */\n    set unit(value) {\n        this.removeAttribute('unit');\n        if (value) {\n            this.setAttribute('unit', value);\n        }\n    }\n\n    /**\n     * Returns the unit of the digital format.\n     * Defaults to `byte` if no unit is set.\n     * @returns {string} The current unit (`bit` or `byte`).\n     */\n    get unit() {\n        return this.hasAttribute('unit') ? this.getAttribute('unit') : 'byte';\n    }\n\n    /**\n     * Sets the unit display style for the digital format.\n     * Valid values are `short`, `long`, or `narrow`.\n     * @param {string} value The unit display style to set.\n     */\n    set unitDisplay(value) {\n        this.removeAttribute('unit-display');\n        if (value) {\n            this.setAttribute('unit-display', value);\n        }\n    }\n\n    /**\n     * Returns the unit display style for the digital format.\n     * Defaults to `short` if not set.\n     * @returns {string} - The current unit display style.\n     */\n    get unitDisplay() {\n        return this.hasAttribute('unit-display') ? this.getAttribute('unit-display') : 'short';\n    }\n\n    /**\n     * The class name identifier for this component.\n     * @type {string}\n     */\n    className = 'FormatDigital';\n\n    /**\n     * Returns the CSS styles for the component.\n     * Encapsulated using shadow DOM.\n     * @static\n     * @returns {CSSStyleSheet} - The CSS styles for the component.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * Observes `value` and `unit-display` for re-rendering.\n     * @static\n     * @returns {Array<string>} - The attributes to observe.\n     */\n    static get observedAttributes() {\n        return ['value', 'unit-display'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        this.beforeDraw();\n        if (this.formatted) this.formatted.innerText = this.formattedValue;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     * Initializes the shadow DOM.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Prepares the component before rendering.\n     * Computes the formatted value based on the input value and unit.\n     */\n    beforeDraw() {\n        if (this.value < 0) return;\n        const bitPrefixes = ['', 'kilo', 'mega', 'giga', 'tera'];\n        const bytePrefixes = ['', 'kilo', 'mega', 'giga', 'tera', 'peta'];\n        const prefix = this.unit === 'bit' ? bitPrefixes : bytePrefixes;\n        const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1)) || 0;\n        const unit = prefix[index] + this.unit;\n        const value = parseFloat((this.value / Math.pow(1000, index)).toPrecision(3));\n\n        this.formattedValue = this.localizer.formatNumber(value, {\n            style: 'unit',\n            unit: unit,\n            unitDisplay: this.unitDisplay || 'short',\n        });\n    }\n\n    /**\n     * Renders the component and returns a document fragment.\n     * The rendered structure includes a formatted value wrapped in a container\n     * with slots for additional customization.\n     * @returns {DocumentFragment} - The DOM structure for the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-format-digital');\n\n        let formatted = document.createElement('span');\n        formatted.setAttribute('part', 'formatted');\n        formatted.innerText = this.formattedValue;\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        element.appendChild(start);\n        element.appendChild(formatted);\n        element.appendChild(end);\n\n        fragment.appendChild(element);\n        this.formatted = formatted;\n\n        return fragment;\n    }\n}\n","import FormatDigital from './format-digital.element.js';\n\nexport default FormatDigital;\n\nFormatDigital.define('wje-format-digital', FormatDigital);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-format-digital.js","sources":["../packages/wje-format-digital/format-digital.element.js","../packages/wje-format-digital/format-digital.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element formats and displays digital values such as file sizes or data transfer rates.\n * `FormatDigital` is a custom web component that represents a formatted digital value with units like\n * bytes or bits. It extends from `WJElement` and utilizes the `Localizer` class for locale-aware formatting.\n * @documentation https://elements.webjet.sk/components/format-digital\n * @status stable\n * @augments {WJElement}\n * @attribute {number} value - The numeric value to format (e.g., 1024 for 1 KB).\n * @attribute {string} unit - The unit of the value (`byte` or `bit`). Defaults to `byte`.\n * @attribute {string} unitDisplay - The display style of the unit (`short`, `long`, or `narrow`). Defaults to `short`.\n * @csspart native - The native part of the component.\n * @csspart formatted - The part representing the formatted value.\n * @csspart start - Slot for content before the formatted value.\n * @csspart end - Slot for content after the formatted value.\n * @tag wje-format-digital\n */\n\nexport default class FormatDigital extends WJElement {\n    /**\n     * Creates an instance of FormatDigital.\n     * Initializes the `Localizer` for locale-specific formatting.\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the value of the digital format.\n     * This value determines the size in bytes or bits to be displayed.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Returns the value of the digital format.\n     * @returns {number} The current value of the component.\n     */\n    get value() {\n        return +this.getAttribute('value');\n    }\n\n    /**\n     * Sets the unit of the digital format.\n     * Valid values are `bit` or `byte`.\n     * @param {string} value The unit to set.\n     */\n    set unit(value) {\n        this.removeAttribute('unit');\n        if (value) {\n            this.setAttribute('unit', value);\n        }\n    }\n\n    /**\n     * Returns the unit of the digital format.\n     * Defaults to `byte` if no unit is set.\n     * @returns {string} The current unit (`bit` or `byte`).\n     */\n    get unit() {\n        return this.hasAttribute('unit') ? this.getAttribute('unit') : 'byte';\n    }\n\n    /**\n     * Sets the unit display style for the digital format.\n     * Valid values are `short`, `long`, or `narrow`.\n     * @param {string} value The unit display style to set.\n     */\n    set unitDisplay(value) {\n        this.removeAttribute('unit-display');\n        if (value) {\n            this.setAttribute('unit-display', value);\n        }\n    }\n\n    /**\n     * Returns the unit display style for the digital format.\n     * Defaults to `short` if not set.\n     * @returns {string} - The current unit display style.\n     */\n    get unitDisplay() {\n        return this.hasAttribute('unit-display') ? this.getAttribute('unit-display') : 'short';\n    }\n\n    /**\n     * The class name identifier for this component.\n     * @type {string}\n     */\n    className = 'FormatDigital';\n\n    /**\n     * Returns the CSS styles for the component.\n     * Encapsulated using shadow DOM.\n     * @static\n     * @returns {CSSStyleSheet} - The CSS styles for the component.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * Observes `value` and `unit-display` for re-rendering.\n     * @static\n     * @returns {Array<string>} - The attributes to observe.\n     */\n    static get observedAttributes() {\n        return ['value', 'unit-display'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        this.beforeDraw();\n        if (this.formatted) this.formatted.innerText = this.formattedValue;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     * Initializes the shadow DOM.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Prepares the component before rendering.\n     * Computes the formatted value based on the input value and unit.\n     */\n    beforeDraw() {\n        if (this.value < 0) return;\n        const bitPrefixes = ['', 'kilo', 'mega', 'giga', 'tera'];\n        const bytePrefixes = ['', 'kilo', 'mega', 'giga', 'tera', 'peta'];\n        const prefix = this.unit === 'bit' ? bitPrefixes : bytePrefixes;\n        const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1)) || 0;\n        const unit = prefix[index] + this.unit;\n        const value = parseFloat((this.value / Math.pow(1000, index)).toPrecision(3));\n\n        this.formattedValue = this.localizer.formatNumber(value, {\n            style: 'unit',\n            unit: unit,\n            unitDisplay: this.unitDisplay || 'short',\n        });\n    }\n\n    /**\n     * Renders the component and returns a document fragment.\n     * The rendered structure includes a formatted value wrapped in a container\n     * with slots for additional customization.\n     * @returns {DocumentFragment} - The DOM structure for the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-format-digital');\n\n        let formatted = document.createElement('span');\n        formatted.setAttribute('part', 'formatted');\n        formatted.innerText = this.formattedValue;\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        element.appendChild(start);\n        element.appendChild(formatted);\n        element.appendChild(end);\n\n        fragment.appendChild(element);\n        this.formatted = formatted;\n\n        return fragment;\n    }\n}\n","import FormatDigital from './format-digital.element.js';\n\nexport default FormatDigital;\n\nFormatDigital.define('wje-format-digital', FormatDigital);\n"],"names":[],"mappings":"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"}

package/dist/wje-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-grid.js","sources":["../packages/wje-grid/grid.element.js","../packages/wje-grid/grid.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\n\nimport styles from './scss/styles.scss?inline';\n\n/**\n * @summary The Grid class is a custom web component that extends WJElement. It is a simple grid that can hold other elements or components.\n * It provides a slot for adding child elements or components.\n * @documentation https://elements.webjet.sk/components/grid\n * @status stable\n * @augments WJElement\n * @slot - The slot for adding child elements or components.\n */\nexport default class Grid extends WJElement {\n    /**\n     * Constructor for the Grid class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Grid class.\n     * @type {string}\n     */\n    className = 'Grid';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the Grid.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Grid element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        if (this.color) this.classList.add('wje-color-' + this.color, 'wje-color');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Grid from './grid.element.js';\n\nexport default Grid;\n\nGrid.define('wje-grid', Grid);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAEzE,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;AC5DA,KAAK,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-grid.js","sources":["../packages/wje-grid/grid.element.js","../packages/wje-grid/grid.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\n\nimport styles from './scss/styles.scss?inline';\n\n/**\n * @summary The Grid class is a custom web component that extends WJElement. It is a simple grid that can hold other elements or components.\n * It provides a slot for adding child elements or components.\n * @documentation https://elements.webjet.sk/components/grid\n * @status stable\n * @augments WJElement\n * @slot - The slot for adding child elements or components.\n */\nexport default class Grid extends WJElement {\n    /**\n     * Constructor for the Grid class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Grid class.\n     * @type {string}\n     */\n    className = 'Grid';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the Grid.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Grid element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        if (this.color) this.classList.add('wje-color-' + this.color, 'wje-color');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Grid from './grid.element.js';\n\nexport default Grid;\n\nGrid.define('wje-grid', Grid);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAEzE,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;AC5DA,KAAK,OAAO,YAAY,IAAI;"}

package/dist/wje-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-header.js","sources":["../packages/wje-header/header.element.js","../packages/wje-header/header.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary `Header` is a custom web component that represents a header. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/header\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @slot default - Default slot for the header content\n * @cssproperty [--wje-header-background=var(--wje-background)] - The background of the header element.\n * @cssproperty [--wje-header-border-color=var(--wje-border-color)] - The border color of the header element.\n * @cssproperty [--wje-header-border-width=0 0 1px 0] - The border width of the header element.\n * @cssproperty [--wje-header-border-style=solid] - The border styles of the header\n * @cssproperty [--wje-header-top=0] - The position top of the header\n * @cssproperty [--wje-header-height=60px] - The height of the header element.\n * @tag wje-header\n */\nexport default class Header extends WJElement {\n    /**\n     * Creates an instance of Header.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Header';\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     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('header');\n        element.classList.add('native-header');\n        element.setAttribute('part', 'native');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Header from './header.element.js';\n\nexport default Header;\n\nHeader.define('wje-header', Header);\n"],"names":[],"mappings":";;;;;AAkBe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1C,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,QAAQ;AAC7C,YAAQ,UAAU,IAAI,eAAe;AACrC,YAAQ,aAAa,QAAQ,QAAQ;AAErC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,YAAQ,YAAY,IAAI;AACxB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;ACpEA,OAAO,OAAO,cAAc,MAAM;"}
+{"version":3,"file":"wje-header.js","sources":["../packages/wje-header/header.element.js","../packages/wje-header/header.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary `Header` is a custom web component that represents a header. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/header\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @slot default - Default slot for the header content\n * @cssproperty [--wje-header-background=var(--wje-background)] - The background of the header element.\n * @cssproperty [--wje-header-border-color=var(--wje-border-color)] - The border color of the header element.\n * @cssproperty [--wje-header-border-width=0 0 1px 0] - The border width of the header element.\n * @cssproperty [--wje-header-border-style=solid] - The border styles of the header\n * @cssproperty [--wje-header-top=0] - The position top of the header\n * @cssproperty [--wje-header-height=60px] - The height of the header element.\n * @tag wje-header\n */\nexport default class Header extends WJElement {\n    /**\n     * Creates an instance of Header.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Header';\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     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('header');\n        element.classList.add('native-header');\n        element.setAttribute('part', 'native');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Header from './header.element.js';\n\nexport default Header;\n\nHeader.define('wje-header', Header);\n"],"names":[],"mappings":";;;;;AAkBe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1C,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,QAAQ;AAC7C,YAAQ,UAAU,IAAI,eAAe;AACrC,YAAQ,aAAa,QAAQ,QAAQ;AAErC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,YAAQ,YAAY,IAAI;AACxB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;ACpEA,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-icon-library.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-icon-library.js","sources":["../packages/wje-icon/service/library.js"],"sourcesContent":["import { getBasePath } from \"../../utils/base-path.js\";\n\nlet registry = [];\n\nregisterIconLibrary(\"default\", {\n  resolver: (name, style) => getBasePath(`assets/img/icons/${style}/${name}.svg`)\n});\n\nexport function getIconLibrary(name) {\n  return registry.find(lib => lib.name === name);\n}\n\nexport function registerIconLibrary(name, options) {\n  unregisterIconLibrary(name);\n  registry.push({\n    name,\n    resolver: options.resolver,\n  });\n}\n\nexport function unregisterIconLibrary(name) {\n  registry = registry.filter(lib => lib.name !== name);\n}"],"names":[],"mappings":";AAEA,IAAI,WAAW,CAAE;AAEjB,oBAAoB,WAAW;AAAA,EAC7B,UAAU,CAAC,MAAM,UAAU,YAAY,oBAAoB,KAAK,IAAI,IAAI,MAAM;AAChF,CAAC;AAEM,SAAS,eAAe,MAAM;AACnC,SAAO,SAAS,KAAK,SAAO,IAAI,SAAS,IAAI;AAC/C;AAEO,SAAS,oBAAoB,MAAM,SAAS;AACjD,wBAAsB,IAAI;AAC1B,WAAS,KAAK;AAAA,IACZ;AAAA,IACA,UAAU,QAAQ;AAAA,EACtB,CAAG;AACH;AAEO,SAAS,sBAAsB,MAAM;AAC1C,aAAW,SAAS,OAAO,SAAO,IAAI,SAAS,IAAI;AACrD;"}
+{"version":3,"file":"wje-icon-library.js","sources":["../packages/wje-icon/service/library.js"],"sourcesContent":["import { getBasePath } from \"../../utils/base-path.js\";\n\nlet registry = [];\n\nregisterIconLibrary(\"default\", {\n  resolver: (name, style) => getBasePath(`assets/img/icons/${style}/${name}.svg`)\n});\n\nexport function getIconLibrary(name) {\n  return registry.find(lib => lib.name === name);\n}\n\nexport function registerIconLibrary(name, options) {\n  unregisterIconLibrary(name);\n  registry.push({\n    name,\n    resolver: options.resolver,\n  });\n}\n\nexport function unregisterIconLibrary(name) {\n  registry = registry.filter(lib => lib.name !== name);\n}"],"names":[],"mappings":";AAEA,IAAI,WAAW,CAAA;AAEf,oBAAoB,WAAW;AAAA,EAC7B,UAAU,CAAC,MAAM,UAAU,YAAY,oBAAoB,KAAK,IAAI,IAAI,MAAM;AAChF,CAAC;AAEM,SAAS,eAAe,MAAM;AACnC,SAAO,SAAS,KAAK,SAAO,IAAI,SAAS,IAAI;AAC/C;AAEO,SAAS,oBAAoB,MAAM,SAAS;AACjD,wBAAsB,IAAI;AAC1B,WAAS,KAAK;AAAA,IACZ;AAAA,IACA,UAAU,QAAQ;AAAA,EACtB,CAAG;AACH;AAEO,SAAS,sBAAsB,MAAM;AAC1C,aAAW,SAAS,OAAO,SAAO,IAAI,SAAS,IAAI;AACrD;"}

package/dist/wje-icon-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { getBasePath } from \"../utils/base-path.js\";\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n */\n\nexport default class IconPicker extends WJElement {\n    /**\n     * Creates an instance of IconPicker.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the IconPicker component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-input': Input,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-tooltip': Tooltip\n    };\n\n    /**\n     * Setter for the markerPosition property.\n     * @param {any} value The value to set.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Getter for the markerPosition property.\n     * @returns {any} size The value of the markerPosition property.\n     */\n    get size() {\n        return this.getAttribute('size') || 60;\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set type(value) {\n        this.setAttribute('type', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get type() {\n        return this.getAttribute('type');\n    }\n\n    className = 'IconPicker';\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        this.syncAria();\n    }\n\n    /**\n     * Prepares data before the draw operation by fetching tags, transforming objects, and creating an index.\n     * @returns {Promise<void>} Resolves when data preparation is complete.\n     */\n    async beforeDraw() {\n        this.tags = Object.values(await this.getTags());\n\n        this.transformedObjects = this.convertObject(this.tags);\n\n        this.index = this.transformedObjects.map((item) => ({\n            ...item,\n            searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n        }));\n    }\n\n    /**\n     * Draws and initializes the native color picker component on the DOM.\n     * This method creates and appends the necessary elements, including input and infinite scroll components,\n     * and sets their attributes and event listeners. It also provides custom data handling for infinite scrolling\n     * and manages the way icons are displayed based on input.\n     * @returns {DocumentFragment} A document fragment containing the fully constructed color picker component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        if (this.hasAttribute('icon') && this.icon) {\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            if(this.type === 'filled')\n                icon.setAttribute('filled', '');\n\n            this.selectIcon(icon);\n        }\n\n        // PICKER\n        let picker = document.createElement('div');\n        picker.classList.add('picker');\n\n        let input = document.createElement('wje-input');\n        input.classList.add('input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('placeholder', 'type to filter...');\n        input.setAttribute('clearable', '');\n        input.addEventListener('wje-input:input', this.debounce(this.searchIcon.bind(this), 300));\n        input.addEventListener('wje-input:clear', this.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n        infiniteScroll.setAttribute('url', getBasePath('assets/tags.json'));\n        infiniteScroll.setAttribute('placement', '.icon-items');\n        infiniteScroll.setAttribute('size', this.size);\n        infiniteScroll.setAttribute('height', '223px');\n        infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n        // APPEND\n        picker.append(input, infiniteScroll);\n\n        native.append(picker);\n\n        fragment.append(native);\n\n        this.input = input;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\n        this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            return {\n                data: this.transformedObjects.slice(page * this.size, page * this.size + this.size),\n                page: page,\n                size: this.size,\n                totalPages: Math.round(this.transformedObjects.length / this.size),\n            };\n        };\n\n        return fragment;\n    }\n\n    /**\n     * Executes actions that occur after the component finishes its draw phase. Sets up event listeners for input clear\n     * and infinite scroll item clicks, resets initialization state, and rebinds scroll-related events.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        this.syncAria();\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.clearIconsContainer(); // clear icons container\n            this.infiniteScroll.scrollEvent(); // bind scroll event\n            this.infiniteScroll.loadPages(0); // load first page\n        });\n\n        this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n\n            this.selectIcon(e.detail.context.querySelector('wje-icon'));\n        });\n\n        this.init = false;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'group' });\n        }\n\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n        if (!ariaLabel && label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Handles the selection of an icon from a given input element and updates the relevant properties and events.\n     * @function selectIcon\n     * @param {HTMLElement} icon The icon element that was selected. It must have a 'name' attribute and may optionally have a 'filled' attribute.\n     * The function performs the following actions:\n     * - Retrieves the name of the selected icon from its 'name' attribute.\n     * - Determines the style type ('filled' or 'outline') based on the presence of the 'filled' attribute.\n     * - Searches for a matching object in the `transformedObjects` array based on name and style.\n     * - Creates a new `wje-icon` element and assigns its attributes based on the selected icon's properties.\n     * - Updates the selected object's properties and assigns it to the `value`, `icon`, and `type` properties of the class.\n     * - Dispatches a custom event (`wje-icon-picker:select`) to signal a change in the selected icon.\n     */\n    selectIcon = (icon) => {\n        let name = icon.getAttribute('name');\n        let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n        let uniqueObject = this.transformedObjects.find(\n          (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n        );\n\n        const iconElement = document.createElement('wje-icon');\n        iconElement.setAttribute('name', name);\n\n        if (uniqueObject.styles?.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n        uniqueObject.icon = iconElement;\n\n        this.value = uniqueObject;\n        this.icon = uniqueObject.name;\n        this.type = uniqueObject.styles?.hasOwnProperty('filled') ? 'filled' : 'outline';\n\n        event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n    }\n\n    /**\n     * Initializes the component.\n     */\n    initial() {\n        this.infiniteScroll.scrollEvent();\n    }\n\n    /**\n     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n     * The function processes an input object containing tags, extracts its values,\n     * and for each tag that has both `filled` and `outline` styles, splits them into\n     * two separate objects. Tags without `filled` styles remain unchanged.\n     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n     * @param {object} [tags[].styles.outline] The outline style object, if present.\n     * @param {object} [tags[].styles.filled] The filled style object, if present.\n     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n     * @example\n     * const tags = {\n     *     hourglass: {\n     *         styles: {\n     *             outline: { ... },\n     *             filled: { ... },\n     *         }\n     *     },\n     *     clock: {\n     *         styles: {\n     *             outline: { ... },\n     *         }\n     *     }\n     * };\n     * const result = convertObject(tags);\n     * console.log(result);\n     * // [\n     * //   { styles: { outline: { ... } } },\n     * //   { styles: { filled: { ... } } },\n     * //   { styles: { outline: { ... } } }\n     * // ]\n     */\n    convertObject = (tags = {}) => {\n        let originalObjects = Object.values(tags);\n        let transformedObjects = [];\n        for (let i = 0; i < originalObjects.length; i++) {\n            const obj = originalObjects[i];\n            if (obj.styles.filled) {\n                transformedObjects.push(\n                    { ...obj, styles: { outline: obj.styles.outline } },\n                    { ...obj, styles: { filled: obj.styles.filled } }\n                );\n            } else {\n                transformedObjects.push(obj);\n            }\n        }\n\n        return transformedObjects;\n    };\n\n    /**\n     * Converts an icon data object into an HTML element structure.\n     * This function creates a styled HTML element that represents an icon with a tooltip.\n     * The tooltip displays the name of the icon, and the icon itself is styled based on\n     * whether it uses the `filled` style.\n     * @param {object} data The icon data object.\n     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n     * @example\n     * const iconData = {\n     *     name: \"hourglass\",\n     *     styles: {\n     *         filled: { ... }\n     *     }\n     * };\n     * const htmlElement = dataToHtml(iconData);\n     * document.body.appendChild(htmlElement);\n     *\n     * // The resulting structure:\n     * // <div class=\"icon-item\">\n     * //   <wje-tooltip content=\"hourglass\">\n     * //     <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon></wje-icon>\n     * //   </wje-tooltip>\n     * // </div>\n     */\n    dataToHtml = (data) => {\n        let iconItem = document.createElement('div');\n        iconItem.classList.add('icon-item');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', data.name);\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', data.name);\n        icon.setAttribute('size', 'large');\n        if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n        tooltip.appendChild(icon);\n        iconItem.appendChild(tooltip);\n\n        return iconItem;\n    };\n\n    /**\n     * Gets the tags.\n     * @returns {Promise<Array>} The tags of the component.\n     */\n    async getTags() {\n        const response = await fetch(getBasePath('assets/tags.json'));\n        return response.json();\n    }\n\n    /**\n     * Called when the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.init = false;\n    }\n\n    /**\n     * Searches icons based on user input.\n     * This method handles the input event and filters the available icons based on the provided search string.\n     * The filtering is performed on an index that combines icon names and their tags.\n     * The results are then adjusted for infinite scrolling.\n     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n     */\n    searchIcon = (e) => {\n        const query = !e.detail?.value ? \"\" : e.detail.value.toLowerCase();\n        const results = this.index.filter((item) => item.searchText.includes(query));\n\n        if (results.length === 0) {\n            this.clearIconsContainer();\n\n            const noResultsDiv = document.createElement('div');\n            noResultsDiv.setAttribute('part', 'no-results');\n            noResultsDiv.classList.add('no-results');\n            noResultsDiv.textContent = 'No icons found';\n\n            this.infiniteScroll.querySelector('.icon-items').append(noResultsDiv);\n\n            return;\n        }\n\n        this.infiniteScroll.unScrollEvent();\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            const data = results.slice(page * this.size, page * this.size + this.size);\n\n            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.infiniteScroll.reset();\n        this.infiniteScroll.scrollEvent();\n        this.infiniteScroll.loadPages(0);\n    }\n\n    /**\n     * Clears the icons container.\n     */\n    clearIconsContainer() {\n        this.context.querySelector('.icon-items').innerHTML = '';\n    }\n\n    /**\n     * Creates a debounced version of the provided function that delays its execution\n     * until after the specified delay has passed since the last time it was invoked.\n     * @param {Function} fn The function to debounce.\n     * @param {number} delay The delay duration in milliseconds.\n     * @returns {Function} A new debounced function that delays the execution of the original function.\n     */\n    debounce(fn, delay) {\n        let timeout;\n        return (...args) => {\n            clearTimeout(timeout);\n            timeout = setTimeout(() => fn(...args), delay);\n        };\n    }\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { getBasePath } from \"../utils/base-path.js\";\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n */\n\nexport default class IconPicker extends WJElement {\n    /**\n     * Creates an instance of IconPicker.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the IconPicker component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-input': Input,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-tooltip': Tooltip\n    };\n\n    /**\n     * Setter for the markerPosition property.\n     * @param {any} value The value to set.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Getter for the markerPosition property.\n     * @returns {any} size The value of the markerPosition property.\n     */\n    get size() {\n        return this.getAttribute('size') || 60;\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set type(value) {\n        this.setAttribute('type', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get type() {\n        return this.getAttribute('type');\n    }\n\n    className = 'IconPicker';\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        this.syncAria();\n    }\n\n    /**\n     * Prepares data before the draw operation by fetching tags, transforming objects, and creating an index.\n     * @returns {Promise<void>} Resolves when data preparation is complete.\n     */\n    async beforeDraw() {\n        this.tags = Object.values(await this.getTags());\n\n        this.transformedObjects = this.convertObject(this.tags);\n\n        this.index = this.transformedObjects.map((item) => ({\n            ...item,\n            searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n        }));\n    }\n\n    /**\n     * Draws and initializes the native color picker component on the DOM.\n     * This method creates and appends the necessary elements, including input and infinite scroll components,\n     * and sets their attributes and event listeners. It also provides custom data handling for infinite scrolling\n     * and manages the way icons are displayed based on input.\n     * @returns {DocumentFragment} A document fragment containing the fully constructed color picker component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        if (this.hasAttribute('icon') && this.icon) {\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            if(this.type === 'filled')\n                icon.setAttribute('filled', '');\n\n            this.selectIcon(icon);\n        }\n\n        // PICKER\n        let picker = document.createElement('div');\n        picker.classList.add('picker');\n\n        let input = document.createElement('wje-input');\n        input.classList.add('input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('placeholder', 'type to filter...');\n        input.setAttribute('clearable', '');\n        input.addEventListener('wje-input:input', this.debounce(this.searchIcon.bind(this), 300));\n        input.addEventListener('wje-input:clear', this.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n        infiniteScroll.setAttribute('url', getBasePath('assets/tags.json'));\n        infiniteScroll.setAttribute('placement', '.icon-items');\n        infiniteScroll.setAttribute('size', this.size);\n        infiniteScroll.setAttribute('height', '223px');\n        infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n        // APPEND\n        picker.append(input, infiniteScroll);\n\n        native.append(picker);\n\n        fragment.append(native);\n\n        this.input = input;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\n        this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            return {\n                data: this.transformedObjects.slice(page * this.size, page * this.size + this.size),\n                page: page,\n                size: this.size,\n                totalPages: Math.round(this.transformedObjects.length / this.size),\n            };\n        };\n\n        return fragment;\n    }\n\n    /**\n     * Executes actions that occur after the component finishes its draw phase. Sets up event listeners for input clear\n     * and infinite scroll item clicks, resets initialization state, and rebinds scroll-related events.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        this.syncAria();\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.clearIconsContainer(); // clear icons container\n            this.infiniteScroll.scrollEvent(); // bind scroll event\n            this.infiniteScroll.loadPages(0); // load first page\n        });\n\n        this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n\n            this.selectIcon(e.detail.context.querySelector('wje-icon'));\n        });\n\n        this.init = false;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'group' });\n        }\n\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n        if (!ariaLabel && label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Handles the selection of an icon from a given input element and updates the relevant properties and events.\n     * @function selectIcon\n     * @param {HTMLElement} icon The icon element that was selected. It must have a 'name' attribute and may optionally have a 'filled' attribute.\n     * The function performs the following actions:\n     * - Retrieves the name of the selected icon from its 'name' attribute.\n     * - Determines the style type ('filled' or 'outline') based on the presence of the 'filled' attribute.\n     * - Searches for a matching object in the `transformedObjects` array based on name and style.\n     * - Creates a new `wje-icon` element and assigns its attributes based on the selected icon's properties.\n     * - Updates the selected object's properties and assigns it to the `value`, `icon`, and `type` properties of the class.\n     * - Dispatches a custom event (`wje-icon-picker:select`) to signal a change in the selected icon.\n     */\n    selectIcon = (icon) => {\n        let name = icon.getAttribute('name');\n        let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n        let uniqueObject = this.transformedObjects.find(\n          (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n        );\n\n        const iconElement = document.createElement('wje-icon');\n        iconElement.setAttribute('name', name);\n\n        if (uniqueObject.styles?.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n        uniqueObject.icon = iconElement;\n\n        this.value = uniqueObject;\n        this.icon = uniqueObject.name;\n        this.type = uniqueObject.styles?.hasOwnProperty('filled') ? 'filled' : 'outline';\n\n        event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n    }\n\n    /**\n     * Initializes the component.\n     */\n    initial() {\n        this.infiniteScroll.scrollEvent();\n    }\n\n    /**\n     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n     * The function processes an input object containing tags, extracts its values,\n     * and for each tag that has both `filled` and `outline` styles, splits them into\n     * two separate objects. Tags without `filled` styles remain unchanged.\n     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n     * @param {object} [tags[].styles.outline] The outline style object, if present.\n     * @param {object} [tags[].styles.filled] The filled style object, if present.\n     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n     * @example\n     * const tags = {\n     *     hourglass: {\n     *         styles: {\n     *             outline: { ... },\n     *             filled: { ... },\n     *         }\n     *     },\n     *     clock: {\n     *         styles: {\n     *             outline: { ... },\n     *         }\n     *     }\n     * };\n     * const result = convertObject(tags);\n     * console.log(result);\n     * // [\n     * //   { styles: { outline: { ... } } },\n     * //   { styles: { filled: { ... } } },\n     * //   { styles: { outline: { ... } } }\n     * // ]\n     */\n    convertObject = (tags = {}) => {\n        let originalObjects = Object.values(tags);\n        let transformedObjects = [];\n        for (let i = 0; i < originalObjects.length; i++) {\n            const obj = originalObjects[i];\n            if (obj.styles.filled) {\n                transformedObjects.push(\n                    { ...obj, styles: { outline: obj.styles.outline } },\n                    { ...obj, styles: { filled: obj.styles.filled } }\n                );\n            } else {\n                transformedObjects.push(obj);\n            }\n        }\n\n        return transformedObjects;\n    };\n\n    /**\n     * Converts an icon data object into an HTML element structure.\n     * This function creates a styled HTML element that represents an icon with a tooltip.\n     * The tooltip displays the name of the icon, and the icon itself is styled based on\n     * whether it uses the `filled` style.\n     * @param {object} data The icon data object.\n     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n     * @example\n     * const iconData = {\n     *     name: \"hourglass\",\n     *     styles: {\n     *         filled: { ... }\n     *     }\n     * };\n     * const htmlElement = dataToHtml(iconData);\n     * document.body.appendChild(htmlElement);\n     *\n     * // The resulting structure:\n     * // <div class=\"icon-item\">\n     * //   <wje-tooltip content=\"hourglass\">\n     * //     <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon></wje-icon>\n     * //   </wje-tooltip>\n     * // </div>\n     */\n    dataToHtml = (data) => {\n        let iconItem = document.createElement('div');\n        iconItem.classList.add('icon-item');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', data.name);\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', data.name);\n        icon.setAttribute('size', 'large');\n        if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n        tooltip.appendChild(icon);\n        iconItem.appendChild(tooltip);\n\n        return iconItem;\n    };\n\n    /**\n     * Gets the tags.\n     * @returns {Promise<Array>} The tags of the component.\n     */\n    async getTags() {\n        const response = await fetch(getBasePath('assets/tags.json'));\n        return response.json();\n    }\n\n    /**\n     * Called when the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.init = false;\n    }\n\n    /**\n     * Searches icons based on user input.\n     * This method handles the input event and filters the available icons based on the provided search string.\n     * The filtering is performed on an index that combines icon names and their tags.\n     * The results are then adjusted for infinite scrolling.\n     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n     */\n    searchIcon = (e) => {\n        const query = !e.detail?.value ? \"\" : e.detail.value.toLowerCase();\n        const results = this.index.filter((item) => item.searchText.includes(query));\n\n        if (results.length === 0) {\n            this.clearIconsContainer();\n\n            const noResultsDiv = document.createElement('div');\n            noResultsDiv.setAttribute('part', 'no-results');\n            noResultsDiv.classList.add('no-results');\n            noResultsDiv.textContent = 'No icons found';\n\n            this.infiniteScroll.querySelector('.icon-items').append(noResultsDiv);\n\n            return;\n        }\n\n        this.infiniteScroll.unScrollEvent();\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            const data = results.slice(page * this.size, page * this.size + this.size);\n\n            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.infiniteScroll.reset();\n        this.infiniteScroll.scrollEvent();\n        this.infiniteScroll.loadPages(0);\n    }\n\n    /**\n     * Clears the icons container.\n     */\n    clearIconsContainer() {\n        this.context.querySelector('.icon-items').innerHTML = '';\n    }\n\n    /**\n     * Creates a debounced version of the provided function that delays its execution\n     * until after the specified delay has passed since the last time it was invoked.\n     * @param {Function} fn The function to debounce.\n     * @param {number} delay The delay duration in milliseconds.\n     * @returns {Function} A new debounced function that delays the execution of the original function.\n     */\n    debounce(fn, delay) {\n        let timeout;\n        return (...args) => {\n            clearTimeout(timeout);\n            timeout = setTimeout(() => fn(...args), delay);\n        };\n    }\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":[],"mappings":"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"}

package/dist/wje-img-comparer.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-img-comparer.js","sources":["../packages/wje-img-comparer/service/service.js","../packages/wje-img-comparer/img-comparer.element.js","../packages/wje-img-comparer/img-comparer.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\n * It extends from `WJElement` and uses the `Icon` component.\n * @documentation https://elements.webjet.sk/components/img-comparer\n * @status stable\n * @augments {WJElement}\n * @slot before - The before image slot.\n * @slot after - The after image slot.\n * @csspart divider - The divider part.\n * @cssproperty [--wje-img-compare-divider-area=12px] - The area of the divider. This is the size of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-background=white] - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs.\n * @cssproperty [--wje-img-compare-divider-size=2px] - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-left=50%] - The left position of the divider. This is the initial position of the divider.\n * @cssproperty [--wje-img-compare-position=50%] - The position of the divider. This is the position of the divider.\n * @cssproperty [--wje-img-compare-clip-path=inset(0 calc(100% - var(--wje-img-compare-position)) 0 0)] - The clip path of the divider. This is the clip path of the divider.\n * @tag wje-img-comparer\n */\nexport default class ImgComparer extends WJElement {\n    /**\n     * Creates an instance of ImgComparer.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the ImgComparer component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    className = 'ImgComparer';\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        this.setAriaState({ role: 'group' });\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let beforeElement = document.createElement('div');\n        beforeElement.classList.add('wje-before');\n\n        let before = document.createElement('slot');\n        before.setAttribute('name', 'before');\n\n        let afterElement = document.createElement('div');\n        afterElement.classList.add('wje-after');\n\n        let after = document.createElement('slot');\n        after.setAttribute('name', 'after');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'arrow-bar-both');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.setAttribute('role', 'separator');\n        dividerElement.setAttribute('tabindex', '0');\n        dividerElement.setAttribute('aria-orientation', 'horizontal');\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        beforeElement.appendChild(before);\n        afterElement.appendChild(after);\n        dividerElement.appendChild(icon);\n\n        native.appendChild(beforeElement);\n        native.appendChild(afterElement);\n        native.appendChild(dividerElement);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event.\n     */\n    handleDrag = (e) => {\n        const { width } = this.native.getBoundingClientRect();\n\n        drag(this, {\n            onMove: (x) => {\n                let value = (x / width) * 100;\n                this.position = parseFloat(this.clamp(value, 0, 100).toFixed(2));\n                this.native.style.setProperty('--wje-img-compare-divider-left', this.position + '%');\n                this.native.style.setProperty('--wje-img-compare-clip-path', `inset(0 ${100 - this.position}% 0 0)`);\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Clamps a number between a minimum and maximum value.\n     * @param {number} num The number to clamp.\n     * @param {number} min The minimum value.\n     * @param {number} max The maximum value.\n     * @returns {number} The clamped number.\n     */\n    clamp = (num, min, max) => Math.min(Math.max(num, min), max);\n}\n","import ImgComparer from './img-comparer.element.js';\n\nexport default ImgComparer;\n\nImgComparer.define('wje-img-comparer', ImgComparer);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-img-comparer.js","sources":["../packages/wje-img-comparer/service/service.js","../packages/wje-img-comparer/img-comparer.element.js","../packages/wje-img-comparer/img-comparer.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\n * It extends from `WJElement` and uses the `Icon` component.\n * @documentation https://elements.webjet.sk/components/img-comparer\n * @status stable\n * @augments {WJElement}\n * @slot before - The before image slot.\n * @slot after - The after image slot.\n * @csspart divider - The divider part.\n * @cssproperty [--wje-img-compare-divider-area=12px] - The area of the divider. This is the size of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-background=white] - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs.\n * @cssproperty [--wje-img-compare-divider-size=2px] - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-left=50%] - The left position of the divider. This is the initial position of the divider.\n * @cssproperty [--wje-img-compare-position=50%] - The position of the divider. This is the position of the divider.\n * @cssproperty [--wje-img-compare-clip-path=inset(0 calc(100% - var(--wje-img-compare-position)) 0 0)] - The clip path of the divider. This is the clip path of the divider.\n * @tag wje-img-comparer\n */\nexport default class ImgComparer extends WJElement {\n    /**\n     * Creates an instance of ImgComparer.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the ImgComparer component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    className = 'ImgComparer';\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        this.setAriaState({ role: 'group' });\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let beforeElement = document.createElement('div');\n        beforeElement.classList.add('wje-before');\n\n        let before = document.createElement('slot');\n        before.setAttribute('name', 'before');\n\n        let afterElement = document.createElement('div');\n        afterElement.classList.add('wje-after');\n\n        let after = document.createElement('slot');\n        after.setAttribute('name', 'after');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'arrow-bar-both');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.setAttribute('role', 'separator');\n        dividerElement.setAttribute('tabindex', '0');\n        dividerElement.setAttribute('aria-orientation', 'horizontal');\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        beforeElement.appendChild(before);\n        afterElement.appendChild(after);\n        dividerElement.appendChild(icon);\n\n        native.appendChild(beforeElement);\n        native.appendChild(afterElement);\n        native.appendChild(dividerElement);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event.\n     */\n    handleDrag = (e) => {\n        const { width } = this.native.getBoundingClientRect();\n\n        drag(this, {\n            onMove: (x) => {\n                let value = (x / width) * 100;\n                this.position = parseFloat(this.clamp(value, 0, 100).toFixed(2));\n                this.native.style.setProperty('--wje-img-compare-divider-left', this.position + '%');\n                this.native.style.setProperty('--wje-img-compare-clip-path', `inset(0 ${100 - this.position}% 0 0)`);\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Clamps a number between a minimum and maximum value.\n     * @param {number} num The number to clamp.\n     * @param {number} min The minimum value.\n     * @param {number} max The maximum value.\n     * @returns {number} The clamped number.\n     */\n    clamp = (num, min, max) => Math.min(Math.max(num, min), max);\n}\n","import ImgComparer from './img-comparer.element.js';\n\nexport default ImgComparer;\n\nImgComparer.define('wje-img-comparer', ImgComparer);\n"],"names":[],"mappings":"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"}