wj-elements 0.1.199 → 0.1.200

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

@@ -0,0 +1,127 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Dialog` is a custom web component that represents a dialog.
+ * @summary This element represents a dialog.
+ * @documentation https://elements.webjet.sk/components/dialog
+ * @status stable
+ * @augments {WJElement}
+ * @slot header - Slot for the header content.
+ * @slot body - Slot for the body content.
+ * @slot footer - Slot for the footer content.
+ * @csspart dialog - The dialog wrapper.
+ * @csspart header - The header of the dialog.
+ * @csspart body - The body of the dialog.
+ * @csspart footer - The footer of the dialog.
+ * @csspart close - The close button of the dialog.
+ * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.
+ * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.
+ * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.
+ * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.
+ * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.
+ * @tag wje-dialog
+ */
+export default class Dialog extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @returns {*}
+     */
+    static get cssStyleSheet(): any;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @returns {*[]}
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Sets the value of the 'headline' attribute.
+     * @param {string} value The new value for the 'headline' attribute.
+     */
+    set headline(value: string);
+    /**
+     * Retrieves the value of the "headline" attribute from the element.
+     * If the "headline" attribute is not present, returns an empty string.
+     * @returns {string} The headline attribute value or an empty string if not set.
+     */
+    get headline(): string;
+    /**
+     * Sets the headline of the dialog.
+     * @param value
+     */
+    set placement(value: string | string);
+    /**
+     * Gets the headline of the dialog.
+     * @returns {string|string}
+     */
+    get placement(): string | string;
+    /**
+     * Sets the headline of the dialog.
+     * @param value
+     */
+    set async(value: boolean);
+    /**
+     * Gets the headline of the dialog.
+     * @returns {boolean}
+     */
+    get async(): boolean;
+    /**
+     * Sets the headline of the dialog.
+     * @param value
+     */
+    set closeHidden(value: boolean);
+    /**
+     * Gets the headline of the dialog.
+     * @returns {boolean}
+     */
+    get closeHidden(): boolean;
+    /**
+     * Draws the component.
+     * @param {object} context The context for drawing.
+     * @param {object} store The store for drawing.
+     * @param {object} params The parameters for drawing.
+     * @returns {DocumentFragment}
+     */
+    draw(context: object, store: object, params: object): DocumentFragment;
+    dialog: HTMLDialogElement;
+    /**
+     * Creates the dialog body.
+     * @param dialog
+     */
+    htmlDialogBody(dialog: any): void;
+    /**
+     * Closes the dialog.
+     * @param e
+     */
+    close(e: any): void;
+    /**
+     * Before the dialog opens.
+     */
+    beforeOpen(dialog: any, trigger: any): void;
+    /**
+     * After the dialog opens.
+     */
+    afterOpen(dialog: any, trigger: any): void;
+    /**
+     * Before the dialog closes.
+     */
+    beforeClose(dialog: any, trigger: any): void;
+    /**
+     * After the dialog closes.
+     */
+    afterClose(dialog: any, trigger: any): void;
+    /**
+     * Opens the dialog.
+     * @param e
+     */
+    onOpen: (e: any) => void;
+    /**
+     * Closes the dialog.
+     * @param {object} e
+     */
+    onClose: (e: object) => void;
+    /**
+     * Registers an event listener on the provided button that triggers a blocking UI element
+     * and executes a given promise when the button is clicked.
+     * @param {HTMLElement} button The button element to attach the event listener to.
+     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.
+     */
+    registerBlockingEvent(button: HTMLElement, promise: Function): void;
+}

package/dist/packages/wje-divider/divider.d.ts

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

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

@@ -0,0 +1,32 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary Divider is a custom web component that extends WJElement.
+ * It provides a simple divider line that can be used to separate content.
+ * @documentation https://elements.webjet.sk/components/divider
+ * @status stable
+ * @augments WJElement
+ * @slot - This is a default/unnamed slot.
+ * @cssproperty [--wje-border-width=1px] - The size of the border.
+ * @cssproperty [--wje-divider-border-color=var(--wje-border-color)] - The color of the divider borderline.
+ * @cssproperty [--wje-divider-border-width=var(--wje-border-width, 1px)] - The width of the divider borderline.
+ * @cssproperty [--wje-divider-spacing=0] - The spacing for the divider.
+ * @tag wje-divider
+ * @tag wje-divider
+ */
+export default class Divider extends WJElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {string} The CSS stylesheet.
+     */
+    static get cssStyleSheet(): string;
+    /**
+     * Getter for the observed attributes.
+     * @returns {Array} An empty array as there are no observed attributes.
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Draws the Divider.
+     * @returns {DocumentFragment} The created document fragment.
+     */
+    draw(): DocumentFragment;
+}

package/dist/packages/wje-dropdown/dropdown.d.ts

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

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

@@ -0,0 +1,84 @@
+import { default as WJElement } from '../wje-element/element.js';
+import { default as Popup } from '../wje-popup/popup.element.js';
+/**
+ * `Dropdown` is a custom element that displays a dropdown menu.
+ * @summary This element represents a dropdown menu.
+ * @documentation https://elements.webjet.sk/components/dropdown
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part of the dropdown.
+ * @slot trigger - The slot for the trigger of the dropdown.
+ * @slot - The default slot for the dropdown.
+ * // @fires wje-dropdown:open - Event fired when the dropdown is opened.
+ * // @fires wje-dropdown:close - Event fired when the dropdown is closed.
+ * @tag wje-dropdown
+ */
+export default class Dropdown extends WJElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {string[]}
+     */
+    static get observedAttributes(): string[];
+    /**
+     * The placement of the dropdown.
+     * @type {{"wje-popup": Popup}}
+     */
+    dependencies: {
+        "wje-popup": Popup;
+    };
+    /**
+     * Sets the placement of the dropdown.
+     * @param value
+     */
+    set trigger(value: string | string);
+    /**
+     * Gets the placement of the dropdown.
+     * @returns {string|string}
+     */
+    get trigger(): string | string;
+    /**
+     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.
+     * @param {Event} e The event object.
+     */
+    otherDropdownOpennedCallback: (e: Event) => void;
+    /**
+     * Removes the popup element.
+     */
+    beforeDraw(): void;
+    popup: HTMLElement;
+    /**
+     * Draws the dropdown element and returns the created document fragment.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    anchorSlot: HTMLSlotElement;
+    popupHideCallback: (e: any) => void;
+    /**
+     * Adds event listeners for the mouseenter and mouseleave events.
+     */
+    afterDraw(): void;
+    /**
+     * @summary Toggles the dropdown element between active and inactive states.
+     * Calls the `onOpen` method if the element is currently inactive,
+     * and calls the `onClose` method if the element is currently active.
+     * @param {Event} e The event object.
+     */
+    toggleCallback: (e: Event) => void;
+    /**
+     * @summary Returns the content to be displayed before showing the dropdown.
+     * @returns {any} The content to be displayed.
+     */
+    beforeShow(): any;
+    /**
+     * This method is called after the dropdown is shown.
+     */
+    afterShow(): void;
+    /**
+     * Open the popup element.
+     * @param {object} e
+     */
+    onOpen: (e: object) => void;
+    beforeClose: () => void;
+    afterClose: () => void;
+    onClose: () => void;
+}

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

@@ -0,0 +1,306 @@
+import { UniversalService } from '../utils/universal-service.js';
+import { defaultStoreActions } from '../wje-store/store.js';
+import { Permissions } from '../utils/permissions.js';
+import { WjElementUtils } from '../utils/element-utils.js';
+import { event } from '../utils/event.js';
+export default class WJElement extends HTMLElement {
+    /**
+     * Processes and combines two templates into one.
+     * @param pTemplate The primary template.
+     * @param inputTemplate The secondary template.
+     * @returns The combined template.
+     */
+    static processTemplates: (pTemplate: any, inputTemplate: any) => HTMLTemplateElement;
+    /**
+     * Defines a custom element if not already defined.
+     * @param name The name of the custom element.
+     * @param [elementConstructor] The constructor for the custom element.
+     * @param [options] Additional options for defining the element.
+     */
+    static define(name: any, elementConstructor?: typeof WJElement, options?: {}): void;
+    service: UniversalService;
+    _dependencies: {};
+    /**
+     * @typedef {object} DrawingStatuses
+     * @property {number} CREATED - The component has been created.
+     * @property {number} ATTACHED - The component has been attached to the DOM.
+     * @property {number} BEGINING - The component is beginning to draw.
+     * @property {number} START - The component has started drawing.
+     * @property {number} DRAWING - The component is drawing.
+     * @property {number} DONE - The component has finished drawing.
+     * @property {number} DISCONNECTED - The component has been disconnected from the DOM.
+     */
+    /**
+     * WJElement is a base class for custom web components with managed lifecycle, attribute/property sync,
+     * permission-based visibility, and extensibility hooks.
+     * @property {boolean} isAttached - True if the component is currently attached to the DOM.
+     * @property {DrawingStatuses} drawingStatuses - Enum of possible drawing states.
+     * @property {number} drawingStatus - Current drawing status (see drawingStatuses).
+     * @property {boolean} _pristine - True if the component has not been updated since last render.
+     * @property {boolean} isRendering - True if a render is currently in progress.
+     * @property {number|null} rafId - ID of the scheduled animation frame for rendering, or null.
+     * @property {string|null} originalVisibility - Stores the original CSS visibility before rendering.
+     * @property {object} params - Stores the current attributes/properties for rendering.
+     * @property {Promise<void>} updateComplete - Promise resolved when the current update/render is complete.
+     * @property {string[]} permission - List of required permissions (from 'permission' attribute).
+     * @property {boolean} isPermissionCheck - Whether permission checking is enabled (from 'permission-check' attribute).
+     * @property {boolean} noShow - Whether the element should be hidden (from 'no-show' attribute).
+     * @property {string|undefined} isShadowRoot - Value of the 'shadow' attribute, if present.
+     * @property {boolean} hasShadowRoot - True if the 'shadow' attribute is present.
+     * @property {string} shadowType - Type of shadow root ('open' by default).
+     * @property {object} store - Reference to the global store instance.
+     * @property {object} defaultStoreActions - Default store actions for arrays and objects.
+     * @property {string[]|undefined} removeClassAfterConnect - Classes to remove after connect (from 'remove-class-after-connect' attribute).
+     * @property {object} dependencies - Registered component dependencies.
+     * @property {HTMLElement|ShadowRoot} context - The rendering context (shadow root or element itself).
+     */
+    drawingStatuses: {
+        CREATED: number;
+        ATTACHED: number;
+        BEGINING: number;
+        START: number;
+        DRAWING: number;
+        DONE: number;
+        DISCONNECTED: number;
+    };
+    rafId: number;
+    params: {};
+    updateComplete: Promise<any>;
+    finisPromise: (value: any) => void;
+    rejectPromise: (reason?: any) => void;
+    get drawingStatus(): number;
+    /**
+     * Sets the value of the 'permission' attribute.
+     * @param {string[]} value The value to set for the 'permission' attribute.
+     */
+    set permission(value: string[]);
+    /**
+     * Gets the value of the 'permission-check' attribute.
+     * @returns {string[]} The value of the 'permission' attribute.
+     */
+    get permission(): string[];
+    /**
+     * Sets the 'permission-check' attribute.
+     * @param {boolean} value The value to set for the 'permission-check' attribute.
+     */
+    set isPermissionCheck(value: boolean);
+    /**
+     * Checks if the 'permission-check' attribute is present.
+     * @returns {boolean} True if the 'permission-check' attribute is present.
+     */
+    get isPermissionCheck(): boolean;
+    set noShow(value: boolean);
+    /**
+     * Checks if the 'show' attribute is present.
+     * @returns {boolean} True if the 'show' attribute is present.
+     */
+    get noShow(): boolean;
+    /**
+     * Sets the 'shadow' attribute.
+     * @param {string} value The value to set for the 'shadow' attribute.
+     */
+    set isShadowRoot(value: string);
+    get isShadowRoot(): string;
+    /**
+     * Checks if the 'shadow' attribute is present.
+     * @returns {boolean} True if the 'shadow' attribute is present.
+     */
+    get hasShadowRoot(): boolean;
+    /**
+     * Gets the value of the 'shadow' attribute or 'open' if not set.
+     * @returns {string} The value of the 'shadow' attribute or 'open'.
+     */
+    get shadowType(): string;
+    /**
+     * Gets the rendering context, either the shadow root or the component itself.
+     * @returns The rendering context.
+     */
+    get context(): any;
+    /**
+     * Gets the store instance.
+     * @returns {object} The store instance.
+     */
+    get store(): object;
+    /**
+     * @typedef {object} ArrayActions
+     * @property {Function} addAction - Adds an item to the array.
+     * @property {Function} deleteAction - Deletes an item from the array.
+     * @property {Function} loadAction - Loads an array.
+     * @property {Function} updateAction - Updates an item in the array.
+     * @property {Function} addManyAction - Adds many items to the array.
+     */
+    /**
+     * @typedef {object} ObjectActions
+     * @property {Function} addAction - Replace old object with new object
+     * @property {Function} deleteAction - Delete item based on key
+     * @property {Function} updateAction - Update item based on key
+     */
+    /**
+     * Gets the default store actions.
+     * @returns The default store actions for arrays and objects.
+     */
+    get defaultStoreActions(): typeof defaultStoreActions;
+    /**
+     * Gets the classes to be removed after the component is connected.
+     * @returns An array of class names to remove.
+     */
+    get removeClassAfterConnect(): string[];
+    /**
+     * Sets the component dependencies.
+     * @param value The dependencies to set.
+     */
+    set dependencies(value: {});
+    /**
+     * Gets the component dependencies.
+     * @returns The component dependencies.
+     */
+    get dependencies(): {};
+    /**
+     * Defines component dependencies by registering custom elements.
+     */
+    defineDependencies(): void;
+    /**
+     * Hook for extending behavior before drawing the component.
+     * @param context The rendering context, usually the element's shadow root or main DOM element.
+     * @param appStoreObj The global application store for managing state.
+     * @param params Additional parameters or attributes for rendering the component.
+     */
+    beforeDraw(context: any, appStoreObj: any, params: any): void;
+    /**
+     * Renders the component within the provided context.
+     * @param context The rendering context, usually the element's shadow root or main DOM element.
+     * @param appStoreObj
+     * @param params Additional parameters or attributes for rendering the component.
+     * @returns This implementation does not render anything and returns `null`.
+     * @description
+     * The `draw` method is responsible for rendering the component's content.
+     * Override this method in subclasses to define custom rendering logic.
+     * @example
+     * class MyComponent extends WJElement {
+     *   draw(context, appStoreObj, params) {
+     *     const div = document.createElement('div');
+     *     div.textContent = 'Hello, world!';
+     *     context.appendChild(div);
+     *   }
+     * }
+     */
+    draw(context: any, appStoreObj: any, params: any): any;
+    /**
+     * Renders the component within the provided context.
+     * @param context The rendering context, usually the element's shadow root or main DOM element.
+     * @param appStore The global application store for managing state.
+     * @param params Additional parameters or attributes for rendering the component.
+     * @returns This implementation does not render anything and returns `null`.
+     * @description
+     * The `draw` method is responsible for rendering the component's content.
+     * Override this method in subclasses to define custom rendering logic.
+     * @example
+     * class MyComponent extends WJElement {
+     *   draw(context, appStore, params) {
+     *     const div = document.createElement('div');
+     *     div.textContent = 'Hello, world!';
+     *     context.appendChild(div);
+     *   }
+     * }
+     */
+    draw(context: any, appStore: any, params: any): any;
+    /**
+     * Hook for extending behavior after drawing the component.
+     * @param context The rendering context, usually the element's shadow root or main DOM element.
+     * @param appStoreObj The global application store for managing state.
+     * @param params Additional parameters or attributes for rendering the component.
+     */
+    afterDraw(context: any, appStoreObj: any, params: any): void;
+    /**
+     * Lifecycle method invoked when the component is connected to the DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Initializes the component, setting up attributes and rendering.
+     * @param [force] Whether to force initialization.
+     * @returns A promise that resolves when initialization is complete.
+     */
+    initWjElement: (force?: boolean) => Promise<any>;
+    /**
+     * Sets up attributes and event listeners for the component.
+     * This method retrieves all custom events defined for the component
+     * and adds event listeners for each of them. When an event is triggered,
+     * it calls the corresponding method on the host element.
+     */
+    setupAttributes(): void;
+    /**
+     * Hook for extending behavior before disconnecting the component.
+     */
+    beforeDisconnect(): void;
+    /**
+     * Hook for extending behavior after disconnecting the component.
+     */
+    afterDisconnect(): void;
+    /**
+     * Hook for extending behavior before redrawing the component.
+     */
+    beforeRedraw(): void;
+    /**
+     * Cleans up resources and event listeners for the component.
+     */
+    componentCleanup(): void;
+    /**
+     * Lifecycle method invoked when the component is disconnected from the DOM.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Lifecycle method invoked when an observed attribute changes.
+     * @param name The name of the attribute that changed.
+     * @param old The old value of the attribute.
+     * @param newName The new value of the attribute.
+     */
+    attributeChangedCallback(name: any, old: any, newName: any): void;
+    refresh(): void;
+    stopRenderLoop(): void;
+    /**
+     * Displays the component's content, optionally forcing a re-render.
+     * @param [force] Whether to force a re-render.
+     * @returns A promise that resolves when the display is complete.
+     */
+    display(force?: boolean): Promise<any>;
+    template: any;
+    /**
+     * Renders the component's content.
+     */
+    render(): Promise<void>;
+    /**
+     * Sanitizes a given name by converting it from kebab-case to camelCase.
+     * @param {string} name The name in kebab-case format (e.g., "example-name").
+     * @returns {string} The sanitized name in camelCase format (e.g., "exampleName").
+     * @example
+     * sanitizeName('example-name');
+     * @example
+     * sanitizeName('my-custom-component');
+     */
+    sanitizeName(name: string): string;
+    /**
+     * Checks if a property on an object has a getter or setter method defined.
+     * @param {object} obj The object on which the property is defined.
+     * @param {string} property The name of the property to check.
+     * @returns {object} An object indicating the presence of getter and setter methods.
+     * @property {Function|null} hasGetter The getter function if it exists, otherwise `null`.
+     * @property {Function|null} hasSetter The setter function if it exists, otherwise `null`.
+     * @example
+     * const obj = {
+     *   get name() { return 'value'; },
+     *   set name(val) { console.log(val); }
+     * };
+     * checkGetterSetter(obj, 'name');
+     * @example
+     * const obj = { prop: 42 };
+     * checkGetterSetter(obj, 'prop');
+     */
+    checkGetterSetter(obj: object, property: string): object;
+    /**
+     * Sets up property accessors for the component's attributes.
+     */
+    setUpAccessors(): void;
+    #private;
+}
+export let __esModule: string;
+export { Permissions, WjElementUtils, event };

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

@@ -0,0 +1,2 @@
+import { default as FileUpload } from './file-upload.element.js';
+export default FileUpload;