wj-elements 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/wje-copy-button/copy-button.element.d.ts

@@ -0,0 +1,89 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary CopyButton is a custom web component that extends WJElement.
+ * It provides a button that, when clicked, copies a specified text to the clipboard.
+ * The text to be copied can be specified through the `value` attribute.
+ * The CopyButton also supports keyboard interaction, copying the text when the space or enter key is pressed.
+ * @documentation https://elements.webjet.sk/components/copy-button
+ * @status stable
+ * @augments WJElement
+ * @attribute {string} for - The id of the element to copy content from.
+ * @attribute {string} value - The text to be copied.
+ * @slot - This is a default/unnamed slot.
+ * @csspart button - Styles the button element.
+ * @cssproperty --text-color - Controls the color of the text.
+ * @cssproperty --background-color - Controls the background color of the button.
+ * //@fires wje:copy-button - Dispatched when the button is clicked and the text is copied.
+ * @tag wje-copy-button
+ */
+export default class CopyButton extends WJElement {
+    /**
+     * Getter for the cssStyleSheet property.
+     * @returns {string} The CSS styles.
+     */
+    static get cssStyleSheet(): string;
+    /**
+     * Getter for the observedAttributes property.
+     * @returns {Array} An empty array.
+     */
+    static get observedAttributes(): any[];
+    timeout: number;
+    /**
+     * Setter for the value property.
+     * @param {string} value The value to be set.
+     */
+    set value(value: string);
+    /**
+     * Getter for the value property.
+     * @returns {string} The value of the value property.
+     */
+    get value(): string;
+    /**
+     * Draws the ColorPicker element.
+     * @returns {DocumentFragment} The created document fragment.
+     */
+    draw(): DocumentFragment;
+    icon: HTMLElement;
+    tooltip: HTMLElement;
+    /**
+     * Adds event listeners for the click, focus, and blur events.
+     */
+    afterDraw(): void;
+    /**
+     * Handles the click event.
+     * @param {Event} e The event object.
+     */
+    clicked: (e: Event) => void;
+    /**
+     * Handles the keydown event.
+     * @param {Event} e The event object.
+     */
+    keydown: (e: Event) => void;
+    /**
+     * Handles the focus event.
+     * @param {Event} e The event object.
+     */
+    focused: (e: Event) => void;
+    /**
+     * Handles the blur event.
+     * @param {Event} e The event object.
+     */
+    blurred: (e: Event) => void;
+    /**
+     * Handles the copied event.
+     * You can override this method to customize the behavior when the text is copied.
+     * @param {Event} e The event object.
+     */
+    copied: (e: Event) => void;
+    /**
+     * Copies the specified text or node.
+     * @param {HTMLElement} button The button element.
+     */
+    copy(button: HTMLElement): Promise<void>;
+    /**
+     * Copies the target content.
+     * @param {HTMLElement} content The content to be copied.
+     * @returns {Promise} A promise that resolves when the content is copied.
+     */
+    copyTarget(content: HTMLElement): Promise<any>;
+}

package/dist/wje-copy-button/service/service.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copy the node to the clipboard.
+ * @param node
+ * @returns {Promise<never>|Promise<void>}
+ */
+export function copyNode(node: any): Promise<never> | Promise<void>;
+/**
+ * Copy the text to the clipboard.
+ * @param text
+ * @returns {Promise<never>|Promise<void>}
+ */
+export function copyText(text: any): Promise<never> | Promise<void>;

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

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

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

@@ -0,0 +1,132 @@
+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;
+    set hiddenHeader(value: boolean);
+    get hiddenHeader(): boolean;
+    set hiddenFooter(value: boolean);
+    get hiddenFooter(): 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;
+    updateHasFooter(): void;
+}

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

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

package/dist/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/wje-dropdown/dropdown.d.ts

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

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

@@ -0,0 +1,108 @@
+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 or removes the 'portaled' attribute on the element.
+     * When the value is truthy, the attribute 'portaled' is added to the element.
+     * When the value is falsy, the attribute 'portaled' is removed from the element.
+     * @param {boolean} value Determines whether to add or remove the 'portaled' attribute.
+     */
+    set portaled(value: boolean);
+    /**
+     * Getter method for the `portaled` property.
+     * Checks if the `portaled` attribute is present on the element.
+     * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.
+     */
+    get portaled(): boolean;
+    /**
+     * Checks whether the element has the 'portaled' attribute.
+     * @returns {boolean} True if the element has the 'portaled' attribute, otherwise false.
+     */
+    get isPortaled(): boolean;
+    /**
+     * 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;
+    /**
+     * Adds event listeners for the mouseenter and mouseleave events.
+     */
+    afterDraw(): void;
+    popupHideCallback: (e: any) => void;
+    /**
+     * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.
+     * This works even when the menu is portaled, because we rely on the composed path.
+     */
+    onMenuItemClick: (e: any) => 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;
+    #private;
+}