wj-elements 0.1.141 → 0.1.143

package/dist/dark.css

@@ -11,8 +11,8 @@
         'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
     --wje-font-family-secondary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
         'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    --wje-force-mac-font-family: -apple-system, BlinkMacSystemFont, 'Inter UI', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --wje-force-mac-font-family: -apple-system, BlinkMacSystemFont, 'Inter UI', 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 
     --wje-border-size: 0px;
     --wje-border-style: solid;
@@ -170,6 +170,10 @@
     --wje-item-background: transparent;
     --wje-item-background-hover: var(--wje-color-contrast-3);
 
+    /* Level - Indicator */
+    --wje-level-indicator-color: var(--wje-color-contrast-4);
+    --wje-level-indicator-color-active: var(--wje-color-contrast-6);
+
     /* List */
     --wje-list-background: var(--wje-background);
 

package/dist/infinite-scroll.element-XVJukzjy.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll.element-XVJukzjy.js","sources":["../packages/wje-infinite-scroll/infinite-scroll.element.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InfiniteScroll` is a custom web component that represents an infinite scroll.\n * It extends from `WJElement`.\n * @summary This element allows users to scroll through a potentially infinite amount of content.\n * @documentation https://elements.webjet.sk/components/infinite-scroll\n * @status stable\n * @augments {WJElement}\n * @csspart loader - The loader part of the infinite scroll.\n * @slot - The default slot for the infinite scroll.\n * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.\n * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.\n * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.\n * @tag wje-infinite-scroll\n */\n\nexport default class InfiniteScroll extends WJElement {\n    /**\n     * Creates an instance of InfiniteScroll.\n     */\n    constructor() {\n        super();\n\n        this.totalPages = 0;\n        this.isLoading = [];\n        this._response = {};\n        this.iterate = null;\n        this._infiniteScrollTemplate = null;\n        this._abortController = new AbortController();\n        this._signal = this._abortController.signal;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set infiniteScrollTemplate(value) {\n        this._infiniteScrollTemplate = value;\n    }\n\n    /**\n     * Getter for the infiniteScrollTemplate property.\n     * @returns {null}\n     */\n    get infiniteScrollTemplate() {\n        return this._infiniteScrollTemplate;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set response(value) {\n        this._response = value;\n    }\n\n    /**\n     * Getter for the response property.\n     * @returns {*|{}}\n     */\n    get response() {\n        return this._response;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set objectName(value) {\n        this.setAttribute('object-name', value);\n    }\n\n    get objectName() {\n        return this.getAttribute('object-name') ?? 'data';\n    }\n\n    className = 'InfiniteScroll';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     */\n    beforeDraw() {\n        this.iterate = this.querySelector('[iterate]');\n        this.infiniteScrollTemplate = this.iterate?.outerHTML;\n        this.iterate?.remove(); // remove template\n\n        this.setAttribute('style', 'height: ' + this.height);\n\n        // if this._loading is not fulfilled then cancel the promise\n        if (this._signal) {\n            this._abortController.abort();\n            this._abortController = new AbortController();\n            this._signal = this._abortController.signal;\n        }\n    }\n\n    /**\n     * Draws the component and returns a document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let slot = document.createElement('slot');\n\n        let ending = document.createElement('slot');\n        ending.setAttribute('name', 'ending');\n\n        if (WjElementUtils.hasSlot(this, 'loader')) {\n            let loading = document.createElement('div');\n            loading.classList.add('loading');\n\n            let loader = document.createElement('slot');\n            loader.setAttribute('name', 'loader');\n\n            loading.appendChild(loader);\n\n            this.loadingEl = loading;\n\n            fragment.appendChild(loading);\n        }\n\n        native.appendChild(slot);\n        native.appendChild(ending);\n\n        fragment.appendChild(native);\n\n        this.endingEl = ending;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    async afterDraw() {\n        this.queryParams = this.queryParams || '';\n        this.size = +this.size || 10;\n        this.currentPage = 0;\n\n        this.scrollEvent();\n        this._loading = this.loadPages(this.currentPage);\n        await this._loading;\n    }\n\n    /**\n     * Adds the scroll event listener.\n     */\n    scrollEvent = () => {\n        this.addEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * Removes the scroll event listener.\n     */\n    unScrollEvent = () => {\n        this.removeEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * Handles the scroll event.\n     * @param {Event} e The event.\n     */\n    onScroll = (e) => {\n        const { scrollTop, scrollHeight, clientHeight } = e.target;\n\n        if (\n            scrollTop + clientHeight >= scrollHeight - 300 &&\n            this.currentPage <= this.totalPages &&\n            this.isLoading.includes(this.currentPage)\n        ) {\n            this.currentPage++;\n            this._loading = this.loadPages(this.currentPage);\n        }\n    };\n\n    /**\n     * Fetches the pages from the server.\n     * @param {number} page The page number.\n     * @returns {Promise<object>} The response from the server.\n     */\n    async getPages(page) {\n        let hasParams = this.url.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`,\n            {\n                signal: this._signal,\n            }\n        );\n\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Hides the loader.\n     */\n    hideLoader() {\n        this?.loadingEl?.classList.remove('show');\n    }\n\n    /**\n     * Shows the loader.\n     */\n    showLoader() {\n        this?.loadingEl?.classList.add('show');\n    }\n\n    /**\n     * Checks if there are more pages to load.\n     * @param {number} page The page number.\n     * @returns {boolean} Whether there are more pages to load.\n     */\n    hasMorePages(page) {\n        return this.totalPages === 0 || page < this.totalPages;\n    }\n\n    /**\n     * Loads the pages.\n     * @param {number} page The page number.\n     */\n    async loadPages(page) {\n        this.showLoader();\n        try {\n            if (this.hasMorePages(page)) {\n                let response;\n                this.parser = new DOMParser();\n\n                if (typeof this.setCustomData === 'function') {\n                    response = await this.setCustomData(page, this._signal);\n                } else {\n                    response = await this.getPages(page);\n                }\n\n                this.totalPages = response?.totalPages;\n                this.currentPage = page;\n\n                this.placementObj = this;\n\n                // if there is a \"container\" attribute, find the element\n                if (this.hasAttribute('placement')) this.placementObj = this.querySelector(this.placement);\n\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:load', response);\n\n                this.response = response;\n\n                this.customForeach(this.objectName ? response[this.objectName] : response);\n\n                this.isLoading.push(page);\n            } else {\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:complete');\n                this.endingEl.classList.add('show');\n            }\n        } catch (error) {\n            console.log(error);\n        } finally {\n            this.hideLoader();\n        }\n    }\n\n    /**\n     * Sets the custom data.\n     *\n     */\n    dataToHtml = (item) => {\n        let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);\n        let doc = this.parser.parseFromString(interpolateItem, 'text/html');\n        let element = doc.activeElement.firstElementChild;\n        console.log(\"IS Element:\", element);\n        return element;\n    };\n\n    customForeach = (data) => {\n        data.forEach((item) => {\n            let element = this.dataToHtml(item);\n            event.addListener(element, 'click', 'wje-infinite-scroll:click-item', null);\n\n            this.placementObj.insertAdjacentElement('beforeend', element);\n        });\n    };\n\n    /**\n     * Interpolates the string.\n     * @param template\n     * @param {object} params The parameters for interpolation.\n     * @returns {string} The interpolated string.\n     */\n    interpolate = (template, params) => {\n        let keys = template.match(/\\{{.*?\\}}/g);\n\n        if (keys) {\n            for (let key of keys) {\n                let cleanKey = key.replace('{{', '').replace('}}', '');\n                let val = '';\n                cleanKey.split('.').forEach((k) => {\n                    val = val === '' ? params[k] : val[k];\n                });\n\n                template = template.replace(key, val);\n            }\n        }\n        return template;\n    };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"infinite-scroll.element-XVJukzjy.js","sources":["../packages/wje-infinite-scroll/infinite-scroll.element.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InfiniteScroll` is a custom web component that represents an infinite scroll.\n * It extends from `WJElement`.\n * @summary This element allows users to scroll through a potentially infinite amount of content.\n * @documentation https://elements.webjet.sk/components/infinite-scroll\n * @status stable\n * @augments {WJElement}\n * @csspart loader - The loader part of the infinite scroll.\n * @slot - The default slot for the infinite scroll.\n * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.\n * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.\n * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.\n * @tag wje-infinite-scroll\n */\n\nexport default class InfiniteScroll extends WJElement {\n    /**\n     * Creates an instance of InfiniteScroll.\n     */\n    constructor() {\n        super();\n\n        this.totalPages = 0;\n        this.isLoading = [];\n        this._response = {};\n        this.iterate = null;\n        this._infiniteScrollTemplate = null;\n        this._abortController = new AbortController();\n        this._signal = this._abortController.signal;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set infiniteScrollTemplate(value) {\n        this._infiniteScrollTemplate = value;\n    }\n\n    /**\n     * Getter for the infiniteScrollTemplate property.\n     * @returns {null}\n     */\n    get infiniteScrollTemplate() {\n        return this._infiniteScrollTemplate;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set response(value) {\n        this._response = value;\n    }\n\n    /**\n     * Getter for the response property.\n     * @returns {*|{}}\n     */\n    get response() {\n        return this._response;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set objectName(value) {\n        this.setAttribute('object-name', value);\n    }\n\n    get objectName() {\n        return this.getAttribute('object-name') ?? 'data';\n    }\n\n    className = 'InfiniteScroll';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     */\n    beforeDraw() {\n        this.iterate = this.querySelector('[iterate]');\n        this.infiniteScrollTemplate = this.iterate?.outerHTML;\n        this.iterate?.remove(); // remove template\n\n        this.setAttribute('style', 'height: ' + this.height);\n\n        // if this._loading is not fulfilled then cancel the promise\n        if (this._signal) {\n            this._abortController.abort();\n            this._abortController = new AbortController();\n            this._signal = this._abortController.signal;\n        }\n    }\n\n    /**\n     * Draws the component and returns a document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let slot = document.createElement('slot');\n\n        let ending = document.createElement('slot');\n        ending.setAttribute('name', 'ending');\n\n        if (WjElementUtils.hasSlot(this, 'loader')) {\n            let loading = document.createElement('div');\n            loading.classList.add('loading');\n\n            let loader = document.createElement('slot');\n            loader.setAttribute('name', 'loader');\n\n            loading.appendChild(loader);\n\n            this.loadingEl = loading;\n\n            fragment.appendChild(loading);\n        }\n\n        native.appendChild(slot);\n        native.appendChild(ending);\n\n        fragment.appendChild(native);\n\n        this.endingEl = ending;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    async afterDraw() {\n        this.queryParams = this.queryParams || '';\n        this.size = +this.size || 10;\n        this.currentPage = 0;\n\n        this.scrollEvent();\n        this._loading = this.loadPages(this.currentPage);\n        await this._loading;\n    }\n\n    /**\n     * Adds the scroll event listener.\n     */\n    scrollEvent = () => {\n        this.addEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * Removes the scroll event listener.\n     */\n    unScrollEvent = () => {\n        this.removeEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * Handles the scroll event.\n     * @param {Event} e The event.\n     */\n    onScroll = (e) => {\n        const { scrollTop, scrollHeight, clientHeight } = e.target;\n\n        if (\n            scrollTop + clientHeight >= scrollHeight - 300 &&\n            this.currentPage <= this.totalPages &&\n            this.isLoading.includes(this.currentPage)\n        ) {\n            this.currentPage++;\n            this._loading = this.loadPages(this.currentPage);\n        }\n    };\n\n    /**\n     * Fetches the pages from the server.\n     * @param {number} page The page number.\n     * @returns {Promise<object>} The response from the server.\n     */\n    async getPages(page) {\n        let hasParams = this.url.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`,\n            {\n                signal: this._signal,\n            }\n        );\n\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Hides the loader.\n     */\n    hideLoader() {\n        this?.loadingEl?.classList.remove('show');\n    }\n\n    /**\n     * Shows the loader.\n     */\n    showLoader() {\n        this?.loadingEl?.classList.add('show');\n    }\n\n    /**\n     * Checks if there are more pages to load.\n     * @param {number} page The page number.\n     * @returns {boolean} Whether there are more pages to load.\n     */\n    hasMorePages(page) {\n        return this.totalPages === 0 || page < this.totalPages;\n    }\n\n    /**\n     * Loads the pages.\n     * @param {number} page The page number.\n     */\n    async loadPages(page) {\n        this.showLoader();\n        try {\n            if (this.hasMorePages(page)) {\n                let response;\n                this.parser = new DOMParser();\n\n                if (typeof this.setCustomData === 'function') {\n                    response = await this.setCustomData(page, this._signal);\n                } else {\n                    response = await this.getPages(page);\n                }\n\n                this.totalPages = response?.totalPages;\n                this.currentPage = page;\n\n                this.placementObj = this;\n\n                // if there is a \"container\" attribute, find the element\n                if (this.hasAttribute('placement')) this.placementObj = this.querySelector(this.placement);\n\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:load', response);\n\n                this.response = response;\n\n                this.customForeach(this.objectName ? response[this.objectName] : response);\n\n                this.isLoading.push(page);\n            } else {\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:complete');\n                this.endingEl.classList.add('show');\n            }\n        } catch (error) {\n            console.log(error);\n        } finally {\n            this.hideLoader();\n        }\n    }\n\n    /**\n     * Sets the custom data.\n     *\n     */\n    dataToHtml = (item) => {\n        let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);\n        let doc = this.parser.parseFromString(interpolateItem, 'text/html');\n        let element = doc.activeElement.firstElementChild;\n        console.log('IS Element:', element);\n        return element;\n    };\n\n    customForeach = (data) => {\n        data.forEach((item) => {\n            let element = this.dataToHtml(item);\n            event.addListener(element, 'click', 'wje-infinite-scroll:click-item', null);\n\n            this.placementObj.insertAdjacentElement('beforeend', element);\n        });\n    };\n\n    /**\n     * Interpolates the string.\n     * @param template\n     * @param {object} params The parameters for interpolation.\n     * @returns {string} The interpolated string.\n     */\n    interpolate = (template, params) => {\n        let keys = template.match(/\\{{.*?\\}}/g);\n\n        if (keys) {\n            for (let key of keys) {\n                let cleanKey = key.replace('{{', '').replace('}}', '');\n                let val = '';\n                cleanKey.split('.').forEach((k) => {\n                    val = val === '' ? params[k] : val[k];\n                });\n\n                template = template.replace(key, val);\n            }\n        }\n        return template;\n    };\n}\n"],"names":[],"mappings":"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"}

package/dist/light.css

@@ -15,8 +15,8 @@
         'Apple Color Emoji', 'Segoe UI Emoji';
     --wje-font-family-secondary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
         'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    --wje-force-mac-font-family: -apple-system, BlinkMacSystemFont, 'Inter UI', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --wje-force-mac-font-family: -apple-system, BlinkMacSystemFont, 'Inter UI', 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 
     /* Line Heights */
     --wje-line-height-denser: 1.2;
@@ -398,6 +398,18 @@
     --wje-item-min-height: 40px;
     --wje-item-transition: var(--wje-transition-fast);
 
+    /* Level - Indicator */
+    --wje-level-indicator-color: var(--wje-color-contrast-3);
+    --wje-level-indicator-color-active: var(--wje-color-contrast-9);
+    --wje-level-indicator-opacity: 0.5;
+    --wje-level-indicator-gap: var(--wje-size-4x-small);
+    --wje-level-indicator-width: var(--wje-size-medium);
+    --wje-level-indicator-height: var(--wje-size-4x-small);
+    --wje-level-indicator-border-radius: var(--wje-border-radius-large);
+    --wje-level-indicator-color-high: var(--wje-color-success-9);
+    --wje-level-indicator-color-medium: var(--wje-color-warning-9);
+    --wje-level-indicator-color-low: var(--wje-color-danger-9);
+
     /* List */
     --wje-list-inset-padding: 1rem;
     --wje-list-border-radius: var(--wje-border-radius-medium);

package/dist/localize.js

@@ -3,7 +3,6 @@ class LocalizerDefault {
     this.element = element;
     this.lang = this.element.lang || document.documentElement.lang || "en-gb";
     this.dir = this.element.dir || document.documentElement.dir || "ltr";
-    this.currentLang = "en-gb";
     this.setLanguage();
   }
   get languages() {
@@ -11,8 +10,7 @@ class LocalizerDefault {
   }
   // Nastavenie aktuálneho jazyka
   setLanguage() {
-    var _a;
-    if ((_a = this.languages) == null ? void 0 : _a.has(this.lang)) {
+    if (this.languages.has(this.lang)) {
       this.currentLang = this.lang;
     } else {
       console.error(`Language "${this.lang}" not loaded.`);
@@ -20,9 +18,7 @@ class LocalizerDefault {
   }
   // Vyhľadávanie prekladu podľa kľúča
   translate(key) {
-    var _a;
-    const langMap = (_a = this.languages) == null ? void 0 : _a.get(this.currentLang);
-    if (!langMap) return key;
+    const langMap = this.languages.get(this.currentLang);
     return langMap ? langMap[key] || key : key;
   }
   // Vyhľadávanie prekladu podľa kľúča a typu čísla

package/dist/localize.js.map

@@ -1 +1 @@
-{"version":3,"file":"localize.js","sources":["../packages/localize/localize.js","../packages/utils/localize.js"],"sourcesContent":["// export const translations = new Map();\n\nexport class LocalizerDefault {\n    constructor(element) {\n        this.element = element;\n\n        this.lang = this.element.lang || document.documentElement.lang || 'en-gb';\n        this.dir = this.element.dir || document.documentElement.dir || 'ltr';\n        this.currentLang = 'en-gb';\n\n        this.setLanguage();\n    }\n\n    get languages() {\n        return window.translations;\n    }\n\n    // Nastavenie aktuálneho jazyka\n    setLanguage() {\n        if (this.languages?.has(this.lang)) {\n            this.currentLang = this.lang;\n        } else {\n            console.error(`Language \"${this.lang}\" not loaded.`);\n        }\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča\n    translate(key) {\n        const langMap = this.languages?.get(this.currentLang);\n        if (!langMap) return key;\n        return langMap ? langMap[key] || key : key;\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča a typu čísla\n    translatePlural(key, count = 0, type = 'cardinal') {\n        const plural = new Intl.PluralRules(this.lang, { type: type });\n\n        if (count !== undefined) key += '.' + plural.select(count);\n\n        return this.translate(key);\n    }\n\n    // Formátovanie čísla podľa aktuálneho jazyka\n    formatNumber(number, options) {\n        return new Intl.NumberFormat(this.currentLang, options).format(number);\n    }\n\n    // Formátovanie dátumu podľa aktuálneho jazyka\n    formatDate(date) {\n        return new Intl.DateTimeFormat(this.currentLang).format(new Date(date));\n    }\n\n    relativeTime(lang, value = 0, unit = 'day', options = { numeric: 'auto' }) {\n        lang = lang || this.currentLang;\n        return new Intl.RelativeTimeFormat(lang, options).format(value, unit);\n    }\n}\n\nexport function registerTranslation(...translation) {\n    translation.forEach((t) => {\n        if (!t.code) {\n            console.error(\"Translation object is missing 'code' property:\", t);\n            return;\n        }\n\n        const code = t.code.toLowerCase();\n        if (window.translations.has(code)) {\n            window.translations.set(code, { ...window.translations.get(code), ...t });\n        } else {\n            window.translations.set(code, t);\n        }\n    });\n}\n","import { LocalizerDefault, registerTranslation } from '../localize/localize.js';\n\nexport class Localizer extends LocalizerDefault {\n    constructor(element) {\n        super(element);\n    }\n    static registerTranslation(...translation) {\n        registerTranslation(...translation);\n    }\n}\n"],"names":[],"mappings":"AAEO,MAAM,iBAAiB;AAAA,EAC1B,YAAY,SAAS;AACjB,SAAK,UAAU;AAEf,SAAK,OAAO,KAAK,QAAQ,QAAQ,SAAS,gBAAgB,QAAQ;AAClE,SAAK,MAAM,KAAK,QAAQ,OAAO,SAAS,gBAAgB,OAAO;AAC/D,SAAK,cAAc;AAEnB,SAAK,YAAa;AAAA,EAC1B;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,OAAO;AAAA,EACtB;AAAA;AAAA,EAGI,cAAc;AAlBlB;AAmBQ,SAAI,UAAK,cAAL,mBAAgB,IAAI,KAAK,OAAO;AAChC,WAAK,cAAc,KAAK;AAAA,IACpC,OAAe;AACH,cAAQ,MAAM,aAAa,KAAK,IAAI,eAAe;AAAA,IAC/D;AAAA,EACA;AAAA;AAAA,EAGI,UAAU,KAAK;AA3BnB;AA4BQ,UAAM,WAAU,UAAK,cAAL,mBAAgB,IAAI,KAAK;AACzC,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,UAAU,QAAQ,GAAG,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA,EAGI,gBAAgB,KAAK,QAAQ,GAAG,OAAO,YAAY;AAC/C,UAAM,SAAS,IAAI,KAAK,YAAY,KAAK,MAAM,EAAE,MAAY;AAE7D,QAAI,UAAU,OAAW,QAAO,MAAM,OAAO,OAAO,KAAK;AAEzD,WAAO,KAAK,UAAU,GAAG;AAAA,EACjC;AAAA;AAAA,EAGI,aAAa,QAAQ,SAAS;AAC1B,WAAO,IAAI,KAAK,aAAa,KAAK,aAAa,OAAO,EAAE,OAAO,MAAM;AAAA,EAC7E;AAAA;AAAA,EAGI,WAAW,MAAM;AACb,WAAO,IAAI,KAAK,eAAe,KAAK,WAAW,EAAE,OAAO,IAAI,KAAK,IAAI,CAAC;AAAA,EAC9E;AAAA,EAEI,aAAa,MAAM,QAAQ,GAAG,OAAO,OAAO,UAAU,EAAE,SAAS,UAAU;AACvE,WAAO,QAAQ,KAAK;AACpB,WAAO,IAAI,KAAK,mBAAmB,MAAM,OAAO,EAAE,OAAO,OAAO,IAAI;AAAA,EAC5E;AACA;AAEO,SAAS,uBAAuB,aAAa;AAChD,cAAY,QAAQ,CAAC,MAAM;AACvB,QAAI,CAAC,EAAE,MAAM;AACT,cAAQ,MAAM,kDAAkD,CAAC;AACjE;AAAA,IACZ;AAEQ,UAAM,OAAO,EAAE,KAAK,YAAa;AACjC,QAAI,OAAO,aAAa,IAAI,IAAI,GAAG;AAC/B,aAAO,aAAa,IAAI,MAAM,EAAE,GAAG,OAAO,aAAa,IAAI,IAAI,GAAG,GAAG,EAAC,CAAE;AAAA,IACpF,OAAe;AACH,aAAO,aAAa,IAAI,MAAM,CAAC;AAAA,IAC3C;AAAA,EACA,CAAK;AACL;ACtEO,MAAM,kBAAkB,iBAAiB;AAAA,EAC5C,YAAY,SAAS;AACjB,UAAM,OAAO;AAAA,EACrB;AAAA,EACI,OAAO,uBAAuB,aAAa;AACvC,wBAAoB,GAAG,WAAW;AAAA,EAC1C;AACA;"}
+{"version":3,"file":"localize.js","sources":["../packages/localize/localize.js","../packages/utils/localize.js"],"sourcesContent":["// export const translations = new Map();\n\nexport class LocalizerDefault {\n    constructor(element) {\n        this.element = element;\n\n        this.lang = this.element.lang || document.documentElement.lang || 'en-gb';\n        this.dir = this.element.dir || document.documentElement.dir || 'ltr';\n\n        this.setLanguage();\n    }\n\n    get languages() {\n        return window.translations;\n    }\n\n    // Nastavenie aktuálneho jazyka\n    setLanguage() {\n        if (this.languages.has(this.lang)) {\n            this.currentLang = this.lang;\n        } else {\n            console.error(`Language \"${this.lang}\" not loaded.`);\n        }\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča\n    translate(key) {\n        const langMap = this.languages.get(this.currentLang);\n        return langMap ? langMap[key] || key : key;\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča a typu čísla\n    translatePlural(key, count = 0, type = 'cardinal') {\n        const plural = new Intl.PluralRules(this.lang, { type: type });\n\n        if (count !== undefined) key += '.' + plural.select(count);\n\n        return this.translate(key);\n    }\n\n    // Formátovanie čísla podľa aktuálneho jazyka\n    formatNumber(number, options) {\n        return new Intl.NumberFormat(this.currentLang, options).format(number);\n    }\n\n    // Formátovanie dátumu podľa aktuálneho jazyka\n    formatDate(date) {\n        return new Intl.DateTimeFormat(this.currentLang).format(new Date(date));\n    }\n\n    relativeTime(lang, value = 0, unit = 'day', options = { numeric: 'auto' }) {\n        lang = lang || this.currentLang;\n        return new Intl.RelativeTimeFormat(lang, options).format(value, unit);\n    }\n}\n\nexport function registerTranslation(...translation) {\n    translation.forEach((t) => {\n        if (!t.code) {\n            console.error(\"Translation object is missing 'code' property:\", t);\n            return;\n        }\n\n        const code = t.code.toLowerCase();\n        if (window.translations.has(code)) {\n            window.translations.set(code, { ...window.translations.get(code), ...t });\n        } else {\n            window.translations.set(code, t);\n        }\n    });\n}\n","import { LocalizerDefault, registerTranslation } from '../localize/localize.js';\n\nexport class Localizer extends LocalizerDefault {\n    constructor(element) {\n        super(element);\n    }\n    static registerTranslation(...translation) {\n        registerTranslation(...translation);\n    }\n}\n"],"names":[],"mappings":"AAEO,MAAM,iBAAiB;AAAA,EAC1B,YAAY,SAAS;AACjB,SAAK,UAAU;AAEf,SAAK,OAAO,KAAK,QAAQ,QAAQ,SAAS,gBAAgB,QAAQ;AAClE,SAAK,MAAM,KAAK,QAAQ,OAAO,SAAS,gBAAgB,OAAO;AAE/D,SAAK,YAAa;AAAA,EAC1B;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,OAAO;AAAA,EACtB;AAAA;AAAA,EAGI,cAAc;AACV,QAAI,KAAK,UAAU,IAAI,KAAK,IAAI,GAAG;AAC/B,WAAK,cAAc,KAAK;AAAA,IACpC,OAAe;AACH,cAAQ,MAAM,aAAa,KAAK,IAAI,eAAe;AAAA,IAC/D;AAAA,EACA;AAAA;AAAA,EAGI,UAAU,KAAK;AACX,UAAM,UAAU,KAAK,UAAU,IAAI,KAAK,WAAW;AACnD,WAAO,UAAU,QAAQ,GAAG,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA,EAGI,gBAAgB,KAAK,QAAQ,GAAG,OAAO,YAAY;AAC/C,UAAM,SAAS,IAAI,KAAK,YAAY,KAAK,MAAM,EAAE,MAAY;AAE7D,QAAI,UAAU,OAAW,QAAO,MAAM,OAAO,OAAO,KAAK;AAEzD,WAAO,KAAK,UAAU,GAAG;AAAA,EACjC;AAAA;AAAA,EAGI,aAAa,QAAQ,SAAS;AAC1B,WAAO,IAAI,KAAK,aAAa,KAAK,aAAa,OAAO,EAAE,OAAO,MAAM;AAAA,EAC7E;AAAA;AAAA,EAGI,WAAW,MAAM;AACb,WAAO,IAAI,KAAK,eAAe,KAAK,WAAW,EAAE,OAAO,IAAI,KAAK,IAAI,CAAC;AAAA,EAC9E;AAAA,EAEI,aAAa,MAAM,QAAQ,GAAG,OAAO,OAAO,UAAU,EAAE,SAAS,UAAU;AACvE,WAAO,QAAQ,KAAK;AACpB,WAAO,IAAI,KAAK,mBAAmB,MAAM,OAAO,EAAE,OAAO,OAAO,IAAI;AAAA,EAC5E;AACA;AAEO,SAAS,uBAAuB,aAAa;AAChD,cAAY,QAAQ,CAAC,MAAM;AACvB,QAAI,CAAC,EAAE,MAAM;AACT,cAAQ,MAAM,kDAAkD,CAAC;AACjE;AAAA,IACZ;AAEQ,UAAM,OAAO,EAAE,KAAK,YAAa;AACjC,QAAI,OAAO,aAAa,IAAI,IAAI,GAAG;AAC/B,aAAO,aAAa,IAAI,MAAM,EAAE,GAAG,OAAO,aAAa,IAAI,IAAI,GAAG,GAAG,EAAC,CAAE;AAAA,IACpF,OAAe;AACH,aAAO,aAAa,IAAI,MAAM,CAAC;AAAA,IAC3C;AAAA,EACA,CAAK;AACL;ACpEO,MAAM,kBAAkB,iBAAiB;AAAA,EAC5C,YAAY,SAAS;AACjB,UAAM,OAAO;AAAA,EACrB;AAAA,EACI,OAAO,uBAAuB,aAAa;AACvC,wBAAoB,GAAG,WAAW;AAAA,EAC1C;AACA;"}

package/dist/packages/index.d.ts

@@ -50,6 +50,7 @@ export { default as InputFile } from './wje-input-file/input-file.js';
 export { default as Item } from './wje-item/item.js';
 export { default as Kanban } from './wje-kanban/kanban.js';
 export { default as Label } from './wje-label/label.js';
+export { default as LevelIndicator } from './wje-level-indicator/level-indicator.js';
 export { default as List } from './wje-list/list.js';
 export { default as Main } from './wje-main/main.js';
 export { default as Masonry } from './wje-masonry/masonry.js';
@@ -62,6 +63,7 @@ export { default as Options } from './wje-options/options.js';
 export { default as Orgchart } from './wje-orgchart/orgchart.js';
 export { default as OrgchartGroup } from './wje-orgchart-group/orgchart-group.js';
 export { default as OrgchartItem } from './wje-orgchart-item/orgchart-item.js';
+export { default as Pagination } from './wje-pagination/pagination.js';
 export { default as Popup } from './wje-popup/popup.js';
 export { default as ProgressBar } from './wje-progress-bar/progress-bar.js';
 export { default as QrCode } from './wje-qr-code/qr-code.js';

package/dist/packages/localize/localize.d.ts

@@ -4,9 +4,9 @@ export class LocalizerDefault {
     element: any;
     lang: any;
     dir: any;
-    currentLang: string;
     get languages(): any;
     setLanguage(): void;
+    currentLang: any;
     translate(key: any): any;
     translatePlural(key: any, count?: number, type?: string): any;
     formatNumber(number: any, options: any): string;

package/dist/packages/translations/en-gb.d.ts

@@ -10,4 +10,9 @@ export const enGb: {
     'wj.stepper.button.finish': string;
     'wj.stepper.button.previous': string;
     'wj.stepper.step': string;
+    'wj.pagination.of': string;
+    'wj.pagination.first': string;
+    'wj.pagination.prev': string;
+    'wj.pagination.next': string;
+    'wj.pagination.last': string;
 };

package/dist/packages/utils/permissions-api.d.ts

@@ -4,12 +4,12 @@ export class WjePermissionsApi {
      * Sets the permission key.
      * @param value
      */
-    static set permissionKey(value: any | string);
+    static set permissionKey(value: any);
     /**
      * Returns the permission key.
      * @returns {*|string}
      */
-    static get permissionKey(): any | string;
+    static get permissionKey(): any;
     /**
      * Sets the permissions.
      * @param value

package/dist/packages/wje-accordion/accordion.element.d.ts

@@ -17,7 +17,7 @@ export default class Accordion extends WJElement {
      * Getter for the CSS stylesheet.
      * @returns {object} The styles for the Accordion element.
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Getter for the observed attributes.
      * @returns {Array} An array containing the name of the observed attribute.
@@ -39,7 +39,7 @@ export default class Accordion extends WJElement {
      * Sets the value of the `index` attribute.
      * @param {number|string} value The value to set for the `index` attribute.
      */
-    set index(value: number | string);
+    set index(value: number);
     /**
      * Retrieves the value of the `index` attribute as a number.
      * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.

package/dist/packages/wje-accordion-item/accordion-item.element.d.ts

@@ -12,7 +12,7 @@ export default class AccordionItem extends WJElement {
      * Getter for the CSS stylesheet.
      * @returns {object} The styles for the Accordion Item element.
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Getter for the observed attributes.
      * @returns {Array} An array containing the name of the observed attribute.

package/dist/packages/wje-animation/animation.element.d.ts

@@ -13,7 +13,7 @@ export default class Animation extends WJElement {
      * Getter for the CSS stylesheet.
      * @returns {object} The styles for the Animation element.
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Getter for the observed attributes.
      * @returns {Array} An array containing the name of the observed attribute.

package/dist/packages/wje-aside/aside.element.d.ts

@@ -17,7 +17,7 @@ export default class Aside extends WJElement {
      * Getter for the CSS stylesheet.
      * @returns {object} The styles for the Aside element.
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Getter for the observed attributes.
      * @returns {Array} An empty array as there are no observed attributes.

package/dist/packages/wje-badge/badge.element.d.ts

@@ -26,7 +26,7 @@ export default class Badge extends WJElement {
      *   return ['color'];
      * }
      */
-    static get observedAttributes(): Array<string>;
+    static get observedAttributes(): string[];
     /**
      * Creates the DOM structure for the Badge element.
      * @returns {DocumentFragment} A document fragment containing the Badge's structure.

package/dist/packages/wje-breadcrumb/breadcrumb.element.d.ts

@@ -20,13 +20,13 @@ export default class Breadcrumb extends WJElement {
      * @static
      * @returns {object} styles - The CSS styles
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Get observed attributes for the Breadcrumb element.
      * @static
      * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.
      */
-    static get observedAttributes(): Array<string>;
+    static get observedAttributes(): string[];
     _showSeparator: boolean;
     showCollapsedIndicator: boolean;
     /**

package/dist/packages/wje-breadcrumbs/breadcrumbs.element.d.ts

@@ -28,13 +28,13 @@ export default class Breadcrumbs extends WJElement {
      * @static
      * @returns {object} styles - The CSS styles
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Get observed attributes for the Breadcrumb element.
      * @static
      * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.
      */
-    static get observedAttributes(): Array<string>;
+    static get observedAttributes(): string[];
     /**
      * Last breadcrumb flag
      * @type {boolean}
@@ -54,7 +54,7 @@ export default class Breadcrumbs extends WJElement {
      * Get items before collapse attribute.
      * @param {string} value
      */
-    set maxItems(value: string);
+    set maxItems(value: number);
     /**
      * Get items before collapse attribute.
      * @returns {number}

package/dist/packages/wje-button/button.element.d.ts

@@ -33,7 +33,7 @@ export default class Button extends WJElement {
      * @static
      * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.
      */
-    static get observedAttributes(): Array<string>;
+    static get observedAttributes(): string[];
     /**
      * @summary A static property that indicates whether the custom element is form-associated or not.
      * Form-associated custom elements are elements that can participate in form submission.
@@ -50,12 +50,12 @@ export default class Button extends WJElement {
      * Properties of the element Button.
      * @param value
      */
-    set color(value: string | string);
+    set color(value: string);
     /**
      * Get color of the Button element.
      * @returns {string|string}
      */
-    get color(): string | string;
+    get color(): string;
     /**
      * Set variant of the Button element.
      * @param value
@@ -80,12 +80,12 @@ export default class Button extends WJElement {
      * Set variant of the Button element.
      * @param value
      */
-    set dialog(value: string | object);
+    set dialog(value: any);
     /**
      * Get variant of the Button element.
      * @returns {string|object}
      */
-    get dialog(): string | object;
+    get dialog(): any;
     /**
      * Set active state of the Button element.
      * @param {boolean} value The value to set

package/dist/packages/wje-button-group/button-group.element.d.ts

@@ -13,13 +13,13 @@ export default class ButtonGroup extends WJElement {
      * @static
      * @returns {object} styles - The CSS styles
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Get observed attributes for the ButtonGroup element.
      * @static
      * @returns {Array<string>} observedAttributes - The observed attributes array
      */
-    static get observedAttributes(): Array<string>;
+    static get observedAttributes(): string[];
     /**
      * Draw method for the ButtonGroup element.
      * @returns {object} fragment - The document fragment

package/dist/packages/wje-card/card.element.d.ts

@@ -17,7 +17,7 @@ export default class Card extends WJElement {
      * @static
      * @returns {object} styles - The CSS styles
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Draw method for the Card element.
      * @param {object} context The context object

package/dist/packages/wje-card-content/card-content.element.d.ts

@@ -13,7 +13,7 @@ export default class CardContent extends WJElement {
      * @static
      * @returns {object} styles - The CSS styles for the CardContent element.
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Draw method for the CardContent element.
      * @returns {object} fragment - The document fragment containing the drawn element.

package/dist/packages/wje-card-controls/card-controls.element.d.ts

@@ -14,7 +14,7 @@ export default class CardControls extends WJElement {
      * @static
      * @returns {object} styles - The CSS styles
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Draw method for the CardControls element.
      * @returns {object} fragment - The document fragment

package/dist/packages/wje-card-header/card-header.element.d.ts

@@ -13,7 +13,7 @@ export default class CardHeader extends WJElement {
      * @returns {object} The styles object.
      * @static
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Draws the CardHeader.
      * @returns {DocumentFragment} The created document fragment.

package/dist/packages/wje-card-subtitle/card-subtitle.element.d.ts

@@ -15,7 +15,7 @@ export default class CardSubtitle extends WJElement {
      * @returns {object} The styles object.
      * @static
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Getter for the observed attributes.
      * @returns {Array} An empty array.

package/dist/packages/wje-card-title/card-title.element.d.ts

@@ -17,7 +17,7 @@ export default class CardTitle extends WJElement {
      * @returns {object} The styles object.
      * @static
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Getter for the observed attributes.
      * @returns {Array} An empty array.

package/dist/packages/wje-carousel/carousel.element.d.ts

@@ -23,12 +23,12 @@ export default class Carousel extends WJElement {
      * Active slide attribute.
      * @param value
      */
-    set activeSlide(value: number | number);
+    set activeSlide(value: number);
     /**
      * Active slide attribute.
      * @returns {number|number}
      */
-    get activeSlide(): number | number;
+    get activeSlide(): number;
     /**
      * Pagination attribute.
      * @returns {boolean}

package/dist/packages/wje-chip/chip.element.d.ts

@@ -22,6 +22,7 @@ export default class Chip extends WJElement {
      */
     draw(): DocumentFragment;
     removeElement: HTMLElement;
+    slotEnd: HTMLSlotElement;
     /**
      * Getter for the observed attributes.
      */

package/dist/packages/wje-color-picker/color-picker.element.d.ts

@@ -27,7 +27,7 @@ export default class ColorPicker extends WJElement {
      * @returns {object} The styles object.
      * @static
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Getter for the observed attributes.
      * @returns {Array} An empty array.
@@ -50,17 +50,17 @@ export default class ColorPicker extends WJElement {
      * Setter for the marker position.
      * @param {object} value The new marker position.
      */
-    set markerPosition(value: object);
+    set markerPosition(value: any);
     /**
      * Getter for the marker position.
      * @returns {object} The current marker position.
      */
-    get markerPosition(): object;
+    get markerPosition(): any;
     /**
      * Setter for the color swatches.
      * @param {string} value The new color swatches.
      */
-    set swatches(value: string);
+    set swatches(value: any[]);
     /**
      * Getter for the color swatches.
      * @returns {Array} The current color swatches.

package/dist/packages/wje-color-picker/color-picker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/wje-container/container.element.d.ts

@@ -16,7 +16,7 @@ export default class Container extends WJElement {
      * @returns {object} The styles object.
      * @static
      */
-    static get cssStyleSheet(): object;
+    static get cssStyleSheet(): any;
     /**
      * Getter for the observed attributes.
      * @returns {Array} An empty array.

package/dist/packages/wje-dialog/dialog.element.d.ts

@@ -35,12 +35,12 @@ export default class Dialog extends WJElement {
      * Sets the headline of the dialog.
      * @param value
      */
-    set placement(value: string | string);
+    set placement(value: string);
     /**
      * Gets the headline of the dialog.
      * @returns {string|string}
      */
-    get placement(): string | string;
+    get placement(): string;
     /**
      * Sets the headline of the dialog.
      * @param value

package/dist/packages/wje-dropdown/dropdown.element.d.ts

@@ -30,12 +30,12 @@ export default class Dropdown extends WJElement {
      * Sets the placement of the dropdown.
      * @param value
      */
-    set trigger(value: string | string);
+    set trigger(value: string);
     /**
      * Gets the placement of the dropdown.
      * @returns {string|string}
      */
-    get trigger(): string | string;
+    get trigger(): string;
     /**
      * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.
      * @param {Event} e The event object.

package/dist/packages/wje-element/element.d.ts

@@ -88,12 +88,12 @@ export default class WJElement extends HTMLElement {
      * Gets the rendering context, either the shadow root or the component itself.
      * @returns The rendering context.
      */
-    get context(): this | ShadowRoot;
+    get context(): any;
     /**
      * Gets the store instance.
      * @returns {object} The store instance.
      */
-    get store(): object;
+    get store(): any;
     /**
      * @typedef {object} ArrayActions
      * @property {Function} addAction - Adds an item to the array.

package/dist/packages/wje-file-upload/file-upload.element.d.ts

@@ -83,12 +83,12 @@ export default class FileUpload extends WJElement {
      * Sets the autoProcessFiles attribute.
      * @param value
      */
-    set autoProcessFiles(value: any | boolean);
+    set autoProcessFiles(value: any);
     /**
      * Gets the autoProcessFiles attribute.
      * @returns {any|boolean}
      */
-    get autoProcessFiles(): any | boolean;
+    get autoProcessFiles(): any;
     /**
      * Sets the noUploadButton attribute.
      * @param value

package/dist/packages/wje-file-upload-item/file-upload-item.element.d.ts

@@ -29,7 +29,7 @@ export default class FileUploadItem extends WJElement {
      * @static
      * @returns {Array<string>}
      */
-    static get observedAttributes(): Array<string>;
+    static get observedAttributes(): string[];
     localizer: Localizer;
     set size(value: string);
     get size(): string;

package/dist/packages/wje-footer/footer.element.d.ts

@@ -19,7 +19,7 @@ export default class Footer extends WJElement {
      * @static
      * @returns {Array<string>}
      */
-    static get observedAttributes(): Array<string>;
+    static get observedAttributes(): string[];
     /**
      * Draws the component.
      * @returns {DocumentFragment}

package/dist/packages/wje-format-digital/format-digital.element.d.ts

@@ -34,7 +34,7 @@ export default class FormatDigital extends WJElement {
      * @static
      * @returns {Array<string>} - The attributes to observe.
      */
-    static get observedAttributes(): Array<string>;
+    static get observedAttributes(): string[];
     localizer: Localizer;
     /**
      * Sets the value of the digital format.

package/dist/packages/wje-header/header.element.d.ts

@@ -26,7 +26,7 @@ export default class Header extends WJElement {
      * @static
      * @returns {Array<string>}
      */
-    static get observedAttributes(): Array<string>;
+    static get observedAttributes(): string[];
     /**
      * Draws the component.
      * @returns {DocumentFragment}