wj-elements 0.1.183 → 0.1.185

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

@@ -1,4 +1,4 @@
-import { default as WJElement } from '../wje-element/element.js';
+import { FormAssociatedElement } from '../internals/form-associated-element.js';
 import { default as Button } from '../wje-button/button.js';
 import { default as Popup } from '../wje-popup/popup.js';
 import { default as Icon } from '../wje-icon/icon.js';
@@ -8,36 +8,7 @@ import { default as Input } from '../wje-input/input.js';
 import { default as Option } from '../wje-option/option.js';
 import { default as Options } from '../wje-options/options.js';
 import { default as Checkbox } from '../wje-checkbox/checkbox.js';
-/**
- * `Select` is a custom web component that represents a select input.
- * @summary This element represents a select input.
- * @documentation https://elements.webjet.sk/components/select
- * @status stable
- * @augments {WJElement}
- * @slot - The default slot for the select.
- * @slot anchor - The slot for the anchor.
- * @slot arrow - The slot for the arrow.
- * @csspart native - The native select wrapper.
- * @csspart input - The input field.
- * @csspart clear - The clear button.
- * @property {Array} _selected - An array to store selected items.
- * @property {HTMLElement|null} counterEl - A reference to the counter element, initially null.
- * @property {ElementInternals} internals - The internal element API for managing state and attributes.
- * @property {number} maxOptions - The maximum number of options allowed.
- * @property {boolean} _wasOppened - Tracks whether the select element was previously opened, initially false.
- * @cssproperty [--wje-select-border-width=1px] - Specifies the width of the border around the select component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`).
- * @cssproperty [--wje-select-border-style=solid] - Defines the style of the border for the select component. Accepts standard CSS border styles, such as `solid`, `dashed`, or `dotted`.
- * @cssproperty [--wje-select-border-color=var(--wje-border-color)] - Sets the color of the border for the select component. Accepts any valid CSS color value, including color variables, named colors, and hex values.
- * @cssproperty [--wje-select-options-border-width=1px] - Specifies the width of the border for the select options dropdown. Accepts any valid CSS length unit.
- * @cssproperty [--wje-select-options-border-style=var(--wje-border-style)] - Defines the border style for the select options dropdown. Inherits from a defined CSS variable for consistency.
- * @cssproperty [--wje-select-options-border-color=var(--wje-border-color)] - Sets the border color for the select options dropdown. Accepts any valid CSS color value.
- * @cssproperty [--wje-select-background=var(--wje-background)] - Specifies the background color of the select component. Accepts any valid CSS color value.
- * @cssproperty [--wje-select-line-height=20px] - Defines the line height for the text within the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment.
- * @cssproperty [--wje-select-color=var(--wje-color)] - Sets the text color for the select component. Accepts any valid CSS color value.
- * @cssproperty [--wje-select-border-radius=var(--wje-border-radius-medium)] - Specifies the border radius for the select component.Determines the roundness of the corners and accepts any valid CSS length unit or variable.
- * @tag wje-select
- */
-export default class Select extends WJElement {
+export class Select extends FormAssociatedElement {
     /**
      * Returns the CSS styles for the component.
      * @static
@@ -50,32 +21,12 @@ export default class Select extends WJElement {
      * @returns {Array<string>}
      */
     static get observedAttributes(): Array<string>;
-    /**
-     * Whether the input is associated with a form.
-     * @type {boolean}
-     */
-    static formAssociated: boolean;
-    /**
-     * @type {Array}
-     * @description An array to store selected items.
-     */
-    _selected: any[];
     /**
      * @type {HTMLElement|null}
      * @description A reference to the counter element, initially null.
      * @private
      */
     private counterEl;
-    /**
-     * @type {ElementInternals}
-     * @description The internal element API for managing state and attributes.
-     * @private
-     * @readonly
-     * @constant
-     * @default {ElementInternals} this.attachInternals()
-     * @description Attaches the internals to the element.
-     */
-    private readonly internals;
     /**
      * @type {boolean}
      * @description Tracks whether the select element was previously opened, initially false.
@@ -133,7 +84,9 @@ export default class Select extends WJElement {
      * @description A reference to the list element, initially null.
      */
     list: HTMLElement | null;
-    selectedOptions: any[];
+    _value: any[];
+    _selected: any[];
+    _selectedOptions: any[];
     /**
      * An object representing component dependencies with their respective classes.
      * Each property in the object maps a custom component name (as a string key)
@@ -146,7 +99,6 @@ export default class Select extends WJElement {
      * @property {Function} 'wje-chip' Represents the Chip component class.
      * @property {Function} 'wje-input' Represents the Input component class.
      * @property {Function} 'wje-option' Represents the Option component class.
-     * @property {Function} 'wje-options' Represents the Options component class.
      * @property {Function} 'wje-checkbox' Represents the Checkbox component class.
      */
     dependencies: {
@@ -161,46 +113,31 @@ export default class Select extends WJElement {
         'wje-checkbox': typeof Checkbox;
     };
     /**
-     * Setter for the value attribute.
-     * @param {string} value The value to set.
+     * Sets the label value.
+     * @param {Array} value The selected value to set.
      */
-    set value(value: string);
+    set selected(value: any[]);
     /**
-     * Getter for the value attribute.
-     * @returns {object} The value of the attribute.
+     * Returns the selected value.
+     * @returns {Array} The selected value.
      */
-    get value(): object;
-    set required(value: boolean);
-    get required(): boolean;
+    get selected(): any[];
     /**
-     * Getter for the customErrorDisplay attribute.
-     * @returns {boolean} Whether the attribute is present.
+     * Sets the `validate-on-change` attribute on the element. When the attribute is present, it typically indicates that validation should occur when the value of the input changes.
+     * @param {boolean} value A boolean indicating whether to enable or disable the `validate-on-change` attribute.
      */
-    get customErrorDisplay(): boolean;
+    set validateOnChange(value: boolean);
     /**
      * Getter for the validateOnChange attribute.
      * @returns {boolean} Whether the attribute is present.
      */
     get validateOnChange(): boolean;
-    /**
-     * Sets the 'invalid' property of the element.
-     * When set to a truthy value, the 'invalid' attribute is added to the element.
-     * When set to a falsy value, the 'invalid' attribute is removed from the element.
-     * @param {boolean} value A boolean indicating whether the element is invalid.
-     */
-    set invalid(value: boolean);
-    /**
-     * Retrieves the value of the 'invalid' attribute.
-     * This method checks if the 'invalid' attribute is present on the element.
-     * @returns {boolean} Returns true if the 'invalid' attribute is present, otherwise false.
-     */
-    get invalid(): boolean;
     /**
      * Sets the maximum number of options allowed.
-     * @param {string | number | null} value The value to set as the maximum number of options.
+     * @param { number | object} value The value to set as the maximum number of options.
      * If null, the 'max-options' attribute will be removed.
      */
-    set maxOptions(value: string | number | null);
+    set maxOptions(value: number | object);
     /**
      * Retrieves the maximum number of options allowed.
      * Parses the value of the 'max-options' attribute from the element and converts it to a number.
@@ -208,36 +145,6 @@ export default class Select extends WJElement {
      * @returns {number} The maximum number of options, or 0 if the attribute is not set or invalid.
      */
     get maxOptions(): number;
-    /**
-     * Getter for the form attribute.
-     * @returns {HTMLFormElement} The form the input is associated with.
-     */
-    get form(): HTMLFormElement;
-    /**
-     * Getter for the name attribute.
-     * @returns {string} The name of the input.
-     */
-    get name(): string;
-    /**
-     * Getter for the type attribute.
-     * @returns {string} The type of the input.
-     */
-    get type(): string;
-    /**
-     * Getter for the validity attribute.
-     * @returns {ValidityState} The validity state of the input.
-     */
-    get validity(): ValidityState;
-    /**
-     * Getter for the validationMessage attribute.
-     * @returns {string} The validation message of the input.
-     */
-    get validationMessage(): string;
-    /**
-     * Getter for the willValidate attribute.
-     * @returns {boolean} Whether the input will be validated.
-     */
-    get willValidate(): boolean;
     /**
      * @summary Setter for the defaultValue attribute.
      * This method sets the 'value' attribute of the custom input element to the provided value.
@@ -253,24 +160,6 @@ export default class Select extends WJElement {
      * @returns {string} The default value of the input element.
      */
     get defaultValue(): string;
-    /**
-     * Sets the label value.
-     * @param {Array} value The selected value to set.
-     */
-    set selected(value: any[]);
-    /**
-     * Returns the selected value.
-     * @returns {Array} The selected value.
-     */
-    get selected(): any[];
-    /**
-     * Retrieves the complete list of options available for the component.
-     * The options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.
-     * If a `wje-options` element is present within the component, its loaded options are included in the merged list.
-     * In the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order.
-     * @returns {Array<object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.
-     */
-    get options(): Array<object>;
     /**
      * Sets the trigger value.
      * @param {string} value The trigger value to set.
@@ -281,8 +170,42 @@ export default class Select extends WJElement {
      * @returns {string} The trigger value.
      */
     get trigger(): string;
+    /**
+     * Sets the offset attribute for the element.
+     * @param {string} value The value to assign to the offset attribute.
+     */
     set offset(value: string);
+    /**
+     * Gets the value of the offset attribute of the current element.
+     * If the offset attribute is not present, returns a default value of '0'.
+     * @returns {string} The value of the offset attribute or the default value '0'.
+     */
     get offset(): string;
+    /**
+     * Sets the selected options for the object.
+     * @param {Array|object} value The new value for the selected options. It can be an array or object containing the selected options.
+     */
+    set selectedOptions(value: any[] | object);
+    /**
+     * Retrieves the selected options.
+     * @returns {Array} An array containing the currently selected options. If no options are selected, an empty array is returned.
+     */
+    get selectedOptions(): any[];
+    set lazy(value: boolean);
+    get lazy(): boolean;
+    /**
+     * Getter for the customErrorDisplay attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get customErrorDisplay(): boolean;
+    /**
+     * Retrieves the complete list of options available for the component.
+     * The options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.
+     * If a `wje-options` element is present within the component, its loaded options are included in the merged list.
+     * In the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order.
+     * @returns {Array<object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.
+     */
+    get options(): Array<object>;
     /**
      * Draws the component for the select.
      * @returns {DocumentFragment}
@@ -323,16 +246,6 @@ export default class Select extends WJElement {
      * @returns {NodeList} The options as HTML.
      */
     getAllOptions(): NodeList;
-    /**
-     * Returns the selected options as HTML.
-     * @returns {NodeList} The selected options as HTML.
-     */
-    getSelectedOptions(): NodeList;
-    /**
-     * Returns the selected options.
-     * @returns {Array} The selected options.
-     */
-    getSelected(): any[];
     /**
      * Handles the selection change.
      * @param {Element[]} options The option that changed.
@@ -386,6 +299,12 @@ export default class Select extends WJElement {
         value?: string;
         text?: string;
     }): HTMLElement;
+    /**
+     * Returns the provided item.
+     * @param {any} item The item to be returned.
+     * @returns {any} The same item that was passed as input.
+     */
+    htmlSelectedItem(item: any): any;
     /**
      * Adds an option to the select element.
      * @param {any} optionData The data for the option to be added.
@@ -412,69 +331,12 @@ export default class Select extends WJElement {
      * @param {boolean} [silent] Whether to trigger the change event or not.
      */
     selectOptions(values: any[] | any, silent?: boolean): void;
-    /**
-     * Returns the provided item.
-     * @param {any} item The item to be returned.
-     * @returns {any} The same item that was passed as input.
-     */
-    htmlSelectedItem(item: any): any;
     /**
      * Clones and appends an icon from a template with slot "check" to the given option element.
      * @param {HTMLElement} option The target option element where the "check" icon will be added.
      * @returns {void}
      */
     optionCheckSlot(option: HTMLElement): void;
-    /**
-     * Validates the selection of options in the select element.
-     * Checks if the element is required and no option is selected,
-     * in which case it sets a validation error with a custom message.
-     * If the element passes validation, it clears any existing validation errors.
-     *
-     * @return {void} Does not return a value.
-     */
-    validateSelect(): void;
-    /**
-     * Checks and updates the validation state of the component based on its current properties.
-     * If the component is invalid and a custom error display is enabled, it dispatches an 'invalid' event.
-     * @returns {void} This method does not return a value.
-     */
-    propagateValidation(): void;
-    showInvalidMessage(): void;
-    /**
-     * Lifecycle callback invoked when the custom element becomes associated with a form element.
-     * @param {HTMLFormElement} form The form element the custom element is associated with.
-     * @returns {void}
-     */
-    formAssociatedCallback(form: HTMLFormElement): void;
-    /**
-     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
-     * This method is responsible for resetting the value of the custom input element to its default value.
-     * It also resets the form value and validity state in the form internals.
-     * @function
-     */
-    formResetCallback(): void;
-    /**
-     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
-     * This method is responsible for restoring the value of the custom input element to its saved state.
-     * It also restores the form value and validity state in the form internals to their saved states.
-     * @param {object} state The saved state of the custom input element.
-     * @function
-     */
-    formStateRestoreCallback(state: object): void;
-    /**
-     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
-     * This method is responsible for saving the value of the custom input element.
-     * @returns {object} The saved state of the custom input element.
-     * @function
-     */
-    formStateSaveCallback(): object;
-    /**
-     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
-     * This method is not implemented yet.
-     * @param {boolean} disabled The new disabled state of the custom input element.
-     * @function
-     */
-    formDisabledCallback(disabled: boolean): void;
     /**
      * Checks if all elements in the `elements` array are present in the `options` array based on their `option` property.
      * @param {Array} elements The array of elements to check. Each element should have an `option` property.

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

@@ -1,10 +1,10 @@
-import { default as WJElement } from '../wje-element/element.js';
+import { FormAssociatedElement } from '../internals/form-associated-element.js';
 /**
  * `Textarea` is a custom web component that represents a textarea input.
  * @summary This element represents a textarea input.
  * @documentation https://elements.webjet.sk/components/textarea
  * @status stable
- * @augments WJElement
+ * @augments {FormAssociatedElement}
  * @csspart native - The native textarea wrapper.
  * @csspart input - The textarea input.
  * @csspart wrapper - The textarea wrapper.
@@ -22,38 +22,20 @@ import { default as WJElement } from '../wje-element/element.js';
  * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.
  * @tag wje-textarea
  */
-export default class Textarea extends WJElement {
+export default class Textarea extends FormAssociatedElement {
     /**
      * Returns the CSS styles for the component.
      * @static
      * @returns {CSSStyleSheet} The CSS stylesheet
      */
     static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Whether the input is associated with a form.
-     * @type {boolean}
-     */
-    static formAssociated: boolean;
     /**
      * Returns the list of attributes to observe for changes.
      * @static
      * @returns {Array<string>}
      */
     static get observedAttributes(): Array<string>;
-    /**
-     * Setter for the invalid attribute.
-     * @param {boolean} isInvalid Whether the input is invalid.
-     */
-    set invalid(isInvalid: boolean);
-    /**
-     * Getter for the invalid attribute.
-     * @returns {boolean} Whether the attribute is present.
-     */
-    get invalid(): boolean;
     pristine: boolean;
-    internals: ElementInternals;
-    observer: MutationObserver;
-    observeFunction: (mutations: any) => void;
     /**
      * Setter for the value attribute.
      * @param {string} value The value to set.
@@ -79,39 +61,8 @@ export default class Textarea extends WJElement {
      * @returns {boolean} Whether the attribute is present.
      */
     get validateOnChange(): boolean;
-    /**
-     * Getter for the form attribute.
-     * @returns {HTMLFormElement} The form the input is associated with.
-     */
-    get form(): HTMLFormElement;
-    /**
-     * Getter for the name attribute.
-     * @returns {string} The name of the input.
-     */
-    get name(): string;
-    /**
-     * Getter for the type attribute.
-     * @returns {string} The type of the input.
-     */
-    get type(): string;
-    /**
-     * Getter for the validity attribute.
-     * @returns {ValidityState} The validity state of the input.
-     */
-    get validity(): ValidityState;
-    /**
-     * Getter for the validationMessage attribute.
-     * @returns {string} The validation message of the input.
-     */
-    get validationMessage(): string;
-    /**
-     * Getter for the willValidate attribute.
-     * @returns {boolean} Whether the input will be validated.
-     */
-    get willValidate(): boolean;
     set placeholder(value: string);
     get placeholder(): string;
-    beforeDraw(): void;
     /**
      * Draws the component for the textarea.
      * @returns {DocumentFragment}
@@ -135,62 +86,4 @@ export default class Textarea extends WJElement {
      * @param {Event} e The event object.
      */
     counterFn: (e: Event) => void;
-    /**
-     * @summary Displays the validation message for the input.
-     * If the input has a slot named 'error', it sets the text content of the element with attribute 'error-message' inside the slot to the validation message.
-     * If the input does not have an 'error' slot, it sets the text content of the errorMessage property to the validation message.
-     */
-    showInvalidMessage(): void;
-    /**
-     * @summary Validates the input.
-     * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.
-     * For each invalid state, it constructs an attribute name and checks if the input has this attribute.
-     * If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.
-     * If the input does not have the attribute, it sets the error message to the default validation message of the input.
-     * It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.
-     * If the input is valid, it sets the validity in the form internals to an empty object.
-     */
-    validateInput(): void;
-    validationError: string;
-    /**
-     * @summary Propagates the validation state of the input.
-     * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.
-     * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.
-     */
-    propagateValidation(): void;
-    /**
-     * @summary Callback function that is called when the custom element is associated with a form.
-     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
-     * @param {HTMLFormElement} form The form the custom element is associated with.
-     */
-    formAssociatedCallback(form: HTMLFormElement): void;
-    /**
-     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
-     * This method is responsible for resetting the value of the custom input element to its default value.
-     * It also resets the form value and validity state in the form internals.
-     * @function
-     */
-    formResetCallback(): void;
-    /**
-     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
-     * This method is responsible for restoring the value of the custom input element to its saved state.
-     * It also restores the form value and validity state in the form internals to their saved states.
-     * @param {object} state The saved state of the custom input element.
-     * @function
-     */
-    formStateRestoreCallback(state: object): void;
-    /**
-     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
-     * This method is responsible for saving the value of the custom input element.
-     * @returns {object} The saved state of the custom input element.
-     * @function
-     */
-    formStateSaveCallback(): object;
-    /**
-     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
-     * This method is not implemented yet.
-     * @param {boolean} disabled The new disabled state of the custom input element.
-     * @function
-     */
-    formDisabledCallback(disabled: boolean): void;
 }

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

@@ -67,6 +67,7 @@ export default class Tree extends WJElement {
      * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.
      */
     getExpandCollapseIcon(item: HTMLElement, status: string): void;
+    getSlots(item: any, slotName: any): void;
     /**
      * Updates the state of a checkbox, syncing the state both upwards to parent elements
      * and downwards to child elements as necessary.

package/dist/{popup.element-Di4nHYij.js → popup.element-CVbbnTWI.js}

@@ -1371,7 +1371,7 @@ const computePosition = (reference, floating, options) => {
     platform: platformWithCache
   });
 };
-const styles = "/*\n[ WJ Popup ]\n*/\n\n:host {\n    --wje-popup-top: auto;\n    --wje-popup-left: auto;\n    display: flex; /* zmenene z contents na flex kvoli breadcrumbs v a jeho trom bodkam */\n}\n\n.native-popup {\n    position: absolute;\n    isolation: isolate;\n    z-index: 999;\n    left: var(--wje-popup-left);\n    top: var(--wje-popup-top);\n}\n.native-popup:not(.popup-active) {\n    display: none;\n}\n";
+const styles = "/*\n[ WJ Popup ]\n*/\n\n:host {\n    --wje-popup-top: auto;\n    --wje-popup-left: auto;\n    display: flex; /* zmenene z contents na flex kvoli breadcrumbs v a jeho trom bodkam */\n}\n\n.native-popup {\n    position: absolute;\n    isolation: isolate;\n    z-index: 999;\n    left: var(--wje-popup-left);\n    top: var(--wje-popup-top);\n}\n.native-popup:not(.popup-active) {\n    display: none;\n}\n\n.popup-loader.overlay {\n    position: absolute;\n    inset: 1px;\n    background: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1;\n}\n.popup-loader.fade-out {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    pointer-events: none;\n}";
 class Popup extends WJElement {
   /**
    * Creates an instance of Popup.
@@ -1398,20 +1398,33 @@ class Popup extends WJElement {
     });
     this._manual = false;
   }
+  set loader(value) {
+    if (value) {
+      this.setAttribute("loader", "");
+    } else {
+      this.removeAttribute("loader");
+    }
+  }
+  get loader() {
+    return this.hasAttribute("loader");
+  }
   /**
    * Sets the manual property of the popup.
    * @param {boolean} value The value to set.
    */
   set manual(value) {
-    this._manual = value;
+    if (value) {
+      this.setAttribute("manual", "");
+    } else {
+      this.removeAttribute("manual");
+    }
   }
   /**
    * Gets the manual property of the popup.
    * @returns {boolean} The value of the manual property.
    */
   get manual() {
-    if (this.hasAttribute("manual")) this._manual = true;
-    return this._manual;
+    return this.hasAttribute("manual");
   }
   /**
    * Returns the CSS styles for the component.
@@ -1426,27 +1439,15 @@ class Popup extends WJElement {
    * @static
    * @returns {Array<string>}
    */
-  // static get observedAttributes() {
-  //     return ['active'];
-  // }
+  static get observedAttributes() {
+    return [];
+  }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  // /**
-  //  * Called when an attribute changes.
-  //  */
-  // attributeChangedCallback(name, old, newName) {
-  //     // if (name === 'active') {
-  //     //     if (this.hasAttribute(name)) {
-  //     //         this.show();
-  //     //     } else {
-  //     //         this.hide();
-  //     //     }
-  //     // }
-  // }
   afterDisconnect() {
     var _a;
     event.removeListener(this.anchorEl, "click", this.manualCallback);
@@ -1471,13 +1472,20 @@ class Popup extends WJElement {
     native.setAttribute("part", "native");
     native.classList.add("native-popup");
     let slot = document.createElement("slot");
-    native.appendChild(slot);
-    native.appendChild(slotArrow);
-    fragment.appendChild(slotAnchor);
-    fragment.appendChild(native);
+    let loader = document.createElement("div");
+    loader.classList.add("popup-loader", "overlay");
+    loader.setAttribute("part", "loader");
+    loader.textContent = "Loading...";
+    console.log("LOADER", this.loader);
+    if (this.loader) native.append(loader);
+    native.append(slot);
+    native.append(slotArrow);
+    fragment.append(slotAnchor);
+    fragment.append(native);
     this.slotAnchor = slotAnchor;
     this.slotArrow = slotArrow;
     this.native = native;
+    this.loaderEl = loader;
     return fragment;
   }
   /**
@@ -1485,6 +1493,10 @@ class Popup extends WJElement {
    */
   afterDraw() {
     this.setAnchor();
+    this.addEventListener("wje-popup:content-ready", () => {
+      console.log("READY 1", this.loader);
+      this.markContentReady();
+    }, { once: true });
     if (this.hasAttribute("active")) this.show(false);
     if (!this.hasAttribute("active")) this.hide(false);
   }
@@ -1510,6 +1522,7 @@ class Popup extends WJElement {
     if (this.hasAttribute("active")) {
       this.hide();
     } else {
+      event.dispatchCustomEvent(this, "wje-popup:aftershow");
       this.show();
     }
   }
@@ -1584,6 +1597,11 @@ class Popup extends WJElement {
    */
   show(dispatchEvent = true) {
     var _a, _b, _c;
+    if (this.loader) {
+      this.native.classList.add("loading");
+      this.loaderEl.classList.remove("fade-out");
+      this.native.prepend(this.loaderEl);
+    }
     if (dispatchEvent) {
       event.dispatchCustomEvent(this, "wje-popup:show");
     }
@@ -1617,8 +1635,19 @@ class Popup extends WJElement {
       this.removeAttribute("active");
     }
   }
+  markContentReady() {
+    this.native.classList.remove("loading");
+    if (this.loader) {
+      this.loaderEl.classList.add("fade-out");
+      setTimeout(() => {
+        var _a;
+        (_a = this.loaderEl) == null ? void 0 : _a.remove();
+        this.loader = false;
+      }, 300);
+    }
+  }
 }
 export {
   Popup as P
 };
-//# sourceMappingURL=popup.element-Di4nHYij.js.map
+//# sourceMappingURL=popup.element-CVbbnTWI.js.map