wj-elements 0.2.0-alpha.7 → 0.2.0-alpha.9

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-tree-item/tree-item.test.d.ts

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

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-file-upload-item.js

@@ -93,7 +93,7 @@ class FileUploadItem extends WJElement {
     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    /**\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.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 } 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        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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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.2.0-alpha.7",
+  "version": "0.2.0-alpha.9",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",