wj-elements 0.1.190 → 0.1.191

package/dist/{form-associated-element-CaIxmEod.js → form-associated-element-o0UjvdUp.js}

@@ -27,7 +27,6 @@ class FormAssociatedElement extends WJElement {
    * @returns {string} The type of the input.
    */
   get type() {
-    console.log("LOCAL NAME", this.localName, this.getAttribute("type"));
     return this.getAttribute("type");
   }
   /**
@@ -170,6 +169,11 @@ class FormAssociatedElement extends WJElement {
     }
     errorMessageEl.textContent = internals.validationMessage;
   }
+  /**
+   * Checks the validity of the input by invoking custom validation logic
+   * and then verifying against internal validation rules.
+   * @returns {boolean} Returns true if the input is valid according to both custom validation and internal validation rules, otherwise false.
+   */
   checkValidity() {
     this.validate();
     return this.internals.checkValidity();
@@ -239,4 +243,4 @@ __publicField(FormAssociatedElement, "formAssociated", true);
 export {
   FormAssociatedElement as F
 };
-//# sourceMappingURL=form-associated-element-CaIxmEod.js.map
+//# sourceMappingURL=form-associated-element-o0UjvdUp.js.map

package/dist/form-associated-element-o0UjvdUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated-element-o0UjvdUp.js","sources":["../packages/internals/form-associated-element.js"],"sourcesContent":["import { default as WJElement, event } from \"../wje-element/element.js\";\n\nexport class FormAssociatedElement extends WJElement {\n  static formAssociated = true;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  /**\n   * Sets the 'name' attribute to the given value.\n   * @param {string} value The new value for the 'name' attribute.\n   */\n  set name(value) {\n    this.setAttribute('name', value);\n  }\n\n  /**\n   * Getter for the name attribute.\n   * @returns {string} The name of the input.\n   */\n  get name() {\n    return this.getAttribute('name');\n  }\n\n  /**\n   * Getter for the type attribute.\n   * @returns {string} The type of the input.\n   */\n  get type() {\n    return this.getAttribute(\"type\");\n  }\n\n  /**\n   * Sets or removes the 'required' attribute on the element.\n   * @param {boolean} value If true, adds the 'required' attribute. If false, removes the 'required' attribute.\n   */\n  set required(value) {\n    if (value) {\n      this.setAttribute('required', '');\n    } else {\n      this.removeAttribute('required');\n    }\n  }\n\n  /**\n   * Checks if the 'required' attribute is present on the element.\n   * @returns {boolean} `true` if the 'required' attribute is set, otherwise `false`.\n   */\n  get required() {\n    return this.hasAttribute('required');\n  }\n\n  /**\n   * Setter for the invalid attribute.\n   * @param {boolean} isInvalid Whether the input is invalid.\n   */\n  set invalid(isInvalid) {\n    if (isInvalid) this.setAttribute('invalid', '');\n    else this.removeAttribute('invalid');\n  }\n\n  /**\n   * Getter for the invalid attribute.\n   * @returns {boolean} Whether the attribute is present.\n   */\n  get invalid() {\n    return this.hasAttribute('invalid');\n  }\n\n  /**\n   * Set checked attribute.\n   * @param {boolean} value true if the toggle is checked, false otherwise\n   */\n  set disabled(value) {\n    if (value) {\n      this.setAttribute('disabled', '');\n    } else {\n      this.removeAttribute('disabled');\n    }\n  }\n\n  /**\n   * Get disabled attribute value.\n   * @returns {boolean} true if the toggle is disabled, false otherwise\n   */\n  get disabled() {\n    return this.hasAttribute('disabled');\n  }\n\n  /**\n   * Retrieves the form element associated with this object.\n   * @returns {HTMLFormElement|null} The associated form element, or null if there isn't one.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * Retrieves the validity state of the element by returning the validity object from the internal element.\n   * The validity object provides information on whether the element satisfies its validation constraints.\n   * @returns {ValidityState} The validity state object representing the element's validation constraints.\n   */\n  get validity() {\n    return this.internals.validity;\n  }\n\n  /**\n   * Retrieves the current validation message associated with the element.\n   * @returns {string} The validation message that describes why the element's value fails validity checks.\n   */\n  get validationMessage() {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * Indicates whether the element is a candidate for constraint validation.\n   * @returns {boolean} Returns true if the element will be validated during constraint validation, false otherwise.\n   */\n  get willValidate() {\n    return this.internals.willValidate;\n  }\n\n  /**\n   * Validates the input element associated with the component and updates its validity state\n   * and error messages based on the user's input and the current validation rules.\n   * @returns {void} This method does not return a value. It modifies the validity state\n   * internally and sets appropriate validation messages.\n   */\n  validate() {\n    const validState = this.input.validity;\n\n    if (!validState.valid) {\n      for (let state in validState) {\n        const attr = `message-${state.toString()}`;\n\n        if (validState[state]) {\n          this.validationError = state.toString();\n          let errorMessage = this.message;\n\n          // TODO this take error messages based on lang from operating system of user  should we implement custom translations based on app language ?\n          if (!this.hasAttribute('message'))\n            errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;\n\n          this.internals.setValidity({ [this.validationError]: true }, errorMessage, this.input);\n        }\n      }\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n\n  /**\n   * Propagates a validation event based on the validity state of the component.\n   *\n   * This method checks the validity status of the component and emits a custom\n   * event if the component is invalid. The event's name and additional details\n   * can be specified.\n   * @param {string} [eventName] The name of the event to dispatch when the component is invalid.\n   * @param {object} [detail] Additional detail to include in the dispatched event.\n   * @returns {void} This method does not return a value.\n   */\n  propagateValidation(eventName = 'invalid', detail = {}) {\n    const internals = this.internals;\n\n    this.invalid = !this.pristine && !internals.validity.valid;\n\n    if (this.invalid) {\n      event.dispatchCustomEvent(this, this.tagName.toLocaleLowerCase() + ':' + eventName, detail);\n    }\n  }\n\n  /**\n   * Displays an invalid message for the current element.\n   * If an error message element does not exist within the designated slot,\n   * it creates one and appends it to the slot. Updates the text content\n   * of the error message element with the validation message from the\n   * element's internals.\n   * @returns {void} This method does not return any value.\n   */\n  showInvalidMessage() {\n    const internals = this.internals;\n    const slot = this.querySelector(\"[slot='error']\");\n    let errorMessageEl = slot?.querySelector('[error-message]');\n\n    if (!errorMessageEl) {\n      const error = document.createElement('div');\n      error.setAttribute('error-message', '');\n      slot?.append(error);\n      errorMessageEl = error;\n    }\n\n    errorMessageEl.textContent = internals.validationMessage;\n  }\n\n  /**\n   * Checks the validity of the input by invoking custom validation logic\n   * and then verifying against internal validation rules.\n   * @returns {boolean} Returns true if the input is valid according to both custom validation and internal validation rules, otherwise false.\n   */\n  checkValidity() {\n    // zavolá tvoju vlastnú validáciu pred kontrolou internals\n    this.validate();\n    return this.internals.checkValidity();\n  }\n\n  /**\n   * Callback to handle the reset action for a form.\n   * Resets the value of the form control to its default value, updates the form value, and clears any validity states.\n   * @returns {void} Does not return a value.\n   */\n  formResetCallback() {\n    this.value = this.defaultValue;\n    this.internals.setFormValue(this.defaultValue);\n    this.internals.setValidity({});\n  }\n\n  /**\n   * Restores the form state by assigning the provided state value\n   * and updating the internal form value and validity.\n   * @param {object} state The state object containing the value to restore the form.\n   * @param {*} state.value The value to set for the form element.\n   * @returns {void} This method does not return any value.\n   */\n  formStateRestoreCallback(state) {\n    this.value = state.value;\n    this.internals.setFormValue(state.value);\n    this.internals.setValidity({});\n  }\n\n  /**\n   * Callback method to save the current state of a form.\n   * This method captures and returns the form's value property.\n   * @returns {object} An object containing the `value` property of the current form state.\n   */\n  formStateSaveCallback() {\n    return {\n      value: this.value\n    };\n  }\n\n  /**\n   * Toggles the disabled state of the component and updates corresponding attributes.\n   * @param {boolean} disabled Indicates whether the form should be marked as disabled.\n   * If true, the 'disabled' class is added, and the 'disabled' attribute is set.\n   * If false, both the class and attribute are removed.\n   * @returns {void}\n   */\n  formDisabledCallback(disabled) {\n    this.native?.classList.toggle('disabled', disabled);\n    this.toggleAttribute('disabled', disabled);\n  }\n\n  /**\n   * A lifecycle callback that is executed when the element is associated with a form.\n   * It updates the form's value field with the element's value and sets up an event\n   * listener to perform validation and propagate it whenever the form is submitted.\n   * @returns {void} Does not return any value.\n   */\n  formAssociatedCallback() {\n    if (this.form) {\n      this.internals.setFormValue(this.value);\n      this.form?.addEventListener('submit', () => {\n        this.validate();\n        this.propagateValidation();\n      });\n    }\n  }\n}"],"names":[],"mappings":"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"}

package/dist/light.css

@@ -392,7 +392,7 @@
     --wje-input-label-display: block;
     --wje-input-label-margin: 0;
     --wje-input-label-padding: 0;
-    --wje-input-label-line-height: 21px;
+    --wje-input-label-line-height: var(--wje-line-height-normal);
     --wje-input-label-font-size: var(--wje-font-size);
     --wje-input-required-symbol: '*';
 

package/dist/packages/internals/form-associated-element.d.ts

@@ -96,6 +96,11 @@ export class FormAssociatedElement extends WJElement {
      * @returns {void} This method does not return any value.
      */
     showInvalidMessage(): void;
+    /**
+     * Checks the validity of the input by invoking custom validation logic
+     * and then verifying against internal validation rules.
+     * @returns {boolean} Returns true if the input is valid according to both custom validation and internal validation rules, otherwise false.
+     */
     checkValidity(): boolean;
     /**
      * Callback to handle the reset action for a form.

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

@@ -64,11 +64,6 @@ export class Select extends FormAssociatedElement {
      * @description A reference to the input element, initially null.
      */
     input: HTMLElement | null;
-    /**
-     * @type {HTMLElement|null}
-     * @description A reference to the options wrapper element, initially null.
-     */
-    optionsWrapper: HTMLElement | null;
     /**
      * @type {HTMLElement|null}
      * @description A reference to the chips element, initially null.
@@ -85,7 +80,6 @@ export class Select extends FormAssociatedElement {
      */
     list: HTMLElement | null;
     _value: any[];
-    _selected: any[];
     _selectedOptions: any[];
     /**
      * An object representing component dependencies with their respective classes.
@@ -112,26 +106,6 @@ export class Select extends FormAssociatedElement {
         'wje-options': typeof Options;
         'wje-checkbox': typeof Checkbox;
     };
-    /**
-     * 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[];
-    /**
-     * 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.
-     */
-    set validateOnChange(value: boolean);
-    /**
-     * Getter for the validateOnChange attribute.
-     * @returns {boolean} Whether the attribute is present.
-     */
-    get validateOnChange(): boolean;
     /**
      * Sets the maximum number of options allowed.
      * @param { number | object} value The value to set as the maximum number of options.
@@ -231,79 +205,80 @@ export class Select extends FormAssociatedElement {
      */
     draw(): DocumentFragment;
     findEl: HTMLElement;
+    displayInput: HTMLInputElement;
     /**
-     * Performs actions and binds events after the component's markup and state are initialized.
-     * Actions include setting up event listeners, managing option elements, handling focus and blur behaviors,
-     * synchronizing the selected options, and managing a find functionality for filtering options.
-     * @returns {void} Does not return a value. The method operates by updating the state and behavior of the component.
+     * Executes post-render logic for the custom element.
+     * This includes validation, event listener registration, managing custom attributes, and
+     * handling options initialization for the component.
+     * @returns {void} This method does not return any value.
      */
     afterDraw(): void;
     pristine: boolean;
     /**
-     * Handles the option change event.
-     * @param {Event} e The event.
+     * Handles the change event for an option element within a select-like component.
+     * This method processes user interactions with options and updates the state of the component,
+     * including selection management, validation, and UI updates. Behavior differs based on
+     * whether the component supports multiple selections.
+     * Key functionality:
+     * - Prevents the default behavior, event propagation, and immediate propagation of the event.
+     * - Retrieves all options within the component.
+     * - If the component doesn't support multiple selection:
+     *   - Marks only the clicked option as selected and deselects others.
+     *   - Hides the option popup.
+     * - If the component supports multiple selection:
+     *   - Processes the clicked option without deselecting others.
+     * - Updates the selected options and triggers validation.
+     * - Marks the form state as non-pristine.
+     * - Propagates the validation state to other relevant parts of the component or system.
+     * @param {Event} e The event object representing the option change interaction.
      */
     optionChange: (e: Event) => void;
     /**
-     * Handles the selection and deselection of an option element.
-     * @param {HTMLElement} option The option element that was clicked.
-     * @param {boolean} [multiple] Indicates whether multiple selection is allowed.
+     * Handles the logic for processing the selection state of a clicked option element.
+     * @function processClickedOption
+     * @param {Element} option The option element that is clicked.
+     * @param {boolean} [multiple] A Boolean indicating whether multiple options can be selected. Defaults to false.
+     * Changes the selected state of the passed option and updates the selected options list.
+     * Checks if the option already has a "selected" attribute, toggles its state,
+     * and updates the internal selected options.
      */
-    processClickedOption: (option: HTMLElement, multiple?: boolean) => void;
-    /**
-     * Filters out a specified option from the `selectedOptions` array.
-     * This function removes an option from the `selectedOptions` array if its value
-     * matches the value of the option provided as an argument. It allows for dynamically
-     * updating the selected options by excluding the specified option.
-     * @param {object} option The option to be removed from the `selectedOptions` array.
-     * Should be an object containing a `value` property that is compared to the
-     * `value` property of objects in the `selectedOptions` array.
-     */
-    filterOutOption: (option: object) => void;
+    processClickedOption: (option: Element, multiple?: boolean) => void;
     /**
      * Returns all the options as HTML.
      * @returns {NodeList} The options as HTML.
      */
     getAllOptions(): NodeList;
     /**
-     * Handles the selection change.
-     * @param {Element[]} options The option that changed.
-     * @param {number} length The length of the selected options.
+     * Handles changes in the selection for a component, updating internal values, input fields,
+     * and visual presentation (like chips or slots) as per the given selection options.
+     * @param {Array|null} options The collection of selected option elements. If null, no options are selected.
+     * @param {number} length The total number of selected options.
+     * @returns {void}
      */
-    selectionChanged(options?: Element[], length?: number): void;
+    selectionChanged(options?: any[] | null, length?: number): void;
     /**
-     * Updates the selected options and their corresponding chips.
-     * @param {boolean} [silence] Determines whether to suppress the "wje-select:change" event.
-     * @returns {void}
-     * @description
-     * This method fetches the currently selected options and updates the `selectedOptions` array.
-     * It clears and rebuilds the chips representing the selected items in the UI.
-     * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.
-     * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.
-     * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.
-     * @example
-     * // Call the method and allow event dispatch
-     * selections();
-     * @example
-     * // Call the method without dispatching the event
-     * selections(true);
+     * Handles the logic for updating selections based on the current selected options,
+     * updating chips content, and dispatching change events if necessary.
+     * @param {boolean} [silence] If true, suppresses the dispatch of a custom change event.
+     * @returns {void} This method does not return a value.
      */
     selections(silence?: boolean): void;
     /**
-     * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.
-     * - If the number of selected items equals the maximum allowed, the counter element is removed.
-     * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.
+     * Updates the counter element to reflect the current state of selected values relative to the maximum allowed options.
+     * If the maximum options are selected, the counter element is removed. If it does not already exist and needs to be displayed, it is created.
+     * @returns {void} Does not return a value.
      */
     counter(): void;
     /**
-     * Returns a chip element.
-     * @param {Element} option The option to get the chip for.
-     * @returns {Element} The chip element.
+     * Creates and returns a chip element with specified properties and a label.
+     * @param {object} option The configuration object for the chip. Typically includes properties such as value and textContent to set up the chip's label and data.
+     * @returns {HTMLElement} The newly created chip element with a label and default properties.
      */
-    getChip(option: Element): Element;
+    getChip(option: object): HTMLElement;
     /**
-     * Handles the chip remove event.
-     * @param {Event} e The event.
+     * Handles the removal of a chip element from the DOM and updates the related state.
+     * @param {Event} e The event object triggered by the chip removal action.
+     * The target of the event is expected to be the chip element itself.
      */
     removeChip: (e: Event) => void;
     /**
@@ -325,44 +300,59 @@ export class Select extends FormAssociatedElement {
      */
     htmlSelectedItem(item: any): any;
     /**
-     * Adds an option to the select element.
-     * @param {any} optionData The data for the option to be added.
-     * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.
-     * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.
+     * Adds a new option to the component.
+     * @param {object} optionData The data used to create the new option.
+     * @param {boolean} [silent] Whether the addition should trigger events or not.
+     * @param {object} [map] Mapping of keys to identify value and text in the optionData.
+     * @param {string} [map.value] The key in optionData that represents the value of the option.
+     * @param {string} [map.text] The key in optionData that represents the text of the option.
+     * @returns {void}
      */
-    addOption(optionData: any, silent?: boolean, map?: object): void;
-    /**
-     * Adds options to the select element.
-     * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.
-     * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.
-     * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: "value", text: "text" }.
+    addOption(optionData: object, silent?: boolean, map?: {
+        value?: string;
+        text?: string;
+    }): void;
+    /**
+     * Adds one or more options to a collection. If the input is an array, it adds each option within the array.
+     * Otherwise, it adds a single option.
+     * @param {Array | object} optionsData The data representing the options to be added. It can be a single object or an array of objects.
+     * @param {boolean} [silent] Optional flag to determine if events or notifications should be suppressed while adding options.
+     * @param {object} [map] An optional mapping object specifying how to map data properties to value and text for the options.
+     * @param {string} [map.value] The property in the optionsData that represents the value of the option.
+     * @param {string} [map.text] The property in the optionsData that represents the text of the option.
+     * @returns {void}
      */
-    addOptions(optionsData: any[] | object, silent?: boolean, map?: object): void;
+    addOptions(optionsData: any[] | object, silent?: boolean, map?: {
+        value?: string;
+        text?: string;
+    }): void;
     /**
-     * Selects an option with the specified value.
+     * Selects an option from the available options within the component.
      * @param {string} value The value of the option to be selected.
-     * @param {boolean} [silent] Whether to suppress firing events.
+     * @param {boolean} [silent] Determines whether the selection should trigger notification or updates. Defaults to false.
+     * @returns {void} Does not return a value.
      */
     selectOption(value: string, silent?: boolean): void;
     /**
-     * Selects one or multiple options in the select element.
-     * @param {Array|any} values The value(s) of the option(s) to be selected.
-     * @param {boolean} [silent] Whether to trigger the change event or not.
+     * Selects multiple options based on the provided values. If a single value is provided, it selects that option.
+     * If an array of values is provided, it iterates through the array and selects each option.
+     * @param {any|any[]} values A single value or an array of values to be selected.
+     * @param {boolean} [silent] Determines whether the selection action should occur silently without triggering other side effects or events.
+     * @returns {void} This method does not return a value.
      */
-    selectOptions(values: any[] | any, silent?: boolean): void;
+    selectOptions(values: any | any[], silent?: boolean): void;
     /**
-     * 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}
+     * Clones and appends an icon with the "check" slot to the specified option element.
+     * @param {HTMLElement} option The target HTML element to which the cloned "check" icon will be appended.
+     * @returns {void} This method does not return a value, but it modifies the DOM by appending a cloned "check" icon to the provided option element.
      */
     optionCheckSlot(option: HTMLElement): 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.
-     * @param {Array} options The array of options to verify against.
-     * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.
+     * Clears all selected options and resets selections.
+     * The method ensures that all options are deselected, updates the internal state, validates the selections,
+     * propagates the validation status, and indicates invalid state if necessary.
+     * @returns {void} No value is returned by this method.
      */
-    areAllElementsInOptions(elements: any[], options: any[]): boolean;
     clearSelections(): void;
     #private;
 }

package/dist/wje-button.js

@@ -382,7 +382,6 @@ class Button extends WJElement {
       });
     if (this.type === "submit") {
       event.addListener(this, "click", "wje-button:submit", () => {
-        console.log("submit", this.internals_.form);
         event.dispatchCustomEvent(this.internals_.form, "submit", {});
       });
     }

package/dist/wje-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n    /**\n     * Button constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals_ = this.attachInternals();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    /**\n     * Properties of the element Button.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value || 'default');\n    }\n\n    /**\n     * Get color of the Button element.\n     * @returns {string|string}\n     */\n    get color() {\n        return this.getAttribute('color') || 'default';\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set caret(value) {\n        this.setAttribute('caret', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get caret() {\n        return this.hasAttribute('caret');\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n     * otherwise, it is removed from the element.\n     * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute as a boolean.\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set tooltip(value) {\n        this.setAttribute('tooltip', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get tooltip() {\n        return this.hasAttribute('tooltip');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set dialog(value) {\n        this.setAttribute('dialog', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {string|object}\n     */\n    get dialog() {\n        return this.getAttribute('dialog');\n    }\n\n    /**\n     * Set active state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set active(value) {\n        this.setAttribute('active', '');\n    }\n\n    /**\n     * Get active state of the Button element.\n     * @returns {boolean} active - The active state\n     */\n    get active() {\n        return this.hasAttribute('active');\n    }\n\n    /**\n     * Set disabled state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set disabled(value) {\n        this.removeAttribute('disabled');\n\n        if (value) {\n            this.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Get disabled state of the Button element.\n     * @returns {boolean} disabled - The disabled state\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set fill of the Button element.\n     * @param {string} value The value to set\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Get fill of the Button element.\n     * @returns {string} fill - The fill value\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'solid';\n    }\n\n    /**\n     * Set outline state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set outline(value) {\n        this.setAttribute('outline', '');\n    }\n\n    /**\n     * Get outline state of the Button element.\n     * @returns {boolean} outline - The outline state\n     */\n    get outline() {\n        return this.hasAttribute('outline');\n    }\n\n    /**\n     * Set stop propagation state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set stopPropagation(value) {\n        this.setAttribute('stop-propagation', bool(value));\n    }\n\n    /**\n     * Get stop propagation state of the Button element.\n     * @returns {boolean} stopPropagation - The stop propagation state\n     */\n    get stopPropagation() {\n        return bool(this.getAttribute('stop-propagation'));\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    /**\n     * Class name for the Button element\n     * @type {string}\n     */\n    className = 'Button';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Button element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n     */\n    static get observedAttributes() {\n        return ['disabled', 'color'];\n    }\n\n    /**\n     * @summary A static property that indicates whether the custom element is form-associated or not.\n     * Form-associated custom elements are elements that can participate in form submission.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function sets the internal `_form` property to the associated form.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this._form = form;\n    }\n\n    /**\n     * @summary Callback function that is called when the form-associated state of the custom element changes.\n     * This function updates the 'disabled' attribute of the element based on the new state.\n     * @param {boolean} disabled The new form-associated state.\n     */\n    formDisabledCallback(disabled) {\n        if (disabled) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Button element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n        if (this.hasAttribute('href')) {\n            native.setAttribute('href', this.getAttribute('href'));\n        } else {\n            if (this.type === 'submit') {\n                native.setAttribute('type', 'submit');\n            }\n        }\n\n        native.classList.add('native-button');\n        native.setAttribute('part', 'native');\n\n        this.classList.remove('wje-button-disabled');\n\n        if (this.disabled) native.classList.add('wje-button-disabled');\n\n        if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n        if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n        if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n        if (this.outline) native.classList.add('wje-outline');\n\n        if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n        if (this.size) native.classList.add('wje-button-' + this.size);\n\n        if (\n            (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n            this.hasAttribute('only-caret')\n        ) {\n            let i = document.createElement('wje-icon');\n            i.style.setProperty('--wje-icon-size', '14px');\n            i.setAttribute('slot', 'caret');\n            i.setAttribute('name', 'chevron-down');\n            i.setAttribute('part', 'caret');\n\n            this.appendChild(i);\n        }\n\n        if (this.active) {\n            this.classList.add('wje-active');\n            let i = document.createElement('wje-icon');\n            i.setAttribute('name', 'check');\n\n            this.appendChild(i);\n        }\n\n        native.classList.add('wje-color-' + this.color, 'wje-color');\n\n        let span = document.createElement('span');\n        span.setAttribute('part', 'inner');\n        span.classList.add('button-inner');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'icon-only');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'start');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'end');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'caret');\n        span.appendChild(slot);\n\n        this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n        if (this.hasToggle) {\n            this.slotToggle = document.createElement('slot');\n            this.slotToggle.setAttribute('name', 'toggle');\n\n            span.appendChild(this.slotToggle);\n        }\n\n        native.appendChild(span);\n\n        if (this.tooltip) {\n            let tooltip = document.createElement('wje-tooltip');\n            tooltip.setAttribute('content', this.getAttribute('tooltip'));\n            tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n            tooltip.appendChild(native);\n\n            fragment.appendChild(tooltip);\n        } else {\n            fragment.appendChild(native);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Button element.\n     */\n    afterDraw() {\n        if (this.hasAttribute('route')) {\n            this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        }\n\n        // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n        if (this.hasToggle) {\n            if (this.toggle === 'off') {\n                this.slotToggle.assignedNodes()[1].classList.add('show');\n                this.setAttribute('value', 'off');\n            } else {\n                this.slotToggle.assignedNodes()[0].classList.add('show');\n                this.setAttribute('value', 'on');\n            }\n        }\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if (this.hasAttribute('dialog')) {\n            event.addListener(this, 'click', null, this.eventDialogOpen);\n        } else {\n            event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n        }\n\n        if (this.hasToggle)\n            event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n                stopPropagation: this.stopPropagation,\n            });\n\n        if (this.type === 'submit') {\n            event.addListener(this, 'click', 'wje-button:submit', () => {\n                console.log('submit', this.internals_.form);\n                event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n            });\n        }\n\n        if (this.type === 'reset') {\n            event.addListener(this, 'click', 'wje-button:reset', () => {\n                this.internals_.form.reset();\n            });\n        }\n    }\n\n    /**\n     * Before disconnect method for the Button element.\n     */\n    beforeDisconnect() {\n        // remove all events from the button\n        event.removeListener(this, 'click', null, this.eventDialogOpen);\n        event.removeListener(this, 'click', 'wje-button:click', null);\n        event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n        event.removeListener(this, 'click', null, this.#populateCustomEvent);\n        event.removeListener(this, 'click', 'wje-button:submit', null);\n        event.removeListener(this, 'click', 'wje-button:reset', null);\n\n        this.removeEventListener('click', this.eventDialogOpen);\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Event dialog open method for the Button element.\n     * @param {Event} e The event object\n     */\n    eventDialogOpen = (e) => {\n        event.dispatchCustomEvent(this, this.dialog);\n    };\n\n    /**\n     * Toggle states method for the Button element.\n     */\n    toggleStates = () => {\n        const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n        nodes.forEach((node, index) => {\n            if (node.classList.contains('show')) {\n                node.classList.remove('show');\n            } else {\n                node.classList.add('show');\n                this.setAttribute('value', index === 0 ? 'on' : 'off');\n            }\n        });\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n    /**\n     * Button constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals_ = this.attachInternals();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    /**\n     * Properties of the element Button.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value || 'default');\n    }\n\n    /**\n     * Get color of the Button element.\n     * @returns {string|string}\n     */\n    get color() {\n        return this.getAttribute('color') || 'default';\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set caret(value) {\n        this.setAttribute('caret', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get caret() {\n        return this.hasAttribute('caret');\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n     * otherwise, it is removed from the element.\n     * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute as a boolean.\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set tooltip(value) {\n        this.setAttribute('tooltip', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get tooltip() {\n        return this.hasAttribute('tooltip');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set dialog(value) {\n        this.setAttribute('dialog', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {string|object}\n     */\n    get dialog() {\n        return this.getAttribute('dialog');\n    }\n\n    /**\n     * Set active state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set active(value) {\n        this.setAttribute('active', '');\n    }\n\n    /**\n     * Get active state of the Button element.\n     * @returns {boolean} active - The active state\n     */\n    get active() {\n        return this.hasAttribute('active');\n    }\n\n    /**\n     * Set disabled state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set disabled(value) {\n        this.removeAttribute('disabled');\n\n        if (value) {\n            this.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Get disabled state of the Button element.\n     * @returns {boolean} disabled - The disabled state\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set fill of the Button element.\n     * @param {string} value The value to set\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Get fill of the Button element.\n     * @returns {string} fill - The fill value\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'solid';\n    }\n\n    /**\n     * Set outline state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set outline(value) {\n        this.setAttribute('outline', '');\n    }\n\n    /**\n     * Get outline state of the Button element.\n     * @returns {boolean} outline - The outline state\n     */\n    get outline() {\n        return this.hasAttribute('outline');\n    }\n\n    /**\n     * Set stop propagation state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set stopPropagation(value) {\n        this.setAttribute('stop-propagation', bool(value));\n    }\n\n    /**\n     * Get stop propagation state of the Button element.\n     * @returns {boolean} stopPropagation - The stop propagation state\n     */\n    get stopPropagation() {\n        return bool(this.getAttribute('stop-propagation'));\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    /**\n     * Class name for the Button element\n     * @type {string}\n     */\n    className = 'Button';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Button element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n     */\n    static get observedAttributes() {\n        return ['disabled', 'color'];\n    }\n\n    /**\n     * @summary A static property that indicates whether the custom element is form-associated or not.\n     * Form-associated custom elements are elements that can participate in form submission.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function sets the internal `_form` property to the associated form.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this._form = form;\n    }\n\n    /**\n     * @summary Callback function that is called when the form-associated state of the custom element changes.\n     * This function updates the 'disabled' attribute of the element based on the new state.\n     * @param {boolean} disabled The new form-associated state.\n     */\n    formDisabledCallback(disabled) {\n        if (disabled) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Button element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n        if (this.hasAttribute('href')) {\n            native.setAttribute('href', this.getAttribute('href'));\n        } else {\n            if (this.type === 'submit') {\n                native.setAttribute('type', 'submit');\n            }\n        }\n\n        native.classList.add('native-button');\n        native.setAttribute('part', 'native');\n\n        this.classList.remove('wje-button-disabled');\n\n        if (this.disabled) native.classList.add('wje-button-disabled');\n\n        if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n        if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n        if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n        if (this.outline) native.classList.add('wje-outline');\n\n        if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n        if (this.size) native.classList.add('wje-button-' + this.size);\n\n        if (\n            (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n            this.hasAttribute('only-caret')\n        ) {\n            let i = document.createElement('wje-icon');\n            i.style.setProperty('--wje-icon-size', '14px');\n            i.setAttribute('slot', 'caret');\n            i.setAttribute('name', 'chevron-down');\n            i.setAttribute('part', 'caret');\n\n            this.appendChild(i);\n        }\n\n        if (this.active) {\n            this.classList.add('wje-active');\n            let i = document.createElement('wje-icon');\n            i.setAttribute('name', 'check');\n\n            this.appendChild(i);\n        }\n\n        native.classList.add('wje-color-' + this.color, 'wje-color');\n\n        let span = document.createElement('span');\n        span.setAttribute('part', 'inner');\n        span.classList.add('button-inner');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'icon-only');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'start');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'end');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'caret');\n        span.appendChild(slot);\n\n        this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n        if (this.hasToggle) {\n            this.slotToggle = document.createElement('slot');\n            this.slotToggle.setAttribute('name', 'toggle');\n\n            span.appendChild(this.slotToggle);\n        }\n\n        native.appendChild(span);\n\n        if (this.tooltip) {\n            let tooltip = document.createElement('wje-tooltip');\n            tooltip.setAttribute('content', this.getAttribute('tooltip'));\n            tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n            tooltip.appendChild(native);\n\n            fragment.appendChild(tooltip);\n        } else {\n            fragment.appendChild(native);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Button element.\n     */\n    afterDraw() {\n        if (this.hasAttribute('route')) {\n            this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        }\n\n        // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n        if (this.hasToggle) {\n            if (this.toggle === 'off') {\n                this.slotToggle.assignedNodes()[1].classList.add('show');\n                this.setAttribute('value', 'off');\n            } else {\n                this.slotToggle.assignedNodes()[0].classList.add('show');\n                this.setAttribute('value', 'on');\n            }\n        }\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if (this.hasAttribute('dialog')) {\n            event.addListener(this, 'click', null, this.eventDialogOpen);\n        } else {\n            event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n        }\n\n        if (this.hasToggle)\n            event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n                stopPropagation: this.stopPropagation,\n            });\n\n        if (this.type === 'submit') {\n            event.addListener(this, 'click', 'wje-button:submit', () => {\n                event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n            });\n        }\n\n        if (this.type === 'reset') {\n            event.addListener(this, 'click', 'wje-button:reset', () => {\n                this.internals_.form.reset();\n            });\n        }\n    }\n\n    /**\n     * Before disconnect method for the Button element.\n     */\n    beforeDisconnect() {\n        // remove all events from the button\n        event.removeListener(this, 'click', null, this.eventDialogOpen);\n        event.removeListener(this, 'click', 'wje-button:click', null);\n        event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n        event.removeListener(this, 'click', null, this.#populateCustomEvent);\n        event.removeListener(this, 'click', 'wje-button:submit', null);\n        event.removeListener(this, 'click', 'wje-button:reset', null);\n\n        this.removeEventListener('click', this.eventDialogOpen);\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Event dialog open method for the Button element.\n     * @param {Event} e The event object\n     */\n    eventDialogOpen = (e) => {\n        event.dispatchCustomEvent(this, this.dialog);\n    };\n\n    /**\n     * Toggle states method for the Button element.\n     */\n    toggleStates = () => {\n        const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n        nodes.forEach((node, index) => {\n            if (node.classList.contains('show')) {\n                node.classList.remove('show');\n            } else {\n                node.classList.add('show');\n                this.setAttribute('value', index === 0 ? 'on' : 'off');\n            }\n        });\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA8Be,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1C,cAAc;AACV,UAAO;AANA;AAeX;AAAA;AAAA;AAAA;AAAA,wCAAe;AAAA,MACX,YAAY;AAAA,IACf;AAkND;AAAA;AAAA;AAAA;AAAA,qCAAY;AAqOZ;AAAA;AAAA;AAAA;AAAA,2CAAkB,CAAC,MAAM;AACrB,YAAM,oBAAoB,MAAM,KAAK,MAAM;AAAA,IAC9C;AAKD;AAAA;AAAA;AAAA,wCAAe,MAAM;AACjB,YAAM,QAAQ,KAAK,WAAW,cAAa,EAAG,OAAO,CAAC,SAAS,KAAK,aAAa,KAAK,YAAY;AAElG,YAAM,QAAQ,CAAC,MAAM,UAAU;AAC3B,YAAI,KAAK,UAAU,SAAS,MAAM,GAAG;AACjC,eAAK,UAAU,OAAO,MAAM;AAAA,QAC5C,OAAmB;AACH,eAAK,UAAU,IAAI,MAAM;AACzB,eAAK,aAAa,SAAS,UAAU,IAAI,OAAO,KAAK;AAAA,QACrE;AAAA,MACA,CAAS;AAAA,IACT;AAldQ,SAAK,aAAa,KAAK,gBAAiB;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAcI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,SAAS,SAAS;AAAA,EACrD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,MAAM,OAAO;AACb,QAAI,OAAO;AACP,WAAK,aAAa,SAAS,EAAE;AAAA,IACzC,OAAe;AACH,WAAK,gBAAgB,OAAO;AAAA,IACxC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO,OAAO;AACd,SAAK,aAAa,UAAU,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS;AACT,WAAO,KAAK,aAAa,QAAQ;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO,OAAO;AACd,SAAK,aAAa,UAAU,EAAE;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS;AACT,WAAO,KAAK,aAAa,QAAQ;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,gBAAgB,UAAU;AAE/B,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IAC5C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,EAAE;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,gBAAgB,OAAO;AACvB,SAAK,aAAa,oBAAoB,KAAK,KAAK,CAAC;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,kBAAkB;AAClB,WAAO,KAAK,KAAK,aAAa,kBAAkB,CAAC;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY,OAAO;AACnB,SAAK,aAAa,gBAAgB,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,cAAc;AACd,WAAO,KAAK,aAAa,cAAc;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,IAAI,wBAAwB;AACxB,UAAM,aAAa,MAAM,KAAK,KAAK,UAAU,EAAE,OAAO,CAAC,SAAS,KAAK,KAAK,WAAW,eAAe,CAAC;AAErG,WAAO,WAAW,OAAO,CAAC,KAAK,SAAS;AACpC,YAAM,MAAM,KAAK,KAAK,QAAQ,iBAAiB,EAAE;AACjD,UAAI,GAAG,IAAI,KAAK;AAEhB,aAAO;AAAA,IACV,GAAE,EAAE;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,YAAY,OAAO;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcI,uBAAuB,MAAM;AACzB,SAAK,QAAQ;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,qBAAqB,UAAU;AAC3B,QAAI,UAAU;AACV,WAAK,aAAa,YAAY,EAAE;AAAA,IAC5C,OAAe;AACH,WAAK,gBAAgB,UAAU;AAAA,IAC3C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK,aAAa,MAAM,IAAI,MAAM,QAAQ;AAC9E,QAAI,KAAK,aAAa,MAAM,GAAG;AAC3B,aAAO,aAAa,QAAQ,KAAK,aAAa,MAAM,CAAC;AAAA,IACjE,OAAe;AACH,UAAI,KAAK,SAAS,UAAU;AACxB,eAAO,aAAa,QAAQ,QAAQ;AAAA,MACpD;AAAA,IACA;AAEQ,WAAO,UAAU,IAAI,eAAe;AACpC,WAAO,aAAa,QAAQ,QAAQ;AAEpC,SAAK,UAAU,OAAO,qBAAqB;AAE3C,QAAI,KAAK,SAAU,QAAO,UAAU,IAAI,qBAAqB;AAE7D,QAAI,KAAK,QAAS,QAAO,UAAU,IAAI,gBAAgB,KAAK,OAAO;AAEnE,QAAI,KAAK,aAAa,OAAO,EAAG,QAAO,UAAU,IAAI,kBAAkB;AAEvE,QAAI,KAAK,aAAa,QAAQ,EAAG,QAAO,UAAU,IAAI,mBAAmB;AAEzE,QAAI,KAAK,QAAS,QAAO,UAAU,IAAI,aAAa;AAEpD,QAAI,KAAK,KAAM,QAAO,UAAU,IAAI,gBAAgB,KAAK,IAAI;AAE7D,QAAI,KAAK,KAAM,QAAO,UAAU,IAAI,gBAAgB,KAAK,IAAI;AAE7D,QACK,KAAK,iBAAiB,cAAc,EAAE,SAAS,KAAK,KAAK,aAAa,OAAO,KAC9E,KAAK,aAAa,YAAY,GAChC;AACE,UAAI,IAAI,SAAS,cAAc,UAAU;AACzC,QAAE,MAAM,YAAY,mBAAmB,MAAM;AAC7C,QAAE,aAAa,QAAQ,OAAO;AAC9B,QAAE,aAAa,QAAQ,cAAc;AACrC,QAAE,aAAa,QAAQ,OAAO;AAE9B,WAAK,YAAY,CAAC;AAAA,IAC9B;AAEQ,QAAI,KAAK,QAAQ;AACb,WAAK,UAAU,IAAI,YAAY;AAC/B,UAAI,IAAI,SAAS,cAAc,UAAU;AACzC,QAAE,aAAa,QAAQ,OAAO;AAE9B,WAAK,YAAY,CAAC;AAAA,IAC9B;AAEQ,WAAO,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAE3D,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,UAAU,IAAI,cAAc;AAEjC,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,WAAW;AACrC,SAAK,YAAY,IAAI;AAErB,WAAO,SAAS,cAAc,MAAM;AACpC,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,YAAY,IAAI;AAErB,WAAO,SAAS,cAAc,MAAM;AACpC,SAAK,YAAY,IAAI;AAErB,WAAO,SAAS,cAAc,MAAM;AACpC,SAAK,aAAa,QAAQ,KAAK;AAC/B,SAAK,YAAY,IAAI;AAErB,WAAO,SAAS,cAAc,MAAM;AACpC,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,YAAY,IAAI;AAErB,SAAK,YAAY,eAAe,QAAQ,MAAM,QAAQ;AAEtD,QAAI,KAAK,WAAW;AAChB,WAAK,aAAa,SAAS,cAAc,MAAM;AAC/C,WAAK,WAAW,aAAa,QAAQ,QAAQ;AAE7C,WAAK,YAAY,KAAK,UAAU;AAAA,IAC5C;AAEQ,WAAO,YAAY,IAAI;AAEvB,QAAI,KAAK,SAAS;AACd,UAAI,UAAU,SAAS,cAAc,aAAa;AAClD,cAAQ,aAAa,WAAW,KAAK,aAAa,SAAS,CAAC;AAC5D,cAAQ,aAAa,aAAa,KAAK,aAAa,mBAAmB,KAAK,KAAK;AACjF,cAAQ,YAAY,MAAM;AAE1B,eAAS,YAAY,OAAO;AAAA,IACxC,OAAe;AACH,eAAS,YAAY,MAAM;AAAA,IACvC;AAEQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,KAAK,aAAa,OAAO,GAAG;AAC5B,WAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAAA,IAC5F;AAGQ,QAAI,KAAK,WAAW;AAChB,UAAI,KAAK,WAAW,OAAO;AACvB,aAAK,WAAW,cAAe,EAAC,CAAC,EAAE,UAAU,IAAI,MAAM;AACvD,aAAK,aAAa,SAAS,KAAK;AAAA,MAChD,OAAmB;AACH,aAAK,WAAW,cAAe,EAAC,CAAC,EAAE,UAAU,IAAI,MAAM;AACvD,aAAK,aAAa,SAAS,IAAI;AAAA,MAC/C;AAAA,IACA;AAEQ,QAAI,KAAK,aAAa,cAAc,GAAG;AACnC,YAAM,YAAY,MAAM,SAAS,MAAM,sBAAK,0CAAoB;AAAA,IAC5E;AAEQ,QAAI,KAAK,aAAa,QAAQ,GAAG;AAC7B,YAAM,YAAY,MAAM,SAAS,MAAM,KAAK,eAAe;AAAA,IACvE,OAAe;AACH,YAAM,YAAY,MAAM,SAAS,oBAAoB,IAAI;AAAA,IACrE;AAEQ,QAAI,KAAK;AACL,YAAM,YAAY,MAAM,SAAS,qBAAqB,KAAK,cAAc;AAAA,QACrE,iBAAiB,KAAK;AAAA,MACtC,CAAa;AAEL,QAAI,KAAK,SAAS,UAAU;AACxB,YAAM,YAAY,MAAM,SAAS,qBAAqB,MAAM;AACxD,cAAM,oBAAoB,KAAK,WAAW,MAAM,UAAU,EAAE;AAAA,MAC5E,CAAa;AAAA,IACb;AAEQ,QAAI,KAAK,SAAS,SAAS;AACvB,YAAM,YAAY,MAAM,SAAS,oBAAoB,MAAM;AACvD,aAAK,WAAW,KAAK,MAAO;AAAA,MAC5C,CAAa;AAAA,IACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AAEf,UAAM,eAAe,MAAM,SAAS,MAAM,KAAK,eAAe;AAC9D,UAAM,eAAe,MAAM,SAAS,oBAAoB,IAAI;AAC5D,UAAM,eAAe,MAAM,SAAS,qBAAqB,KAAK,YAAY;AAC1E,UAAM,eAAe,MAAM,SAAS,MAAM,sBAAK,0CAAoB;AACnE,UAAM,eAAe,MAAM,SAAS,qBAAqB,IAAI;AAC7D,UAAM,eAAe,MAAM,SAAS,oBAAoB,IAAI;AAE5D,SAAK,oBAAoB,SAAS,KAAK,eAAe;AACtD,eAAK,sBAAL;AAAA,EACR;AAsCA;AAxee;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmeX,yBAAoB,WAAG;AACnB,OAAK;AAAA,IACH,IAAI,YAAY,KAAK,aAAa,EAAE,QAAQ,KAAK,uBAAuB,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,EACxG;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AA3OI,cA5PiB,QA4PV,kBAAiB;ACtR5B,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-checkbox.js

@@ -10,7 +10,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _internalValue;
 import WJElement from "./wje-element.js";
-import { F as FormAssociatedElement } from "./form-associated-element-CaIxmEod.js";
+import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
 import { event } from "./event.js";
 const styles = "/*\n[ Checkbox ]\n*/\n\n:host {\n    display: block;\n    margin-top: var(--wje-checkbox-margin-top);\n    margin-bottom: var(--wje-checkbox-margin-bottom);\n    margin-inline: var(--wje-checkbox-margin-inline);\n    line-height: 100%;\n    padding-left: 0;\n\n    label {\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n        position: relative;\n        padding-left: calc(var(--wje-checkbox-size) + 0.5rem);\n        min-height: var(--wje-checkbox-size);\n        margin-bottom: 0;\n        &:before {\n            content: '';\n            position: absolute;\n            width: var(--wje-checkbox-size);\n            height: var(--wje-checkbox-size);\n            left: 0;\n            -webkit-box-sizing: inherit;\n            box-sizing: border-box;\n            background-color: var(--wje-color-contrast-0);\n            border-width: 1px;\n            border-style: solid;\n            border-color: var(--wje-color-contrast-3);\n        }\n    }\n}\n\n.native-checkbox {\n    label {\n        &:hover {\n            color: var(--wje-color-contrast-11);\n        }\n\n        &:before {\n            border-radius: var(--wje-checkbox-border-radius);\n        }\n    }\n\n    input[type='checkbox'] {\n        position: absolute;\n        margin: 0;\n        z-index: -1;\n        width: 16px;\n        height: 16px;\n        opacity: 0;\n        display: none;\n        & + label {\n            &::after {\n                content: '';\n                position: absolute;\n                left: 0;\n                border-right: 0 solid transparent;\n                border-bottom: 0 solid transparent;\n                width: var(--wje-checkbox-size);\n                height: var(--wje-checkbox-size);\n                overflow: hidden;\n            }\n        }\n    }\n\n    input[type='checkbox']:checked + label::after {\n        content: '';\n        mask-image: var(--wje-checkbox-checkmark);\n        mask-size: var(--wje-checkbox-size);\n        background-color: var(--wje-color-primary-9);\n    }\n\n    /* Disabled */\n    input[type='checkbox'][disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-8);\n            opacity: 0.58;\n\n            &:before {\n                background: var(--wje-color-contrast-2);\n            }\n            &:after {\n                background: transparent;\n            }\n        }\n    }\n\n    input[type='checkbox']:checked[disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-8);\n            opacity: 0.58;\n\n            &:before {\n                background: var(--wje-color-contrast-2);\n            }\n            &:after {\n                background: var(--wje-color-contrast-5);\n            }\n        }\n    }\n\n    /* Indeterminate */\n    input[type='checkbox']:not(:checked):indeterminate {\n        & + label {\n            &:after {\n                content: '';\n                mask-image: var(--wje-checkbox-interminate);\n                mask-size: var(--wje-checkbox-size);\n                background-color: var(--wje-color-primary-9);\n            }\n        }\n    }\n}\n\n:host([invalid]) {\n    label{\n        color: var(--wje-input-color-invalid);\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\n:host([variant='circle']) {\n    label {\n        &:after {\n            border-radius: 99px;\n        }\n\n        &:before {\n            border-radius: 99px;\n        }\n    }\n}\n\n:host([placement='end']) {\n    label {\n        padding-left: 0;\n        padding-right: 26px;\n\n        &:before {\n            right: 0;\n            left: auto;\n        }\n    }\n\n    input[type='checkbox']:checked {\n        & + label {\n            position: relative;\n\n            &::after {\n                position: absolute;\n                right: 0;\n                left: auto;\n            }\n        }\n    }\n}\n\nslot[name='error'] {\n    display: none;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    top: 0;\n    width: max-content;\n    line-height: normal;\n    position: static;\n    background: transparent;\n    padding: 0.25rem 0;\n    left: auto;\n    transform: none;\n    color: var(--wje-input-color-invalid);\n    font-size: 12px;\n}\n\n/*Colors*/\n\n:host([color='primary']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-primary-9);\n        background-color: var(--wje-color-primary-9);\n    }\n}\n\n:host([color='complete']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-complete-9);\n        background-color: var(--wje-color-complete-9);\n    }\n}\n\n:host([color='success']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-success-9);\n        background-color: var(--wje-color-success-9);\n    }\n}\n\n:host([color='warning']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-warning-9);\n        background-color: var(--wje-color-warning-9);\n    }\n}\n\n:host([color='danger']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-danger-9);\n        background-color: var(--wje-color-danger-9);\n    }\n}\n\n:host([color='info']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-info-9);\n        background-color: var(--wje-color-info-9);\n    }\n}\n";
 class Checkbox extends FormAssociatedElement {

package/dist/wje-element.js

@@ -549,7 +549,7 @@ resolveRender_fn = function() {
     __privateSet(this, _drawingStatus, this.drawingStatuses.DONE);
     resolve();
   }).catch((e) => {
-    console.log(e);
+    console.error(e);
   });
 };
 /**