wj-elements 0.3.7 → 0.4.0

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

@@ -1,4 +1,5 @@
 import { FormAssociatedElement } from '../internals/form-associated-element.js';
+import { Localizer } from '../utils/localize.js';
 import { default as Button } from '../wje-button/button.js';
 import { default as Popup } from '../wje-popup/popup.js';
 import { default as Icon } from '../wje-icon/icon.js';
@@ -22,6 +23,7 @@ export class Select extends FormAssociatedElement {
      * @returns {Array<string>}
      */
     static get observedAttributes(): Array<string>;
+    localizer: Localizer;
     /**
      * @type {HTMLElement|null}
      * @description A reference to the counter element, initially null.
@@ -80,6 +82,11 @@ export class Select extends FormAssociatedElement {
      * @description A reference to the list element, initially null.
      */
     list: HTMLElement | null;
+    /**
+     * @type {HTMLElement|null}
+     * @description A reference to the empty state element, initially null.
+     */
+    emptyState: HTMLElement | null;
     _value: any[];
     _selectedOptions: any[];
     _instanceId: number;

package/dist/permissions.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 const _Permissions = class _Permissions {
   /**
-   * Sets the permission key for the PermissionsApi.
+   * Sets the permission key for the Permissions utility.
    * The key is stored internally and defaults to 'permissions' if no value is provided.
    * @param {string} value The key to set for permissions. If no value is provided, the default is 'permissions'.
    */
@@ -11,15 +11,15 @@ const _Permissions = class _Permissions {
     _Permissions._permissionKey = value || "permissions";
   }
   /**
-   * Retrieves the permission key used for accessing the permissions API.
-   * @returns {string} The permission key associated with the PermissionsApi.
+   * Retrieves the permission key used for accessing the permissions utility.
+   * @returns {string} The permission key associated with the Permissions utility.
    */
   static get permissionKey() {
     return _Permissions._permissionKey;
   }
   /**
    * Sets the permissions by storing them in the local storage.
-   * @param {object} value The permissions object to be stored.
+   * @param {Array<string>} value The permissions array to be stored.
    */
   static set permissions(value) {
     window.localStorage.setItem(_Permissions.permissionKey, JSON.stringify(value));
@@ -40,9 +40,9 @@ const _Permissions = class _Permissions {
     return _Permissions.permissions.includes(key);
   }
   /**
-   * Checks if at least one of the given permissions is fulfilled, based on the permissions available in `PermissionsApi`.
-   * @param {Array<string>} permissions The list of permissions to check against the permissions available in `PermissionsApi`.
-   * @returns {boolean} Returns `true` if any of the given permissions match the permissions available in `PermissionsApi`, otherwise returns `false`.
+   * Checks if at least one of the given permissions is fulfilled, based on the permissions available in `Permissions`.
+   * @param {Array<string>} permissions The list of permissions to check against the permissions available in `Permissions`.
+   * @returns {boolean} Returns `true` if any of the given permissions match the permissions available in `Permissions`, otherwise returns `false`.
    */
   static isPermissionFulfilled(permissions) {
     return permissions.some((perm) => _Permissions.permissions.includes(perm));

package/dist/permissions.js.map

@@ -1 +1 @@
-{"version":3,"file":"permissions.js","sources":["../packages/utils/permissions.js"],"sourcesContent":["/**\n * PermissionsApi is a utility class for managing permissions.\n * It allows setting, retrieving, and checking permissions stored in the browser's local storage.\n */\nexport class Permissions {\n    static _permissionKey = 'permissions';\n\n    /**\n     * Sets the permission key for the PermissionsApi.\n     * The key is stored internally and defaults to 'permissions' if no value is provided.\n     * @param {string} value The key to set for permissions. If no value is provided, the default is 'permissions'.\n     */\n    static set permissionKey(value) {\n        Permissions._permissionKey = value || 'permissions';\n    }\n\n    /**\n     * Retrieves the permission key used for accessing the permissions API.\n     * @returns {string} The permission key associated with the PermissionsApi.\n     */\n    static get permissionKey() {\n        return Permissions._permissionKey;\n    }\n\n    /**\n     * Sets the permissions by storing them in the local storage.\n     * @param {object} value The permissions object to be stored.\n     */\n    static set permissions(value) {\n        window.localStorage.setItem(Permissions.permissionKey, JSON.stringify(value));\n    }\n\n    /**\n     * Retrieves the list of permissions stored in the browser's local storage.\n     * @returns {Array} An array of permissions. If no permissions are found, returns an empty array.\n     */\n    static get permissions() {\n        return JSON.parse(window.localStorage.getItem(Permissions.permissionKey)) || [];\n    }\n\n    /**\n     * Determines whether the specified key exists in the permissions list.\n     * @param {string} key The key to check for existence in the permissions list.\n     * @returns {boolean} Returns true if the key exists in the permissions list; otherwise, returns false.\n     */\n    static includesKey(key) {\n        return Permissions.permissions.includes(key);\n    }\n\n    /**\n     * Checks if at least one of the given permissions is fulfilled, based on the permissions available in `PermissionsApi`.\n     * @param {Array<string>} permissions The list of permissions to check against the permissions available in `PermissionsApi`.\n     * @returns {boolean} Returns `true` if any of the given permissions match the permissions available in `PermissionsApi`, otherwise returns `false`.\n     */\n    static isPermissionFulfilled(permissions) {\n        return permissions.some((perm) => Permissions.permissions.includes(perm));\n    }\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,eAAN,MAAM,aAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrB,WAAW,cAAc,OAAO;AAC5B,iBAAY,iBAAiB,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,gBAAgB;AACvB,WAAO,aAAY;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,YAAY,OAAO;AAC1B,WAAO,aAAa,QAAQ,aAAY,eAAe,KAAK,UAAU,KAAK,CAAC;AAAA,EAChF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,cAAc;AACrB,WAAO,KAAK,MAAM,OAAO,aAAa,QAAQ,aAAY,aAAa,CAAC,KAAK,CAAA;AAAA,EACjF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,YAAY,KAAK;AACpB,WAAO,aAAY,YAAY,SAAS,GAAG;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,sBAAsB,aAAa;AACtC,WAAO,YAAY,KAAK,CAAC,SAAS,aAAY,YAAY,SAAS,IAAI,CAAC;AAAA,EAC5E;AACJ;AApDI,cADS,cACF,kBAAiB;AADrB,IAAM,cAAN;"}
+{"version":3,"file":"permissions.js","sources":["../packages/utils/permissions.js"],"sourcesContent":["/**\n * Permissions is a utility class for managing permissions.\n * It allows setting, retrieving, and checking permissions stored in the browser's local storage.\n */\nexport class Permissions {\n    static _permissionKey = 'permissions';\n\n    /**\n     * Sets the permission key for the Permissions utility.\n     * The key is stored internally and defaults to 'permissions' if no value is provided.\n     * @param {string} value The key to set for permissions. If no value is provided, the default is 'permissions'.\n     */\n    static set permissionKey(value) {\n        Permissions._permissionKey = value || 'permissions';\n    }\n\n    /**\n     * Retrieves the permission key used for accessing the permissions utility.\n     * @returns {string} The permission key associated with the Permissions utility.\n     */\n    static get permissionKey() {\n        return Permissions._permissionKey;\n    }\n\n    /**\n     * Sets the permissions by storing them in the local storage.\n     * @param {Array<string>} value The permissions array to be stored.\n     */\n    static set permissions(value) {\n        window.localStorage.setItem(Permissions.permissionKey, JSON.stringify(value));\n    }\n\n    /**\n     * Retrieves the list of permissions stored in the browser's local storage.\n     * @returns {Array} An array of permissions. If no permissions are found, returns an empty array.\n     */\n    static get permissions() {\n        return JSON.parse(window.localStorage.getItem(Permissions.permissionKey)) || [];\n    }\n\n    /**\n     * Determines whether the specified key exists in the permissions list.\n     * @param {string} key The key to check for existence in the permissions list.\n     * @returns {boolean} Returns true if the key exists in the permissions list; otherwise, returns false.\n     */\n    static includesKey(key) {\n        return Permissions.permissions.includes(key);\n    }\n\n    /**\n     * Checks if at least one of the given permissions is fulfilled, based on the permissions available in `Permissions`.\n     * @param {Array<string>} permissions The list of permissions to check against the permissions available in `Permissions`.\n     * @returns {boolean} Returns `true` if any of the given permissions match the permissions available in `Permissions`, otherwise returns `false`.\n     */\n    static isPermissionFulfilled(permissions) {\n        return permissions.some((perm) => Permissions.permissions.includes(perm));\n    }\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,eAAN,MAAM,aAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrB,WAAW,cAAc,OAAO;AAC5B,iBAAY,iBAAiB,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,gBAAgB;AACvB,WAAO,aAAY;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,YAAY,OAAO;AAC1B,WAAO,aAAa,QAAQ,aAAY,eAAe,KAAK,UAAU,KAAK,CAAC;AAAA,EAChF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,cAAc;AACrB,WAAO,KAAK,MAAM,OAAO,aAAa,QAAQ,aAAY,aAAa,CAAC,KAAK,CAAA;AAAA,EACjF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,YAAY,KAAK;AACpB,WAAO,aAAY,YAAY,SAAS,GAAG;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,sBAAsB,aAAa;AACtC,WAAO,YAAY,KAAK,CAAC,SAAS,aAAY,YAAY,SAAS,IAAI,CAAC;AAAA,EAC5E;AACJ;AApDI,cADS,cACF,kBAAiB;AADrB,IAAM,cAAN;"}

package/dist/wje-accordion-item.js

@@ -15,24 +15,6 @@ const _AccordionItem = class _AccordionItem extends WJElement {
      * @type {string}
      */
     __publicField(this, "className", "AccordionItem");
-    /**
-     * Method to handle the attribute changes.
-     */
-    __publicField(this, "collapse", () => {
-      var _a;
-      this.classList.remove("expanded");
-      this.classList.add("collapsed");
-      (_a = this.headline) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
-    });
-    /**
-     * Method to handle the attribute changes.
-     */
-    __publicField(this, "expand", () => {
-      var _a;
-      this.classList.remove("collapsed");
-      this.classList.add("expanded");
-      (_a = this.headline) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
-    });
     this._instanceId = ++_AccordionItem._instanceId;
   }
   /**
@@ -126,6 +108,24 @@ const _AccordionItem = class _AccordionItem extends WJElement {
       }
     });
   }
+  /**
+   * Collapses the accordion item and updates the headline ARIA state.
+   */
+  collapse() {
+    var _a;
+    this.classList.remove("expanded");
+    this.classList.add("collapsed");
+    (_a = this.headline) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+  }
+  /**
+   * Expands the accordion item and updates the headline ARIA state.
+   */
+  expand() {
+    var _a;
+    this.classList.remove("collapsed");
+    this.classList.add("expanded");
+    (_a = this.headline) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
+  }
 };
 __publicField(_AccordionItem, "_instanceId", 0);
 let AccordionItem = _AccordionItem;

package/dist/wje-accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-accordion-item.js","sources":["../packages/wje-accordion-item/accordion-item.element.js","../packages/wje-accordion-item/accordion-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion Item element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion-item\n * @status stable\n * @augments WJElement\n * @slot - The accordion item main content.\n * @tag wje-accordion\n */\nexport default class AccordionItem extends WJElement {\n    static _instanceId = 0;\n    /**\n     * Constructor for the AccordionItem class.\n     */\n    constructor() {\n        super();\n        this._instanceId = ++AccordionItem._instanceId;\n    }\n\n    /**\n     * The class name for the Accordion Item element.\n     * @type {string}\n     */\n    className = 'AccordionItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion Item element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion Item element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-accordion-item');\n\n        let headline = document.createElement('div');\n        headline.setAttribute('part', 'headline');\n        headline.classList.add('headline');\n        const baseId = this.id || `wje-accordion-item-${this._instanceId}`;\n        headline.id = `${baseId}-header`;\n\n        let headlineDescription = document.createElement('slot');\n        headlineDescription.setAttribute('part', 'description');\n        headlineDescription.setAttribute('name', 'description');\n\n        let slotHeadline = document.createElement('slot');\n        slotHeadline.setAttribute('name', 'headline');\n\n        let toggle = document.createElement('slot');\n        toggle.setAttribute('part', 'toggle');\n        toggle.setAttribute('name', 'toggle');\n\n        let mark = document.createElement('wje-icon');\n        mark.setAttribute('name', 'chevron-down');\n\n        let content = document.createElement('div');\n        content.setAttribute('part', 'content');\n        content.setAttribute('id', `${baseId}-panel`);\n        content.setAttribute('role', 'region');\n        content.setAttribute('aria-labelledby', headline.id);\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'content');\n\n        toggle.appendChild(mark);\n\n        headline.appendChild(slotHeadline);\n        headline.appendChild(toggle);\n        headline.appendChild(headlineDescription);\n\n        content.appendChild(slot);\n\n        native.appendChild(headline);\n        native.appendChild(content);\n\n        fragment.appendChild(native);\n\n        this.headline = headline;\n        this.toggle = toggle;\n        this.content = content;\n\n        return fragment;\n    }\n\n    /**\n     * Method to execute after the Accordion Item element is drawn.\n     */\n    afterDraw() {\n        if (!this.classList.contains('expanded')) this.classList.add('collapsed');\n\n        this.headline.setAttribute('role', 'button');\n        this.headline.setAttribute('tabindex', '0');\n        this.headline.setAttribute('aria-controls', this.content.id);\n        this.headline.setAttribute('aria-expanded', this.classList.contains('expanded') ? 'true' : 'false');\n\n        this.headline.addEventListener('click', () => {\n            if (this.classList.contains('collapsed')) {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:open');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '180deg');\n                this.expand();\n            } else {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:close');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '0deg');\n                this.collapse();\n            }\n        });\n\n        this.headline.addEventListener('keydown', (e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                this.headline.click();\n            }\n        });\n    }\n\n    /**\n     * Method to handle the attribute changes.\n     */\n    collapse = () => {\n        this.classList.remove('expanded');\n        this.classList.add('collapsed');\n        this.headline?.setAttribute('aria-expanded', 'false');\n    };\n\n    /**\n     * Method to handle the attribute changes.\n     */\n    expand = () => {\n        this.classList.remove('collapsed');\n        this.classList.add('expanded');\n        this.headline?.setAttribute('aria-expanded', 'true');\n    };\n}\n","import AccordionItem from './accordion-item.element.js';\n\nexport default AccordionItem;\n\nAccordionItem.define('wje-accordion-item', AccordionItem);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-accordion-item.js","sources":["../packages/wje-accordion-item/accordion-item.element.js","../packages/wje-accordion-item/accordion-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion Item element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion-item\n * @status stable\n * @augments WJElement\n * @attribute {string} color - Applies a contextual color variant such as `primary`, `success`, `danger`, `warning`, `info`, or `complete`.\n * @slot headline - Slot for the clickable accordion headline content.\n * @slot description - Slot for supporting text shown below the headline.\n * @slot toggle - Slot for a custom toggle icon or toggle content.\n * @slot content - Slot for the expandable panel body.\n * @csspart native - The wrapper of the whole accordion item.\n * @csspart headline - The clickable headline area.\n * @csspart description - The description slot container inside the headline.\n * @csspart toggle - The toggle slot container and fallback chevron area.\n * @csspart content - The expandable content panel.\n * @cssproperty [--wje-accordion-background=var(--wje-color-contrast-0)] - Background color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border=var(--wje-color-contrast-0)] - Border color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border-radius=var(--wje-border-radius-large)] - Border radius of the item wrapper.\n * @cssproperty [--wje-accordion-background-hover=var(--wje-color-contrast-1)] - Background color used when the headline is hovered.\n * @cssproperty [--wje-accordion-border-hover=var(--wje-color-contrast-2)] - Border color used when the headline is hovered.\n * @cssproperty [--wje-accordion-background-expanded=var(--wje-color-contrast-0)] - Background color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-border-expanded=var(--wje-color-contrast-0)] - Border color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-headline-color=var(--wje-color-contrast-11)] - Text color of the headline area.\n * @cssproperty [--wje-accordion-content-color=var(--wje-color-contrast-6)] - Text color of the expandable content area.\n * @cssproperty [--wje-accordion-marker-rotate=0deg] - Rotation applied to the toggle marker icon.\n * @fires wje-accordion-item:open - Dispatched when the item is expanded.\n * @fires wje-accordion-item:close - Dispatched when the item is collapsed.\n * @tag wje-accordion-item\n */\nexport default class AccordionItem extends WJElement {\n    static _instanceId = 0;\n    /**\n     * Constructor for the AccordionItem class.\n     */\n    constructor() {\n        super();\n        this._instanceId = ++AccordionItem._instanceId;\n    }\n\n    /**\n     * The class name for the Accordion Item element.\n     * @type {string}\n     */\n    className = 'AccordionItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion Item element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion Item element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-accordion-item');\n\n        let headline = document.createElement('div');\n        headline.setAttribute('part', 'headline');\n        headline.classList.add('headline');\n        const baseId = this.id || `wje-accordion-item-${this._instanceId}`;\n        headline.id = `${baseId}-header`;\n\n        let headlineDescription = document.createElement('slot');\n        headlineDescription.setAttribute('part', 'description');\n        headlineDescription.setAttribute('name', 'description');\n\n        let slotHeadline = document.createElement('slot');\n        slotHeadline.setAttribute('name', 'headline');\n\n        let toggle = document.createElement('slot');\n        toggle.setAttribute('part', 'toggle');\n        toggle.setAttribute('name', 'toggle');\n\n        let mark = document.createElement('wje-icon');\n        mark.setAttribute('name', 'chevron-down');\n\n        let content = document.createElement('div');\n        content.setAttribute('part', 'content');\n        content.setAttribute('id', `${baseId}-panel`);\n        content.setAttribute('role', 'region');\n        content.setAttribute('aria-labelledby', headline.id);\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'content');\n\n        toggle.appendChild(mark);\n\n        headline.appendChild(slotHeadline);\n        headline.appendChild(toggle);\n        headline.appendChild(headlineDescription);\n\n        content.appendChild(slot);\n\n        native.appendChild(headline);\n        native.appendChild(content);\n\n        fragment.appendChild(native);\n\n        this.headline = headline;\n        this.toggle = toggle;\n        this.content = content;\n\n        return fragment;\n    }\n\n    /**\n     * Method to execute after the Accordion Item element is drawn.\n     */\n    afterDraw() {\n        if (!this.classList.contains('expanded')) this.classList.add('collapsed');\n\n        this.headline.setAttribute('role', 'button');\n        this.headline.setAttribute('tabindex', '0');\n        this.headline.setAttribute('aria-controls', this.content.id);\n        this.headline.setAttribute('aria-expanded', this.classList.contains('expanded') ? 'true' : 'false');\n\n        this.headline.addEventListener('click', () => {\n            if (this.classList.contains('collapsed')) {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:open');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '180deg');\n                this.expand();\n            } else {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:close');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '0deg');\n                this.collapse();\n            }\n        });\n\n        this.headline.addEventListener('keydown', (e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                this.headline.click();\n            }\n        });\n    }\n\n    /**\n     * Collapses the accordion item and updates the headline ARIA state.\n     */\n    collapse() {\n        this.classList.remove('expanded');\n        this.classList.add('collapsed');\n        this.headline?.setAttribute('aria-expanded', 'false');\n    }\n\n    /**\n     * Expands the accordion item and updates the headline ARIA state.\n     */\n    expand() {\n        this.classList.remove('collapsed');\n        this.classList.add('expanded');\n        this.headline?.setAttribute('aria-expanded', 'true');\n    }\n}\n","import AccordionItem from './accordion-item.element.js';\n\nexport default AccordionItem;\n\nAccordionItem.define('wje-accordion-item', AccordionItem);\n"],"names":[],"mappings":";;;;;;AAgCe,MAAM,iBAAN,MAAM,uBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA,EAKjD,cAAc;AACV,UAAK;AAQT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAPR,SAAK,cAAc,EAAE,eAAc;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,uBAAuB;AAE5C,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,aAAa,QAAQ,UAAU;AACxC,aAAS,UAAU,IAAI,UAAU;AACjC,UAAM,SAAS,KAAK,MAAM,sBAAsB,KAAK,WAAW;AAChE,aAAS,KAAK,GAAG,MAAM;AAEvB,QAAI,sBAAsB,SAAS,cAAc,MAAM;AACvD,wBAAoB,aAAa,QAAQ,aAAa;AACtD,wBAAoB,aAAa,QAAQ,aAAa;AAEtD,QAAI,eAAe,SAAS,cAAc,MAAM;AAChD,iBAAa,aAAa,QAAQ,UAAU;AAE5C,QAAI,SAAS,SAAS,cAAc,MAAM;AAC1C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,cAAc;AAExC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,SAAS;AACtC,YAAQ,aAAa,MAAM,GAAG,MAAM,QAAQ;AAC5C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,aAAa,mBAAmB,SAAS,EAAE;AAEnD,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,SAAS;AAEnC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,YAAY;AACjC,aAAS,YAAY,MAAM;AAC3B,aAAS,YAAY,mBAAmB;AAExC,YAAQ,YAAY,IAAI;AAExB,WAAO,YAAY,QAAQ;AAC3B,WAAO,YAAY,OAAO;AAE1B,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAChB,SAAK,SAAS;AACd,SAAK,UAAU;AAEf,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,QAAI,CAAC,KAAK,UAAU,SAAS,UAAU,EAAG,MAAK,UAAU,IAAI,WAAW;AAExE,SAAK,SAAS,aAAa,QAAQ,QAAQ;AAC3C,SAAK,SAAS,aAAa,YAAY,GAAG;AAC1C,SAAK,SAAS,aAAa,iBAAiB,KAAK,QAAQ,EAAE;AAC3D,SAAK,SAAS,aAAa,iBAAiB,KAAK,UAAU,SAAS,UAAU,IAAI,SAAS,OAAO;AAElG,SAAK,SAAS,iBAAiB,SAAS,MAAM;AAC1C,UAAI,KAAK,UAAU,SAAS,WAAW,GAAG;AACtC,cAAM,oBAAoB,MAAM,yBAAyB;AACzD,aAAK,OAAO,MAAM,YAAY,iCAAiC,QAAQ;AACvE,aAAK,OAAM;AAAA,MACf,OAAO;AACH,cAAM,oBAAoB,MAAM,0BAA0B;AAC1D,aAAK,OAAO,MAAM,YAAY,iCAAiC,MAAM;AACrE,aAAK,SAAQ;AAAA,MACjB;AAAA,IACJ,CAAC;AAED,SAAK,SAAS,iBAAiB,WAAW,CAAC,MAAM;AAC7C,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACpC,UAAE,eAAc;AAChB,aAAK,SAAS,MAAK;AAAA,MACvB;AAAA,IACJ,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;;AACP,SAAK,UAAU,OAAO,UAAU;AAChC,SAAK,UAAU,IAAI,WAAW;AAC9B,eAAK,aAAL,mBAAe,aAAa,iBAAiB;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;;AACL,SAAK,UAAU,OAAO,WAAW;AACjC,SAAK,UAAU,IAAI,UAAU;AAC7B,eAAK,aAAL,mBAAe,aAAa,iBAAiB;AAAA,EACjD;AACJ;AAlJI,cADiB,gBACV,eAAc;AADV,IAAM,gBAAN;AC5Bf,cAAc,OAAO,sBAAsB,aAAa;"}

package/dist/wje-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-accordion.js","sources":["../packages/wje-accordion/accordion.element.js","../packages/wje-accordion/accordion.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion\n * @status stable\n * @augments WJElement\n * @attribute {boolean} multiple - The multiple attribute for the accordion.\n * @attribute {number} index - The index attribute for the accordion.\n * @attribute {boolean} disabled - The disabled attribute for the accordion.\n * @attribute {boolean} expanded - The expanded attribute for the accordion.\n * @slot - The accordion main content.\n * //@fires [wje-accordion-item:open] The event fired when the accordion item is opened.\n * @tag wje-accordion\n */\nexport default class Accordion extends WJElement {\n    /**\n     * Constructor for the Accordion class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the `multiple` attribute on the element.\n     * If `true`, the `multiple` attribute is added.\n     * If `false`, the `multiple` attribute is removed.\n     * @param {boolean} value A boolean value indicating whether the element should support multiple selections.\n     */\n    set multiple(value) {\n        if (value) {\n            this.setAttribute('multiple', '');\n        } else {\n            this.removeAttribute('multiple');\n        }\n    }\n\n    /**\n     * Determines whether the element has the `multiple` attribute.\n     * @returns {boolean} `true` if the `multiple` attribute is present, otherwise `false`.\n     */\n    get multiple() {\n        return this.hasAttribute('multiple');\n    }\n\n    /**\n     * Sets the value of the `index` attribute.\n     * @param {number|string} value The value to set for the `index` attribute.\n     */\n    set index(value) {\n        this.setAttribute('index', value);\n    }\n\n    /**\n     * Retrieves the value of the `index` attribute as a number.\n     * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.\n     */\n    get index() {\n        return +this.getAttribute('index') || 0;\n    }\n\n    /**\n     * The class name for the Accordion element.\n     * @type {string}\n     */\n    className = 'Accordion';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'presentation' });\n    }\n\n    /**\n     * Method to run before the element is drawn.\n     */\n    beforeDraw() {\n        this.getAccordions().forEach((accordion, index) => {\n            if (this.index && +this.index === index) {\n                accordion.classList.add('expanded');\n            }\n        });\n    }\n\n    /**\n     * Method to draw the Accordion element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        this.slotEl = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Method to run after the element is drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-accordion-item:open', (e) => {\n            if (!this.multiple) this.collapseAll(e.detail.context);\n        });\n    }\n\n    /**\n     * Method to run after the element is drawn.\n     * @param exception\n     */\n    collapseAll(exception) {\n        this.getAccordions().forEach((accordion) => {\n            if (accordion !== exception) accordion.collapse();\n        });\n    }\n\n    /**\n     * Method to get the accordions.\n     * @returns {Array} An array containing the accordions.\n     */\n    getAccordions() {\n        return Array.from(this.querySelectorAll(':scope > wje-accordion-item'));\n    }\n}\n","import Accordion from './accordion.element.js';\n\nexport default Accordion;\n\nAccordion.define('wje-accordion', Accordion);\n"],"names":[],"mappings":";;;;;AAgBe,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAK;AA6CT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EA5CZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,UAAU;AAAA,IACnC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,CAAC,KAAK,aAAa,OAAO,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,eAAc,CAAE;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA,EAKA,aAAa;AACT,SAAK,cAAa,EAAG,QAAQ,CAAC,WAAW,UAAU;AAC/C,UAAI,KAAK,SAAS,CAAC,KAAK,UAAU,OAAO;AACrC,kBAAU,UAAU,IAAI,UAAU;AAAA,MACtC;AAAA,IACJ,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,SAAK,SAAS;AAEd,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,iBAAiB,2BAA2B,CAAC,MAAM;AACpD,UAAI,CAAC,KAAK,SAAU,MAAK,YAAY,EAAE,OAAO,OAAO;AAAA,IACzD,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,WAAW;AACnB,SAAK,cAAa,EAAG,QAAQ,CAAC,cAAc;AACxC,UAAI,cAAc,UAAW,WAAU,SAAQ;AAAA,IACnD,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gBAAgB;AACZ,WAAO,MAAM,KAAK,KAAK,iBAAiB,6BAA6B,CAAC;AAAA,EAC1E;AACJ;AC7IA,UAAU,OAAO,iBAAiB,SAAS;"}
+{"version":3,"file":"wje-accordion.js","sources":["../packages/wje-accordion/accordion.element.js","../packages/wje-accordion/accordion.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion\n * @status stable\n * @augments WJElement\n * @attribute {boolean} multiple - Allows multiple accordion items to stay expanded at the same time.\n * @attribute {number} index - Sets which child accordion item should start expanded based on DOM order.\n * @slot default - Slot for direct `wje-accordion-item` children.\n * @tag wje-accordion\n */\nexport default class Accordion extends WJElement {\n    /**\n     * Constructor for the Accordion class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the `multiple` attribute on the element.\n     * If `true`, the `multiple` attribute is added.\n     * If `false`, the `multiple` attribute is removed.\n     * @param {boolean} value A boolean value indicating whether the element should support multiple selections.\n     */\n    set multiple(value) {\n        if (value) {\n            this.setAttribute('multiple', '');\n        } else {\n            this.removeAttribute('multiple');\n        }\n    }\n\n    /**\n     * Determines whether the element has the `multiple` attribute.\n     * @returns {boolean} `true` if the `multiple` attribute is present, otherwise `false`.\n     */\n    get multiple() {\n        return this.hasAttribute('multiple');\n    }\n\n    /**\n     * Sets the value of the `index` attribute.\n     * @param {number|string} value The value to set for the `index` attribute.\n     */\n    set index(value) {\n        this.setAttribute('index', value);\n    }\n\n    /**\n     * Retrieves the value of the `index` attribute as a number.\n     * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.\n     */\n    get index() {\n        return +this.getAttribute('index') || 0;\n    }\n\n    /**\n     * The class name for the Accordion element.\n     * @type {string}\n     */\n    className = 'Accordion';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'presentation' });\n    }\n\n    /**\n     * Method to run before the element is drawn.\n     */\n    beforeDraw() {\n        this.getAccordions().forEach((accordion, index) => {\n            if (this.index && +this.index === index) {\n                accordion.classList.add('expanded');\n            }\n        });\n    }\n\n    /**\n     * Method to draw the Accordion element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        this.slotEl = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Method to run after the element is drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-accordion-item:open', (e) => {\n            if (!this.multiple) this.collapseAll(e.detail.context);\n        });\n    }\n\n    /**\n     * Method to run after the element is drawn.\n     * @param exception\n     */\n    collapseAll(exception) {\n        this.getAccordions().forEach((accordion) => {\n            if (accordion !== exception) accordion.collapse();\n        });\n    }\n\n    /**\n     * Method to get the accordions.\n     * @returns {Array} An array containing the accordions.\n     */\n    getAccordions() {\n        return Array.from(this.querySelectorAll(':scope > wje-accordion-item'));\n    }\n}\n","import Accordion from './accordion.element.js';\n\nexport default Accordion;\n\nAccordion.define('wje-accordion', Accordion);\n"],"names":[],"mappings":";;;;;AAae,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAK;AA6CT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EA5CZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,UAAU;AAAA,IACnC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,CAAC,KAAK,aAAa,OAAO,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,eAAc,CAAE;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA,EAKA,aAAa;AACT,SAAK,cAAa,EAAG,QAAQ,CAAC,WAAW,UAAU;AAC/C,UAAI,KAAK,SAAS,CAAC,KAAK,UAAU,OAAO;AACrC,kBAAU,UAAU,IAAI,UAAU;AAAA,MACtC;AAAA,IACJ,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,SAAK,SAAS;AAEd,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,iBAAiB,2BAA2B,CAAC,MAAM;AACpD,UAAI,CAAC,KAAK,SAAU,MAAK,YAAY,EAAE,OAAO,OAAO;AAAA,IACzD,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,WAAW;AACnB,SAAK,cAAa,EAAG,QAAQ,CAAC,cAAc;AACxC,UAAI,cAAc,UAAW,WAAU,SAAQ;AAAA,IACnD,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gBAAgB;AACZ,WAAO,MAAM,KAAK,KAAK,iBAAiB,6BAA6B,CAAC;AAAA,EAC1E;AACJ;AC1IA,UAAU,OAAO,iBAAiB,SAAS;"}

package/dist/wje-animation.js

@@ -4239,7 +4239,7 @@ class Animation extends WJElement {
   }
   /**
    * Getter for the observed attributes.
-   * @returns {Array} An array containing the name of the observed attribute.
+   * @returns {Array} An array containing the names of the observed attributes.
    */
   static get observedAttributes() {
     return [];

package/dist/wje-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-animation.js","sources":["../packages/wje-animation/animation.element.js","../packages/wje-animation/animation.js"],"sourcesContent":["import { fetchAndParseCSS } from '../utils/animations.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from '../styles/styles.css?inline';\nimport animations from 'animate.css?inline';\n\n/**\n * @summary This class represents an Animation element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/animation\n * @status stable\n * @augments WJElement\n * @slot - The animation main content.\n * @cssproperty --size - The size of the avatar.\n * @tag wje-animation\n */\nexport default class Animation extends WJElement {\n    /**\n     * Constructor for the Animation class.\n     */\n    constructor() {\n        super();\n        this._animations = [];\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set name(value) {\n        this.setAttribute('name', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string}\n     */\n    get name() {\n        return this.getAttribute('name') || 'heartBeat';\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration') || 1000;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set delay(value) {\n        this.setAttribute('delay', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {number}\n     */\n    get delay() {\n        return +this.getAttribute('delay') || 0;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set endDelay(value) {\n        this.setAttribute('endDelay', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {number}\n     */\n    get endDelay() {\n        return +this.getAttribute('endDelay') || 0;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string}\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'auto';\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set iterations(value) {\n        this.setAttribute('iterations', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string|number}\n     */\n    get iterations() {\n        return this.getAttribute('iterations') || Infinity;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set iterationStart(value) {\n        this.setAttribute('iterationStart', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {number}\n     */\n    get iterationStart() {\n        return +this.getAttribute('iterationStart') || 0;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set direction(value) {\n        this.setAttribute('direction', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string}\n     */\n    get direction() {\n        return this.getAttribute('direction') || 'normal';\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set easing(value) {\n        this.setAttribute('easing', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string}\n     */\n    get easing() {\n        return this.getAttribute('easing') || 'linear';\n    }\n\n    /**\n     * Setter for the animations property.\n     * @param {Array} value The new value for the animations property.\n     */\n    set animations(value) {\n        this._animations = value;\n    }\n\n    /**\n     * Getter for the animations' property.\n     * @returns {Array} The current value of the animations' property.\n     */\n    get animations() {\n        return this._animations;\n    }\n\n    /**\n     * The class name for the Animation element.\n     * @type {string}\n     */\n    className = 'Animation';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Animation element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Animation element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'presentation' });\n    }\n\n    /**\n     * Method to draw the Animation element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        this.slotEl = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Method to perform actions after the Animation element is drawn.\n     * This method destroys any existing animation, fetches a new animations array,\n     * selects the appropriate animation, and applies it to the element.\n     */\n    async afterDraw() {\n        this.destroyAnimation();\n\n        const element = this.slotEl.assignedElements()[0];\n        this.animations = await this.getAnimationsArray();\n        const selected = await this.animations.find((k) => k.name === this.name);\n\n        this.animation = element?.animate(selected?.keyframes, {\n            delay: +this.delay,\n            endDelay: +this.endDelay,\n            fill: this.fill,\n            duration: +this.duration,\n            iterationStart: +this.iterationStart,\n            iterations: this.iterations,\n            direction: this.direction,\n            easing: this.easing,\n        });\n\n        if (this.animation && this.animation.playState === 'idle') this.animation.play();\n    }\n\n    /**\n     * Method to fetch and parse the animations array from a CSS file.\n     * @returns {Array} An array of animation definitions parsed from the CSS file.\n     */\n    async getAnimationsArray() {\n        return await fetchAndParseCSS(animations);\n    }\n\n    /**\n     * Terminates and cleans up the currently active animation if it exists.\n     * Calls the `cancel` method to stop the animation process.\n     * @returns {void} Does not return any value.\n     */\n    destroyAnimation() {\n        if (this.animation) {\n            this.cancel();\n        }\n    }\n\n    /**\n     * Plays the currently assigned animation, if available.\n     * @returns {void} This method does not return any value.\n     */\n    play() {\n        if (this.animation) {\n            this.animation.play();\n        }\n    }\n\n    /**\n     * Cancels the current animation if it is initialized and has a cancel method.\n     * Logs a warning if the animation is not initialized or the cancel method is unavailable.\n     * @returns {void} Does not return a value.\n     */\n    cancel() {\n        if (this.animation && typeof this.animation.cancel === 'function') {\n            this.animation.cancel();\n        } else {\n            console.warn('Animation is not initialized or cancel is not available');\n        }\n    }\n}\n","import Animation from './animation.element.js';\n\nexport default Animation;\n\nAnimation.define('wje-animation', Animation);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"wje-animation.js","sources":["../packages/wje-animation/animation.element.js","../packages/wje-animation/animation.js"],"sourcesContent":["import { fetchAndParseCSS } from '../utils/animations.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from '../styles/styles.css?inline';\nimport animations from 'animate.css?inline';\n\n/**\n * @summary This class represents an Animation element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/animation\n * @status stable\n * @augments WJElement\n * @attribute {string} name - The Animate.css animation name played on the slotted element.\n * @attribute {number} duration - The animation playback duration in milliseconds.\n * @attribute {number} delay - The delay before the animation starts.\n * @attribute {number} endDelay - The delay applied after the animation completes.\n * @attribute {string} fill - The fill mode used by the animation playback.\n * @attribute {string|number} iterations - The number of animation repetitions.\n * @attribute {number} iterationStart - The starting offset for the first animation iteration.\n * @attribute {string} direction - The playback direction of the animation.\n * @attribute {string} easing - The easing function used by the animation playback.\n * @slot - The animation main content.\n * @tag wje-animation\n */\nexport default class Animation extends WJElement {\n    /**\n     * Constructor for the Animation class.\n     */\n    constructor() {\n        super();\n        this._animations = [];\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set name(value) {\n        this.setAttribute('name', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string}\n     */\n    get name() {\n        return this.getAttribute('name') || 'heartBeat';\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration') || 1000;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set delay(value) {\n        this.setAttribute('delay', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {number}\n     */\n    get delay() {\n        return +this.getAttribute('delay') || 0;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set endDelay(value) {\n        this.setAttribute('endDelay', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {number}\n     */\n    get endDelay() {\n        return +this.getAttribute('endDelay') || 0;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string}\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'auto';\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set iterations(value) {\n        this.setAttribute('iterations', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string|number}\n     */\n    get iterations() {\n        return this.getAttribute('iterations') || Infinity;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set iterationStart(value) {\n        this.setAttribute('iterationStart', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {number}\n     */\n    get iterationStart() {\n        return +this.getAttribute('iterationStart') || 0;\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set direction(value) {\n        this.setAttribute('direction', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string}\n     */\n    get direction() {\n        return this.getAttribute('direction') || 'normal';\n    }\n\n    /**\n     * Setter for the name attribute.\n     * @param value\n     */\n    set easing(value) {\n        this.setAttribute('easing', value);\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string}\n     */\n    get easing() {\n        return this.getAttribute('easing') || 'linear';\n    }\n\n    /**\n     * Setter for the animations property.\n     * @param {Array} value The new value for the animations property.\n     */\n    set animations(value) {\n        this._animations = value;\n    }\n\n    /**\n     * Getter for the animations' property.\n     * @returns {Array} The current value of the animations' property.\n     */\n    get animations() {\n        return this._animations;\n    }\n\n    /**\n     * The class name for the Animation element.\n     * @type {string}\n     */\n    className = 'Animation';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Animation element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the names of the observed attributes.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Animation element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'presentation' });\n    }\n\n    /**\n     * Method to draw the Animation element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        this.slotEl = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Method to perform actions after the Animation element is drawn.\n     * This method destroys any existing animation, fetches a new animations array,\n     * selects the appropriate animation, and applies it to the element.\n     */\n    async afterDraw() {\n        this.destroyAnimation();\n\n        const element = this.slotEl.assignedElements()[0];\n        this.animations = await this.getAnimationsArray();\n        const selected = await this.animations.find((k) => k.name === this.name);\n\n        this.animation = element?.animate(selected?.keyframes, {\n            delay: +this.delay,\n            endDelay: +this.endDelay,\n            fill: this.fill,\n            duration: +this.duration,\n            iterationStart: +this.iterationStart,\n            iterations: this.iterations,\n            direction: this.direction,\n            easing: this.easing,\n        });\n\n        if (this.animation && this.animation.playState === 'idle') this.animation.play();\n    }\n\n    /**\n     * Method to fetch and parse the animations array from a CSS file.\n     * @returns {Array} An array of animation definitions parsed from the CSS file.\n     */\n    async getAnimationsArray() {\n        return await fetchAndParseCSS(animations);\n    }\n\n    /**\n     * Terminates and cleans up the currently active animation if it exists.\n     * Calls the `cancel` method to stop the animation process.\n     * @returns {void} Does not return any value.\n     */\n    destroyAnimation() {\n        if (this.animation) {\n            this.cancel();\n        }\n    }\n\n    /**\n     * Plays the currently assigned animation, if available.\n     * @returns {void} This method does not return any value.\n     */\n    play() {\n        if (this.animation) {\n            this.animation.play();\n        }\n    }\n\n    /**\n     * Cancels the current animation if it is initialized and has a cancel method.\n     * Logs a warning if the animation is not initialized or the cancel method is unavailable.\n     * @returns {void} Does not return a value.\n     */\n    cancel() {\n        if (this.animation && typeof this.animation.cancel === 'function') {\n            this.animation.cancel();\n        } else {\n            console.warn('Animation is not initialized or cancel is not available');\n        }\n    }\n}\n","import Animation from './animation.element.js';\n\nexport default Animation;\n\nAnimation.define('wje-animation', Animation);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/wje-aside.js

@@ -10,7 +10,7 @@ class Aside extends WJElement {
   constructor() {
     super();
     /**
-     * The class name for the Aside element ddddd.
+     * The class name for the Aside element.
      * @type {string}
      */
     __publicField(this, "className", "Aside");

package/dist/wje-aside.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-aside.js","sources":["../packages/wje-aside/aside.element.js","../packages/wje-aside/aside.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Aside element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/aside\n * @status stable\n * @augments WJElement\n * @slot - The aside main content.\n * @cssproperty --wje-aside-width;\n * @cssproperty --wje-aside-top;\n * @cssproperty --wje-aside-border-color: var(--wje-border-color);\n * @cssproperty --wje-aside-border-width;\n * @cssproperty --wje-aside-border-style;\n * @tag wje-aside\n */\nexport default class Aside extends WJElement {\n    /**\n     * Constructor for the Aside class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Aside element ddddd.\n     * @type {string}\n     */\n    className = 'Aside';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Aside element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An empty array as there are no observed attributes.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Aside element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the Aside element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        if (this.width) this.style.setProperty('--wje-aside-width', this.width);\n\n        if (this.top && this.hasAttribute('fixed')) this.style.setProperty('--wje-aside-top', this.top);\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Aside from './aside.element.js';\n\n// export * from \"./aside.element.js\";\nexport default Aside;\n\nAside.define('wje-aside', Aside);\n"],"names":[],"mappings":";;;;;AAgBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,KAAK,MAAO,MAAK,MAAM,YAAY,qBAAqB,KAAK,KAAK;AAEtE,QAAI,KAAK,OAAO,KAAK,aAAa,OAAO,EAAG,MAAK,MAAM,YAAY,mBAAmB,KAAK,GAAG;AAE9F,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;ACjEA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-aside.js","sources":["../packages/wje-aside/aside.element.js","../packages/wje-aside/aside.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Aside element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/aside\n * @status stable\n * @augments WJElement\n * @attribute {string} width - Sets the width of the aside column, typically through a CSS length or design token.\n * @attribute {string} top - Sets the top offset used together with the `fixed` layout mode.\n * @attribute {boolean} fixed - Pins the aside in a fixed desktop position instead of keeping it in normal flow.\n * @attribute {string} variant - Selects an alternate layout variant such as the mobile `top-start` drawer style.\n * @slot default - Slot for the aside content.\n * @cssproperty [--wje-aside-width] - Controls the width of the aside column.\n * @cssproperty [--wje-aside-top] - Controls the top offset of a fixed aside.\n * @cssproperty [--wje-aside-border-color=var(--wje-border-color)] - Controls the border color of the aside.\n * @cssproperty [--wje-aside-border-width] - Controls the border width of the aside.\n * @cssproperty [--wje-aside-border-style] - Controls the border style of the aside.\n * @tag wje-aside\n */\nexport default class Aside extends WJElement {\n    /**\n     * Constructor for the Aside class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Aside element.\n     * @type {string}\n     */\n    className = 'Aside';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Aside element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An empty array as there are no observed attributes.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Aside element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the Aside element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        if (this.width) this.style.setProperty('--wje-aside-width', this.width);\n\n        if (this.top && this.hasAttribute('fixed')) this.style.setProperty('--wje-aside-top', this.top);\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Aside from './aside.element.js';\n\n// export * from \"./aside.element.js\";\nexport default Aside;\n\nAside.define('wje-aside', Aside);\n"],"names":[],"mappings":";;;;;AAoBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,KAAK,MAAO,MAAK,MAAM,YAAY,qBAAqB,KAAK,KAAK;AAEtE,QAAI,KAAK,OAAO,KAAK,aAAa,OAAO,EAAG,MAAK,MAAM,YAAY,mBAAmB,KAAK,GAAG;AAE9F,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;ACrEA,MAAM,OAAO,aAAa,KAAK;"}

package/dist/wje-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["/**\n * Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n */\nexport function getHsl(text, s = 40, l = 75) {\n    let str = text;\n    let hash = 0;\n\n    for (let i = 0; i < str?.length; i++) {\n        hash = str.charCodeAt(i) + hash * 31;\n    }\n\n    let h = hash % 360;\n\n    return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/**\n * Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n *\n * @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n */\nexport function getAvatarColors(text) {\n    let hash = 0;\n    for (let i = 0; i < text?.length; i++) {\n        hash = text.charCodeAt(i) + hash * 31;\n    }\n\n    const h = Math.abs(hash) % 360;\n\n    // 👇 Figma-like pastel background\n    const bgS = 30;\n    const bgL = 88;\n\n    // 👇 Softer text color (same hue)\n    const textS = 50;\n    const textL = 48;\n\n    return {\n        background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n        color: `hsl(${h}, ${textS}%, ${textL}%)`\n    };\n}\n\n/**\n * Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n */\nexport function getInitials(string, length = 2) {\n    let names = string.split(' ');\n    let initials = names[0].substring(0, 1).toUpperCase();\n\n    if (names.length > 1 && length > 1) {\n        initials += names[names.length - 1].substring(0, 1).toUpperCase();\n    }\n    return initials;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @slot - The avatar main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty --wje-avatar-width;\n * @cssproperty --wje-avatar-height;\n * @cssproperty --wje-avatar-font-size;\n * @cssproperty --wje-avatar-font-weight;\n * @cssproperty --wje-avatar-color;\n * @cssproperty --wje-avatar-background-color;\n * @cssproperty --wje-avatar-border-radius;\n * @cssproperty --wje-avatar-border-color;\n * @cssproperty --wje-avatar-border-width;\n * @cssproperty --wje-avatar-border-style;\n * @tag wje-avatar\n */\nexport default class Avatar extends WJElement {\n    /**\n     * Avatar class constructor.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'label' attribute for the element.\n     * @param {string} value The new value to be set for the 'label' attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute for the element.\n     * If the attribute is not set, it defaults to an empty string.\n     * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Sets the value of initials for the element by updating\n     * the 'initials' attribute with the provided value.\n     * @param {string} value The value to be set as the initials.\n     */\n    set initials(value) {\n        this.setAttribute('initials', '');\n    }\n\n    /**\n     * Retrieves the value of the 'initials' attribute if it exists.\n     * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n     */\n    get initials() {\n        return this.hasAttribute('initials') || false;\n    }\n\n    /**\n     * Sets the size attribute for the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the size attribute of the element. If the size attribute\n     * is not defined, it returns the default value 'medium'.\n     * @returns {string} The size value of the element or 'medium' if not specified.\n     */\n    get size() {\n        return this.getAttribute('size') || 'medium';\n    }\n\n    /**\n     * Class name for the Avatar element.\n     */\n    className = 'Avatar';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['initials', 'label'];\n    }\n\n    /**\n     * Method to setup attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'label' || name === 'initials') {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Method to draw the avatar element and return a document fragment.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-avatar');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n\n        if (this.initials) {\n            let initials = getInitials(this.label);\n            const { background, color } = getAvatarColors(initials);\n\n            this.style.setProperty('--wje-avatar-background-color', background);\n            this.style.setProperty('--wje-avatar-color', color);\n\n            element.innerText = initials;\n        } else {\n            let slotIcon = document.createElement('slot');\n            slotIcon.setAttribute('name', 'icon');\n\n            element.appendChild(slotIcon);\n        }\n\n        let status = document.createElement('slot');\n        status.setAttribute('name', 'status');\n        status.setAttribute('part', 'status');\n\n        let secondary = document.createElement('slot');\n        secondary.setAttribute('name', 'secondary');\n        secondary.setAttribute('part', 'secondary');\n\n        element.appendChild(status);\n        element.appendChild(secondary);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.label?.trim();\n        if (label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Method to check if the avatar is an image.\n     * @returns {boolean} - True if the avatar is an image, false otherwise\n     */\n    isImage() {\n        return this.getElementsByTagName('wje-img').length > 0;\n    }\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["/**\n * Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n */\nexport function getHsl(text, s = 40, l = 75) {\n    let str = text;\n    let hash = 0;\n\n    for (let i = 0; i < str?.length; i++) {\n        hash = str.charCodeAt(i) + hash * 31;\n    }\n\n    let h = hash % 360;\n\n    return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/**\n * Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n *\n * @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n */\nexport function getAvatarColors(text) {\n    let hash = 0;\n    for (let i = 0; i < text?.length; i++) {\n        hash = text.charCodeAt(i) + hash * 31;\n    }\n\n    const h = Math.abs(hash) % 360;\n\n    // 👇 Figma-like pastel background\n    const bgS = 30;\n    const bgL = 88;\n\n    // 👇 Softer text color (same hue)\n    const textS = 50;\n    const textL = 48;\n\n    return {\n        background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n        color: `hsl(${h}, ${textS}%, ${textL}%)`\n    };\n}\n\n/**\n * Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n */\nexport function getInitials(string, length = 2) {\n    let names = string.split(' ');\n    let initials = names[0].substring(0, 1).toUpperCase();\n\n    if (names.length > 1 && length > 1) {\n        initials += names[names.length - 1].substring(0, 1).toUpperCase();\n    }\n    return initials;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @attribute {boolean} initials - Renders generated initials from `label` instead of the default slotted content.\n * @attribute {string} label - Provides the source text for generated initials and the accessible label of the avatar.\n * @attribute {string} size - Selects a predefined avatar size such as `small`, `medium`, `normal`, `large`, or larger variants.\n * @attribute {string} status-placement - Positions the `status` slot on one of the avatar corners.\n * @slot default - Slot for the main avatar content, typically an image.\n * @slot icon - Slot for an icon rendered inside the avatar.\n * @slot status - Slot for a status badge or indicator positioned on the avatar edge.\n * @slot secondary - Slot for additional secondary content rendered with the avatar.\n * @csspart native - The component's native wrapper.\n * @csspart status - The positioned slot container for status content.\n * @csspart secondary - The slot container for secondary avatar content.\n * @cssproperty [--wje-avatar-size] - Controls the overall rendered size of the avatar shell.\n * @cssproperty [--wje-avatar-font-size] - Controls the font size used for initials and text content.\n * @cssproperty [--wje-avatar-font-weight] - Controls the font weight used for initials and text content.\n * @cssproperty [--wje-avatar-color] - Controls the text color inside the avatar.\n * @cssproperty [--wje-avatar-background-color] - Controls the background color of the avatar surface.\n * @cssproperty [--wje-avatar-border-radius] - Controls the avatar border radius.\n * @cssproperty [--wje-avatar-border-color] - Controls the avatar border color when a border is applied.\n * @cssproperty [--wje-avatar-border-width] - Controls the avatar border width when a border is applied.\n * @cssproperty [--wje-avatar-border-style] - Controls the avatar border style when a border is applied.\n * @tag wje-avatar\n */\nexport default class Avatar extends WJElement {\n    /**\n     * Avatar class constructor.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'label' attribute for the element.\n     * @param {string} value The new value to be set for the 'label' attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute for the element.\n     * If the attribute is not set, it defaults to an empty string.\n     * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Sets the value of initials for the element by updating\n     * the 'initials' attribute with the provided value.\n     * @param {string} value The value to be set as the initials.\n     */\n    set initials(value) {\n        this.setAttribute('initials', '');\n    }\n\n    /**\n     * Retrieves the value of the 'initials' attribute if it exists.\n     * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n     */\n    get initials() {\n        return this.hasAttribute('initials') || false;\n    }\n\n    /**\n     * Sets the size attribute for the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the size attribute of the element. If the size attribute\n     * is not defined, it returns the default value 'medium'.\n     * @returns {string} The size value of the element or 'medium' if not specified.\n     */\n    get size() {\n        return this.getAttribute('size') || 'medium';\n    }\n\n    /**\n     * Class name for the Avatar element.\n     */\n    className = 'Avatar';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['initials', 'label'];\n    }\n\n    /**\n     * Method to setup attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'label' || name === 'initials') {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Method to draw the avatar element and return a document fragment.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-avatar');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n\n        if (this.initials) {\n            let initials = getInitials(this.label);\n            const { background, color } = getAvatarColors(initials);\n\n            this.style.setProperty('--wje-avatar-background-color', background);\n            this.style.setProperty('--wje-avatar-color', color);\n\n            element.innerText = initials;\n        } else {\n            let slotIcon = document.createElement('slot');\n            slotIcon.setAttribute('name', 'icon');\n\n            element.appendChild(slotIcon);\n        }\n\n        let status = document.createElement('slot');\n        status.setAttribute('name', 'status');\n        status.setAttribute('part', 'status');\n\n        let secondary = document.createElement('slot');\n        secondary.setAttribute('name', 'secondary');\n        secondary.setAttribute('part', 'secondary');\n\n        element.appendChild(status);\n        element.appendChild(secondary);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.label?.trim();\n        if (label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Method to check if the avatar is an image.\n     * @returns {boolean} - True if the avatar is an image, false otherwise\n     */\n    isImage() {\n        return this.getElementsByTagName('wje-img').length > 0;\n    }\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":[],"mappings":"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"}

package/dist/wje-button.js

@@ -11,7 +11,7 @@ var _Button_instances, populateCustomEvent_fn;
 import { b as bindRouterLinks } from "./router-links-wjqCnncc.js";
 import { bool } from "./utils.js";
 import WJElement from "./wje-element.js";
-import { I as Icon } from "./icon-DVyMc4Wv.js";
+import { I as Icon } from "./icon-CReYMzAK.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n    background-color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-primary-9);\n}\n\n.wje-button-link.wje-color-primary {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n    background-color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-complete-9);\n}\n\n.wje-button-link.wje-color-complete {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n    background-color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-success-9);\n}\n\n.wje-button-link.wje-color-success {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n    background-color: var(--wje-color-warning-9);\n    border-color: var(--wje-color-warning-9);\n    color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n    background-color: var(--wje-color-warning-1);\n    border-color: var(--wje-color-warning-11);\n    color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n    background-color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-danger-9);\n}\n\n.wje-button-link.wje-color-danger {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-info {\n    background-color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-info {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-9);\n}\n\n.wje-button-link.wje-color-info {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n    background-color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-5);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-link.wje-color-default {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-11);\n}\n\n:host {\n    --wje-padding-top: 0.4rem;\n    --wje-padding-start: 0.5rem;\n    --wje-padding-end: 0.5rem;\n    --wje-padding-bottom: 0.4rem;\n\n    display: inline-flex;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n    display: block;\n}\n\n.native-button {\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n    border-width: var(--wje-button-border-width);\n    border-style: var(--wje-button-border-style);\n    border-color: var(--wje-button-border-color);\n    background-color: transparent;\n    /*color: var(--wje-button-color);*/\n    line-height: 1;\n    contain: layout style;\n    cursor: pointer;\n    z-index: 0;\n    box-sizing: border-box;\n    appearance: none;\n    margin: 0;\n    border-radius: var(--wje-button-border-radius);\n    padding-top: var(--wje-padding-top);\n    padding-bottom: var(--wje-padding-bottom);\n    padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n    white-space: nowrap;\n}\n\n.native-button:hover {\n    outline-style: solid;\n    outline-width: var(--wje-button-outline-width);\n    transition: outline-width 0.1s linear;\n}\n\n@media (any-hover: hover) {\n    .wje-button-solid.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-9);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-outline.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-primary-9);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-link.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: transparent;\n        color: var(--wje-color-primary-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-9);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-outline.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-complete-9);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-link.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: transparent;\n        color: var(--wje-color-complete-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-success:hover {\n        background-color: var(--wje-color-success-9);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-outline.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-success-9);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-link.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: transparent;\n        color: var(--wje-color-success-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-9);\n        border-color: var(--wje-color-warning-9);\n        color: var(--wje-color-black);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-outline.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: var(--wje-color-warning-11);\n        color: var(--wje-color-warning-11);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-link.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: transparent;\n        color: var(--wje-color-warning-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-9);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-outline.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-danger-9);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-link.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: transparent;\n        color: var(--wje-color-danger-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-9);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-1);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-9);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-0);\n        border-color: var(--wje-color-contrast-3);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-2);\n        border-color: var(--wje-color-contrast-5);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n}\n\n.button-inner {\n    display: flex;\n    position: relative;\n    flex-flow: row nowrap;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n    border-width: var(--wje-button-border-width);\n    border-radius: var(--wje-button-border-radius);\n    border-color: transparent;\n    background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n    border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n    border-radius: var(--wje-border-radius-circle);\n    aspect-ratio: 1/1;\n    width: 1.988rem;\n    display: flex;\n    align-items: center;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='small']) .native-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n}\n\n:host([size='large']) .native-button {\n    --wje-padding-top: 0.6rem;\n    --wje-padding-start: 0.7rem;\n    --wje-padding-end: 0.7rem;\n    --wje-padding-bottom: 0.6rem;\n}\n\n:host([size='small'][circle]) .native-button {\n    width: 1.688rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='large'][circle]) .native-button {\n    width: 2.388rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted(wje-icon[slot='end']) {\n    margin: 0 -0.2rem 0 0.3rem;\n}\n\n:host(:not([only-caret])) slot[name='caret'] {\n    padding: 0 0 0 0.3rem;\n}\n\n:host([only-caret]) {\n    .native-button {\n        aspect-ratio: 1/1;\n        width: 1.988rem;\n        display: flex;\n        align-items: center;\n    }\n    slot[name='caret'] {\n        padding: 0;\n        display: block;\n    }\n}\n\n::slotted([slot='toggle']) {\n    display: none;\n}\n\n::slotted([slot='toggle'].show) {\n    display: block;\n}\n";

package/dist/wje-carousel-item.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Carousel Item ]\n*/\n\n:host {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    width: var(--wje-carousel-size, 100%);\n    max-height: 100%;\n    aspect-ratio: var(--wje-carousel-item-aspect-ratio);\n    scroll-snap-align: center;\n    scroll-snap-stop: always;\n}\n\n.native-carousel-item {\n    width: 100%;\n    height: 100%;\n    display: flex;\n}\n::slotted(wje-img) {\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: contain;\n    display: flex;\n}\n";
+const styles = "/*\n[ WJ Carousel Item ]\n*/\n\n:host {\n    display: flex;\n    align-items: stretch;\n    justify-content: flex-start;\n    flex-direction: column;\n    width: var(--wje-carousel-item-basis, var(--wje-carousel-size, 100%));\n    min-width: 0;\n    max-width: 100%;\n    max-height: 100%;\n    align-self: stretch;\n    aspect-ratio: var(--wje-carousel-item-aspect-ratio, inherit);\n    scroll-snap-align: start;\n    scroll-snap-stop: always;\n    box-sizing: border-box;\n}\n\n.native-carousel-item {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex: 1 1 auto;\n    align-items: stretch;\n    justify-content: flex-start;\n    min-width: 0;\n    box-sizing: border-box;\n}\n\nslot {\n    display: flex;\n    width: 100%;\n    height: 100%;\n    flex: 1 1 auto;\n    align-items: stretch;\n    justify-content: center;\n    min-width: 0;\n}\n\n:host([single-content]) ::slotted(*) {\n    width: 100%;\n    min-width: 0;\n    flex: 1 1 auto;\n}\n\n::slotted(wje-img) {\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: contain;\n    display: flex;\n}\n";
 class CarouselItem extends WJElement {
   /**
    * CarouselItem constructor method.
@@ -46,6 +46,7 @@ class CarouselItem extends WJElement {
     native.classList.add("native-carousel-item");
     native.setAttribute("part", "native");
     let slot = document.createElement("slot");
+    this.defaultSlot = slot;
     native.appendChild(slot);
     fragment.appendChild(native);
     return fragment;
@@ -55,6 +56,23 @@ class CarouselItem extends WJElement {
    */
   afterDraw() {
     event.addListener(this, "click", "wje-carousel-item:click");
+    this.syncContentLayoutMode();
+    if (this.defaultSlot && !this.defaultSlot.dataset.wjeCarouselItemBound) {
+      this.defaultSlot.addEventListener("slotchange", () => this.syncContentLayoutMode());
+      this.defaultSlot.dataset.wjeCarouselItemBound = "true";
+    }
+  }
+  /**
+   * Keeps a simple layout hint for single-wrapper content.
+   */
+  syncContentLayoutMode() {
+    var _a;
+    const assignedElements = ((_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) || [];
+    if (assignedElements.length === 1) {
+      this.setAttribute("single-content", "");
+      return;
+    }
+    this.removeAttribute("single-content");
   }
 }
 WJElement.define("wje-carousel-item", CarouselItem);

package/dist/wje-carousel-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-carousel-item.js","sources":["../packages/wje-carousel-item/carousel-item.element.js","../packages/wje-carousel-item/carousel-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents CarouselItem element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/carousel-item\n * @status stable\n * @augments WJElement\n * @slot - The carousel item main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-carousel-item-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-carousel-item-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-carousel-item-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-carousel-item-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-carousel-item-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-carousel-item-margin-inline=0] - Margin inline of the component;\n */\nexport default class CarouselItem extends WJElement {\n    /**\n     * CarouselItem constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CarouselItem element.\n     * @type {string}\n     */\n    className = 'CarouselItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the CarouselItem.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the CarouselItem element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-carousel-item');\n        native.setAttribute('part', 'native');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * After draw event for the CarouselItem element.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', 'wje-carousel-item:click');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport CarouselItem from './carousel-item.element.js';\n\n// export * from \"./carousel-item.element.js\";\nexport default CarouselItem;\n\nWJElement.define('wje-carousel-item', CarouselItem);\n"],"names":[],"mappings":";;;;;;AAoBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,sBAAsB;AAC3C,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,yBAAyB;AAAA,EAC9D;AACJ;AC7EA,UAAU,OAAO,qBAAqB,YAAY;"}
+{"version":3,"file":"wje-carousel-item.js","sources":["../packages/wje-carousel-item/carousel-item.element.js","../packages/wje-carousel-item/carousel-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents CarouselItem element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/carousel-item\n * @status stable\n * @augments WJElement\n * @slot - The carousel item main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-carousel-item-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-carousel-item-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-carousel-item-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-carousel-item-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-carousel-item-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-carousel-item-margin-inline=0] - Margin inline of the component;\n */\nexport default class CarouselItem extends WJElement {\n    /**\n     * CarouselItem constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the CarouselItem element.\n     * @type {string}\n     */\n    className = 'CarouselItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the CarouselItem.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the CarouselItem element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-carousel-item');\n        native.setAttribute('part', 'native');\n\n        let slot = document.createElement('slot');\n        this.defaultSlot = slot;\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * After draw event for the CarouselItem element.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', 'wje-carousel-item:click');\n        this.syncContentLayoutMode();\n\n        if (this.defaultSlot && !this.defaultSlot.dataset.wjeCarouselItemBound) {\n            this.defaultSlot.addEventListener('slotchange', () => this.syncContentLayoutMode());\n            this.defaultSlot.dataset.wjeCarouselItemBound = 'true';\n        }\n    }\n\n    /**\n     * Keeps a simple layout hint for single-wrapper content.\n     */\n    syncContentLayoutMode() {\n        const assignedElements = this.defaultSlot?.assignedElements({ flatten: true }) || [];\n\n        if (assignedElements.length === 1) {\n            this.setAttribute('single-content', '');\n            return;\n        }\n\n        this.removeAttribute('single-content');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport CarouselItem from './carousel-item.element.js';\n\n// export * from \"./carousel-item.element.js\";\nexport default CarouselItem;\n\nWJElement.define('wje-carousel-item', CarouselItem);\n"],"names":[],"mappings":";;;;;;AAoBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,sBAAsB;AAC3C,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,cAAc;AAEnB,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,yBAAyB;AAC1D,SAAK,sBAAqB;AAE1B,QAAI,KAAK,eAAe,CAAC,KAAK,YAAY,QAAQ,sBAAsB;AACpE,WAAK,YAAY,iBAAiB,cAAc,MAAM,KAAK,uBAAuB;AAClF,WAAK,YAAY,QAAQ,uBAAuB;AAAA,IACpD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,wBAAwB;;AACpB,UAAM,qBAAmB,UAAK,gBAAL,mBAAkB,iBAAiB,EAAE,SAAS,KAAI,OAAO,CAAA;AAElF,QAAI,iBAAiB,WAAW,GAAG;AAC/B,WAAK,aAAa,kBAAkB,EAAE;AACtC;AAAA,IACJ;AAEA,SAAK,gBAAgB,gBAAgB;AAAA,EACzC;AACJ;AClGA,UAAU,OAAO,qBAAqB,YAAY;"}