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

package/dist/packages/utils/utils.d.ts

@@ -1 +1,17 @@
+/**
+ * Checks if a given file matches any of the accepted file types.
+ * @param {File} file The file to validate.
+ * @param {string|string[]} acceptedFileTypes A comma-separated string or an array of accepted MIME types or file extensions.
+ * @returns {boolean} Returns `true` if the file type is valid, otherwise `false`.
+ * @throws {Error} Throws an error if `acceptedFileTypes` is empty.
+ * @example
+ * const file = new File([""], "example.png", { type: "image/png" });
+ * const isValid = isValidFileType(file, "image/*,application/pdf");
+ * console.log(isValid); // true
+ * @example
+ * const file = new File([""], "example.txt", { type: "text/plain" });
+ * const isValid = isValidFileType(file, ["text/plain", "application/json"]);
+ * console.log(isValid); // true
+ */
+export function isValidFileType(file: File, acceptedFileTypes: string | string[]): boolean;
 export function bool(v: any): boolean;

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

@@ -50,6 +50,18 @@ export default class Chip extends WJElement {
      * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.
      */
     get removable(): boolean;
+    /**
+     * Sets the disabled state of the element.
+     * If true, the 'disabled' attribute is added to the element.
+     * If false, the 'disabled' attribute is removed from the element.
+     * @param {boolean} value Specifies whether the element should be disabled.
+     */
+    set disabled(value: boolean);
+    /**
+     * Determines if the element has the 'disabled' attribute.
+     * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.
+     */
+    get disabled(): boolean;
     /**
      * Draws the Chip element.
      * @returns {DocumentFragment}

package/dist/packages/wje-chip/chip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/wje-file-upload/file-upload.element.d.ts

@@ -119,6 +119,18 @@ export default class FileUpload extends WJElement {
      * @returns {boolean}
      */
     get toChunk(): boolean;
+    /**
+     * Sets the maximum number of files that can be uploaded or managed.
+     * Assigns the specified value to the 'max-files' attribute.
+     * @param {number} value The maximum allowable number of files.
+     */
+    set maxFiles(value: number);
+    /**
+     * Retrieves the maximum number of files allowed from the `max-files` attribute.
+     * If the attribute is not set or is invalid, defaults to 0.
+     * @returns {number} The maximum number of files allowed.
+     */
+    get maxFiles(): number;
     beforeDraw(): void;
     uploadFunction: Function;
     /**
@@ -136,19 +148,19 @@ export default class FileUpload extends WJElement {
     afterDraw(): void;
     /**
      * Method to handle form submission.
-     * @param {Event} event The form submission event.
+     * @param {Event} e The form submission event.
      */
-    handleSubmit(event: Event): void;
+    handleSubmit(e: Event): void;
     /**
      * Method to handle file drop event.
-     * @param {Event} event The file drop event object.
+     * @param {Event} e The file drop event object.
      */
-    handleDrop: (event: Event) => void;
+    handleDrop: (e: Event) => void;
     /**
      * Method to handle file input change event.
-     * @param {Event} event The file input change event object.
+     * @param {Event} e The file input change event object.
      */
-    handleInputChange: (event: Event) => void;
+    handleInputChange: (e: Event) => void;
     /**
      * Method to add files to the queue.
      * @param files

package/dist/packages/wje-file-upload/file-upload.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/wje-file-upload/service/service.d.ts

@@ -7,29 +7,6 @@
  * getFileTypeIcon('folder'); // Returns 'folder'.
  */
 export function getFileTypeIcon(type: string): string;
-/**
- * Checks if a given file matches any of the accepted file types.
- * @param {File} file The file to validate.
- * @param {string|string[]} acceptedFileTypes A comma-separated string or an array of accepted MIME types or file extensions.
- * @returns {boolean} Returns `true` if the file type is valid, otherwise `false`.
- * @throws {Error} Throws an error if `acceptedFileTypes` is empty.
- * @example
- * const file = new File([""], "example.png", { type: "image/png" });
- * const isValid = isValidFileType(file, "image/*,application/pdf");
- * console.log(isValid); // true
- * @example
- * const file = new File([""], "example.txt", { type: "text/plain" });
- * const isValid = isValidFileType(file, ["text/plain", "application/json"]);
- * console.log(isValid); // true
- */
-export function isValidFileType(file: File, acceptedFileTypes: string | string[]): boolean;
-/**
- * Uploads a file in chunks using `XMLHttpRequest`, allowing for progress tracking.
- * @param {File} file The file to be uploaded.
- * @param {number} chunkSize The size of each chunk in bytes.
- * @param {HTMLElement} preview The element used to display upload progress.
- */
-export function uploadFile(file: File, chunkSize: number, preview: HTMLElement): void;
 /**
  * Returns a function for uploading files either in chunks or as a whole file, based on the provided options.
  * @param {string} url The URL to which the file will be uploaded.

package/dist/packages/wje-file-upload-item/file-upload-item.element.d.ts

@@ -31,24 +31,41 @@ export default class FileUploadItem extends WJElement {
      */
     static get observedAttributes(): Array<string>;
     localizer: Localizer;
+    /**
+     * Sets the 'is-uploaded' attribute to indicate the uploaded status.
+     * @param {boolean} value The value to determine if the element is uploaded.
+     */
     set isUploaded(value: boolean);
+    /**
+     * Checks if the 'is-uploaded' attribute is present on the element.
+     * @returns {boolean} True if the 'is-uploaded' attribute exists, otherwise false.
+     */
     get isUploaded(): boolean;
-    set size(value: string);
-    get size(): string;
+    /**
+     * Sets the size attribute of the element.
+     * @param {string | number} value The value to set for the size attribute.
+     */
+    set size(value: string | number);
+    /**
+     * Retrieves the value of the 'size' attribute.
+     * @returns {string|null} The value of the 'size' attribute, or null if the attribute is not present.
+     */
+    get size(): string | null;
     /**
      * Dependencies for the component.
      * @type {object}
      */
     dependencies: object;
     /**
-     * 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.
+     * A lifecycle method that is called when one of the observed attributes of the custom element is added, removed, or changed.
+     * This method is used to react to changes in the specified 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, 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 has been removed.
+     * @returns {void} This method does not return a value.
      */
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    progress: number;
     /**
      * Method to draw the component on the screen.
      * @returns {DocumentFragment} The fragment containing the component.

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

@@ -371,6 +371,8 @@ export class Select extends FormAssociatedElement {
     selectOptions(values: any | any[], silent?: boolean): void;
     /**
      * Clones and appends an icon with the "check" slot to the specified option element.
+     * If the option already contains a custom element with slot="check" (e.g. <wje-status slot="check">),
+     * it is left untouched and no template icon is added.
      * @param {HTMLElement} option The target HTML element to which the cloned "check" icon will be appended.
      * @returns {void} This method does not return a value, but it modifies the DOM by appending a cloned "check" icon to the provided option element.
      */

package/dist/packages/wje-toggle/toggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils.js

@@ -1,7 +1,24 @@
 const bool = (v) => {
   return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
 };
+function isValidFileType(file, acceptedFileTypes) {
+  const mime = file.type.toLowerCase();
+  const base = mime.split("/")[0];
+  const ext = file.name.split(".").pop().toLowerCase();
+  let accepted = Array.isArray(acceptedFileTypes) ? acceptedFileTypes : acceptedFileTypes.split(",").map((t) => t.trim().toLowerCase());
+  if (accepted.length === 0) {
+    throw new Error("acceptedFileTypes is empty");
+  }
+  for (let type of accepted) {
+    type = type.toLowerCase();
+    if (type === base + "/*") return true;
+    if (type === mime) return true;
+    if (type === ext) return true;
+  }
+  return false;
+}
 export {
-  bool
+  bool,
+  isValidFileType
 };
 //# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../packages/utils/utils.js"],"sourcesContent":["export const bool = (v) => {\n    return v === 'false' || v === 'null' || v === 'NaN' || v === 'undefined' || v === '0' ? false : !!v;\n};\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,CAAC,MAAM;AACvB,SAAO,MAAM,WAAW,MAAM,UAAU,MAAM,SAAS,MAAM,eAAe,MAAM,MAAM,QAAQ,CAAC,CAAC;AACtG;"}
+{"version":3,"file":"utils.js","sources":["../packages/utils/utils.js"],"sourcesContent":["export const bool = (v) => {\n    return v === 'false' || v === 'null' || v === 'NaN' || v === 'undefined' || v === '0' ? false : !!v;\n};\n\n/**\n * Checks if a given file matches any of the accepted file types.\n * @param {File} file The file to validate.\n * @param {string|string[]} acceptedFileTypes A comma-separated string or an array of accepted MIME types or file extensions.\n * @returns {boolean} Returns `true` if the file type is valid, otherwise `false`.\n * @throws {Error} Throws an error if `acceptedFileTypes` is empty.\n * @example\n * const file = new File([\"\"], \"example.png\", { type: \"image/png\" });\n * const isValid = isValidFileType(file, \"image/*,application/pdf\");\n * console.log(isValid); // true\n * @example\n * const file = new File([\"\"], \"example.txt\", { type: \"text/plain\" });\n * const isValid = isValidFileType(file, [\"text/plain\", \"application/json\"]);\n * console.log(isValid); // true\n */\nexport function isValidFileType(file, acceptedFileTypes) {\n    const mime = file.type.toLowerCase();\n    const base = mime.split('/')[0];\n    const ext = file.name.split('.').pop().toLowerCase();\n\n    let accepted = Array.isArray(acceptedFileTypes)\n      ? acceptedFileTypes\n      : acceptedFileTypes.split(',').map(t => t.trim().toLowerCase());\n\n    if (accepted.length === 0) {\n        throw new Error('acceptedFileTypes is empty');\n    }\n\n    for (let type of accepted) {\n        type = type.toLowerCase();\n\n        // image/* alebo application/*\n        if (type === base + '/*') return true;\n\n        // presný MIME typ\n        if (type === mime) return true;\n\n        // extension (xlsx, png, pdf…)\n        if (type === ext) return true;\n    }\n\n    return false;\n}\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,CAAC,MAAM;AACvB,SAAO,MAAM,WAAW,MAAM,UAAU,MAAM,SAAS,MAAM,eAAe,MAAM,MAAM,QAAQ,CAAC,CAAC;AACtG;AAiBO,SAAS,gBAAgB,MAAM,mBAAmB;AACrD,QAAM,OAAO,KAAK,KAAK,YAAa;AACpC,QAAM,OAAO,KAAK,MAAM,GAAG,EAAE,CAAC;AAC9B,QAAM,MAAM,KAAK,KAAK,MAAM,GAAG,EAAE,IAAK,EAAC,YAAa;AAEpD,MAAI,WAAW,MAAM,QAAQ,iBAAiB,IAC1C,oBACA,kBAAkB,MAAM,GAAG,EAAE,IAAI,OAAK,EAAE,OAAO,aAAa;AAEhE,MAAI,SAAS,WAAW,GAAG;AACvB,UAAM,IAAI,MAAM,4BAA4B;AAAA,EACpD;AAEI,WAAS,QAAQ,UAAU;AACvB,WAAO,KAAK,YAAa;AAGzB,QAAI,SAAS,OAAO,KAAM,QAAO;AAGjC,QAAI,SAAS,KAAM,QAAO;AAG1B,QAAI,SAAS,IAAK,QAAO;AAAA,EACjC;AAEI,SAAO;AACX;"}

package/dist/wje-chip.js

@@ -71,6 +71,26 @@ class Chip extends WJElement {
   get removable() {
     return this.hasAttribute("removable");
   }
+  /**
+   * Sets the disabled state of the element.
+   * If true, the 'disabled' attribute is added to the element.
+   * If false, the 'disabled' attribute is removed from the element.
+   * @param {boolean} value Specifies whether the element should be disabled.
+   */
+  set disabled(value) {
+    if (value) {
+      this.setAttribute("disabled", "");
+    } else {
+      this.removeAttribute("disabled");
+    }
+  }
+  /**
+   * Determines if the element has the 'disabled' attribute.
+   * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
   /**
    * Getter for the CSS stylesheet.
    * @returns {*}

package/dist/wje-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n    /**\n     * Chip constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets or removes the \"round\" attribute on the element based on the provided value.\n     * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n     * If true, the \"round\" attribute is added. If false, the \"round\"\n     * attribute is removed.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string} 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 current element.\n     * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Sets or removes the \"removable\" attribute on the element.\n     * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n     * If true, the \"removable\" attribute is added;\n     * if false, the \"removable\" attribute is removed.\n     */\n    set removable(value) {\n        if (value) {\n            this.setAttribute('removable', '');\n        } else {\n            this.removeAttribute('removable');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'removable' attribute.\n     * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n     */\n    get removable() {\n        return this.hasAttribute('removable');\n    }\n\n    /**\n     * Class name for the Chip element.\n     * @type {string}\n     */\n    className = 'Chip';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Chip element.\n     * @returns {DocumentFragment}\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-chip');\n\n        let slot = document.createElement('slot');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        let remove = document.createElement('wje-button');\n        remove.setAttribute('part', 'remove');\n        remove.setAttribute('fill', 'link');\n        remove.setAttribute('color', this.color || 'default');\n        remove.round = !this.round;\n\n        if(this.hasAttribute('size')) {\n            if(this.size === 'small') {\n                remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n            } else if (this.size === 'large') {\n                remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n            }\n        } else {\n            remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n        }\n\n        let active = document.createElement('wje-icon');\n        active.setAttribute('name', 'check');\n        active.classList.add('check');\n\n        // Add color\n        if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n        else native.classList.add('wje-color-default', 'wje-color');\n\n        if (this.disabled) this.classList.add('wje-disabled');\n\n        if (this.outline) this.classList.add('wje-outline');\n\n        native.appendChild(slot);\n        native.appendChild(slotEnd);\n        native.appendChild(active);\n\n        if (this.removable) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        this.slotEnd = slotEnd;\n\n        return fragment;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\n        event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n    }\n\n    /**\n     * Before disconnect event for the Chip element.\n     */\n    beforeDisconnect() {\n        event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n    /**\n     * Chip constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets or removes the \"round\" attribute on the element based on the provided value.\n     * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n     * If true, the \"round\" attribute is added. If false, the \"round\"\n     * attribute is removed.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string} 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 current element.\n     * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Sets or removes the \"removable\" attribute on the element.\n     * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n     * If true, the \"removable\" attribute is added;\n     * if false, the \"removable\" attribute is removed.\n     */\n    set removable(value) {\n        if (value) {\n            this.setAttribute('removable', '');\n        } else {\n            this.removeAttribute('removable');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'removable' attribute.\n     * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n     */\n    get removable() {\n        return this.hasAttribute('removable');\n    }\n\n    /**\n     * Sets the disabled state of the element.\n     * If true, the 'disabled' attribute is added to the element.\n     * If false, the 'disabled' attribute is removed from the element.\n     * @param {boolean} value Specifies whether the element should be disabled.\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'disabled' attribute.\n     * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Class name for the Chip element.\n     * @type {string}\n     */\n    className = 'Chip';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Chip element.\n     * @returns {DocumentFragment}\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-chip');\n\n        let slot = document.createElement('slot');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        let remove = document.createElement('wje-button');\n        remove.setAttribute('part', 'remove');\n        remove.setAttribute('fill', 'link');\n        remove.setAttribute('color', this.color || 'default');\n        remove.round = !this.round;\n\n        if(this.hasAttribute('size')) {\n            if(this.size === 'small') {\n                remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n            } else if (this.size === 'large') {\n                remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n            }\n        } else {\n            remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n        }\n\n        let active = document.createElement('wje-icon');\n        active.setAttribute('name', 'check');\n        active.classList.add('check');\n\n        // Add color\n        if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n        else native.classList.add('wje-color-default', 'wje-color');\n\n        if (this.disabled) this.classList.add('wje-disabled');\n\n        if (this.outline) this.classList.add('wje-outline');\n\n        native.appendChild(slot);\n        native.appendChild(slotEnd);\n        native.appendChild(active);\n\n        if (this.removable) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        this.slotEnd = slotEnd;\n\n        return fragment;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\n        event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n    }\n\n    /**\n     * Before disconnect event for the Chip element.\n     */\n    beforeDisconnect() {\n        event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":"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"}

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

@@ -7,6 +7,7 @@ import WJElement from "./wje-element.js";
 import FormatDigital from "./wje-format-digital.js";
 import { I as Icon } from "./icon-DY5AZ6xM.js";
 import Slider from "./wje-slider.js";
+import { event } from "./event.js";
 const styles = "/*\n[ WJ File Upload Item ]\n*/\n\n:host {\n    width: 100%;\n}\n\n.native-file-upload-item {\n    display: grid;\n    grid-template-columns: auto 1fr 1fr;\n    grid-template-rows: auto auto auto;\n    gap: 0.5rem;\n    grid-template-areas:\n        'image name actions'\n        'image size actions'\n        'progress progress progress';\n    padding: 0.5rem;\n    border-width: var(--wje-file-upload-item-border-width);\n    border-style: var(--wje-file-upload-item-border-style);\n    border-color: var(--wje-file-upload-item-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}\n\n.image {\n    grid-area: image;\n    align-items: center;\n    display: flex;\n}\n\n::slotted([slot='img']) {\n    --wje-img-border-radius: var(--wje-border-radius-medium) !important;\n}\n\n.name {\n    grid-area: name;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: bold;\n}\n\n.size {\n    grid-area: size;\n    display: flex;\n}\n\n.actions {\n    grid-area: actions;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n.file-progress {\n    grid-area: progress;\n}\n\n.file-info > span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\nwje-slider {\n    flex-basis: 100%;\n    margin-top: 0.5rem;\n}\n\nwje-slider::part(slider) {\n    color: yellow;\n}\n\nwje-slider::part(slider)::-webkit-slider-thumb {\n    visibility: hidden;\n}\n\nwje-slider::part(slider)::-moz-range-thumb {\n    visibility: hidden;\n}\n\nwje-slider::part(slider)::-ms-thumb {\n    visibility: hidden;\n}\n\nwje-img {\n    width: 50px;\n    height: 50px;\n    display: flex;\n    align-items: center;\n    padding: 0.25rem;\n    border: 1px solid var(--wje-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}\n";
 class FileUploadItem extends WJElement {
   /**
@@ -30,19 +31,36 @@ class FileUploadItem extends WJElement {
      * Handles the delete action.
      */
     __publicField(this, "onDelete", () => {
+      event.dispatchCustomEvent(this, "wje-file-upload-item:remove", this.data);
       this.remove();
     });
     this.localizer = new Localizer(this);
   }
+  /**
+   * Sets the 'is-uploaded' attribute to indicate the uploaded status.
+   * @param {boolean} value The value to determine if the element is uploaded.
+   */
   set isUploaded(value) {
     this.setAttribute("is-uploaded", "");
   }
+  /**
+   * Checks if the 'is-uploaded' attribute is present on the element.
+   * @returns {boolean} True if the 'is-uploaded' attribute exists, otherwise false.
+   */
   get isUploaded() {
     return this.hasAttribute("is-uploaded");
   }
+  /**
+   * Sets the size attribute of the element.
+   * @param {string | number} value The value to set for the size attribute.
+   */
   set size(value) {
     this.setAttribute("size", value);
   }
+  /**
+   * Retrieves the value of the 'size' attribute.
+   * @returns {string|null} The value of the 'size' attribute, or null if the attribute is not present.
+   */
   get size() {
     return this.getAttribute("size");
   }
@@ -60,21 +78,24 @@ class FileUploadItem extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["uploaded"];
+    return ["uploaded", "is-uploaded"];
   }
   /**
-   * 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.
+   * A lifecycle method that is called when one of the observed attributes of the custom element is added, removed, or changed.
+   * This method is used to react to changes in the specified 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, 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 has been removed.
+   * @returns {void} This method does not return a value.
    */
   attributeChangedCallback(name, oldValue, newValue) {
+    if (super.attributeChangedCallback) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+    }
     if (name === "uploaded" && oldValue !== newValue && this.uploadedEl) {
       this.uploadedEl.setAttribute("value", newValue);
       let progress = +newValue / +this.size * 100 || 0;
-      this.sliderEl.setAttribute("progress", Math.round(progress, 0));
+      this.progress = Math.round(progress, 0);
     }
   }
   /**

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 isUploaded(value) {\n        this.setAttribute('is-uploaded', '');\n    }\n\n    get isUploaded() {\n        return this.hasAttribute('is-uploaded');\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 size2 = document.createElement('wje-format-digital');\n        size2.setAttribute('value', this.size || 0);\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\n        if (!this.isUploaded)\n            native.appendChild(sizeWrapper);\n        else\n            native.appendChild(size2);\n\n        native.appendChild(actions);\n\n        if (!this.isUploaded)\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, event } 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    /**\n     * Sets the 'is-uploaded' attribute to indicate the uploaded status.\n     * @param {boolean} value The value to determine if the element is uploaded.\n     */\n    set isUploaded(value) {\n        this.setAttribute('is-uploaded', '');\n    }\n\n    /**\n     * Checks if the 'is-uploaded' attribute is present on the element.\n     * @returns {boolean} True if the 'is-uploaded' attribute exists, otherwise false.\n     */\n    get isUploaded() {\n        return this.hasAttribute('is-uploaded');\n    }\n\n    /**\n     * Sets the size attribute of 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 value of the 'size' attribute.\n     * @returns {string|null} The value of the 'size' attribute, or null if the attribute is not present.\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', 'is-uploaded'];\n    }\n\n    /**\n     * A lifecycle method that is called when one of the observed attributes of the custom element is added, removed, or changed.\n     * This method is used to react to changes in the specified attributes.\n     * @param {string} name The name of the attribute that was 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 has been removed.\n     * @returns {void} This method does not return a value.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (super.attributeChangedCallback) {\n            super.attributeChangedCallback(name, oldValue, newValue);\n        }\n\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.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 size2 = document.createElement('wje-format-digital');\n        size2.setAttribute('value', this.size || 0);\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\n        if (!this.isUploaded)\n            native.appendChild(sizeWrapper);\n        else\n            native.appendChild(size2);\n\n        native.appendChild(actions);\n\n        if (!this.isUploaded)\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        event.dispatchCustomEvent(this, 'wje-file-upload-item:remove', this.data);\n\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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"}