wj-elements 0.1.137 → 0.1.139

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

@@ -0,0 +1,155 @@
+/**
+ * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.
+ * It represents a node within a tree structure, capable of nesting other items.
+ * @summary Represents a single item in a tree structure.
+ * @documentation https://elements.webjet.sk/components/tree-item
+ * @status stable
+ * @augments {HTMLElement}
+ * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).
+ * @csspart native - The native container of the tree item.
+ * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.
+ * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.
+ * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.
+ * @tag wje-tree-item
+ */
+export default class TreeItem extends HTMLElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): Array<string>;
+    _selection: string;
+    /**
+     * Sets the expanded state of the element. When set to a truthy value,
+     * the 'expanded' attribute will be added to the element. When set to a falsy
+     * value, the 'expanded' attribute will be removed.
+     * @param {boolean} value A boolean value indicating whether the
+     * element should be expanded (true) or collapsed (false).
+     */
+    set expanded(value: boolean);
+    /**
+     * Retrieves the value of the 'expanded' state for the current element.
+     * This getter checks whether the 'expanded' attribute is present on the element.
+     * If the attribute exists, it returns true, representing that the element is expanded.
+     * Otherwise, it returns false, indicating that the element is not expanded.
+     * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.
+     */
+    get expanded(): boolean;
+    /**
+     * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.
+     * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.
+     */
+    set selected(value: boolean);
+    /**
+     * Getter method for determining if the 'selected' attribute is present on the element.
+     * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.
+     */
+    get selected(): boolean;
+    /**
+     * Sets the selection mode for the component.
+     * @param {string} value The selection mode to apply. Defaults to 'single'
+     * if no value is provided. Possible options may be
+     * specific to the implementation of the component
+     * (e.g., 'single', 'multiple').
+     */
+    set selection(value: string);
+    /**
+     * Retrieves the current selection.
+     * @returns {*} The value of the current selection.
+     */
+    get selection(): any;
+    /**
+     * Sets or removes the 'indeterminate' attribute based on the provided value.
+     * This can be used to visually indicate an indeterminate state for elements like checkboxes.
+     * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.
+     * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.
+     */
+    set indeterminate(value: boolean);
+    /**
+     * Retrieves the state of the indeterminate attribute.
+     * @returns {boolean} True if the indeterminate attribute is present, otherwise false.
+     */
+    get indeterminate(): boolean;
+    /**
+     * Setup attributes for the Button element.
+     */
+    setupAttributes(): void;
+    isShadowRoot: string;
+    /**
+     * Handles updates when observed attributes of the element are changed.
+     * Updates the checkbox state based on changes to the "selected" or "indeterminate" attributes.
+     * @param {string} name The name of the attribute that was changed.
+     * @param {string|null} oldValue The previous value of the attribute before the change.
+     * @param {string|null} newValue The new value of the attribute after the change.
+     * @returns {void}
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Custom logic executed before the draw process begins.
+     * Determines and sets the appropriate slot if the current item is nested.
+     * @returns {void} No return value.
+     */
+    beforeDraw(): void;
+    /**
+     * Creates and returns a document fragment representing the structure of a tree item component.
+     * The method constructs the DOM elements including the native container, indentation, toggle button,
+     * selection checkbox, label, and children container, along with their respective slots and attributes.
+     * It dynamically handles the creation of expand and collapse icons, as well as appending slots for
+     * child components.
+     * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.
+     */
+    draw(): DocumentFragment;
+    checkbox: HTMLElement;
+    native: HTMLDivElement;
+    button: HTMLDivElement;
+    childrenElement: HTMLDivElement;
+    childrenSlot: HTMLSlotElement;
+    /**
+     * Executes operations to be performed after the draw action is completed.
+     * If the state indicates it is expanded, toggles its children.
+     * Additionally, sets up an event listener on the button element to handle toggling children upon click.
+     * @returns {void} Does not return a value.
+     */
+    afterDraw(): void;
+    /**
+     * Determines if the current item is a nested item within a tree structure.
+     * Checks if the item's parent element exists and is also a tree item.
+     * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.
+     */
+    isNestedItem(): boolean;
+    /**
+     * Checks whether the given node is a tree item.
+     * @param {object} node The node to check.
+     * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.
+     */
+    isTreeItem(node: object): boolean;
+    /**
+     * Toggles the visibility state of the children element and updates the class of the parent element.
+     * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,
+     * effectively showing or hiding the children and indicating the expanded state.
+     * @returns {void} Does not return a value.
+     */
+    toggleChildren(): void;
+    /**
+     * Retrieves the child items from the `childrenSlot` that match specific criteria.
+     * @param {object} [options] Configuration options.
+     * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.
+     * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.
+     */
+    getChildrenItems(options?: {
+        includeDisabled?: boolean;
+    }): any[];
+    /**
+     * Retrieves all descendant children of the current object in a flattened array structure.
+     * @param {object} [options] An optional object specifying filters or configurations for retrieving children.
+     * @returns {Array} An array containing all children and their descendants in a flat structure.
+     */
+    getAllChildrenFlat(options?: object): any[];
+}

package/dist/packages/wje-visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,2 @@
+import { default as VisuallyHidden } from './visually-hidden.element.js';
+export default VisuallyHidden;

package/dist/packages/wje-visually-hidden/visually-hidden.element.d.ts

@@ -0,0 +1,29 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `VisuallyHidden` is a custom web component that represents a visually hidden element.
+ * @summary This element represents a visually hidden element.
+ * @documentation https://elements.webjet.sk/components/visually-hidden
+ * @status stable
+ * @augments {WJElement}
+ * @slot - The default slot for the visually hidden element.
+ * @tag wje-visually-hidden
+ */
+export default class VisuallyHidden extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of observed attributes.
+     * @static
+     * @returns {Array} An empty array
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Draws the component for the visually hidden element.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+}

package/dist/wje-animation.js

@@ -4270,9 +4270,8 @@ class Animation extends WJElement {
     this.destroyAnimation();
     const element = this.slotEl.assignedElements()[0];
     this.animations = await this.getAnimationsArray();
-    const selected = await this.animations.find((k) => k.name === this.name);
-    console.log("SELECTED:", selected, element);
-    this.animation = element == null ? void 0 : element.animate(selected == null ? void 0 : selected.keyframes, {
+    const selected = this.animations.find((k) => k.name === this.name);
+    this.animation = element == null ? void 0 : element.animate(selected.keyframes, {
       delay: +this.delay,
       endDelay: +this.endDelay,
       fill: this.fill,
@@ -4316,7 +4315,6 @@ class Animation extends WJElement {
     } else {
       console.warn("Animation is not initialized or cancel is not available");
     }
-    console.log("ANIMATION CANCELLED", this.animation.playState);
   }
 }
 Animation.define("wje-animation", Animation);

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 animations from 'animate.css?inline';\n\nimport styles from '../styles/styles.css?inline';\nimport { fetchAndParseCSS } from '../utils/animations.js';\nimport { default as WJElement } from '../wje-element/element.js';\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 ['name'];\n    }\n\n    /**\n     * Method to setup attributes for the Animation element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\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        console.log(\"SELECTED:\", selected, element);\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        if (this.animation) 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     * Method to destroy the current animation.\n     */\n    destroyAnimation() {\n        if (this.animation) {\n            this.cancel();\n        }\n    }\n\n    /**\n     * Method to play the current animation.\n     */\n    play() {\n        if (this.animation) {\n            this.animation.play();\n        }\n    }\n\n    /**\n     * Method to cancel the current animation.\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        console.log(\"ANIMATION CANCELLED\", this.animation.playState);\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 animations from 'animate.css?inline';\n\nimport styles from '../styles/styles.css?inline';\nimport { fetchAndParseCSS } from '../utils/animations.js';\nimport { default as WJElement } from '../wje-element/element.js';\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 ['name'];\n    }\n\n    /**\n     * Method to setup attributes for the Animation element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\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 = 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        if (this.animation) 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     * Method to destroy the current animation.\n     */\n    destroyAnimation() {\n        if (this.animation) {\n            this.cancel();\n        }\n    }\n\n    /**\n     * Method to play the current animation.\n     */\n    play() {\n        if (this.animation) {\n            this.animation.play();\n        }\n    }\n\n    /**\n     * Method to cancel the current animation.\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-file-upload-item.js

@@ -57,10 +57,12 @@ class FileUploadItem extends WJElement {
     return ["uploaded"];
   }
   /**
-   * Called when an observed attribute has been added, removed, updated, or replaced.
-   * @param {string} name The name of the attribute that has changed.
-   * @param {string} oldValue The old value of the attribute.
-   * @param {string} newValue The new value of the attribute.
+   * Handles updates to the attributes of a custom element whenever one of the observed attributes is changed.
+   * Updates the related elements based on the changed attribute and its new value.
+   * @param {string} name The name of the attribute being changed.
+   * @param {string | null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.
+   * @param {string | null} newValue The new value of the attribute after the change, or null if the attribute is being removed.
+   * @returns {void} Does not return a value.
    */
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "uploaded" && oldValue !== newValue && this.uploadedEl) {

package/dist/wje-file-upload-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-file-upload-item.js","sources":["../packages/wje-file-upload-item/file-upload-item.element.js","../packages/wje-file-upload-item/file-upload-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport FormatDigital from '../wje-format-digital/format-digital.js';\nimport Icon from '../wje-icon/icon.js';\nimport Slider from '../wje-slider/slider.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to upload files.\n * `FileUploadItem` is a custom web component that represents a file upload item.\n * It extends from `WJElement` and uses the `Localizer` utility for localization.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @csspart button - The delete button part\n * @csspart image - The image part\n * @csspart name - The name part\n * @csspart size - The size part\n * @slot img - Slot for the image\n * @slot action - Slot for the action buttons\n * @cssproperty --primary-color - The primary color of the file upload item.\n * //@fires wje-button:click - Dispatches when the delete button is clicked\n * @tag wje-file-upload\n */\nexport default class FileUploadItem extends WJElement {\n    /**\n     * Creates an instance of FileUploadItem.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Dependencies for the component.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-format-digital': FormatDigital,\n        'wje-button': Button,\n        'wje-slider': Slider,\n        'wje-icon': Icon,\n    };\n\n    className = 'FileUploadItem';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['uploaded'];\n    }\n\n    /**\n     * Called when an observed attribute has been added, removed, updated, or replaced.\n     * @param {string} name The name of the attribute that has changed.\n     * @param {string} oldValue The old value of the attribute.\n     * @param {string} newValue The new value of the attribute.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'uploaded' && oldValue !== newValue && this.uploadedEl) {\n            this.uploadedEl.setAttribute('value', newValue);\n\n            let progress = ((+newValue / +this.size) * 100) || 0;\n\n            this.sliderEl.setAttribute(\"progress\", Math.round(progress, 0));\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the component on the screen.\n     * @returns {DocumentFragment} The fragment containing the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-file-upload-item');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'img');\n\n        let image = document.createElement('div');\n        image.setAttribute('part', 'image');\n        image.classList.add('image');\n\n        let name = document.createElement('span');\n        name.classList.add('name');\n        name.innerText = this.name;\n\n        let actions = document.createElement('slot');\n        actions.classList.add('actions');\n        actions.setAttribute('name', 'action');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        button.setAttribute('size', 'small');\n        button.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n\n        let sizeWrapper = document.createElement('span');\n        sizeWrapper.classList.add('size');\n\n        let uploaded = document.createElement('wje-format-digital');\n        uploaded.setAttribute('value', this.uploaded || 0);\n        uploaded.innerHTML = `<span slot=\"start\">${this.localizer.translate('wj.file.upload.uploaded')}</span>`;\n\n        let size = document.createElement('wje-format-digital');\n        size.setAttribute('value', this.size || 0);\n        size.innerHTML = `<span slot=\"start\">&nbsp;${this.localizer.translate('wj.file.upload.from')} </span>`;\n\n        let slider = document.createElement('wje-progress-bar');\n        slider.classList.add('file-progress');\n        slider.setAttribute('id', 'id-' + this.lastModified);\n        slider.setAttribute('progress', this.progress);\n        slider.setAttribute('color', 'success');\n\n        image.appendChild(slot);\n        actions.appendChild(button);\n\n        sizeWrapper.appendChild(uploaded);\n        sizeWrapper.appendChild(size);\n\n        native.appendChild(image);\n        native.appendChild(name);\n        native.appendChild(sizeWrapper);\n        native.appendChild(actions);\n        native.appendChild(slider);\n\n        fragment.appendChild(native);\n\n        this.button = button;\n        this.uploadedEl = uploaded;\n        this.sliderEl = slider;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.button.addEventListener('wje-button:click', this.onDelete);\n    }\n\n    /**\n     * Handles the delete action.\n     */\n    onDelete = () => {\n        this.remove();\n    };\n}\n","import FileUploadItem from './file-upload-item.element.js';\n\nexport default FileUploadItem;\n\nFileUploadItem.define('wje-file-upload-item', FileUploadItem);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-file-upload-item.js","sources":["../packages/wje-file-upload-item/file-upload-item.element.js","../packages/wje-file-upload-item/file-upload-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport FormatDigital from '../wje-format-digital/format-digital.js';\nimport Icon from '../wje-icon/icon.js';\nimport Slider from '../wje-slider/slider.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to upload files.\n * `FileUploadItem` is a custom web component that represents a file upload item.\n * It extends from `WJElement` and uses the `Localizer` utility for localization.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @csspart button - The delete button part\n * @csspart image - The image part\n * @csspart name - The name part\n * @csspart size - The size part\n * @slot img - Slot for the image\n * @slot action - Slot for the action buttons\n * @cssproperty --primary-color - The primary color of the file upload item.\n * //@fires wje-button:click - Dispatches when the delete button is clicked\n * @tag wje-file-upload\n */\nexport default class FileUploadItem extends WJElement {\n    /**\n     * Creates an instance of FileUploadItem.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Dependencies for the component.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-format-digital': FormatDigital,\n        'wje-button': Button,\n        'wje-slider': Slider,\n        'wje-icon': Icon,\n    };\n\n    className = 'FileUploadItem';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['uploaded'];\n    }\n\n    /**\n     * Handles updates to the attributes of a custom element whenever one of the observed attributes is changed.\n     * Updates the related elements based on the changed attribute and its new value.\n     * @param {string} name The name of the attribute being changed.\n     * @param {string | null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.\n     * @param {string | null} newValue The new value of the attribute after the change, or null if the attribute is being removed.\n     * @returns {void} Does not return a value.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'uploaded' && oldValue !== newValue && this.uploadedEl) {\n            this.uploadedEl.setAttribute('value', newValue);\n\n            let progress = ((+newValue / +this.size) * 100) || 0;\n\n            this.sliderEl.setAttribute(\"progress\", Math.round(progress, 0));\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the component on the screen.\n     * @returns {DocumentFragment} The fragment containing the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-file-upload-item');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'img');\n\n        let image = document.createElement('div');\n        image.setAttribute('part', 'image');\n        image.classList.add('image');\n\n        let name = document.createElement('span');\n        name.classList.add('name');\n        name.innerText = this.name;\n\n        let actions = document.createElement('slot');\n        actions.classList.add('actions');\n        actions.setAttribute('name', 'action');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        button.setAttribute('size', 'small');\n        button.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n\n        let sizeWrapper = document.createElement('span');\n        sizeWrapper.classList.add('size');\n\n        let uploaded = document.createElement('wje-format-digital');\n        uploaded.setAttribute('value', this.uploaded || 0);\n        uploaded.innerHTML = `<span slot=\"start\">${this.localizer.translate('wj.file.upload.uploaded')}</span>`;\n\n        let size = document.createElement('wje-format-digital');\n        size.setAttribute('value', this.size || 0);\n        size.innerHTML = `<span slot=\"start\">&nbsp;${this.localizer.translate('wj.file.upload.from')} </span>`;\n\n        let slider = document.createElement('wje-progress-bar');\n        slider.classList.add('file-progress');\n        slider.setAttribute('id', 'id-' + this.lastModified);\n        slider.setAttribute('progress', this.progress);\n        slider.setAttribute('color', 'success');\n\n        image.appendChild(slot);\n        actions.appendChild(button);\n\n        sizeWrapper.appendChild(uploaded);\n        sizeWrapper.appendChild(size);\n\n        native.appendChild(image);\n        native.appendChild(name);\n        native.appendChild(sizeWrapper);\n        native.appendChild(actions);\n        native.appendChild(slider);\n\n        fragment.appendChild(native);\n\n        this.button = button;\n        this.uploadedEl = uploaded;\n        this.sliderEl = slider;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.button.addEventListener('wje-button:click', this.onDelete);\n    }\n\n    /**\n     * Handles the delete action.\n     */\n    onDelete = () => {\n        this.remove();\n    };\n}\n","import FileUploadItem from './file-upload-item.element.js';\n\nexport default FileUploadItem;\n\nFileUploadItem.define('wje-file-upload-item', FileUploadItem);\n"],"names":[],"mappings":"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"}