wj-elements 0.7.6 → 0.8.0

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 * @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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"}
+{"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":["Animation","WJElement","constructor","super","className","this","_animations","value","setAttribute","name","getAttribute","duration","delay","fill","iterations","Infinity","iterationStart","direction","cssStyleSheet","observedAttributes","setupAttributes","isShadowRoot","setAriaState","role","draw","fragment","document","createDocumentFragment","slot","createElement","appendChild","slotEl","afterDraw","destroyAnimation","element","assignedElements","animations","getAnimationsArray","selected","find","k","animation","animate","keyframes","endDelay","easing","playState","play","fetchAndParseCSS","cancel","console","warn","define"],"mappings":"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"}

package/dist/wje-aside.js

@@ -1,55 +1,30 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Aside ]\n*/\n\n:host {\n    box-sizing: border-box;\n    flex-shrink: 0;\n    overflow: auto;\n    border-color: var(--wje-aside-border-color);\n    border-width: var(--wje-aside-border-width);\n    border-style: var(--wje-aside-border-style);\n}\n\n:host(.open) {\n    display: block !important;\n}\n\n@media (min-width: 768px) {\n    :host([fixed]) {\n        position: fixed;\n        width: var(--wje-aside-width);\n        top: var(--wje-aside-top);\n        height: calc(100% - var(--wje-aside-top));\n    }\n}\n\n@media (max-width: 768px) {\n    :host {\n        display: none;\n    }\n\n    :host([variant='top-start']) {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 80%;\n        height: 100%;\n        z-index: 9999;\n        background-color: #fff;\n    }\n}\n";
-class Aside extends WJElement {
-  /**
-   * Constructor for the Aside class.
-   */
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
-    /**
-     * The class name for the Aside element.
-     * @type {string}
-     */
     __publicField(this, "className", "Aside");
   }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {object} The styles for the Aside element.
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{box-sizing:border-box;flex-shrink:0;overflow:auto;border-color:var(--wje-aside-border-color);border-width:var(--wje-aside-border-width);border-style:var(--wje-aside-border-style)}:host(.open){display:block!important}@media(min-width:768px){:host([fixed]){position:fixed;width:var(--wje-aside-width);top:var(--wje-aside-top);height:calc(100% - var(--wje-aside-top))}}@media(max-width:768px){:host{display:none}:host([variant="top-start"]){position:fixed;top:0;left:0;width:80%;height:100%;z-index:9999;background-color:#fff}}';
   }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An empty array as there are no observed attributes.
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Method to setup attributes for the Aside element.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Method to draw the Aside element.
-   * @returns {object} The document fragment containing the drawn element.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    if (this.width) this.style.setProperty("--wje-aside-width", this.width);
-    if (this.top && this.hasAttribute("fixed")) this.style.setProperty("--wje-aside-top", this.top);
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+    let t2 = document.createDocumentFragment();
+    this.width && this.style.setProperty("--wje-aside-width", this.width), this.top && this.hasAttribute("fixed") && this.style.setProperty("--wje-aside-top", this.top);
+    let e2 = document.createElement("slot");
+    return t2.appendChild(e2), t2;
   }
 }
-Aside.define("wje-aside", Aside);
+e.define("wje-aside", e);
 export {
-  Aside as default
+  e as default
 };
 //# sourceMappingURL=wje-aside.js.map

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 * @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;"}
+{"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":["Aside","WJElement","constructor","super","className","cssStyleSheet","observedAttributes","setupAttributes","this","isShadowRoot","draw","fragment","document","createDocumentFragment","width","style","setProperty","top","hasAttribute","element","createElement","appendChild","define"],"mappings":";;;;AAoBe,MAAMA,UAAcC,EAAAA;AAAAA,EAI/B,cAAAC;AACIC,UAAAA;AAOJC,qCAAY;AAAA,EANZ;AAAA,EAYA,WAAA,gBAAWC;AACP;EACJ;AAAA,EAMA,WAAA,qBAAWC;AACP,WAAO,CAAA;AAAA,EACX;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA;AAEpBL,SAAKM,SAAON,KAAKO,MAAMC,YAAY,qBAAqBR,KAAKM,KAAAA,GAE7DN,KAAKS,OAAOT,KAAKU,aAAa,OAAA,KAAUV,KAAKO,MAAMC,YAAY,mBAAmBR,KAAKS,GAAAA;AAE3F,QAAIE,KAAUP,SAASQ,cAAc;AAIrC,WAFAT,GAASU,YAAYF,EAAAA,GAEdR;AAAAA,EACX;AAAA;ACpEJX,EAAMsB,OAAO,aAAatB,CAAAA;"}

package/dist/wje-avatar.js

@@ -1,169 +1,79 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-function getAvatarColors(text) {
-  let hash = 0;
-  for (let i = 0; i < (text == null ? void 0 : text.length); i++) {
-    hash = text.charCodeAt(i) + hash * 31;
-  }
-  const h = Math.abs(hash) % 360;
-  const bgS = 30;
-  const bgL = 88;
-  const textS = 50;
-  const textL = 48;
-  return {
-    background: `hsl(${h}, ${bgS}%, ${bgL}%)`,
-    color: `hsl(${h}, ${textS}%, ${textL}%)`
-  };
-}
-function getInitials(string, length = 2) {
-  let names = string.split(" ");
-  let initials = names[0].substring(0, 1).toUpperCase();
-  if (names.length > 1 && length > 1) {
-    initials += names[names.length - 1].substring(0, 1).toUpperCase();
-  }
-  return initials;
-}
-const styles = "/*\n[ WJ Avatar ]\n*/\n\n:host {\n    display: inline-block;\n    font-size: var(--wje-avatar-font-size);\n    font-weight: var(--wje-avatar-font-weight);\n    color: var(--wje-avatar-color);\n    .native-avatar {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: var(--wje-avatar-size);\n        height: var(--wje-avatar-size);\n        border-radius: var(--wje-avatar-border-radius);\n        background-color: var(--wje-avatar-background-color);\n    }\n}\n\n::slotted(wje-img),\n::slotted(img) {\n    border-radius: var(--wje-avatar-border-radius);\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    overflow: hidden;\n}\n\n:host(.wje-avatar-border) {\n    border-color: var(--wje-avatar-border-color);\n    border-width: var(--wje-avatar-border-width);\n    border-style: var(--wje-avatar-border-style);\n}\n\n:host([size='small']) {\n    --wje-avatar-size: var(--wje-size-small); /* 12px */\n    --wje-avatar-font-size: var(--wje-font-size-2x-small);\n}\n\n:host([size='medium']) {\n    --wje-avatar-size: var(--wje-size-medium); /* 14px */\n    --wje-avatar-font-size: var(--wje-font-size-2x-small);\n}\n\n:host([size='normal']) {\n    --wje-avatar-size: var(--wje-size); /* 14px */\n}\n\n:host([size='large']) {\n    --wje-avatar-size: var(--wje-size-large); /* 20px */\n}\n\n:host([size='x-large']) {\n    --wje-avatar-size: var(--wje-size-x-large); /* 24px */\n}\n\n:host([size='2x-large']) {\n    --wje-avatar-size: var(--wje-size-2x-large); /* 36px */\n    --wje-avatar-font-size: var(--wje-font-size-small);\n}\n\n:host([size='3x-large']) {\n    --wje-avatar-size: var(--wje-size-3x-large); /* 48px */\n    --wje-avatar-font-size: var(--wje-font-size-medium);\n}\n\n:host([size='4x-large']) {\n    --wje-avatar-size: var(--wje-size-4x-large); /* 72px */\n    --wje-avatar-font-size: var(--wje-font-size-x-large);\n}\n\n:host([size='5x-large']) {\n    --wje-avatar-size: var(--wje-size-5x-large); /* 144px */\n    --wje-avatar-font-size: var(--wje-font-size-3x-large);\n}\n\n/* Status Placement */\n:host slot[name='status'] {\n    display: block;\n    position: absolute;\n}\n\n:host([status-placement='top-start']) slot[name='status'] {\n    top: -4px;\n    left: -4px;\n}\n\n:host([status-placement='top-end']) slot[name='status'] {\n    top: -4px;\n    right: -4px;\n}\n\n:host([status-placement='bottom-start']) slot[name='status'] {\n    bottom: -4px;\n    left: -4px;\n}\n\n:host([status-placement='bottom-end']) slot[name='status'] {\n    bottom: -4px;\n    right: -4px;\n}\n";
-class Avatar extends WJElement {
-  /**
-   * Avatar class constructor.
-   */
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
-    /**
-     * Class name for the Avatar element.
-     */
     __publicField(this, "className", "Avatar");
   }
-  /**
-   * Sets the value of the 'label' attribute for the element.
-   * @param {string} value The new value to be set for the 'label' attribute.
-   */
-  set label(value) {
-    this.setAttribute("label", value);
+  set label(t2) {
+    this.setAttribute("label", t2);
   }
-  /**
-   * Retrieves the value of the 'label' attribute for the element.
-   * If the attribute is not set, it defaults to an empty string.
-   * @returns {string} The value of the 'label' attribute or an empty string if not defined.
-   */
   get label() {
     return this.getAttribute("label") || "";
   }
-  /**
-   * Sets the value of initials for the element by updating
-   * the 'initials' attribute with the provided value.
-   * @param {string} value The value to be set as the initials.
-   */
-  set initials(value) {
+  set initials(t2) {
     this.setAttribute("initials", "");
   }
-  /**
-   * Retrieves the value of the 'initials' attribute if it exists.
-   * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.
-   */
   get initials() {
     return this.hasAttribute("initials") || false;
   }
-  /**
-   * Sets the size attribute for the element.
-   * @param {string | number} value The value to set for the size attribute.
-   */
-  set size(value) {
-    this.setAttribute("size", value);
+  set size(t2) {
+    this.setAttribute("size", t2);
   }
-  /**
-   * Retrieves the size attribute of the element. If the size attribute
-   * is not defined, it returns the default value 'medium'.
-   * @returns {string} The size value of the element or 'medium' if not specified.
-   */
   get size() {
     return this.getAttribute("size") || "medium";
   }
-  /**
-   * Getter for cssStyleSheet.
-   * @returns {string} styles
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{display:inline-block;font-size:var(--wje-avatar-font-size);font-weight:var(--wje-avatar-font-weight);color:var(--wje-avatar-color)}:host .native-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:var(--wje-avatar-size);height:var(--wje-avatar-size);border-radius:var(--wje-avatar-border-radius);background-color:var(--wje-avatar-background-color)}::slotted(wje-img),::slotted(img){border-radius:var(--wje-avatar-border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host(.wje-avatar-border){border-color:var(--wje-avatar-border-color);border-width:var(--wje-avatar-border-width);border-style:var(--wje-avatar-border-style)}:host([size="small"]){--wje-avatar-size: var(--wje-size-small);--wje-avatar-font-size: var(--wje-font-size-2x-small)}:host([size="medium"]){--wje-avatar-size: var(--wje-size-medium);--wje-avatar-font-size: var(--wje-font-size-2x-small)}:host([size="normal"]){--wje-avatar-size: var(--wje-size)}:host([size="large"]){--wje-avatar-size: var(--wje-size-large)}:host([size="x-large"]){--wje-avatar-size: var(--wje-size-x-large)}:host([size="2x-large"]){--wje-avatar-size: var(--wje-size-2x-large);--wje-avatar-font-size: var(--wje-font-size-small)}:host([size="3x-large"]){--wje-avatar-size: var(--wje-size-3x-large);--wje-avatar-font-size: var(--wje-font-size-medium)}:host([size="4x-large"]){--wje-avatar-size: var(--wje-size-4x-large);--wje-avatar-font-size: var(--wje-font-size-x-large)}:host([size="5x-large"]){--wje-avatar-size: var(--wje-size-5x-large);--wje-avatar-font-size: var(--wje-font-size-3x-large)}:host slot[name=status]{display:block;position:absolute}:host([status-placement="top-start"]) slot[name=status]{top:-4px;left:-4px}:host([status-placement="top-end"]) slot[name=status]{top:-4px;right:-4px}:host([status-placement="bottom-start"]) slot[name=status]{bottom:-4px;left:-4px}:host([status-placement="bottom-end"]) slot[name=status]{bottom:-4px;right:-4px}';
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return ["initials", "label"];
   }
-  /**
-   * Method to setup attributes.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(t2, e2, a) {
     var _a;
-    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
-    if (name === "label" || name === "initials") {
-      this.syncAria();
-    }
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, t2, e2, a), "label" !== t2 && "initials" !== t2 || this.syncAria();
   }
-  /**
-   * Method to draw the avatar element and return a document fragment.
-   * @returns {object} fragment - The document fragment
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.setAttribute("part", "native");
-    element.classList.add("native-avatar");
-    let slot = document.createElement("slot");
-    element.appendChild(slot);
-    if (this.initials) {
-      let initials = getInitials(this.label);
-      const { background, color } = getAvatarColors(initials);
-      this.style.setProperty("--wje-avatar-background-color", background);
-      this.style.setProperty("--wje-avatar-color", color);
-      element.innerText = initials;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.setAttribute("part", "native"), e2.classList.add("native-avatar");
+    let a = document.createElement("slot");
+    if (e2.appendChild(a), this.initials) {
+      let t3 = (function(t4, e3 = 2) {
+        let a3 = t4.split(" "), s3 = a3[0].substring(0, 1).toUpperCase();
+        return a3.length > 1 && e3 > 1 && (s3 += a3[a3.length - 1].substring(0, 1).toUpperCase()), s3;
+      })(this.label);
+      const { background: a2, color: s2 } = (function(t4) {
+        let e3 = 0;
+        for (let a4 = 0; a4 < (t4 == null ? void 0 : t4.length); a4++) e3 = t4.charCodeAt(a4) + 31 * e3;
+        const a3 = Math.abs(e3) % 360;
+        return { background: `hsl(${a3}, 30%, 88%)`, color: `hsl(${a3}, 50%, 48%)` };
+      })(t3);
+      this.style.setProperty("--wje-avatar-background-color", a2), this.style.setProperty("--wje-avatar-color", s2), e2.innerText = t3;
     } else {
-      let slotIcon = document.createElement("slot");
-      slotIcon.setAttribute("name", "icon");
-      element.appendChild(slotIcon);
+      let t3 = document.createElement("slot");
+      t3.setAttribute("name", "icon"), e2.appendChild(t3);
     }
-    let status = document.createElement("slot");
-    status.setAttribute("name", "status");
-    status.setAttribute("part", "status");
-    let secondary = document.createElement("slot");
-    secondary.setAttribute("name", "secondary");
-    secondary.setAttribute("part", "secondary");
-    element.appendChild(status);
-    element.appendChild(secondary);
-    fragment.appendChild(element);
-    return fragment;
+    let s = document.createElement("slot");
+    s.setAttribute("name", "status"), s.setAttribute("part", "status");
+    let r = document.createElement("slot");
+    return r.setAttribute("name", "secondary"), r.setAttribute("part", "secondary"), e2.appendChild(s), e2.appendChild(r), t2.appendChild(e2), t2;
   }
-  /**
-   * Syncs ARIA attributes on the host element.
-   */
   syncAria() {
     var _a;
-    const label = (_a = this.label) == null ? void 0 : _a.trim();
-    if (label) {
-      this.setAriaState({ label });
-    }
+    const t2 = (_a = this.label) == null ? void 0 : _a.trim();
+    t2 && this.setAriaState({ label: t2 });
   }
-  /**
-   * Method to check if the avatar is an image.
-   * @returns {boolean} - True if the avatar is an image, false otherwise
-   */
   isImage() {
     return this.getElementsByTagName("wje-img").length > 0;
   }
 }
-Avatar.define("wje-avatar", Avatar);
+e.define("wje-avatar", e);
 export {
-  Avatar as default
+  e as default
 };
 //# sourceMappingURL=wje-avatar.js.map

package/dist/wje-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["/**\n * Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n */\nexport function getHsl(text, s = 40, l = 75) {\n    let str = text;\n    let hash = 0;\n\n    for (let i = 0; i < str?.length; i++) {\n        hash = str.charCodeAt(i) + hash * 31;\n    }\n\n    let h = hash % 360;\n\n    return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/**\n * Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n * @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n */\nexport function getAvatarColors(text) {\n    let hash = 0;\n    for (let i = 0; i < text?.length; i++) {\n        hash = text.charCodeAt(i) + hash * 31;\n    }\n\n    const h = Math.abs(hash) % 360;\n\n    // 👇 Figma-like pastel background\n    const bgS = 30;\n    const bgL = 88;\n\n    // 👇 Softer text color (same hue)\n    const textS = 50;\n    const textL = 48;\n\n    return {\n        background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n        color: `hsl(${h}, ${textS}%, ${textL}%)`\n    };\n}\n\n/**\n * Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n */\nexport function getInitials(string, length = 2) {\n    let names = string.split(' ');\n    let initials = names[0].substring(0, 1).toUpperCase();\n\n    if (names.length > 1 && length > 1) {\n        initials += names[names.length - 1].substring(0, 1).toUpperCase();\n    }\n    return initials;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @attribute {boolean} initials - Renders generated initials from `label` instead of the default slotted content.\n * @attribute {string} label - Provides the source text for generated initials and the accessible label of the avatar.\n * @attribute {string} size - Selects a predefined avatar size such as `small`, `medium`, `normal`, `large`, or larger variants.\n * @attribute {string} status-placement - Positions the `status` slot on one of the avatar corners.\n * @slot default - Slot for the main avatar content, typically an image.\n * @slot icon - Slot for an icon rendered inside the avatar.\n * @slot status - Slot for a status badge or indicator positioned on the avatar edge.\n * @slot secondary - Slot for additional secondary content rendered with the avatar.\n * @csspart native - The component's native wrapper.\n * @csspart status - The positioned slot container for status content.\n * @csspart secondary - The slot container for secondary avatar content.\n * @cssproperty [--wje-avatar-size] - Controls the overall rendered size of the avatar shell.\n * @cssproperty [--wje-avatar-font-size] - Controls the font size used for initials and text content.\n * @cssproperty [--wje-avatar-font-weight] - Controls the font weight used for initials and text content.\n * @cssproperty [--wje-avatar-color] - Controls the text color inside the avatar.\n * @cssproperty [--wje-avatar-background-color] - Controls the background color of the avatar surface.\n * @cssproperty [--wje-avatar-border-radius] - Controls the avatar border radius.\n * @cssproperty [--wje-avatar-border-color] - Controls the avatar border color when a border is applied.\n * @cssproperty [--wje-avatar-border-width] - Controls the avatar border width when a border is applied.\n * @cssproperty [--wje-avatar-border-style] - Controls the avatar border style when a border is applied.\n * @tag wje-avatar\n */\nexport default class Avatar extends WJElement {\n    /**\n     * Avatar class constructor.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'label' attribute for the element.\n     * @param {string} value The new value to be set for the 'label' attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute for the element.\n     * If the attribute is not set, it defaults to an empty string.\n     * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Sets the value of initials for the element by updating\n     * the 'initials' attribute with the provided value.\n     * @param {string} value The value to be set as the initials.\n     */\n    set initials(value) {\n        this.setAttribute('initials', '');\n    }\n\n    /**\n     * Retrieves the value of the 'initials' attribute if it exists.\n     * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n     */\n    get initials() {\n        return this.hasAttribute('initials') || false;\n    }\n\n    /**\n     * Sets the size attribute for the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the size attribute of the element. If the size attribute\n     * is not defined, it returns the default value 'medium'.\n     * @returns {string} The size value of the element or 'medium' if not specified.\n     */\n    get size() {\n        return this.getAttribute('size') || 'medium';\n    }\n\n    /**\n     * Class name for the Avatar element.\n     */\n    className = 'Avatar';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['initials', 'label'];\n    }\n\n    /**\n     * Method to setup attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'label' || name === 'initials') {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Method to draw the avatar element and return a document fragment.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-avatar');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n\n        if (this.initials) {\n            let initials = getInitials(this.label);\n            const { background, color } = getAvatarColors(initials);\n\n            this.style.setProperty('--wje-avatar-background-color', background);\n            this.style.setProperty('--wje-avatar-color', color);\n\n            element.innerText = initials;\n        } else {\n            let slotIcon = document.createElement('slot');\n            slotIcon.setAttribute('name', 'icon');\n\n            element.appendChild(slotIcon);\n        }\n\n        let status = document.createElement('slot');\n        status.setAttribute('name', 'status');\n        status.setAttribute('part', 'status');\n\n        let secondary = document.createElement('slot');\n        secondary.setAttribute('name', 'secondary');\n        secondary.setAttribute('part', 'secondary');\n\n        element.appendChild(status);\n        element.appendChild(secondary);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.label?.trim();\n        if (label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Method to check if the avatar is an image.\n     * @returns {boolean} - True if the avatar is an image, false otherwise\n     */\n    isImage() {\n        return this.getElementsByTagName('wje-img').length > 0;\n    }\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":[],"mappings":";;;;AAsCO,SAAS,gBAAgB,MAAM;AAClC,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,KAAI,6BAAM,SAAQ,KAAK;AACnC,WAAO,KAAK,WAAW,CAAC,IAAI,OAAO;AAAA,EACvC;AAEA,QAAM,IAAI,KAAK,IAAI,IAAI,IAAI;AAG3B,QAAM,MAAM;AACZ,QAAM,MAAM;AAGZ,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO;AAAA,IACH,YAAY,OAAO,CAAC,KAAK,GAAG,MAAM,GAAG;AAAA,IACrC,OAAO,OAAO,CAAC,KAAK,KAAK,MAAM,KAAK;AAAA,EAC5C;AACA;AAsBO,SAAS,YAAY,QAAQ,SAAS,GAAG;AAC5C,MAAI,QAAQ,OAAO,MAAM,GAAG;AAC5B,MAAI,WAAW,MAAM,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,YAAW;AAEnD,MAAI,MAAM,SAAS,KAAK,SAAS,GAAG;AAChC,gBAAY,MAAM,MAAM,SAAS,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,YAAW;AAAA,EACnE;AACA,SAAO;AACX;;ACzDe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,UAAK;AAyDT;AAAA;AAAA;AAAA,qCAAY;AAAA,EAxDZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,EAAE;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,YAAY,OAAO;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA,EAEA,yBAAyB,MAAM,UAAU,UAAU;;AAC/C,gBAAM,6BAAN,8BAAiC,MAAM,UAAU;AACjD,QAAI,SAAS,WAAW,SAAS,YAAY;AACzC,WAAK,SAAQ;AAAA,IACjB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,eAAe;AAErC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,YAAQ,YAAY,IAAI;AAExB,QAAI,KAAK,UAAU;AACf,UAAI,WAAW,YAAY,KAAK,KAAK;AACrC,YAAM,EAAE,YAAY,UAAU,gBAAgB,QAAQ;AAEtD,WAAK,MAAM,YAAY,iCAAiC,UAAU;AAClE,WAAK,MAAM,YAAY,sBAAsB,KAAK;AAElD,cAAQ,YAAY;AAAA,IACxB,OAAO;AACH,UAAI,WAAW,SAAS,cAAc,MAAM;AAC5C,eAAS,aAAa,QAAQ,MAAM;AAEpC,cAAQ,YAAY,QAAQ;AAAA,IAChC;AAEA,QAAI,SAAS,SAAS,cAAc,MAAM;AAC1C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,WAAW;AAC1C,cAAU,aAAa,QAAQ,WAAW;AAE1C,YAAQ,YAAY,MAAM;AAC1B,YAAQ,YAAY,SAAS;AAE7B,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;;AACP,UAAM,SAAQ,UAAK,UAAL,mBAAY;AAC1B,QAAI,OAAO;AACP,WAAK,aAAa,EAAE,OAAO;AAAA,IAC/B;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACN,WAAO,KAAK,qBAAqB,SAAS,EAAE,SAAS;AAAA,EACzD;AACJ;AC1LA,OAAO,OAAO,cAAc,MAAM;"}
+{"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @attribute {boolean} initials - Renders generated initials from `label` instead of the default slotted content.\n * @attribute {string} label - Provides the source text for generated initials and the accessible label of the avatar.\n * @attribute {string} size - Selects a predefined avatar size such as `small`, `medium`, `normal`, `large`, or larger variants.\n * @attribute {string} status-placement - Positions the `status` slot on one of the avatar corners.\n * @slot default - Slot for the main avatar content, typically an image.\n * @slot icon - Slot for an icon rendered inside the avatar.\n * @slot status - Slot for a status badge or indicator positioned on the avatar edge.\n * @slot secondary - Slot for additional secondary content rendered with the avatar.\n * @csspart native - The component's native wrapper.\n * @csspart status - The positioned slot container for status content.\n * @csspart secondary - The slot container for secondary avatar content.\n * @cssproperty [--wje-avatar-size] - Controls the overall rendered size of the avatar shell.\n * @cssproperty [--wje-avatar-font-size] - Controls the font size used for initials and text content.\n * @cssproperty [--wje-avatar-font-weight] - Controls the font weight used for initials and text content.\n * @cssproperty [--wje-avatar-color] - Controls the text color inside the avatar.\n * @cssproperty [--wje-avatar-background-color] - Controls the background color of the avatar surface.\n * @cssproperty [--wje-avatar-border-radius] - Controls the avatar border radius.\n * @cssproperty [--wje-avatar-border-color] - Controls the avatar border color when a border is applied.\n * @cssproperty [--wje-avatar-border-width] - Controls the avatar border width when a border is applied.\n * @cssproperty [--wje-avatar-border-style] - Controls the avatar border style when a border is applied.\n * @tag wje-avatar\n */\nexport default class Avatar extends WJElement {\n    /**\n     * Avatar class constructor.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'label' attribute for the element.\n     * @param {string} value The new value to be set for the 'label' attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute for the element.\n     * If the attribute is not set, it defaults to an empty string.\n     * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Sets the value of initials for the element by updating\n     * the 'initials' attribute with the provided value.\n     * @param {string} value The value to be set as the initials.\n     */\n    set initials(value) {\n        this.setAttribute('initials', '');\n    }\n\n    /**\n     * Retrieves the value of the 'initials' attribute if it exists.\n     * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n     */\n    get initials() {\n        return this.hasAttribute('initials') || false;\n    }\n\n    /**\n     * Sets the size attribute for the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the size attribute of the element. If the size attribute\n     * is not defined, it returns the default value 'medium'.\n     * @returns {string} The size value of the element or 'medium' if not specified.\n     */\n    get size() {\n        return this.getAttribute('size') || 'medium';\n    }\n\n    /**\n     * Class name for the Avatar element.\n     */\n    className = 'Avatar';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['initials', 'label'];\n    }\n\n    /**\n     * Method to setup attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (name === 'label' || name === 'initials') {\n            this.syncAria();\n        }\n    }\n\n    /**\n     * Method to draw the avatar element and return a document fragment.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-avatar');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n\n        if (this.initials) {\n            let initials = getInitials(this.label);\n            const { background, color } = getAvatarColors(initials);\n\n            this.style.setProperty('--wje-avatar-background-color', background);\n            this.style.setProperty('--wje-avatar-color', color);\n\n            element.innerText = initials;\n        } else {\n            let slotIcon = document.createElement('slot');\n            slotIcon.setAttribute('name', 'icon');\n\n            element.appendChild(slotIcon);\n        }\n\n        let status = document.createElement('slot');\n        status.setAttribute('name', 'status');\n        status.setAttribute('part', 'status');\n\n        let secondary = document.createElement('slot');\n        secondary.setAttribute('name', 'secondary');\n        secondary.setAttribute('part', 'secondary');\n\n        element.appendChild(status);\n        element.appendChild(secondary);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.label?.trim();\n        if (label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Method to check if the avatar is an image.\n     * @returns {boolean} - True if the avatar is an image, false otherwise\n     */\n    isImage() {\n        return this.getElementsByTagName('wje-img').length > 0;\n    }\n}\n","/**\n * Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n */\nexport function getHsl(text, s = 40, l = 75) {\n    let str = text;\n    let hash = 0;\n\n    for (let i = 0; i < str?.length; i++) {\n        hash = str.charCodeAt(i) + hash * 31;\n    }\n\n    let h = hash % 360;\n\n    return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/**\n * Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n * @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n */\nexport function getAvatarColors(text) {\n    let hash = 0;\n    for (let i = 0; i < text?.length; i++) {\n        hash = text.charCodeAt(i) + hash * 31;\n    }\n\n    const h = Math.abs(hash) % 360;\n\n    // 👇 Figma-like pastel background\n    const bgS = 30;\n    const bgL = 88;\n\n    // 👇 Softer text color (same hue)\n    const textS = 50;\n    const textL = 48;\n\n    return {\n        background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n        color: `hsl(${h}, ${textS}%, ${textL}%)`\n    };\n}\n\n/**\n * Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n */\nexport function getInitials(string, length = 2) {\n    let names = string.split(' ');\n    let initials = names[0].substring(0, 1).toUpperCase();\n\n    if (names.length > 1 && length > 1) {\n        initials += names[names.length - 1].substring(0, 1).toUpperCase();\n    }\n    return initials;\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":["Avatar","WJElement","constructor","super","className","value","this","setAttribute","label","getAttribute","initials","hasAttribute","size","setupAttributes","isShadowRoot","syncAria","name","oldValue","newValue","attributeChangedCallback","fragment","document","createDocumentFragment","element","createElement","classList","add","slot","appendChild","string","length","names","split","substring","toUpperCase","background","color","text","hash","i","charCodeAt","h","Math","abs","style","setProperty","innerText","slotIcon","status","secondary","trim","setAriaState","getElementsByTagName","define"],"mappings":"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"}

package/dist/wje-badge.js

@@ -1,72 +1,30 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Badge ]\n*/\n\n.native-badge {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-shadow: none;\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size-x-small);\n    line-height: var(--wje-badge-line-height);\n    padding: 0;\n    padding-block: var(--wje-badge-padding-block);\n    padding-inline: var(--wje-badge-padding-inline);\n    border-radius: var(--wje-badge-border-radius);\n    border-width: var(--wje-badge-border-width);\n    border-style: var(--wje-badge-border-style);\n    border-color: var(--wje-badge-border-color);\n    height: var(--wje-badge-height);\n}\n\n.wje-color-primary {\n    background-color: var(--wje-color-primary-2);\n    color: var(--wje-color-primary-9);\n}\n\n.wje-color-complete {\n    background-color: var(--wje-color-complete-2);\n    color: var(--wje-color-complete-9);\n}\n\n.wje-color-success {\n    background-color: var(--wje-color-success-2);\n    color: var(--wje-color-success-9);\n}\n\n.wje-color-warning {\n    background-color: var(--wje-color-warning-2);\n    color: var(--wje-color-warning-11);\n}\n\n.wje-color-danger {\n    background-color: var(--wje-color-danger-2);\n    color: var(--wje-color-danger-9);\n}\n\n.wje-color-info {\n    background-color: var(--wje-color-contrast-0);\n    color: var(--wje-color-info-11);\n    border-color: var(--wje-color-contrast-2);\n}\n\n.wje-color-default {\n    background-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n";
-class Badge extends WJElement {
-  /**
-   * Creates an instance of Badge.
-   * Represents a custom Badge element.
-   * @class
-   */
+import e from "./wje-element.js";
+class o extends e {
   constructor() {
     super();
-    /**
-     * The class name for the Badge element.
-     * @type {string} The class name for the Badge element.
-     */
     __publicField(this, "className", "Badge");
   }
-  /**
-   * Retrieves the CSS stylesheet for the Badge element.
-   * @static
-   * @returns {CSSStyleSheet} The CSS styles associated with the Badge.
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ".native-badge{display:flex;align-items:center;justify-content:center;text-shadow:none;font-family:var(--wje-font-family);font-size:var(--wje-font-size-x-small);line-height:var(--wje-badge-line-height);padding:0;padding-block:var(--wje-badge-padding-block);padding-inline:var(--wje-badge-padding-inline);border-radius:var(--wje-badge-border-radius);border-width:var(--wje-badge-border-width);border-style:var(--wje-badge-border-style);border-color:var(--wje-badge-border-color);height:var(--wje-badge-height)}.wje-color-primary{background-color:var(--wje-color-primary-2);color:var(--wje-color-primary-9)}.wje-color-complete{background-color:var(--wje-color-complete-2);color:var(--wje-color-complete-9)}.wje-color-success{background-color:var(--wje-color-success-2);color:var(--wje-color-success-9)}.wje-color-warning{background-color:var(--wje-color-warning-2);color:var(--wje-color-warning-11)}.wje-color-danger{background-color:var(--wje-color-danger-2);color:var(--wje-color-danger-9)}.wje-color-info{background-color:var(--wje-color-contrast-0);color:var(--wje-color-info-11);border-color:var(--wje-color-contrast-2)}.wje-color-default{background-color:var(--wje-color-contrast-3);color:var(--wje-color-contrast-11)}";
   }
-  /**
-   * Specifies the attributes to observe for changes.
-   * @static
-   * @returns {Array<string>} An array containing the names of attributes to observe.
-   * @example
-   * static get observedAttributes() {
-   *   return ['color'];
-   * }
-   */
   static get observedAttributes() {
     return ["color"];
   }
-  /**
-   * Configures initial attributes for the Badge element.
-   * @returns {void} Nothing is returned.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAriaState({ role: "status" });
+    this.isShadowRoot = "open", this.setAriaState({ role: "status" });
   }
-  /**
-   * Creates the DOM structure for the Badge element.
-   * @returns {DocumentFragment} A document fragment containing the Badge's structure.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-badge");
-    if (this.hasAttribute("color")) {
-      native.classList.add(`wje-color-${this.color}`, "wje-color");
-    } else {
-      native.classList.add("wje-color-default", "wje-color");
-    }
-    let slot = document.createElement("slot");
-    native.appendChild(slot);
-    fragment.appendChild(native);
-    return fragment;
+    let e2 = document.createDocumentFragment(), o2 = document.createElement("div");
+    o2.setAttribute("part", "native"), o2.classList.add("native-badge"), this.hasAttribute("color") ? o2.classList.add(`wje-color-${this.color}`, "wje-color") : o2.classList.add("wje-color-default", "wje-color");
+    let r = document.createElement("slot");
+    return o2.appendChild(r), e2.appendChild(o2), e2;
   }
 }
-Badge.define("wje-badge", Badge);
+o.define("wje-badge", o);
 export {
-  Badge as default
+  o as default
 };
 //# sourceMappingURL=wje-badge.js.map

package/dist/wje-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-badge.js","sources":["../packages/wje-badge/badge.element.js","../packages/wje-badge/badge.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 a Badge element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/badge\n * @status stable\n * @augments WJElement\n * @attribute {string} color - The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.\n * @slot - The badge's main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-badge-border-radius=var(--wje-border-radius-pill)] - Border radius of the badge element.\n * @tag wje-badge\n */\n\nexport default class Badge extends WJElement {\n    /**\n     * Creates an instance of Badge.\n     * Represents a custom Badge element.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Badge element.\n     * @type {string} The class name for the Badge element.\n     */\n    className = 'Badge';\n\n    /**\n     * Retrieves the CSS stylesheet for the Badge element.\n     * @static\n     * @returns {CSSStyleSheet} The CSS styles associated with the Badge.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Specifies the attributes to observe for changes.\n     * @static\n     * @returns {Array<string>} An array containing the names of attributes to observe.\n     * @example\n     * static get observedAttributes() {\n     *   return ['color'];\n     * }\n     */\n    static get observedAttributes() {\n        return ['color'];\n    }\n\n    /**\n     * Configures initial attributes for the Badge element.\n     * @returns {void} Nothing is returned.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Creates the DOM structure for the Badge element.\n     * @returns {DocumentFragment} A document fragment containing the Badge's structure.\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-badge');\n\n        // Add color classes based on the `color` attribute\n        if (this.hasAttribute('color')) {\n            native.classList.add(`wje-color-${this.color}`, 'wje-color');\n        } else {\n            native.classList.add('wje-color-default', 'wje-color');\n        }\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Badge from './badge.element.js';\n\nexport default Badge;\n\nBadge.define('wje-badge', Badge);\n"],"names":[],"mappings":";;;;;AAee,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,OAAO;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,SAAQ,CAAE;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,cAAc;AAGnC,QAAI,KAAK,aAAa,OAAO,GAAG;AAC5B,aAAO,UAAU,IAAI,aAAa,KAAK,KAAK,IAAI,WAAW;AAAA,IAC/D,OAAO;AACH,aAAO,UAAU,IAAI,qBAAqB,WAAW;AAAA,IACzD;AAEA,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AACJ;ACpFA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-badge.js","sources":["../packages/wje-badge/badge.element.js","../packages/wje-badge/badge.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 a Badge element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/badge\n * @status stable\n * @augments WJElement\n * @attribute {string} color - The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.\n * @slot - The badge's main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-badge-border-radius=var(--wje-border-radius-pill)] - Border radius of the badge element.\n * @tag wje-badge\n */\n\nexport default class Badge extends WJElement {\n    /**\n     * Creates an instance of Badge.\n     * Represents a custom Badge element.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Badge element.\n     * @type {string} The class name for the Badge element.\n     */\n    className = 'Badge';\n\n    /**\n     * Retrieves the CSS stylesheet for the Badge element.\n     * @static\n     * @returns {CSSStyleSheet} The CSS styles associated with the Badge.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Specifies the attributes to observe for changes.\n     * @static\n     * @returns {Array<string>} An array containing the names of attributes to observe.\n     * @example\n     * static get observedAttributes() {\n     *   return ['color'];\n     * }\n     */\n    static get observedAttributes() {\n        return ['color'];\n    }\n\n    /**\n     * Configures initial attributes for the Badge element.\n     * @returns {void} Nothing is returned.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Creates the DOM structure for the Badge element.\n     * @returns {DocumentFragment} A document fragment containing the Badge's structure.\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-badge');\n\n        // Add color classes based on the `color` attribute\n        if (this.hasAttribute('color')) {\n            native.classList.add(`wje-color-${this.color}`, 'wje-color');\n        } else {\n            native.classList.add('wje-color-default', 'wje-color');\n        }\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Badge from './badge.element.js';\n\nexport default Badge;\n\nBadge.define('wje-badge', Badge);\n"],"names":["Badge","WJElement","super","className","cssStyleSheet","setupAttributes","this","isShadowRoot","setAriaState","role","draw","fragment","document","createDocumentFragment","native","createElement","setAttribute","classList","add","hasAttribute","color","slot","appendChild","define"],"mappings":";;;;AAee,MAAMA,UAAcC,EAAAA;AAAAA,EAM/B;AACIC,UAAAA;AAOJC,qCAAY;AAAA,EANZ;AAAA,EAaA,2BAAWC;AACP;EACJ;AAAA,EAWA,WAAA;AACI,WAAO,CAAC,OAAA;AAAA,EACZ;AAAA,EAMA,kBAAAC;AACIC,SAAKC,eAAe,QACpBD,KAAKE,aAAa,EAAEC,MAAM,SAAA,CAAA;AAAA,EAC9B;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAASF,SAASG,cAAc,KAAA;AACpCD,IAAAA,GAAOE,aAAa,QAAQ,QAAA,GAC5BF,GAAOG,UAAUC,IAAI,cAAA,GAGjBZ,KAAKa,aAAa,OAAA,IAClBL,GAAOG,UAAUC,IAAI,aAAaZ,KAAKc,KAAAA,IAAS,eAEhDN,GAAOG,UAAUC,IAAI,qBAAqB;AAG9C,QAAIG,IAAOT,SAASG,cAAc,MAAA;AAMlC,WAJAD,GAAOQ,YAAYD,CAAAA,GAEnBV,GAASW,YAAYR,EAAAA,GAEdH;AAAAA,EACX;;ACnFJX,EAAMuB,OAAO,aAAavB,CAAAA;"}