wj-elements 0.1.246 → 0.1.248

package/dist/{icon-DGGYr4tD.js → icon-DY5AZ6xM.js}

@@ -189,13 +189,11 @@ class Icon extends WJElement {
     let lazyImageObserver = new IntersectionObserver((entries, observer) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          if (typeof this.url === "string" && this.url.trim() !== "") {
-            getSvgContent(this.url).then((svgContent) => {
-              var _a;
-              this.native.innerHTML = iconContent == null ? void 0 : iconContent.get(this.url);
-              (_a = this.native.querySelector("svg")) == null ? void 0 : _a.setAttribute("part", "svg");
-            });
-          }
+          getSvgContent(this.url).then((svgContent) => {
+            var _a;
+            this.native.innerHTML = iconContent == null ? void 0 : iconContent.get(this.url);
+            (_a = this.native.querySelector("svg")) == null ? void 0 : _a.setAttribute("part", "svg");
+          });
           this.classList.remove("lazy");
           lazyImageObserver.unobserve(entry.target);
         }
@@ -210,4 +208,4 @@ export {
   registerIconLibrary as r,
   unregisterIconLibrary as u
 };
-//# sourceMappingURL=icon-DGGYr4tD.js.map
+//# sourceMappingURL=icon-DY5AZ6xM.js.map

package/dist/{icon-DGGYr4tD.js.map → icon-DY5AZ6xM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-DGGYr4tD.js","sources":["../packages/utils/icon-library.js","../packages/wje-icon/service/service.js","../packages/wje-icon/icon.element.js","../packages/wje-icon/icon.js"],"sourcesContent":["import { getBasePath } from \"./base-path.js\";\n\nlet registry = [];\n\nregisterIconLibrary(\"default\", {\n  resolver: (name, style) => getBasePath(`assets/img/icons/${style}/${name}.svg`)\n});\n\nexport function getIconLibrary(name) {\n  return registry.find(lib => lib.name === name);\n}\n\nexport function registerIconLibrary(name, options) {\n  unregisterIconLibrary(name);\n  registry.push({\n    name,\n    resolver: options.resolver,\n  });\n}\n\nexport function unregisterIconLibrary(name) {\n  registry = registry.filter(lib => lib.name !== name);\n}","import { getIconLibrary } from \"../../utils/icon-library.js\";\n\nexport const iconContent = new Map();\nconst requests = new Map();\n\nlet parser;\n\n/**\n * Validates and returns a trimmed source string if it meets the required criteria.\n * @param {string} src The source string to validate and trim.\n * @returns {string|null} The validated and trimmed source string, or `null` if invalid.\n * @example\n * getSrc('  https://example.com/image.jpg  '); // Returns 'https://example.com/image.jpg'\n * getSrc('invalid-src'); // Returns null\n */\nexport const getSrc = (src) => {\n    if (isStr(src)) {\n        src = src.trim();\n        if (isSrc(src)) {\n            return src;\n        }\n    }\n    return null;\n};\n\n/**\n * Checks if a given string is a valid source based on specific criteria.\n * @param {string} str The string to validate as a source.\n * @returns {boolean} `true` if the string is considered a valid source, `false` otherwise.\n * @example\n * isSrc('https://example.com/image.jpg'); // Returns true\n * isSrc('image.jpg'); // Returns true\n * isSrc('invalid-src'); // Returns false\n */\nexport const isSrc = (str) => str.length > 0 && /(\\/|\\.)/.test(str);\n\n/**\n * Checks if the provided URL is an SVG data URL.\n * @param {string} url The URL to check.\n * @returns {boolean} - Returns `true` if the URL starts with 'data:image/svg+xml', otherwise `false`.\n * @example\n * isSvgDataUrl('data:image/svg+xml;base64,...'); // Returns true\n * isSvgDataUrl('https://example.com/image.svg'); // Returns false\n */\nexport const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');\n\n/**\n * Checks if the provided URL is an encoded data URL.\n * @param {string} url The URL to check.\n * @returns {boolean} - Returns `true` if the URL contains ';utf8,', otherwise `false`.\n * @example\n * isEncodedDataUrl('data:text/plain;charset=utf8,...'); // Returns true\n * isEncodedDataUrl('https://example.com/file.txt');     // Returns false\n */\nexport const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;\n\n/**\n * Checks if the provided value is of string type.\n * @param {*} val The value to check.\n * @returns {boolean} - Returns `true` if the value is a string, otherwise `false`.\n * @example\n * isStr('Hello, World!'); // Returns true\n * isStr(12345);           // Returns false\n */\nexport const isStr = (val) => typeof val === 'string';\n\n/**\n * Validates the provided SVG content and ensures it contains a valid SVG element.\n * @param {string} svgContent The SVG content to validate.\n * @returns {string} Returns the validated SVG content as a string if valid, otherwise an empty string.\n * @example\n * const validSvg = '&lt;svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\">&lt;/svg>';\n * validateContent(validSvg); // Returns '&lt;svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\">&lt;/svg>'\n * const invalidSvg = '&lt;div>&lt;/div>';\n * validateContent(invalidSvg); // Returns ''\n */\nexport const validateContent = (svgContent) => {\n    const div = document.createElement('div');\n    div.innerHTML = svgContent;\n\n    const svgElm = div.firstElementChild;\n    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n        const svgClass = svgElm.getAttribute('class') || '';\n\n        if (isValid(svgElm)) {\n            return div.innerHTML;\n        }\n    }\n    return '';\n};\n\n/**\n * Validates an element to ensure it does not contain potentially unsafe content.\n * @param {Element|Node} elm The element or node to validate.\n * @returns {boolean} - Returns `true` if the element is valid, otherwise `false`.\n * @description\n * This function checks the following:\n * 1. The element is an element node (nodeType 1).\n * 2. The element is not a `&lt;script>` tag.\n * 3. The element does not contain any `on*` event handler attributes (e.g., `onclick`).\n * 4. All child nodes recursively pass the same validation.\n * @example\n * const validElement = document.createElement('div');\n * isValid(validElement); // Returns true\n *\n * const scriptElement = document.createElement('script');\n * isValid(scriptElement); // Returns false\n *\n *  const divWithOnClick = document.createElement('div');\n * divWithOnClick.setAttribute('onclick', 'alert(\"hi\")');\n * isValid(divWithOnClick); // Returns false\n */\nexport const isValid = (elm) => {\n    // Only element nodes\n    if (elm.nodeType === 1) {\n        // Check for script elements\n        if (elm.nodeName.toLowerCase() === 'script') {\n            return false;\n        }\n\n        // Check for on* attributes\n        for (let i = 0; i < elm.attributes.length; i++) {\n            const name = elm.attributes[i].name;\n            if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {\n                return false;\n            }\n        }\n\n        // Check for child nodes\n        for (let i = 0; i < elm.childNodes.length; i++) {\n            if (!isValid(elm.childNodes[i])) {\n                return false;\n            }\n        }\n    }\n    return true;\n};\n\n/**\n * Fetches and optionally sanitizes SVG content from a given URL.\n * @param {string} url The URL of the SVG resource or data URL.\n * @param {boolean} [sanitize] Whether to sanitize the SVG content. Defaults to `true`.\n * @returns {Promise<void>} A promise that resolves when the SVG content is fetched and stored.\n * @description\n * This function performs the following:\n * - If the URL is an SVG data URL and encoded, it parses the content to extract the SVG.\n * - If the URL is a standard HTTP/HTTPS URL, it fetches the content.\n * - Optionally sanitizes the fetched SVG content.\n * - Caches the content for future use.\n * @example\n * getSvgContent('https://example.com/icon.svg').then(() => {\n *   console.log('SVG content fetched and stored.');\n * });\n * @example\n * getSvgContent('data:image/svg+xml;base64,...', false).then(() => {\n *   console.log('SVG data URL processed without sanitization.');\n * });\n */\nexport const getSvgContent = (url, sanitize) => {\n    let req = requests.get(url);\n    if (!req) {\n        if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n            if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {\n                if (!parser) {\n                    parser = new DOMParser();\n                }\n                const doc = parser.parseFromString(url, 'text/html');\n                const svg = doc.querySelector('svg');\n                if (svg) {\n                    iconContent.set(url, svg.outerHTML);\n                }\n                return Promise.resolve();\n            } else {\n                req = fetch(url).then((rsp) => {\n                    if (rsp.ok) {\n                        return rsp.text().then((svgContent) => {\n                            if (svgContent && sanitize !== false) {\n                                svgContent = validateContent(svgContent);\n                            }\n                            iconContent.set(url, svgContent || '');\n                        });\n                    }\n                    return iconContent.set(url, '');\n                });\n                requests.set(url, req);\n            }\n        } else {\n            iconContent.set(url, '');\n            return Promise.resolve();\n        }\n    }\n    return req;\n};\n\n/**\n * Retrieves the URL for an icon based on its `src` or `name` attributes.\n * @param {HTMLElement} i The icon element from which to extract the URL.\n * @returns {string|null} The URL of the icon if found, or `null` if no valid URL can be determined.\n * @description\n * This function performs the following:\n * 1. Attempts to retrieve the URL from the `src` attribute using `getSrc`.\n * 2. If no `src` is provided, it falls back to the `name` attribute using `getName`.\n * 3. If a name is found, it uses `getNamedUrl` to construct the URL, considering the `filled` attribute.\n * @example\n * const iconElement = document.querySelector('wje-icon');\n * const url = getUrl(iconElement);\n * console.log(url); // Outputs the resolved URL or `null`.\n */\nexport const getUrl = (i) => {\n    let url = getSrc(i.src);\n    if (url) {\n        return url;\n    }\n\n    url = getName(i.name);\n\n    if (url) {\n        return getNamedUrl(url, i.library, i.hasAttribute('filled'));\n    }\n\n    return null;\n};\n\n/**\n * Validates and returns a sanitized icon name.\n * @param {string} iconName The icon name to validate.\n * @returns {string|null} The sanitized icon name, or `null` if the input is invalid.\n * @description\n * This function checks if the provided `iconName` is a valid string:\n * - It must not be empty or contain invalid characters.\n * - Only alphanumeric characters, hyphens, and digits are allowed.\n * @example\n * const validName = getName('user-icon');\n * console.log(validName); // 'user-icon'\n * const invalidName = getName('user@icon!');\n * console.log(invalidName); // null\n */\nexport const getName = (iconName) => {\n    if (!isStr(iconName) || iconName.trim() === '') {\n        return null;\n    }\n\n    const invalidChars = iconName.replace(/[a-z]|-|\\d/gi, '');\n    if (invalidChars !== '') {\n        return null;\n    }\n\n    return iconName;\n};\n\n/**\n * Constructs the URL for a named SVG icon.\n * @param {string} iconName The name of the icon to retrieve.\n * @param {string} [libraryName] The name of the icon library to use. Defaults to \"default\".\n * @param {boolean} [filled] Whether to use the \"filled\" variant of the icon. Defaults to \"outline\" if `false`.\n * @returns {string} - The complete URL to the SVG icon.\n * @description\n * This function generates a URL for an icon based on its name and style (filled or outline).\n * It uses the base URL from the environment variable `VITE_ICON_ASSETS_URL`.\n * @example\n * const url = getNamedUrl('user-icon', 'default', true);\n * console.log(url); // 'https://example.com/filled/user-icon.svg'\n *\n * const outlineUrl = getNamedUrl('settings', 'default');\n * console.log(outlineUrl); // 'https://example.com/outline/settings.svg'\n */\nconst getNamedUrl = (iconName, libraryName = 'default', filled = false) => {\n    let library = getIconLibrary(libraryName);\n    let url = library.resolver(iconName, filled ? 'filled' : 'outline');\n\n    return url;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getSvgContent, getUrl, iconContent } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an icon. `IconElement` is a custom web component that represents an icon.\n * @documentation https://elements.webjet.sk/components/icon\n * @status stable\n * @augments WJElement\n * @csspart svg - The SVG part of the icon\n * @cssproperty [--wje-icon-size=1rem] - The size of the icon element\n * @cssproperty [--wje-icon-width=var(--wje-icon-size, 100%)] - The width of the icon element\n * @cssproperty [--wje-icon-height=var(--wje-icon-size, 100%)] - The height of the icon element\n * @tag wje-icon\n */\nexport default class Icon extends WJElement {\n    /**\n     * Creates an instance of IconElement.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the name of the icon.\n     * @type {string}\n     */\n    className = 'Icon';\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 ['name', 'filled'];\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.\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        this.classList.add('lazy-loaded-image', 'lazy');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-icon');\n\n        this.url = getUrl(this);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    // Protect against null/undefined URLs\n                    if (typeof this.url === 'string' && this.url.trim() !== '') {\n                        getSvgContent(this.url).then((svgContent) => {\n                            this.native.innerHTML = iconContent?.get(this.url);\n                            this.native.querySelector('svg')?.setAttribute('part', 'svg');\n                        });\n                    }\n\n                    this.classList.remove('lazy');\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n}\n","import Icon from './icon.element.js';\n\nexport default Icon;\n\nIcon.define('wje-icon', Icon);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"icon-DY5AZ6xM.js","sources":["../packages/utils/icon-library.js","../packages/wje-icon/service/service.js","../packages/wje-icon/icon.element.js","../packages/wje-icon/icon.js"],"sourcesContent":["import { getBasePath } from \"./base-path.js\";\n\nlet registry = [];\n\nregisterIconLibrary(\"default\", {\n  resolver: (name, style) => getBasePath(`assets/img/icons/${style}/${name}.svg`)\n});\n\nexport function getIconLibrary(name) {\n  return registry.find(lib => lib.name === name);\n}\n\nexport function registerIconLibrary(name, options) {\n  unregisterIconLibrary(name);\n  registry.push({\n    name,\n    resolver: options.resolver,\n  });\n}\n\nexport function unregisterIconLibrary(name) {\n  registry = registry.filter(lib => lib.name !== name);\n}","import { getIconLibrary } from \"../../utils/icon-library.js\";\n\nexport const iconContent = new Map();\nconst requests = new Map();\n\nlet parser;\n\n/**\n * Validates and returns a trimmed source string if it meets the required criteria.\n * @param {string} src The source string to validate and trim.\n * @returns {string|null} The validated and trimmed source string, or `null` if invalid.\n * @example\n * getSrc('  https://example.com/image.jpg  '); // Returns 'https://example.com/image.jpg'\n * getSrc('invalid-src'); // Returns null\n */\nexport const getSrc = (src) => {\n    if (isStr(src)) {\n        src = src.trim();\n        if (isSrc(src)) {\n            return src;\n        }\n    }\n    return null;\n};\n\n/**\n * Checks if a given string is a valid source based on specific criteria.\n * @param {string} str The string to validate as a source.\n * @returns {boolean} `true` if the string is considered a valid source, `false` otherwise.\n * @example\n * isSrc('https://example.com/image.jpg'); // Returns true\n * isSrc('image.jpg'); // Returns true\n * isSrc('invalid-src'); // Returns false\n */\nexport const isSrc = (str) => str.length > 0 && /(\\/|\\.)/.test(str);\n\n/**\n * Checks if the provided URL is an SVG data URL.\n * @param {string} url The URL to check.\n * @returns {boolean} - Returns `true` if the URL starts with 'data:image/svg+xml', otherwise `false`.\n * @example\n * isSvgDataUrl('data:image/svg+xml;base64,...'); // Returns true\n * isSvgDataUrl('https://example.com/image.svg'); // Returns false\n */\nexport const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');\n\n/**\n * Checks if the provided URL is an encoded data URL.\n * @param {string} url The URL to check.\n * @returns {boolean} - Returns `true` if the URL contains ';utf8,', otherwise `false`.\n * @example\n * isEncodedDataUrl('data:text/plain;charset=utf8,...'); // Returns true\n * isEncodedDataUrl('https://example.com/file.txt');     // Returns false\n */\nexport const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;\n\n/**\n * Checks if the provided value is of string type.\n * @param {*} val The value to check.\n * @returns {boolean} - Returns `true` if the value is a string, otherwise `false`.\n * @example\n * isStr('Hello, World!'); // Returns true\n * isStr(12345);           // Returns false\n */\nexport const isStr = (val) => typeof val === 'string';\n\n/**\n * Validates the provided SVG content and ensures it contains a valid SVG element.\n * @param {string} svgContent The SVG content to validate.\n * @returns {string} Returns the validated SVG content as a string if valid, otherwise an empty string.\n * @example\n * const validSvg = '&lt;svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\">&lt;/svg>';\n * validateContent(validSvg); // Returns '&lt;svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\">&lt;/svg>'\n * const invalidSvg = '&lt;div>&lt;/div>';\n * validateContent(invalidSvg); // Returns ''\n */\nexport const validateContent = (svgContent) => {\n    const div = document.createElement('div');\n    div.innerHTML = svgContent;\n\n    const svgElm = div.firstElementChild;\n    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n        const svgClass = svgElm.getAttribute('class') || '';\n\n        if (isValid(svgElm)) {\n            return div.innerHTML;\n        }\n    }\n    return '';\n};\n\n/**\n * Validates an element to ensure it does not contain potentially unsafe content.\n * @param {Element|Node} elm The element or node to validate.\n * @returns {boolean} - Returns `true` if the element is valid, otherwise `false`.\n * @description\n * This function checks the following:\n * 1. The element is an element node (nodeType 1).\n * 2. The element is not a `&lt;script>` tag.\n * 3. The element does not contain any `on*` event handler attributes (e.g., `onclick`).\n * 4. All child nodes recursively pass the same validation.\n * @example\n * const validElement = document.createElement('div');\n * isValid(validElement); // Returns true\n *\n * const scriptElement = document.createElement('script');\n * isValid(scriptElement); // Returns false\n *\n *  const divWithOnClick = document.createElement('div');\n * divWithOnClick.setAttribute('onclick', 'alert(\"hi\")');\n * isValid(divWithOnClick); // Returns false\n */\nexport const isValid = (elm) => {\n    // Only element nodes\n    if (elm.nodeType === 1) {\n        // Check for script elements\n        if (elm.nodeName.toLowerCase() === 'script') {\n            return false;\n        }\n\n        // Check for on* attributes\n        for (let i = 0; i < elm.attributes.length; i++) {\n            const name = elm.attributes[i].name;\n            if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {\n                return false;\n            }\n        }\n\n        // Check for child nodes\n        for (let i = 0; i < elm.childNodes.length; i++) {\n            if (!isValid(elm.childNodes[i])) {\n                return false;\n            }\n        }\n    }\n    return true;\n};\n\n/**\n * Fetches and optionally sanitizes SVG content from a given URL.\n * @param {string} url The URL of the SVG resource or data URL.\n * @param {boolean} [sanitize] Whether to sanitize the SVG content. Defaults to `true`.\n * @returns {Promise<void>} A promise that resolves when the SVG content is fetched and stored.\n * @description\n * This function performs the following:\n * - If the URL is an SVG data URL and encoded, it parses the content to extract the SVG.\n * - If the URL is a standard HTTP/HTTPS URL, it fetches the content.\n * - Optionally sanitizes the fetched SVG content.\n * - Caches the content for future use.\n * @example\n * getSvgContent('https://example.com/icon.svg').then(() => {\n *   console.log('SVG content fetched and stored.');\n * });\n * @example\n * getSvgContent('data:image/svg+xml;base64,...', false).then(() => {\n *   console.log('SVG data URL processed without sanitization.');\n * });\n */\nexport const getSvgContent = (url, sanitize) => {\n    let req = requests.get(url);\n    if (!req) {\n        if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n            if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {\n                if (!parser) {\n                    parser = new DOMParser();\n                }\n                const doc = parser.parseFromString(url, 'text/html');\n                const svg = doc.querySelector('svg');\n                if (svg) {\n                    iconContent.set(url, svg.outerHTML);\n                }\n                return Promise.resolve();\n            } else {\n                req = fetch(url).then((rsp) => {\n                    if (rsp.ok) {\n                        return rsp.text().then((svgContent) => {\n                            if (svgContent && sanitize !== false) {\n                                svgContent = validateContent(svgContent);\n                            }\n                            iconContent.set(url, svgContent || '');\n                        });\n                    }\n                    return iconContent.set(url, '');\n                });\n                requests.set(url, req);\n            }\n        } else {\n            iconContent.set(url, '');\n            return Promise.resolve();\n        }\n    }\n    return req;\n};\n\n/**\n * Retrieves the URL for an icon based on its `src` or `name` attributes.\n * @param {HTMLElement} i The icon element from which to extract the URL.\n * @returns {string|null} The URL of the icon if found, or `null` if no valid URL can be determined.\n * @description\n * This function performs the following:\n * 1. Attempts to retrieve the URL from the `src` attribute using `getSrc`.\n * 2. If no `src` is provided, it falls back to the `name` attribute using `getName`.\n * 3. If a name is found, it uses `getNamedUrl` to construct the URL, considering the `filled` attribute.\n * @example\n * const iconElement = document.querySelector('wje-icon');\n * const url = getUrl(iconElement);\n * console.log(url); // Outputs the resolved URL or `null`.\n */\nexport const getUrl = (i) => {\n    let url = getSrc(i.src);\n    if (url) {\n        return url;\n    }\n\n    url = getName(i.name);\n\n    if (url) {\n        return getNamedUrl(url, i.library, i.hasAttribute('filled'));\n    }\n\n    return null;\n};\n\n/**\n * Validates and returns a sanitized icon name.\n * @param {string} iconName The icon name to validate.\n * @returns {string|null} The sanitized icon name, or `null` if the input is invalid.\n * @description\n * This function checks if the provided `iconName` is a valid string:\n * - It must not be empty or contain invalid characters.\n * - Only alphanumeric characters, hyphens, and digits are allowed.\n * @example\n * const validName = getName('user-icon');\n * console.log(validName); // 'user-icon'\n * const invalidName = getName('user@icon!');\n * console.log(invalidName); // null\n */\nexport const getName = (iconName) => {\n    if (!isStr(iconName) || iconName.trim() === '') {\n        return null;\n    }\n\n    const invalidChars = iconName.replace(/[a-z]|-|\\d/gi, '');\n    if (invalidChars !== '') {\n        return null;\n    }\n\n    return iconName;\n};\n\n/**\n * Constructs the URL for a named SVG icon.\n * @param {string} iconName The name of the icon to retrieve.\n * @param {string} [libraryName] The name of the icon library to use. Defaults to \"default\".\n * @param {boolean} [filled] Whether to use the \"filled\" variant of the icon. Defaults to \"outline\" if `false`.\n * @returns {string} - The complete URL to the SVG icon.\n * @description\n * This function generates a URL for an icon based on its name and style (filled or outline).\n * It uses the base URL from the environment variable `VITE_ICON_ASSETS_URL`.\n * @example\n * const url = getNamedUrl('user-icon', 'default', true);\n * console.log(url); // 'https://example.com/filled/user-icon.svg'\n *\n * const outlineUrl = getNamedUrl('settings', 'default');\n * console.log(outlineUrl); // 'https://example.com/outline/settings.svg'\n */\nconst getNamedUrl = (iconName, libraryName = 'default', filled = false) => {\n    let library = getIconLibrary(libraryName);\n    let url = library.resolver(iconName, filled ? 'filled' : 'outline');\n\n    return url;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getSvgContent, getUrl, iconContent } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an icon. `IconElement` is a custom web component that represents an icon.\n * @documentation https://elements.webjet.sk/components/icon\n * @status stable\n * @augments WJElement\n * @csspart svg - The SVG part of the icon\n * @cssproperty [--wje-icon-size=1rem] - The size of the icon element\n * @cssproperty [--wje-icon-width=var(--wje-icon-size, 100%)] - The width of the icon element\n * @cssproperty [--wje-icon-height=var(--wje-icon-size, 100%)] - The height of the icon element\n * @tag wje-icon\n */\nexport default class Icon extends WJElement {\n    /**\n     * Creates an instance of IconElement.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the name of the icon.\n     * @type {string}\n     */\n    className = 'Icon';\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 ['name', 'filled'];\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.\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        this.classList.add('lazy-loaded-image', 'lazy');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-icon');\n\n        this.url = getUrl(this);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    getSvgContent(this.url).then((svgContent) => {\n                        this.native.innerHTML = iconContent?.get(this.url);\n                        this.native.querySelector('svg')?.setAttribute('part', 'svg');\n                    });\n\n                    this.classList.remove('lazy');\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n}\n","import Icon from './icon.element.js';\n\nexport default Icon;\n\nIcon.define('wje-icon', Icon);\n"],"names":[],"mappings":"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"}

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

@@ -18,7 +18,6 @@ export default class WJElement extends HTMLElement {
      * @param [options] Additional options for defining the element.
      */
     static define(name: any, elementConstructor?: typeof WJElement, options?: {}): void;
-    __templateInserted: boolean;
     service: UniversalService;
     _dependencies: {};
     /**
@@ -107,16 +106,16 @@ export default class WJElement extends HTMLElement {
      * @returns {boolean} True if the 'shadow' attribute is present.
      */
     get hasShadowRoot(): boolean;
-    /**
-     * Gets the rendering context, either the shadow root or the component itself.
-     * @returns The rendering context.
-     */
-    get context(): any;
     /**
      * Gets the value of the 'shadow' attribute or 'open' if not set.
      * @returns {string} The value of the 'shadow' attribute or 'open'.
      */
     get shadowType(): string;
+    /**
+     * Gets the rendering context, either the shadow root or the component itself.
+     * @returns The rendering context.
+     */
+    get context(): any;
     /**
      * Gets the store instance.
      * @returns {object} The store instance.
@@ -221,6 +220,7 @@ export default class WJElement extends HTMLElement {
      * @param [force] Whether to force initialization.
      * @returns A promise that resolves when initialization is complete.
      */
+    initWjElement: (force?: boolean) => Promise<any>;
     /**
      * Sets up attributes and event listeners for the component.
      * This method retrieves all custom events defined for the component
@@ -254,7 +254,7 @@ export default class WJElement extends HTMLElement {
      * @param old The old value of the attribute.
      * @param newName The new value of the attribute.
      */
-    attributeChangedCallback(name: any, old: any, newValue: any): void;
+    attributeChangedCallback(name: any, old: any, newName: any): void;
     refresh(): void;
     stopRenderLoop(): void;
     /**

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

@@ -14,45 +14,9 @@ export default class Routerx extends WJElement {
      * @returns {Array<string>}
      */
     static get observedAttributes(): Array<string>;
-    /**
-     * Sets the `log` property and updates the corresponding attribute on the element.
-     * If the `value` is truthy, the `log` attribute is added to the element.
-     * If the `value` is falsy, the `log` attribute is removed from the element.
-     * @param {boolean} value The value to set for the `log` property. Determines whether the `log` attribute should be present or not.
-     */
-    set log(value: boolean);
-    /**
-     * Retrieves the state of the 'log' attribute.
-     * @returns {boolean} A boolean value indicating whether the 'log' attribute is present (true) or not (false) on the element.
-     */
-    get log(): boolean;
-    /**
-     * Sets or removes the 'log-error' attribute based on the provided value.
-     * @param {boolean} value A boolean indicating whether the 'log-error' attribute should be set (true) or removed (false).
-     */
-    set logError(value: boolean);
-    /**
-     * Determines whether the 'log-error' attribute is present on the current element.
-     * @returns {boolean} Returns true if the 'log-error' attribute exists; otherwise, false.
-     */
-    get logError(): boolean;
-    /**
-     * Sets the routes for the application.
-     * @param {object} value The routes object defining the application's routing structure.
-     */
-    set routes(value: object);
-    /**
-     * Accessor method to retrieve the parsed routes from the root element.
-     * @returns {object} The parsed routes object derived from the root element.
-     */
-    get routes(): object;
-    /**
-     * Retrieves the root element of type 'wje-router' from the outer HTML.
-     * Parses the current object's outer HTML and returns the first element
-     * matching the 'wje-router' tag name found within the resultant HTML document.
-     * @returns {Element|null} The first 'wje-router' element found within the parsed HTML document, or null if no such element exists.
-     */
-    get rootElement(): Element | null;
+    set routes(value: any);
+    get routes(): any;
+    get rootElement(): Element;
     /**
      * Sets up the router after the component is drawn.
      */

package/dist/wje-button.js

@@ -11,7 +11,7 @@ var _Button_instances, populateCustomEvent_fn;
 import { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
 import { bool } from "./utils.js";
 import WJElement from "./wje-element.js";
-import { I as Icon } from "./icon-DGGYr4tD.js";
+import { I as Icon } from "./icon-DY5AZ6xM.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n    background-color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-primary-9);\n}\n\n.wje-button-link.wje-color-primary {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n    background-color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-complete-9);\n}\n\n.wje-button-link.wje-color-complete {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n    background-color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-success-9);\n}\n\n.wje-button-link.wje-color-success {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n    background-color: var(--wje-color-warning-9);\n    border-color: var(--wje-color-warning-9);\n    color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n    background-color: var(--wje-color-warning-1);\n    border-color: var(--wje-color-warning-11);\n    color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n    background-color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-danger-9);\n}\n\n.wje-button-link.wje-color-danger {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-info {\n    background-color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-info {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-9);\n}\n\n.wje-button-link.wje-color-info {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n    background-color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-5);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-link.wje-color-default {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-11);\n}\n\n:host {\n    --wje-padding-top: 0.4rem;\n    --wje-padding-start: 0.5rem;\n    --wje-padding-end: 0.5rem;\n    --wje-padding-bottom: 0.4rem;\n\n    display: inline-flex;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n    display: block;\n}\n\n.native-button {\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n    border-width: var(--wje-button-border-width);\n    border-style: var(--wje-button-border-style);\n    border-color: var(--wje-button-border-color);\n    background-color: transparent;\n    /*color: var(--wje-button-color);*/\n    line-height: 1;\n    contain: layout style;\n    cursor: pointer;\n    z-index: 0;\n    box-sizing: border-box;\n    appearance: none;\n    margin: 0;\n    border-radius: var(--wje-button-border-radius);\n    padding-top: var(--wje-padding-top);\n    padding-bottom: var(--wje-padding-bottom);\n    padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n    white-space: nowrap;\n}\n\n.native-button:hover {\n    outline-style: solid;\n    outline-width: var(--wje-button-outline-width);\n    transition: outline-width 0.1s linear;\n}\n\n@media (any-hover: hover) {\n    .wje-button-solid.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-9);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-outline.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-primary-9);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-link.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: transparent;\n        color: var(--wje-color-primary-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-9);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-outline.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-complete-9);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-link.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: transparent;\n        color: var(--wje-color-complete-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-success:hover {\n        background-color: var(--wje-color-success-9);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-outline.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-success-9);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-link.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: transparent;\n        color: var(--wje-color-success-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-9);\n        border-color: var(--wje-color-warning-9);\n        color: var(--wje-color-black);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-outline.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: var(--wje-color-warning-11);\n        color: var(--wje-color-warning-11);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-link.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: transparent;\n        color: var(--wje-color-warning-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-9);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-outline.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-danger-9);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-link.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: transparent;\n        color: var(--wje-color-danger-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-9);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-1);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-9);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-0);\n        border-color: var(--wje-color-contrast-3);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-2);\n        border-color: var(--wje-color-contrast-5);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n}\n\n.button-inner {\n    display: flex;\n    position: relative;\n    flex-flow: row nowrap;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n    border-width: var(--wje-button-border-width);\n    border-radius: var(--wje-button-border-radius);\n    border-color: transparent;\n    background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n    border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n    border-radius: var(--wje-border-radius-circle);\n    aspect-ratio: 1/1;\n    width: 1.988rem;\n    display: flex;\n    align-items: center;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='small']) .native-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n}\n\n:host([size='large']) .native-button {\n    --wje-padding-top: 0.6rem;\n    --wje-padding-start: 0.7rem;\n    --wje-padding-end: 0.7rem;\n    --wje-padding-bottom: 0.6rem;\n}\n\n:host([size='small'][circle]) .native-button {\n    width: 1.688rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='large'][circle]) .native-button {\n    width: 2.388rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted(wje-icon[slot='end']) {\n    margin: 0 -0.2rem 0 0.3rem;\n}\n\n:host(:not([only-caret])) slot[name='caret'] {\n    padding: 0 0 0 0.3rem;\n}\n\n:host([only-caret]) {\n    .native-button {\n        aspect-ratio: 1/1;\n        width: 1.988rem;\n        display: flex;\n        align-items: center;\n    }\n    slot[name='caret'] {\n        padding: 0;\n        display: block;\n    }\n}\n\n::slotted([slot='toggle']) {\n    display: none;\n}\n\n::slotted([slot='toggle'].show) {\n    display: block;\n}\n";
@@ -356,23 +356,16 @@ class Button extends WJElement {
    * After draw method for the Button element.
    */
   afterDraw() {
-    var _a, _b, _c, _d;
     if (this.hasAttribute("route")) {
       this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
     }
     if (this.hasToggle) {
       if (this.toggle === "off") {
-        const node = (_b = (_a = this.slotToggle) == null ? void 0 : _a.assignedNodes()) == null ? void 0 : _b[1];
-        if (node) {
-          node.classList.add("show");
-          this.setAttribute("value", "off");
-        }
+        this.slotToggle.assignedNodes()[1].classList.add("show");
+        this.setAttribute("value", "off");
       } else {
-        const node = (_d = (_c = this.slotToggle) == null ? void 0 : _c.assignedNodes()) == null ? void 0 : _d[0];
-        if (node) {
-          node.classList.add("show");
-          this.setAttribute("value", "on");
-        }
+        this.slotToggle.assignedNodes()[0].classList.add("show");
+        this.setAttribute("value", "on");
       }
     }
     if (this.hasAttribute("custom-event")) {

package/dist/wje-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n    /**\n     * Button constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals_ = this.attachInternals();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    /**\n     * Properties of the element Button.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value || 'default');\n    }\n\n    /**\n     * Get color of the Button element.\n     * @returns {string|string}\n     */\n    get color() {\n        return this.getAttribute('color') || 'default';\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set caret(value) {\n        this.setAttribute('caret', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get caret() {\n        return this.hasAttribute('caret');\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n     * otherwise, it is removed from the element.\n     * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute as a boolean.\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set tooltip(value) {\n        this.setAttribute('tooltip', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get tooltip() {\n        return this.hasAttribute('tooltip');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set dialog(value) {\n        this.setAttribute('dialog', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {string|object}\n     */\n    get dialog() {\n        return this.getAttribute('dialog');\n    }\n\n    /**\n     * Set active state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set active(value) {\n        this.setAttribute('active', '');\n    }\n\n    /**\n     * Get active state of the Button element.\n     * @returns {boolean} active - The active state\n     */\n    get active() {\n        return this.hasAttribute('active');\n    }\n\n    /**\n     * Set disabled state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set disabled(value) {\n        this.removeAttribute('disabled');\n\n        if (value) {\n            this.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Get disabled state of the Button element.\n     * @returns {boolean} disabled - The disabled state\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set fill of the Button element.\n     * @param {string} value The value to set\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Get fill of the Button element.\n     * @returns {string} fill - The fill value\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'solid';\n    }\n\n    /**\n     * Set outline state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set outline(value) {\n        this.setAttribute('outline', '');\n    }\n\n    /**\n     * Get outline state of the Button element.\n     * @returns {boolean} outline - The outline state\n     */\n    get outline() {\n        return this.hasAttribute('outline');\n    }\n\n    /**\n     * Set stop propagation state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set stopPropagation(value) {\n        this.setAttribute('stop-propagation', bool(value));\n    }\n\n    /**\n     * Get stop propagation state of the Button element.\n     * @returns {boolean} stopPropagation - The stop propagation state\n     */\n    get stopPropagation() {\n        return bool(this.getAttribute('stop-propagation'));\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    /**\n     * Class name for the Button element\n     * @type {string}\n     */\n    className = 'Button';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Button element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n     */\n    static get observedAttributes() {\n        return ['disabled', 'color'];\n    }\n\n    /**\n     * @summary A static property that indicates whether the custom element is form-associated or not.\n     * Form-associated custom elements are elements that can participate in form submission.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function sets the internal `_form` property to the associated form.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this._form = form;\n    }\n\n    /**\n     * @summary Callback function that is called when the form-associated state of the custom element changes.\n     * This function updates the 'disabled' attribute of the element based on the new state.\n     * @param {boolean} disabled The new form-associated state.\n     */\n    formDisabledCallback(disabled) {\n        if (disabled) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Button element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n        if (this.hasAttribute('href')) {\n            native.setAttribute('href', this.getAttribute('href'));\n        } else {\n            if (this.type === 'submit') {\n                native.setAttribute('type', 'submit');\n            }\n        }\n\n        native.classList.add('native-button');\n        native.setAttribute('part', 'native');\n\n        this.classList.remove('wje-button-disabled');\n\n        if (this.disabled) native.classList.add('wje-button-disabled');\n\n        if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n        if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n        if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n        if (this.outline) native.classList.add('wje-outline');\n\n        if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n        if (this.size) native.classList.add('wje-button-' + this.size);\n\n        if (\n            (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n            this.hasAttribute('only-caret')\n        ) {\n            let i = document.createElement('wje-icon');\n            i.style.setProperty('--wje-icon-size', '14px');\n            i.setAttribute('slot', 'caret');\n            i.setAttribute('name', 'chevron-down');\n            i.setAttribute('part', 'caret');\n\n            this.appendChild(i);\n        }\n\n        if (this.active) {\n            this.classList.add('wje-active');\n            let i = document.createElement('wje-icon');\n            i.setAttribute('name', 'check');\n\n            this.appendChild(i);\n        }\n\n        native.classList.add('wje-color-' + this.color, 'wje-color');\n\n        let span = document.createElement('span');\n        span.setAttribute('part', 'inner');\n        span.classList.add('button-inner');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'icon-only');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'start');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'end');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'caret');\n        span.appendChild(slot);\n\n        this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n        if (this.hasToggle) {\n            this.slotToggle = document.createElement('slot');\n            this.slotToggle.setAttribute('name', 'toggle');\n\n            span.appendChild(this.slotToggle);\n        }\n\n        native.appendChild(span);\n\n        if (this.tooltip) {\n            let tooltip = document.createElement('wje-tooltip');\n            tooltip.setAttribute('content', this.getAttribute('tooltip'));\n            tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n            tooltip.appendChild(native);\n\n            fragment.appendChild(tooltip);\n        } else {\n            fragment.appendChild(native);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Button element.\n     */\n    afterDraw() {\n        if (this.hasAttribute('route')) {\n            this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        }\n\n        // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n        if (this.hasToggle) {\n            if (this.toggle === 'off') {\n                const node = this.slotToggle?.assignedNodes()?.[1];\n                if (node) {\n                    node.classList.add(\"show\");\n                    this.setAttribute('value', 'off');\n                }\n                // this.slotToggle.assignedNodes()[1].classList.add('show');\n\n            } else {\n                const node = this.slotToggle?.assignedNodes()?.[0];\n                if (node) {\n                    node.classList.add(\"show\");\n                    this.setAttribute('value', 'on');\n                }\n                // this.slotToggle.assignedNodes()[0].classList.add('show');\n\n            }\n        }\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if (this.hasAttribute('dialog')) {\n            event.addListener(this, 'click', null, this.eventDialogOpen);\n        } else {\n            event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n        }\n\n        if (this.hasToggle)\n            event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n                stopPropagation: this.stopPropagation,\n            });\n\n        if (this.type === 'submit') {\n            event.addListener(this, 'click', 'wje-button:submit', () => {\n                event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n            });\n        }\n\n        if (this.type === 'reset') {\n            event.addListener(this, 'click', 'wje-button:reset', () => {\n                this.internals_.form.reset();\n            });\n        }\n    }\n\n    /**\n     * Before disconnect method for the Button element.\n     */\n    beforeDisconnect() {\n        // remove all events from the button\n        event.removeListener(this, 'click', null, this.eventDialogOpen);\n        event.removeListener(this, 'click', 'wje-button:click', null);\n        event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n        event.removeListener(this, 'click', null, this.#populateCustomEvent);\n        event.removeListener(this, 'click', 'wje-button:submit', null);\n        event.removeListener(this, 'click', 'wje-button:reset', null);\n\n        this.removeEventListener('click', this.eventDialogOpen);\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Event dialog open method for the Button element.\n     * @param {Event} e The event object\n     */\n    eventDialogOpen = (e) => {\n        event.dispatchCustomEvent(this, this.dialog);\n    };\n\n    /**\n     * Toggle states method for the Button element.\n     */\n    toggleStates = () => {\n        const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n        nodes.forEach((node, index) => {\n            if (node.classList.contains('show')) {\n                node.classList.remove('show');\n            } else {\n                node.classList.add('show');\n                this.setAttribute('value', index === 0 ? 'on' : 'off');\n            }\n        });\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n    /**\n     * Button constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals_ = this.attachInternals();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    /**\n     * Properties of the element Button.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value || 'default');\n    }\n\n    /**\n     * Get color of the Button element.\n     * @returns {string|string}\n     */\n    get color() {\n        return this.getAttribute('color') || 'default';\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set caret(value) {\n        this.setAttribute('caret', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get caret() {\n        return this.hasAttribute('caret');\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n     * otherwise, it is removed from the element.\n     * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute as a boolean.\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set tooltip(value) {\n        this.setAttribute('tooltip', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get tooltip() {\n        return this.hasAttribute('tooltip');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set dialog(value) {\n        this.setAttribute('dialog', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {string|object}\n     */\n    get dialog() {\n        return this.getAttribute('dialog');\n    }\n\n    /**\n     * Set active state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set active(value) {\n        this.setAttribute('active', '');\n    }\n\n    /**\n     * Get active state of the Button element.\n     * @returns {boolean} active - The active state\n     */\n    get active() {\n        return this.hasAttribute('active');\n    }\n\n    /**\n     * Set disabled state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set disabled(value) {\n        this.removeAttribute('disabled');\n\n        if (value) {\n            this.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Get disabled state of the Button element.\n     * @returns {boolean} disabled - The disabled state\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set fill of the Button element.\n     * @param {string} value The value to set\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Get fill of the Button element.\n     * @returns {string} fill - The fill value\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'solid';\n    }\n\n    /**\n     * Set outline state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set outline(value) {\n        this.setAttribute('outline', '');\n    }\n\n    /**\n     * Get outline state of the Button element.\n     * @returns {boolean} outline - The outline state\n     */\n    get outline() {\n        return this.hasAttribute('outline');\n    }\n\n    /**\n     * Set stop propagation state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set stopPropagation(value) {\n        this.setAttribute('stop-propagation', bool(value));\n    }\n\n    /**\n     * Get stop propagation state of the Button element.\n     * @returns {boolean} stopPropagation - The stop propagation state\n     */\n    get stopPropagation() {\n        return bool(this.getAttribute('stop-propagation'));\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    /**\n     * Class name for the Button element\n     * @type {string}\n     */\n    className = 'Button';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Button element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n     */\n    static get observedAttributes() {\n        return ['disabled', 'color'];\n    }\n\n    /**\n     * @summary A static property that indicates whether the custom element is form-associated or not.\n     * Form-associated custom elements are elements that can participate in form submission.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function sets the internal `_form` property to the associated form.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this._form = form;\n    }\n\n    /**\n     * @summary Callback function that is called when the form-associated state of the custom element changes.\n     * This function updates the 'disabled' attribute of the element based on the new state.\n     * @param {boolean} disabled The new form-associated state.\n     */\n    formDisabledCallback(disabled) {\n        if (disabled) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Button element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n        if (this.hasAttribute('href')) {\n            native.setAttribute('href', this.getAttribute('href'));\n        } else {\n            if (this.type === 'submit') {\n                native.setAttribute('type', 'submit');\n            }\n        }\n\n        native.classList.add('native-button');\n        native.setAttribute('part', 'native');\n\n        this.classList.remove('wje-button-disabled');\n\n        if (this.disabled) native.classList.add('wje-button-disabled');\n\n        if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n        if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n        if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n        if (this.outline) native.classList.add('wje-outline');\n\n        if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n        if (this.size) native.classList.add('wje-button-' + this.size);\n\n        if (\n            (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n            this.hasAttribute('only-caret')\n        ) {\n            let i = document.createElement('wje-icon');\n            i.style.setProperty('--wje-icon-size', '14px');\n            i.setAttribute('slot', 'caret');\n            i.setAttribute('name', 'chevron-down');\n            i.setAttribute('part', 'caret');\n\n            this.appendChild(i);\n        }\n\n        if (this.active) {\n            this.classList.add('wje-active');\n            let i = document.createElement('wje-icon');\n            i.setAttribute('name', 'check');\n\n            this.appendChild(i);\n        }\n\n        native.classList.add('wje-color-' + this.color, 'wje-color');\n\n        let span = document.createElement('span');\n        span.setAttribute('part', 'inner');\n        span.classList.add('button-inner');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'icon-only');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'start');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'end');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'caret');\n        span.appendChild(slot);\n\n        this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n        if (this.hasToggle) {\n            this.slotToggle = document.createElement('slot');\n            this.slotToggle.setAttribute('name', 'toggle');\n\n            span.appendChild(this.slotToggle);\n        }\n\n        native.appendChild(span);\n\n        if (this.tooltip) {\n            let tooltip = document.createElement('wje-tooltip');\n            tooltip.setAttribute('content', this.getAttribute('tooltip'));\n            tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n            tooltip.appendChild(native);\n\n            fragment.appendChild(tooltip);\n        } else {\n            fragment.appendChild(native);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Button element.\n     */\n    afterDraw() {\n        if (this.hasAttribute('route')) {\n            this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        }\n\n        // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n        if (this.hasToggle) {\n            if (this.toggle === 'off') {\n                this.slotToggle.assignedNodes()[1].classList.add('show');\n                this.setAttribute('value', 'off');\n            } else {\n                this.slotToggle.assignedNodes()[0].classList.add('show');\n                this.setAttribute('value', 'on');\n            }\n        }\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if (this.hasAttribute('dialog')) {\n            event.addListener(this, 'click', null, this.eventDialogOpen);\n        } else {\n            event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n        }\n\n        if (this.hasToggle)\n            event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n                stopPropagation: this.stopPropagation,\n            });\n\n        if (this.type === 'submit') {\n            event.addListener(this, 'click', 'wje-button:submit', () => {\n                event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n            });\n        }\n\n        if (this.type === 'reset') {\n            event.addListener(this, 'click', 'wje-button:reset', () => {\n                this.internals_.form.reset();\n            });\n        }\n    }\n\n    /**\n     * Before disconnect method for the Button element.\n     */\n    beforeDisconnect() {\n        // remove all events from the button\n        event.removeListener(this, 'click', null, this.eventDialogOpen);\n        event.removeListener(this, 'click', 'wje-button:click', null);\n        event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n        event.removeListener(this, 'click', null, this.#populateCustomEvent);\n        event.removeListener(this, 'click', 'wje-button:submit', null);\n        event.removeListener(this, 'click', 'wje-button:reset', null);\n\n        this.removeEventListener('click', this.eventDialogOpen);\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Event dialog open method for the Button element.\n     * @param {Event} e The event object\n     */\n    eventDialogOpen = (e) => {\n        event.dispatchCustomEvent(this, this.dialog);\n    };\n\n    /**\n     * Toggle states method for the Button element.\n     */\n    toggleStates = () => {\n        const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n        nodes.forEach((node, index) => {\n            if (node.classList.contains('show')) {\n                node.classList.remove('show');\n            } else {\n                node.classList.add('show');\n                this.setAttribute('value', index === 0 ? 'on' : 'off');\n            }\n        });\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}

package/dist/wje-color-picker.js

@@ -5,6 +5,7 @@ var __typeError = (msg) => {
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _init;
@@ -1329,15 +1330,18 @@ class ColorPicker extends WJElement {
    * @returns {void} Does not return a value.
    */
   afterDraw() {
-    window.setTimeout(() => {
-      debugger;
-      if (this.color !== "") this.alphaSlider.value = 100;
-      this.colorAreaDimension = this.dimension();
-      this.markerPosition = this.setMarkerPositionByColor(this.color);
-      this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y);
-      this.setSliders(this.color);
-      this.setColor(tinycolor(this.color), "init");
-    }, 0);
+    __privateSet(this, _init, false);
+    if (!__privateGet(this, _init)) {
+      window.setTimeout(() => {
+        if (this.color !== "") this.alphaSlider.value = 100;
+        this.colorAreaDimension = this.dimension();
+        this.markerPosition = this.setMarkerPositionByColor(this.color);
+        this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y);
+        this.setSliders(this.color);
+        this.setColor(tinycolor(this.color), "init");
+      }, 0);
+      __privateSet(this, _init, true);
+    }
   }
   /**
    * Sets the hue.