wj-elements 0.1.134 → 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

@@ -3,6 +3,8 @@ 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';

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

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);
+    set trigger(value: string | string);
     /**
      * Gets the placement of the dropdown.
      * @returns {string|string}
      */
-    get trigger(): string;
+    get trigger(): string | 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(): any;
+    get context(): this | ShadowRoot;
     /**
      * Gets the store instance.
      * @returns {object} The store instance.
      */
-    get store(): any;
+    get store(): object;
     /**
      * @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);
+    set autoProcessFiles(value: any | boolean);
     /**
      * Gets the autoProcessFiles attribute.
      * @returns {any|boolean}
      */
-    get autoProcessFiles(): any;
+    get autoProcessFiles(): any | boolean;
     /**
      * Sets the noUploadButton attribute.
      * @param value

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

@@ -29,8 +29,10 @@ export default class FileUploadItem extends WJElement {
      * @static
      * @returns {Array<string>}
      */
-    static get observedAttributes(): string[];
+    static get observedAttributes(): Array<string>;
     localizer: Localizer;
+    set size(value: string);
+    get size(): string;
     /**
      * Dependencies for the component.
      * @type {object}
@@ -39,10 +41,10 @@ export default class FileUploadItem extends WJElement {
     /**
      * Called when an observed attribute has been added, removed, updated, or replaced.
      * @param {string} name The name of the attribute that has changed.
-     * @param {string} old The old value of the attribute.
-     * @param {string} newName The new value of the attribute.
+     * @param {string} oldValue The old value of the attribute.
+     * @param {string} newValue The new value of the attribute.
      */
-    attributeChangedCallback(name: string, old: string, newName: string): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /**
      * Method to draw the component on the screen.
      * @returns {DocumentFragment} The fragment containing the component.

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(): string[];
+    static get observedAttributes(): Array<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(): string[];
+    static get observedAttributes(): Array<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(): string[];
+    static get observedAttributes(): Array<string>;
     /**
      * Draws the component.
      * @returns {DocumentFragment}

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

@@ -22,7 +22,7 @@ export default class Icon extends WJElement {
      * @static
      * @returns {Array<string>}
      */
-    static get observedAttributes(): string[];
+    static get observedAttributes(): Array<string>;
     /**
      * Draws the component.
      * @param {object} context The context for drawing.

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

@@ -36,7 +36,7 @@ export default class IconPicker extends WJElement {
      * @static
      * @returns {Array<string>}
      */
-    static get observedAttributes(): string[];
+    static get observedAttributes(): Array<string>;
     /**
      * Dependencies of the IconPicker component.
      * @property {object} dependencies

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

@@ -29,7 +29,7 @@ export default class ImgComparer extends WJElement {
      * @static
      * @returns {Array<string>}
      */
-    static get observedAttributes(): string[];
+    static get observedAttributes(): Array<string>;
     /**
      * Dependencies of the ImgComparer component.
      * @property {object} dependencies

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

@@ -25,7 +25,7 @@ export default class InfiniteScroll extends WJElement {
      * @static
      * @returns {Array<string>}
      */
-    static get observedAttributes(): string[];
+    static get observedAttributes(): Array<string>;
     totalPages: number;
     isLoading: any[];
     _response: {};
@@ -47,12 +47,12 @@ export default class InfiniteScroll extends WJElement {
      * Dependencies of the InfiniteScroll component.
      * @param value
      */
-    set response(value: any);
+    set response(value: any | {});
     /**
      * Getter for the response property.
      * @returns {*|{}}
      */
-    get response(): any;
+    get response(): any | {};
     /**
      * Dependencies of the InfiniteScroll component.
      * @param value

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

@@ -17,7 +17,7 @@ export default class InputFile extends WJElement {
      * @static
      * @returns {object} styles
      */
-    static get cssStyleSheet(): any;
+    static get cssStyleSheet(): object;
     /**
      * Returns the observed attributes.
      * @static

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

@@ -36,7 +36,7 @@ export default class Item extends WJElement {
      * @static
      * @returns {object} styles
      */
-    static get cssStyleSheet(): any;
+    static get cssStyleSheet(): object;
     labelColorStyles: {};
     itemStyles: Map<any, any>;
     inheritedAriaAttributes: {};

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

@@ -24,7 +24,7 @@ export default class Kanban extends WJElement {
      * @static
      * @returns {Array<string>}
      */
-    static get observedAttributes(): string[];
+    static get observedAttributes(): Array<string>;
     totalPages: number;
     isLoading: any[];
     _response: {};
@@ -41,12 +41,12 @@ export default class Kanban extends WJElement {
      * Sets the URL for fetching data.
      * @param value {string}
      */
-    set response(value: any);
+    set response(value: string);
     /**
      * Gets the URL for fetching data.
      * @returns {*|{}|{}}
      */
-    get response(): any;
+    get response(): any | {} | {};
     /**
      * Sets the URL for fetching data.
      * @param value {array}

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

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

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

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