wj-elements 0.1.133 → 0.1.135

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

@@ -269,3 +269,4 @@ class InfiniteScroll extends WJElement {
 export {
   InfiniteScroll as I
 };
+//# sourceMappingURL=infinite-scroll.element-XVJukzjy.js.map

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

@@ -0,0 +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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"}

package/dist/list.element-Ce1vIm1O.js

@@ -47,3 +47,4 @@ class List extends WJElement {
 export {
   List as L
 };
+//# sourceMappingURL=list.element-Ce1vIm1O.js.map

package/dist/list.element-Ce1vIm1O.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.element-Ce1vIm1O.js","sources":["../packages/wje-list/list.element.js"],"sourcesContent":["import WJElement from '../wje-element/element.js';\nimport styles from './styles/styles.scss?inline';\n\n/**\n * `List` is a custom web component that represents a list.\n * It extends from `WJElement`.\n * @summary This element represents a list.\n * @documentation https://elements.webjet.sk/components/list\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the list.\n * @cssproperty [--wje-list-inset-padding=1rem] - The padding of the list when it is inset.\n * @cssproperty [--wje-list-border-radius=8px] - The border radius of the list. Accepts any valid CSS length.\n * @cssproperty [--wje-list-background=var(--wje-background)] - The background of the list. Accepts any valid CSS color value.\n * @tag wje-list\n */\nexport default class List extends WJElement {\n    /**\n     * Creates an instance of List.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'List';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.classList.toggle('wje-lines-' + this.lines, this.hasAttribute('lines'));\n        this.classList.toggle('wje-inset', this.hasAttribute('inset'));\n    }\n}\n"],"names":[],"mappings":";;;;;AAgBe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,UAAU,OAAO,eAAe,KAAK,OAAO,KAAK,aAAa,OAAO,CAAC;AAC3E,SAAK,UAAU,OAAO,aAAa,KAAK,aAAa,OAAO,CAAC;AAAA,EACrE;AACA;"}

package/dist/localize.js

@@ -18,7 +18,9 @@ class LocalizerDefault {
   }
   // Vyhľadávanie prekladu podľa kľúča
   translate(key) {
+    console.log("TRANSLATE:", this.element.lang, this.lang, this.currentLang, key);
     const langMap = this.languages.get(this.currentLang);
+    console.log("LANG MAP:", langMap);
     return langMap ? langMap[key] || key : key;
   }
   // Vyhľadávanie prekladu podľa kľúča a typu čísla
@@ -65,3 +67,4 @@ class Localizer extends LocalizerDefault {
 export {
   Localizer
 };
+//# sourceMappingURL=localize.js.map

package/dist/localize.js.map

@@ -0,0 +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\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        console.log(\"TRANSLATE:\",this.element.lang, this.lang, this.currentLang, key);\n        const langMap = this.languages.get(this.currentLang);\n        console.log(\"LANG MAP:\", langMap);\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,YAAQ,IAAI,cAAa,KAAK,QAAQ,MAAM,KAAK,MAAM,KAAK,aAAa,GAAG;AAC5E,UAAM,UAAU,KAAK,UAAU,IAAI,KAAK,WAAW;AACnD,YAAQ,IAAI,aAAa,OAAO;AAChC,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;"}

package/dist/packages/index.d.ts

@@ -1,99 +1,100 @@
-import { default as WJElement } from './wje-element/element.js';
-import { defaultStoreActions, store } from './wje-store/store.js';
-import { event } from './utils/event.js';
-import { fetchAndParseCSS } from './utils/animations.js';
-import { Localizer } from './utils/localize.js';
-import { formatDate } from './utils/date.js';
-import { WjePermissionsApi } from './utils/permissions-api.js';
-import { default as Accordion } from './wje-accordion/accordion.js';
-import { default as AccordionItem } from './wje-accordion-item/accordion-item.js';
-import { default as Animation } from './wje-animation/animation.js';
-import { default as Aside } from './wje-aside/aside.js';
-import { default as Avatar } from './wje-avatar/avatar.js';
-import { default as Badge } from './wje-badge/badge.js';
-import { default as Breadcrumb } from './wje-breadcrumb/breadcrumb.js';
-import { default as Breadcrumbs } from './wje-breadcrumbs/breadcrumbs.js';
-import { default as Button } from './wje-button/button.js';
-import { default as ButtonGroup } from './wje-button-group/button-group.js';
-import { default as Card } from './wje-card/card.js';
-import { default as CardContent } from './wje-card-content/card-content.js';
-import { default as CardControls } from './wje-card-controls/card-controls.js';
-import { default as CardHeader } from './wje-card-header/card-header.js';
-import { default as CardSubtitle } from './wje-card-subtitle/card-subtitle.js';
-import { default as CardTitle } from './wje-card-title/card-title.js';
-import { default as Carousel } from './wje-carousel/carousel.js';
-import { default as CarouselItem } from './wje-carousel-item/carousel-item.js';
-import { default as Checkbox } from './wje-checkbox/checkbox.js';
-import { default as Chip } from './wje-chip/chip.js';
-import { default as Col } from './wje-col/col.js';
-import { default as ColorPicker } from './wje-color-picker/color-picker.js';
-import { default as Container } from './wje-container/container.js';
-import { default as CopyButton } from './wje-copy-button/copy-button.js';
-import { default as Dialog } from './wje-dialog/dialog.js';
-import { default as Divider } from './wje-divider/divider.js';
-import { default as Dropdown } from './wje-dropdown/dropdown.js';
-import { default as FileUpload } from './wje-file-upload/file-upload.js';
-import { default as FileUploadItem } from './wje-file-upload-item/file-upload-item.js';
-import { default as Footer } from './wje-footer/footer.js';
-import { default as FormatDigital } from './wje-format-digital/format-digital.js';
-import { default as Grid } from './wje-grid/grid.js';
-import { default as Header } from './wje-header/header.js';
-import { default as Icon } from './wje-icon/icon.js';
-import { default as IconPicker } from './wje-icon-picker/icon-picker.js';
-import { default as Img } from './wje-img/img.js';
-import { default as ImgComparer } from './wje-img-comparer/img-comparer.js';
-import { default as InfiniteScroll } from './wje-infinite-scroll/infinite-scroll.js';
-import { default as Input } from './wje-input/input.js';
-import { default as InputFile } from './wje-input-file/input-file.js';
-import { default as Item } from './wje-item/item.js';
-import { default as Kanban } from './wje-kanban/kanban.js';
-import { default as Label } from './wje-label/label.js';
-import { default as List } from './wje-list/list.js';
-import { default as Main } from './wje-main/main.js';
-import { default as Masonry } from './wje-masonry/masonry.js';
-import { default as Menu } from './wje-menu/menu.js';
-import { default as MenuButton } from './wje-menu-button/menu-button.js';
-import { default as MenuItem } from './wje-menu-item/menu-item.js';
-import { default as MenuLabel } from './wje-menu-label/menu-label.js';
-import { default as Option } from './wje-option/option.js';
-import { default as Options } from './wje-options/options.js';
-import { default as Orgchart } from './wje-orgchart/orgchart.js';
-import { default as OrgchartGroup } from './wje-orgchart-group/orgchart-group.js';
-import { default as OrgchartItem } from './wje-orgchart-item/orgchart-item.js';
-import { default as Popup } from './wje-popup/popup.js';
-import { default as ProgressBar } from './wje-progress-bar/progress-bar.js';
-import { default as QrCode } from './wje-qr-code/qr-code.js';
-import { default as Radio } from './wje-radio/radio.js';
-import { default as RadioGroup } from './wje-radio-group/radio-group.js';
-import { default as Rate } from './wje-rate/rate.js';
-import { default as RelativeTime } from './wje-relative-time/relative-time.js';
-import { default as Reorder } from './wje-reorder/reorder.js';
-import { default as ReorderDropzone } from './wje-reorder-dropzone/reorder-dropzone.js';
-import { default as ReorderHandle } from './wje-reorder-handle/reorder-handle.js';
-import { default as ReorderItem } from './wje-reorder-item/reorder-item.js';
-import { default as Route } from './wje-route/route.js';
-import { default as Routerx } from './wje-router/router.js';
-import { default as RouterLink } from './wje-router-link/router-link.js';
-import { default as RouterOutlet } from './wje-router-outlet/router-outlet.js';
-import { default as Row } from './wje-row/row.js';
-import { default as Select } from './wje-select/select.js';
-import { default as Slider } from './wje-slider/slider.js';
-import { default as SplitView } from './wje-split-view/split-view.js';
-import { default as Status } from './wje-status/status.js';
-import { default as Step } from './wje-step/step.js';
-import { default as Stepper } from './wje-stepper/stepper.js';
-import { default as Tab } from './wje-tab/tab.js';
-import { default as TabGroup } from './wje-tab-group/tab-group.js';
-import { default as TabPanel } from './wje-tab-panel/tab-panel.js';
-import { default as Textarea } from './wje-textarea/textarea.js';
-import { default as Thumbnail } from './wje-thumbnail/thumbnail.js';
-import { default as Timeline } from './wje-timeline/timeline.js';
-import { default as TimelineItem } from './wje-timeline-item/timeline-item.js';
-import { default as Toast } from './wje-toast/toast.js';
-import { default as Toggle } from './wje-toggle/toggle.js';
-import { default as Toolbar } from './wje-toolbar/toolbar.js';
-import { default as ToolbarAction } from './wje-toolbar-action/toolbar-action.js';
-import { default as Tooltip } from './wje-tooltip/tooltip.js';
-import { default as VisuallyHidden } from './wje-visually-hidden/visually-hidden.js';
-import { default as SlidingContainer } from '../experimental-packages/wje-sliding-container/sliding-container.js';
-export { WJElement, defaultStoreActions, store, event, bindRouterLinks, fetchAndParseCSS, Localizer, formatDate, WjePermissionsApi, Accordion, AccordionItem, Animation, Aside, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, CardContent, CardControls, CardHeader, CardSubtitle, CardTitle, Carousel, CarouselItem, Checkbox, Chip, Col, ColorPicker, Container, CopyButton, Dialog, Divider, Dropdown, FileUpload, FileUploadItem, Footer, FormatDigital, Grid, Header, Icon, IconPicker, Img, ImgComparer, InfiniteScroll, Input, InputFile, Item, Kanban, Label, List, Main, Masonry, Menu, MenuButton, MenuItem, MenuLabel, Option, Options, Orgchart, OrgchartGroup, OrgchartItem, Popup, ProgressBar, QrCode, Radio, RadioGroup, Rate, RelativeTime, Reorder, ReorderDropzone, ReorderHandle, ReorderItem, Route, Routerx, RouterLink, RouterOutlet, Row, Select, Slider, SplitView, Status, Step, Stepper, Tab, TabGroup, TabPanel, Textarea, Thumbnail, Timeline, TimelineItem, Toast, Toggle, Toolbar, ToolbarAction, Tooltip, VisuallyHidden, SlidingContainer };
+export { default as SlidingContainer } from '../experimental-packages/wje-sliding-container/sliding-container.js';
+export { fetchAndParseCSS } from './utils/animations.js';
+export { formatDate } from './utils/date.js';
+export { event } from './utils/event.js';
+export { Localizer } from './utils/localize.js';
+export { skSk } from './translations/sk-sk.js';
+export { enGb } from './translations/en-gb.js';
+export { WjePermissionsApi } from './utils/permissions-api.js';
+export { default as Accordion } from './wje-accordion/accordion.js';
+export { default as AccordionItem } from './wje-accordion-item/accordion-item.js';
+export { default as Animation } from './wje-animation/animation.js';
+export { default as Aside } from './wje-aside/aside.js';
+export { default as Avatar } from './wje-avatar/avatar.js';
+export { default as Badge } from './wje-badge/badge.js';
+export { default as Breadcrumb } from './wje-breadcrumb/breadcrumb.js';
+export { default as Breadcrumbs } from './wje-breadcrumbs/breadcrumbs.js';
+export { default as Button } from './wje-button/button.js';
+export { default as ButtonGroup } from './wje-button-group/button-group.js';
+export { default as Card } from './wje-card/card.js';
+export { default as CardContent } from './wje-card-content/card-content.js';
+export { default as CardControls } from './wje-card-controls/card-controls.js';
+export { default as CardHeader } from './wje-card-header/card-header.js';
+export { default as CardSubtitle } from './wje-card-subtitle/card-subtitle.js';
+export { default as CardTitle } from './wje-card-title/card-title.js';
+export { default as Carousel } from './wje-carousel/carousel.js';
+export { default as CarouselItem } from './wje-carousel-item/carousel-item.js';
+export { default as Checkbox } from './wje-checkbox/checkbox.js';
+export { default as Chip } from './wje-chip/chip.js';
+export { default as Col } from './wje-col/col.js';
+export { default as ColorPicker } from './wje-color-picker/color-picker.js';
+export { default as Container } from './wje-container/container.js';
+export { default as CopyButton } from './wje-copy-button/copy-button.js';
+export { default as Dialog } from './wje-dialog/dialog.js';
+export { default as Divider } from './wje-divider/divider.js';
+export { default as Dropdown } from './wje-dropdown/dropdown.js';
+export { default as WJElement } from './wje-element/element.js';
+export { default as FileUpload } from './wje-file-upload/file-upload.js';
+export { default as FileUploadItem } from './wje-file-upload-item/file-upload-item.js';
+export { default as Footer } from './wje-footer/footer.js';
+export { default as FormatDigital } from './wje-format-digital/format-digital.js';
+export { default as Grid } from './wje-grid/grid.js';
+export { default as Header } from './wje-header/header.js';
+export { default as Icon } from './wje-icon/icon.js';
+export { default as IconPicker } from './wje-icon-picker/icon-picker.js';
+export { default as Img } from './wje-img/img.js';
+export { default as ImgComparer } from './wje-img-comparer/img-comparer.js';
+export { default as InfiniteScroll } from './wje-infinite-scroll/infinite-scroll.js';
+export { default as Input } from './wje-input/input.js';
+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 List } from './wje-list/list.js';
+export { default as Main } from './wje-main/main.js';
+export { default as Masonry } from './wje-masonry/masonry.js';
+export { default as Menu } from './wje-menu/menu.js';
+export { default as MenuButton } from './wje-menu-button/menu-button.js';
+export { default as MenuItem } from './wje-menu-item/menu-item.js';
+export { default as MenuLabel } from './wje-menu-label/menu-label.js';
+export { default as Option } from './wje-option/option.js';
+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 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';
+export { default as Radio } from './wje-radio/radio.js';
+export { default as RadioGroup } from './wje-radio-group/radio-group.js';
+export { default as Rate } from './wje-rate/rate.js';
+export { default as RelativeTime } from './wje-relative-time/relative-time.js';
+export { default as Reorder } from './wje-reorder/reorder.js';
+export { default as ReorderDropzone } from './wje-reorder-dropzone/reorder-dropzone.js';
+export { default as ReorderHandle } from './wje-reorder-handle/reorder-handle.js';
+export { default as ReorderItem } from './wje-reorder-item/reorder-item.js';
+export { default as Route } from './wje-route/route.js';
+export { default as Routerx } from './wje-router/router.js';
+export { default as RouterLink } from './wje-router-link/router-link.js';
+export { default as RouterOutlet } from './wje-router-outlet/router-outlet.js';
+export { default as Row } from './wje-row/row.js';
+export { default as Select } from './wje-select/select.js';
+export { default as Slider } from './wje-slider/slider.js';
+export { default as SplitView } from './wje-split-view/split-view.js';
+export { default as Status } from './wje-status/status.js';
+export { default as Step } from './wje-step/step.js';
+export { default as Stepper } from './wje-stepper/stepper.js';
+export { default as Tab } from './wje-tab/tab.js';
+export { default as TabGroup } from './wje-tab-group/tab-group.js';
+export { default as TabPanel } from './wje-tab-panel/tab-panel.js';
+export { default as Textarea } from './wje-textarea/textarea.js';
+export { default as Thumbnail } from './wje-thumbnail/thumbnail.js';
+export { default as Timeline } from './wje-timeline/timeline.js';
+export { default as TimelineItem } from './wje-timeline-item/timeline-item.js';
+export { default as Toast } from './wje-toast/toast.js';
+export { default as Toggle } from './wje-toggle/toggle.js';
+export { default as Toolbar } from './wje-toolbar/toolbar.js';
+export { default as ToolbarAction } from './wje-toolbar-action/toolbar-action.js';
+export { default as Tooltip } from './wje-tooltip/tooltip.js';
+export { default as VisuallyHidden } from './wje-visually-hidden/visually-hidden.js';
+export { defaultStoreActions, store } from './wje-store/store.js';

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);
+    static set permissionKey(value: any | string);
     /**
      * Returns the permission key.
      * @returns {*|string}
      */
-    static get permissionKey(): any;
+    static get permissionKey(): any | string;
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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);
+    set index(value: number | string);
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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(): string[];
+    static get observedAttributes(): Array<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(): any;
+    static get cssStyleSheet(): object;
     /**
      * Get observed attributes for the Breadcrumb element.
      * @static
      * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.
      */
-    static get observedAttributes(): string[];
+    static get observedAttributes(): Array<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(): any;
+    static get cssStyleSheet(): object;
     /**
      * Get observed attributes for the Breadcrumb element.
      * @static
      * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.
      */
-    static get observedAttributes(): string[];
+    static get observedAttributes(): Array<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: number);
+    set maxItems(value: string);
     /**
      * 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(): string[];
+    static get observedAttributes(): Array<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);
+    set color(value: string | string);
     /**
      * Get color of the Button element.
      * @returns {string|string}
      */
-    get color(): string;
+    get color(): string | 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: any);
+    set dialog(value: string | object);
     /**
      * Get variant of the Button element.
      * @returns {string|object}
      */
-    get dialog(): any;
+    get dialog(): string | object;
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * Get observed attributes for the ButtonGroup element.
      * @static
      * @returns {Array<string>} observedAttributes - The observed attributes array
      */
-    static get observedAttributes(): string[];
+    static get observedAttributes(): Array<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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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);
+    set activeSlide(value: number | number);
     /**
      * Active slide attribute.
      * @returns {number|number}
      */
-    get activeSlide(): number;
+    get activeSlide(): number | number;
     /**
      * Pagination attribute.
      * @returns {boolean}

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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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: any);
+    set markerPosition(value: object);
     /**
      * Getter for the marker position.
      * @returns {object} The current marker position.
      */
-    get markerPosition(): any;
+    get markerPosition(): object;
     /**
      * Setter for the color swatches.
      * @param {string} value The new color swatches.
      */
-    set swatches(value: any[]);
+    set swatches(value: string);
     /**
      * Getter for the color swatches.
      * @returns {Array} The current color swatches.

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(): any;
+    static get cssStyleSheet(): object;
     /**
      * 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);
+    set placement(value: string | string);
     /**
      * Gets the headline of the dialog.
      * @returns {string|string}
      */
-    get placement(): string;
+    get placement(): string | string;
     /**
      * Sets the headline of the dialog.
      * @param value