wj-elements 0.3.8 → 0.4.1

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

@@ -6,14 +6,19 @@ import { default as WJElement } from '../wje-element/element.js';
  * @status stable
  * @augments {WJElement}
  * @csspart native - The native part
- * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.
- * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.
- * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.
- * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.
- * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.
- * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.
  * @slot - The content of the toast.
  * @slot media - The media of the toast.
+ * @attribute {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.
+ * @attribute {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.
+ * @attribute {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.
+ * @attribute {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.
+ * @attribute {string} color - Defines the color variant of the toast. Supports values such as `primary`, `complete`, `success`, `warning`, `danger`, `info`, and `contrast`.
+ * @attribute {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.
+ * @attribute {boolean} stacked - Enables a layered toast stack where the newest toast stays visually on top while older ones shrink behind it.
+ * @attribute {string} stack-position - Defines where the toast stack is placed on the screen. Supports `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, and `bottom-end`.
+ * @attribute {number} stack-depth - Defines how many visual levels the collapsed stacked toast can show. Older toasts beyond this limit stay at the last reduced level. Default is `3`.
+ * @attribute {string} icon - Adds a leading icon into the `media` slot by icon name.
+ * @cssproperty [--wje-toast-stack-width=300px] - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts.
  * // @fires wje-toast:after-show - Fired after the toast is shown.
  * // @fires wje-toast:after-hide - Fired after the toast is hidden.
  */
@@ -24,9 +29,7 @@ export default class Toast extends WJElement {
      * @returns {CSSStyleSheet} The CSS stylesheet
      */
     static get cssStyleSheet(): CSSStyleSheet;
-    toastStack: HTMLDivElement & {
-        className: string;
-    };
+    toastStack: HTMLDivElement;
     /**
      * Set headline value of the toast.
      * @param value
@@ -87,6 +90,36 @@ export default class Toast extends WJElement {
      * @returns {boolean}
      */
     get countdown(): boolean;
+    /**
+     * Set stacked value of the toast.
+     * @param value
+     */
+    set stacked(value: boolean);
+    /**
+     * Get stacked value of the toast.
+     * @returns {boolean}
+     */
+    get stacked(): boolean;
+    /**
+     * Set stack depth of the toast.
+     * @param value
+     */
+    set stackDepth(value: number);
+    /**
+     * Get stack depth of the toast.
+     * @returns {number}
+     */
+    get stackDepth(): number;
+    /**
+     * Set stack position of the toast.
+     * @param value
+     */
+    set stackPosition(value: string);
+    /**
+     * Get stack position of the toast.
+     * @returns {string}
+     */
+    get stackPosition(): string;
     /**
      * Set icon value of the toast.
      * @param value
@@ -97,6 +130,42 @@ export default class Toast extends WJElement {
      * @returns {string}
      */
     get icon(): string;
+    /**
+     * Creates a toast stack container.
+     * @returns {HTMLDivElement}
+     */
+    createToastStack(): HTMLDivElement;
+    /**
+     * Returns the key of the toast stack.
+     * @returns {string}
+     */
+    getToastStackKey(): string;
+    /**
+     * Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.
+     * @param {HTMLDivElement} stack
+     */
+    applyToastStackPlacement(stack?: HTMLDivElement): void;
+    /**
+     * Applies the current toast stack configuration to a stack element.
+     * @param {HTMLDivElement} stack
+     */
+    syncToastStack(stack?: HTMLDivElement): void;
+    /**
+     * Clears transient stack styling from a toast.
+     * @param {Toast} toast
+     */
+    clearStackItemStyles(toast: Toast): void;
+    /**
+     * Measures the rendered height of a toast for stack overlap calculations.
+     * @param {Toast} toast
+     * @returns {number}
+     */
+    getToastVisualHeight(toast: Toast): number;
+    /**
+     * Recomputes the visual order of toasts inside the stack.
+     * @param {HTMLDivElement} stack
+     */
+    updateToastStack(stack?: HTMLDivElement): void;
     /**
      * Draw method for the toast notification.
      * @returns {object} Document fragment
@@ -109,7 +178,7 @@ export default class Toast extends WJElement {
      */
     afterDraw(): void;
     countdownAnimation: Animation;
-    remainingTime: number;
+    remainingTime: any;
     /**
      * Starts the timer.
      * This method sets the `startTime` property to the current time and sets
@@ -119,6 +188,7 @@ export default class Toast extends WJElement {
      */
     startTimer(): void;
     startTime: number;
+    isTimerPaused: boolean;
     timeoutID: number;
     /**
      * Stops the timer.

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/styles.css

@@ -842,10 +842,63 @@ z = font size
 .wje-toast-stack {
     position: fixed;
     top: 0;
-    margin: 0 0.5rem;
-    width: 300px;
-    max-width: 100%;
-    max-height: 100%;
+    right: 0;
+    margin: 0.5rem;
+    width: min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem));
+    max-width: calc(100vw - 1rem);
+    max-height: calc(100vh - 1rem);
     overflow: auto;
     z-index: 9999;
-}
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--wje-spacing-medium);
+}
+
+.wje-toast-stack[data-position='top-start'] {
+    left: 0;
+    right: auto;
+}
+
+.wje-toast-stack[data-position='top-center'] {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+}
+
+.wje-toast-stack[data-position='bottom-start'],
+.wje-toast-stack[data-position='bottom-center'],
+.wje-toast-stack[data-position='bottom-end'] {
+    top: auto;
+    bottom: 0;
+}
+
+.wje-toast-stack[data-position='bottom-start'] {
+    left: 0;
+    right: auto;
+}
+
+.wje-toast-stack[data-position='bottom-center'] {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+}
+
+.wje-toast-stack[data-stacked='true'] {
+    overflow: visible;
+    padding-block: 1rem;
+}
+
+.wje-toast-stack[data-stacked='true'] > wje-toast {
+    margin: 0;
+}
+
+.wje-toast-stack[data-stacked='true'][data-expanded='true'] {
+    overflow: auto;
+}
+
+.wje-toast-stack[data-stacked='true'][data-expanded='true'] > wje-toast {
+    --wje-toast-stack-scale: 1 !important;
+    --wje-toast-stack-shift: 0px !important;
+    --wje-toast-stack-opacity: 1 !important;
+}

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":"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"}

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

@@ -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 { fetchAndParseCSS } from "./animations.js";
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n    height: 100%;\n    font-size: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-text-size-adjust: 100%;\n}\nbody {\n    color: var(--wje-color-contrast-8);\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.01em;\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-font-feature-settings: 'kern' 1;\n    -moz-font-feature-settings: 'kern' 1;\n    margin: 0;\n    padding: 0 !important;\n}\n/* Headings\n------------------------------------\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    margin: 0.625rem 0;\n    font-family: var(--wje-font-family);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    font-weight: 500;\n    color: inherit;\n    display: inline-block;\n}\nh1 {\n    font-size: var(--wje-font-size-2x-large);\n    line-height: 44px;\n    letter-spacing: -0.0141279em;\n}\nh2 {\n    font-size: var(--wje-font-size-x-large);\n    line-height: 34px;\n    letter-spacing: -0.021em;\n}\nh3 {\n    font-size: var(--wje-font-size-large);\n    line-height: 28px;\n    letter-spacing: -0.0114923em;\n}\nh4 {\n    font-size: var(--wje-font-size-large);\n    line-height: 26px;\n    letter-spacing: -0.00865734em;\n}\nh5 {\n    font-size: var(--wje-font-size-medium);\n    line-height: 24px;\n    letter-spacing: -0.00630069em;\n}\nh3 small,\nh4 small,\nh5 small {\n    font-weight: 300;\n}\nh1.block,\nh2.block,\nh3.block,\nh4.block,\nh5.block,\nh6.block {\n    padding-bottom: 0.625rem;\n}\n/* Lins and Others\n------------------------------------\n*/\na {\n    text-shadow: none !important;\n    color: var(--wje-color-primary-11);\n    transition:\n        color 0.1s linear 0s,\n        background-color 0.1s linear 0s,\n        opacity 0.2s linear 0s !important;\n    font-weight: 500;\n}\na:focus,\na:hover,\na:active {\n    color: var(--wje-color-primary);\n}\n\na,\na:focus,\na:hover,\na:active {\n    outline: 0 !important;\n    text-decoration: none;\n}\n\na.no-style {\n    color: inherit;\n    font-weight: normal;\n}\n\nbr {\n    line-height: normal;\n    clear: both;\n}\n\np {\n    display: block;\n    color: inherit;\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.00177646em;\n    line-height: 21px;\n    margin: 0 0 0.625rem 0;\n    font-style: normal;\n    white-space: normal;\n}\n\nsmall,\n.small {\n    line-height: 18px;\n    font-size: 85.714%;\n}\n\nlabel {\n    &.inline {\n        display: inline-block;\n        position: relative;\n        top: 0;\n        font-size: 13px;\n    }\n}\n\nul,\nol {\n    margin-bottom: 0.625rem;\n    & > li {\n        padding-left: 3px;\n        line-height: 24px;\n    }\n    &.lg-icon {\n        & > li {\n            font-size: 21px;\n            & span {\n                font-size: 14px;\n            }\n        }\n    }\n    &.no-style {\n        list-style: none;\n        padding-left: 5px;\n    }\n}\n\naddress {\n    margin-bottom: 0;\n    a {\n        color: var(--wje-color-contrast-8);\n    }\n}\n\nblockquote {\n    padding: 4px 0 0 18px;\n    border-left: 0;\n    &:before {\n        content: '\\e95d';\n        font-size: 20px;\n        margin-right: 6px;\n        float: left;\n        position: relative;\n        top: -12px;\n    }\n    p {\n        font-size: 16px;\n        margin-bottom: 4px;\n    }\n    small {\n        line-height: 29px;\n        color: var(--wje-color-contrast-8);\n        &:before {\n            content: '—';\n            margin-right: 6px;\n        }\n    }\n    &.pull-right {\n        border-right: 0;\n        &:before {\n            float: right;\n            content: '';\n            margin-left: 6px;\n            margin-right: 0;\n        }\n        small {\n            padding-right: 30px;\n            &:after {\n                content: '';\n            }\n        }\n    }\n}\nhr {\n    border-color: var(--wje-border-color);\n    &.double {\n        border-width: 2px;\n    }\n    &.dotted {\n        border-style: dotted none none;\n    }\n}\n\n.ff-sup {\n    font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n}\n\n.ff-sub {\n    font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n}\n\n/* Standard HTML Typography tags\n------------------------------------\n*/\n\ncode {\n    color: var(--wje-color-contrast-6);\n    background-color: var(--wje-color);\n    font-size: 97%;\n    position: relative;\n    line-height: inherit;\n    border-radius: 3px;\n    padding: 5px 7px;\n    margin: 0;\n    &:hover {\n        color: var(--wje-color-complete);\n    }\n    &.code-sm {\n        padding: 3px 6px;\n    }\n}\n\nfigcaption {\n    font-size: 13px;\n    margin-top: 0.625rem;\n    font-weight: 400;\n    display: block;\n    letter-spacing: 0.008em;\n    text-align: center;\n    color: var(--wje-color-contrast-6);\n    line-height: 1.46;\n}\n\nem {\n    font-style: italic !important;\n    font-family: inherit;\n    font-weight: inherit;\n}\n\nins {\n    font-family: var(--wje-font-family);\n    border-bottom: 1px solid #d0d0d0;\n    text-decoration: none;\n    color: var(--wje-color-contrast-8);\n    font-weight: normal;\n    font-size: 94%;\n}\n\ncite {\n    font-family: var(--wje-font-family);\n    font-weight: 300;\n    color: var(--wje-color-contrast-6);\n    text-decoration: none;\n    font-style: normal;\n    hanging-punctuation: first;\n}\n\nsup {\n    top: -0.28em;\n    font-size: 70%;\n}\n\nsub {\n    bottom: 0.03em;\n}\n\nvar {\n    font-family: var(--wje-font-family);\n    font-feature-settings:\n        'calt' 1,\n        'tnum' 1,\n        'frac' 1,\n        'case' 1,\n        'ss01' 1,\n        'cv11' 1;\n}\n\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nq {\n    font-family: var(--wje-font-family);\n    font-weight: 500;\n    font-size: 20px;\n    hanging-punctuation: first;\n\n    &:before {\n        content: '\\201C';\n        color: rgba(0, 0, 0, 0.44);\n        font-size: 35px;\n    }\n\n    &:after {\n        content: '\\201D';\n        font-size: 35px;\n        color: rgba(0, 0, 0, 0.44);\n    }\n}\naudio {\n    margin-top: 42px;\n}\nhr {\n    clear: both;\n    margin-bottom: 42px;\n    margin-top: 42px;\n    border: 0;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.13);\n}\naddress {\n    font-family: var(--wje-font-family);\n    font-style: normal;\n    margin: 0 0 1.75em;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 24px;\n}\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nacronym {\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\npre {\n    tab-size: 4;\n    font-size: 85.714%;\n    overflow-x: auto;\n    font-family: monospace, monospace;\n    line-height: 1.7;\n    counter-reset: line;\n    background-color: var(--wje-color-contrast-3) er;\n    color: var(--wje-color-contrast-8);\n    margin-inline: 0;\n    padding: 1rem 1.25rem;\n    border-radius: 3px;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n}\n\ndt {\n    font-weight: 700;\n    margin-bottom: 5px;\n}\n\ndd {\n    margin: 0 0 1.75em;\n}\n\nkbd {\n    font-size: 85.714%;\n    font-family: var(--wje-font-family);\n    position: relative;\n    line-height: 34px;\n    top: -3px;\n    letter-spacing: 0.01em;\n    padding: 5px 7px;\n    margin: 0;\n    color: rgba(0, 0, 0, 0.53);\n    background-color: #fff;\n    border-radius: 3px;\n    box-shadow:\n        0 2px 0 1px #c7c7c7,\n        0 1px 0 1px rgba(0, 0, 0, 0.15),\n        0 0 0 1px #ececec;\n}\n\n/* Types\n------------------------------------\n*/\n\n.overline {\n    text-transform: uppercase;\n    display: inline-block;\n    letter-spacing: 0.06em;\n    font-size: 11px;\n}\n\n/* Font Sizes\n------------------------------------\n*/\n\n.small-text {\n    font-size: 12px !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n    a {\n        text-decoration: underline;\n    }\n}\n.normal-text {\n    font-size: 13px !important;\n}\n.large-text {\n    font-size: 15px !important;\n}\n\n/* Font Weights\n------------------------------------\n */\n\n.normal {\n    font-weight: normal !important;\n}\n.semi-bold {\n    font-weight: 500 !important;\n}\n.bold {\n    font-weight: 600 !important;\n}\n.light {\n    font-weight: 300 !important;\n}\n\n/* Misc\n------------------------------------\n*/\n\n.all-caps {\n    text-transform: uppercase;\n    letter-spacing: 0.07em !important;\n}\n.text-uppercase {\n    text-transform: uppercase !important;\n    letter-spacing: 0.07em !important;\n}\n.muted {\n    color: var(--wje-color-contrast-6);\n}\n.hint-text {\n    opacity: 0.76 !important;\n}\n.no-decoration {\n    text-decoration: none !important;\n}\n\n.text-ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Gradients\n------------------------------------\n*/\n.gradient-grey {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n.gradient-black {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n\n/* Other Colors\n------------------------------------\n*/\n.bg-black {\n    background-color: var(--wje-color-black) !important;\n    color: var(--wje-color-contrast-0);\n}\n.bg-white {\n    background-color: var(--wje-color-contrast-0) !important;\n    color: var(--wje-color-contrast-8);\n}\n.bg-transparent {\n    background-color: transparent !important;\n}\n\n/* Text Colors */\n.link {\n    opacity: 0.7;\n    &:hover {\n        opacity: 1;\n    }\n}\n\n/* Text Aligngments\n------------------------------------\n*/\n\n.text-right {\n    text-align: right !important;\n}\n.text-left {\n    text-align: left !important;\n}\n.text-center {\n    text-align: center !important;\n}\n\n/* Strokes\n------------------------------------\n*/\n\n.stroke-primary {\n    stroke: var(--wje-color-primary) !important;\n}\n.stroke-complete {\n    stroke: var(--wje-color-complete) !important;\n}\n.stroke-success {\n    stroke: var(--wje-color-success) !important;\n}\n.stroke-info {\n    stroke: var(--wje-color-info) !important;\n}\n.stroke-warning {\n    stroke: var(--wje-color-warning) !important;\n}\n.stroke-danger {\n    stroke: var(--wje-color-danger) !important;\n}\n\n/* Font Sizes\n------------------------------------\ntracking =a+b×e(c × z)\n\na, b and c are constants\na = -0.0223\nb = 0.185\nc = -0.1745\nz = font size\n\n*/\n.fs-x-small {\n    font-size: var(--wje-font-size-x-small) !important;\n    letter-spacing: 0.0180093em;\n    line-height: 15px;\n}\n.fs-small {\n    font-size: var(--wje-font-size-small) !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n}\n.fs {\n    font-size: var(--wje-font-size) !important;\n    letter-spacing: 0.00177646em;\n    line-height: 22px;\n}\n\n.fs-medium {\n    font-size: var(--wje-font-size-medium) !important;\n    letter-spacing: -0.00295978em;\n    line-height: 24px;\n}\n\n.fs-large {\n    font-size: var(--wje-font-size-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-x-large {\n    font-size: var(--wje-font-size-x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-2x-large {\n    font-size: var(--wje-font-size-2x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-3x-large {\n    font-size: var(--wje-font-size-3x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-4x-large {\n    font-size: var(--wje-font-size-4x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n/* Line-heights\n------------------------------------\n*/\n.lh-normal {\n    line-height: normal;\n}\n.lh-10 {\n    line-height: 10px;\n}\n.lh-11 {\n    line-height: 11px;\n}\n.lh-12 {\n    line-height: 12px;\n}\n.lh-13 {\n    line-height: 13px;\n}\n.lh-14 {\n    line-height: 14px;\n}\n.lh-15 {\n    line-height: 15px;\n}\n.lh-16 {\n    line-height: 16px;\n}\n\n/* Font Faces\n------------------------------------\n*/\n\n.font-arial {\n    font-family: Arial, sans-serif !important;\n}\n.font-montserrat {\n    font-family: var(--wje-font-family-secondary) !important;\n}\n.font-heading {\n    font-family: var(--wje-font-family-secondary);\n}\n.font-secondary {\n    font-family: var(--wje-font-family-secondary);\n}\n\n/* Wells\n------------------------------------\n*/\n.well {\n    background-color: var(--wje-color-contrast-3);\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n    -webkit-box-shadow: none !important;\n    -moz-box-shadow: none !important;\n    box-shadow: none !important;\n    border: none;\n    background-image: none;\n    &.well-large {\n        padding: 24px;\n        width: auto;\n    }\n    &.well-small {\n        padding: 13px;\n        width: auto;\n    }\n    &.green {\n        background-color: var(--wje-color-complete);\n        color: var(--wje-color-contrast-0);\n        border: none;\n    }\n}\n.overflow-ellipsis {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n/* Responsive Handlers : Typo\n------------------------------------\n*/\n\n@media (max-width: 1024px) {\n    body,\n    p {\n        font-size: var(--wje-font-size-small);\n        line-height: 20px;\n    }\n\n    h1 {\n        font-size: var(--wje-font-size-2x-large);\n        line-height: 44px;\n        letter-spacing: -0.08px;\n    }\n    h2 {\n        font-size: var(--wje-font-size-x-large);\n        line-height: 40px;\n    }\n    h3 {\n        font-size: var(--wje-font-size-large);\n        line-height: 35.88px;\n    }\n    h4 {\n        font-size: var(--wje-font-size-large);\n        line-height: 33.88px;\n    }\n    h5 {\n        font-size: var(--wje-font-size-medium);\n        line-height: 25.88px;\n    }\n    small,\n    .small {\n        font-size: 89%;\n        line-height: 17px;\n    }\n}\n\n.alert {\n    & > p,\n    & > ul {\n        margin-bottom: 0;\n    }\n}\n.table {\n    & > tbody {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > tfoot {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > thead {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n}\n\n/* For Windows : Fixes\n------------------------------------\n*/\n\n.line-clamp-2 {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-3 {\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-5 {\n    display: -webkit-box;\n    -webkit-line-clamp: 5;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.text-separator {\n    display: block;\n    text-align: center;\n    margin: 1.5rem 0;\n    width: 100%;\n    background: linear-gradient(\n        to top,\n        transparent 0%,\n        transparent calc(50% - 1px),\n        var(--wje-border-color) calc(50% - 1px),\n        var(--wje-border-color) calc(50% + 1px),\n        transparent calc(50% + 1px),\n        transparent 100%\n    );\n}\n\n.text-separator::before {\n    background: #fff;\n    content: attr(data-text);\n    padding: 0 1rem;\n    text-transform: uppercase;\n}\n\n.wje-toast-stack {\n    position: fixed;\n    top: 0;\n    margin: 0 0.5rem;\n    width: 300px;\n    max-width: 100%;\n    max-height: 100%;\n    overflow: auto;\n    z-index: 9999;\n}";
+const styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n    height: 100%;\n    font-size: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-text-size-adjust: 100%;\n}\nbody {\n    color: var(--wje-color-contrast-8);\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.01em;\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-font-feature-settings: 'kern' 1;\n    -moz-font-feature-settings: 'kern' 1;\n    margin: 0;\n    padding: 0 !important;\n}\n/* Headings\n------------------------------------\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    margin: 0.625rem 0;\n    font-family: var(--wje-font-family);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    font-weight: 500;\n    color: inherit;\n    display: inline-block;\n}\nh1 {\n    font-size: var(--wje-font-size-2x-large);\n    line-height: 44px;\n    letter-spacing: -0.0141279em;\n}\nh2 {\n    font-size: var(--wje-font-size-x-large);\n    line-height: 34px;\n    letter-spacing: -0.021em;\n}\nh3 {\n    font-size: var(--wje-font-size-large);\n    line-height: 28px;\n    letter-spacing: -0.0114923em;\n}\nh4 {\n    font-size: var(--wje-font-size-large);\n    line-height: 26px;\n    letter-spacing: -0.00865734em;\n}\nh5 {\n    font-size: var(--wje-font-size-medium);\n    line-height: 24px;\n    letter-spacing: -0.00630069em;\n}\nh3 small,\nh4 small,\nh5 small {\n    font-weight: 300;\n}\nh1.block,\nh2.block,\nh3.block,\nh4.block,\nh5.block,\nh6.block {\n    padding-bottom: 0.625rem;\n}\n/* Lins and Others\n------------------------------------\n*/\na {\n    text-shadow: none !important;\n    color: var(--wje-color-primary-11);\n    transition:\n        color 0.1s linear 0s,\n        background-color 0.1s linear 0s,\n        opacity 0.2s linear 0s !important;\n    font-weight: 500;\n}\na:focus,\na:hover,\na:active {\n    color: var(--wje-color-primary);\n}\n\na,\na:focus,\na:hover,\na:active {\n    outline: 0 !important;\n    text-decoration: none;\n}\n\na.no-style {\n    color: inherit;\n    font-weight: normal;\n}\n\nbr {\n    line-height: normal;\n    clear: both;\n}\n\np {\n    display: block;\n    color: inherit;\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.00177646em;\n    line-height: 21px;\n    margin: 0 0 0.625rem 0;\n    font-style: normal;\n    white-space: normal;\n}\n\nsmall,\n.small {\n    line-height: 18px;\n    font-size: 85.714%;\n}\n\nlabel {\n    &.inline {\n        display: inline-block;\n        position: relative;\n        top: 0;\n        font-size: 13px;\n    }\n}\n\nul,\nol {\n    margin-bottom: 0.625rem;\n    & > li {\n        padding-left: 3px;\n        line-height: 24px;\n    }\n    &.lg-icon {\n        & > li {\n            font-size: 21px;\n            & span {\n                font-size: 14px;\n            }\n        }\n    }\n    &.no-style {\n        list-style: none;\n        padding-left: 5px;\n    }\n}\n\naddress {\n    margin-bottom: 0;\n    a {\n        color: var(--wje-color-contrast-8);\n    }\n}\n\nblockquote {\n    padding: 4px 0 0 18px;\n    border-left: 0;\n    &:before {\n        content: '\\e95d';\n        font-size: 20px;\n        margin-right: 6px;\n        float: left;\n        position: relative;\n        top: -12px;\n    }\n    p {\n        font-size: 16px;\n        margin-bottom: 4px;\n    }\n    small {\n        line-height: 29px;\n        color: var(--wje-color-contrast-8);\n        &:before {\n            content: '—';\n            margin-right: 6px;\n        }\n    }\n    &.pull-right {\n        border-right: 0;\n        &:before {\n            float: right;\n            content: '';\n            margin-left: 6px;\n            margin-right: 0;\n        }\n        small {\n            padding-right: 30px;\n            &:after {\n                content: '';\n            }\n        }\n    }\n}\nhr {\n    border-color: var(--wje-border-color);\n    &.double {\n        border-width: 2px;\n    }\n    &.dotted {\n        border-style: dotted none none;\n    }\n}\n\n.ff-sup {\n    font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n}\n\n.ff-sub {\n    font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n}\n\n/* Standard HTML Typography tags\n------------------------------------\n*/\n\ncode {\n    color: var(--wje-color-contrast-6);\n    background-color: var(--wje-color);\n    font-size: 97%;\n    position: relative;\n    line-height: inherit;\n    border-radius: 3px;\n    padding: 5px 7px;\n    margin: 0;\n    &:hover {\n        color: var(--wje-color-complete);\n    }\n    &.code-sm {\n        padding: 3px 6px;\n    }\n}\n\nfigcaption {\n    font-size: 13px;\n    margin-top: 0.625rem;\n    font-weight: 400;\n    display: block;\n    letter-spacing: 0.008em;\n    text-align: center;\n    color: var(--wje-color-contrast-6);\n    line-height: 1.46;\n}\n\nem {\n    font-style: italic !important;\n    font-family: inherit;\n    font-weight: inherit;\n}\n\nins {\n    font-family: var(--wje-font-family);\n    border-bottom: 1px solid #d0d0d0;\n    text-decoration: none;\n    color: var(--wje-color-contrast-8);\n    font-weight: normal;\n    font-size: 94%;\n}\n\ncite {\n    font-family: var(--wje-font-family);\n    font-weight: 300;\n    color: var(--wje-color-contrast-6);\n    text-decoration: none;\n    font-style: normal;\n    hanging-punctuation: first;\n}\n\nsup {\n    top: -0.28em;\n    font-size: 70%;\n}\n\nsub {\n    bottom: 0.03em;\n}\n\nvar {\n    font-family: var(--wje-font-family);\n    font-feature-settings:\n        'calt' 1,\n        'tnum' 1,\n        'frac' 1,\n        'case' 1,\n        'ss01' 1,\n        'cv11' 1;\n}\n\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nq {\n    font-family: var(--wje-font-family);\n    font-weight: 500;\n    font-size: 20px;\n    hanging-punctuation: first;\n\n    &:before {\n        content: '\\201C';\n        color: rgba(0, 0, 0, 0.44);\n        font-size: 35px;\n    }\n\n    &:after {\n        content: '\\201D';\n        font-size: 35px;\n        color: rgba(0, 0, 0, 0.44);\n    }\n}\naudio {\n    margin-top: 42px;\n}\nhr {\n    clear: both;\n    margin-bottom: 42px;\n    margin-top: 42px;\n    border: 0;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.13);\n}\naddress {\n    font-family: var(--wje-font-family);\n    font-style: normal;\n    margin: 0 0 1.75em;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 24px;\n}\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nacronym {\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\npre {\n    tab-size: 4;\n    font-size: 85.714%;\n    overflow-x: auto;\n    font-family: monospace, monospace;\n    line-height: 1.7;\n    counter-reset: line;\n    background-color: var(--wje-color-contrast-3) er;\n    color: var(--wje-color-contrast-8);\n    margin-inline: 0;\n    padding: 1rem 1.25rem;\n    border-radius: 3px;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n}\n\ndt {\n    font-weight: 700;\n    margin-bottom: 5px;\n}\n\ndd {\n    margin: 0 0 1.75em;\n}\n\nkbd {\n    font-size: 85.714%;\n    font-family: var(--wje-font-family);\n    position: relative;\n    line-height: 34px;\n    top: -3px;\n    letter-spacing: 0.01em;\n    padding: 5px 7px;\n    margin: 0;\n    color: rgba(0, 0, 0, 0.53);\n    background-color: #fff;\n    border-radius: 3px;\n    box-shadow:\n        0 2px 0 1px #c7c7c7,\n        0 1px 0 1px rgba(0, 0, 0, 0.15),\n        0 0 0 1px #ececec;\n}\n\n/* Types\n------------------------------------\n*/\n\n.overline {\n    text-transform: uppercase;\n    display: inline-block;\n    letter-spacing: 0.06em;\n    font-size: 11px;\n}\n\n/* Font Sizes\n------------------------------------\n*/\n\n.small-text {\n    font-size: 12px !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n    a {\n        text-decoration: underline;\n    }\n}\n.normal-text {\n    font-size: 13px !important;\n}\n.large-text {\n    font-size: 15px !important;\n}\n\n/* Font Weights\n------------------------------------\n */\n\n.normal {\n    font-weight: normal !important;\n}\n.semi-bold {\n    font-weight: 500 !important;\n}\n.bold {\n    font-weight: 600 !important;\n}\n.light {\n    font-weight: 300 !important;\n}\n\n/* Misc\n------------------------------------\n*/\n\n.all-caps {\n    text-transform: uppercase;\n    letter-spacing: 0.07em !important;\n}\n.text-uppercase {\n    text-transform: uppercase !important;\n    letter-spacing: 0.07em !important;\n}\n.muted {\n    color: var(--wje-color-contrast-6);\n}\n.hint-text {\n    opacity: 0.76 !important;\n}\n.no-decoration {\n    text-decoration: none !important;\n}\n\n.text-ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Gradients\n------------------------------------\n*/\n.gradient-grey {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n.gradient-black {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n\n/* Other Colors\n------------------------------------\n*/\n.bg-black {\n    background-color: var(--wje-color-black) !important;\n    color: var(--wje-color-contrast-0);\n}\n.bg-white {\n    background-color: var(--wje-color-contrast-0) !important;\n    color: var(--wje-color-contrast-8);\n}\n.bg-transparent {\n    background-color: transparent !important;\n}\n\n/* Text Colors */\n.link {\n    opacity: 0.7;\n    &:hover {\n        opacity: 1;\n    }\n}\n\n/* Text Aligngments\n------------------------------------\n*/\n\n.text-right {\n    text-align: right !important;\n}\n.text-left {\n    text-align: left !important;\n}\n.text-center {\n    text-align: center !important;\n}\n\n/* Strokes\n------------------------------------\n*/\n\n.stroke-primary {\n    stroke: var(--wje-color-primary) !important;\n}\n.stroke-complete {\n    stroke: var(--wje-color-complete) !important;\n}\n.stroke-success {\n    stroke: var(--wje-color-success) !important;\n}\n.stroke-info {\n    stroke: var(--wje-color-info) !important;\n}\n.stroke-warning {\n    stroke: var(--wje-color-warning) !important;\n}\n.stroke-danger {\n    stroke: var(--wje-color-danger) !important;\n}\n\n/* Font Sizes\n------------------------------------\ntracking =a+b×e(c × z)\n\na, b and c are constants\na = -0.0223\nb = 0.185\nc = -0.1745\nz = font size\n\n*/\n.fs-x-small {\n    font-size: var(--wje-font-size-x-small) !important;\n    letter-spacing: 0.0180093em;\n    line-height: 15px;\n}\n.fs-small {\n    font-size: var(--wje-font-size-small) !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n}\n.fs {\n    font-size: var(--wje-font-size) !important;\n    letter-spacing: 0.00177646em;\n    line-height: 22px;\n}\n\n.fs-medium {\n    font-size: var(--wje-font-size-medium) !important;\n    letter-spacing: -0.00295978em;\n    line-height: 24px;\n}\n\n.fs-large {\n    font-size: var(--wje-font-size-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-x-large {\n    font-size: var(--wje-font-size-x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-2x-large {\n    font-size: var(--wje-font-size-2x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-3x-large {\n    font-size: var(--wje-font-size-3x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-4x-large {\n    font-size: var(--wje-font-size-4x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n/* Line-heights\n------------------------------------\n*/\n.lh-normal {\n    line-height: normal;\n}\n.lh-10 {\n    line-height: 10px;\n}\n.lh-11 {\n    line-height: 11px;\n}\n.lh-12 {\n    line-height: 12px;\n}\n.lh-13 {\n    line-height: 13px;\n}\n.lh-14 {\n    line-height: 14px;\n}\n.lh-15 {\n    line-height: 15px;\n}\n.lh-16 {\n    line-height: 16px;\n}\n\n/* Font Faces\n------------------------------------\n*/\n\n.font-arial {\n    font-family: Arial, sans-serif !important;\n}\n.font-montserrat {\n    font-family: var(--wje-font-family-secondary) !important;\n}\n.font-heading {\n    font-family: var(--wje-font-family-secondary);\n}\n.font-secondary {\n    font-family: var(--wje-font-family-secondary);\n}\n\n/* Wells\n------------------------------------\n*/\n.well {\n    background-color: var(--wje-color-contrast-3);\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n    -webkit-box-shadow: none !important;\n    -moz-box-shadow: none !important;\n    box-shadow: none !important;\n    border: none;\n    background-image: none;\n    &.well-large {\n        padding: 24px;\n        width: auto;\n    }\n    &.well-small {\n        padding: 13px;\n        width: auto;\n    }\n    &.green {\n        background-color: var(--wje-color-complete);\n        color: var(--wje-color-contrast-0);\n        border: none;\n    }\n}\n.overflow-ellipsis {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n/* Responsive Handlers : Typo\n------------------------------------\n*/\n\n@media (max-width: 1024px) {\n    body,\n    p {\n        font-size: var(--wje-font-size-small);\n        line-height: 20px;\n    }\n\n    h1 {\n        font-size: var(--wje-font-size-2x-large);\n        line-height: 44px;\n        letter-spacing: -0.08px;\n    }\n    h2 {\n        font-size: var(--wje-font-size-x-large);\n        line-height: 40px;\n    }\n    h3 {\n        font-size: var(--wje-font-size-large);\n        line-height: 35.88px;\n    }\n    h4 {\n        font-size: var(--wje-font-size-large);\n        line-height: 33.88px;\n    }\n    h5 {\n        font-size: var(--wje-font-size-medium);\n        line-height: 25.88px;\n    }\n    small,\n    .small {\n        font-size: 89%;\n        line-height: 17px;\n    }\n}\n\n.alert {\n    & > p,\n    & > ul {\n        margin-bottom: 0;\n    }\n}\n.table {\n    & > tbody {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > tfoot {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > thead {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n}\n\n/* For Windows : Fixes\n------------------------------------\n*/\n\n.line-clamp-2 {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-3 {\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-5 {\n    display: -webkit-box;\n    -webkit-line-clamp: 5;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.text-separator {\n    display: block;\n    text-align: center;\n    margin: 1.5rem 0;\n    width: 100%;\n    background: linear-gradient(\n        to top,\n        transparent 0%,\n        transparent calc(50% - 1px),\n        var(--wje-border-color) calc(50% - 1px),\n        var(--wje-border-color) calc(50% + 1px),\n        transparent calc(50% + 1px),\n        transparent 100%\n    );\n}\n\n.text-separator::before {\n    background: #fff;\n    content: attr(data-text);\n    padding: 0 1rem;\n    text-transform: uppercase;\n}\n\n.wje-toast-stack {\n    position: fixed;\n    top: 0;\n    right: 0;\n    margin: 0.5rem;\n    width: min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem));\n    max-width: calc(100vw - 1rem);\n    max-height: calc(100vh - 1rem);\n    overflow: auto;\n    z-index: 9999;\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--wje-spacing-medium);\n}\n\n.wje-toast-stack[data-position='top-start'] {\n    left: 0;\n    right: auto;\n}\n\n.wje-toast-stack[data-position='top-center'] {\n    left: 50%;\n    right: auto;\n    transform: translateX(-50%);\n}\n\n.wje-toast-stack[data-position='bottom-start'],\n.wje-toast-stack[data-position='bottom-center'],\n.wje-toast-stack[data-position='bottom-end'] {\n    top: auto;\n    bottom: 0;\n}\n\n.wje-toast-stack[data-position='bottom-start'] {\n    left: 0;\n    right: auto;\n}\n\n.wje-toast-stack[data-position='bottom-center'] {\n    left: 50%;\n    right: auto;\n    transform: translateX(-50%);\n}\n\n.wje-toast-stack[data-stacked='true'] {\n    overflow: visible;\n    padding-block: 1rem;\n}\n\n.wje-toast-stack[data-stacked='true'] > wje-toast {\n    margin: 0;\n}\n\n.wje-toast-stack[data-stacked='true'][data-expanded='true'] {\n    overflow: auto;\n}\n\n.wje-toast-stack[data-stacked='true'][data-expanded='true'] > wje-toast {\n    --wje-toast-stack-scale: 1 !important;\n    --wje-toast-stack-shift: 0px !important;\n    --wje-toast-stack-opacity: 1 !important;\n}\n";
 const animations = `@charset "UTF-8";/*!
  * animate.css - https://animate.style/
  * Version - 4.1.1
@@ -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;"}