npm - wj-elements - Versions diffs - 0.2.0-alpha.11 → 0.2.0-alpha.13 - Mend

wj-elements 0.2.0-alpha.11 → 0.2.0-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/dark.css +9 -1
package/dist/light.css +2 -1
package/dist/localize.js +3 -2
package/dist/localize.js.map +1 -1
package/dist/packages/wje-card/card.element.d.ts +0 -8
package/dist/packages/wje-element/element.d.ts +42 -24
package/dist/skeleton.css +187 -0
package/dist/wje-carousel.js +14 -4
package/dist/wje-carousel.js.map +1 -1
package/dist/wje-element.js +55 -242
package/dist/wje-element.js.map +1 -1
package/package.json +1 -1

package/dist/dark.css CHANGED Viewed

@@ -4,7 +4,8 @@
 :host,
 .wje-theme-dark,
-.dark {
+.dark,
+[data-theme=dark] {
     color-scheme: dark;
     --wje-font-family:
@@ -134,6 +135,13 @@
     --wje-color-contrast-10: hsla(0, 0%, 98%, 1);
     --wje-color-contrast-11: hsla(0, 0%, 100%, 1);
+    /*
+    [ Skeleton ]
+    */
+    --wje-skeleton-bg: var(--wje-color-contrast-3);
+    --wje-skeleton-bg-strong: var(--wje-color-contrast-4);
+    --wje-skeleton-highlight: rgba(255, 255, 255, 0.45);
     /*
    [ Elements ]
    */

package/dist/light.css CHANGED Viewed

@@ -5,7 +5,8 @@
 :root,
 :host,
 .wje-theme-light,
-.light {
+.light,
+[data-theme=light] {
     * {
         box-sizing: border-box !important;
     }

package/dist/localize.js CHANGED Viewed

@@ -4,9 +4,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 class LocalizerDefault {
   constructor(element) {
     __publicField(this, "convertLangCode", (lang) => lang.replace("-", "_").replace(/_([a-z]{2})$/, (_, code) => `_${code.toUpperCase()}`));
+    var _a, _b, _c, _d;
     this.element = element;
-    this.lang = this.element.lang || document.documentElement.lang || "en-GB";
-    this.dir = this.element.dir || document.documentElement.dir || "ltr";
+    this.lang = ((_a = this.element) == null ? void 0 : _a.lang) || ((_b = document.documentElement) == null ? void 0 : _b.lang) || "en-GB";
+    this.dir = ((_c = this.element) == null ? void 0 : _c.dir) || ((_d = document.documentElement) == null ? void 0 : _d.dir) || "ltr";
     this.currentLang = "en-GB";
     this.setLanguage();
   }

package/dist/localize.js.map CHANGED Viewed

	@@ -1 +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 convertLangCode = (lang) => lang.replace(\"-\", \"_\").replace(/_([a-z]{2})$/, (_, code) => `_${code.toUpperCase()}`);\n\n /*\n Translates a given translation key based on the currently selected language.\n * @param {string} key The key representing the text to be translated.\n * @returns {string} The translated text if available; otherwise, returns the original key.\n /\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 /\n Translates a key into a localized string based on the provided count and pluralization type.\n * @param {string} key The base translation key to be used for fetching the localized string.\n * @param {number} [count=0] The count value used to determine the pluralization form.\n * @param {string} [type='cardinal'] The type of pluralization to use, such as 'cardinal' or 'ordinal'.\n * @returns {string} The translated string, adapted to the pluralization rules and count.\n /\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 /\n Formats a number according to the specified locale and formatting options.\n * @param {number} number The numeric value to format.\n * @param {object} options An object containing formatting options for the number.\n * @returns {string} The formatted number as a string.\n /\n formatNumber(number, options) {\n return new Intl.NumberFormat(this.currentLang, options).format(number);\n }\n\n /\n Formats a given date based on the specified options and the current language setting.\n * @param {string\|Date\|number} date The date to format. Can be a Date object, a timestamp, or a date string.\n * @param {object} options The formatting options to customize the output, as supported by Intl.DateTimeFormat.\n * @returns {string} The formatted date string based on the specified options and current language.\n /\n formatDate(date, options) {\n return new Intl.DateTimeFormat(this.currentLang, options).format(new Date(date));\n }\n\n /\n Formats a relative time string based on a given language, value, unit, and formatting options.\n * @param {string} lang The language to use for formatting. Defaults to `this.currentLang` if not provided.\n * @param {number} value The numerical value to format, representing the time difference.\n * @param {string} [unit] The unit of time to use (e.g., \"second\", \"minute\", \"hour\", \"day\", \"week\", \"month\", \"year\").\n * @param {object} [options] An object containing formatting options, such as the style for the numeric representation.\n * @returns {string} The formatted relative time string in the specified language.\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;AAuBrB,2CAAkB,CAAC,SAAS,KAAK,QAAQ,KAAK,GAAG,EAAE,QAAQ,gBAAgB,CAAC,GAAG,SAAS,IAAI,KAAK,YAAa,CAAA,EAAE;~~AAtB5G~~,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;AAAA;AAAA;AAAA;AAAA,EASI,UAAU,KAAK;AAjCnB;AAkCQ,UAAM,WAAU,UAAK,cAAL,mBAAgB,IAAI,KAAK;AACzC,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,UAAU,QAAQ,GAAG,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,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;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,aAAa,QAAQ,SAAS;AAC1B,WAAO,IAAI,KAAK,aAAa,KAAK,aAAa,OAAO,EAAE,OAAO,MAAM;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,WAAW,MAAM,SAAS;AACtB,WAAO,IAAI,KAAK,eAAe,KAAK,aAAa,OAAO,EAAE,OAAO,IAAI,KAAK,IAAI,CAAC;AAAA,EACvF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,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;ACpGO,MAAM,kBAAkB,iBAAiB;AAAA,EAC5C,YAAY,SAAS;AACjB,UAAM,OAAO;AAAA,EACrB;AAAA,EACI,OAAO,uBAAuB,aAAa;AACvC,wBAAoB,GAAG,WAAW;AAAA,EAC1C;AACA;"}
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 convertLangCode = (lang) => lang.replace(\"-\", \"_\").replace(/_([a-z]{2})$/, (_, code) => `_${code.toUpperCase()}`);\n\n /*\n Translates a given translation key based on the currently selected language.\n * @param {string} key The key representing the text to be translated.\n * @returns {string} The translated text if available; otherwise, returns the original key.\n /\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 /\n Translates a key into a localized string based on the provided count and pluralization type.\n * @param {string} key The base translation key to be used for fetching the localized string.\n * @param {number} [count=0] The count value used to determine the pluralization form.\n * @param {string} [type='cardinal'] The type of pluralization to use, such as 'cardinal' or 'ordinal'.\n * @returns {string} The translated string, adapted to the pluralization rules and count.\n /\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 /\n Formats a number according to the specified locale and formatting options.\n * @param {number} number The numeric value to format.\n * @param {object} options An object containing formatting options for the number.\n * @returns {string} The formatted number as a string.\n /\n formatNumber(number, options) {\n return new Intl.NumberFormat(this.currentLang, options).format(number);\n }\n\n /\n Formats a given date based on the specified options and the current language setting.\n * @param {string\|Date\|number} date The date to format. Can be a Date object, a timestamp, or a date string.\n * @param {object} options The formatting options to customize the output, as supported by Intl.DateTimeFormat.\n * @returns {string} The formatted date string based on the specified options and current language.\n /\n formatDate(date, options) {\n return new Intl.DateTimeFormat(this.currentLang, options).format(new Date(date));\n }\n\n /\n Formats a relative time string based on a given language, value, unit, and formatting options.\n * @param {string} lang The language to use for formatting. Defaults to `this.currentLang` if not provided.\n * @param {number} value The numerical value to format, representing the time difference.\n * @param {string} [unit] The unit of time to use (e.g., \"second\", \"minute\", \"hour\", \"day\", \"week\", \"month\", \"year\").\n * @param {object} [options] An object containing formatting options, such as the style for the numeric representation.\n * @returns {string} The formatted relative time string in the specified language.\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;AAuBrB,2CAAkB,CAAC,SAAS,KAAK,QAAQ,KAAK,GAAG,EAAE,QAAQ,gBAAgB,CAAC,GAAG,SAAS,IAAI,KAAK,YAAa,CAAA,EAAE;AA1BpH;AAIQ,SAAK,UAAU;AAEf,SAAK,SAAO,UAAK,YAAL,mBAAc,WAAQ,cAAS,oBAAT,mBAA0B,SAAQ;AACpE,SAAK,QAAM,UAAK,YAAL,mBAAc,UAAO,cAAS,oBAAT,mBAA0B,QAAO;AACjE,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;AAAA;AAAA;AAAA;AAAA,EASI,UAAU,KAAK;AAjCnB;AAkCQ,UAAM,WAAU,UAAK,cAAL,mBAAgB,IAAI,KAAK;AACzC,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,UAAU,QAAQ,GAAG,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,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;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,aAAa,QAAQ,SAAS;AAC1B,WAAO,IAAI,KAAK,aAAa,KAAK,aAAa,OAAO,EAAE,OAAO,MAAM;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,WAAW,MAAM,SAAS;AACtB,WAAO,IAAI,KAAK,eAAe,KAAK,aAAa,OAAO,EAAE,OAAO,IAAI,KAAK,IAAI,CAAC;AAAA,EACvF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,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;ACpGO,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/wje-card/card.element.d.ts CHANGED Viewed

@@ -20,12 +20,4 @@ export default class Card extends WJElement {
      * @returns {object} styles - The CSS styles
      */
     static get cssStyleSheet(): object;
-    /**
-     * Draw method for the Card element.
-     * @param {object} context The context object
-     * @param {object} store The store object
-     * @param {object} params The parameters
-     * @returns {object} fragment - The document fragment
-     */
-    draw(context: object, store: object, params: object): object;
 }

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

@@ -185,25 +185,6 @@ export default class WJElement extends HTMLElement {
      * }
      */
     draw(context: any, appStoreObj: any, params: any): any;
-    /**
-     * Renders the component within the provided context.
-     * @param context The rendering context, usually the element's shadow root or main DOM element.
-     * @param appStore The global application store for managing state.
-     * @param params Additional parameters or attributes for rendering the component.
-     * @returns This implementation does not render anything and returns `null`.
-     * @description
-     * The `draw` method is responsible for rendering the component's content.
-     * Override this method in subclasses to define custom rendering logic.
-     * @example
-     * class MyComponent extends WJElement {
-     *   draw(context, appStore, params) {
-     *     const div = document.createElement('div');
-     *     div.textContent = 'Hello, world!';
-     *     context.appendChild(div);
-     *   }
-     * }
-     */
-    draw(context: any, appStore: any, params: any): any;
     /**
      * Hook for extending behavior after drawing the component.
      * @param context The rendering context, usually the element's shadow root or main DOM element.
@@ -217,18 +198,29 @@ export default class WJElement extends HTMLElement {
      * Return: string | Node | DocumentFragment | null | Promise of those.
      */
     renderSkeleton(params: any): any;
-    set skeletonDelay(value: number);
+    /**
+     * Sets the delay for the skeleton loading indicator.
+     * @param {string|number|null|undefined} value The delay value to be set. Accepts a numerical value,
+     * a string that can be converted to a number, null, or undefined.
+     * If null or undefined is provided, the skeleton delay will be cleared.
+     */
+    set skeletonDelay(value: string | number | null | undefined);
     /**
      * Retrieves the delay duration for the skeleton display, determining the value based on a hierarchy of overrides and defaults.
      * The method prioritizes in the following order:
-     * 1. A finite number set as the `_wjSkeletonSlotClone` property.
+     * 1. A finite number set as the `_wjSkeletonDelayOverride` property.
      * 2. A valid numeric value from the `skeleton-delay` attribute.
      * 3. The `skeletonDelayMs` property, if defined with a finite number.
      * 4. A default value of 150 if none of the above are set.
      * @returns {number} The delay in milliseconds before the skeleton is displayed.
      */
     get skeletonDelay(): number;
-    set skeletonMinDuration(value: number);
+    /**
+     * Sets the minimum duration for the skeleton state. If the provided value is null, undefined, or an empty string,
+     * the override for the minimum duration is removed.
+     * @param {string|number|null|undefined} value The minimum duration to be set for the skeleton state. It can be a numeric value, string representation of a number, or null/undefined to reset the value.
+     */
+    set skeletonMinDuration(value: string | number | null | undefined);
     /**
      * Retrieves the minimum duration for the skeleton animation.
      * The method checks for an internally stored finite value. If unavailable,
@@ -238,9 +230,22 @@ export default class WJElement extends HTMLElement {
      * @returns {number} The minimum duration for the skeleton animation in milliseconds.
      */
     get skeletonMinDuration(): number;
-    _wjSkeletonSlotClone: number | Node;
+    _wjSkeletonMinDurationOverride: number;
+    /**
+     * Sets or removes the 'skeleton' attribute based on the provided value.
+     * @param {boolean} value A boolean value indicating whether to set ('true') or remove ('false') the 'skeleton' attribute.
+     */
     set skeleton(value: boolean);
+    /**
+     * Checks if the 'skeleton' attribute is present on the element.
+     * @returns {boolean} True if the 'skeleton' attribute exists, false otherwise.
+     */
     get skeleton(): boolean;
+    _wjSkeletonDelayOverride: number;
+    /**
+     * Retrieves the delay value used for skeleton loading.
+     * @returns {number} The delay value for the skeleton loader.
+     */
     get skeletonDelayValue(): number;
     /**
      * Lifecycle method invoked when the component is connected to the DOM.
@@ -286,7 +291,17 @@ export default class WJElement extends HTMLElement {
      * @param newName The new value of the attribute.
      */
     attributeChangedCallback(name: any, old: any, newName: any): void;
+    /**
+     * Triggers a refresh operation by initializing the update lifecycle and setting up promises
+     * to track its completion or failure status. Marks the instance as not pristine and queues
+     * an update.
+     * @returns {void} Does not return a value.
+     */
     refresh(): void;
+    /**
+     * Stops the current render loop if it is running by canceling the requestAnimationFrame.
+     * @returns {void} This method does not return a value.
+     */
     stopRenderLoop(): void;
     /**
      * Displays the component's content, optionally forcing a re-render.
@@ -332,7 +347,10 @@ export default class WJElement extends HTMLElement {
      */
     checkGetterSetter(obj: object, property: string): object;
     /**
-     * Sets up property accessors for the component's attributes.
+     * Sets up accessors (getter and setter) for all attributes of the current object.
+     * This method retrieves the attribute names, sanitizes them, and dynamically defines
+     * property accessors for each attribute using `Object.defineProperty`.
+     * @returns {void} This method does not return any value.
      */
     setUpAccessors(): void;
     #private;

package/dist/skeleton.css ADDED Viewed

@@ -0,0 +1,187 @@
+/*
+[ Skeleton ]
+*/
+@keyframes wje-skeleton-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+.wje-skeleton {
+  cursor: progress;
+  user-select: none;
+}
+.wje-skeleton-overlay {
+  display: grid;
+}
+.wje-skeleton-overlay-content,
+.wje-skeleton-overlay-skeleton {
+  grid-area: 1 / 1;
+}
+.wje-skeleton-overlay-skeleton {
+  display: none;            /* shown in loading state */
+  pointer-events: none;     /* skeleton should not be interactive */
+  align-self: stretch;
+  justify-self: stretch;
+}
+.wje-skeleton-overlay-skeleton > .wje-skeleton {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+/* Base "shape" primitives */
+.wje-skeleton-line,
+.wje-skeleton-head,
+.wje-skeleton-circle,
+.wje-skeleton-square {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--wje-skeleton-bg);
+}
+.wje-skeleton-line {
+  display: block;
+  height: var(--wje-skeleton-height);
+  border-radius: var(--wje-skeleton-radius);
+  width: 100%;
+  flex: 0 0 auto;
+}
+.wje-skeleton-flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--wje-skeleton-gap);
+}
+.wje-skeleton-flex-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wje-skeleton-gap);
+}
+.wje-skeleton-line + .wje-skeleton-line,
+.wje-skeleton-line + .wje-skeleton-head,
+.wje-skeleton-head + .wje-skeleton-line,
+.wje-skeleton-head + .wje-skeleton-head,
+.wje-skeleton-circle + .wje-skeleton-line,
+.wje-skeleton-line + .wje-skeleton-circle {
+  /*margin-top: var(--wje-skeleton-gap);*/
+}
+.wje-skeleton-head {
+  display: block;
+  height: var(--wje-skeleton-head-height);
+  border-radius: var(--wje-skeleton-radius);
+  width: 100%;
+}
+.wje-skeleton-circle {
+  display: block;
+  flex: 1 1 0;
+  max-width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+}
+.wje-skeleton-square {
+  display: block;
+  width: 100%;
+  height: 150px;
+  border-radius: var(--wje-skeleton-radius);
+}
+/* Shimmer layer */
+.wje-skeleton-line::after,
+.wje-skeleton-head::after,
+.wje-skeleton-circle::after,
+.wje-skeleton-square::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  animation: wje-skeleton-shimmer var(--wje-skeleton-duration) infinite;
+  background: linear-gradient(90deg, transparent, var(--wje-skeleton-highlight), transparent);
+}
+/* "Stronger" variant */
+.wje-skeleton-strong .wje-skeleton-line,
+.wje-skeleton-strong .wje-skeleton-head,
+.wje-skeleton-strong .wje-skeleton-circle,
+.wje-skeleton-strong .wje-skeleton-square {
+  background-color: var(--wje-skeleton-bg-strong);
+}
+/* Simple layout helpers (opt-in) */
+.wje-skeleton .flex { display: flex; }
+.wje-skeleton .inline-flex { display: inline-flex; }
+.wje-skeleton .align-center { align-items: center; }
+.wje-skeleton .align-start { align-items: flex-start; }
+.wje-skeleton .align-end { align-items: flex-end; }
+.wje-skeleton .justify-start { justify-content: flex-start; }
+.wje-skeleton .justify-end { justify-content: flex-end; }
+.wje-skeleton .justify-between { justify-content: space-between; }
+.wje-skeleton .justify-center { justify-content: center; }
+.wje-skeleton .justify-around { justify-content: space-around; }
+.wje-skeleton .gap { gap: var(--wje-skeleton-gap); }
+.wje-skeleton .w-5 { width: 5%; }
+.wje-skeleton .w-10 { width: 10%; }
+.wje-skeleton .w-15 { width: 15%; }
+.wje-skeleton .w-20 { width: 20%; }
+.wje-skeleton .w-25 { width: 25%; }
+.wje-skeleton .w-30 { width: 30%; }
+.wje-skeleton .w-35 { width: 35%; }
+.wje-skeleton .w-40 { width: 40%; }
+.wje-skeleton .w-45 { width: 45%; }
+.wje-skeleton .w-50 { width: 50%; }
+.wje-skeleton .w-55 { width: 55%; }
+.wje-skeleton .w-60 { width: 60%; }
+.wje-skeleton .w-65 { width: 65%; }
+.wje-skeleton .w-70 { width: 70%; }
+.wje-skeleton .w-75 { width: 75%; }
+.wje-skeleton .w-80 { width: 80%; }
+.wje-skeleton .w-85 { width: 85%; }
+.wje-skeleton .w-90 { width: 90%; }
+.wje-skeleton .w-95 { width: 95%; }
+.wje-skeleton .w-100 { width: 100%; }
+.wje-skeleton .mb { margin-bottom: 16px; }
+.wje-skeleton .mt { margin-top: 16px; }
+.wje-skeleton .mr { margin-right: 16px; }
+.wje-skeleton .ml { margin-left: 16px; }
+.wje-skeleton .mbs { margin-bottom: 8px; }
+.wje-skeleton .mts { margin-top: 8px; }
+.wje-skeleton .mrs { margin-right: 8px; }
+.wje-skeleton .mls { margin-left: 8px; }
+/* Optional state helpers */
+.wje-skeleton-loading .wje-skeleton-overlay-content {
+  visibility: hidden;
+  pointer-events: none;
+}
+.wje-skeleton-loading .wje-skeleton-overlay-skeleton {
+  display: block;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wje-skeleton-line::after,
+  .wje-skeleton-head::after,
+  .wje-skeleton-circle::after,
+  .wje-skeleton-square::after {
+    animation: none;
+    transform: none;
+    opacity: 0.35;
+  }
+}

package/dist/wje-carousel.js CHANGED Viewed

@@ -116,10 +116,20 @@ class Carousel extends WJElement {
     slides.append(slot);
     native.append(wrapper);
     if (this.navigation) {
-      this.prevButton = this.createPreviousButton();
-      this.nextButton = this.createNextButton();
-      this.append(this.prevButton);
-      this.append(this.nextButton);
+      let existingPrev = this.querySelector('[slot="prev"]');
+      let existingNext = this.querySelector('[slot="next"]');
+      this.prevButton = existingPrev || this.createPreviousButton();
+      this.nextButton = existingNext || this.createNextButton();
+      if (this.prevButton && !this.prevButton.dataset.wjeCarouselNavBound) {
+        this.prevButton.addEventListener("click", () => this.previousSlide());
+        this.prevButton.dataset.wjeCarouselNavBound = "true";
+      }
+      if (this.nextButton && !this.nextButton.dataset.wjeCarouselNavBound) {
+        this.nextButton.addEventListener("click", () => this.nextSlide());
+        this.nextButton.dataset.wjeCarouselNavBound = "true";
+      }
+      if (!existingPrev) this.append(this.prevButton);
+      if (!existingNext) this.append(this.nextButton);
       wrapper.append(slotPrev);
       wrapper.append(slotNext);
     }

package/dist/wje-carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-carousel.js","sources":["../packages/wje-carousel/carousel.element.js","../packages/wje-carousel/carousel.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary Carousel class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/carousel\n * @status stable\n * @augments WJElement\n * @slot - The carousel main content.\n * @cssproperty [--wje-carousel-size=100%] - Size of the carousel component;\n /\nexport default class Carousel extends WJElement {\n /\n Carousel constructor method.\n /\n constructor() {\n super();\n\n this.slidePerPage = 1;\n }\n\n /\n Active slide attribute.\n * @param value\n /\n set activeSlide(value) {\n this.setAttribute('active-slide', value);\n }\n\n /\n Active slide attribute.\n * @returns {number\|number}\n /\n get activeSlide() {\n return +this.getAttribute('active-slide') \|\| 0;\n }\n\n /\n Pagination attribute.\n * @returns {boolean}\n /\n get pagination() {\n return this.hasAttribute('pagination');\n }\n\n /\n Navigation attribute.\n * @returns {boolean}\n /\n get navigation() {\n return this.hasAttribute('navigation');\n }\n\n /\n Thumbnails attribute.\n * @returns {boolean}\n /\n get thumbnails() {\n return this.hasAttribute('thumbnails');\n }\n\n /\n Loop attribute.\n * @returns {boolean}\n /\n get loop() {\n return this.hasAttribute('loop');\n }\n\n /\n Class name for the Carousel.\n * @type {string}\n /\n className = 'Carousel';\n\n /\n Getter for the CSS stylesheet.\n * @returns {}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /*\n Getter for the observed attributes.\n * @returns {string[]}\n /\n static get observedAttributes() {\n return ['active-slide'];\n }\n\n /\n Sets up the attributes for the Carousel.\n * @param name\n * @param old\n * @param newName\n /\n attributeChangedCallback(name, old, newName) {\n if (name === 'active-slide') {\n if (this.pagination) this.changePagination();\n\n if (this.thumbnails) this.changeThumbnails();\n }\n }\n\n /\n Sets up the attributes for the Carousel.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Before draw method for the Carousel.\n /\n beforeDraw() {\n this.cloneFirstAndLastItems();\n }\n\n /\n Draw method for the Carousel.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-carousel');\n\n let wrapper = document.createElement('div');\n wrapper.classList.add('slides-wrapper');\n\n let slides = document.createElement('div');\n slides.classList.add('carousel-slides');\n\n let slot = document.createElement('slot');\n\n let slotPrev = document.createElement('slot');\n slotPrev.setAttribute('name', 'prev');\n\n let slotNext = document.createElement('slot');\n slotNext.setAttribute('name', 'next');\n\n slides.append(slot);\n native.append(wrapper);\n\n if (this.navigation) {\n this.prevButton = this.createPreviousButton();\n this.nextButton = this.createNextButton();\n\n this.append(this.prevButton);\n this.append(this.nextButton);\n\n wrapper.append(slotPrev);\n wrapper.append(slotNext);\n }\n\n wrapper.append(slides);\n\n if (this.pagination) native.append(this.createPagination());\n\n if (this.thumbnails) native.append(this.createThumbnails());\n\n fragment.append(native);\n\n this.slides = slides;\n\n return fragment;\n }\n\n /\n After draw method for the Carousel.\n /\n afterDraw() {\n this.setIntersectionObserver();\n this.getSlidesWithClones().forEach((slide, i) => {\n this.intersectionObserver.observe(slide);\n });\n\n this.slidePerPage = this.getAttribute('slide-per-page') \|\| 1;\n let carouselSize = 100 / +this.slidePerPage;\n this.style.setProperty('--wje-carousel-size', carouselSize + '%');\n\n this.goToSlide(this.activeSlide, 'auto');\n\n requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToCenter()));\n\n this.slides.addEventListener('scrollend', (e) => {\n this.syncActiveToCenter();\n });\n }\n\n /\n Sync `activeSlide` to the slide whose center is closest to the container center.\n /\n syncActiveToCenter() {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n if (!withClones.length) return;\n\n const containerRect = this.slides.getBoundingClientRect();\n const containerCenterX = containerRect.left + containerRect.width / 2;\n\n let best = null;\n let bestDist = Infinity;\n withClones.forEach((el) => {\n const r = el.getBoundingClientRect();\n const center = r.left + r.width / 2;\n const dist = Math.abs(center - containerCenterX);\n if (dist < bestDist) {\n bestDist = dist;\n best = el;\n }\n });\n\n if (!best) return;\n\n const vIndex = withClones.indexOf(best);\n if (vIndex === -1) return;\n\n const logicalIndex = this.getLogicalIndexForVisual(vIndex);\n this.activeSlide = logicalIndex;\n\n // If we landed on a clone, silently snap to the corresponding real slide\n if (this.loop && (vIndex === 0 \|\| vIndex === withClones.length - 1)) {\n this.goToSlide(logicalIndex, 'auto');\n }\n }\n\n /\n Sets up the IntersectionObserver for the Carousel.\n /\n setIntersectionObserver() {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n this.entriesMap.set(entry.target, entry);\n });\n },\n {\n root: this.context.querySelector('.carousel-slides'),\n threshold: 0.5,\n }\n );\n\n this.entriesMap = new Map();\n this.records = this.intersectionObserver.takeRecords();\n this.records.forEach((entry) => {\n this.entriesMap.set(entry.target, entry);\n });\n }\n\n /\n Goes to the slide.\n * @param index\n * @param behavior\n * @param next\n /\n goToSlide(index, behavior = 'smooth', next = true) {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n\n // remove active class from all slides (including clones)\n withClones.forEach(slide => slide.classList.remove('active'));\n\n // compute logical index: wrap when loop=true, else clamp\n const maxIndex = Math.max(slides.length - 1, 0);\n let logical;\n if (this.loop && slides.length > 0) {\n logical = ((index % slides.length) + slides.length) % slides.length; // safe modulo\n } else {\n logical = Math.min(Math.max(index, 0), maxIndex);\n }\n this.activeSlide = logical;\n\n // compute visual target considering clones when loop=true\n const vIndex = this.getVisualIndexForLogical(logical);\n const targetEl = withClones[vIndex];\n if (!targetEl) return;\n\n targetEl.classList.add('active');\n\n const targetRect = targetEl.getBoundingClientRect();\n const containerRect = this.slides.getBoundingClientRect();\n\n this.slides.scrollTo({\n left: targetRect.left - containerRect.left + this.slides.scrollLeft,\n top: targetRect.top - containerRect.top + this.slides.scrollTop,\n behavior: behavior === 'smooth' ? 'smooth' : 'auto',\n });\n\n if (this.navigation && !this.loop) {\n this.nextButton.removeAttribute('disabled');\n this.prevButton.removeAttribute('disabled');\n\n if (this.activeSlide === slides.length - 1) this.nextButton.setAttribute('disabled', '');\n if (this.activeSlide === 0) this.prevButton.setAttribute('disabled', '');\n }\n }\n\n /\n Clones the first and last items.\n /\n cloneFirstAndLastItems() {\n const items = this.getSlides();\n\n if (items.length && this.loop) {\n // Clone first -> append to end\n const firstItemClone = items[0].cloneNode(true);\n firstItemClone.classList.add('clone');\n this.append(firstItemClone);\n\n // Clone last -> insert before the first original item so it becomes the leading clone\n const lastItemClone = items[items.length - 1].cloneNode(true);\n lastItemClone.classList.add('clone');\n this.insertBefore(lastItemClone, items[0]);\n }\n }\n\n /\n Goes to the next slide.\n /\n removeActiveSlide() {\n this.getSlidesWithClones().forEach((slide, i) => {\n slide.classList.remove('active');\n });\n\n if (this.pagination) {\n this.context.querySelectorAll('.pagination-item').forEach((item) => {\n item.classList.remove('active');\n });\n }\n\n if (this.thumbnails) {\n this.context.querySelectorAll('wje-thumbnail').forEach((item) => {\n item.classList.remove('active');\n });\n }\n }\n\n /\n Goes to the next slide.\n /\n changePagination() {\n if (this.pagination) {\n this.removeActiveSlide();\n this.context.querySelectorAll('.pagination-item').forEach((item, i) => {\n if (i === this.activeSlide) {\n item.classList.add('active');\n }\n });\n }\n }\n\n /\n Goes to the next slide.\n /\n changeThumbnails() {\n if (this.thumbnails) {\n this.removeActiveSlide();\n this.context.querySelectorAll('wje-thumbnail').forEach((item, i) => {\n if (i === this.activeSlide) {\n item.classList.add('active');\n }\n });\n }\n }\n\n /\n Goes to the next slide.\n * @returns {Element}\n /\n createNextButton() {\n const nextButton = document.createElement('wje-button');\n nextButton.setAttribute('part', 'next-button');\n nextButton.setAttribute('circle', '');\n nextButton.setAttribute('fill', 'link');\n nextButton.setAttribute('slot', 'next');\n nextButton.innerHTML = '<wje-icon name=\"chevron-right\" size=\"large\"></wje-icon>';\n nextButton.classList.add('next');\n nextButton.addEventListener('click', (e) => {\n this.nextSlide();\n });\n\n return nextButton;\n }\n\n /\n Goes to the next slide.\n * @returns {Element}\n /\n createPreviousButton() {\n const previousButton = document.createElement('wje-button');\n previousButton.setAttribute('part', 'previous-button');\n previousButton.setAttribute('circle', '');\n previousButton.setAttribute('fill', 'link');\n previousButton.setAttribute('slot', 'prev');\n previousButton.innerHTML = '<wje-icon name=\"chevron-left\" size=\"large\"></wje-icon>';\n previousButton.classList.add('prev');\n previousButton.addEventListener('click', (e) => {\n this.previousSlide();\n });\n\n return previousButton;\n }\n\n /\n Goes to the next slide.\n * @returns {Element}\n /\n createPagination() {\n const pagination = document.createElement('div');\n pagination.setAttribute('part', 'pagination');\n pagination.classList.add('pagination');\n\n const slides = this.getSlides();\n slides.forEach((slide, i) => {\n const paginationItem = document.createElement('div');\n paginationItem.classList.add('pagination-item');\n paginationItem.addEventListener('click', (e) => {\n this.removeActiveSlide();\n e.target.classList.add('active');\n this.goToSlide(i);\n });\n pagination.append(paginationItem);\n });\n\n return pagination;\n }\n\n /\n Goes to the next slide.\n * @returns {Element}\n /\n createThumbnails() {\n const thumbnails = document.createElement('div');\n thumbnails.classList.add('thumbnails');\n\n const slides = this.getSlides();\n slides.forEach((slide, i) => {\n const thumbnail = document.createElement('wje-thumbnail');\n thumbnail.innerHTML = `<img src=\"${slide.querySelector('wje-img').getAttribute('src')}\"></img>`;\n thumbnail.addEventListener('click', (e) => {\n this.removeActiveSlide();\n e.target.closest('wje-thumbnail').classList.add('active');\n this.goToSlide(i);\n });\n thumbnails.append(thumbnail);\n });\n\n return thumbnails;\n }\n\n /\n Goes to the next slide.\n /\n nextSlide() {\n this.goToSlide(this.activeSlide + this.slidePerPage);\n }\n\n /\n Goes to the previous slide.\n /\n previousSlide() {\n this.goToSlide(this.activeSlide - this.slidePerPage);\n }\n\n /\n Goes to the slide.\n * @returns {Array}\n /\n getSlides() {\n return Array.from(this.querySelectorAll('wje-carousel-item:not(.clone)'));\n }\n\n /\n Goes to the slide.\n * @returns {Array}\n /\n getSlidesWithClones() {\n return Array.from(this.querySelectorAll('wje-carousel-item'));\n }\n\n /* Maps logical index -> visual index (accounts for leading clone when loop=true) /\n getVisualIndexForLogical(index) {\n return this.loop ? index + 1 : index;\n }\n\n /* Maps visual index -> logical index (handles clones at 0 and last when loop=true) /\n getLogicalIndexForVisual(vIndex) {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n if (!this.loop) return vIndex;\n if (vIndex === 0) return slides.length - 1; // leading clone\n if (vIndex === withClones.length - 1) return 0; // trailing clone\n return vIndex - 1;\n }\n\n /\n Goes to the slide.\n * @returns {boolean}\n /\n canGoNext() {\n const el = this.context.querySelector('.carousel-slides');\n return el.scrollLeft < (el.scrollWidth - el.clientWidth);\n }\n\n /\n Goes to the slide.\n * @returns {boolean}\n /\n canGoPrevious() {\n const el = this.context.querySelector('.carousel-slides');\n return el.scrollLeft > 0;\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Carousel from './carousel.element.js';\n\n// export from \"./carousel.element.js\";\nexport default Carousel;\n\nWJElement.define('wje-carousel', Carousel);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-carousel.js","sources":["../packages/wje-carousel/carousel.element.js","../packages/wje-carousel/carousel.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary Carousel class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/carousel\n * @status stable\n * @augments WJElement\n * @slot - The carousel main content.\n * @cssproperty [--wje-carousel-size=100%] - Size of the carousel component;\n /\nexport default class Carousel extends WJElement {\n /\n Carousel constructor method.\n /\n constructor() {\n super();\n\n this.slidePerPage = 1;\n }\n\n /\n Active slide attribute.\n * @param value\n /\n set activeSlide(value) {\n this.setAttribute('active-slide', value);\n }\n\n /\n Active slide attribute.\n * @returns {number\|number}\n /\n get activeSlide() {\n return +this.getAttribute('active-slide') \|\| 0;\n }\n\n /\n Pagination attribute.\n * @returns {boolean}\n /\n get pagination() {\n return this.hasAttribute('pagination');\n }\n\n /\n Navigation attribute.\n * @returns {boolean}\n /\n get navigation() {\n return this.hasAttribute('navigation');\n }\n\n /\n Thumbnails attribute.\n * @returns {boolean}\n /\n get thumbnails() {\n return this.hasAttribute('thumbnails');\n }\n\n /\n Loop attribute.\n * @returns {boolean}\n /\n get loop() {\n return this.hasAttribute('loop');\n }\n\n /\n Class name for the Carousel.\n * @type {string}\n /\n className = 'Carousel';\n\n /\n Getter for the CSS stylesheet.\n * @returns {}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /*\n Getter for the observed attributes.\n * @returns {string[]}\n /\n static get observedAttributes() {\n return ['active-slide'];\n }\n\n /\n Sets up the attributes for the Carousel.\n * @param name\n * @param old\n * @param newName\n /\n attributeChangedCallback(name, old, newName) {\n if (name === 'active-slide') {\n if (this.pagination) this.changePagination();\n\n if (this.thumbnails) this.changeThumbnails();\n }\n }\n\n /\n Sets up the attributes for the Carousel.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Before draw method for the Carousel.\n /\n beforeDraw() {\n this.cloneFirstAndLastItems();\n }\n\n /\n Draw method for the Carousel.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-carousel');\n\n let wrapper = document.createElement('div');\n wrapper.classList.add('slides-wrapper');\n\n let slides = document.createElement('div');\n slides.classList.add('carousel-slides');\n\n let slot = document.createElement('slot');\n\n let slotPrev = document.createElement('slot');\n slotPrev.setAttribute('name', 'prev');\n\n let slotNext = document.createElement('slot');\n slotNext.setAttribute('name', 'next');\n\n slides.append(slot);\n native.append(wrapper);\n\n if (this.navigation) {\n let existingPrev = this.querySelector('[slot=\"prev\"]');\n let existingNext = this.querySelector('[slot=\"next\"]');\n\n this.prevButton = existingPrev \|\| this.createPreviousButton();\n this.nextButton = existingNext \|\| this.createNextButton();\n\n if (this.prevButton && !this.prevButton.dataset.wjeCarouselNavBound) {\n this.prevButton.addEventListener('click', () => this.previousSlide());\n this.prevButton.dataset.wjeCarouselNavBound = 'true';\n }\n\n if (this.nextButton && !this.nextButton.dataset.wjeCarouselNavBound) {\n this.nextButton.addEventListener('click', () => this.nextSlide());\n this.nextButton.dataset.wjeCarouselNavBound = 'true';\n }\n\n if (!existingPrev) this.append(this.prevButton);\n if (!existingNext) this.append(this.nextButton);\n\n wrapper.append(slotPrev);\n wrapper.append(slotNext);\n }\n\n wrapper.append(slides);\n\n if (this.pagination) native.append(this.createPagination());\n\n if (this.thumbnails) native.append(this.createThumbnails());\n\n fragment.append(native);\n\n this.slides = slides;\n\n return fragment;\n }\n\n /\n After draw method for the Carousel.\n /\n afterDraw() {\n this.setIntersectionObserver();\n this.getSlidesWithClones().forEach((slide, i) => {\n this.intersectionObserver.observe(slide);\n });\n\n this.slidePerPage = this.getAttribute('slide-per-page') \|\| 1;\n let carouselSize = 100 / +this.slidePerPage;\n this.style.setProperty('--wje-carousel-size', carouselSize + '%');\n\n this.goToSlide(this.activeSlide, 'auto');\n\n requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToCenter()));\n\n this.slides.addEventListener('scrollend', (e) => {\n this.syncActiveToCenter();\n });\n }\n\n /\n Sync `activeSlide` to the slide whose center is closest to the container center.\n /\n syncActiveToCenter() {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n if (!withClones.length) return;\n\n const containerRect = this.slides.getBoundingClientRect();\n const containerCenterX = containerRect.left + containerRect.width / 2;\n\n let best = null;\n let bestDist = Infinity;\n withClones.forEach((el) => {\n const r = el.getBoundingClientRect();\n const center = r.left + r.width / 2;\n const dist = Math.abs(center - containerCenterX);\n if (dist < bestDist) {\n bestDist = dist;\n best = el;\n }\n });\n\n if (!best) return;\n\n const vIndex = withClones.indexOf(best);\n if (vIndex === -1) return;\n\n const logicalIndex = this.getLogicalIndexForVisual(vIndex);\n this.activeSlide = logicalIndex;\n\n // If we landed on a clone, silently snap to the corresponding real slide\n if (this.loop && (vIndex === 0 \|\| vIndex === withClones.length - 1)) {\n this.goToSlide(logicalIndex, 'auto');\n }\n }\n\n /\n Sets up the IntersectionObserver for the Carousel.\n /\n setIntersectionObserver() {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n this.entriesMap.set(entry.target, entry);\n });\n },\n {\n root: this.context.querySelector('.carousel-slides'),\n threshold: 0.5,\n }\n );\n\n this.entriesMap = new Map();\n this.records = this.intersectionObserver.takeRecords();\n this.records.forEach((entry) => {\n this.entriesMap.set(entry.target, entry);\n });\n }\n\n /\n Goes to the slide.\n * @param index\n * @param behavior\n * @param next\n /\n goToSlide(index, behavior = 'smooth', next = true) {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n\n // remove active class from all slides (including clones)\n withClones.forEach(slide => slide.classList.remove('active'));\n\n // compute logical index: wrap when loop=true, else clamp\n const maxIndex = Math.max(slides.length - 1, 0);\n let logical;\n if (this.loop && slides.length > 0) {\n logical = ((index % slides.length) + slides.length) % slides.length; // safe modulo\n } else {\n logical = Math.min(Math.max(index, 0), maxIndex);\n }\n this.activeSlide = logical;\n\n // compute visual target considering clones when loop=true\n const vIndex = this.getVisualIndexForLogical(logical);\n const targetEl = withClones[vIndex];\n if (!targetEl) return;\n\n targetEl.classList.add('active');\n\n const targetRect = targetEl.getBoundingClientRect();\n const containerRect = this.slides.getBoundingClientRect();\n\n this.slides.scrollTo({\n left: targetRect.left - containerRect.left + this.slides.scrollLeft,\n top: targetRect.top - containerRect.top + this.slides.scrollTop,\n behavior: behavior === 'smooth' ? 'smooth' : 'auto',\n });\n\n if (this.navigation && !this.loop) {\n this.nextButton.removeAttribute('disabled');\n this.prevButton.removeAttribute('disabled');\n\n if (this.activeSlide === slides.length - 1) this.nextButton.setAttribute('disabled', '');\n if (this.activeSlide === 0) this.prevButton.setAttribute('disabled', '');\n }\n }\n\n /\n Clones the first and last items.\n /\n cloneFirstAndLastItems() {\n const items = this.getSlides();\n\n if (items.length && this.loop) {\n // Clone first -> append to end\n const firstItemClone = items[0].cloneNode(true);\n firstItemClone.classList.add('clone');\n this.append(firstItemClone);\n\n // Clone last -> insert before the first original item so it becomes the leading clone\n const lastItemClone = items[items.length - 1].cloneNode(true);\n lastItemClone.classList.add('clone');\n this.insertBefore(lastItemClone, items[0]);\n }\n }\n\n /\n Goes to the next slide.\n /\n removeActiveSlide() {\n this.getSlidesWithClones().forEach((slide, i) => {\n slide.classList.remove('active');\n });\n\n if (this.pagination) {\n this.context.querySelectorAll('.pagination-item').forEach((item) => {\n item.classList.remove('active');\n });\n }\n\n if (this.thumbnails) {\n this.context.querySelectorAll('wje-thumbnail').forEach((item) => {\n item.classList.remove('active');\n });\n }\n }\n\n /\n Goes to the next slide.\n /\n changePagination() {\n if (this.pagination) {\n this.removeActiveSlide();\n this.context.querySelectorAll('.pagination-item').forEach((item, i) => {\n if (i === this.activeSlide) {\n item.classList.add('active');\n }\n });\n }\n }\n\n /\n Goes to the next slide.\n /\n changeThumbnails() {\n if (this.thumbnails) {\n this.removeActiveSlide();\n this.context.querySelectorAll('wje-thumbnail').forEach((item, i) => {\n if (i === this.activeSlide) {\n item.classList.add('active');\n }\n });\n }\n }\n\n /\n Goes to the next slide.\n * @returns {Element}\n /\n createNextButton() {\n const nextButton = document.createElement('wje-button');\n nextButton.setAttribute('part', 'next-button');\n nextButton.setAttribute('circle', '');\n nextButton.setAttribute('fill', 'link');\n nextButton.setAttribute('slot', 'next');\n nextButton.innerHTML = '<wje-icon name=\"chevron-right\" size=\"large\"></wje-icon>';\n nextButton.classList.add('next');\n nextButton.addEventListener('click', (e) => {\n this.nextSlide();\n });\n\n return nextButton;\n }\n\n /\n Goes to the next slide.\n * @returns {Element}\n /\n createPreviousButton() {\n const previousButton = document.createElement('wje-button');\n previousButton.setAttribute('part', 'previous-button');\n previousButton.setAttribute('circle', '');\n previousButton.setAttribute('fill', 'link');\n previousButton.setAttribute('slot', 'prev');\n previousButton.innerHTML = '<wje-icon name=\"chevron-left\" size=\"large\"></wje-icon>';\n previousButton.classList.add('prev');\n previousButton.addEventListener('click', (e) => {\n this.previousSlide();\n });\n\n return previousButton;\n }\n\n /\n Goes to the next slide.\n * @returns {Element}\n /\n createPagination() {\n const pagination = document.createElement('div');\n pagination.setAttribute('part', 'pagination');\n pagination.classList.add('pagination');\n\n const slides = this.getSlides();\n slides.forEach((slide, i) => {\n const paginationItem = document.createElement('div');\n paginationItem.classList.add('pagination-item');\n paginationItem.addEventListener('click', (e) => {\n this.removeActiveSlide();\n e.target.classList.add('active');\n this.goToSlide(i);\n });\n pagination.append(paginationItem);\n });\n\n return pagination;\n }\n\n /\n Goes to the next slide.\n * @returns {Element}\n /\n createThumbnails() {\n const thumbnails = document.createElement('div');\n thumbnails.classList.add('thumbnails');\n\n const slides = this.getSlides();\n slides.forEach((slide, i) => {\n const thumbnail = document.createElement('wje-thumbnail');\n thumbnail.innerHTML = `<img src=\"${slide.querySelector('wje-img').getAttribute('src')}\"></img>`;\n thumbnail.addEventListener('click', (e) => {\n this.removeActiveSlide();\n e.target.closest('wje-thumbnail').classList.add('active');\n this.goToSlide(i);\n });\n thumbnails.append(thumbnail);\n });\n\n return thumbnails;\n }\n\n /\n Goes to the next slide.\n /\n nextSlide() {\n this.goToSlide(this.activeSlide + this.slidePerPage);\n }\n\n /\n Goes to the previous slide.\n /\n previousSlide() {\n this.goToSlide(this.activeSlide - this.slidePerPage);\n }\n\n /\n Goes to the slide.\n * @returns {Array}\n /\n getSlides() {\n return Array.from(this.querySelectorAll('wje-carousel-item:not(.clone)'));\n }\n\n /\n Goes to the slide.\n * @returns {Array}\n /\n getSlidesWithClones() {\n return Array.from(this.querySelectorAll('wje-carousel-item'));\n }\n\n /* Maps logical index -> visual index (accounts for leading clone when loop=true) /\n getVisualIndexForLogical(index) {\n return this.loop ? index + 1 : index;\n }\n\n /* Maps visual index -> logical index (handles clones at 0 and last when loop=true) /\n getLogicalIndexForVisual(vIndex) {\n const slides = this.getSlides();\n const withClones = this.getSlidesWithClones();\n if (!this.loop) return vIndex;\n if (vIndex === 0) return slides.length - 1; // leading clone\n if (vIndex === withClones.length - 1) return 0; // trailing clone\n return vIndex - 1;\n }\n\n /\n Goes to the slide.\n * @returns {boolean}\n /\n canGoNext() {\n const el = this.context.querySelector('.carousel-slides');\n return el.scrollLeft < (el.scrollWidth - el.clientWidth);\n }\n\n /\n Goes to the slide.\n * @returns {boolean}\n /\n canGoPrevious() {\n const el = this.context.querySelector('.carousel-slides');\n return el.scrollLeft > 0;\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Carousel from './carousel.element.js';\n\n// export from \"./carousel.element.js\";\nexport default Carousel;\n\nWJElement.define('wje-carousel', Carousel);\n"],"names":[],"mappings":"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"}

package/dist/wje-element.js CHANGED Viewed

@@ -15,201 +15,8 @@ import { Permissions } from "./permissions.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
 import { store, defaultStoreActions } from "./wje-store.js";
-const skeletonCss = `/*
-[ Skeleton ]
-*/
-@keyframes wje-skeleton-shimmer {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-.wje-skeleton {
-  cursor: progress;
-  user-select: none;
-}
-.wje-skeleton-overlay {
-  display: grid;
-}
-.wje-skeleton-overlay-content,
-.wje-skeleton-overlay-skeleton {
-  grid-area: 1 / 1;
-}
-.wje-skeleton-overlay-skeleton {
-  display: none;            /* shown in loading state */
-  pointer-events: none;     /* skeleton should not be interactive */
-  align-self: stretch;
-  justify-self: stretch;
-}
-.wje-skeleton-overlay-skeleton > .wje-skeleton {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-/* Base "shape" primitives */
-.wje-skeleton-line,
-.wje-skeleton-head,
-.wje-skeleton-circle,
-.wje-skeleton-square {
-  position: relative;
-  overflow: hidden;
-  background-color: var(--wje-skeleton-bg);
-}
-.wje-skeleton-line {
-  display: block;
-  height: var(--wje-skeleton-height);
-  border-radius: var(--wje-skeleton-radius);
-  width: 100%;
-  flex: 0 0 auto;
-}
-.wje-skeleton-flex-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--wje-skeleton-gap);
-}
-.wje-skeleton-flex-column {
-  display: flex;
-  flex-direction: column;
-  gap: var(--wje-skeleton-gap);
-}
-.wje-skeleton-line + .wje-skeleton-line,
-.wje-skeleton-line + .wje-skeleton-head,
-.wje-skeleton-head + .wje-skeleton-line,
-.wje-skeleton-head + .wje-skeleton-head,
-.wje-skeleton-circle + .wje-skeleton-line,
-.wje-skeleton-line + .wje-skeleton-circle {
-  /*margin-top: var(--wje-skeleton-gap);*/
-}
-.wje-skeleton-head {
-  display: block;
-  height: var(--wje-skeleton-head-height);
-  border-radius: var(--wje-skeleton-radius);
-  width: 100%;
-}
-.wje-skeleton-circle {
-  display: block;
-  /* Take remaining width in flex row (e.g. 40% if sibling is w-60) */
-  flex: 1 1 0;
-  max-width: 100%;
-  aspect-ratio: 1 / 1;
-  border-radius: 50%;
-}
-.wje-skeleton-square {
-  display: block;
-  width: 100%;
-  height: 150px;
-  border-radius: 8px;
-}
-/* Shimmer layer */
-.wje-skeleton-line::after,
-.wje-skeleton-head::after,
-.wje-skeleton-circle::after,
-.wje-skeleton-square::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  transform: translateX(-100%);
-  animation: wje-skeleton-shimmer var(--wje-skeleton-duration) infinite;
-  background: linear-gradient(90deg, transparent, var(--wje-skeleton-highlight), transparent);
-}
-/* "Stronger" variant */
-.wje-skeleton-strong .wje-skeleton-line,
-.wje-skeleton-strong .wje-skeleton-head,
-.wje-skeleton-strong .wje-skeleton-circle,
-.wje-skeleton-strong .wje-skeleton-square {
-  background-color: var(--wje-skeleton-bg-strong);
-}
-/* Simple layout helpers (opt-in) */
-.wje-skeleton .flex { display: flex; }
-.wje-skeleton .inline-flex { display: inline-flex; }
-.wje-skeleton .align-center { align-items: center; }
-.wje-skeleton .align-start { align-items: flex-start; }
-.wje-skeleton .align-end { align-items: flex-end; }
-.wje-skeleton .justify-start { justify-content: flex-start; }
-.wje-skeleton .justify-end { justify-content: flex-end; }
-.wje-skeleton .justify-between { justify-content: space-between; }
-.wje-skeleton .justify-center { justify-content: center; }
-.wje-skeleton .justify-around { justify-content: space-around; }
-.wje-skeleton .gap { gap: var(--wje-skeleton-gap); }
-.wje-skeleton .w-5 { width: 5%; }
-.wje-skeleton .w-10 { width: 10%; }
-.wje-skeleton .w-15 { width: 15%; }
-.wje-skeleton .w-20 { width: 20%; }
-.wje-skeleton .w-25 { width: 25%; }
-.wje-skeleton .w-30 { width: 30%; }
-.wje-skeleton .w-35 { width: 35%; }
-.wje-skeleton .w-40 { width: 40%; }
-.wje-skeleton .w-45 { width: 45%; }
-.wje-skeleton .w-50 { width: 50%; }
-.wje-skeleton .w-55 { width: 55%; }
-.wje-skeleton .w-60 { width: 60%; }
-.wje-skeleton .w-65 { width: 65%; }
-.wje-skeleton .w-70 { width: 70%; }
-.wje-skeleton .w-75 { width: 75%; }
-.wje-skeleton .w-80 { width: 80%; }
-.wje-skeleton .w-85 { width: 85%; }
-.wje-skeleton .w-90 { width: 90%; }
-.wje-skeleton .w-95 { width: 95%; }
-.wje-skeleton .w-100 { width: 100%; }
-.wje-skeleton .mb { margin-bottom: 16px; }
-.wje-skeleton .mt { margin-top: 16px; }
-.wje-skeleton .mr { margin-right: 16px; }
-.wje-skeleton .ml { margin-left: 16px; }
-.wje-skeleton .mbs { margin-bottom: 8px; }
-.wje-skeleton .mts { margin-top: 8px; }
-.wje-skeleton .mrs { margin-right: 8px; }
-.wje-skeleton .mls { margin-left: 8px; }
-/* Optional state helpers */
-.wje-skeleton-loading .wje-skeleton-overlay-content {
-  visibility: hidden;
-  pointer-events: none;
-}
-.wje-skeleton-loading .wje-skeleton-overlay-skeleton {
-  display: block;
-}
-@media (prefers-reduced-motion: reduce) {
-  .wje-skeleton-line::after,
-  .wje-skeleton-head::after,
-  .wje-skeleton-circle::after,
-  .wje-skeleton-square::after {
-    animation: none;
-    transform: none;
-    opacity: 0.35;
-  }
-}`;
 const template = document.createElement("template");
 template.innerHTML = ``;
-const wjSkeletonSheet = new CSSStyleSheet();
-try {
-  wjSkeletonSheet.replaceSync(skeletonCss);
-} catch (e) {
-}
 const _WJElement = class _WJElement extends HTMLElement {
   /**
    * Initializes a new instance of the WJElement class.
@@ -242,9 +49,6 @@ const _WJElement = class _WJElement extends HTMLElement {
         if (this.shadowRoot) {
           const existing = this.shadowRoot.adoptedStyleSheets || [];
           const next = [...existing];
-          if (!next.includes(wjSkeletonSheet) && wjSkeletonSheet.cssRules !== void 0) {
-            next.push(wjSkeletonSheet);
-          }
           if (!next.includes(sheet)) next.push(sheet);
           this.shadowRoot.adoptedStyleSheets = next;
         }
@@ -476,16 +280,16 @@ const _WJElement = class _WJElement extends HTMLElement {
   /**
    * Retrieves the delay duration for the skeleton display, determining the value based on a hierarchy of overrides and defaults.
    * The method prioritizes in the following order:
-   * 1. A finite number set as the `_wjSkeletonSlotClone` property.
+   * 1. A finite number set as the `_wjSkeletonDelayOverride` property.
    * 2. A valid numeric value from the `skeleton-delay` attribute.
    * 3. The `skeletonDelayMs` property, if defined with a finite number.
    * 4. A default value of 150 if none of the above are set.
    * @returns {number} The delay in milliseconds before the skeleton is displayed.
    */
   get skeletonDelay() {
-    if (Number.isFinite(this._wjSkeletonSlotClone)) return this._wjSkeletonSlotClone;
+    if (Number.isFinite(this._wjSkeletonDelayOverride)) return this._wjSkeletonDelayOverride;
     const v = this.getAttribute("skeleton-delay");
-    const n = v == null ? NaN : Number(v);
+    const n = v === null || v === void 0 ? NaN : Number(v);
     if (Number.isFinite(n)) return n;
     if (Number.isFinite(this.skeletonDelayMs)) return this.skeletonDelayMs;
     return 150;
@@ -499,44 +303,66 @@ const _WJElement = class _WJElement extends HTMLElement {
    * @returns {number} The minimum duration for the skeleton animation in milliseconds.
    */
   get skeletonMinDuration() {
-    if (Number.isFinite(this._wjSkeletonSlotClone)) return this._wjSkeletonSlotClone;
+    if (Number.isFinite(this._wjSkeletonMinDurationOverride)) return this._wjSkeletonMinDurationOverride;
     const v = this.getAttribute("skeleton-min-duration");
-    const n = v == null ? NaN : Number(v);
+    const n = v === null || v === void 0 ? NaN : Number(v);
     if (Number.isFinite(n)) return n;
     return 300;
   }
+  /**
+   * Sets the minimum duration for the skeleton state. If the provided value is null, undefined, or an empty string,
+   * the override for the minimum duration is removed.
+   * @param {string|number|null|undefined} value The minimum duration to be set for the skeleton state. It can be a numeric value, string representation of a number, or null/undefined to reset the value.
+   */
   set skeletonMinDuration(value) {
     if (value === null || value === void 0 || value === "") {
-      delete this._wjSkeletonSlotClone;
+      delete this._wjSkeletonMinDurationOverride;
       this.removeAttribute("skeleton-min-duration");
       return;
     }
     const n = Number(value);
     if (Number.isFinite(n)) {
-      this._wjSkeletonSlotClone = n;
+      this._wjSkeletonMinDurationOverride = n;
       this.setAttribute("skeleton-min-duration", String(n));
     }
   }
-  // Public API: property-based control
+  /**
+   * Sets or removes the 'skeleton' attribute based on the provided value.
+   * @param {boolean} value A boolean value indicating whether to set ('true') or remove ('false') the 'skeleton' attribute.
+   */
   set skeleton(value) {
     if (value) this.setAttribute("skeleton", "");
     else this.removeAttribute("skeleton");
   }
+  /**
+   * Checks if the 'skeleton' attribute is present on the element.
+   * @returns {boolean} True if the 'skeleton' attribute exists, false otherwise.
+   */
   get skeleton() {
     return this.hasAttribute("skeleton");
   }
+  /**
+   * Sets the delay for the skeleton loading indicator.
+   * @param {string|number|null|undefined} value The delay value to be set. Accepts a numerical value,
+   * a string that can be converted to a number, null, or undefined.
+   * If null or undefined is provided, the skeleton delay will be cleared.
+   */
   set skeletonDelay(value) {
     if (value === null || value === void 0 || value === "") {
-      delete this._wjSkeletonSlotClone;
+      delete this._wjSkeletonDelayOverride;
       this.removeAttribute("skeleton-delay");
       return;
     }
     const n = Number(value);
     if (Number.isFinite(n)) {
-      this._wjSkeletonSlotClone = n;
+      this._wjSkeletonDelayOverride = n;
       this.setAttribute("skeleton-delay", String(n));
     }
   }
+  /**
+   * Retrieves the delay value used for skeleton loading.
+   * @returns {number} The delay value for the skeleton loader.
+   */
   get skeletonDelayValue() {
     return this.skeletonDelay;
   }
@@ -621,6 +447,12 @@ const _WJElement = class _WJElement extends HTMLElement {
       __privateMethod(this, _WJElement_instances, enqueueUpdate_fn).call(this);
     }
   }
+  /**
+   * Triggers a refresh operation by initializing the update lifecycle and setting up promises
+   * to track its completion or failure status. Marks the instance as not pristine and queues
+   * an update.
+   * @returns {void} Does not return a value.
+   */
   refresh() {
     this.updateComplete = new Promise((resolve, reject) => {
       this.finisPromise = resolve;
@@ -629,33 +461,16 @@ const _WJElement = class _WJElement extends HTMLElement {
     __privateSet(this, _pristine, false);
     __privateMethod(this, _WJElement_instances, enqueueUpdate_fn).call(this);
   }
+  /**
+   * Stops the current render loop if it is running by canceling the requestAnimationFrame.
+   * @returns {void} This method does not return a value.
+   */
   stopRenderLoop() {
     if (this.rafId) {
       cancelAnimationFrame(this.rafId);
       this.rafId = null;
     }
   }
-  /**
-   * Renders the component within the provided context.
-   * @param context The rendering context, usually the element's shadow root or main DOM element.
-   * @param appStore The global application store for managing state.
-   * @param params Additional parameters or attributes for rendering the component.
-   * @returns This implementation does not render anything and returns `null`.
-   * @description
-   * The `draw` method is responsible for rendering the component's content.
-   * Override this method in subclasses to define custom rendering logic.
-   * @example
-   * class MyComponent extends WJElement {
-   *   draw(context, appStore, params) {
-   *     const div = document.createElement('div');
-   *     div.textContent = 'Hello, world!';
-   *     context.appendChild(div);
-   *   }
-   * }
-   */
-  draw(context, appStore, params) {
-    return null;
-  }
   /**
    * Displays the component's content, optionally forcing a re-render.
    * @param [force] Whether to force a re-render.
@@ -682,14 +497,15 @@ const _WJElement = class _WJElement extends HTMLElement {
       var _a, _b;
       const slotted = this.querySelector('[slot="skeleton"]');
       if (slotted) {
-        this._wjSkeletonSlotClone = slotted.cloneNode(true);
-        const frag2 = document.createDocumentFragment();
-        frag2.append(this._wjSkeletonSlotClone.cloneNode(true));
-        return frag2;
-      }
-      if (this._wjSkeletonSlotClone) {
+        if (this.hasShadowRoot) {
+          const frag3 = document.createDocumentFragment();
+          const slot = document.createElement("slot");
+          slot.name = "skeleton";
+          frag3.append(slot);
+          return frag3;
+        }
         const frag2 = document.createDocumentFragment();
-        frag2.append(this._wjSkeletonSlotClone.cloneNode(true));
+        frag2.append(slotted.cloneNode(true));
         return frag2;
       }
       const frag = document.createDocumentFragment();
@@ -697,7 +513,7 @@ const _WJElement = class _WJElement extends HTMLElement {
       if (skel instanceof Promise || ((_b = skel == null ? void 0 : skel.constructor) == null ? void 0 : _b.name) === "Promise") {
         skel = await skel;
       }
-      if (skel == null) return null;
+      if (skel === null || skel === void 0) return null;
       let node;
       if (skel instanceof HTMLElement || skel instanceof DocumentFragment) {
         node = skel;
@@ -721,12 +537,6 @@ const _WJElement = class _WJElement extends HTMLElement {
       } catch (e) {
       }
       if (this.hasShadowRoot) {
-        if (this.shadowRoot) {
-          const existing = this.shadowRoot.adoptedStyleSheets || [];
-          if (!existing.includes(wjSkeletonSheet) && wjSkeletonSheet.cssRules !== void 0) {
-            this.shadowRoot.adoptedStyleSheets = [...existing, wjSkeletonSheet];
-          }
-        }
         this.shadowRoot.replaceChildren(frag);
       } else {
         this.replaceChildren(frag);
@@ -874,7 +684,10 @@ const _WJElement = class _WJElement extends HTMLElement {
     return { hasGetter: null, hasSetter: null };
   }
   /**
-   * Sets up property accessors for the component's attributes.
+   * Sets up accessors (getter and setter) for all attributes of the current object.
+   * This method retrieves the attribute names, sanitizes them, and dynamically defines
+   * property accessors for each attribute using `Object.defineProperty`.
+   * @returns {void} This method does not return any value.
    */
   setUpAccessors() {
     let attrs = this.getAttributeNames();

package/dist/wje-element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-element.js","sources":["../packages/wje-element/element.js"],"sourcesContent":["import { UniversalService } from '../utils/universal-service.js';\nimport { Permissions } from '../utils/permissions.js';\nimport { WjElementUtils } from '../utils/element-utils.js';\nimport { event } from '../utils/event.js';\nimport { defaultStoreActions, store } from '../wje-store/store.js';\nimport skeletonCss from '../styles/skeleton.css?inline';\n\nconst template = document.createElement('template');\ntemplate.innerHTML = ``;\n\n// Shared skeleton helpers for Shadow DOM (global CSS doesn't cross the shadow boundary)\nconst wjSkeletonSheet = new CSSStyleSheet();\ntry {\n\twjSkeletonSheet.replaceSync(skeletonCss);\n} catch (e) {\n\t// ignore (older browsers / non-constructable stylesheets)\n}\n\nexport default class WJElement extends HTMLElement {\n\t#drawingStatus;\n\t#isAttached;\n\t#isRendering;\n\t#originalVisibility;\n\t#pristine;\n\n\t/*\n\t Initializes a new instance of the WJElement class.\n\t /\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.#isAttached = false;\n\t\tthis.service = new UniversalService({\n\t\t\tstore: store,\n\t\t});\n\n\t\t// definujeme vsetky zavislosti.\n\t\t// Do zavislosti patria len komponenty, ktore su zavisle od ktoreho je zavisly tento komponent\n\t\tthis.defineDependencies();\n\n\t\tthis.#isRendering = false;\n\t\tthis._dependencies = {};\n\n\t\t/\n\t\t @typedef {object} DrawingStatuses\n\t\t * @property {number} CREATED - The component has been created.\n\t\t * @property {number} ATTACHED - The component has been attached to the DOM.\n\t\t * @property {number} BEGINING - The component is beginning to draw.\n\t\t * @property {number} START - The component has started drawing.\n\t\t * @property {number} DRAWING - The component is drawing.\n\t\t * @property {number} DONE - The component has finished drawing.\n\t\t * @property {number} DISCONNECTED - The component has been disconnected from the DOM.\n\t\t /\n\n\t\t/\n\t\t WJElement is a base class for custom web components with managed lifecycle, attribute/property sync,\n\t\t * permission-based visibility, and extensibility hooks.\n\t\t * @property {boolean} isAttached - True if the component is currently attached to the DOM.\n\t\t * @property {DrawingStatuses} drawingStatuses - Enum of possible drawing states.\n\t\t * @property {number} drawingStatus - Current drawing status (see drawingStatuses).\n\t\t * @property {boolean} _pristine - True if the component has not been updated since last render.\n\t\t * @property {boolean} isRendering - True if a render is currently in progress.\n\t\t * @property {number\|null} rafId - ID of the scheduled animation frame for rendering, or null.\n\t\t * @property {string\|null} originalVisibility - Stores the original CSS visibility before rendering.\n\t\t * @property {object} params - Stores the current attributes/properties for rendering.\n\t\t * @property {Promise<void>} updateComplete - Promise resolved when the current update/render is complete.\n\t\t * @property {string[]} permission - List of required permissions (from 'permission' attribute).\n\t\t * @property {boolean} isPermissionCheck - Whether permission checking is enabled (from 'permission-check' attribute).\n\t\t * @property {boolean} noShow - Whether the element should be hidden (from 'no-show' attribute).\n\t\t * @property {string\|undefined} isShadowRoot - Value of the 'shadow' attribute, if present.\n\t\t * @property {boolean} hasShadowRoot - True if the 'shadow' attribute is present.\n\t\t * @property {string} shadowType - Type of shadow root ('open' by default).\n\t\t * @property {object} store - Reference to the global store instance.\n\t\t * @property {object} defaultStoreActions - Default store actions for arrays and objects.\n\t\t * @property {string[]\|undefined} removeClassAfterConnect - Classes to remove after connect (from 'remove-class-after-connect' attribute).\n\t\t * @property {object} dependencies - Registered component dependencies.\n\t\t * @property {HTMLElement\|ShadowRoot} context - The rendering context (shadow root or element itself).\n\t\t /\n\t\tthis.drawingStatuses = {\n\t\t\tCREATED: 0,\n\t\t\tATTACHED: 1,\n\t\t\tBEGINING: 2,\n\t\t\tSTART: 3,\n\t\t\tDRAWING: 4,\n\t\t\tDONE: 5,\n\t\t\tDISCONNECTED: 6,\n\t\t};\n\n\t\tthis.#drawingStatus = this.drawingStatuses.CREATED;\n\n\t\tthis.#pristine = true;\n\t\tthis.#isRendering = false;\n\t\tthis.rafId = null;\n\t\tthis.#originalVisibility = null;\n\t\tthis.params = {};\n\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\t}\n\n\tget drawingStatus() {\n\t\treturn this.#drawingStatus;\n\t}\n\n\t/\n\t Sets the value of the 'permission' attribute.\n\t * @param {string[]} value The value to set for the 'permission' attribute.\n\t /\n\tset permission(value) {\n\t\tthis.setAttribute('permission', value.join(','));\n\t}\n\n\t/\n\t Gets the value of the 'permission-check' attribute.\n\t * @returns {string[]} The value of the 'permission' attribute.\n\t /\n\tget permission() {\n\t\treturn this.getAttribute('permission')?.split(',') \|\| [];\n\t}\n\n\t/\n\t Sets the 'permission-check' attribute.\n\t * @param {boolean} value The value to set for the 'permission-check' attribute.\n\t /\n\tset isPermissionCheck(value) {\n\t\tif (value) this.setAttribute('permission-check', '');\n\t\telse this.removeAttribute('permission-check');\n\t}\n\n\t/\n\t Checks if the 'permission-check' attribute is present.\n\t * @returns {boolean} True if the 'permission-check' attribute is present.\n\t /\n\tget isPermissionCheck() {\n\t\treturn this.hasAttribute('permission-check');\n\t}\n\n\tset noShow(value) {\n\t\tif (value) this.setAttribute('no-show', '');\n\t\telse this.removeAttribute('no-show');\n\t}\n\n\t/\n\t Checks if the 'show' attribute is present.\n\t * @returns {boolean} True if the 'show' attribute is present.\n\t /\n\tget noShow() {\n\t\treturn this.hasAttribute('no-show');\n\t}\n\n\t/\n\t Sets the 'shadow' attribute.\n\t * @param {string} value The value to set for the 'shadow' attribute.\n\t /\n\tset isShadowRoot(value) {\n\t\treturn this.setAttribute('shadow', value);\n\t}\n\n\tget isShadowRoot() {\n\t\treturn this.getAttribute('shadow');\n\t}\n\n\t/\n\t Checks if the 'shadow' attribute is present.\n\t * @returns {boolean} True if the 'shadow' attribute is present.\n\t /\n\tget hasShadowRoot() {\n\t\treturn this.hasAttribute('shadow');\n\t}\n\n\t/\n\t Gets the value of the 'shadow' attribute or 'open' if not set.\n\t * @returns {string} The value of the 'shadow' attribute or 'open'.\n\t /\n\tget shadowType() {\n\t\treturn this.getAttribute('shadow') \|\| 'open';\n\t}\n\n\t/\n\t Gets the rendering context, either the shadow root or the component itself.\n\t * @returns The rendering context.\n\t /\n\tget context() {\n\t\tif (this.hasShadowRoot) {\n\t\t\treturn this.shadowRoot;\n\t\t} else {\n\t\t\treturn this;\n\t\t}\n\t}\n\n\t/\n\t Gets the store instance.\n\t * @returns {object} The store instance.\n\t /\n\tget store() {\n\t\treturn store;\n\t}\n\n\t/\n\t @typedef {object} ArrayActions\n\t * @property {Function} addAction - Adds an item to the array.\n\t * @property {Function} deleteAction - Deletes an item from the array.\n\t * @property {Function} loadAction - Loads an array.\n\t * @property {Function} updateAction - Updates an item in the array.\n\t * @property {Function} addManyAction - Adds many items to the array.\n\t /\n\n\t/\n\t @typedef {object} ObjectActions\n\t * @property {Function} addAction - Replace old object with new object\n\t * @property {Function} deleteAction - Delete item based on key\n\t * @property {Function} updateAction - Update item based on key\n\t /\n\n\t/\n\t Gets the default store actions.\n\t * @returns The default store actions for arrays and objects.\n\t /\n\tget defaultStoreActions() {\n\t\treturn defaultStoreActions;\n\t}\n\n\t/\n\t Gets the classes to be removed after the component is connected.\n\t * @returns An array of class names to remove.\n\t /\n\tget removeClassAfterConnect() {\n\t\treturn this.getAttribute('remove-class-after-connect')?.split(' ');\n\t}\n\n\t/\n\t Sets the component dependencies.\n\t * @param value The dependencies to set.\n\t /\n\tset dependencies(value) {\n\t\tthis._dependencies = value;\n\t}\n\n\t/\n\t Gets the component dependencies.\n\t * @returns The component dependencies.\n\t /\n\tget dependencies() {\n\t\treturn this._dependencies;\n\t}\n\n\t/\n\t Processes and combines two templates into one.\n\t * @param pTemplate The primary template.\n\t * @param inputTemplate The secondary template.\n\t * @returns The combined template.\n\t /\n\tstatic processTemplates = (pTemplate, inputTemplate) => {\n\t\tconst newTemplate = document.createElement('template');\n\t\tnewTemplate.innerHTML = [inputTemplate.innerHTML, pTemplate?.innerHTML \|\| ''].join('');\n\t\treturn newTemplate;\n\t};\n\n\t/\n\t Defines a custom element if not already defined.\n\t * @param name The name of the custom element.\n\t * @param [elementConstructor] The constructor for the custom element.\n\t * @param [options] Additional options for defining the element.\n\t /\n\tstatic define(name, elementConstructor = this, options = {}) {\n\t\tconst definedElement = customElements.get(name);\n\n\t\tif (!definedElement) {\n\t\t\tcustomElements.define(name, elementConstructor, options);\n\t\t}\n\t}\n\n\t/\n\t Defines component dependencies by registering custom elements.\n\t /\n\tdefineDependencies() {\n\t\tif (this.dependencies) {\n\t\t\tObject.entries(this.dependencies).forEach(([name, component]) => WJElement.define(name, component));\n\t\t}\n\t}\n\n\t/\n\t Hook for extending behavior before drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t /\n\tbeforeDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior before drawing\n\t}\n\n\t/\n\t Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t * draw(context, appStoreObj, params) {\n\t * const div = document.createElement('div');\n\t * div.textContent = 'Hello, world!';\n\t * context.appendChild(div);\n\t * }\n\t * }\n\t /\n\tdraw(context, appStoreObj, params) {\n\t\treturn null;\n\t}\n\n\t/\n\t Hook for extending behavior after drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t /\n\tafterDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior after drawing\n\t}\n\n\t/\n\t Optional hook: return skeleton markup used while async draw is in progress.\n\t * Prefer declarative skeleton via `<div slot=\"skeleton\">...</div>`.\n\t * Return: string \| Node \| DocumentFragment \| null \| Promise of those.\n\t /\n\trenderSkeleton(params) {\n\t\treturn null;\n\t}\n\n\t/\n\t Retrieves the delay duration for the skeleton display, determining the value based on a hierarchy of overrides and defaults.\n\t * The method prioritizes in the following order:\n\t * 1. A finite number set as the `_wjSkeletonSlotClone` property.\n\t * 2. A valid numeric value from the `skeleton-delay` attribute.\n\t * 3. The `skeletonDelayMs` property, if defined with a finite number.\n\t * 4. A default value of 150 if none of the above are set.\n\t * @returns {number} The delay in milliseconds before the skeleton is displayed.\n\t /\n\tget skeletonDelay() {\n\t\t// 1) property override\n\t\tif (Number.isFinite(this._wjSkeletonSlotClone)) return this._wjSkeletonSlotClone;\n\n\t\t// 2) attribute override\n\t\tconst v = this.getAttribute('skeleton-delay');\n\t\tconst n = v == null ? NaN : Number(v);\n\t\tif (Number.isFinite(n)) return n;\n\n\t\t// 3) backward compat (if some components still set this)\n\t\tif (Number.isFinite(this.skeletonDelayMs)) return this.skeletonDelayMs;\n\n\t\t// 4) default\n\t\treturn 150;\n\t}\n\n\t/\n\t Retrieves the minimum duration for the skeleton animation.\n\t * The method checks for an internally stored finite value. If unavailable,\n\t * it retrieves the value from the 'skeleton-min-duration' attribute,\n\t * converts it to a number if possible, and uses it. If neither is valid,\n\t * a default duration of 300 is returned.\n\t * @returns {number} The minimum duration for the skeleton animation in milliseconds.\n\t /\n\tget skeletonMinDuration() {\n\t\tif (Number.isFinite(this._wjSkeletonSlotClone)) return this._wjSkeletonSlotClone;\n\n\t\tconst v = this.getAttribute('skeleton-min-duration');\n\t\tconst n = v == null ? NaN : Number(v);\n\t\tif (Number.isFinite(n)) return n;\n\n\t\t// 3) default\n\t\treturn 300;\n\t}\n\n\tset skeletonMinDuration(value) {\n\t\t// allow null/undefined to reset\n\t\tif (value === null \|\| value === undefined \|\| value === '') {\n\t\t\tdelete this._wjSkeletonSlotClone;\n\t\t\tthis.removeAttribute('skeleton-min-duration');\n\t\t\treturn;\n\t\t}\n\t\tconst n = Number(value);\n\t\tif (Number.isFinite(n)) {\n\t\t\tthis._wjSkeletonSlotClone = n;\n\t\t\tthis.setAttribute('skeleton-min-duration', String(n));\n\t\t}\n\t}\n\n\t// Public API: property-based control\n\tset skeleton(value) {\n\t\tif (value) this.setAttribute('skeleton', '');\n\t\telse this.removeAttribute('skeleton');\n\t}\n\tget skeleton() {\n\t\treturn this.hasAttribute('skeleton');\n\t}\n\n\tset skeletonDelay(value) {\n\t\t// allow null/undefined to reset\n\t\tif (value === null \|\| value === undefined \|\| value === '') {\n\t\t\tdelete this._wjSkeletonSlotClone;\n\t\t\tthis.removeAttribute('skeleton-delay');\n\t\t\treturn;\n\t\t}\n\t\tconst n = Number(value);\n\t\tif (Number.isFinite(n)) {\n\t\t\tthis._wjSkeletonSlotClone = n;\n\t\t\tthis.setAttribute('skeleton-delay', String(n));\n\t\t}\n\t}\n\tget skeletonDelayValue() {\n\t\treturn this.skeletonDelay;\n\t}\n\n\n\t/\n\t Lifecycle method invoked when the component is connected to the DOM.\n\t /\n\tconnectedCallback() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.#originalVisibility = this.#originalVisibility ?? this.style.visibility;\n\t\t\tthis.style.visibility = 'hidden';\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.ATTACHED;\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\t/\n\t Initializes the component, setting up attributes and rendering.\n\t * @param [force] Whether to force initialization.\n\t * @returns A promise that resolves when initialization is complete.\n\t /\n\tinitWjElement = (force = false) => {\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tthis.#drawingStatus = this.drawingStatuses.BEGINING;\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tif (this.hasShadowRoot) {\n\t\t\t\tif (!this.shadowRoot) this.attachShadow({ mode: this.shadowType \|\| 'open', delegatesFocus: true });\n\t\t\t}\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.START;\n\n\t\t\t// Adopt component + skeleton styles BEFORE display, so skeleton is visible in Shadow DOM.\n\t\t\tconst sheet = new CSSStyleSheet();\n\t\t\tsheet.replaceSync(this.constructor.cssStyleSheet);\n\n\t\t\tif (this.shadowRoot) {\n\t\t\t\tconst existing = this.shadowRoot.adoptedStyleSheets \|\| [];\n\t\t\t\tconst next = [...existing];\n\n\t\t\t\tif (!next.includes(wjSkeletonSheet) && wjSkeletonSheet.cssRules !== undefined) {\n\t\t\t\t\tnext.push(wjSkeletonSheet);\n\t\t\t\t}\n\n\t\t\t\tif (!next.includes(sheet)) next.push(sheet);\n\n\t\t\t\tthis.shadowRoot.adoptedStyleSheets = next;\n\t\t\t}\n\n\t\t\tawait this.display(force);\n\n\t\t\tresolve();\n\t\t});\n\t};\n\n\t/\n\t Sets up attributes and event listeners for the component.\n\t * This method retrieves all custom events defined for the component\n\t * and adds event listeners for each of them. When an event is triggered,\n\t * it calls the corresponding method on the host element.\n\t /\n\tsetupAttributes() {\n\t\t// Keď neaký element si zadefinuje funkciu \"setupAttributes\" tak sa obsah tejto funkcie nezavolá\n\n\t\tlet allEvents = WjElementUtils.getEvents(this);\n\t\tallEvents.forEach((customEvent, domEvent) => {\n\t\t\tthis.addEventListener(domEvent, (e) => {\n\t\t\t\tthis.getRootNode().host[customEvent]?.();\n\t\t\t});\n\t\t});\n\t}\n\n\t/\n\t Hook for extending behavior before disconnecting the component.\n\t /\n\tbeforeDisconnect() {\n\t\t// Hook for extending behavior before disconnecting\n\t}\n\n\t/\n\t Hook for extending behavior after disconnecting the component.\n\t /\n\tafterDisconnect() {\n\t\t// Hook for extending behavior after disconnecting\n\t}\n\n\t/\n\t Hook for extending behavior before redrawing the component.\n\t /\n\tbeforeRedraw() {\n\t\t// Hook for extending behavior before redrawing\n\t}\n\n\t/\n\t Cleans up resources and event listeners for the component.\n\t /\n\tcomponentCleanup() {\n\t\t// Hook for cleaning up the component\n\t}\n\n\t/\n\t Lifecycle method invoked when the component is disconnected from the DOM.\n\t /\n\tdisconnectedCallback() {\n\t\tif (this.#isAttached) {\n\t\t\tthis.beforeDisconnect?.();\n\t\t\tthis.context.innerHTML = '';\n\t\t\tthis.afterDisconnect?.();\n\t\t\tthis.#isAttached = false;\n\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\tthis.#originalVisibility = null;\n\t\t}\n\n\t\tif (this.#isRendering) {\n\t\t\tthis.stopRenderLoop();\n\t\t}\n\n\t\tthis.#drawingStatus = this.drawingStatuses.DISCONNECTED;\n\n\t\tthis.componentCleanup();\n\t}\n\n\t/\n\t Enqueues an update for the component.\n\t * This method processes the current render promise and then refreshes the component.\n\t /\n\t#enqueueUpdate() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t}\n\t}\n\n\t/\n\t Lifecycle method invoked when an observed attribute changes.\n\t * @param name The name of the attribute that changed.\n\t * @param old The old value of the attribute.\n\t * @param newName The new value of the attribute.\n\t /\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (old !== newName) {\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\trefresh() {\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\n\t\tthis.#pristine = false;\n\t\tthis.#enqueueUpdate();\n\t}\n\n\t/\n\t Refreshes the component by reinitializing it if it is in a drawing state.\n\t * This method checks if the component's drawing status is at least in the START state.\n\t * If so, it performs the following steps:\n\t * 1. Calls the `beforeRedraw` hook if defined.\n\t * 2. Calls the `beforeDisconnect` hook if defined.\n\t * 3. Refreshes the update promise to manage the rendering lifecycle.\n\t * 4. Calls the `afterDisconnect` hook if defined.\n\t * 5. Reinitializes the component by calling `initWjElement` with `true` to force initialization.\n\t * If the component is not in a drawing state, it simply returns a resolved promise.\n\t /\n\tasync #refresh() {\n\t\tif (this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t\treturn; // Skip if async render is still processing\n\t\t}\n\n\t\tif (!this.#pristine) {\n\t\t\tthis.#pristine = true;\n\t\t\tthis.#isRendering = true;\n\n\t\t\tif (this.#isAttached) {\n\t\t\t\tthis.beforeRedraw?.();\n\t\t\t\tthis.beforeDisconnect?.();\n\t\t\t\tthis.afterDisconnect?.();\n\t\t\t} else {\n\t\t\t\tthis.stopRenderLoop();\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tawait this.initWjElement(true);\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Render error:', error);\n\t\t\t} finally {\n\t\t\t\tthis.#isRendering = false;\n\n\t\t\t\tif (!this.#pristine) {\n\t\t\t\t\tthis.#pristine = false;\n\t\t\t\t\tthis.#enqueueUpdate();\n\t\t\t\t} else {\n\t\t\t\t\tthis.finisPromise();\n\t\t\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tstopRenderLoop() {\n\t\tif (this.rafId) {\n\t\t\tcancelAnimationFrame(this.rafId);\n\t\t\tthis.rafId = null;\n\t\t}\n\t}\n\n\t/\n\t Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStore The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t * draw(context, appStore, params) {\n\t * const div = document.createElement('div');\n\t * div.textContent = 'Hello, world!';\n\t * context.appendChild(div);\n\t * }\n\t * }\n\t /\n\tdraw(context, appStore, params) {\n\t\treturn null;\n\t}\n\n\t/\n\t Displays the component's content, optionally forcing a re-render.\n\t * @param [force] Whether to force a re-render.\n\t * @returns A promise that resolves when the display is complete.\n\t /\n\t\tdisplay(force = false) {\n\t\tthis.template = this.constructor.customTemplate \|\| document.createElement('template');\n\n\t\t// Build the next context offscreen\n\t\tconst nextContext = document.createDocumentFragment();\n\t\tnextContext.append(this.template.content.cloneNode(true));\n\n\t\t// Check permission/noShow before DOM swap\n\t\tif (this.noShow \|\| (this.isPermissionCheck && !Permissions.isPermissionFulfilled(this.permission))) {\n\t\t\tthis.remove();\n\t\t\treturn Promise.resolve();\n\t\t}\n\n\t\tlet skeletonTimer = null;\n\t\tlet renderFinished = false;\n\t\tlet skeletonShownAt = null;\n\n\t\tconst clearSkeletonTimer = () => {\n\t\t\tif (skeletonTimer) {\n\t\t\t\tclearTimeout(skeletonTimer);\n\t\t\t\tskeletonTimer = null;\n\t\t\t}\n\t\t};\n\n\t\tconst buildSkeletonFragment = async () => {\n\t\t\t// Prefer declarative skeleton in light DOM.\n\t\t\t// NOTE: after the first render we may `replaceChildren()` on the host, which removes light DOM.\n\t\t\t// Persist a clone so skeleton keeps working on subsequent refreshes.\n\t\t\tconst slotted = this.querySelector('[slot=\"skeleton\"]');\n\t\t\tif (slotted) {\n\t\t\t\tthis._wjSkeletonSlotClone = slotted.cloneNode(true);\n\t\t\t\tconst frag = document.createDocumentFragment();\n\t\t\t\tfrag.append(this._wjSkeletonSlotClone.cloneNode(true));\n\t\t\t\treturn frag;\n\t\t\t}\n\n\t\t\t// If light DOM was replaced by render, use the persisted clone\n\t\t\tif (this._wjSkeletonSlotClone) {\n\t\t\t\tconst frag = document.createDocumentFragment();\n\t\t\t\tfrag.append(this._wjSkeletonSlotClone.cloneNode(true));\n\t\t\t\treturn frag;\n\t\t\t}\n\n\t\t\t// Fallback to hook\n\t\t\tconst frag = document.createDocumentFragment();\n\t\t\tlet skel = this.renderSkeleton?.(WjElementUtils.getAttributes(this));\n\t\t\tif (skel instanceof Promise \|\| skel?.constructor?.name === 'Promise') {\n\t\t\t\tskel = await skel;\n\t\t\t}\n\t\t\tif (skel == null) return null;\n\n\t\t\tlet node;\n\t\t\tif (skel instanceof HTMLElement \|\| skel instanceof DocumentFragment) {\n\t\t\t\tnode = skel;\n\t\t\t} else {\n\t\t\t\tconst t = document.createElement('template');\n\t\t\t\tt.innerHTML = skel;\n\t\t\t\tnode = t.content.cloneNode(true);\n\t\t\t}\n\t\t\tfrag.append(node);\n\t\t\treturn frag;\n\t\t};\n\n\t\tconst showSkeleton = async () => {\n\t\t\tif (renderFinished) return;\n\t\t\tif (!this.hasAttribute('skeleton')) return;\n\n\t\t\tconst frag = await buildSkeletonFragment();\n\t\t\tif (!frag) return;\n\n\t\t\t// Ensure the host has a box to render into (custom elements default to display:inline)\n\t\t\ttry {\n\t\t\t\tconst cs = getComputedStyle(this);\n\t\t\t\tif (cs.display === 'inline') this.style.display = 'block';\n\t\t\t\tif (cs.width === '0px') this.style.width = '100%';\n\t\t\t} catch (e) {\n\t\t\t\t// ignore\n\t\t\t}\n\n\t\t\t// REPLACE mode only\n\t\t\tif (this.hasShadowRoot) {\n\t\t\t\t// Ensure skeleton styles are present in shadowRoot\n\t\t\t\tif (this.shadowRoot) {\n\t\t\t\t\tconst existing = this.shadowRoot.adoptedStyleSheets \|\| [];\n\t\t\t\t\tif (!existing.includes(wjSkeletonSheet) && wjSkeletonSheet.cssRules !== undefined) {\n\t\t\t\t\t\tthis.shadowRoot.adoptedStyleSheets = [...existing, wjSkeletonSheet];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.shadowRoot.replaceChildren(frag);\n\t\t\t} else {\n\t\t\t\tthis.replaceChildren(frag);\n\t\t\t}\n\n\t\t\tskeletonShownAt = performance.now();\n\n\t\t\tthis.dispatchEvent(new CustomEvent('wj:skeleton:show', {\n\t\t\t\tdetail: { delay: this.skeletonDelay },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}));\n\t\t\tif (this.hasAttribute('debug-skeleton')) {\n\t\t\t\tdebugger;\n\t\t\t}\n\t\t};\n\n\t\t// If the element is hidden during initial render, allow skeleton to be visible\n\t\tif (this.hasAttribute('skeleton') && this.style.visibility === 'hidden') {\n\t\t\tthis.style.visibility = this.#originalVisibility ?? 'visible';\n\t\t}\n\n\t\t// Schedule skeleton only after a short delay to avoid flashing on fast renders\n\t\tlet skeletonPlannedAt;\n\t\tif (this.hasAttribute('skeleton')) {\n\t\t\tskeletonPlannedAt = performance.now();\n\t\t\tskeletonTimer = setTimeout(() => {\n\t\t\t\tshowSkeleton();\n\t\t\t}, this.skeletonDelay);\n\t\t}\n\n\t\treturn this.#resolveRender(nextContext, { skipAfterDraw: true })\n\t\t\t.then(async () => {\n\t\t\t\t// Real render finished; cancel pending skeleton\n\t\t\t\trenderFinished = true;\n\t\t\t\tclearSkeletonTimer();\n\n\t\t\t\tif (skeletonShownAt === null) {\n\t\t\t\t\t// Skeleton never shown (render was fast)\n\t\t\t\t\tconst elapsed = skeletonPlannedAt ? (performance.now() - skeletonPlannedAt) : 0;\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('wj:skeleton:skip', {\n\t\t\t\t\t\tdetail: { reason: 'render-finished-fast', elapsedMs: elapsed, delay: this.skeletonDelay },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}));\n\t\t\t\t} else {\n\t\t\t\t\t// Skeleton was shown: enforce minimum visible duration to avoid flashing\n\t\t\t\t\tconst now = performance.now();\n\t\t\t\t\tconst visibleFor = now - skeletonShownAt;\n\t\t\t\t\tconst remaining = this.skeletonMinDuration - visibleFor;\n\t\t\t\t\tif (remaining > 0) {\n\t\t\t\t\t\tawait new Promise((r) => setTimeout(r, remaining));\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (this.hasShadowRoot) {\n\t\t\t\t\tthis.shadowRoot.replaceChildren(nextContext);\n\t\t\t\t} else {\n\t\t\t\t\tthis.replaceChildren(nextContext);\n\t\t\t\t}\n\n\t\t\t\t// If skeleton was visible, it has just been removed by the swap\n\t\t\t\tif (skeletonShownAt !== null) {\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('wj:skeleton:hide', {\n\t\t\t\t\t\tdetail: {\n\t\t\t\t\t\t\treason: 'render-finished',\n\t\t\t\t\t\t\tvisibleMs: Math.max(this.skeletonMinDuration, performance.now() - skeletonShownAt),\n\t\t\t\t\t\t\tdelay: this.skeletonDelay,\n\t\t\t\t\t\t\tminDuration: this.skeletonMinDuration,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}));\n\t\t\t\t}\n\n\t\t\t\tconst liveContext = this.hasShadowRoot ? this.shadowRoot : this;\n\t\t\t\tconst _afterDraw = this.afterDraw?.(liveContext, this.store, WjElementUtils.getAttributes(this));\n\t\t\t\tif (_afterDraw instanceof Promise \|\| _afterDraw?.constructor.name === 'Promise') {\n\t\t\t\t\tawait _afterDraw;\n\t\t\t\t}\n\t\t\t})\n\t\t\t.finally(() => {\n\t\t\t\trenderFinished = true;\n\t\t\t\tclearSkeletonTimer();\n\t\t\t\t// If render failed, ensure skeleton timer is cleared and notify\n\t\t\t\tif (!this.#isRendering) {\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('wj:skeleton:hide', {\n\t\t\t\t\t\tdetail: { reason: 'finally' },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}));\n\t\t\t\t}\n\t\t\t});\n\t}\n\n\t/\n\t Renders the content into the provided target context.\n\t * This method handles asynchronous rendering, processes the output from the `draw` method,\n\t * and appends the resulting content to the specified target context.\n\t * @returns {Promise<void>} A promise that resolves once the render operation is complete and the content is appended to the target context.\n\t * @param targetContext\n\t /\n\tasync render(targetContext = this.context) {\n\t\tthis.#drawingStatus = this.drawingStatuses.DRAWING;\n\n\t\tlet _draw = this.draw(targetContext, this.store, WjElementUtils.getAttributes(this));\n\n\t\tif (_draw instanceof Promise \|\| _draw?.constructor.name === 'Promise') {\n\t\t\t_draw = await _draw;\n\t\t}\n\n\t\tlet rend = _draw;\n\t\tlet element;\n\n\t\tif (rend instanceof HTMLElement \|\| rend instanceof DocumentFragment) {\n\t\t\telement = rend;\n\t\t} else {\n\t\t\tlet inputTemplate = document.createElement('template');\n\t\t\tinputTemplate.innerHTML = rend;\n\t\t\telement = inputTemplate.content.cloneNode(true);\n\t\t}\n\n\t\tlet rendered = element;\n\n\t\ttargetContext.appendChild(rendered);\n\t}\n\n\t/\n\t Sanitizes a given name by converting it from kebab-case to camelCase.\n\t * @param {string} name The name in kebab-case format (e.g., \"example-name\").\n\t * @returns {string} The sanitized name in camelCase format (e.g., \"exampleName\").\n\t * @example\n\t * sanitizeName('example-name');\n\t * @example\n\t * sanitizeName('my-custom-component');\n\t /\n\tsanitizeName(name) {\n\t\tlet parts = name.split('-');\n\t\treturn [parts.shift(), ...parts.map((n) => n[0].toUpperCase() + n.slice(1))].join('');\n\t}\n\n\t/\n\t Checks if a property on an object has a getter or setter method defined.\n\t * @param {object} obj The object on which the property is defined.\n\t * @param {string} property The name of the property to check.\n\t * @returns {object} An object indicating the presence of getter and setter methods.\n\t * @property {Function\|null} hasGetter The getter function if it exists, otherwise `null`.\n\t * @property {Function\|null} hasSetter The setter function if it exists, otherwise `null`.\n\t * @example\n\t * const obj = {\n\t * get name() { return 'value'; },\n\t * set name(val) { console.log(val); }\n\t * };\n\t * checkGetterSetter(obj, 'name');\n\t * @example\n\t * const obj = { prop: 42 };\n\t * checkGetterSetter(obj, 'prop');\n\t /\n\tcheckGetterSetter(obj, property) {\n\t\tlet descriptor = Object.getOwnPropertyDescriptor(obj, property);\n\n\t\t// Check if the descriptor is found on the object itself\n\t\tif (descriptor) {\n\t\t\treturn {\n\t\t\t\thasGetter: typeof descriptor.get === 'function' ? descriptor.get : null,\n\t\t\t\thasSetter: typeof descriptor.set === 'function' ? descriptor.set : null,\n\t\t\t};\n\t\t}\n\n\t\t// Otherwise, check the prototype chain\n\t\tlet proto = Object.getPrototypeOf(obj);\n\t\tif (proto) {\n\t\t\treturn this.checkGetterSetter(proto, property);\n\t\t}\n\n\t\t// If the property doesn't exist at all\n\t\treturn { hasGetter: null, hasSetter: null };\n\t}\n\n\t/\n\t Sets up property accessors for the component's attributes.\n\t /\n\tsetUpAccessors() {\n\t\tlet attrs = this.getAttributeNames();\n\t\tattrs.forEach((name) => {\n\t\t\tconst sanitizedName = this.sanitizeName(name);\n\n\t\t\tconst { hasGetter, hasSetter } = this.checkGetterSetter(this, sanitizedName);\n\n\t\t\tObject.defineProperty(this, sanitizedName, {\n\t\t\t\tset: hasSetter ?? ((value) => this.setAttribute(name, value)),\n\t\t\t\tget: hasGetter ?? (() => this.getAttribute(name)),\n\t\t\t});\n\t\t});\n\t}\n\n\t/\n\t Resolves the rendering process of the component, using the given target context.\n\t * @param {HTMLElement\|ShadowRoot\|DocumentFragment} targetContext Target for rendering (defaults to this.context)\n\t * @returns A promise that resolves when rendering is complete.\n\t * @private\n\t */\n\t#resolveRender(targetContext = this.context, { skipAfterDraw = false } = {}) {\n\t\tthis.params = WjElementUtils.getAttributes(this);\n\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tconst _beforeDraw = this.beforeDraw(targetContext, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (_beforeDraw instanceof Promise \|\| _beforeDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait _beforeDraw;\n\t\t\t}\n\n\t\t\tawait this.render(targetContext);\n\n\t\t\tif (!skipAfterDraw) {\n\t\t\t\tconst _afterDraw = this.afterDraw?.(targetContext, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\t\tif (_afterDraw instanceof Promise \|\| _afterDraw?.constructor.name === 'Promise') {\n\t\t\t\t\tawait _afterDraw;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// RHR toto je bicykel pre slickRouter pretože routovanie nieje vykonané pokiaľ sa nezavolá updateComplete promise,\n\t\t\t// toto bude treba rozšíriť aby sme lepšie vedeli kontrolovať vykreslovanie elementov, a flow hookov.\n\t\t\tthis.#isRendering = false;\n\t\t\tthis.#isAttached = true;\n\n\t\t\tif (this.removeClassAfterConnect) {\n\t\t\t\tthis.classList.remove(...this.removeClassAfterConnect);\n\t\t\t}\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.DONE;\n\n\t\t\tresolve();\n\t\t}).catch((e) => {\n\t\t\tconsole.error(e);\n\t\t});\n\t}\n}\n\nlet __esModule = 'true';\nexport { __esModule, Permissions, WjElementUtils, event };\n"],"names":["frag"],"mappings":"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"}
1	+ {"version":3,"file":"wje-element.js","sources":["../packages/wje-element/element.js"],"sourcesContent":["import { UniversalService } from '../utils/universal-service.js';\nimport { Permissions } from '../utils/permissions.js';\nimport { WjElementUtils } from '../utils/element-utils.js';\nimport { event } from '../utils/event.js';\nimport { defaultStoreActions, store } from '../wje-store/store.js';\n\nconst template = document.createElement('template');\ntemplate.innerHTML = ``;\n\nexport default class WJElement extends HTMLElement {\n\t#drawingStatus;\n\t#isAttached;\n\t#isRendering;\n\t#originalVisibility;\n\t#pristine;\n\n\t/*\n\t Initializes a new instance of the WJElement class.\n\t /\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.#isAttached = false;\n\t\tthis.service = new UniversalService({\n\t\t\tstore: store,\n\t\t});\n\n\t\t// definujeme vsetky zavislosti.\n\t\t// Do zavislosti patria len komponenty, ktore su zavisle od ktoreho je zavisly tento komponent\n\t\tthis.defineDependencies();\n\n\t\tthis.#isRendering = false;\n\t\tthis._dependencies = {};\n\n\t\t/\n\t\t @typedef {object} DrawingStatuses\n\t\t * @property {number} CREATED - The component has been created.\n\t\t * @property {number} ATTACHED - The component has been attached to the DOM.\n\t\t * @property {number} BEGINING - The component is beginning to draw.\n\t\t * @property {number} START - The component has started drawing.\n\t\t * @property {number} DRAWING - The component is drawing.\n\t\t * @property {number} DONE - The component has finished drawing.\n\t\t * @property {number} DISCONNECTED - The component has been disconnected from the DOM.\n\t\t /\n\n\t\t/\n\t\t WJElement is a base class for custom web components with managed lifecycle, attribute/property sync,\n\t\t * permission-based visibility, and extensibility hooks.\n\t\t * @property {boolean} isAttached - True if the component is currently attached to the DOM.\n\t\t * @property {DrawingStatuses} drawingStatuses - Enum of possible drawing states.\n\t\t * @property {number} drawingStatus - Current drawing status (see drawingStatuses).\n\t\t * @property {boolean} _pristine - True if the component has not been updated since last render.\n\t\t * @property {boolean} isRendering - True if a render is currently in progress.\n\t\t * @property {number\|null} rafId - ID of the scheduled animation frame for rendering, or null.\n\t\t * @property {string\|null} originalVisibility - Stores the original CSS visibility before rendering.\n\t\t * @property {object} params - Stores the current attributes/properties for rendering.\n\t\t * @property {Promise<void>} updateComplete - Promise resolved when the current update/render is complete.\n\t\t * @property {string[]} permission - List of required permissions (from 'permission' attribute).\n\t\t * @property {boolean} isPermissionCheck - Whether permission checking is enabled (from 'permission-check' attribute).\n\t\t * @property {boolean} noShow - Whether the element should be hidden (from 'no-show' attribute).\n\t\t * @property {string\|undefined} isShadowRoot - Value of the 'shadow' attribute, if present.\n\t\t * @property {boolean} hasShadowRoot - True if the 'shadow' attribute is present.\n\t\t * @property {string} shadowType - Type of shadow root ('open' by default).\n\t\t * @property {object} store - Reference to the global store instance.\n\t\t * @property {object} defaultStoreActions - Default store actions for arrays and objects.\n\t\t * @property {string[]\|undefined} removeClassAfterConnect - Classes to remove after connect (from 'remove-class-after-connect' attribute).\n\t\t * @property {object} dependencies - Registered component dependencies.\n\t\t * @property {HTMLElement\|ShadowRoot} context - The rendering context (shadow root or element itself).\n\t\t /\n\t\tthis.drawingStatuses = {\n\t\t\tCREATED: 0,\n\t\t\tATTACHED: 1,\n\t\t\tBEGINING: 2,\n\t\t\tSTART: 3,\n\t\t\tDRAWING: 4,\n\t\t\tDONE: 5,\n\t\t\tDISCONNECTED: 6,\n\t\t};\n\n\t\tthis.#drawingStatus = this.drawingStatuses.CREATED;\n\n\t\tthis.#pristine = true;\n\t\tthis.#isRendering = false;\n\t\tthis.rafId = null;\n\t\tthis.#originalVisibility = null;\n\t\tthis.params = {};\n\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\t}\n\n\tget drawingStatus() {\n\t\treturn this.#drawingStatus;\n\t}\n\n\t/\n\t Sets the value of the 'permission' attribute.\n\t * @param {string[]} value The value to set for the 'permission' attribute.\n\t /\n\tset permission(value) {\n\t\tthis.setAttribute('permission', value.join(','));\n\t}\n\n\t/\n\t Gets the value of the 'permission-check' attribute.\n\t * @returns {string[]} The value of the 'permission' attribute.\n\t /\n\tget permission() {\n\t\treturn this.getAttribute('permission')?.split(',') \|\| [];\n\t}\n\n\t/\n\t Sets the 'permission-check' attribute.\n\t * @param {boolean} value The value to set for the 'permission-check' attribute.\n\t /\n\tset isPermissionCheck(value) {\n\t\tif (value) this.setAttribute('permission-check', '');\n\t\telse this.removeAttribute('permission-check');\n\t}\n\n\t/\n\t Checks if the 'permission-check' attribute is present.\n\t * @returns {boolean} True if the 'permission-check' attribute is present.\n\t /\n\tget isPermissionCheck() {\n\t\treturn this.hasAttribute('permission-check');\n\t}\n\n\tset noShow(value) {\n\t\tif (value) this.setAttribute('no-show', '');\n\t\telse this.removeAttribute('no-show');\n\t}\n\n\t/\n\t Checks if the 'show' attribute is present.\n\t * @returns {boolean} True if the 'show' attribute is present.\n\t /\n\tget noShow() {\n\t\treturn this.hasAttribute('no-show');\n\t}\n\n\t/\n\t Sets the 'shadow' attribute.\n\t * @param {string} value The value to set for the 'shadow' attribute.\n\t /\n\tset isShadowRoot(value) {\n\t\treturn this.setAttribute('shadow', value);\n\t}\n\n\tget isShadowRoot() {\n\t\treturn this.getAttribute('shadow');\n\t}\n\n\t/\n\t Checks if the 'shadow' attribute is present.\n\t * @returns {boolean} True if the 'shadow' attribute is present.\n\t /\n\tget hasShadowRoot() {\n\t\treturn this.hasAttribute('shadow');\n\t}\n\n\t/\n\t Gets the value of the 'shadow' attribute or 'open' if not set.\n\t * @returns {string} The value of the 'shadow' attribute or 'open'.\n\t /\n\tget shadowType() {\n\t\treturn this.getAttribute('shadow') \|\| 'open';\n\t}\n\n\t/\n\t Gets the rendering context, either the shadow root or the component itself.\n\t * @returns The rendering context.\n\t /\n\tget context() {\n\t\tif (this.hasShadowRoot) {\n\t\t\treturn this.shadowRoot;\n\t\t} else {\n\t\t\treturn this;\n\t\t}\n\t}\n\n\t/\n\t Gets the store instance.\n\t * @returns {object} The store instance.\n\t /\n\tget store() {\n\t\treturn store;\n\t}\n\n\t/\n\t @typedef {object} ArrayActions\n\t * @property {Function} addAction - Adds an item to the array.\n\t * @property {Function} deleteAction - Deletes an item from the array.\n\t * @property {Function} loadAction - Loads an array.\n\t * @property {Function} updateAction - Updates an item in the array.\n\t * @property {Function} addManyAction - Adds many items to the array.\n\t /\n\n\t/\n\t @typedef {object} ObjectActions\n\t * @property {Function} addAction - Replace old object with new object\n\t * @property {Function} deleteAction - Delete item based on key\n\t * @property {Function} updateAction - Update item based on key\n\t /\n\n\t/\n\t Gets the default store actions.\n\t * @returns The default store actions for arrays and objects.\n\t /\n\tget defaultStoreActions() {\n\t\treturn defaultStoreActions;\n\t}\n\n\t/\n\t Gets the classes to be removed after the component is connected.\n\t * @returns An array of class names to remove.\n\t /\n\tget removeClassAfterConnect() {\n\t\treturn this.getAttribute('remove-class-after-connect')?.split(' ');\n\t}\n\n\t/\n\t Sets the component dependencies.\n\t * @param value The dependencies to set.\n\t /\n\tset dependencies(value) {\n\t\tthis._dependencies = value;\n\t}\n\n\t/\n\t Gets the component dependencies.\n\t * @returns The component dependencies.\n\t /\n\tget dependencies() {\n\t\treturn this._dependencies;\n\t}\n\n\t/\n\t Processes and combines two templates into one.\n\t * @param pTemplate The primary template.\n\t * @param inputTemplate The secondary template.\n\t * @returns The combined template.\n\t /\n\tstatic processTemplates = (pTemplate, inputTemplate) => {\n\t\tconst newTemplate = document.createElement('template');\n\t\tnewTemplate.innerHTML = [inputTemplate.innerHTML, pTemplate?.innerHTML \|\| ''].join('');\n\t\treturn newTemplate;\n\t};\n\n\t/\n\t Defines a custom element if not already defined.\n\t * @param name The name of the custom element.\n\t * @param [elementConstructor] The constructor for the custom element.\n\t * @param [options] Additional options for defining the element.\n\t /\n\tstatic define(name, elementConstructor = this, options = {}) {\n\t\tconst definedElement = customElements.get(name);\n\n\t\tif (!definedElement) {\n\t\t\tcustomElements.define(name, elementConstructor, options);\n\t\t}\n\t}\n\n\t/\n\t Defines component dependencies by registering custom elements.\n\t /\n\tdefineDependencies() {\n\t\tif (this.dependencies) {\n\t\t\tObject.entries(this.dependencies).forEach(([name, component]) => WJElement.define(name, component));\n\t\t}\n\t}\n\n\t/\n\t Hook for extending behavior before drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t /\n\tbeforeDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior before drawing\n\t}\n\n\t/\n\t Renders the component within the provided context.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj\n\t * @param params Additional parameters or attributes for rendering the component.\n\t * @returns This implementation does not render anything and returns `null`.\n\t * @description\n\t * The `draw` method is responsible for rendering the component's content.\n\t * Override this method in subclasses to define custom rendering logic.\n\t * @example\n\t * class MyComponent extends WJElement {\n\t * draw(context, appStoreObj, params) {\n\t * const div = document.createElement('div');\n\t * div.textContent = 'Hello, world!';\n\t * context.appendChild(div);\n\t * }\n\t * }\n\t /\n\tdraw(context, appStoreObj, params) {\n\t\treturn null;\n\t}\n\n\t/\n\t Hook for extending behavior after drawing the component.\n\t * @param context The rendering context, usually the element's shadow root or main DOM element.\n\t * @param appStoreObj The global application store for managing state.\n\t * @param params Additional parameters or attributes for rendering the component.\n\t /\n\tafterDraw(context, appStoreObj, params) {\n\t\t// Hook for extending behavior after drawing\n\t}\n\n\t/\n\t Optional hook: return skeleton markup used while async draw is in progress.\n\t * Prefer declarative skeleton via `<div slot=\"skeleton\">...</div>`.\n\t * Return: string \| Node \| DocumentFragment \| null \| Promise of those.\n\t /\n\trenderSkeleton(params) {\n\t\treturn null;\n\t}\n\n\t/\n\t Retrieves the delay duration for the skeleton display, determining the value based on a hierarchy of overrides and defaults.\n\t * The method prioritizes in the following order:\n\t * 1. A finite number set as the `_wjSkeletonDelayOverride` property.\n\t * 2. A valid numeric value from the `skeleton-delay` attribute.\n\t * 3. The `skeletonDelayMs` property, if defined with a finite number.\n\t * 4. A default value of 150 if none of the above are set.\n\t * @returns {number} The delay in milliseconds before the skeleton is displayed.\n\t /\n\tget skeletonDelay() {\n\t\tif (Number.isFinite(this._wjSkeletonDelayOverride)) return this._wjSkeletonDelayOverride;\n\n\t\tconst v = this.getAttribute('skeleton-delay');\n\t\tconst n = (v === null \|\| v === undefined) ? NaN : Number(v);\n\t\tif (Number.isFinite(n)) return n;\n\n\t\tif (Number.isFinite(this.skeletonDelayMs)) return this.skeletonDelayMs;\n\n\t\treturn 150;\n\t}\n\n\t/\n\t Retrieves the minimum duration for the skeleton animation.\n\t * The method checks for an internally stored finite value. If unavailable,\n\t * it retrieves the value from the 'skeleton-min-duration' attribute,\n\t * converts it to a number if possible, and uses it. If neither is valid,\n\t * a default duration of 300 is returned.\n\t * @returns {number} The minimum duration for the skeleton animation in milliseconds.\n\t /\n\tget skeletonMinDuration() {\n\t\tif (Number.isFinite(this._wjSkeletonMinDurationOverride)) return this._wjSkeletonMinDurationOverride;\n\n\t\tconst v = this.getAttribute('skeleton-min-duration');\n\t\tconst n = (v === null \|\| v === undefined) ? NaN : Number(v);\n\t\tif (Number.isFinite(n)) return n;\n\n\t\treturn 300;\n\t}\n\n\t/\n\t Sets the minimum duration for the skeleton state. If the provided value is null, undefined, or an empty string,\n\t * the override for the minimum duration is removed.\n\t * @param {string\|number\|null\|undefined} value The minimum duration to be set for the skeleton state. It can be a numeric value, string representation of a number, or null/undefined to reset the value.\n\t /\n\tset skeletonMinDuration(value) {\n\t\tif (value === null \|\| value === undefined \|\| value === '') {\n\t\t\tdelete this._wjSkeletonMinDurationOverride;\n\t\t\tthis.removeAttribute('skeleton-min-duration');\n\t\t\treturn;\n\t\t}\n\t\tconst n = Number(value);\n\t\tif (Number.isFinite(n)) {\n\t\t\tthis._wjSkeletonMinDurationOverride = n;\n\t\t\tthis.setAttribute('skeleton-min-duration', String(n));\n\t\t}\n\t}\n\n\t/\n\t Sets or removes the 'skeleton' attribute based on the provided value.\n\t * @param {boolean} value A boolean value indicating whether to set ('true') or remove ('false') the 'skeleton' attribute.\n\t /\n\tset skeleton(value) {\n\t\tif (value) this.setAttribute('skeleton', '');\n\t\telse this.removeAttribute('skeleton');\n\t}\n\n\t/\n\t Checks if the 'skeleton' attribute is present on the element.\n\t * @returns {boolean} True if the 'skeleton' attribute exists, false otherwise.\n\t /\n\tget skeleton() {\n\t\treturn this.hasAttribute('skeleton');\n\t}\n\n\t/\n\t Sets the delay for the skeleton loading indicator.\n\t * @param {string\|number\|null\|undefined} value The delay value to be set. Accepts a numerical value,\n\t * a string that can be converted to a number, null, or undefined.\n\t * If null or undefined is provided, the skeleton delay will be cleared.\n\t /\n\tset skeletonDelay(value) {\n\t\tif (value === null \|\| value === undefined \|\| value === '') {\n\t\t\tdelete this._wjSkeletonDelayOverride;\n\t\t\tthis.removeAttribute('skeleton-delay');\n\t\t\treturn;\n\t\t}\n\t\tconst n = Number(value);\n\t\tif (Number.isFinite(n)) {\n\t\t\tthis._wjSkeletonDelayOverride = n;\n\t\t\tthis.setAttribute('skeleton-delay', String(n));\n\t\t}\n\t}\n\n\t/\n\t Retrieves the delay value used for skeleton loading.\n\t * @returns {number} The delay value for the skeleton loader.\n\t /\n\tget skeletonDelayValue() {\n\t\treturn this.skeletonDelay;\n\t}\n\n\t/\n\t Lifecycle method invoked when the component is connected to the DOM.\n\t /\n\tconnectedCallback() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.#originalVisibility = this.#originalVisibility ?? this.style.visibility;\n\t\t\tthis.style.visibility = 'hidden';\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.ATTACHED;\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\t/\n\t Initializes the component, setting up attributes and rendering.\n\t * @param [force] Whether to force initialization.\n\t * @returns A promise that resolves when initialization is complete.\n\t /\n\tinitWjElement = (force = false) => {\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tthis.#drawingStatus = this.drawingStatuses.BEGINING;\n\n\t\t\tthis.setupAttributes?.();\n\t\t\tif (this.hasShadowRoot) {\n\t\t\t\tif (!this.shadowRoot) this.attachShadow({ mode: this.shadowType \|\| 'open', delegatesFocus: true });\n\t\t\t}\n\t\t\tthis.setUpAccessors();\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.START;\n\n\t\t\t// Adopt component + skeleton styles BEFORE display, so skeleton is visible in Shadow DOM.\n\t\t\tconst sheet = new CSSStyleSheet();\n\t\t\tsheet.replaceSync(this.constructor.cssStyleSheet);\n\n\t\t\tif (this.shadowRoot) {\n\t\t\t\tconst existing = this.shadowRoot.adoptedStyleSheets \|\| [];\n\t\t\t\tconst next = [...existing];\n\n\t\t\t\tif (!next.includes(sheet)) next.push(sheet);\n\n\t\t\t\tthis.shadowRoot.adoptedStyleSheets = next;\n\t\t\t}\n\n\t\t\tawait this.display(force);\n\n\t\t\tresolve();\n\t\t});\n\t};\n\n\t/\n\t Sets up attributes and event listeners for the component.\n\t * This method retrieves all custom events defined for the component\n\t * and adds event listeners for each of them. When an event is triggered,\n\t * it calls the corresponding method on the host element.\n\t /\n\tsetupAttributes() {\n\t\t// Keď neaký element si zadefinuje funkciu \"setupAttributes\" tak sa obsah tejto funkcie nezavolá\n\n\t\tlet allEvents = WjElementUtils.getEvents(this);\n\t\tallEvents.forEach((customEvent, domEvent) => {\n\t\t\tthis.addEventListener(domEvent, (e) => {\n\t\t\t\tthis.getRootNode().host[customEvent]?.();\n\t\t\t});\n\t\t});\n\t}\n\n\t/\n\t Hook for extending behavior before disconnecting the component.\n\t /\n\tbeforeDisconnect() {\n\t\t// Hook for extending behavior before disconnecting\n\t}\n\n\t/\n\t Hook for extending behavior after disconnecting the component.\n\t /\n\tafterDisconnect() {\n\t\t// Hook for extending behavior after disconnecting\n\t}\n\n\t/\n\t Hook for extending behavior before redrawing the component.\n\t /\n\tbeforeRedraw() {\n\t\t// Hook for extending behavior before redrawing\n\t}\n\n\t/\n\t Cleans up resources and event listeners for the component.\n\t /\n\tcomponentCleanup() {\n\t\t// Hook for cleaning up the component\n\t}\n\n\t/\n\t Lifecycle method invoked when the component is disconnected from the DOM.\n\t /\n\tdisconnectedCallback() {\n\t\tif (this.#isAttached) {\n\t\t\tthis.beforeDisconnect?.();\n\t\t\tthis.context.innerHTML = '';\n\t\t\tthis.afterDisconnect?.();\n\t\t\tthis.#isAttached = false;\n\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\tthis.#originalVisibility = null;\n\t\t}\n\n\t\tif (this.#isRendering) {\n\t\t\tthis.stopRenderLoop();\n\t\t}\n\n\t\tthis.#drawingStatus = this.drawingStatuses.DISCONNECTED;\n\n\t\tthis.componentCleanup();\n\t}\n\n\t/\n\t Enqueues an update for the component.\n\t * This method processes the current render promise and then refreshes the component.\n\t /\n\t#enqueueUpdate() {\n\t\tif (!this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t}\n\t}\n\n\t/\n\t Lifecycle method invoked when an observed attribute changes.\n\t * @param name The name of the attribute that changed.\n\t * @param old The old value of the attribute.\n\t * @param newName The new value of the attribute.\n\t /\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (old !== newName) {\n\t\t\tthis.#pristine = false;\n\t\t\tthis.#enqueueUpdate();\n\t\t}\n\t}\n\n\t/\n\t Triggers a refresh operation by initializing the update lifecycle and setting up promises\n\t * to track its completion or failure status. Marks the instance as not pristine and queues\n\t * an update.\n\t * @returns {void} Does not return a value.\n\t /\n\trefresh() {\n\t\tthis.updateComplete = new Promise((resolve, reject) => {\n\t\t\tthis.finisPromise = resolve;\n\t\t\tthis.rejectPromise = reject;\n\t\t});\n\n\t\tthis.#pristine = false;\n\t\tthis.#enqueueUpdate();\n\t}\n\n\t/\n\t Refreshes the component by reinitializing it if it is in a drawing state.\n\t * This method checks if the component's drawing status is at least in the START state.\n\t * If so, it performs the following steps:\n\t * 1. Calls the `beforeRedraw` hook if defined.\n\t * 2. Calls the `beforeDisconnect` hook if defined.\n\t * 3. Refreshes the update promise to manage the rendering lifecycle.\n\t * 4. Calls the `afterDisconnect` hook if defined.\n\t * 5. Reinitializes the component by calling `initWjElement` with `true` to force initialization.\n\t * If the component is not in a drawing state, it simply returns a resolved promise.\n\t /\n\tasync #refresh() {\n\t\tif (this.#isRendering) {\n\t\t\tthis.rafId = requestAnimationFrame(() => this.#refresh());\n\t\t\treturn; // Skip if async render is still processing\n\t\t}\n\n\t\tif (!this.#pristine) {\n\t\t\tthis.#pristine = true;\n\t\t\tthis.#isRendering = true;\n\n\t\t\tif (this.#isAttached) {\n\t\t\t\tthis.beforeRedraw?.();\n\t\t\t\tthis.beforeDisconnect?.();\n\t\t\t\tthis.afterDisconnect?.();\n\t\t\t} else {\n\t\t\t\tthis.stopRenderLoop();\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tawait this.initWjElement(true);\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Render error:', error);\n\t\t\t} finally {\n\t\t\t\tthis.#isRendering = false;\n\n\t\t\t\tif (!this.#pristine) {\n\t\t\t\t\tthis.#pristine = false;\n\t\t\t\t\tthis.#enqueueUpdate();\n\t\t\t\t} else {\n\t\t\t\t\tthis.finisPromise();\n\t\t\t\t\tthis.style.visibility = this.#originalVisibility;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Stops the current render loop if it is running by canceling the requestAnimationFrame.\n\t * @returns {void} This method does not return a value.\n\t /\n\tstopRenderLoop() {\n\t\tif (this.rafId) {\n\t\t\tcancelAnimationFrame(this.rafId);\n\t\t\tthis.rafId = null;\n\t\t}\n\t}\n\n\t/\n\t Displays the component's content, optionally forcing a re-render.\n\t * @param [force] Whether to force a re-render.\n\t * @returns A promise that resolves when the display is complete.\n\t /\n\tdisplay(force = false) {\n\t\tthis.template = this.constructor.customTemplate \|\| document.createElement('template');\n\n\t\t// Build the next context offscreen\n\t\tconst nextContext = document.createDocumentFragment();\n\t\tnextContext.append(this.template.content.cloneNode(true));\n\n\t\t// Check permission/noShow before DOM swap\n\t\tif (this.noShow \|\| (this.isPermissionCheck && !Permissions.isPermissionFulfilled(this.permission))) {\n\t\t\tthis.remove();\n\t\t\treturn Promise.resolve();\n\t\t}\n\n\t\tlet skeletonTimer = null;\n\t\tlet renderFinished = false;\n\t\tlet skeletonShownAt = null;\n\n\t\tconst clearSkeletonTimer = () => {\n\t\t\tif (skeletonTimer) {\n\t\t\t\tclearTimeout(skeletonTimer);\n\t\t\t\tskeletonTimer = null;\n\t\t\t}\n\t\t};\n\n\t\tconst buildSkeletonFragment = async () => {\n\t\t\tconst slotted = this.querySelector('[slot=\"skeleton\"]');\n\n\t\t\tif (slotted) {\n\t\t\t\tif (this.hasShadowRoot) {\n\t\t\t\t\tconst frag = document.createDocumentFragment();\n\t\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\t\tslot.name = 'skeleton';\n\t\t\t\t\tfrag.append(slot);\n\t\t\t\t\treturn frag;\n\t\t\t\t}\n\n\t\t\t\tconst frag = document.createDocumentFragment();\n\t\t\t\tfrag.append(slotted.cloneNode(true));\n\t\t\t\treturn frag;\n\t\t\t}\n\n\t\t\tconst frag = document.createDocumentFragment();\n\n\t\t\tlet skel = this.renderSkeleton?.(WjElementUtils.getAttributes(this));\n\n\t\t\tif (skel instanceof Promise \|\| skel?.constructor?.name === 'Promise') {\n\t\t\t\tskel = await skel;\n\t\t\t}\n\n\t\t\tif (skel === null \|\| skel === undefined) return null;\n\n\t\t\tlet node;\n\n\t\t\tif (skel instanceof HTMLElement \|\| skel instanceof DocumentFragment) {\n\t\t\t\tnode = skel;\n\t\t\t} else {\n\t\t\t\tconst t = document.createElement('template');\n\t\t\t\tt.innerHTML = skel;\n\t\t\t\tnode = t.content.cloneNode(true);\n\t\t\t}\n\t\t\tfrag.append(node);\n\t\t\treturn frag;\n\t\t};\n\n\t\tconst showSkeleton = async () => {\n\t\t\tif (renderFinished) return;\n\t\t\tif (!this.hasAttribute('skeleton')) return;\n\n\t\t\tconst frag = await buildSkeletonFragment();\n\t\t\tif (!frag) return;\n\n\t\t\ttry {\n\t\t\t\tconst cs = getComputedStyle(this);\n\t\t\t\tif (cs.display === 'inline') this.style.display = 'block';\n\t\t\t\tif (cs.width === '0px') this.style.width = '100%';\n\t\t\t} catch (e) {\n\t\t\t\t// ignore\n\t\t\t}\n\n\t\t\t// REPLACE mode only\n\t\t\tif (this.hasShadowRoot) {\n\t\t\t\tthis.shadowRoot.replaceChildren(frag);\n\t\t\t} else {\n\t\t\t\tthis.replaceChildren(frag);\n\t\t\t}\n\n\t\t\tskeletonShownAt = performance.now();\n\n\t\t\tthis.dispatchEvent(new CustomEvent('wj:skeleton:show', {\n\t\t\t\tdetail: { delay: this.skeletonDelay },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}));\n\t\t\tif (this.hasAttribute('debug-skeleton')) {\n\t\t\t\tdebugger;\n\t\t\t}\n\t\t};\n\n\t\tif (this.hasAttribute('skeleton') && this.style.visibility === 'hidden') {\n\t\t\tthis.style.visibility = this.#originalVisibility ?? 'visible';\n\t\t}\n\n\t\tlet skeletonPlannedAt;\n\n\t\tif (this.hasAttribute('skeleton')) {\n\t\t\tskeletonPlannedAt = performance.now();\n\t\t\tskeletonTimer = setTimeout(() => {\n\t\t\t\tshowSkeleton();\n\t\t\t}, this.skeletonDelay);\n\t\t}\n\n\t\treturn this.#resolveRender(nextContext, { skipAfterDraw: true })\n\t\t\t.then(async () => {\n\t\t\t\trenderFinished = true;\n\t\t\t\tclearSkeletonTimer();\n\n\t\t\t\tif (skeletonShownAt === null) {\n\t\t\t\t\tconst elapsed = skeletonPlannedAt ? (performance.now() - skeletonPlannedAt) : 0;\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('wj:skeleton:skip', {\n\t\t\t\t\t\tdetail: { reason: 'render-finished-fast', elapsedMs: elapsed, delay: this.skeletonDelay },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}));\n\t\t\t\t} else {\n\t\t\t\t\t// Skeleton was shown: enforce minimum visible duration to avoid flashing\n\t\t\t\t\tconst now = performance.now();\n\t\t\t\t\tconst visibleFor = now - skeletonShownAt;\n\t\t\t\t\tconst remaining = this.skeletonMinDuration - visibleFor;\n\t\t\t\t\tif (remaining > 0) {\n\t\t\t\t\t\tawait new Promise((r) => setTimeout(r, remaining));\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (this.hasShadowRoot) {\n\t\t\t\t\tthis.shadowRoot.replaceChildren(nextContext);\n\t\t\t\t} else {\n\t\t\t\t\tthis.replaceChildren(nextContext);\n\t\t\t\t}\n\n\t\t\t\tif (skeletonShownAt !== null) {\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('wj:skeleton:hide', {\n\t\t\t\t\t\tdetail: {\n\t\t\t\t\t\t\treason: 'render-finished',\n\t\t\t\t\t\t\tvisibleMs: Math.max(this.skeletonMinDuration, performance.now() - skeletonShownAt),\n\t\t\t\t\t\t\tdelay: this.skeletonDelay,\n\t\t\t\t\t\t\tminDuration: this.skeletonMinDuration,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}));\n\t\t\t\t}\n\n\t\t\t\tconst liveContext = this.hasShadowRoot ? this.shadowRoot : this;\n\t\t\t\tconst _afterDraw = this.afterDraw?.(liveContext, this.store, WjElementUtils.getAttributes(this));\n\t\t\t\tif (_afterDraw instanceof Promise \|\| _afterDraw?.constructor.name === 'Promise') {\n\t\t\t\t\tawait _afterDraw;\n\t\t\t\t}\n\t\t\t})\n\t\t\t.finally(() => {\n\t\t\t\trenderFinished = true;\n\t\t\t\tclearSkeletonTimer();\n\t\t\t\tif (!this.#isRendering) {\n\t\t\t\t\tthis.dispatchEvent(new CustomEvent('wj:skeleton:hide', {\n\t\t\t\t\t\tdetail: { reason: 'finally' },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}));\n\t\t\t\t}\n\t\t\t});\n\t}\n\n\t/\n\t Renders the content into the provided target context.\n\t * This method handles asynchronous rendering, processes the output from the `draw` method,\n\t * and appends the resulting content to the specified target context.\n\t * @returns {Promise<void>} A promise that resolves once the render operation is complete and the content is appended to the target context.\n\t * @param targetContext\n\t /\n\tasync render(targetContext = this.context) {\n\t\tthis.#drawingStatus = this.drawingStatuses.DRAWING;\n\n\t\tlet _draw = this.draw(targetContext, this.store, WjElementUtils.getAttributes(this));\n\n\t\tif (_draw instanceof Promise \|\| _draw?.constructor.name === 'Promise') {\n\t\t\t_draw = await _draw;\n\t\t}\n\n\t\tlet rend = _draw;\n\t\tlet element;\n\n\t\tif (rend instanceof HTMLElement \|\| rend instanceof DocumentFragment) {\n\t\t\telement = rend;\n\t\t} else {\n\t\t\tlet inputTemplate = document.createElement('template');\n\t\t\tinputTemplate.innerHTML = rend;\n\t\t\telement = inputTemplate.content.cloneNode(true);\n\t\t}\n\n\t\tlet rendered = element;\n\n\t\ttargetContext.appendChild(rendered);\n\t}\n\n\t/\n\t Sanitizes a given name by converting it from kebab-case to camelCase.\n\t * @param {string} name The name in kebab-case format (e.g., \"example-name\").\n\t * @returns {string} The sanitized name in camelCase format (e.g., \"exampleName\").\n\t * @example\n\t * sanitizeName('example-name');\n\t * @example\n\t * sanitizeName('my-custom-component');\n\t /\n\tsanitizeName(name) {\n\t\tlet parts = name.split('-');\n\t\treturn [parts.shift(), ...parts.map((n) => n[0].toUpperCase() + n.slice(1))].join('');\n\t}\n\n\t/\n\t Checks if a property on an object has a getter or setter method defined.\n\t * @param {object} obj The object on which the property is defined.\n\t * @param {string} property The name of the property to check.\n\t * @returns {object} An object indicating the presence of getter and setter methods.\n\t * @property {Function\|null} hasGetter The getter function if it exists, otherwise `null`.\n\t * @property {Function\|null} hasSetter The setter function if it exists, otherwise `null`.\n\t * @example\n\t * const obj = {\n\t * get name() { return 'value'; },\n\t * set name(val) { console.log(val); }\n\t * };\n\t * checkGetterSetter(obj, 'name');\n\t * @example\n\t * const obj = { prop: 42 };\n\t * checkGetterSetter(obj, 'prop');\n\t /\n\tcheckGetterSetter(obj, property) {\n\t\tlet descriptor = Object.getOwnPropertyDescriptor(obj, property);\n\n\t\tif (descriptor) {\n\t\t\treturn {\n\t\t\t\thasGetter: typeof descriptor.get === 'function' ? descriptor.get : null,\n\t\t\t\thasSetter: typeof descriptor.set === 'function' ? descriptor.set : null,\n\t\t\t};\n\t\t}\n\n\t\tlet proto = Object.getPrototypeOf(obj);\n\t\tif (proto) {\n\t\t\treturn this.checkGetterSetter(proto, property);\n\t\t}\n\n\t\treturn { hasGetter: null, hasSetter: null };\n\t}\n\n\t/\n\t Sets up accessors (getter and setter) for all attributes of the current object.\n\t * This method retrieves the attribute names, sanitizes them, and dynamically defines\n\t * property accessors for each attribute using `Object.defineProperty`.\n\t * @returns {void} This method does not return any value.\n\t /\n\tsetUpAccessors() {\n\t\tlet attrs = this.getAttributeNames();\n\t\tattrs.forEach((name) => {\n\t\t\tconst sanitizedName = this.sanitizeName(name);\n\n\t\t\tconst { hasGetter, hasSetter } = this.checkGetterSetter(this, sanitizedName);\n\n\t\t\tObject.defineProperty(this, sanitizedName, {\n\t\t\t\tset: hasSetter ?? ((value) => this.setAttribute(name, value)),\n\t\t\t\tget: hasGetter ?? (() => this.getAttribute(name)),\n\t\t\t});\n\t\t});\n\t}\n\n\t/\n\t Resolves the rendering process of the component, using the given target context.\n\t * @param {HTMLElement\|ShadowRoot\|DocumentFragment} targetContext Target for rendering (defaults to this.context)\n\t * @returns A promise that resolves when rendering is complete.\n\t * @private\n\t */\n\t#resolveRender(targetContext = this.context, { skipAfterDraw = false } = {}) {\n\t\tthis.params = WjElementUtils.getAttributes(this);\n\n\t\treturn new Promise(async (resolve, reject) => {\n\t\t\tconst _beforeDraw = this.beforeDraw(targetContext, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\tif (_beforeDraw instanceof Promise \|\| _beforeDraw?.constructor.name === 'Promise') {\n\t\t\t\tawait _beforeDraw;\n\t\t\t}\n\n\t\t\tawait this.render(targetContext);\n\n\t\t\tif (!skipAfterDraw) {\n\t\t\t\tconst _afterDraw = this.afterDraw?.(targetContext, this.store, WjElementUtils.getAttributes(this));\n\n\t\t\t\tif (_afterDraw instanceof Promise \|\| _afterDraw?.constructor.name === 'Promise') {\n\t\t\t\t\tawait _afterDraw;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// RHR toto je bicykel pre slickRouter pretože routovanie nieje vykonané pokiaľ sa nezavolá updateComplete promise,\n\t\t\t// toto bude treba rozšíriť aby sme lepšie vedeli kontrolovať vykreslovanie elementov, a flow hookov.\n\t\t\tthis.#isRendering = false;\n\t\t\tthis.#isAttached = true;\n\n\t\t\tif (this.removeClassAfterConnect) {\n\t\t\t\tthis.classList.remove(...this.removeClassAfterConnect);\n\t\t\t}\n\n\t\t\tthis.#drawingStatus = this.drawingStatuses.DONE;\n\n\t\t\tresolve();\n\t\t}).catch((e) => {\n\t\t\tconsole.error(e);\n\t\t});\n\t}\n}\n\nlet __esModule = 'true';\nexport { __esModule, Permissions, WjElementUtils, event };\n"],"names":["frag"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.2.0-alpha.11",
+  "version": "0.2.0-alpha.13",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",