wj-elements 0.1.164 → 0.1.166

package/dist/wje-select.js

@@ -41,26 +41,47 @@ class Select extends WJElement {
      * @param {Event} e The event.
      */
     __publicField(this, "optionChange", (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
       let allOptions = this.getAllOptions();
       if (!this.hasAttribute("multiple")) {
         allOptions.forEach((option) => {
-          option.selected = false;
-          option.removeAttribute("selected");
+          if (option.value === e.target.value) {
+            this.processClickedOption(option);
+          } else {
+            option.selected = false;
+            option.removeAttribute("selected");
+          }
         });
-        this.popup.removeAttribute("active");
+        this.popup.hide();
+      } else {
+        this.processClickedOption(e.target, true);
       }
-      e.target.selected = !e.target.hasAttribute("selected");
       this.selections();
     });
+    __publicField(this, "processClickedOption", (option, multiple = false) => {
+      const isSelected = option.hasAttribute("selected");
+      option.selected = !isSelected;
+      if (isSelected) {
+        option.removeAttribute("selected");
+        this.filterOutOption(option);
+      } else {
+        option.setAttribute("selected", "");
+        this.selectedOptions = multiple ? [...this.selectedOptions, option] : [option];
+      }
+    });
+    __publicField(this, "filterOutOption", (option) => {
+      this.selectedOptions = this.selectedOptions.filter((sOption) => {
+        return sOption.value !== option.value;
+      });
+    });
     /**
      * Handles the chip remove event.
      * @param {Event} e The event.
      */
     __publicField(this, "removeChip", (e) => {
-      let option = e.target.option;
-      option.selected = false;
-      option.removeAttribute("selected");
       e.target.parentNode.removeChild(e.target);
+      this.processClickedOption(e.target.option, true);
       this.selections();
     });
     this._selected = [];
@@ -77,14 +98,17 @@ class Select extends WJElement {
     this.chips = null;
     this.clear = null;
     this.list = null;
+    this.selectedOptions = [];
   }
   /**
    * Setter for the value attribute.
    * @param {string} value The value to set.
    */
   set value(value) {
-    if (Array.isArray(value)) {
-      this.internals.setFormValue(JSON.stringify(value));
+    if (this.hasAttribute("multiple")) {
+      const formData = new FormData();
+      value.forEach((v) => formData.append(this.name, v));
+      this.internals.setFormValue(formData);
     } else {
       this.internals.setFormValue(value);
     }
@@ -228,7 +252,7 @@ class Select extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["active", "value"];
+    return ["active", "value", "disabled", "multiple", "label", "placeholder", "max-height", "max-options", "variant", "placement"];
   }
   /**
    * Sets up the attributes for the component.
@@ -280,6 +304,7 @@ class Select extends WJElement {
     let clear = document.createElement("wje-button");
     clear.setAttribute("fill", "link");
     clear.setAttribute("part", "clear");
+    clear.setAttribute("stop-propagation", "");
     let clearIcon = document.createElement("wje-icon");
     clearIcon.setAttribute("name", "x");
     clear.appendChild(clearIcon);
@@ -313,6 +338,7 @@ class Select extends WJElement {
         if (this._wasOppened) return;
         this._wasOppened = true;
         const optionsElement = this.querySelector("wje-options");
+        optionsElement.setAttribute("lazy", "");
         optionsElement.setAttribute("attached", "");
       });
     } else {
@@ -342,16 +368,22 @@ class Select extends WJElement {
    * Sets up the event listeners after the component is drawn.
    */
   afterDraw() {
+    var _a;
     this.input.addEventListener("focus", (e) => {
-      this.labelElement.classList.add("fade");
+      var _a2;
+      (_a2 = this.labelElement) == null ? void 0 : _a2.classList.add("fade");
       this.native.classList.add("focused");
     });
     this.input.addEventListener("blur", (e) => {
+      var _a2;
       this.native.classList.remove("focused");
-      if (!e.target.value) this.labelElement.classList.remove("fade");
+      if (!e.target.value) (_a2 = this.labelElement) == null ? void 0 : _a2.classList.remove("fade");
     });
     this.addEventListener("wje-option:change", this.optionChange);
-    this.clear.addEventListener("wje-button:click", (e) => {
+    (_a = this.clear) == null ? void 0 : _a.addEventListener("wje-button:click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.selectedOptions = [];
       this.getAllOptions().forEach((option) => {
         option.selected = false;
         option.removeAttribute("selected");
@@ -359,8 +391,17 @@ class Select extends WJElement {
       this.selections();
       e.stopPropagation();
     });
+    this.selectedOptions = this.getSelectedOptions();
     this.selections(true);
     this.list.addEventListener("wje-options:load", (e) => {
+      this.selectedOptions.forEach((option) => {
+        this.getAllOptions().forEach((el) => {
+          if (el.value === option.value) {
+            el.selected = true;
+            el.setAttribute("selected", "");
+          }
+        });
+      });
       this.list.scrollTo(0, 0);
     });
     if (this.hasAttribute("find") && this.findEl instanceof HTMLElement) {
@@ -390,22 +431,19 @@ class Select extends WJElement {
    * @returns {NodeList} The selected options as HTML.
    */
   getSelectedOptions() {
-    return this.querySelectorAll("wje-option[selected]");
+    return Array.from(this.querySelectorAll("wje-option[selected]"));
   }
   /**
    * Returns the selected options.
    * @returns {Array} The selected options.
    */
   getSelected() {
-    let selectedOptions = this.getSelectedOptions();
-    selectedOptions = Array.isArray(selectedOptions) ? selectedOptions : Array.from(selectedOptions);
-    selectedOptions = selectedOptions.map((option) => {
+    return this.selectedOptions.map((option) => {
       return {
         value: option.value,
         text: option.textContent.trim()
       };
     });
-    return selectedOptions;
   }
   /**
    * Handles the selection change.
@@ -420,10 +458,9 @@ class Select extends WJElement {
         this.chips.innerHTML = this.placeholder;
         this.input.value = "";
       } else {
+        if (option !== null) this.chips.appendChild(this.getChip(option));
         if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {
           this.counter();
-        } else {
-          if (option !== null) this.chips.appendChild(this.getChip(option));
         }
       }
     } else {
@@ -460,8 +497,6 @@ class Select extends WJElement {
    * selections(true);
    */
   selections(silence = false) {
-    let options = this.getSelectedOptions();
-    this.selectedOptions = Array.isArray(options) ? options : Array.from(options);
     if (this.selectedOptions.length >= +this.maxOptions) {
       this.counterEl = null;
     }
@@ -469,9 +504,7 @@ class Select extends WJElement {
       this.chips.innerHTML = "";
     }
     if (this.selectedOptions.length > 0) {
-      this.selectedOptions.forEach((option, index) => {
-        this.selectionChanged(option, ++index);
-      });
+      this.selectionChanged(this.selectedOptions.at(0), this.selectedOptions.length);
     } else {
       this.selectionChanged();
     }
@@ -576,7 +609,7 @@ class Select extends WJElement {
     if (!value) return;
     let option = this.querySelector(`wje-option[value="${value}"]`);
     if (option) {
-      option.selected = true;
+      this.processClickedOption(option, this.hasAttribute("multiple"));
     }
     if (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);
   }
@@ -600,8 +633,9 @@ class Select extends WJElement {
    * @param {HTMLFormElement} form The form the custom element is associated with.
    */
   formAssociatedCallback(form) {
-    form == null ? void 0 : form.addEventListener("submit", () => {
-    });
+    if (form) {
+      this.internals.setFormValue(this.value);
+    }
   }
   /**
    * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
@@ -644,7 +678,10 @@ class Select extends WJElement {
    * @function
    */
   formDisabledCallback(disabled) {
+    var _a;
     console.warn("formDisabledCallback not implemented yet");
+    (_a = this.native) == null ? void 0 : _a.classList.toggle("disabled", disabled);
+    this.toggleAttribute("disabled", disabled);
   }
 }
 /**

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 * @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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"}
+{"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        this.selectedOptions = []\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 (this.hasAttribute('multiple')) {\n            const formData = new FormData();\n            value.forEach(v => formData.append(this.name, v));\n            this.internals.setFormValue(formData);\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', 'disabled', 'multiple', 'label', 'placeholder', 'max-height', 'max-options', 'variant', 'placement'];\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        clear.setAttribute('stop-propagation', '');\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('lazy', '');\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            e.preventDefault();\n            e.stopPropagation();\n            this.selectedOptions = [];\n\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.selectedOptions = this.getSelectedOptions();\n        this.selections(true);\n\n        this.list.addEventListener('wje-options:load', (e) => {\n            // todo select options from this.selectedOptions\n            this.selectedOptions.forEach((option) => {\n                this.getAllOptions().forEach((el) => {\n                    if (el.value === option.value) {\n                        el.selected = true;\n                        el.setAttribute('selected', '');\n                    }\n                });\n            })\n\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        e.stopPropagation()\n        e.stopImmediatePropagation()\n\n        let allOptions = this.getAllOptions();\n\n        if (!this.hasAttribute('multiple')) {\n            allOptions.forEach((option) => {\n                if (option.value === e.target.value) {\n                    this.processClickedOption(option);\n\n                } else {\n                    option.selected = false;\n                    option.removeAttribute('selected');\n                }\n            });\n            this.popup.hide();\n        } else {\n            this.processClickedOption(e.target, true);\n        }\n\n        this.selections();\n    };\n\n    processClickedOption = (option, multiple = false) => {\n        const isSelected = option.hasAttribute(\"selected\")\n        option.selected = !isSelected;\n\n        if (isSelected) {\n            option.removeAttribute('selected');\n            this.filterOutOption(option);\n        } else {\n            option.setAttribute('selected', '');\n            this.selectedOptions = multiple ? [...this.selectedOptions, option] : [option];\n        }\n    }\n\n    filterOutOption = (option) => {\n        this.selectedOptions = this.selectedOptions.filter((sOption) => {\n            return sOption.value !== option.value;\n        });\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 Array.from(this.querySelectorAll('wje-option[selected]'));\n    }\n\n    /**\n     * Returns the selected options.\n     * @returns {Array} The selected options.\n     */\n    getSelected() {\n        return this.selectedOptions.map((option) => {\n            return {\n                value: option.value,\n                text: option.textContent.trim(),\n            };\n        });\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 (option !== null) this.chips.appendChild(this.getChip(option));\n                if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {\n                    this.counter();\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        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.selectionChanged(this.selectedOptions.at(0), this.selectedOptions.length);\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        e.target.parentNode.removeChild(e.target);\n        this.processClickedOption(e.target.option, true);\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            this.processClickedOption(option, this.hasAttribute('multiple'));\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        if (form) {\n            this.internals.setFormValue(this.value);\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        this.native?.classList.toggle('disabled', disabled);\n        this.toggleAttribute('disabled', disabled);\n    }\n}\n","import Select from './select.element.js';\n\nexport default Select;\n\nSelect.define('wje-select', Select);\n"],"names":["_a"],"mappings":"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"}

package/dist/wje-tab-group.js

@@ -12,6 +12,21 @@ class TabGroup extends WJElement {
     super();
     __publicField(this, "className", "TabGroup");
   }
+  /**
+   * Sets the 'type' attribute of the element to the specified value.
+   * @param {string} value The value to set for the 'type' attribute.
+   */
+  set type(value) {
+    this.setAttribute("type", value);
+  }
+  /**
+   * Retrieves the `type` attribute of the element.
+   * If the `type` attribute is not set, it defaults to `'panel'`.
+   * @returns {string} The value of the `type` attribute or the default value `'panel'`.
+   */
+  get type() {
+    return this.getAttribute("type") || "panel";
+  }
   /**
    * Returns the CSS styles for the component.
    * @static
@@ -40,13 +55,18 @@ class TabGroup extends WJElement {
     }
   }
   /**
-   * Draws the component.
-   * @param {object} context The context for drawing.
-   * @param {object} store The store for drawing.
-   * @param {object} params The parameters for drawing.
-   * @returns {DocumentFragment}
+   * Creates and returns a document fragment containing a structured layout for a tab group.
+   * The tab group layout includes a `header` section with navigational elements,
+   * a `section` element for tab panels, and slots for customization such as additional navigation items,
+   * dropdowns, and more.
+   * The structure comprises:
+   * - A `div` container with relevant styling and part attributes.
+   * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).
+   * - A `section` for tab panels with a customizable `slot`.
+   * This function also initializes the `nav` and `moreDropdown` properties for external use.
+   * @returns {DocumentFragment} The completed document fragment containing the tab group layout.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -89,11 +109,13 @@ class TabGroup extends WJElement {
     return fragment;
   }
   /**
-   * Sets up the event listeners after the component is drawn.
+   * Executes necessary initializations and attaches event listeners after a drawing operation.
+   * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.
+   * @returns {void} Does not return a value.
    */
   afterDraw() {
     let activeTab = this.getActiveTab();
-    let activeTabName = activeTab ? activeTab[0].panel : this.getTabAll()[0].panel;
+    let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];
     this.setActiveTab(activeTabName);
     this.addEventListener("wje-tab:change", (e) => {
       if (e.detail.context.hasAttribute("disabled")) return;
@@ -104,7 +126,8 @@ class TabGroup extends WJElement {
     requestAnimationFrame(() => this.checkOverflow());
   }
   /**
-   * Removes the active attribute from all tabs and panels.
+   * Removes the 'active' class from all panel and tab elements.
+   * @returns {void} This method does not return a value.
    */
   removeActiveTab() {
     this.getPanelAll().forEach((el) => {
@@ -121,10 +144,12 @@ class TabGroup extends WJElement {
   setActiveTab(tab) {
     var _a;
     this.removeActiveTab();
-    const el = this.querySelector(`[panel="${tab}"]`);
+    const el = this.querySelector(`[${this.type}="${tab}"]`);
     el == null ? void 0 : el.classList.add("active");
-    (_a = this.querySelector(`[name="${tab}"]`)) == null ? void 0 : _a.classList.add("active");
-    this.dropdownActive(el);
+    if (this.type === "panel")
+      (_a = this.querySelector(`[name="${tab}"]`)) == null ? void 0 : _a.classList.add("active");
+    if (el)
+      this.dropdownActive(el);
   }
   /**
    * Returns the currently active tab.
@@ -155,10 +180,19 @@ class TabGroup extends WJElement {
   getPanelAllName() {
     return this.getPanelAll().map((el) => el.getAttribute("name"));
   }
+  /**
+   * Toggles the visibility of the "more" dropdown based on the presence of tabs in the "more" slot.
+   * @returns {void} Does not return a value.
+   */
   toggleMoreVisibility() {
     const hasTabsInMore = this.querySelector('wje-tab[slot="more"]');
     this.moreDropdown.hidden = !hasTabsInMore;
   }
+  /**
+   * Checks if the tabs within a navigation bar overflow the available space.
+   * Moves overflowing tabs into a dropdown menu and updates their state accordingly.
+   * @returns {void} This method does not return a value.
+   */
   checkOverflow() {
     const nav = this.nav;
     const moreBtn = this.moreDropdown;
@@ -180,6 +214,12 @@ class TabGroup extends WJElement {
       this.toggleMoreVisibility();
     });
   }
+  /**
+   * Toggles the "dropdown-active" class on the element based on its "active" status
+   * and the value of its "slot" attribute.
+   * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.
+   * @returns {void} This method does not return any value.
+   */
   dropdownActive(el) {
     if (el.classList.contains("active")) {
       if (el.getAttribute("slot") === "more")

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('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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"}
+{"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 * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.\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    /**\n     * Sets the 'type' attribute of the element to the specified value.\n     * @param {string} value The value to set for the 'type' attribute.\n     */\n    set type(value) {\n        this.setAttribute('type', value);\n    }\n\n    /**\n     * Retrieves the `type` attribute of the element.\n     * If the `type` attribute is not set, it defaults to `'panel'`.\n     * @returns {string} The value of the `type` attribute or the default value `'panel'`.\n     */\n    get type() {\n        return this.getAttribute('type') || 'panel';\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     * Creates and returns a document fragment containing a structured layout for a tab group.\n     * The tab group layout includes a `header` section with navigational elements,\n     * a `section` element for tab panels, and slots for customization such as additional navigation items,\n     * dropdowns, and more.\n     * The structure comprises:\n     * - A `div` container with relevant styling and part attributes.\n     * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n     * - A `section` for tab panels with a customizable `slot`.\n     * This function also initializes the `nav` and `moreDropdown` properties for external use.\n     * @returns {DocumentFragment} The completed document fragment containing the tab group layout.\n     */\n    draw() {\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     * Executes necessary initializations and attaches event listeners after a drawing operation.\n     * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];\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' class from all panel and tab elements.\n     * @returns {void} This method does not return a value.\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\n        const el = this.querySelector(`[${this.type}=\"${tab}\"]`)\n        el?.classList.add('active');\n\n        if(this.type === 'panel')\n            this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n        if(el)\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    /**\n     * Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n     * @returns {void} Does not return a value.\n     */\n    toggleMoreVisibility() {\n        const hasTabsInMore = this.querySelector('wje-tab[slot=\"more\"]');\n        this.moreDropdown.hidden = !hasTabsInMore;\n    }\n\n    /**\n     * Checks if the tabs within a navigation bar overflow the available space.\n     * Moves overflowing tabs into a dropdown menu and updates their state accordingly.\n     * @returns {void} This method does not return a value.\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    /**\n     * Toggles the \"dropdown-active\" class on the element based on its \"active\" status\n     * and the value of its \"slot\" attribute.\n     * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.\n     * @returns {void} This method does not return any value.\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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"}