wj-elements 0.1.161 → 0.1.162

package/dist/wje-select.js

@@ -11,10 +11,17 @@ import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import { P as Popup } from "./popup.element-AaduHP2r.js";
-const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    --wje-select-border-width: 1px;\n    --wje-select-border-style: solid;\n    --wje-select-border-color: var(--wje-border-color);\n\n    --wje-select-options-border-width: 1px;\n    --wje-select-options-border-style: var(--wje-border-style);\n    --wje-select-options-border-color: var(--wje-border-color);\n\n    --wje-select-background: var(--wje-background);\n    --wje-select-line-height: 20px;\n    --wje-select-color: var(--wje-color);\n    --wje-select-border-radius: var(--wje-border-radius-medium);\n\n    --wje-select-margin-bottom: 0.5rem;\n    margin-bottom: var(--wje-select-margin-bottom);\n\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.native-select {\n    &.default {\n        .wrapper {\n            display: block;\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        wje-label {\n            margin: 0;\n            display: block;\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease 0s;\n            line-height: var(--wje-select-line-height);\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    min-height: 28px;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background: var(--wje-select-background);\n    overflow: hidden;\n}\n\n.find {\n    --wje-input-border-radius: 0;\n    --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 0.5rem);\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.native-select {\n    &.default {\n        .wrapper {\n            display: block;\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        wje-label {\n            margin: 0;\n            display: block;\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease 0s;\n            line-height: var(--wje-select-line-height);\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    min-height: 28px;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background: var(--wje-select-background);\n    overflow: hidden;\n}\n\n.find {\n    --wje-input-border-radius: 0;\n    --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 0.5rem);\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n";
 class Select extends WJElement {
   /**
-   * Creates an instance of Select.
+   * Constructor for the Select class.
+   * @class
+   * @description Initializes the Select component.
+   * This constructor sets up the initial state of the component, including selected items, counter element, and internal element API.
+   * It also tracks whether the select element was previously opened.
+   * @class
+   * @augments {WJElement}
+   * @memberof Select
    */
   constructor() {
     super();
@@ -59,6 +66,17 @@ class Select extends WJElement {
     this._selected = [];
     this.counterEl = null;
     this.internals = this.attachInternals();
+    this._wasOppened = false;
+    this.native = null;
+    this.popup = null;
+    this.labelElement = null;
+    this.slotStart = null;
+    this.slotEnd = null;
+    this.input = null;
+    this.optionsWrapper = null;
+    this.chips = null;
+    this.clear = null;
+    this.list = null;
   }
   /**
    * Setter for the value attribute.
@@ -290,10 +308,21 @@ class Select extends WJElement {
       optionsWrapper.appendChild(find);
       this.findEl = find;
     }
+    if (this.hasAttribute("lazy")) {
+      event.addListener(popup, "wje-popup:show", null, (e) => {
+        if (this._wasOppened) return;
+        this._wasOppened = true;
+        const optionsElement = this.querySelector("wje-options");
+        optionsElement.setAttribute("attached", "");
+      });
+    } else {
+      const optionsElement = this.querySelector("wje-options");
+      optionsElement == null ? void 0 : optionsElement.setAttribute("attached", "");
+    }
     optionsWrapper.appendChild(list);
     wrapper.appendChild(inputWrapper);
-    popup.appendChild(wrapper);
     popup.appendChild(optionsWrapper);
+    popup.appendChild(wrapper);
     if (this.trigger === "click") popup.setAttribute("manual", "");
     native.appendChild(popup);
     this.native = native;

package/dist/wje-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-select.js","sources":["../packages/wje-select/select.element.js","../packages/wje-select/select.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport Popup from '../wje-popup/popup.js';\nimport Icon from '../wje-icon/icon.js';\nimport Label from '../wje-label/label.js';\nimport Chip from '../wje-chip/chip.js';\nimport Input from '../wje-input/input.js';\nimport Option from '../wje-option/option.js';\nimport Options from '../wje-options/options.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Select` is a custom web component that represents a select input.\n * @summary This element represents a select input.\n * @documentation https://elements.webjet.sk/components/select\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the select.\n * @slot anchor - The slot for the anchor.\n * @slot arrow - The slot for the arrow.\n * @csspart native - The native select wrapper.\n * @csspart input - The input field.\n * @csspart clear - The clear button.\n * @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`).\n * @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`.\n * @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.\n * @cssproperty [--wje-select-options-border-width=1px] - Specifies the width of the border for the select options dropdown. Accepts any valid CSS length unit.\n * @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.\n * @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.\n * @cssproperty [--wje-select-background=var(--wje-background)] - Specifies the background color of the select component. Accepts any valid CSS color value.\n * @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.\n * @cssproperty [--wje-select-color=var(--wje-color)] - Sets the text color for the select component. Accepts any valid CSS color value.\n * @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.\n * @tag wje-select\n */\n\nexport default class Select extends WJElement {\n    /**\n     * Creates an instance of Select.\n     */\n    constructor() {\n        super();\n\n        this._selected = [];\n        this.counterEl = null;\n        this.internals = this.attachInternals();\n    }\n\n    dependencies = {\n        'wje-button': Button,\n        'wje-popup': Popup,\n        'wje-icon': Icon,\n        'wje-label': Label,\n        'wje-chip': Chip,\n        'wje-input': Input,\n        'wje-option': Option,\n        'wje-options': Options,\n    };\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        if (Array.isArray(value)) {\n            this.internals.setFormValue(JSON.stringify(value));\n        } else {\n            this.internals.setFormValue(value);\n        }\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.selected;\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\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     * 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 form attribute.\n     * @returns {HTMLFormElement} The form the input is associated with.\n     */\n    get form() {\n        return this.internals.form;\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.localName;\n    }\n\n    /**\n     * Getter for the validity attribute.\n     * @returns {ValidityState} The validity state of the input.\n     */\n    get validity() {\n        return this.internals.validity;\n    }\n\n    /**\n     * Getter for the validationMessage attribute.\n     * @returns {string} The validation message of the input.\n     */\n    get validationMessage() {\n        return this.internals.validationMessage;\n    }\n\n    /**\n     * Getter for the willValidate attribute.\n     * @returns {boolean} Whether the input will be validated.\n     */\n    get willValidate() {\n        return this.internals.willValidate;\n    }\n\n    /**\n     * @summary Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * @summary Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Sets the label value.\n     * @param {Array} value The selected value to set.\n     */\n    set selected(value) {\n        this._selected = value;\n    }\n\n    /**\n     * Returns the selected value.\n     * @returns {Array} The selected value.\n     */\n    get selected() {\n        return this.getSelected();\n    }\n\n    /**\n     * Sets the trigger value.\n     * @param {string} value The trigger value to set.\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Returns the trigger value.\n     * @returns {string} The trigger value.\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    className = 'Select';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['active', 'value'];\n    }\n\n    /**\n     * Whether the input is associated with a form.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the select.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', this.placement ? 'wje-' + this.placement : 'wje-start');\n\n        // zakladny obalovac\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-select', this.variant || 'default');\n\n        // wrapper pre label a inputWrapper\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('wrapper');\n        wrapper.setAttribute('slot', 'anchor');\n\n        // label\n        let label = document.createElement('wje-label');\n        label.innerText = this.label || '';\n\n        // obalovac pre input\n        let inputWrapper = document.createElement('div');\n        inputWrapper.setAttribute('part', 'input-wrapper');\n        inputWrapper.classList.add('input-wrapper');\n\n        let slotStart = document.createElement('div');\n        slotStart.classList.add('slot-start');\n\n        let input = document.createElement('input');\n        input.setAttribute('type', 'text');\n        input.setAttribute('part', 'input');\n        input.setAttribute('autocomplete', 'off');\n        input.setAttribute('readonly', '');\n        input.setAttribute('placeholder', this.placeholder || '');\n\n        let slotEnd = document.createElement('div');\n        slotEnd.classList.add('slot-end');\n\n        let arrow = document.createElement('wje-icon');\n        arrow.setAttribute('name', 'chevron-down');\n        arrow.setAttribute('slot', 'arrow');\n\n        let chips = document.createElement('div');\n        chips.classList.add('chips');\n        chips.innerText = this.placeholder || '';\n\n        // obalovac pre option a find\n        let optionsWrapper = document.createElement('div');\n        optionsWrapper.setAttribute('part', 'options-wrapper');\n        optionsWrapper.classList.add('options-wrapper');\n        optionsWrapper.style.setProperty('height', this.maxHeight || 'auto');\n\n        let list = document.createElement('div');\n        list.classList.add('list');\n\n        let slot = document.createElement('slot');\n\n        let clear = document.createElement('wje-button');\n        clear.setAttribute('fill', 'link');\n        clear.setAttribute('part', 'clear');\n\n        let clearIcon = document.createElement('wje-icon');\n        clearIcon.setAttribute('name', 'x');\n\n        clear.appendChild(clearIcon);\n\n        // vytvorime popup\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', 'bottom-start');\n        popup.setAttribute('manual', '');\n        popup.setAttribute('size', '');\n\n        if (this.hasAttribute('disabled')) popup.setAttribute('disabled', '');\n\n        if (this.variant === 'standard') {\n            if (this.hasAttribute('label')) native.appendChild(label);\n        } else {\n            wrapper.appendChild(label);\n        }\n\n        inputWrapper.appendChild(slotStart);\n        inputWrapper.appendChild(input);\n        if (this.hasAttribute('multiple')) inputWrapper.appendChild(chips);\n\n        if (this.hasAttribute('clearable')) inputWrapper.appendChild(clear);\n\n        inputWrapper.appendChild(slotEnd);\n        inputWrapper.appendChild(arrow);\n\n        list.appendChild(slot);\n\n        if (this.hasAttribute('find')) {\n            let find = document.createElement('wje-input');\n            find.setAttribute('variant', 'standard');\n            find.setAttribute('placeholder', 'Hľadať');\n            find.classList.add('find');\n\n            optionsWrapper.appendChild(find);\n\n            this.findEl = find;\n        }\n\n        optionsWrapper.appendChild(list);\n\n        wrapper.appendChild(inputWrapper);\n\n        popup.appendChild(wrapper);\n        popup.appendChild(optionsWrapper);\n\n        if (this.trigger === 'click') popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        this.native = native;\n        this.popup = popup;\n        this.labelElement = label;\n        this.slotStart = slotStart;\n        this.slotEnd = slotEnd;\n        this.input = input;\n        this.optionsWrapper = optionsWrapper;\n        this.chips = chips;\n        this.clear = clear;\n        this.list = list;\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.addEventListener('wje-option:change', this.optionChange);\n\n        this.clear.addEventListener('wje-button:click', (e) => {\n            this.getAllOptions().forEach((option) => {\n                option.selected = false;\n                option.removeAttribute('selected');\n            });\n            this.selections();\n\n            e.stopPropagation();\n        });\n\n        this.selections(true);\n\n        this.list.addEventListener('wje-options:load', (e) => {\n            this.list.scrollTo(0, 0);\n        });\n\n        // skontrolujeme ci ma select atribut find\n        if (this.hasAttribute('find') && this.findEl instanceof HTMLElement) {\n            event.addListener(this.findEl, 'keyup', '', (e) => {\n                // contains wj-options element with options\n                const optionsElement = this.querySelector('wje-options');\n                if (optionsElement && optionsElement.hasAttribute('lazy')) {\n                    // pass search value to wj-options element and infinite scroll will handle the rest\n                    optionsElement.setAttribute('search', e.target.value);\n                } else {\n                    let value = e.target.value.trim().toLowerCase();\n\n                    this.getAllOptions().forEach((option) => {\n                        if (option.textContent.trim().toLowerCase().includes(value)) option.style.display = 'block';\n                        else option.style.display = 'none';\n                    });\n                }\n            });\n        }\n    }\n\n    /**\n     * Handles the option change event.\n     * @param {Event} e The event.\n     */\n    optionChange = (e) => {\n        let allOptions = this.getAllOptions();\n\n        if (!this.hasAttribute('multiple')) {\n            allOptions.forEach((option) => {\n                option.selected = false;\n                option.removeAttribute('selected');\n            });\n            this.popup.removeAttribute('active');\n        }\n\n        e.target.selected = !e.target.hasAttribute('selected');\n\n        this.selections();\n    };\n\n    /**\n     * Returns all the options as HTML.\n     * @returns {NodeList} The options as HTML.\n     */\n    getAllOptions() {\n        return this.querySelectorAll('wje-option');\n    }\n\n    /**\n     * Returns the selected options as HTML.\n     * @returns {NodeList} The selected options as HTML.\n     */\n    getSelectedOptions() {\n        return this.querySelectorAll('wje-option[selected]');\n    }\n\n    /**\n     * Returns the selected options.\n     * @returns {Array} The selected options.\n     */\n    getSelected() {\n        let selectedOptions = this.getSelectedOptions();\n\n        selectedOptions = Array.isArray(selectedOptions) ? selectedOptions : Array.from(selectedOptions);\n\n        selectedOptions = selectedOptions.map((option) => {\n            return {\n                value: option.value,\n                text: option.textContent.trim(),\n            };\n        });\n\n        return selectedOptions;\n    }\n\n    /**\n     * Handles the selection change.\n     * @param {Element} option The option that changed.\n     * @param {number} length The length of the selected options.\n     */\n    selectionChanged(option = null, length = 0) {\n        if (this.hasAttribute('multiple')) {\n            this.value = this.selectedOptions.map((el) => el.value).reverse();\n\n            if (this.placeholder && length === 0) {\n                this.chips.innerHTML = this.placeholder;\n                this.input.value = '';\n            } else {\n                if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {\n                    this.counter();\n                } else {\n                    if (option !== null) this.chips.appendChild(this.getChip(option));\n                }\n            }\n        } else {\n            let value = option?.textContent.trim() || '';\n            this.value = this.selectedOptions?.map((el) => el.value)?.at(0);\n            this.input.value = value;\n\n            if (option && option instanceof HTMLElement) {\n                this.slotStart.innerHTML = '';\n\n                if (option?.querySelector('[slot=start]')) {\n                    this.slotStart.appendChild(option?.querySelector('[slot=start]').cloneNode(true));\n                }\n\n                this.slotEnd.innerHTML = '';\n\n                if (option?.querySelector('[slot=end]')) {\n                    this.slotEnd.appendChild(option?.querySelector('[slot=end]').cloneNode(true));\n                }\n            }\n        }\n    }\n\n    /**\n     * Updates the selected options and their corresponding chips.\n     * @param {boolean} [silence] Determines whether to suppress the \"wje-select:change\" event.\n     * @returns {void}\n     * @description\n     * This method fetches the currently selected options and updates the `selectedOptions` array.\n     * It clears and rebuilds the chips representing the selected items in the UI.\n     * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.\n     * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.\n     * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.\n     * @example\n     * // Call the method and allow event dispatch\n     * selections();\n     * @example\n     * // Call the method without dispatching the event\n     * selections(true);\n     */\n    selections(silence = false) {\n        let options = this.getSelectedOptions();\n\n        this.selectedOptions = Array.isArray(options) ? options : Array.from(options);\n\n        if (this.selectedOptions.length >= +this.maxOptions) {\n            this.counterEl = null;\n        }\n\n        if (this.chips) {\n            this.chips.innerHTML = '';\n        }\n\n        if (this.selectedOptions.length > 0) {\n            this.selectedOptions.forEach((option, index) => {\n                this.selectionChanged(option, ++index);\n            });\n        } else {\n            this.selectionChanged();\n        }\n\n        if (silence) return;\n        event.dispatchCustomEvent(this, 'wje-select:change');\n    }\n\n    /**\n     * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.\n     * - If the number of selected items equals the maximum allowed, the counter element is removed.\n     * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.\n     */\n    counter() {\n        // zmazanie counter (span)\n        if (this.counterEl && this.value.length === +this.maxOptions) {\n            this.counterEl.remove();\n            this.counterEl = null;\n            return;\n        }\n\n        // ak counter nie je, tak ho vytvorime\n        if (!this.counterEl) {\n            this.counterEl = document.createElement('span');\n            this.counterEl.classList.add('counter');\n\n            this.chips.appendChild(this.counterEl);\n        }\n\n        // nastavime hodnotu counter\n        this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;\n    }\n\n    /**\n     * Returns a chip element.\n     * @param {Element} option The option to get the chip for.\n     * @returns {Element} The chip element.\n     */\n    getChip(option) {\n        let chip = document.createElement('wje-chip');\n        chip.setAttribute('removable', '');\n        chip.addEventListener('wje:chip-remove', this.removeChip);\n        chip.option = option;\n\n        let label = document.createElement('wje-label');\n        label.innerText = option.textContent.trim();\n\n        chip.appendChild(label);\n\n        return chip;\n    }\n\n    /**\n     * Handles the chip remove event.\n     * @param {Event} e The event.\n     */\n    removeChip = (e) => {\n        let option = e.target.option;\n        option.selected = false;\n        option.removeAttribute('selected');\n        e.target.parentNode.removeChild(e.target);\n\n        this.selections();\n    };\n\n    /**\n     * Generates an HTML option element based on the provided item and mapping.\n     * @param {object} item The item to generate the option for.\n     * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.\n     * @param {string} [map.value] The property of the item to use for the option's value.\n     * @param {string} [map.text] The property of the item to use for the option's text.\n     * @returns {HTMLElement} The generated HTML option element.\n     */\n    htmlOption(item, map = { value: 'value', text: 'text' }) {\n        let option = document.createElement('wje-option');\n\n        if (item[map.value] === null) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);\n        }\n\n        if (item[map.text] === null) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);\n        }\n\n        option.setAttribute('value', item[map.value] ?? '');\n        option.innerText = item[map.text] ?? '';\n        return option;\n    }\n\n    /**\n     * Adds an option to the select element.\n     * @param {any} optionData The data for the option to be added.\n     * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.\n     * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.\n     */\n    addOption(optionData, silent = false, map = { value: 'value', text: 'text' }) {\n        if (!optionData) return;\n\n        const optionsElement = this.querySelector('wje-options');\n        if (optionsElement) {\n            optionsElement.addOption(optionData, silent, map);\n            return;\n        }\n\n        let option = this.htmlOption(optionData, map);\n        this.appendChild(option);\n    }\n\n    /**\n     * Adds options to the select element.\n     * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.\n     * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.\n     * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: \"value\", text: \"text\" }.\n     */\n    addOptions(optionsData, silent = false, map = { value: 'value', text: 'text' }) {\n        if (!Array.isArray(optionsData)) {\n            this.addOption(optionsData, silent, map);\n        } else {\n            const optionsElement = this.querySelector('wje-options');\n            if (optionsElement) {\n                optionsElement.addOptions(optionsData, silent, map);\n                return;\n            }\n\n            optionsData.forEach((item) => {\n                this.addOption(item, silent, map);\n            });\n        }\n    }\n\n    /**\n     * Selects an option with the specified value.\n     * @param {string} value The value of the option to be selected.\n     * @param {boolean} [silent] Whether to suppress firing events.\n     */\n    selectOption(value, silent = false) {\n        if (!value) return;\n\n        let option = this.querySelector(`wje-option[value=\"${value}\"]`);\n\n        if (option) {\n            option.selected = true;\n        }\n\n        if (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);\n    }\n\n    /**\n     * Selects one or multiple options in the select element.\n     * @param {Array|any} values The value(s) of the option(s) to be selected.\n     * @param {boolean} [silent] Whether to trigger the change event or not.\n     */\n    selectOptions(values, silent = false) {\n        if (!Array.isArray(values)) {\n            this.selectOption(values, silent);\n        } else {\n            values.forEach((value) => {\n                this.selectOption(value, silent);\n            });\n        }\n    }\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        form?.addEventListener('submit', () => {\n            // this.validateInput();\n            // this.propagateValidation();\n        });\n    }\n\n    /**\n     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n     * This method is responsible for resetting the value of the custom input element to its default value.\n     * It also resets the form value and validity state in the form internals.\n     * @function\n     */\n    formResetCallback() {\n        // Set the value of the custom input element to its default value\n        this.value = this.defaultValue;\n        // Reset the form value in the form internals to the default value\n        this.internals.setFormValue(this.defaultValue);\n        // Reset the validity state in the form internals\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n     * This method is responsible for restoring the value of the custom input element to its saved state.\n     * It also restores the form value and validity state in the form internals to their saved states.\n     * @param {object} state The saved state of the custom input element.\n     * @function\n     */\n    formStateRestoreCallback(state) {\n        // Set the value of the custom input element to its saved value\n        this.value = state.value;\n        // Restore the form value in the form internals to the saved value\n        this.internals.setFormValue(state.value);\n        // Restore the validity state in the form internals to the saved state\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n     * This method is responsible for saving the value of the custom input element.\n     * @returns {object} The saved state of the custom input element.\n     * @function\n     */\n    formStateSaveCallback() {\n        return {\n            value: this.value,\n        };\n    }\n\n    /**\n     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n     * This method is not implemented yet.\n     * @param {boolean} disabled The new disabled state of the custom input element.\n     * @function\n     */\n    formDisabledCallback(disabled) {\n        console.warn('formDisabledCallback not implemented yet');\n    }\n}\n","import Select from './select.element.js';\n\nexport default Select;\n\nSelect.define('wje-select', Select);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-select.js","sources":["../packages/wje-select/select.element.js","../packages/wje-select/select.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport Popup from '../wje-popup/popup.js';\nimport Icon from '../wje-icon/icon.js';\nimport Label from '../wje-label/label.js';\nimport Chip from '../wje-chip/chip.js';\nimport Input from '../wje-input/input.js';\nimport Option from '../wje-option/option.js';\nimport Options from '../wje-options/options.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Select` is a custom web component that represents a select input.\n * @summary This element represents a select input.\n * @documentation https://elements.webjet.sk/components/select\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the select.\n * @slot anchor - The slot for the anchor.\n * @slot arrow - The slot for the arrow.\n * @csspart native - The native select wrapper.\n * @csspart input - The input field.\n * @csspart clear - The clear button.\n * @property {Array} _selected - An array to store selected items.\n * @property {HTMLElement|null} counterEl - A reference to the counter element, initially null.\n * @property {ElementInternals} internals - The internal element API for managing state and attributes.\n * @property {boolean} _wasOppened - Tracks whether the select element was previously opened, initially false.\n * @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`).\n * @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`.\n * @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.\n * @cssproperty [--wje-select-options-border-width=1px] - Specifies the width of the border for the select options dropdown. Accepts any valid CSS length unit.\n * @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.\n * @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.\n * @cssproperty [--wje-select-background=var(--wje-background)] - Specifies the background color of the select component. Accepts any valid CSS color value.\n * @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.\n * @cssproperty [--wje-select-color=var(--wje-color)] - Sets the text color for the select component. Accepts any valid CSS color value.\n * @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.\n * @tag wje-select\n */\n\nexport default class Select extends WJElement {\n    /**\n     * Constructor for the Select class.\n     * @class\n     * @description Initializes the Select component.\n     * This constructor sets up the initial state of the component, including selected items, counter element, and internal element API.\n     * It also tracks whether the select element was previously opened.\n     * @class\n     * @augments {WJElement}\n     * @memberof Select\n     */\n    constructor() {\n        super();\n\n        /**\n         * @type {Array}\n         * @description An array to store selected items.\n         */\n        this._selected = [];\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the counter element, initially null.\n         * @private\n         */\n        this.counterEl = null;\n\n        /**\n         * @type {ElementInternals}\n         * @description The internal element API for managing state and attributes.\n         * @private\n         * @readonly\n         * @constant\n         * @default {ElementInternals} this.attachInternals()\n         * @description Attaches the internals to the element.\n         */\n        this.internals = this.attachInternals();\n\n        /**\n         * @type {boolean}\n         * @description Tracks whether the select element was previously opened, initially false.\n         * @private\n         * @default {boolean} false\n         */\n        this._wasOppened = false;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the native select element, initially null.\n         */\n        this.native = null;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the popup element, initially null.\n         */\n        this.popup = null;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the label element, initially null.\n         */\n        this.labelElement = null;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the slot start element, initially null.\n         */\n        this.slotStart = null;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the slot end element, initially null.\n         */\n        this.slotEnd = null;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the input element, initially null.\n         */\n        this.input = null;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the options wrapper element, initially null.\n         */\n        this.optionsWrapper = null;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the chips element, initially null.\n         */\n        this.chips = null;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the clear button element, initially null.\n         */\n        this.clear = null;\n\n        /**\n         * @type {HTMLElement|null}\n         * @description A reference to the list element, initially null.\n         */\n        this.list = null;\n    }\n\n    dependencies = {\n        'wje-button': Button,\n        'wje-popup': Popup,\n        'wje-icon': Icon,\n        'wje-label': Label,\n        'wje-chip': Chip,\n        'wje-input': Input,\n        'wje-option': Option,\n        'wje-options': Options,\n    };\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        if (Array.isArray(value)) {\n            this.internals.setFormValue(JSON.stringify(value));\n        } else {\n            this.internals.setFormValue(value);\n        }\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.selected;\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\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     * 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 form attribute.\n     * @returns {HTMLFormElement} The form the input is associated with.\n     */\n    get form() {\n        return this.internals.form;\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.localName;\n    }\n\n    /**\n     * Getter for the validity attribute.\n     * @returns {ValidityState} The validity state of the input.\n     */\n    get validity() {\n        return this.internals.validity;\n    }\n\n    /**\n     * Getter for the validationMessage attribute.\n     * @returns {string} The validation message of the input.\n     */\n    get validationMessage() {\n        return this.internals.validationMessage;\n    }\n\n    /**\n     * Getter for the willValidate attribute.\n     * @returns {boolean} Whether the input will be validated.\n     */\n    get willValidate() {\n        return this.internals.willValidate;\n    }\n\n    /**\n     * @summary Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * @summary Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Sets the label value.\n     * @param {Array} value The selected value to set.\n     */\n    set selected(value) {\n        this._selected = value;\n    }\n\n    /**\n     * Returns the selected value.\n     * @returns {Array} The selected value.\n     */\n    get selected() {\n        return this.getSelected();\n    }\n\n    /**\n     * Sets the trigger value.\n     * @param {string} value The trigger value to set.\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Returns the trigger value.\n     * @returns {string} The trigger value.\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    className = 'Select';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['active', 'value'];\n    }\n\n    /**\n     * Whether the input is associated with a form.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the select.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', this.placement ? 'wje-' + this.placement : 'wje-start');\n\n        // zakladny obalovac\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-select', this.variant || 'default');\n\n        // wrapper pre label a inputWrapper\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('wrapper');\n        wrapper.setAttribute('slot', 'anchor');\n\n        // label\n        let label = document.createElement('wje-label');\n        label.innerText = this.label || '';\n\n        // obalovac pre input\n        let inputWrapper = document.createElement('div');\n        inputWrapper.setAttribute('part', 'input-wrapper');\n        inputWrapper.classList.add('input-wrapper');\n\n        let slotStart = document.createElement('div');\n        slotStart.classList.add('slot-start');\n\n        let input = document.createElement('input');\n        input.setAttribute('type', 'text');\n        input.setAttribute('part', 'input');\n        input.setAttribute('autocomplete', 'off');\n        input.setAttribute('readonly', '');\n        input.setAttribute('placeholder', this.placeholder || '');\n\n        let slotEnd = document.createElement('div');\n        slotEnd.classList.add('slot-end');\n\n        let arrow = document.createElement('wje-icon');\n        arrow.setAttribute('name', 'chevron-down');\n        arrow.setAttribute('slot', 'arrow');\n\n        let chips = document.createElement('div');\n        chips.classList.add('chips');\n        chips.innerText = this.placeholder || '';\n\n        // obalovac pre option a find\n        let optionsWrapper = document.createElement('div');\n        optionsWrapper.setAttribute('part', 'options-wrapper');\n        optionsWrapper.classList.add('options-wrapper');\n        optionsWrapper.style.setProperty('height', this.maxHeight || 'auto');\n\n        let list = document.createElement('div');\n        list.classList.add('list');\n\n        let slot = document.createElement('slot');\n\n        let clear = document.createElement('wje-button');\n        clear.setAttribute('fill', 'link');\n        clear.setAttribute('part', 'clear');\n\n        let clearIcon = document.createElement('wje-icon');\n        clearIcon.setAttribute('name', 'x');\n\n        clear.appendChild(clearIcon);\n\n        // vytvorime popup\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', 'bottom-start');\n        popup.setAttribute('manual', '');\n        popup.setAttribute('size', '');\n\n        if (this.hasAttribute('disabled')) popup.setAttribute('disabled', '');\n\n        if (this.variant === 'standard') {\n            if (this.hasAttribute('label')) native.appendChild(label);\n        } else {\n            wrapper.appendChild(label);\n        }\n\n        inputWrapper.appendChild(slotStart);\n        inputWrapper.appendChild(input);\n        if (this.hasAttribute('multiple')) inputWrapper.appendChild(chips);\n\n        if (this.hasAttribute('clearable')) inputWrapper.appendChild(clear);\n\n        inputWrapper.appendChild(slotEnd);\n        inputWrapper.appendChild(arrow);\n\n        list.appendChild(slot);\n\n        if (this.hasAttribute('find')) {\n            let find = document.createElement('wje-input');\n            find.setAttribute('variant', 'standard');\n            find.setAttribute('placeholder', 'Hľadať');\n            find.classList.add('find');\n\n            optionsWrapper.appendChild(find);\n\n            this.findEl = find;\n        }\n\n        if (this.hasAttribute('lazy')) {\n            event.addListener(popup, 'wje-popup:show', null, (e) => {\n                if (this._wasOppened) return;\n                this._wasOppened = true;\n\n                const optionsElement = this.querySelector('wje-options');\n                optionsElement.setAttribute('attached', '');\n            });\n        } else {\n            const optionsElement = this.querySelector('wje-options');\n            optionsElement?.setAttribute('attached', '');\n        }\n\n        optionsWrapper.appendChild(list);\n\n        wrapper.appendChild(inputWrapper);\n        popup.appendChild(optionsWrapper);\n        popup.appendChild(wrapper);\n\n        if (this.trigger === 'click') popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        this.native = native;\n        this.popup = popup;\n        this.labelElement = label;\n        this.slotStart = slotStart;\n        this.slotEnd = slotEnd;\n        this.input = input;\n        this.optionsWrapper = optionsWrapper;\n        this.chips = chips;\n        this.clear = clear;\n        this.list = list;\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.addEventListener('wje-option:change', this.optionChange);\n\n        this.clear.addEventListener('wje-button:click', (e) => {\n            this.getAllOptions().forEach((option) => {\n                option.selected = false;\n                option.removeAttribute('selected');\n            });\n            this.selections();\n\n            e.stopPropagation();\n        });\n\n        this.selections(true);\n\n        this.list.addEventListener('wje-options:load', (e) => {\n            this.list.scrollTo(0, 0);\n        });\n\n        // skontrolujeme ci ma select atribut find\n        if (this.hasAttribute('find') && this.findEl instanceof HTMLElement) {\n            event.addListener(this.findEl, 'keyup', '', (e) => {\n                // contains wj-options element with options\n                const optionsElement = this.querySelector('wje-options');\n                if (optionsElement && optionsElement.hasAttribute('lazy')) {\n                    // pass search value to wj-options element and infinite scroll will handle the rest\n                    optionsElement.setAttribute('search', e.target.value);\n                } else {\n                    let value = e.target.value.trim().toLowerCase();\n\n                    this.getAllOptions().forEach((option) => {\n                        if (option.textContent.trim().toLowerCase().includes(value)) option.style.display = 'block';\n                        else option.style.display = 'none';\n                    });\n                }\n            });\n        }\n    }\n\n    /**\n     * Handles the option change event.\n     * @param {Event} e The event.\n     */\n    optionChange = (e) => {\n        let allOptions = this.getAllOptions();\n\n        if (!this.hasAttribute('multiple')) {\n            allOptions.forEach((option) => {\n                option.selected = false;\n                option.removeAttribute('selected');\n            });\n            this.popup.removeAttribute('active');\n        }\n\n        e.target.selected = !e.target.hasAttribute('selected');\n\n        this.selections();\n    };\n\n    /**\n     * Returns all the options as HTML.\n     * @returns {NodeList} The options as HTML.\n     */\n    getAllOptions() {\n        return this.querySelectorAll('wje-option');\n    }\n\n    /**\n     * Returns the selected options as HTML.\n     * @returns {NodeList} The selected options as HTML.\n     */\n    getSelectedOptions() {\n        return this.querySelectorAll('wje-option[selected]');\n    }\n\n    /**\n     * Returns the selected options.\n     * @returns {Array} The selected options.\n     */\n    getSelected() {\n        let selectedOptions = this.getSelectedOptions();\n\n        selectedOptions = Array.isArray(selectedOptions) ? selectedOptions : Array.from(selectedOptions);\n\n        selectedOptions = selectedOptions.map((option) => {\n            return {\n                value: option.value,\n                text: option.textContent.trim(),\n            };\n        });\n\n        return selectedOptions;\n    }\n\n    /**\n     * Handles the selection change.\n     * @param {Element} option The option that changed.\n     * @param {number} length The length of the selected options.\n     */\n    selectionChanged(option = null, length = 0) {\n        if (this.hasAttribute('multiple')) {\n            this.value = this.selectedOptions.map((el) => el.value).reverse();\n\n            if (this.placeholder && length === 0) {\n                this.chips.innerHTML = this.placeholder;\n                this.input.value = '';\n            } else {\n                if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {\n                    this.counter();\n                } else {\n                    if (option !== null) this.chips.appendChild(this.getChip(option));\n                }\n            }\n        } else {\n            let value = option?.textContent.trim() || '';\n            this.value = this.selectedOptions?.map((el) => el.value)?.at(0);\n            this.input.value = value;\n\n            if (option && option instanceof HTMLElement) {\n                this.slotStart.innerHTML = '';\n\n                if (option?.querySelector('[slot=start]')) {\n                    this.slotStart.appendChild(option?.querySelector('[slot=start]').cloneNode(true));\n                }\n\n                this.slotEnd.innerHTML = '';\n\n                if (option?.querySelector('[slot=end]')) {\n                    this.slotEnd.appendChild(option?.querySelector('[slot=end]').cloneNode(true));\n                }\n            }\n        }\n    }\n\n    /**\n     * Updates the selected options and their corresponding chips.\n     * @param {boolean} [silence] Determines whether to suppress the \"wje-select:change\" event.\n     * @returns {void}\n     * @description\n     * This method fetches the currently selected options and updates the `selectedOptions` array.\n     * It clears and rebuilds the chips representing the selected items in the UI.\n     * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.\n     * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.\n     * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.\n     * @example\n     * // Call the method and allow event dispatch\n     * selections();\n     * @example\n     * // Call the method without dispatching the event\n     * selections(true);\n     */\n    selections(silence = false) {\n        let options = this.getSelectedOptions();\n\n        this.selectedOptions = Array.isArray(options) ? options : Array.from(options);\n\n        if (this.selectedOptions.length >= +this.maxOptions) {\n            this.counterEl = null;\n        }\n\n        if (this.chips) {\n            this.chips.innerHTML = '';\n        }\n\n        if (this.selectedOptions.length > 0) {\n            this.selectedOptions.forEach((option, index) => {\n                this.selectionChanged(option, ++index);\n            });\n        } else {\n            this.selectionChanged();\n        }\n\n        if (silence) return;\n        event.dispatchCustomEvent(this, 'wje-select:change');\n    }\n\n    /**\n     * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.\n     * - If the number of selected items equals the maximum allowed, the counter element is removed.\n     * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.\n     */\n    counter() {\n        // zmazanie counter (span)\n        if (this.counterEl && this.value.length === +this.maxOptions) {\n            this.counterEl.remove();\n            this.counterEl = null;\n            return;\n        }\n\n        // ak counter nie je, tak ho vytvorime\n        if (!this.counterEl) {\n            this.counterEl = document.createElement('span');\n            this.counterEl.classList.add('counter');\n\n            this.chips.appendChild(this.counterEl);\n        }\n\n        // nastavime hodnotu counter\n        this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;\n    }\n\n    /**\n     * Returns a chip element.\n     * @param {Element} option The option to get the chip for.\n     * @returns {Element} The chip element.\n     */\n    getChip(option) {\n        let chip = document.createElement('wje-chip');\n        chip.setAttribute('removable', '');\n        chip.addEventListener('wje:chip-remove', this.removeChip);\n        chip.option = option;\n\n        let label = document.createElement('wje-label');\n        label.innerText = option.textContent.trim();\n\n        chip.appendChild(label);\n\n        return chip;\n    }\n\n    /**\n     * Handles the chip remove event.\n     * @param {Event} e The event.\n     */\n    removeChip = (e) => {\n        let option = e.target.option;\n        option.selected = false;\n        option.removeAttribute('selected');\n        e.target.parentNode.removeChild(e.target);\n\n        this.selections();\n    };\n\n    /**\n     * Generates an HTML option element based on the provided item and mapping.\n     * @param {object} item The item to generate the option for.\n     * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.\n     * @param {string} [map.value] The property of the item to use for the option's value.\n     * @param {string} [map.text] The property of the item to use for the option's text.\n     * @returns {HTMLElement} The generated HTML option element.\n     */\n    htmlOption(item, map = { value: 'value', text: 'text' }) {\n        let option = document.createElement('wje-option');\n\n        if (item[map.value] === null) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);\n        }\n\n        if (item[map.text] === null) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);\n        }\n\n        option.setAttribute('value', item[map.value] ?? '');\n        option.innerText = item[map.text] ?? '';\n        return option;\n    }\n\n    /**\n     * Adds an option to the select element.\n     * @param {any} optionData The data for the option to be added.\n     * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.\n     * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.\n     */\n    addOption(optionData, silent = false, map = { value: 'value', text: 'text' }) {\n        if (!optionData) return;\n\n        const optionsElement = this.querySelector('wje-options');\n        if (optionsElement) {\n            optionsElement.addOption(optionData, silent, map);\n            return;\n        }\n\n        let option = this.htmlOption(optionData, map);\n        this.appendChild(option);\n    }\n\n    /**\n     * Adds options to the select element.\n     * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.\n     * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.\n     * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: \"value\", text: \"text\" }.\n     */\n    addOptions(optionsData, silent = false, map = { value: 'value', text: 'text' }) {\n        if (!Array.isArray(optionsData)) {\n            this.addOption(optionsData, silent, map);\n        } else {\n            const optionsElement = this.querySelector('wje-options');\n            if (optionsElement) {\n                optionsElement.addOptions(optionsData, silent, map);\n                return;\n            }\n\n            optionsData.forEach((item) => {\n                this.addOption(item, silent, map);\n            });\n        }\n    }\n\n    /**\n     * Selects an option with the specified value.\n     * @param {string} value The value of the option to be selected.\n     * @param {boolean} [silent] Whether to suppress firing events.\n     */\n    selectOption(value, silent = false) {\n        if (!value) return;\n\n        let option = this.querySelector(`wje-option[value=\"${value}\"]`);\n\n        if (option) {\n            option.selected = true;\n        }\n\n        if (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);\n    }\n\n    /**\n     * Selects one or multiple options in the select element.\n     * @param {Array|any} values The value(s) of the option(s) to be selected.\n     * @param {boolean} [silent] Whether to trigger the change event or not.\n     */\n    selectOptions(values, silent = false) {\n        if (!Array.isArray(values)) {\n            this.selectOption(values, silent);\n        } else {\n            values.forEach((value) => {\n                this.selectOption(value, silent);\n            });\n        }\n    }\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        form?.addEventListener('submit', () => {\n            // this.validateInput();\n            // this.propagateValidation();\n        });\n    }\n\n    /**\n     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n     * This method is responsible for resetting the value of the custom input element to its default value.\n     * It also resets the form value and validity state in the form internals.\n     * @function\n     */\n    formResetCallback() {\n        // Set the value of the custom input element to its default value\n        this.value = this.defaultValue;\n        // Reset the form value in the form internals to the default value\n        this.internals.setFormValue(this.defaultValue);\n        // Reset the validity state in the form internals\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n     * This method is responsible for restoring the value of the custom input element to its saved state.\n     * It also restores the form value and validity state in the form internals to their saved states.\n     * @param {object} state The saved state of the custom input element.\n     * @function\n     */\n    formStateRestoreCallback(state) {\n        // Set the value of the custom input element to its saved value\n        this.value = state.value;\n        // Restore the form value in the form internals to the saved value\n        this.internals.setFormValue(state.value);\n        // Restore the validity state in the form internals to the saved state\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n     * This method is responsible for saving the value of the custom input element.\n     * @returns {object} The saved state of the custom input element.\n     * @function\n     */\n    formStateSaveCallback() {\n        return {\n            value: this.value,\n        };\n    }\n\n    /**\n     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n     * This method is not implemented yet.\n     * @param {boolean} disabled The new disabled state of the custom input element.\n     * @function\n     */\n    formDisabledCallback(disabled) {\n        console.warn('formDisabledCallback not implemented yet');\n    }\n}\n","import Select from './select.element.js';\n\nexport default Select;\n\nSelect.define('wje-select', Select);\n"],"names":[],"mappings":"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"}

package/dist/wje-split-view.js

@@ -44,15 +44,9 @@ class SplitView extends WJElement {
       if (this.hasAttribute("disabled")) return;
       drag(this, {
         onMove: (x, y) => {
-          console.log("x", x);
-          console.log("y", y);
-          console.log("this.hasAttribute(vertical)", this.hasAttribute("vertical"));
           let newPositionInPixels = this.hasAttribute("vertical") ? y : x;
-          console.log("newPositionInPixels", newPositionInPixels);
           let sizeA = this.pixelsToPercentage(newPositionInPixels);
           let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);
-          console.log("sizeA", sizeA);
-          console.log("sizeB", sizeB);
           this.style.setProperty("--wje-split-view-calc-a", sizeA + "%");
           this.style.setProperty("--wje-split-view-calc-b", sizeB + "%");
         },
@@ -131,9 +125,6 @@ class SplitView extends WJElement {
    */
   detectSize() {
     const { width, height } = this.getBoundingClientRect();
-    console.log("VERTICAL:", this.hasAttribute("vertical"), this.getBoundingClientRect(), this);
-    console.log("width", width);
-    console.log("height", height);
     this.size = this.hasAttribute("vertical") ? height : width;
   }
   /**
@@ -142,7 +133,6 @@ class SplitView extends WJElement {
    * @returns {number} The percentage value.
    */
   pixelsToPercentage(value) {
-    console.log("pixelsToPercentage", value, value / this.size * 100);
     return value / this.size * 100;
   }
 }

package/dist/wje-split-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-split-view.js","sources":["../packages/wje-split-view/service/service.js","../packages/wje-split-view/split-view.element.js","../packages/wje-split-view/split-view.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `SplitView` is a custom web component that represents a split view.\n * @summary This element represents a split view.\n * @documentation https://elements.webjet.sk/components/split-view\n * @status stable\n * @augments WJElement\n * @slot start - Slot for the start view.\n * @slot end - Slot for the end view.\n * @slot divider - Slot for the divider.\n * @csspart native-split-view - The native split view wrapper.\n * @csspart wje-divider - The divider of the split view.\n * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).\n * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.\n * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.\n * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.\n * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.\n * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.\n * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).\n * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.\n * @tag wje-split-view\n */\n\nexport default class SplitView extends WJElement {\n    /**\n     * Creates an instance of SplitView.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    set initial(value) {\n        this.setAttribute('initial', value);\n    }\n\n    get initial() {\n        return +this.getAttribute('initial') || 50;\n    }\n\n    className = 'SplitView';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the split view.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let divider = document.createElement('slot');\n        divider.setAttribute('name', 'divider');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.appendChild(divider);\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        native.appendChild(start);\n        native.appendChild(dividerElement);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.detectSize();\n\n        if (this.min) this.style.setProperty('--wje-split-view-min', this.pixelsToPercentage(this.min) + '%');\n\n        if (this.max) this.style.setProperty('--wje-split-view-max', 100 - this.pixelsToPercentage(this.max) + '%');\n\n        if (this.initial) {\n            this.style.setProperty('--wje-split-view-calc-a', this.pixelsToPercentage(this.initial) + '%');\n            this.style.setProperty('--wje-split-view-calc-b', 100 - this.pixelsToPercentage(this.initial) + '%');\n        }\n\n        this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event object.\n     */\n    handleDrag = (e) => {\n        if (this.hasAttribute('disabled')) return;\n\n        drag(this, {\n            onMove: (x, y) => {\n                console.log('x', x);\n                console.log('y', y);\n                console.log('this.hasAttribute(vertical)', this.hasAttribute('vertical'));\n                let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n                console.log('newPositionInPixels', newPositionInPixels);\n                let sizeA = this.pixelsToPercentage(newPositionInPixels);\n                let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n                console.log('sizeA', sizeA);\n                console.log('sizeB', sizeB);\n                this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n                this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Detects the size of the split view.\n     */\n    detectSize() {\n        const { width, height } = this.getBoundingClientRect();\n        console.log('VERTICAL:', this.hasAttribute('vertical'), this.getBoundingClientRect(), this);\n        console.log('width', width);\n        console.log('height', height);\n        this.size = this.hasAttribute('vertical') ? height : width;\n    }\n\n    /**\n     * Converts pixels to a percentage.\n     * @param {number} value The pixel value.\n     * @returns {number} The percentage value.\n     */\n    pixelsToPercentage(value) {\n        console.log('pixelsToPercentage', value, (value / this.size) * 100);\n        return (value / this.size) * 100;\n    }\n}\n","import SplitView from './split-view.element.js';\n\nexport default SplitView;\n\nSplitView.define('wje-split-view', SplitView);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-split-view.js","sources":["../packages/wje-split-view/service/service.js","../packages/wje-split-view/split-view.element.js","../packages/wje-split-view/split-view.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `SplitView` is a custom web component that represents a split view.\n * @summary This element represents a split view.\n * @documentation https://elements.webjet.sk/components/split-view\n * @status stable\n * @augments WJElement\n * @slot start - Slot for the start view.\n * @slot end - Slot for the end view.\n * @slot divider - Slot for the divider.\n * @csspart native-split-view - The native split view wrapper.\n * @csspart wje-divider - The divider of the split view.\n * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).\n * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.\n * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.\n * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.\n * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.\n * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.\n * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).\n * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.\n * @tag wje-split-view\n */\n\nexport default class SplitView extends WJElement {\n    /**\n     * Creates an instance of SplitView.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    set initial(value) {\n        this.setAttribute('initial', value);\n    }\n\n    get initial() {\n        return +this.getAttribute('initial') || 50;\n    }\n\n    className = 'SplitView';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the split view.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let divider = document.createElement('slot');\n        divider.setAttribute('name', 'divider');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.appendChild(divider);\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        native.appendChild(start);\n        native.appendChild(dividerElement);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.detectSize();\n\n        if (this.min) this.style.setProperty('--wje-split-view-min', this.pixelsToPercentage(this.min) + '%');\n\n        if (this.max) this.style.setProperty('--wje-split-view-max', 100 - this.pixelsToPercentage(this.max) + '%');\n\n        if (this.initial) {\n            this.style.setProperty('--wje-split-view-calc-a', this.pixelsToPercentage(this.initial) + '%');\n            this.style.setProperty('--wje-split-view-calc-b', 100 - this.pixelsToPercentage(this.initial) + '%');\n        }\n\n        this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event object.\n     */\n    handleDrag = (e) => {\n        if (this.hasAttribute('disabled')) return;\n\n        drag(this, {\n            onMove: (x, y) => {\n                let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n                let sizeA = this.pixelsToPercentage(newPositionInPixels);\n                let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n\n                this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n                this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Detects the size of the split view.\n     */\n    detectSize() {\n        const { width, height } = this.getBoundingClientRect();\n\n        this.size = this.hasAttribute('vertical') ? height : width;\n    }\n\n    /**\n     * Converts pixels to a percentage.\n     * @param {number} value The pixel value.\n     * @returns {number} The percentage value.\n     */\n    pixelsToPercentage(value) {\n        return (value / this.size) * 100;\n    }\n}\n","import SplitView from './split-view.element.js';\n\nexport default SplitView;\n\nSplitView.define('wje-split-view', SplitView);\n"],"names":[],"mappings":"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"}

package/dist/wje-tab-group.js

@@ -97,7 +97,6 @@ class TabGroup extends WJElement {
     this.setActiveTab(activeTabName);
     this.addEventListener("wje-tab:change", (e) => {
       if (e.detail.context.hasAttribute("disabled")) return;
-      console.log("tab change");
       this.setActiveTab(e.detail.context.panel);
     });
     this.checkOverflow = this.checkOverflow.bind(this);

package/dist/wje-tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'TabGroup';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            // window.addEventListener('hashchange', (e) => {\n            //     console.log('hashchange');\n            //     this.setActiveTab(activeTabName);\n            // });\n\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'dots');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        let slotMore = document.createElement('slot');\n        slotMore.setAttribute('name', 'more');\n\n        let moreDropdown = document.createElement('wje-dropdown');\n        moreDropdown.setAttribute('placement', 'bottom-end');\n        moreDropdown.setAttribute('collapsible', '');\n        moreDropdown.classList.add('more-tabs');\n\n        button.append(icon);\n\n        menu.append(slotMore);\n\n        moreDropdown.append(button);\n        moreDropdown.append(menu);\n\n        header.append(nav);\n\n        nav.append(slotNav);\n        nav.append(moreDropdown);\n\n        section.append(slot);\n\n        native.append(header);\n        native.append(section);\n\n        fragment.append(native);\n\n        this.nav = nav;\n        this.moreDropdown = moreDropdown;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0].panel : this.getTabAll()[0].panel;\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n            console.log('tab change');\n            this.setActiveTab(e.detail.context.panel);\n        });\n\n        // this.checkOverflow = this.checkOverflow.bind(this);\n        // window.addEventListener('resize', this.checkOverflow);\n\n        // this.setupTabObserver();\n        // this.toggleMoreVisibility();\n\n        this.checkOverflow = this.checkOverflow.bind(this);\n\n        window.addEventListener('resize', this.checkOverflow);\n\n        requestAnimationFrame(() => this.checkOverflow());\n    }\n\n    /**\n     * Removes the active attribute from all tabs and panels.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n        const el = this.querySelector(`[panel=\"${tab}\"]`)\n        el?.classList.add('active');\n        this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n        this.dropdownActive(el);\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n\n    toggleMoreVisibility() {\n        const hasTabsInMore = this.querySelector('wje-tab[slot=\"more\"]');\n        this.moreDropdown.hidden = !hasTabsInMore;\n    }\n\n    checkOverflow() {\n        const nav = this.nav;\n        const moreBtn = this.moreDropdown;\n        const moreWidth = moreBtn.offsetWidth || 48; // fallback ak ešte nie je vykreslený\n\n        const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n        // Reset: presunieme všetky taby naspäť do nav slotu\n        tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n        // Vykreslíme nanovo, aby sa more button správne umiestnil\n        requestAnimationFrame(() => {\n            const navRight = nav.getBoundingClientRect().right;\n            let overflowStarted = false;\n\n            for (const tab of tabs) {\n                const tabRect = tab.getBoundingClientRect();\n\n                // Ak by pretekal vrátane rezervy na more, presunieme ho\n                const fits = tabRect.right + moreWidth <= navRight;\n\n                if (!fits || overflowStarted) {\n                    tab.setAttribute('slot', 'more');\n                    this.dropdownActive(tab);\n                    overflowStarted = true;\n                }\n            }\n\n            this.toggleMoreVisibility();\n        });\n    }\n\n    dropdownActive(el) {\n        if(el.classList.contains('active')) {\n            if(el.getAttribute('slot') === 'more')\n                this.moreDropdown.classList.add('dropdown-active');\n            else\n                this.moreDropdown.classList.remove('dropdown-active');\n        }\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'TabGroup';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'dots');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        let slotMore = document.createElement('slot');\n        slotMore.setAttribute('name', 'more');\n\n        let moreDropdown = document.createElement('wje-dropdown');\n        moreDropdown.setAttribute('placement', 'bottom-end');\n        moreDropdown.setAttribute('collapsible', '');\n        moreDropdown.classList.add('more-tabs');\n\n        button.append(icon);\n\n        menu.append(slotMore);\n\n        moreDropdown.append(button);\n        moreDropdown.append(menu);\n\n        header.append(nav);\n\n        nav.append(slotNav);\n        nav.append(moreDropdown);\n\n        section.append(slot);\n\n        native.append(header);\n        native.append(section);\n\n        fragment.append(native);\n\n        this.nav = nav;\n        this.moreDropdown = moreDropdown;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0].panel : this.getTabAll()[0].panel;\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n            this.setActiveTab(e.detail.context.panel);\n        });\n\n        this.checkOverflow = this.checkOverflow.bind(this);\n\n        window.addEventListener('resize', this.checkOverflow);\n\n        requestAnimationFrame(() => this.checkOverflow());\n    }\n\n    /**\n     * Removes the active attribute from all tabs and panels.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n        const el = this.querySelector(`[panel=\"${tab}\"]`)\n        el?.classList.add('active');\n        this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n        this.dropdownActive(el);\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n\n    toggleMoreVisibility() {\n        const hasTabsInMore = this.querySelector('wje-tab[slot=\"more\"]');\n        this.moreDropdown.hidden = !hasTabsInMore;\n    }\n\n    checkOverflow() {\n        const nav = this.nav;\n        const moreBtn = this.moreDropdown;\n        const moreWidth = moreBtn.offsetWidth || 48; // fallback ak ešte nie je vykreslený\n\n        const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n        // Reset: presunieme všetky taby naspäť do nav slotu\n        tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n        // Vykreslíme nanovo, aby sa more button správne umiestnil\n        requestAnimationFrame(() => {\n            const navRight = nav.getBoundingClientRect().right;\n            let overflowStarted = false;\n\n            for (const tab of tabs) {\n                const tabRect = tab.getBoundingClientRect();\n\n                // Ak by pretekal vrátane rezervy na more, presunieme ho\n                const fits = tabRect.right + moreWidth <= navRight;\n\n                if (!fits || overflowStarted) {\n                    tab.setAttribute('slot', 'more');\n                    this.dropdownActive(tab);\n                    overflowStarted = true;\n                }\n            }\n\n            this.toggleMoreVisibility();\n        });\n    }\n\n    dropdownActive(el) {\n        if(el.classList.contains('active')) {\n            if(el.getAttribute('slot') === 'more')\n                this.moreDropdown.classList.add('dropdown-active');\n            else\n                this.moreDropdown.classList.remove('dropdown-active');\n        }\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}

package/package.json

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