wj-elements 0.1.166 → 0.1.168

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

@@ -121,6 +121,16 @@ export default class Options extends WJElement {
      * @returns {string} The search parameter name used for queries.
      */
     get searchParamName(): string;
+    /**
+     * Sets the queryParams attribute on the element.
+     * @param {string} value The query parameters to set, represented as a string.
+     */
+    set queryParams(value: string);
+    /**
+     * Retrieves the value of the 'query-params' attribute.
+     * @returns {string | null} The value of the 'query-params' attribute, or null if the attribute is not set.
+     */
+    get queryParams(): string | null;
     /**
      * Sets the lazy attribute.
      * @param {boolean} value The value to set for the lazy attribute.

package/dist/wje-options.js

@@ -226,6 +226,20 @@ class Options extends WJElement {
   get searchParamName() {
     return this.getAttribute("search-param-name") || "search";
   }
+  /**
+   * Sets the queryParams attribute on the element.
+   * @param {string} value The query parameters to set, represented as a string.
+   */
+  set queryParams(value) {
+    this.setAttribute("query-params", value);
+  }
+  /**
+   * Retrieves the value of the 'query-params' attribute.
+   * @returns {string | null} The value of the 'query-params' attribute, or null if the attribute is not set.
+   */
+  get queryParams() {
+    return this.getAttribute("query-params");
+  }
   /**
    * Checks if the lazy attribute is present.
    * @returns {boolean} True if the lazy attribute is present, false otherwise.
@@ -312,9 +326,9 @@ class Options extends WJElement {
       infiniteScroll.append(list);
       infiniteScroll.dataToHtml = this.htmlItem;
       infiniteScroll.setCustomData = async (page, signal) => {
-        let processedUrl = `${this.url}${this.search ? `/${this.search}` : ""}?page=${page}&size=${this.lazyLoadSize}`;
+        let processedUrl = `${this.url}${this.search ? `/${this.search}` : ""}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ""}`;
         if (this.hasSearchToQueryParams) {
-          processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&${this.searchParamName}=${this.search}` : ""}`;
+          processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ""}${this.search ? `&${this.searchParamName}=${this.search}` : ""}`;
         }
         let res = await this.service.get(processedUrl, null, false, signal);
         const filteredOptions = this.filterOutDrawnOptions(res);

package/dist/wje-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-options.js","sources":["../packages/wje-options/options.element.js","../packages/wje-options/options.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.element.js';\nimport List from '../wje-list/list.element.js';\nimport Option from '../wje-option/option.js';\n\n/**\n * `Options` is a custom web component that represents a set of options.\n * It extends from `WJElement`.\n * @summary This element represents a set of options.\n * @documentation https://elements.webjet.sk/components/options\n * @status stable\n * @augments {WJElement}\n * // @fires wje-options:load - Event fired when the options are loaded.\n * @tag wje-options\n */\nexport default class Options extends WJElement {\n    /**\n     * Stores the loaded options.\n     * @type {Array}\n     * @private\n     */\n    #loadedOptions = [];\n\n    #drawPreloadedElements = []\n\n    /**\n     * Creates an instance of Options.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    dependencies = {\n        'wje-option': Option,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-list': List,\n    };\n\n    className = 'Options';\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 ['search', 'attached'];\n    }\n\n    /**\n     * Sets the option array path attribute.\n     * @param {string} value The value to set for the option array path.\n     */\n    set optionArrayPath(value) {\n        this.setAttribute('option-array-path', value);\n    }\n\n    /**\n     * Gets the option array path attribute.\n     * @returns {string} The value of the option array path attribute or \"data\" if not set.\n     */\n    get optionArrayPath() {\n        return this.getAttribute('option-array-path');\n    }\n\n    /**\n     * Checks if the option array path attribute is present.\n     * @returns {boolean} True if the option array path attribute is present, false otherwise.\n     */\n    get hasOptionArrayPath() {\n        return this.hasAttribute('option-array-path');\n    }\n\n    /**\n     * Gets the dropdown height attribute.\n     * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n     */\n    get dropdownHeight() {\n        return this.getAttribute('dropdown-height') || '100%';\n    }\n\n    /**\n     * Sets the dropdown height attribute.\n     * @param {string} value The value to set for the dropdown height.\n     */\n    set dropdownHeight(value) {\n        this.setAttribute('dropdown-height', value);\n    }\n\n    /**\n     * Sets the item value attribute.\n     * @param {string} value The value to set for the item value.\n     */\n    set itemValue(value) {\n        this.setAttribute('item-value', value);\n    }\n\n    /**\n     * Gets the item value attribute.\n     * @returns {string} The value of the item value attribute or \"value\" if not set.\n     */\n    get itemValue() {\n        return this.getAttribute('item-value') || 'value';\n    }\n\n    /**\n     * Sets the item text attribute.\n     * @param {string} value The value to set for the item text.\n     */\n    set itemText(value) {\n        this.setAttribute('item-text', value);\n    }\n\n    /**\n     * Gets the item text attribute.\n     * @returns {string} The value of the item text attribute or \"text\" if not set.\n     */\n    get itemText() {\n        return this.getAttribute('item-text') || 'text';\n    }\n\n    /**\n     * Gets the lazy load size attribute.\n     * @returns {number} The value of the lazy load size attribute or 10 if not set.\n     */\n    get lazyLoadSize() {\n        return this.getAttribute('lazy-load-size') || 10;\n    }\n\n    /**\n     * Sets the lazy load size attribute.\n     * @param {number} value The value to set for the lazy load size.\n     */\n    set lazyLoadSize(value) {\n        this.setAttribute('lazy-load-size', value);\n    }\n\n    /**\n     * Sets the search attribute.\n     * @param {string} value The value to set for the search.\n     */\n    set search(value) {\n        this.setAttribute('search', value);\n    }\n\n    /**\n     * Gets the search attribute.\n     * @returns {string} The value of the search attribute.\n     */\n    get search() {\n        return this.getAttribute('search');\n    }\n\n    /**\n     * Checks if the search attribute is present.\n     * @returns {boolean} True if the search attribute is present, false otherwise.\n     */\n    get hasSearch() {\n        return this.hasAttribute('search');\n    }\n\n    /**\n     * Retrieves the value of the 'search-to-query-params' attribute from the current instance.\n     * @returns {string | null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.\n     */\n    get searchToQueryParams() {\n        return this.getAttribute('search-to-query-params');\n    }\n\n    /**\n     * Sets the value to define search-to-query params behavior.\n     * @param {string} value The value to be set for the search-to-query-params attribute.\n     */\n    set searchToQueryParams(value) {\n        this.setAttribute('search-to-query-params', value);\n    }\n\n    /**\n     * Determines whether the 'search-to-query-params' attribute is present on the element.\n     * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.\n     */\n    get hasSearchToQueryParams() {\n        return this.hasAttribute('search-to-query-params');\n    }\n\n    /**\n     * Sets the value of the search parameter name attribute.\n     * @param {string} value The string value to set as the search parameter name.\n     */\n    set searchParamName(value) {\n        this.setAttribute('search-param-name', value);\n    }\n\n    /**\n     * Gets the search parameter name used in queries.\n     * Retrieves the value of the 'search-param-name' attribute.\n     * If the attribute is not set, it defaults to 'search'.\n     * @returns {string} The search parameter name used for queries.\n     */\n    get searchParamName() {\n        return this.getAttribute('search-param-name') || 'search';\n    }\n    /**\n     * Checks if the lazy attribute is present.\n     * @returns {boolean} True if the lazy attribute is present, false otherwise.\n     */\n    get lazy() {\n        return this.hasAttribute('lazy');\n    }\n\n    /**\n     * Sets the lazy attribute.\n     * @param {boolean} value The value to set for the lazy attribute.\n     */\n    set lazy(value) {\n        this.setAttribute('lazy', value);\n    }\n\n    /**\n     * Gets the loaded options.\n     * @returns {Array} The loaded options.\n     */\n    get options() {\n        return this.loadedOptions?.flat();\n    }\n\n    /**\n     * Gets the loaded options.\n     * @type {Array}\n     */\n    get loadedOptions() {\n        return this.#loadedOptions;\n    }\n\n    /**\n     * Sets the loaded options.\n     * @type {Array}\n     */\n    set loadedOptions(loadedOptions) {\n        this.#loadedOptions = loadedOptions;\n    }\n\n    /**\n     * Array of preloaded elements.\n     * @type {Array}\n     * @private\n     */\n    get drawPreloadedElements() {\n        return this.#drawPreloadedElements;\n    }\n\n    set drawPreloadedElements(elements) {\n        this.#drawPreloadedElements = elements;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     * Fetches the pages and creates the options elements.\n     */\n    afterDraw() {\n        // event.dispatchCustomEvent(this, 'wje-options:load', {}); // nepomohlo to, v ff stale je scroll hore\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    async draw() {\n        let fragment = document.createDocumentFragment();\n\n        const slot = document.createElement('slot');\n        fragment.appendChild(slot);\n\n        if (this.hasAttribute('lazy')) {\n\n            if (this.contains(this.infiniteScroll)) {\n                this.drawPreloadedElements.forEach((el) => { el.remove() });\n                this.loadedOptions = [];\n                this.infiniteScroll.placementObj.innerHTML = '';\n                this.infiniteScroll.totalPages = 0;\n                this.infiniteScroll.refresh();\n\n                return fragment;\n            }\n\n            const infiniteScroll = document.createElement('wje-infinite-scroll');\n            infiniteScroll.setAttribute('placement', 'wje-list');\n            infiniteScroll.setAttribute('height', this.dropdownHeight);\n            infiniteScroll.setAttribute('object-name', this.optionArrayPath);\n\n            const list = document.createElement('wje-list');\n            infiniteScroll.append(list);\n\n            infiniteScroll.dataToHtml = this.htmlItem;\n\n            infiniteScroll.setCustomData = async (page, signal) => {\n                let processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}`;\n\n                if (this.hasSearchToQueryParams) {\n                    processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&${this.searchParamName}=${this.search}` : ''}`;\n                }\n\n                let res = await this.service.get(processedUrl, null, false, signal);\n                const filteredOptions = this.filterOutDrawnOptions(res);\n                this.loadedOptions.push(...this.processData(filteredOptions));\n\n                return filteredOptions;\n            };\n\n            event.addListener(infiniteScroll, 'wje-infinite-scroll:load', null, (e) => {\n                event.dispatchCustomEvent(this, 'wje-options:load', {});\n            });\n\n            if (this.hasAttribute('attached')) {\n                this.appendChild(infiniteScroll);\n                this.drawPreloadedElements.forEach((el) => {\n                    list.appendChild(el);\n                })\n            }\n\n            this.infiniteScroll = infiniteScroll;\n\n        } else {\n            this.response = await this.getPages();\n            let optionsData = this.filterOutDrawnOptions(this.response);\n            optionsData = this.processData(optionsData);\n\n            this.loadedOptions.push(...optionsData);\n\n            this.append(...optionsData.map(this.htmlItem));\n        }\n\n        return fragment;\n    }\n\n    /**\n     * Processes the given data and returns the options based on the option array path.\n     * @param {any} data The data to be processed.\n     * @returns {any} - The options based on the option array path.\n     */\n    processData(data) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n        let options = data;\n\n        splittedOptionArrayPath?.forEach((path) => {\n            options = options[path];\n        });\n\n        return options ?? [];\n    }\n\n    /**\n     * Filters out drawn options from the response.\n     * @param {object | null} response The response to filter.\n     * @returns {object} The filtered response.\n     */\n    filterOutDrawnOptions(response) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n        let filteredResponse = structuredClone(response);\n\n        filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n        return filteredResponse;\n    }\n\n    /**\n     * Recursively updates the object based on the provided path to the property.\n     * @param {object | Array | null} object\n     * @param {Array<string> | null} pathToProperty\n     * @returns {object | Array | null}\n     */\n    recursiveUpdate = (object, pathToProperty) => {\n        if (pathToProperty.length === 0) {\n            if (Array.isArray(object)) {\n                return object.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                );\n            } else {\n                console.error('Expected an array but got:', object, pathToProperty);\n                return [];\n            }\n        }\n\n        const [currentPath, ...remainingPath] = pathToProperty;\n        if (remainingPath.length > 0) {\n            object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n        } else {\n            object[currentPath] =\n                object[currentPath]?.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                ) ?? [];\n        }\n        return object;\n    };\n\n    /**\n     * Generates an HTML option element based on the provided item.\n     * @param {object} item The item to generate the option element for.\n     * @returns {HTMLElement} The generated option element.\n     */\n    htmlItem = (item) => {\n        let option = document.createElement('wje-option');\n\n        if (item[this.itemValue] === null || item[this.itemValue] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n        }\n\n        if (item[this.itemText] === null || item[this.itemText] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n        }\n\n        option.setAttribute('value', item[this.itemValue] ?? '');\n        option.innerText = item[this.itemText] ?? '';\n\n        return option;\n    };\n\n    /**\n     * Fetches the pages from the provided URL.\n     * @param {number} page The page number to fetch.\n     * @returns {Promise<object>} The fetched data.\n     * @throws Will throw an error if the response is not ok.\n     */\n    async getPages(page) {\n        const response = await fetch(this.url);\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Finds the selected option data based on the given selected option values.\n     * @param {Array} selectedOptionValues The array of selected option values.\n     * @returns {Array} - The array of option data that matches the selected option values.\n     */\n    findSelectedOptionData(selectedOptionValues = []) {\n        return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n    }\n\n    /**\n     * Adds an option to the element.\n     * @param {object} optionData The data of the option to be added.\n     */\n    addOption(optionData) {\n        if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n            return;\n        }\n\n        const item = this.htmlItem(optionData);\n        this.#drawPreloadedElements.push(item);\n        this.prepend(item);\n        this.loadedOptions.push(optionData);\n    }\n\n    /**\n     * Adds options to the element.\n     * @param {Array} optionsData The array of option data to be added.\n     * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n     */\n    addOptions(optionsData = [], silent = false) {\n        if (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n        else this.addOption(optionsData, silent);\n    }\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAee,MAAM,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAc3C,cAAc;AACV,UAAO;AATX;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAiB,CAAE;AAEnB,+CAAyB,CAAA;AAUzB,wCAAe;AAAA,MACX,cAAc;AAAA,MACd,uBAAuB;AAAA,MACvB,YAAY;AAAA,IACf;AAED,qCAAY;AAmVZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2CAAkB,CAAC,QAAQ,mBAAmB;;AAC1C,UAAI,eAAe,WAAW,GAAG;AAC7B,YAAI,MAAM,QAAQ,MAAM,GAAG;AACvB,iBAAO,OAAO;AAAA,YACV,CAAC,WACG,CAAC,KAAK,cAAc;AAAA,cAChB,CAAC,iBAAiB,aAAa,KAAK,SAAS,MAAM,OAAO,KAAK,SAAS;AAAA,YACpG;AAAA,UACiB;AAAA,QACjB,OAAmB;AACH,kBAAQ,MAAM,8BAA8B,QAAQ,cAAc;AAClE,iBAAO,CAAE;AAAA,QACzB;AAAA,MACA;AAEQ,YAAM,CAAC,aAAa,GAAG,aAAa,IAAI;AACxC,UAAI,cAAc,SAAS,GAAG;AAC1B,eAAO,WAAW,IAAI,KAAK,gBAAgB,OAAO,WAAW,GAAG,aAAa;AAAA,MACzF,OAAe;AACH,eAAO,WAAW,MACd,YAAO,WAAW,MAAlB,mBAAqB;AAAA,UACjB,CAAC,WACG,CAAC,KAAK,cAAc;AAAA,YAChB,CAAC,iBAAiB,aAAa,KAAK,SAAS,MAAM,OAAO,KAAK,SAAS;AAAA,UACpG;AAAA,cACqB,CAAE;AAAA,MACvB;AACQ,aAAO;AAAA,IACV;AAOD;AAAA;AAAA;AAAA;AAAA;AAAA,oCAAW,CAAC,SAAS;AACjB,UAAI,SAAS,SAAS,cAAc,YAAY;AAEhD,UAAI,KAAK,KAAK,SAAS,MAAM,QAAQ,KAAK,KAAK,SAAS,MAAM,QAAW;AACrE,gBAAQ,KAAK,YAAY,KAAK,UAAU,IAAI,CAAC,+BAA+B,KAAK,SAAS,EAAE;AAAA,MACxG;AAEQ,UAAI,KAAK,KAAK,QAAQ,MAAM,QAAQ,KAAK,KAAK,QAAQ,MAAM,QAAW;AACnE,gBAAQ,KAAK,YAAY,KAAK,UAAU,IAAI,CAAC,+BAA+B,KAAK,QAAQ,EAAE;AAAA,MACvG;AAEQ,aAAO,aAAa,SAAS,KAAK,KAAK,SAAS,KAAK,EAAE;AACvD,aAAO,YAAY,KAAK,KAAK,QAAQ,KAAK;AAE1C,aAAO;AAAA,IACV;AAAA,EA7YL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,UAAU,UAAU;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,gBAAgB,OAAO;AACvB,SAAK,aAAa,qBAAqB,KAAK;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,kBAAkB;AAClB,WAAO,KAAK,aAAa,mBAAmB;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,KAAK,aAAa,mBAAmB;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,iBAAiB;AACjB,WAAO,KAAK,aAAa,iBAAiB,KAAK;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,eAAe,OAAO;AACtB,SAAK,aAAa,mBAAmB,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,cAAc,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,YAAY,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,eAAe;AACf,WAAO,KAAK,aAAa,gBAAgB,KAAK;AAAA,EACtD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,aAAa,OAAO;AACpB,SAAK,aAAa,kBAAkB,KAAK;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO,OAAO;AACd,SAAK,aAAa,UAAU,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS;AACT,WAAO,KAAK,aAAa,QAAQ;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,QAAQ;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,sBAAsB;AACtB,WAAO,KAAK,aAAa,wBAAwB;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,0BAA0B,KAAK;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,yBAAyB;AACzB,WAAO,KAAK,aAAa,wBAAwB;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,gBAAgB,OAAO;AACvB,SAAK,aAAa,qBAAqB,KAAK;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,IAAI,kBAAkB;AAClB,WAAO,KAAK,aAAa,mBAAmB,KAAK;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAKI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;;AACV,YAAO,UAAK,kBAAL,mBAAoB;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,gBAAgB;AAChB,WAAO,mBAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,cAAc,eAAe;AAC7B,uBAAK,gBAAiB;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,wBAAwB;AACxB,WAAO,mBAAK;AAAA,EACpB;AAAA,EAEI,IAAI,sBAAsB,UAAU;AAChC,uBAAK,wBAAyB;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,YAAY;AAAA,EAEhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,MAAM,OAAO;AACT,QAAI,WAAW,SAAS,uBAAwB;AAEhD,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAS,YAAY,IAAI;AAEzB,QAAI,KAAK,aAAa,MAAM,GAAG;AAE3B,UAAI,KAAK,SAAS,KAAK,cAAc,GAAG;AACpC,aAAK,sBAAsB,QAAQ,CAAC,OAAO;AAAE,aAAG,OAAM;AAAA,SAAI;AAC1D,aAAK,gBAAgB,CAAE;AACvB,aAAK,eAAe,aAAa,YAAY;AAC7C,aAAK,eAAe,aAAa;AACjC,aAAK,eAAe,QAAS;AAE7B,eAAO;AAAA,MACvB;AAEY,YAAM,iBAAiB,SAAS,cAAc,qBAAqB;AACnE,qBAAe,aAAa,aAAa,UAAU;AACnD,qBAAe,aAAa,UAAU,KAAK,cAAc;AACzD,qBAAe,aAAa,eAAe,KAAK,eAAe;AAE/D,YAAM,OAAO,SAAS,cAAc,UAAU;AAC9C,qBAAe,OAAO,IAAI;AAE1B,qBAAe,aAAa,KAAK;AAEjC,qBAAe,gBAAgB,OAAO,MAAM,WAAW;AACnD,YAAI,eAAe,GAAG,KAAK,GAAG,GAAG,KAAK,SAAS,IAAI,KAAK,MAAM,KAAK,EAAE,SAAS,IAAI,SAAS,KAAK,YAAY;AAE5G,YAAI,KAAK,wBAAwB;AAC7B,yBAAe,GAAG,KAAK,GAAG,SAAS,IAAI,SAAS,KAAK,YAAY,GAAG,KAAK,SAAS,IAAI,KAAK,eAAe,IAAI,KAAK,MAAM,KAAK,EAAE;AAAA,QACpJ;AAEgB,YAAI,MAAM,MAAM,KAAK,QAAQ,IAAI,cAAc,MAAM,OAAO,MAAM;AAClE,cAAM,kBAAkB,KAAK,sBAAsB,GAAG;AACtD,aAAK,cAAc,KAAK,GAAG,KAAK,YAAY,eAAe,CAAC;AAE5D,eAAO;AAAA,MACV;AAED,YAAM,YAAY,gBAAgB,4BAA4B,MAAM,CAAC,MAAM;AACvE,cAAM,oBAAoB,MAAM,oBAAoB,CAAA,CAAE;AAAA,MACtE,CAAa;AAED,UAAI,KAAK,aAAa,UAAU,GAAG;AAC/B,aAAK,YAAY,cAAc;AAC/B,aAAK,sBAAsB,QAAQ,CAAC,OAAO;AACvC,eAAK,YAAY,EAAE;AAAA,QACtB,CAAA;AAAA,MACjB;AAEY,WAAK,iBAAiB;AAAA,IAElC,OAAe;AACH,WAAK,WAAW,MAAM,KAAK,SAAU;AACrC,UAAI,cAAc,KAAK,sBAAsB,KAAK,QAAQ;AAC1D,oBAAc,KAAK,YAAY,WAAW;AAE1C,WAAK,cAAc,KAAK,GAAG,WAAW;AAEtC,WAAK,OAAO,GAAG,YAAY,IAAI,KAAK,QAAQ,CAAC;AAAA,IACzD;AAEQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,YAAY,MAAM;;AACd,UAAM,0BAA0B,KAAK,mBAAkB,UAAK,oBAAL,mBAAsB,MAAM,OAAO;AAC1F,QAAI,UAAU;AAEd,uEAAyB,QAAQ,CAAC,SAAS;AACvC,gBAAU,QAAQ,IAAI;AAAA,IAClC;AAEQ,WAAO,WAAW,CAAE;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,sBAAsB,UAAU;;AAC5B,UAAM,0BAA0B,KAAK,mBAAkB,UAAK,oBAAL,mBAAsB,MAAM,OAAO,CAAE;AAC5F,QAAI,mBAAmB,gBAAgB,QAAQ;AAE/C,uBAAmB,KAAK,gBAAgB,kBAAkB,uBAAuB;AACjF,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkEI,MAAM,SAAS,MAAM;AACjB,UAAM,WAAW,MAAM,MAAM,KAAK,GAAG;AACrC,QAAI,CAAC,SAAS,IAAI;AACd,YAAM,IAAI,MAAM,sBAAsB,SAAS,MAAM,EAAE;AAAA,IACnE;AACQ,WAAO,MAAM,SAAS,KAAM;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,uBAAuB,uBAAuB,IAAI;AAC9C,WAAO,KAAK,QAAQ,OAAO,CAAC,WAAW,qBAAqB,SAAS,OAAO,KAAK,SAAS,CAAC,CAAC;AAAA,EACpG;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,UAAU,YAAY;AAClB,QAAI,KAAK,cAAc,KAAK,CAAC,WAAW,OAAO,KAAK,SAAS,MAAM,WAAW,KAAK,SAAS,CAAC,GAAG;AAC5F;AAAA,IACZ;AAEQ,UAAM,OAAO,KAAK,SAAS,UAAU;AACrC,uBAAK,wBAAuB,KAAK,IAAI;AACrC,SAAK,QAAQ,IAAI;AACjB,SAAK,cAAc,KAAK,UAAU;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,cAAc,IAAI,SAAS,OAAO;AACzC,QAAI,MAAM,QAAQ,WAAW,EAAG,4CAAa,QAAQ,CAAC,OAAO,KAAK,UAAU,IAAI,MAAM;AAAA,QACjF,MAAK,UAAU,aAAa,MAAM;AAAA,EAC/C;AACA;AAxcI;AAEA;ACnBJ,QAAQ,OAAO,eAAe,OAAO;"}
+{"version":3,"file":"wje-options.js","sources":["../packages/wje-options/options.element.js","../packages/wje-options/options.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.element.js';\nimport List from '../wje-list/list.element.js';\nimport Option from '../wje-option/option.js';\n\n/**\n * `Options` is a custom web component that represents a set of options.\n * It extends from `WJElement`.\n * @summary This element represents a set of options.\n * @documentation https://elements.webjet.sk/components/options\n * @status stable\n * @augments {WJElement}\n * // @fires wje-options:load - Event fired when the options are loaded.\n * @tag wje-options\n */\nexport default class Options extends WJElement {\n    /**\n     * Stores the loaded options.\n     * @type {Array}\n     * @private\n     */\n    #loadedOptions = [];\n\n    #drawPreloadedElements = []\n\n    /**\n     * Creates an instance of Options.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    dependencies = {\n        'wje-option': Option,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-list': List,\n    };\n\n    className = 'Options';\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 ['search', 'attached'];\n    }\n\n    /**\n     * Sets the option array path attribute.\n     * @param {string} value The value to set for the option array path.\n     */\n    set optionArrayPath(value) {\n        this.setAttribute('option-array-path', value);\n    }\n\n    /**\n     * Gets the option array path attribute.\n     * @returns {string} The value of the option array path attribute or \"data\" if not set.\n     */\n    get optionArrayPath() {\n        return this.getAttribute('option-array-path');\n    }\n\n    /**\n     * Checks if the option array path attribute is present.\n     * @returns {boolean} True if the option array path attribute is present, false otherwise.\n     */\n    get hasOptionArrayPath() {\n        return this.hasAttribute('option-array-path');\n    }\n\n    /**\n     * Gets the dropdown height attribute.\n     * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n     */\n    get dropdownHeight() {\n        return this.getAttribute('dropdown-height') || '100%';\n    }\n\n    /**\n     * Sets the dropdown height attribute.\n     * @param {string} value The value to set for the dropdown height.\n     */\n    set dropdownHeight(value) {\n        this.setAttribute('dropdown-height', value);\n    }\n\n    /**\n     * Sets the item value attribute.\n     * @param {string} value The value to set for the item value.\n     */\n    set itemValue(value) {\n        this.setAttribute('item-value', value);\n    }\n\n    /**\n     * Gets the item value attribute.\n     * @returns {string} The value of the item value attribute or \"value\" if not set.\n     */\n    get itemValue() {\n        return this.getAttribute('item-value') || 'value';\n    }\n\n    /**\n     * Sets the item text attribute.\n     * @param {string} value The value to set for the item text.\n     */\n    set itemText(value) {\n        this.setAttribute('item-text', value);\n    }\n\n    /**\n     * Gets the item text attribute.\n     * @returns {string} The value of the item text attribute or \"text\" if not set.\n     */\n    get itemText() {\n        return this.getAttribute('item-text') || 'text';\n    }\n\n    /**\n     * Gets the lazy load size attribute.\n     * @returns {number} The value of the lazy load size attribute or 10 if not set.\n     */\n    get lazyLoadSize() {\n        return this.getAttribute('lazy-load-size') || 10;\n    }\n\n    /**\n     * Sets the lazy load size attribute.\n     * @param {number} value The value to set for the lazy load size.\n     */\n    set lazyLoadSize(value) {\n        this.setAttribute('lazy-load-size', value);\n    }\n\n    /**\n     * Sets the search attribute.\n     * @param {string} value The value to set for the search.\n     */\n    set search(value) {\n        this.setAttribute('search', value);\n    }\n\n    /**\n     * Gets the search attribute.\n     * @returns {string} The value of the search attribute.\n     */\n    get search() {\n        return this.getAttribute('search');\n    }\n\n    /**\n     * Checks if the search attribute is present.\n     * @returns {boolean} True if the search attribute is present, false otherwise.\n     */\n    get hasSearch() {\n        return this.hasAttribute('search');\n    }\n\n    /**\n     * Retrieves the value of the 'search-to-query-params' attribute from the current instance.\n     * @returns {string | null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.\n     */\n    get searchToQueryParams() {\n        return this.getAttribute('search-to-query-params');\n    }\n\n    /**\n     * Sets the value to define search-to-query params behavior.\n     * @param {string} value The value to be set for the search-to-query-params attribute.\n     */\n    set searchToQueryParams(value) {\n        this.setAttribute('search-to-query-params', value);\n    }\n\n    /**\n     * Determines whether the 'search-to-query-params' attribute is present on the element.\n     * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.\n     */\n    get hasSearchToQueryParams() {\n        return this.hasAttribute('search-to-query-params');\n    }\n\n    /**\n     * Sets the value of the search parameter name attribute.\n     * @param {string} value The string value to set as the search parameter name.\n     */\n    set searchParamName(value) {\n        this.setAttribute('search-param-name', value);\n    }\n\n    /**\n     * Gets the search parameter name used in queries.\n     * Retrieves the value of the 'search-param-name' attribute.\n     * If the attribute is not set, it defaults to 'search'.\n     * @returns {string} The search parameter name used for queries.\n     */\n    get searchParamName() {\n        return this.getAttribute('search-param-name') || 'search';\n    }\n\n    /**\n     * Sets the queryParams attribute on the element.\n     * @param {string} value The query parameters to set, represented as a string.\n     */\n    set queryParams(value) {\n        this.setAttribute('query-params', value);\n    }\n\n    /**\n     * Retrieves the value of the 'query-params' attribute.\n     * @returns {string | null} The value of the 'query-params' attribute, or null if the attribute is not set.\n     */\n    get queryParams() {\n        return this.getAttribute('query-params');\n    }\n\n    /**\n     * Checks if the lazy attribute is present.\n     * @returns {boolean} True if the lazy attribute is present, false otherwise.\n     */\n    get lazy() {\n        return this.hasAttribute('lazy');\n    }\n\n    /**\n     * Sets the lazy attribute.\n     * @param {boolean} value The value to set for the lazy attribute.\n     */\n    set lazy(value) {\n        this.setAttribute('lazy', value);\n    }\n\n    /**\n     * Gets the loaded options.\n     * @returns {Array} The loaded options.\n     */\n    get options() {\n        return this.loadedOptions?.flat();\n    }\n\n    /**\n     * Gets the loaded options.\n     * @type {Array}\n     */\n    get loadedOptions() {\n        return this.#loadedOptions;\n    }\n\n    /**\n     * Sets the loaded options.\n     * @type {Array}\n     */\n    set loadedOptions(loadedOptions) {\n        this.#loadedOptions = loadedOptions;\n    }\n\n    /**\n     * Array of preloaded elements.\n     * @type {Array}\n     * @private\n     */\n    get drawPreloadedElements() {\n        return this.#drawPreloadedElements;\n    }\n\n    set drawPreloadedElements(elements) {\n        this.#drawPreloadedElements = elements;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     * Fetches the pages and creates the options elements.\n     */\n    afterDraw() {\n        // event.dispatchCustomEvent(this, 'wje-options:load', {}); // nepomohlo to, v ff stale je scroll hore\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    async draw() {\n        let fragment = document.createDocumentFragment();\n\n        const slot = document.createElement('slot');\n        fragment.appendChild(slot);\n\n        if (this.hasAttribute('lazy')) {\n\n            if (this.contains(this.infiniteScroll)) {\n                this.drawPreloadedElements.forEach((el) => { el.remove() });\n                this.loadedOptions = [];\n                this.infiniteScroll.placementObj.innerHTML = '';\n                this.infiniteScroll.totalPages = 0;\n                this.infiniteScroll.refresh();\n\n                return fragment;\n            }\n\n            const infiniteScroll = document.createElement('wje-infinite-scroll');\n            infiniteScroll.setAttribute('placement', 'wje-list');\n            infiniteScroll.setAttribute('height', this.dropdownHeight);\n            infiniteScroll.setAttribute('object-name', this.optionArrayPath);\n\n            const list = document.createElement('wje-list');\n            infiniteScroll.append(list);\n\n            infiniteScroll.dataToHtml = this.htmlItem;\n\n            infiniteScroll.setCustomData = async (page, signal) => {\n                let processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}`;\n\n                if (this.hasSearchToQueryParams) {\n                    processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}${this.search ? `&${this.searchParamName}=${this.search}` : ''}`;\n                }\n\n                let res = await this.service.get(processedUrl, null, false, signal);\n                const filteredOptions = this.filterOutDrawnOptions(res);\n                this.loadedOptions.push(...this.processData(filteredOptions));\n\n                return filteredOptions;\n            };\n\n            event.addListener(infiniteScroll, 'wje-infinite-scroll:load', null, (e) => {\n                event.dispatchCustomEvent(this, 'wje-options:load', {});\n            });\n\n            if (this.hasAttribute('attached')) {\n                this.appendChild(infiniteScroll);\n                this.drawPreloadedElements.forEach((el) => {\n                    list.appendChild(el);\n                })\n            }\n\n            this.infiniteScroll = infiniteScroll;\n\n        } else {\n            this.response = await this.getPages();\n            let optionsData = this.filterOutDrawnOptions(this.response);\n            optionsData = this.processData(optionsData);\n\n            this.loadedOptions.push(...optionsData);\n\n            this.append(...optionsData.map(this.htmlItem));\n        }\n\n        return fragment;\n    }\n\n    /**\n     * Processes the given data and returns the options based on the option array path.\n     * @param {any} data The data to be processed.\n     * @returns {any} - The options based on the option array path.\n     */\n    processData(data) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n        let options = data;\n\n        splittedOptionArrayPath?.forEach((path) => {\n            options = options[path];\n        });\n\n        return options ?? [];\n    }\n\n    /**\n     * Filters out drawn options from the response.\n     * @param {object | null} response The response to filter.\n     * @returns {object} The filtered response.\n     */\n    filterOutDrawnOptions(response) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n        let filteredResponse = structuredClone(response);\n\n        filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n        return filteredResponse;\n    }\n\n    /**\n     * Recursively updates the object based on the provided path to the property.\n     * @param {object | Array | null} object\n     * @param {Array<string> | null} pathToProperty\n     * @returns {object | Array | null}\n     */\n    recursiveUpdate = (object, pathToProperty) => {\n        if (pathToProperty.length === 0) {\n            if (Array.isArray(object)) {\n                return object.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                );\n            } else {\n                console.error('Expected an array but got:', object, pathToProperty);\n                return [];\n            }\n        }\n\n        const [currentPath, ...remainingPath] = pathToProperty;\n        if (remainingPath.length > 0) {\n            object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n        } else {\n            object[currentPath] =\n                object[currentPath]?.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                ) ?? [];\n        }\n        return object;\n    };\n\n    /**\n     * Generates an HTML option element based on the provided item.\n     * @param {object} item The item to generate the option element for.\n     * @returns {HTMLElement} The generated option element.\n     */\n    htmlItem = (item) => {\n        let option = document.createElement('wje-option');\n\n        if (item[this.itemValue] === null || item[this.itemValue] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n        }\n\n        if (item[this.itemText] === null || item[this.itemText] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n        }\n\n        option.setAttribute('value', item[this.itemValue] ?? '');\n        option.innerText = item[this.itemText] ?? '';\n\n        return option;\n    };\n\n    /**\n     * Fetches the pages from the provided URL.\n     * @param {number} page The page number to fetch.\n     * @returns {Promise<object>} The fetched data.\n     * @throws Will throw an error if the response is not ok.\n     */\n    async getPages(page) {\n        const response = await fetch(this.url);\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Finds the selected option data based on the given selected option values.\n     * @param {Array} selectedOptionValues The array of selected option values.\n     * @returns {Array} - The array of option data that matches the selected option values.\n     */\n    findSelectedOptionData(selectedOptionValues = []) {\n        return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n    }\n\n    /**\n     * Adds an option to the element.\n     * @param {object} optionData The data of the option to be added.\n     */\n    addOption(optionData) {\n        if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n            return;\n        }\n\n        const item = this.htmlItem(optionData);\n        this.#drawPreloadedElements.push(item);\n        this.prepend(item);\n        this.loadedOptions.push(optionData);\n    }\n\n    /**\n     * Adds options to the element.\n     * @param {Array} optionsData The array of option data to be added.\n     * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n     */\n    addOptions(optionsData = [], silent = false) {\n        if (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n        else this.addOption(optionsData, silent);\n    }\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":[],"mappings":"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"}

package/dist/wje-radio-group.js

@@ -129,7 +129,7 @@ class RadioGroup extends WJElement {
    * Adds event listeners after the component is drawn. Handles the selection of radio buttons.
    */
   afterDraw() {
-    console.log("BINDING GROUP");
+    this.checkRadio(this.value);
     this.addEventListener("wje-radio:input", (e) => {
       this.value = e.detail.context.value;
     });

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

@@ -1 +1 @@
-{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends WJElement {\n    /**\n     * Creates an instance of RadioGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals = this.attachInternals();\n    }\n\n    className = 'RadioGroup';\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     * Whether the input is associated with a form.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        if (this.checkRadio(value)) {\n            this.setAttribute('value', value);\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.getAttribute('value');\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 up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the radio group.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n        let slot = document.createElement('slot');\n\n        let label = document.createElement('label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        if (this.label) {\n            native.appendChild(label);\n        }\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n     */\n    afterDraw() {\n        console.log(\"BINDING GROUP\")\n        this.addEventListener('wje-radio:input', (e) => {\n            this.value = e.detail.context.value;\n        });\n    }\n\n    /**\n     * Returns the radio button with the given value.\n     * @param {string} value The value of the radio button.\n     * @returns {Radio} The radio button.\n     */\n    getRadioByValue(value) {\n        return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n    }\n\n    /**\n     * Removes the check from all radio buttons.\n     */\n    removeCheck() {\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) el.checked = false;\n        });\n    }\n\n    /**\n     * Sets the given radio button to checked.\n     */\n    checkRadio(value) {\n        let foundRadio = false\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) {\n                el.checked = el.value === value;\n                if (el.checked) {\n                    foundRadio = true\n                }\n            }\n        });\n\n        return foundRadio\n    }\n\n    /**\n     * Retrieves all direct child elements of the current element.\n     * @returns {HTMLElement[]} An array of child elements.\n     */\n    getAllElements() {\n        return Array.from(this.children);\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    }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends WJElement {\n    /**\n     * Creates an instance of RadioGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals = this.attachInternals();\n    }\n\n    className = 'RadioGroup';\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     * Whether the input is associated with a form.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        if (this.checkRadio(value)) {\n            this.setAttribute('value', value);\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.getAttribute('value');\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 up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the radio group.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n        let slot = document.createElement('slot');\n\n        let label = document.createElement('label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        if (this.label) {\n            native.appendChild(label);\n        }\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n     */\n    afterDraw() {\n        this.checkRadio(this.value);\n\n        this.addEventListener('wje-radio:input', (e) => {\n            this.value = e.detail.context.value;\n        });\n    }\n\n    /**\n     * Returns the radio button with the given value.\n     * @param {string} value The value of the radio button.\n     * @returns {Radio} The radio button.\n     */\n    getRadioByValue(value) {\n        return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n    }\n\n    /**\n     * Removes the check from all radio buttons.\n     */\n    removeCheck() {\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) el.checked = false;\n        });\n    }\n\n    /**\n     * Sets the given radio button to checked.\n     */\n    checkRadio(value) {\n        let foundRadio = false\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) {\n                el.checked = el.value === value;\n                if (el.checked) {\n                    foundRadio = true\n                }\n            }\n        });\n\n        return foundRadio\n    }\n\n    /**\n     * Retrieves all direct child elements of the current element.\n     * @returns {HTMLElement[]} An array of child elements.\n     */\n    getAllElements() {\n        return Array.from(this.children);\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    }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":"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"}

package/dist/wje-radio.js

@@ -87,7 +87,7 @@ class Radio extends WJElement {
    */
   afterDraw() {
     if (!this.hasAttribute("disabled")) {
-      event.addListener(this, "change", "wje-radio:change");
+      event.addListener(this.input, "change", "wje-radio:change");
       event.addListener(this, "input", "wje-radio:input");
     }
   }

package/dist/wje-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n    /**\n     * Creates an instance of Radio.\n     */\n    constructor() {\n        super();\n\n        this._checked = false;\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        this._checked = value;\n        this.toggleAttribute('checked', value);\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this._checked;\n    }\n\n    /**\n     * Sets the color of the radio button.\n     * @type {string}\n     */\n    className = 'Radio';\n\n    /**\n     * Returns the CSS styles for the component.\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 ['checked'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the radio button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio');\n\n        if (this.color) native.classList.add(this.color);\n\n        this.input = document.createElement('input');\n        this.input.type = 'radio';\n        this.input.id = this.value + '-radio';\n        this.input.name = this.value + '-radio';\n        this.input.checked = this.hasAttribute('checked');\n        this.input.disabled = this.hasAttribute('disabled');\n\n        let label = document.createElement('label');\n        label.htmlFor = this.value + '-radio';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(this.input);\n        native.appendChild(label);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners for the component.\n     */\n    afterDraw() {\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this, 'change', 'wje-radio:change');\n            event.addListener(this, 'input', 'wje-radio:input');\n        }\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\n        this.checked = e.target.checked;\n    };\n\n    /**\n     * Toggles the radio button.\n     */\n    beforeDisconnect() {\n        event.removeElement(this);\n    }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAO;AA0BX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAjGG,SAAK,WAAW;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,WAAW;AAChB,SAAK,gBAAgB,WAAW,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,SAAK,MAAM,OAAO,KAAK,QAAQ;AAC/B,SAAK,MAAM,UAAU,KAAK,aAAa,SAAS;AAChD,SAAK,MAAM,WAAW,KAAK,aAAa,UAAU;AAElD,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,MAAM,UAAU,kBAAkB;AACpD,YAAM,YAAY,MAAM,SAAS,iBAAiB;AAAA,IAC9D;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAaI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;AC7HA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n    /**\n     * Creates an instance of Radio.\n     */\n    constructor() {\n        super();\n\n        this._checked = false;\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        this._checked = value;\n        this.toggleAttribute('checked', value);\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this._checked;\n    }\n\n    /**\n     * Sets the color of the radio button.\n     * @type {string}\n     */\n    className = 'Radio';\n\n    /**\n     * Returns the CSS styles for the component.\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 ['checked'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the radio button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio');\n\n        if (this.color) native.classList.add(this.color);\n\n        this.input = document.createElement('input');\n        this.input.type = 'radio';\n        this.input.id = this.value + '-radio';\n        this.input.name = this.value + '-radio';\n        this.input.checked = this.hasAttribute('checked');\n        this.input.disabled = this.hasAttribute('disabled');\n\n        let label = document.createElement('label');\n        label.htmlFor = this.value + '-radio';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(this.input);\n        native.appendChild(label);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners for the component.\n     */\n    afterDraw() {\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this.input, 'change', 'wje-radio:change');\n            event.addListener(this, 'input', 'wje-radio:input');\n        }\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\n        this.checked = e.target.checked;\n    };\n\n    /**\n     * Toggles the radio button.\n     */\n    beforeDisconnect() {\n        event.removeElement(this);\n    }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAO;AA0BX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAjGG,SAAK,WAAW;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,WAAW;AAChB,SAAK,gBAAgB,WAAW,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,SAAK,MAAM,OAAO,KAAK,QAAQ;AAC/B,SAAK,MAAM,UAAU,KAAK,aAAa,SAAS;AAChD,SAAK,MAAM,WAAW,KAAK,aAAa,UAAU;AAElD,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,KAAK,OAAO,UAAU,kBAAkB;AAC1D,YAAM,YAAY,MAAM,SAAS,iBAAiB;AAAA,IAC9D;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAaI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;AC7HA,MAAM,OAAO,aAAa,KAAK;"}

package/package.json

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