wj-elements 0.1.154 → 0.1.156

package/dist/wje-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-pagination.js","sources":["../packages/wje-pagination/service/service.js","../packages/wje-pagination/pagination.element.js","../packages/wje-pagination/pagination.js"],"sourcesContent":["/**\n * Paginates items based on the total number of items, current page, page size, and maximum number of pages to display.\n * @param {number} totalItems The total number of items to paginate.\n * @param {number} [currentPage] The current page number (default is 1).\n * @param {number} [pageSize] The number of items per page (default is 10).\n * @param {number} [maxPages] The maximum number of pages to display in the pagination control (default is 5).\n * @returns {object} An object containing pagination details including total items, current page, page size, total pages, start/end page, start/end index, and the pages array.\n */\nexport function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {\n    // Calculate total pages\n    const totalPages = Math.ceil(totalItems / pageSize);\n\n    // Ensure current page is within valid range\n    if (currentPage < 1) {\n        currentPage = 1;\n    } else if (currentPage > totalPages) {\n        currentPage = totalPages;\n    }\n\n    let startPage;\n    let endPage;\n\n    const pagesNearEnd = maxPages + 1; // Define how close to the end we switch back to 5 pages 4\n\n    const boundary = pagesNearEnd + 3;\n\n    if(totalPages > boundary) {\n        if (currentPage < pagesNearEnd) {\n            // If in the first 4 pages, show up to 5 pages\n            startPage = 1;\n            endPage = Math.min(pagesNearEnd + 1, totalPages); //5\n        } else if (currentPage >= totalPages - pagesNearEnd) {\n            // If within 4 pages from the end, show last 5 pages\n            startPage = Math.max(totalPages - pagesNearEnd, 1); //4\n            endPage = totalPages;\n        } else {\n            const halfPages = Math.floor(maxPages / 2);\n            // Otherwise, only show 3 pages (current, previous, next)\n            startPage = currentPage - halfPages + 1;\n            endPage = maxPages % 2 === 1 ? currentPage + halfPages + 1 : currentPage + halfPages - 1;\n        }\n    } else {\n        startPage = 1;\n        endPage = totalPages;\n    }\n\n    // Calculate start and end item indexes\n    const startIndex = (currentPage - 1) * pageSize;\n    const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);\n\n    // Create an array of pages to display\n    const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);\n\n    // Return object with all pager properties (preserving original format)\n    return {\n        boundary: boundary,\n        currentPage: currentPage,\n        endIndex: endIndex,\n        endPage: endPage,\n        totalPages: totalPages,\n        pages: pages,\n        pageSize: pageSize,\n        startIndex: startIndex,\n        startPage: startPage,\n        totalItems: totalItems,\n    };\n}\n","import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport { paginate } from './service/service.js';\nimport Icon from '../wje-icon/icon.js';\nimport Button from '../wje-button/button.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n * @documentation https://elements.webjet.sk/components/pagination\n * @status stable\n * @augments WJElement\n * @dependency wje-icon, wje-button\n * @csspart native - The wrapper element for the pagination component.\n */\nexport default class Pagination extends WJElement {\n    /**\n     * Creates an instance of Pagination.\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n\n        this._paginateObj = null;\n    }\n\n    /**\n     * Sets the value of the 'page' attribute for the object.\n     * @param {string} value The value to set for the 'page' attribute.\n     */\n    set page(value) {\n        this.setAttribute('page', value);\n    }\n\n    /**\n     * Retrieves the current page number as a numeric value.\n     * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.\n     */\n    get page() {\n        return +this.getAttribute('page') || 0;\n    }\n\n    /**\n     * Sets the maximum number of pages.\n     * Updates the 'max-pages' attribute with the provided value.\n     * @param {number|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.\n     */\n    set maxPages(value) {\n        this.setAttribute('max-pages', value);\n    }\n\n    /**\n     * Gets the maximum number of pages.\n     * This getter retrieves the value of the \"max-pages\" attribute from the element.\n     * If the attribute is not set or is invalid, it defaults to 3.\n     * @returns {number} The maximum number of pages as a numeric value.\n     */\n    get maxPages() {\n        return +this.getAttribute('max-pages') || 3;\n    }\n\n    /**\n     * Sets the `pageSize` attribute to the specified value.\n     * @param {number|string} value The desired page size value. This can be a number or a string representation of the size.\n     */\n    set pageSize(value) {\n        this.setAttribute('page-size', value);\n    }\n\n    /**\n     * Retrieves the value of the 'page-size' attribute and converts it to a number.\n     * If the attribute is not set or is invalid, returns the default value of 3.\n     * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.\n     */\n    get pageSize() {\n        return +this.getAttribute('page-size') || 3;\n    }\n\n    /**\n     * Sets the total number of items.\n     * @param {number} value The new total number of items to set.\n     */\n    set totalItems(value) {\n        this.setAttribute('total-items', value);\n    }\n\n    /**\n     * Retrieves the total number of items represented by the 'total-items' attribute.\n     * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.\n     */\n    get totalItems() {\n        return +this.getAttribute('total-items') || 0;\n    }\n\n    /**\n     * Sets the visibility of the first button based on the provided value.\n     * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.\n     * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.\n     */\n    set showFirstButton(value) {\n        this.removeAttribute('show-first-button');\n\n        if (value) {\n            this.setAttribute('show-first-button', '');\n        }\n    }\n\n    /**\n     * Determines whether the 'show-first-button' attribute is present on the element.\n     * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.\n     */\n    get showFirstButton() {\n        return this.hasAttribute('show-first-button');\n    }\n\n    /**\n     * Sets the visibility of the \"last\" button. This method controls the presence\n     * or absence of the \"show-last-button\" attribute based on the provided value.\n     * @param {boolean} value A boolean value indicating whether to show the \"last\" button.\n     * If true, the \"show-last-button\" attribute is added;\n     * if false, the attribute is removed.\n     */\n    set showLastButton(value) {\n        this.removeAttribute('show-last-button');\n\n        if (value) {\n            this.setAttribute('show-last-button', '');\n        }\n    }\n\n    /**\n     * Determines if the 'show-last-button' attribute is present on the element.\n     * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.\n     */\n    get showLastButton() {\n        return this.hasAttribute('show-last-button');\n    }\n\n    /**\n     * Sets the pagination object by calculating the pagination details\n     * based on the total items, current page, page size, and maximum pages.\n     * @param {object} value The value to set the pagination object. The pagination details are computed internally.\n     */\n    set paginateObj(value) {\n        this._paginateObj = value;\n    }\n\n    /**\n     * Retrieves the pagination object used for managing paginated data.\n     * @returns {object} The pagination object containing details and functionality for paginating data.\n     */\n    get paginateObj() {\n        return this._paginateObj;\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the provided value is truthy,\n     * the 'round' attribute is added. If the value is falsy, the attribute is removed.\n     * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.\n     */\n    set round(value) {\n        this.removeAttribute('round');\n\n        if (value) {\n            this.setAttribute('round', '');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute for the current element.\n     * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the `show-info` attribute on the element based on the provided value.\n     * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.\n     */\n    set showInfo(value) {\n        this.removeAttribute('show-info');\n\n        if (value) {\n            this.setAttribute('show-info', '');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'show-info' attribute.\n     * Checks if the 'show-info' attribute is present on the element.\n     * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.\n     */\n    get showInfo() {\n        return this.hasAttribute('show-info');\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n        'wje-button': Button,\n    };\n\n    className = 'Pagination';\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     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return ['page', 'total-items'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    async beforeDraw() {\n        this.paginateObj = await paginate(this.totalItems, this.page, this.pageSize, this.maxPages)\n    }\n\n    /**\n     * Creates a document fragment, appends a new slot element to it, and returns the fragment.\n     * @returns {DocumentFragment} A document fragment containing a slot element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-pagination');\n\n        native.append(this.htmlPagination());\n\n        fragment.append(native);\n\n        return fragment;\n    }\n\n    /**\n     * Creates a pagination control for navigating between pages of content.\n     * This method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n     * @returns {DocumentFragment} A document fragment containing the pagination controls.\n     */\n    htmlPagination() {\n        let fragment = document.createDocumentFragment();\n\n        let info = document.createElement('div');\n        info.classList.add('info');\n        info.innerHTML = `${this.paginateObj.startIndex + 1} - ${this.paginateObj.endIndex + 1} ${this.localizer.translate('wj.pagination.of')} ${this.totalItems}`;\n\n        let pagination = document.createElement('div');\n        pagination.classList.add('pages');\n\n        const button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        if (this.round) button.setAttribute('round', '');\n\n        // First button\n        let firstButton = button.cloneNode(true);\n        firstButton.title = this.localizer.translate('wj.pagination.first');\n        firstButton.innerHTML = `<wje-icon name=\"chevron-left-pipe\" slot=\"icon-only\"></wje-icon>`;\n        firstButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n        // Previous button\n        const prevButton = button.cloneNode(true);\n        prevButton.title = this.localizer.translate('wj.pagination.prev');\n        prevButton.innerHTML = `<wje-icon name=\"chevron-left\" slot=\"icon-only\"></wje-icon>`;\n        if(this.page === 0)\n            prevButton.disabled = true;\n        prevButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page - 1));\n\n        // Next button\n        const nextButton = button.cloneNode(true);\n        nextButton.title = this.localizer.translate('wj.pagination.next');\n        nextButton.innerHTML = `<wje-icon name=\"chevron-right\" slot=\"icon-only\"></wje-icon>`;\n        if(this.page + 1 >= this.paginateObj.totalPages)\n            nextButton.disabled = true;\n        nextButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page + 1));\n\n        // Last button\n        let lastButton = button.cloneNode(true);\n        lastButton.title = this.localizer.translate('wj.pagination.last');\n        lastButton.innerHTML = `<wje-icon name=\"chevron-right-pipe\" slot=\"icon-only\"></wje-icon>`;\n        lastButton.disabled = this.paginateObj.endIndex + 1 >= this.totalItems;\n        lastButton.addEventListener('wje-button:click', (e) =>\n            this.pageClickAction(e, this.paginateObj.totalPages - 1)\n        );\n\n        if (this.showFirstButton) pagination.appendChild(firstButton);\n        pagination.appendChild(prevButton);\n        pagination.appendChild(this.htmlStackButtons(this.paginateObj));\n        pagination.appendChild(nextButton);\n        if (this.showLastButton) pagination.appendChild(lastButton);\n\n        if (this.showInfo) fragment.appendChild(info);\n        fragment.appendChild(pagination);\n\n        return fragment;\n    }\n\n    /**\n     * Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\n     * based on the provided pagination object.\n     * @param {object} paginateObj An object containing pagination details.\n     * @param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.\n     */\n    htmlStackButtons(paginateObj) {\n        let fragment = document.createDocumentFragment();\n\n        const button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        if (this.round) button.setAttribute('round', '');\n\n        let dots = document.createElement('span');\n        dots.classList.add('dots');\n\n        const first = button.cloneNode(true);\n        first.textContent = '1';\n        first.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n        const last = button.cloneNode(true);\n        last.textContent = paginateObj.totalPages;\n        last.addEventListener('wje-button:click', (e) => this.pageClickAction(e, paginateObj.totalPages - 1));\n\n        if (paginateObj.currentPage >= this.maxPages + 1 && paginateObj.boundary < paginateObj.totalPages) {\n            fragment.appendChild(first);\n            fragment.appendChild(dots);\n        }\n\n        paginateObj.pages.forEach((page) => {\n            let newButton = button.cloneNode(true);\n            newButton.textContent = page;\n\n            if (page - 1 === this.page) {\n                newButton.removeAttribute('fill');\n            } else {\n                newButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, page - 1));\n            }\n\n            fragment.appendChild(newButton);\n        });\n\n        if ((paginateObj.pages.length === this.maxPages || paginateObj.currentPage < this.maxPages + 1) && paginateObj.boundary < paginateObj.totalPages) {\n            fragment.appendChild(dots.cloneNode(true));\n            fragment.appendChild(last);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * Handles the click action for pagination and updates the current page.\n     * If the clicked page number is the same as the current page, no action is performed.\n     * Otherwise, the current page is updated to the new page number, and a custom event\n     * 'wje-pagination:page-change' is dispatched with the pagination object.\n     * @param {Event} e The event triggered by the page click.\n     * @param {number} page The page number that was clicked.\n     */\n    pageClickAction = (e, page) => {\n        if (+page === this.page || this.page > this.paginateObj.totalPages) return;\n        this.page = page;\n        event.dispatchCustomEvent(this, 'wje-pagination:page-change', {page: page});\n    };\n}\n\nPagination.define('wje-pagination', Pagination);\n","import Pagination from './pagination.element.js';\n\nexport default Pagination;\n\nPagination.define('wje-pagination', Pagination);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-pagination.js","sources":["../packages/wje-pagination/service/service.js","../packages/wje-pagination/pagination.element.js","../packages/wje-pagination/pagination.js"],"sourcesContent":["/**\n * Paginates items based on the total number of items, current page, page size, and maximum number of pages to display.\n * @param {number} totalItems The total number of items to paginate.\n * @param {number} [currentPage] The current page number (default is 1).\n * @param {number} [pageSize] The number of items per page (default is 10).\n * @param {number} [maxPages] The maximum number of pages to display in the pagination control (default is 5).\n * @returns {object} An object containing pagination details including total items, current page, page size, total pages, start/end page, start/end index, and the pages array.\n */\nexport function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {\n    // Calculate total pages\n    const totalPages = Math.ceil(totalItems / pageSize);\n\n    // Ensure current page is within valid range\n    if (currentPage < 1) {\n        currentPage = 1;\n    } else if (currentPage > totalPages) {\n        currentPage = totalPages;\n    }\n\n    let startPage;\n    let endPage;\n\n    const pagesNearEnd = maxPages + 1; // Define how close to the end we switch back to 5 pages 4\n\n    const boundary = pagesNearEnd + 3;\n\n    if (totalPages > boundary) {\n        if (currentPage < pagesNearEnd) {\n            // If in the first 4 pages, show up to 5 pages\n            startPage = 1;\n            endPage = Math.min(pagesNearEnd + 1, totalPages); //5\n        } else if (currentPage >= totalPages - pagesNearEnd) {\n            // If within 4 pages from the end, show last 5 pages\n            startPage = Math.max(totalPages - pagesNearEnd, 1); //4\n            endPage = totalPages;\n        } else {\n            const halfPages = Math.floor(maxPages / 2);\n            // Otherwise, only show 3 pages (current, previous, next)\n            startPage = currentPage - halfPages + 1;\n            endPage = maxPages % 2 === 1 ? currentPage + halfPages + 1 : currentPage + halfPages - 1;\n        }\n    } else {\n        startPage = 1;\n        endPage = totalPages;\n    }\n\n    // Calculate start and end item indexes\n    const startIndex = (currentPage - 1) * pageSize;\n    const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);\n\n    // Create an array of pages to display\n    const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);\n\n    // Return object with all pager properties (preserving original format)\n    return {\n        boundary: boundary,\n        currentPage: currentPage,\n        endIndex: endIndex,\n        endPage: endPage,\n        totalPages: totalPages,\n        pages: pages,\n        pageSize: pageSize,\n        startIndex: startIndex,\n        startPage: startPage,\n        totalItems: totalItems,\n    };\n}\n","import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport { paginate } from './service/service.js';\nimport Icon from '../wje-icon/icon.js';\nimport Button from '../wje-button/button.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n * @documentation https://elements.webjet.sk/components/pagination\n * @status stable\n * @augments WJElement\n * @dependency wje-icon, wje-button\n * @csspart native - The wrapper element for the pagination component.\n */\nexport default class Pagination extends WJElement {\n    /**\n     * Creates an instance of Pagination.\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n\n        this._paginateObj = null;\n    }\n\n    /**\n     * Sets the value of the 'page' attribute for the object.\n     * @param {string} value The value to set for the 'page' attribute.\n     */\n    set page(value) {\n        this.setAttribute('page', value);\n    }\n\n    /**\n     * Retrieves the current page number as a numeric value.\n     * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.\n     */\n    get page() {\n        return +this.getAttribute('page') || 0;\n    }\n\n    /**\n     * Sets the maximum number of pages.\n     * Updates the 'max-pages' attribute with the provided value.\n     * @param {number|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.\n     */\n    set maxPages(value) {\n        this.setAttribute('max-pages', value);\n    }\n\n    /**\n     * Gets the maximum number of pages.\n     * This getter retrieves the value of the \"max-pages\" attribute from the element.\n     * If the attribute is not set or is invalid, it defaults to 3.\n     * @returns {number} The maximum number of pages as a numeric value.\n     */\n    get maxPages() {\n        return +this.getAttribute('max-pages') || 3;\n    }\n\n    /**\n     * Sets the `pageSize` attribute to the specified value.\n     * @param {number|string} value The desired page size value. This can be a number or a string representation of the size.\n     */\n    set pageSize(value) {\n        this.setAttribute('page-size', value);\n    }\n\n    /**\n     * Retrieves the value of the 'page-size' attribute and converts it to a number.\n     * If the attribute is not set or is invalid, returns the default value of 3.\n     * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.\n     */\n    get pageSize() {\n        return +this.getAttribute('page-size') || 3;\n    }\n\n    /**\n     * Sets the total number of items.\n     * @param {number} value The new total number of items to set.\n     */\n    set totalItems(value) {\n        this.setAttribute('total-items', value);\n    }\n\n    /**\n     * Retrieves the total number of items represented by the 'total-items' attribute.\n     * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.\n     */\n    get totalItems() {\n        return +this.getAttribute('total-items') || 0;\n    }\n\n    /**\n     * Sets the visibility of the first button based on the provided value.\n     * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.\n     * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.\n     */\n    set showFirstButton(value) {\n        this.removeAttribute('show-first-button');\n\n        if (value) {\n            this.setAttribute('show-first-button', '');\n        }\n    }\n\n    /**\n     * Determines whether the 'show-first-button' attribute is present on the element.\n     * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.\n     */\n    get showFirstButton() {\n        return this.hasAttribute('show-first-button');\n    }\n\n    /**\n     * Sets the visibility of the \"last\" button. This method controls the presence\n     * or absence of the \"show-last-button\" attribute based on the provided value.\n     * @param {boolean} value A boolean value indicating whether to show the \"last\" button.\n     * If true, the \"show-last-button\" attribute is added;\n     * if false, the attribute is removed.\n     */\n    set showLastButton(value) {\n        this.removeAttribute('show-last-button');\n\n        if (value) {\n            this.setAttribute('show-last-button', '');\n        }\n    }\n\n    /**\n     * Determines if the 'show-last-button' attribute is present on the element.\n     * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.\n     */\n    get showLastButton() {\n        return this.hasAttribute('show-last-button');\n    }\n\n    /**\n     * Sets the pagination object by calculating the pagination details\n     * based on the total items, current page, page size, and maximum pages.\n     * @param {object} value The value to set the pagination object. The pagination details are computed internally.\n     */\n    set paginateObj(value) {\n        this._paginateObj = value;\n    }\n\n    /**\n     * Retrieves the pagination object used for managing paginated data.\n     * @returns {object} The pagination object containing details and functionality for paginating data.\n     */\n    get paginateObj() {\n        return this._paginateObj;\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the provided value is truthy,\n     * the 'round' attribute is added. If the value is falsy, the attribute is removed.\n     * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.\n     */\n    set round(value) {\n        this.removeAttribute('round');\n\n        if (value) {\n            this.setAttribute('round', '');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute for the current element.\n     * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the `show-info` attribute on the element based on the provided value.\n     * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.\n     */\n    set showInfo(value) {\n        this.removeAttribute('show-info');\n\n        if (value) {\n            this.setAttribute('show-info', '');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'show-info' attribute.\n     * Checks if the 'show-info' attribute is present on the element.\n     * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.\n     */\n    get showInfo() {\n        return this.hasAttribute('show-info');\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n        'wje-button': Button,\n    };\n\n    className = 'Pagination';\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     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return ['page', 'total-items'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    async beforeDraw() {\n        this.paginateObj = await paginate(this.totalItems, this.page, this.pageSize, this.maxPages);\n    }\n\n    /**\n     * Creates a document fragment, appends a new slot element to it, and returns the fragment.\n     * @returns {DocumentFragment} A document fragment containing a slot element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-pagination');\n\n        native.append(this.htmlPagination());\n\n        fragment.append(native);\n\n        return fragment;\n    }\n\n    /**\n     * Creates a pagination control for navigating between pages of content.\n     * This method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n     * @returns {DocumentFragment} A document fragment containing the pagination controls.\n     */\n    htmlPagination() {\n        let fragment = document.createDocumentFragment();\n\n        let info = document.createElement('div');\n        info.classList.add('info');\n        info.innerHTML = `${this.paginateObj.startIndex + 1} - ${this.paginateObj.endIndex + 1} ${this.localizer.translate('wj.pagination.of')} ${this.totalItems}`;\n\n        let pagination = document.createElement('div');\n        pagination.classList.add('pages');\n\n        const button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        if (this.round) button.setAttribute('round', '');\n\n        // First button\n        let firstButton = button.cloneNode(true);\n        firstButton.title = this.localizer.translate('wj.pagination.first');\n        firstButton.innerHTML = `<wje-icon name=\"chevron-left-pipe\" slot=\"icon-only\"></wje-icon>`;\n        firstButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n        // Previous button\n        const prevButton = button.cloneNode(true);\n        prevButton.title = this.localizer.translate('wj.pagination.prev');\n        prevButton.innerHTML = `<wje-icon name=\"chevron-left\" slot=\"icon-only\"></wje-icon>`;\n        if (this.page === 0) prevButton.disabled = true;\n        prevButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page - 1));\n\n        // Next button\n        const nextButton = button.cloneNode(true);\n        nextButton.title = this.localizer.translate('wj.pagination.next');\n        nextButton.innerHTML = `<wje-icon name=\"chevron-right\" slot=\"icon-only\"></wje-icon>`;\n        if (this.page + 1 >= this.paginateObj.totalPages) nextButton.disabled = true;\n        nextButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page + 1));\n\n        // Last button\n        let lastButton = button.cloneNode(true);\n        lastButton.title = this.localizer.translate('wj.pagination.last');\n        lastButton.innerHTML = `<wje-icon name=\"chevron-right-pipe\" slot=\"icon-only\"></wje-icon>`;\n        lastButton.disabled = this.paginateObj.endIndex + 1 >= this.totalItems;\n        lastButton.addEventListener('wje-button:click', (e) =>\n            this.pageClickAction(e, this.paginateObj.totalPages - 1)\n        );\n\n        if (this.showFirstButton) pagination.appendChild(firstButton);\n        pagination.appendChild(prevButton);\n        pagination.appendChild(this.htmlStackButtons(this.paginateObj));\n        pagination.appendChild(nextButton);\n        if (this.showLastButton) pagination.appendChild(lastButton);\n\n        if (this.showInfo) fragment.appendChild(info);\n        fragment.appendChild(pagination);\n\n        return fragment;\n    }\n\n    /**\n     * Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\n     * based on the provided pagination object.\n     * @param {object} paginateObj An object containing pagination details.\n     * @param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.\n     */\n    htmlStackButtons(paginateObj) {\n        let fragment = document.createDocumentFragment();\n\n        const button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        if (this.round) button.setAttribute('round', '');\n\n        let dots = document.createElement('span');\n        dots.classList.add('dots');\n\n        const first = button.cloneNode(true);\n        first.textContent = '1';\n        first.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n        const last = button.cloneNode(true);\n        last.textContent = paginateObj.totalPages;\n        last.addEventListener('wje-button:click', (e) => this.pageClickAction(e, paginateObj.totalPages - 1));\n\n        if (paginateObj.currentPage >= this.maxPages + 1 && paginateObj.boundary < paginateObj.totalPages) {\n            fragment.appendChild(first);\n            fragment.appendChild(dots);\n        }\n\n        paginateObj.pages.forEach((page) => {\n            let newButton = button.cloneNode(true);\n            newButton.textContent = page;\n\n            if (page - 1 === this.page) {\n                newButton.removeAttribute('fill');\n            } else {\n                newButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, page - 1));\n            }\n\n            fragment.appendChild(newButton);\n        });\n\n        if (\n            (paginateObj.pages.length === this.maxPages || paginateObj.currentPage < this.maxPages + 1) &&\n            paginateObj.boundary < paginateObj.totalPages\n        ) {\n            fragment.appendChild(dots.cloneNode(true));\n            fragment.appendChild(last);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * Handles the click action for pagination and updates the current page.\n     * If the clicked page number is the same as the current page, no action is performed.\n     * Otherwise, the current page is updated to the new page number, and a custom event\n     * 'wje-pagination:page-change' is dispatched with the pagination object.\n     * @param {Event} e The event triggered by the page click.\n     * @param {number} page The page number that was clicked.\n     */\n    pageClickAction = (e, page) => {\n        if (+page === this.page || this.page > this.paginateObj.totalPages) return;\n        this.page = page;\n        event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: page });\n    };\n}\n\nPagination.define('wje-pagination', Pagination);\n","import Pagination from './pagination.element.js';\n\nexport default Pagination;\n\nPagination.define('wje-pagination', Pagination);\n"],"names":[],"mappings":"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"}

package/dist/wje-popup.js

@@ -1,4 +1,4 @@
-import { P as Popup } from "./popup.element-tyYxow0p.js";
+import { P as Popup } from "./popup.element-AaduHP2r.js";
 Popup.define("wje-popup", Popup);
 export {
   Popup as default

package/dist/wje-select.js

@@ -10,7 +10,7 @@ import Chip from "./wje-chip.js";
 import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
-import { P as Popup } from "./popup.element-tyYxow0p.js";
+import { P as Popup } from "./popup.element-AaduHP2r.js";
 const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    --wje-select-border-width: 1px;\n    --wje-select-border-style: solid;\n    --wje-select-border-color: var(--wje-border-color);\n\n    --wje-select-options-border-width: 1px;\n    --wje-select-options-border-style: var(--wje-border-style);\n    --wje-select-options-border-color: var(--wje-border-color);\n\n    --wje-select-background: var(--wje-background);\n    --wje-select-line-height: 20px;\n    --wje-select-color: var(--wje-color);\n    --wje-select-border-radius: var(--wje-border-radius-medium);\n\n    --wje-select-margin-bottom: 0.5rem;\n    margin-bottom: var(--wje-select-margin-bottom);\n\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.native-select {\n    &.default {\n        .wrapper {\n            display: block;\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        wje-label {\n            margin: 0;\n            display: block;\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease 0s;\n            line-height: var(--wje-select-line-height);\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    min-height: 28px;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background: var(--wje-select-background);\n    overflow: hidden;\n}\n\n.find {\n    --wje-input-border-radius: 0;\n    --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 0.5rem);\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n";
 class Select extends WJElement {
   /**

package/dist/wje-sliding-container.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 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);
 import WJElement from "./wje-element.js";
-const styles = ":host {\n  display: block;\n  z-index: 1000;\n  /* make css property for width height position  and if it is on top lef bottom right  */\n}\n\n.sliding-container-wrapper {\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.native-sliding-container {\n  overflow: auto;\n}\n";
+const styles = ":host {\n    display: block;\n    z-index: 1000;\n    /* make css property for width height position  and if it is on top lef bottom right  */\n}\n\n.sliding-container-wrapper {\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.native-sliding-container {\n    overflow: auto;\n}\n";
 class SlidingContainer extends WJElement {
   /**
    * Creates an instance of SlidingContainer.
@@ -233,7 +233,6 @@ class SlidingContainer extends WJElement {
    * Attaches an event listener to the document based on the specified trigger.
    * Sets the variant to "over" if the document width is smaller than the screen break point.
    * Calls the checkForVariant method with the current variant.
-   * @returns {Promise<void>} A promise that resolves after the actions are completed.
    */
   afterDraw() {
     document.addEventListener(this.trigger, this.triggerEvent);
@@ -407,6 +406,7 @@ class SlidingContainer extends WJElement {
             composed: true
           })
         );
+        this.checkForVariant(this.variant);
         await this.doAnimateTransition();
         await Promise.resolve(this.afterOpen(event)).then(() => {
           this.dispatchEvent(

package/dist/wje-sliding-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-sliding-container.js","sources":["../experimental-packages/wje-sliding-container/sliding-container.element.js","../experimental-packages/wje-sliding-container/sliding-container.js"],"sourcesContent":["import { default as WJElement } from '../../packages/wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary SlidingContainer is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/SlidingContainer\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @slot - The default slot for the SlidingContainer.\n * @property {string} maxWidth - The maximum width of the SlidingContainer.\n * @property {string} maxHeight - The maximum height of the SlidingContainer.\n * @property {string} trigger - The trigger for the SlidingContainer.\n * @property {string} direction - The direction of the SlidingContainer.\n * @property {string} variant - The variant of the SlidingContainer.\n * @property {string} screenBreakPoint - The screen break point of the SlidingContainer.\n * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.\n * @property {string} animationDuration - The duration of the animation.\n * @property {string} animationEasing - The easing of the animation.\n * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.\n * @tag wje-sliding-container\n * @example\n * <wje-sliding-container trigger=\"test-resize-container-event-right\" id=\"left-in-place\" direction=\"left\" max-width=\"100px\" max-height=\"100%\">\n *    <wje-card>\n *       <wje-card-header>\n *        <wje-card-subtitle>CONTENT Subtitle</wje-card-subtitle>\n *       <wje-card-title>CONTENT Title</wje-card-title>\n *      </wje-card-header>\n *     <wje-card-content>\n *        CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n *    </wje-card-content>\n * </wje-card>\n * </wje-sliding-container>\n */\nexport default class SlidingContainer extends WJElement {\n  /**\n   * Creates an instance of SlidingContainer.\n   * @class\n   */\n  constructor() {\n    super();\n\n    this._isOpen = false;\n    this._lastCaller = null;\n\n    this._resizeObserver = new ResizeObserver((entries) => {\n      for (let entry of entries) {\n        if (entry.contentBoxSize) {\n          if (this.drawingStatus < 3) return;\n\n          if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n            if (this.variant !== 'over') {\n              this.variant = 'over';\n            } else {\n              this.checkForVariant(this.variant);\n            }\n          } else {\n            if (this.variant !== 'in-place') {\n              this.variant = 'in-place';\n            } else {\n              this.checkForVariant(this.variant);\n            }\n          }\n        }\n      }\n    });\n\n    this._resizeObserver.observe(document.documentElement);\n  }\n\n  set maxWidth(value) {\n    this.setAttribute('max-width', value);\n  }\n\n  get maxWidth() {\n    return this.getAttribute('max-width') ?? 'auto';\n  }\n\n  set maxHeight(value) {\n    this.setAttribute('max-height', value);\n  }\n\n  get maxHeight() {\n    return this.getAttribute('max-height') ?? 'auto';\n  }\n\n  set trigger(value) {\n    this.setAttribute('trigger', value);\n  }\n\n  get trigger() {\n    return this.getAttribute('trigger') ?? 'sliding-container';\n  }\n\n  set direction(value) {\n    this.setAttribute('direction', value);\n  }\n\n  get direction() {\n    return this.getAttribute('direction') ?? 'right';\n  }\n\n  set removeChildAfterClose(value) {\n    this.setAttribute('remove-child-after-close', value);\n  }\n\n  get removeChildAfterClose() {\n    return this.hasAttribute('remove-child-after-close') ?? false;\n  }\n\n  set variant(value) {\n    this.setAttribute('variant', value);\n  }\n\n  get variant() {\n    return this.getAttribute('variant') ?? 'in-place';\n  }\n\n  get screenBreakPoint() {\n    return this.getAttribute('screen-break-point');\n  }\n\n  set screenBreakPoint(value) {\n    this.setAttribute('screen-break-point', value);\n  }\n\n  get animationDuration() {\n    return this.getAttribute('animation-duration') ?? '500';\n  }\n\n  set animationDuration(value) {\n    this.setAttribute('animation-duration', value);\n  }\n\n  get animationEasing() {\n    return this.getAttribute('animation-easing') ?? 'linear';\n  }\n\n  set animationEasing(value) {\n    this.setAttribute('animation-easing', value);\n  }\n\n  get hasOpacity() {\n    return this.hasAttribute('has-opacity') ?? false;\n  }\n\n  get addToHeight() {\n    return this.getAttribute('add-to-height') ?? '0';\n  }\n\n  set addToHeight(value) {\n    this.setAttribute('add-to-height', value);\n  }\n\n  className = 'SlidingContainer';\n\n  /**\n   * Returns the observed attributes for the component.\n   * @returns {string[]}\n   */\n  static get observedAttributes() {\n    return [\n      'max-width',\n      'max-height',\n      'trigger',\n      'direction',\n      'variant',\n      'screen-break-point',\n      'remove-child-after-close',\n      'animation-duration',\n      'animation-easing',\n      'has-opacity',\n    ];\n  }\n\n  /**\n   * Returns the CSS styles for the component.\n   * @static\n   * @returns {CSSStyleSheet}\n   */\n  static get cssStyleSheet() {\n    return styles;\n  }\n\n  /**\n   * Sets up the attributes for the component.\n   */\n  setupAttributes() {\n    this.isShadowRoot = 'open';\n  }\n\n  /**\n   * 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.style.position = 'relative';\n    this.style.height = '100%';\n    this.style.right = 'unset';\n    this.style.left = 'unset';\n\n    this.wrapperDiv = document.createElement('div');\n    this.wrapperDiv.classList.add('sliding-container-wrapper');\n\n    this.transparentDiv = document.createElement('div');\n    this.transparentDiv.classList.add('sliding-container-transparent');\n    if (this._isOpen) {\n      this.transparentDiv.style.width = this.maxWidth;\n    }\n\n    let native = document.createElement('div');\n    native.style.position = 'absolute';\n    native.style.width = 0;\n    if (this.hasOpacity) {\n      native.style.opacity = 0;\n    }\n\n    if (this._isOpen) {\n      native.style.width = this.maxWidth;\n      if (this.hasOpacity) {\n        native.style.opacity = 1;\n      }\n    }\n\n    native.style.height = '100%';\n\n    native.classList.add('native-sliding-container');\n    native.setAttribute('part', 'sliding-container');\n\n    if (this.direction === 'right') {\n      native.style.right = 0;\n    } else {\n      native.style.left = 0;\n    }\n\n    let slot = document.createElement('slot');\n\n    const nativeInner = document.createElement('div');\n    nativeInner.classList.add('native-sliding-container-inner');\n    nativeInner.style.height = '100%';\n    nativeInner.style.position = 'absolute';\n    nativeInner.style.width = this.maxWidth;\n\n    nativeInner.appendChild(slot);\n    nativeInner.appendChild(this.getCloseButton());\n\n    native.appendChild(nativeInner);\n    this.wrapperDiv.appendChild(this.transparentDiv);\n    this.wrapperDiv.appendChild(native);\n    fragment.appendChild(this.wrapperDiv);\n\n    this.nativeElement = native;\n\n    return fragment;\n  }\n\n  /**\n   * Creates and returns a close button element.\n   * @returns {HTMLElement} The close button element.\n   */\n  getCloseButton() {\n    let closeButton = document.createElement('wje-button');\n    closeButton.setAttribute('part', 'close-button');\n    closeButton.style.position = 'absolute';\n    closeButton.style.top = '0';\n    closeButton.style.right = '0';\n    closeButton.style.zIndex = '1000';\n\n    let icon = document.createElement('wje-icon');\n    icon.setAttribute('slot', 'icon-only');\n    icon.setAttribute('name', 'x');\n    closeButton.appendChild(icon);\n\n    closeButton.addEventListener('click', () => {\n      this.close();\n    });\n\n    return closeButton;\n  }\n\n  /**\n   * Executes before drawing the element.\n   */\n  beforeDraw() {\n    this.animation?.cancel();\n    this.nativeAnimation?.cancel();\n    document.removeEventListener(this.trigger, this.triggerEvent);\n  }\n\n  /**\n   * Performs actions after the element is drawn on the screen.\n   * Attaches an event listener to the document based on the specified trigger.\n   * Sets the variant to \"over\" if the document width is smaller than the screen break point.\n   * Calls the checkForVariant method with the current variant.\n   * @returns {Promise<void>} A promise that resolves after the actions are completed.\n   */\n  afterDraw() {\n    document.addEventListener(this.trigger, this.triggerEvent);\n\n    // if document width is on small screen set variant to over\n    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n      this.variant = 'over';\n    }\n\n    this.checkForVariant(this.variant);\n  }\n\n  getParentElement() {\n    let parentElement = this.parentElement;\n\n    if (!parentElement) {\n      parentElement = this.getRootNode().host;\n    }\n\n    return parentElement;\n  }\n\n  /**\n   * Checks for a specific variant and applies corresponding styles.\n   * @param {string} variant The variant to check for.\n   */\n  checkForVariant(variant) {\n    if (variant === 'over') {\n      this.style.position = 'fixed';\n      let computentStyleOfParent = window.getComputedStyle(this.getParentElement());\n      let parentElementBoundingbox = this.getParentElement().getBoundingClientRect();\n      let heightOfParrentElement = parseFloat(computentStyleOfParent.height);\n\n      let topOfParrentElement = parseFloat(computentStyleOfParent.top);\n\n      this.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n      this.wrapperDiv.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n      this.style.top = topOfParrentElement + 'px';\n\n      const leftSibling = this.previousElementSibling;\n      const rightSibling = this.nextElementSibling;\n      const leftSiblingBoundingbox = leftSibling?.getBoundingClientRect();\n      const rightSiblingBoundingbox = rightSibling?.getBoundingClientRect();\n\n      if (this.direction === 'right') {\n        // attach to left sibling\n        if (leftSiblingBoundingbox) {\n          this.style.left = leftSiblingBoundingbox.left + leftSiblingBoundingbox.width + 'px';\n        } else {\n          this.style.left = parentElementBoundingbox.left + 'px';\n        }\n      } else {\n        // attach to right sibling\n        if (rightSiblingBoundingbox) {\n          this.style.right = window.innerWidth - rightSiblingBoundingbox.left + 'px';\n        } else {\n          this.style.right =\n            window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + 'px';\n        }\n      }\n    }\n  }\n\n  /**\n   * Triggers the event based on the target element.\n   * If the target element is different from the last caller, it refreshes the children by calling the `open` method.\n   * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.\n   * @param {Event} e The event object.\n   */\n  triggerEvent = async (e) => {\n    if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {\n      // same oppener event but different caller so just refresh inner content\n      await this.open(e);\n    } else {\n      // came caller so toggle\n      await this.toggle(e);\n    }\n\n    this._lastCaller = e.composedPath()[0];\n  };\n\n  /**\n   * Executes before the element is opened.\n   */\n  beforeOpen(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Callback function called after the element is opened.\n   */\n  afterOpen(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Executes before closing the element.\n   */\n  beforeClose(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Callback function that is called after the container is closed.\n   */\n  afterClose(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Animates the transition of the element's width from 0 to the maximum width or vice versa.\n   * @returns {Promise<void>} A promise that resolves when the animation is complete.\n   */\n  doAnimateTransition() {\n    const options = {\n      delay: 0,\n      endDelay: 0,\n      fill: 'forwards',\n      duration: +this.animationDuration,\n      iterationStart: 0,\n      iterations: 1,\n      direction: 'normal',\n      easing: this.animationEasing,\n    };\n\n    if (this.animation && this.animation?.effect?.target !== this.transparentDiv) {\n      this.animation.cancel();\n      this.animation = null;\n    }\n\n    if (this.nativeAnimation && this.nativeAnimation?.effect?.target !== this.nativeElement) {\n      this.nativeAnimation.cancel();\n      this.nativeAnimation = null;\n    }\n\n    if (!this._isOpen) {\n      if (this.animation && this.nativeAnimation) {\n        this.animation.reverse();\n        this.nativeAnimation.reverse();\n      } else {\n        this.animation = this.transparentDiv.animate(\n          [\n            {\n              width: 0,\n            },\n            {\n              width: this.maxWidth,\n            },\n          ],\n          options,\n        );\n\n        this.nativeAnimation = this.nativeElement.animate(\n          [\n            {\n              ...(this.hasOpacity ? { opacity: 0 } : {}),\n              width: 0,\n            },\n            {\n              ...(this.hasOpacity ? { opacity: 1 } : {}),\n              width: this.maxWidth,\n            },\n          ],\n          options,\n        );\n      }\n    } else {\n      if (this.animation && this.nativeAnimation) {\n        this.animation.reverse();\n        this.nativeAnimation.reverse();\n      } else {\n        this.animation = this.transparentDiv.animate(\n          [\n            {\n              width: this.maxWidth,\n            },\n            {\n              width: 0,\n            },\n          ],\n          options,\n        );\n\n        this.nativeAnimation = this.nativeElement.animate(\n          [\n            {\n              ...(this.hasOpacity ? { opacity: 1 } : {}),\n              width: this.maxWidth,\n            },\n            {\n              ...(this.hasOpacity ? { opacity: 0 } : {}),\n              width: 0,\n            },\n          ],\n          options,\n        );\n      }\n    }\n\n    return new Promise((resolve, reject) => {\n      this.animation.onfinish = () => {\n        this._isOpen = !this._isOpen;\n        resolve();\n      };\n    });\n  }\n\n  /**\n   * Opens the container with an animation.\n   * @returns {Promise<void>} A promise that resolves when the container is opened.\n   */\n  async open(event) {\n    await Promise.resolve(this.beforeOpen(event)).then(async () => {\n      if (!this._isOpen) {\n        this.dispatchEvent(\n          new CustomEvent('wje-sliding-container:beforeOpen', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        await this.doAnimateTransition();\n\n        await Promise.resolve(this.afterOpen(event)).then(() => {\n          this.dispatchEvent(\n            new CustomEvent('wje-sliding-container:open', {\n              bubbles: true,\n              composed: true,\n            }),\n          );\n        });\n      }\n    });\n  }\n\n  /**\n   * Closes the animation container.\n   * @returns {Promise<void>} A promise that resolves when the container is closed.\n   */\n  async close(event) {\n    await Promise.resolve(this.beforeClose(event)).then(async () => {\n      if (this._isOpen) {\n        this.dispatchEvent(\n          new CustomEvent('wje-sliding-container:beforeClose', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        await this.doAnimateTransition();\n\n        await Promise.resolve(this.afterClose(event)).then(() => {\n          if (this.removeChildAfterClose) {\n            this.childNodes.forEach((child) => {\n              child.remove();\n            });\n          }\n\n          this.dispatchEvent(\n            new CustomEvent('wje-sliding-container:close', {\n              bubbles: true,\n              composed: true,\n            }),\n          );\n        });\n      }\n    });\n  }\n\n  /**\n   * Toggles the state of the element.\n   * If the element is open, it will be closed. If it is closed, it will be opened.\n   * @returns {Promise<void>} A promise that resolves when the toggle operation is complete.\n   */\n  async toggle(event) {\n    if (this._isOpen) {\n      await this.close(event);\n    } else {\n      await this.open(event);\n    }\n  }\n\n  componentCleanup() {\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n}\n","import SlidingContainer from './sliding-container.element.js';\n\nexport default SlidingContainer;\n\nSlidingContainer.define('wje-sliding-container', SlidingContainer);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-sliding-container.js","sources":["../experimental-packages/wje-sliding-container/sliding-container.element.js","../experimental-packages/wje-sliding-container/sliding-container.js"],"sourcesContent":["import { default as WJElement } from '../../packages/wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary SlidingContainer is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/SlidingContainer\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @slot - The default slot for the SlidingContainer.\n * @property {string} maxWidth - The maximum width of the SlidingContainer.\n * @property {string} maxHeight - The maximum height of the SlidingContainer.\n * @property {string} trigger - The trigger for the SlidingContainer.\n * @property {string} direction - Specifies the sliding direction of the container (e.g., 'left' or 'right').\n * @property {string} variant - Determines how the SlidingContainer behaves, such as 'over' or 'in-place'.\n * @property {string} screenBreakPoint - The width (in pixels) at which the SlidingContainer switches to the \"over\" variant for smaller screens.\n * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.\n * @property {string} animationDuration - Specifies the duration (in milliseconds) of the sliding animation.\n * @property {string} animationEasing - Specifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').\n * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.\n * @tag wje-sliding-container\n * @example\n * <wje-sliding-container trigger=\"test-resize-container-event-right\" id=\"left-in-place\" direction=\"left\" max-width=\"100px\" max-height=\"100%\">\n *    <wje-card>\n *       <wje-card-header>\n *        <wje-card-subtitle>CONTENT Subtitle</wje-card-subtitle>\n *       <wje-card-title>CONTENT Title</wje-card-title>\n *      </wje-card-header>\n *     <wje-card-content>\n *        CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n *    </wje-card-content>\n * </wje-card>\n * </wje-sliding-container>\n */\nexport default class SlidingContainer extends WJElement {\n    /**\n     * Creates an instance of SlidingContainer.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._isOpen = false;\n        this._lastCaller = null;\n\n        this._resizeObserver = new ResizeObserver((entries) => {\n            for (let entry of entries) {\n                if (entry.contentBoxSize) {\n                    if (this.drawingStatus < 3) return;\n\n                    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n                        if (this.variant !== 'over') {\n                            this.variant = 'over';\n                        } else {\n                            this.checkForVariant(this.variant);\n                        }\n                    } else {\n                        if (this.variant !== 'in-place') {\n                            this.variant = 'in-place';\n                        } else {\n                            this.checkForVariant(this.variant);\n                        }\n                    }\n                }\n            }\n        });\n\n        this._resizeObserver.observe(document.documentElement);\n    }\n\n    set maxWidth(value) {\n        this.setAttribute('max-width', value);\n    }\n\n    get maxWidth() {\n        return this.getAttribute('max-width') ?? 'auto';\n    }\n\n    set maxHeight(value) {\n        this.setAttribute('max-height', value);\n    }\n\n    get maxHeight() {\n        return this.getAttribute('max-height') ?? 'auto';\n    }\n\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    get trigger() {\n        return this.getAttribute('trigger') ?? 'sliding-container';\n    }\n\n    set direction(value) {\n        this.setAttribute('direction', value);\n    }\n\n    get direction() {\n        return this.getAttribute('direction') ?? 'right';\n    }\n\n    set removeChildAfterClose(value) {\n        this.setAttribute('remove-child-after-close', value);\n    }\n\n    get removeChildAfterClose() {\n        return this.hasAttribute('remove-child-after-close') ?? false;\n    }\n\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    get variant() {\n        return this.getAttribute('variant') ?? 'in-place';\n    }\n\n    get screenBreakPoint() {\n        return this.getAttribute('screen-break-point');\n    }\n\n    set screenBreakPoint(value) {\n        this.setAttribute('screen-break-point', value);\n    }\n\n    get animationDuration() {\n        return this.getAttribute('animation-duration') ?? '500';\n    }\n\n    set animationDuration(value) {\n        this.setAttribute('animation-duration', value);\n    }\n\n    get animationEasing() {\n        return this.getAttribute('animation-easing') ?? 'linear';\n    }\n\n    set animationEasing(value) {\n        this.setAttribute('animation-easing', value);\n    }\n\n    get hasOpacity() {\n        return this.hasAttribute('has-opacity') ?? false;\n    }\n\n    get addToHeight() {\n        return this.getAttribute('add-to-height') ?? '0';\n    }\n\n    set addToHeight(value) {\n        this.setAttribute('add-to-height', value);\n    }\n\n    className = 'SlidingContainer';\n\n    /**\n     * Returns the observed attributes for the component.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return [\n            'max-width',\n            'max-height',\n            'trigger',\n            'direction',\n            'variant',\n            'screen-break-point',\n            'remove-child-after-close',\n            'animation-duration',\n            'animation-easing',\n            'has-opacity',\n        ];\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * 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.style.position = 'relative';\n        this.style.height = '100%';\n        this.style.right = 'unset';\n        this.style.left = 'unset';\n\n        this.wrapperDiv = document.createElement('div');\n        this.wrapperDiv.classList.add('sliding-container-wrapper');\n\n        this.transparentDiv = document.createElement('div');\n        this.transparentDiv.classList.add('sliding-container-transparent');\n        if (this._isOpen) {\n            this.transparentDiv.style.width = this.maxWidth;\n        }\n\n        let native = document.createElement('div');\n        native.style.position = 'absolute';\n        native.style.width = 0;\n        if (this.hasOpacity) {\n            native.style.opacity = 0;\n        }\n\n        if (this._isOpen) {\n            native.style.width = this.maxWidth;\n            if (this.hasOpacity) {\n                native.style.opacity = 1;\n            }\n        }\n\n        native.style.height = '100%';\n\n        native.classList.add('native-sliding-container');\n        native.setAttribute('part', 'sliding-container');\n\n        if (this.direction === 'right') {\n            native.style.right = 0;\n        } else {\n            native.style.left = 0;\n        }\n\n        let slot = document.createElement('slot');\n\n        const nativeInner = document.createElement('div');\n        nativeInner.classList.add('native-sliding-container-inner');\n        nativeInner.style.height = '100%';\n        nativeInner.style.position = 'absolute';\n        nativeInner.style.width = this.maxWidth;\n\n        nativeInner.appendChild(slot);\n        nativeInner.appendChild(this.getCloseButton());\n\n        native.appendChild(nativeInner);\n        this.wrapperDiv.appendChild(this.transparentDiv);\n        this.wrapperDiv.appendChild(native);\n        fragment.appendChild(this.wrapperDiv);\n\n        this.nativeElement = native;\n\n        return fragment;\n    }\n\n    /**\n     * Creates and returns a close button element.\n     * @returns {HTMLElement} The close button element.\n     */\n    getCloseButton() {\n        let closeButton = document.createElement('wje-button');\n        closeButton.setAttribute('part', 'close-button');\n        closeButton.style.position = 'absolute';\n        closeButton.style.top = '0';\n        closeButton.style.right = '0';\n        closeButton.style.zIndex = '1000';\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('slot', 'icon-only');\n        icon.setAttribute('name', 'x');\n        closeButton.appendChild(icon);\n\n        closeButton.addEventListener('click', () => {\n            this.close();\n        });\n\n        return closeButton;\n    }\n\n    /**\n     * Executes before drawing the element.\n     */\n    beforeDraw() {\n        this.animation?.cancel();\n        this.nativeAnimation?.cancel();\n        document.removeEventListener(this.trigger, this.triggerEvent);\n    }\n\n    /**\n     * Performs actions after the element is drawn on the screen.\n     * Attaches an event listener to the document based on the specified trigger.\n     * Sets the variant to \"over\" if the document width is smaller than the screen break point.\n     * Calls the checkForVariant method with the current variant.\n     */\n    afterDraw() {\n        document.addEventListener(this.trigger, this.triggerEvent);\n\n        // if document width is on small screen set variant to over\n        if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n            this.variant = 'over';\n        }\n\n        this.checkForVariant(this.variant);\n    }\n\n    getParentElement() {\n        let parentElement = this.parentElement;\n\n        if (!parentElement) {\n            parentElement = this.getRootNode().host;\n        }\n\n        return parentElement;\n    }\n\n    /**\n     * Checks for a specific variant and applies corresponding styles.\n     * @param {string} variant The variant to check for.\n     */\n    checkForVariant(variant) {\n        if (variant === 'over') {\n            this.style.position = 'fixed';\n            let computentStyleOfParent = window.getComputedStyle(this.getParentElement());\n            let parentElementBoundingbox = this.getParentElement().getBoundingClientRect();\n            let heightOfParrentElement = parseFloat(computentStyleOfParent.height);\n\n            let topOfParrentElement = parseFloat(computentStyleOfParent.top);\n\n            this.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n            this.wrapperDiv.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n            this.style.top = topOfParrentElement + 'px';\n\n            const leftSibling = this.previousElementSibling;\n            const rightSibling = this.nextElementSibling;\n            const leftSiblingBoundingbox = leftSibling?.getBoundingClientRect();\n            const rightSiblingBoundingbox = rightSibling?.getBoundingClientRect();\n\n            if (this.direction === 'right') {\n                // attach to left sibling\n                if (leftSiblingBoundingbox) {\n                    this.style.left = leftSiblingBoundingbox.left + leftSiblingBoundingbox.width + 'px';\n                } else {\n                    this.style.left = parentElementBoundingbox.left + 'px';\n                }\n            } else {\n                // attach to right sibling\n                if (rightSiblingBoundingbox) {\n                    this.style.right = window.innerWidth - rightSiblingBoundingbox.left + 'px';\n                } else {\n                    this.style.right =\n                        window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + 'px';\n                }\n            }\n        }\n    }\n\n    /**\n     * Triggers the event based on the target element.\n     * If the target element is different from the last caller, it refreshes the children by calling the `open` method.\n     * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.\n     * @param {Event} e The event object.\n     */\n    triggerEvent = async (e) => {\n        if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {\n            // same oppener event but different caller so just refresh inner content\n            await this.open(e);\n        } else {\n            // came caller so toggle\n            await this.toggle(e);\n        }\n\n        this._lastCaller = e.composedPath()[0];\n    };\n\n    /**\n     * Executes before the element is opened.\n     */\n    beforeOpen(event) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Callback function called after the element is opened.\n     */\n    afterOpen(event) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Executes before closing the element.\n     */\n    beforeClose(event) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Callback function that is called after the container is closed.\n     */\n    afterClose(event) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Animates the transition of the element's width from 0 to the maximum width or vice versa.\n     * @returns {Promise<void>} A promise that resolves when the animation is complete.\n     */\n    doAnimateTransition() {\n        const options = {\n            delay: 0,\n            endDelay: 0,\n            fill: 'forwards',\n            duration: +this.animationDuration,\n            iterationStart: 0,\n            iterations: 1,\n            direction: 'normal',\n            easing: this.animationEasing,\n        };\n\n        if (this.animation && this.animation?.effect?.target !== this.transparentDiv) {\n            this.animation.cancel();\n            this.animation = null;\n        }\n\n        if (this.nativeAnimation && this.nativeAnimation?.effect?.target !== this.nativeElement) {\n            this.nativeAnimation.cancel();\n            this.nativeAnimation = null;\n        }\n\n        if (!this._isOpen) {\n            if (this.animation && this.nativeAnimation) {\n                this.animation.reverse();\n                this.nativeAnimation.reverse();\n            } else {\n                this.animation = this.transparentDiv.animate(\n                    [\n                        {\n                            width: 0,\n                        },\n                        {\n                            width: this.maxWidth,\n                        },\n                    ],\n                    options\n                );\n\n                this.nativeAnimation = this.nativeElement.animate(\n                    [\n                        {\n                            ...(this.hasOpacity ? { opacity: 0 } : {}),\n                            width: 0,\n                        },\n                        {\n                            ...(this.hasOpacity ? { opacity: 1 } : {}),\n                            width: this.maxWidth,\n                        },\n                    ],\n                    options\n                );\n            }\n        } else {\n            if (this.animation && this.nativeAnimation) {\n                this.animation.reverse();\n                this.nativeAnimation.reverse();\n            } else {\n                this.animation = this.transparentDiv.animate(\n                    [\n                        {\n                            width: this.maxWidth,\n                        },\n                        {\n                            width: 0,\n                        },\n                    ],\n                    options\n                );\n\n                this.nativeAnimation = this.nativeElement.animate(\n                    [\n                        {\n                            ...(this.hasOpacity ? { opacity: 1 } : {}),\n                            width: this.maxWidth,\n                        },\n                        {\n                            ...(this.hasOpacity ? { opacity: 0 } : {}),\n                            width: 0,\n                        },\n                    ],\n                    options\n                );\n            }\n        }\n\n        return new Promise((resolve, reject) => {\n            this.animation.onfinish = () => {\n                this._isOpen = !this._isOpen;\n                resolve();\n            };\n        });\n    }\n\n    /**\n     * Opens the container with an animation.\n     * @returns {Promise<void>} A promise that resolves when the container is opened.\n     */\n    async open(event) {\n        await Promise.resolve(this.beforeOpen(event)).then(async () => {\n            if (!this._isOpen) {\n                this.dispatchEvent(\n                    new CustomEvent('wje-sliding-container:beforeOpen', {\n                        bubbles: true,\n                        composed: true,\n                    })\n                );\n\n                this.checkForVariant(this.variant);\n\n                await this.doAnimateTransition();\n\n                await Promise.resolve(this.afterOpen(event)).then(() => {\n                    this.dispatchEvent(\n                        new CustomEvent('wje-sliding-container:open', {\n                            bubbles: true,\n                            composed: true,\n                        })\n                    );\n                });\n            }\n        });\n    }\n\n    /**\n     * Closes the animation container.\n     * @returns {Promise<void>} A promise that resolves when the container is closed.\n     */\n    async close(event) {\n        await Promise.resolve(this.beforeClose(event)).then(async () => {\n            if (this._isOpen) {\n                this.dispatchEvent(\n                    new CustomEvent('wje-sliding-container:beforeClose', {\n                        bubbles: true,\n                        composed: true,\n                    })\n                );\n\n                await this.doAnimateTransition();\n\n                await Promise.resolve(this.afterClose(event)).then(() => {\n                    if (this.removeChildAfterClose) {\n                        this.childNodes.forEach((child) => {\n                            child.remove();\n                        });\n                    }\n\n                    this.dispatchEvent(\n                        new CustomEvent('wje-sliding-container:close', {\n                            bubbles: true,\n                            composed: true,\n                        })\n                    );\n                });\n            }\n        });\n    }\n\n    /**\n     * Toggles the state of the element.\n     * If the element is open, it will be closed. If it is closed, it will be opened.\n     * @returns {Promise<void>} A promise that resolves when the toggle operation is complete.\n     */\n    async toggle(event) {\n        if (this._isOpen) {\n            await this.close(event);\n        } else {\n            await this.open(event);\n        }\n    }\n\n    componentCleanup() {\n        this._resizeObserver?.disconnect();\n        this._resizeObserver = null;\n    }\n}\n","import SlidingContainer from './sliding-container.element.js';\n\nexport default SlidingContainer;\n\nSlidingContainer.define('wje-sliding-container', SlidingContainer);\n"],"names":[],"mappings":";;;;;AAkCe,MAAM,yBAAyB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpD,cAAc;AACV,UAAO;AAkHX,qCAAY;AAsNZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAe,OAAO,MAAM;AACxB,UAAI,KAAK,eAAe,KAAK,gBAAgB,EAAE,aAAY,EAAG,CAAC,GAAG;AAE9D,cAAM,KAAK,KAAK,CAAC;AAAA,MAC7B,OAAe;AAEH,cAAM,KAAK,OAAO,CAAC;AAAA,MAC/B;AAEQ,WAAK,cAAc,EAAE,aAAY,EAAG,CAAC;AAAA,IACxC;AAhVG,SAAK,UAAU;AACf,SAAK,cAAc;AAEnB,SAAK,kBAAkB,IAAI,eAAe,CAAC,YAAY;AACnD,eAAS,SAAS,SAAS;AACvB,YAAI,MAAM,gBAAgB;AACtB,cAAI,KAAK,gBAAgB,EAAG;AAE5B,cAAI,KAAK,oBAAoB,OAAO,cAAc,KAAK,kBAAkB;AACrE,gBAAI,KAAK,YAAY,QAAQ;AACzB,mBAAK,UAAU;AAAA,YAC3C,OAA+B;AACH,mBAAK,gBAAgB,KAAK,OAAO;AAAA,YAC7D;AAAA,UACA,OAA2B;AACH,gBAAI,KAAK,YAAY,YAAY;AAC7B,mBAAK,UAAU;AAAA,YAC3C,OAA+B;AACH,mBAAK,gBAAgB,KAAK,OAAO;AAAA,YAC7D;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA,CAAS;AAED,SAAK,gBAAgB,QAAQ,SAAS,eAAe;AAAA,EAC7D;AAAA,EAEI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA,EAEI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EACjD;AAAA,EAEI,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,cAAc,KAAK;AAAA,EAC7C;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,YAAY,KAAK;AAAA,EAClD;AAAA,EAEI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA,EAEI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA,EAEI,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EACjD;AAAA,EAEI,IAAI,sBAAsB,OAAO;AAC7B,SAAK,aAAa,4BAA4B,KAAK;AAAA,EAC3D;AAAA,EAEI,IAAI,wBAAwB;AACxB,WAAO,KAAK,aAAa,0BAA0B,KAAK;AAAA,EAChE;AAAA,EAEI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA,EAEI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA,EAEI,IAAI,mBAAmB;AACnB,WAAO,KAAK,aAAa,oBAAoB;AAAA,EACrD;AAAA,EAEI,IAAI,iBAAiB,OAAO;AACxB,SAAK,aAAa,sBAAsB,KAAK;AAAA,EACrD;AAAA,EAEI,IAAI,oBAAoB;AACpB,WAAO,KAAK,aAAa,oBAAoB,KAAK;AAAA,EAC1D;AAAA,EAEI,IAAI,kBAAkB,OAAO;AACzB,SAAK,aAAa,sBAAsB,KAAK;AAAA,EACrD;AAAA,EAEI,IAAI,kBAAkB;AAClB,WAAO,KAAK,aAAa,kBAAkB,KAAK;AAAA,EACxD;AAAA,EAEI,IAAI,gBAAgB,OAAO;AACvB,SAAK,aAAa,oBAAoB,KAAK;AAAA,EACnD;AAAA,EAEI,IAAI,aAAa;AACb,WAAO,KAAK,aAAa,aAAa,KAAK;AAAA,EACnD;AAAA,EAEI,IAAI,cAAc;AACd,WAAO,KAAK,aAAa,eAAe,KAAK;AAAA,EACrD;AAAA,EAEI,IAAI,YAAY,OAAO;AACnB,SAAK,aAAa,iBAAiB,KAAK;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,WAAW,qBAAqB;AAC5B,WAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACH;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,KAAK,SAAS,OAAO,QAAQ;AACzB,QAAI,WAAW,SAAS,uBAAwB;AAEhD,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,QAAQ;AACnB,SAAK,MAAM,OAAO;AAElB,SAAK,aAAa,SAAS,cAAc,KAAK;AAC9C,SAAK,WAAW,UAAU,IAAI,2BAA2B;AAEzD,SAAK,iBAAiB,SAAS,cAAc,KAAK;AAClD,SAAK,eAAe,UAAU,IAAI,+BAA+B;AACjE,QAAI,KAAK,SAAS;AACd,WAAK,eAAe,MAAM,QAAQ,KAAK;AAAA,IACnD;AAEQ,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,MAAM,WAAW;AACxB,WAAO,MAAM,QAAQ;AACrB,QAAI,KAAK,YAAY;AACjB,aAAO,MAAM,UAAU;AAAA,IACnC;AAEQ,QAAI,KAAK,SAAS;AACd,aAAO,MAAM,QAAQ,KAAK;AAC1B,UAAI,KAAK,YAAY;AACjB,eAAO,MAAM,UAAU;AAAA,MACvC;AAAA,IACA;AAEQ,WAAO,MAAM,SAAS;AAEtB,WAAO,UAAU,IAAI,0BAA0B;AAC/C,WAAO,aAAa,QAAQ,mBAAmB;AAE/C,QAAI,KAAK,cAAc,SAAS;AAC5B,aAAO,MAAM,QAAQ;AAAA,IACjC,OAAe;AACH,aAAO,MAAM,OAAO;AAAA,IAChC;AAEQ,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,UAAM,cAAc,SAAS,cAAc,KAAK;AAChD,gBAAY,UAAU,IAAI,gCAAgC;AAC1D,gBAAY,MAAM,SAAS;AAC3B,gBAAY,MAAM,WAAW;AAC7B,gBAAY,MAAM,QAAQ,KAAK;AAE/B,gBAAY,YAAY,IAAI;AAC5B,gBAAY,YAAY,KAAK,gBAAgB;AAE7C,WAAO,YAAY,WAAW;AAC9B,SAAK,WAAW,YAAY,KAAK,cAAc;AAC/C,SAAK,WAAW,YAAY,MAAM;AAClC,aAAS,YAAY,KAAK,UAAU;AAEpC,SAAK,gBAAgB;AAErB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,iBAAiB;AACb,QAAI,cAAc,SAAS,cAAc,YAAY;AACrD,gBAAY,aAAa,QAAQ,cAAc;AAC/C,gBAAY,MAAM,WAAW;AAC7B,gBAAY,MAAM,MAAM;AACxB,gBAAY,MAAM,QAAQ;AAC1B,gBAAY,MAAM,SAAS;AAE3B,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,WAAW;AACrC,SAAK,aAAa,QAAQ,GAAG;AAC7B,gBAAY,YAAY,IAAI;AAE5B,gBAAY,iBAAiB,SAAS,MAAM;AACxC,WAAK,MAAO;AAAA,IACxB,CAAS;AAED,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,aAAa;;AACT,eAAK,cAAL,mBAAgB;AAChB,eAAK,oBAAL,mBAAsB;AACtB,aAAS,oBAAoB,KAAK,SAAS,KAAK,YAAY;AAAA,EACpE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,YAAY;AACR,aAAS,iBAAiB,KAAK,SAAS,KAAK,YAAY;AAGzD,QAAI,KAAK,oBAAoB,OAAO,cAAc,KAAK,kBAAkB;AACrE,WAAK,UAAU;AAAA,IAC3B;AAEQ,SAAK,gBAAgB,KAAK,OAAO;AAAA,EACzC;AAAA,EAEI,mBAAmB;AACf,QAAI,gBAAgB,KAAK;AAEzB,QAAI,CAAC,eAAe;AAChB,sBAAgB,KAAK,YAAW,EAAG;AAAA,IAC/C;AAEQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,gBAAgB,SAAS;AACrB,QAAI,YAAY,QAAQ;AACpB,WAAK,MAAM,WAAW;AACtB,UAAI,yBAAyB,OAAO,iBAAiB,KAAK,iBAAgB,CAAE;AAC5E,UAAI,2BAA2B,KAAK,iBAAgB,EAAG,sBAAuB;AAC9E,UAAI,yBAAyB,WAAW,uBAAuB,MAAM;AAErE,UAAI,sBAAsB,WAAW,uBAAuB,GAAG;AAE/D,WAAK,MAAM,SAAS,yBAAyB,CAAC,KAAK,cAAc;AACjE,WAAK,WAAW,MAAM,SAAS,yBAAyB,CAAC,KAAK,cAAc;AAC5E,WAAK,MAAM,MAAM,sBAAsB;AAEvC,YAAM,cAAc,KAAK;AACzB,YAAM,eAAe,KAAK;AAC1B,YAAM,yBAAyB,2CAAa;AAC5C,YAAM,0BAA0B,6CAAc;AAE9C,UAAI,KAAK,cAAc,SAAS;AAE5B,YAAI,wBAAwB;AACxB,eAAK,MAAM,OAAO,uBAAuB,OAAO,uBAAuB,QAAQ;AAAA,QACnG,OAAuB;AACH,eAAK,MAAM,OAAO,yBAAyB,OAAO;AAAA,QACtE;AAAA,MACA,OAAmB;AAEH,YAAI,yBAAyB;AACzB,eAAK,MAAM,QAAQ,OAAO,aAAa,wBAAwB,OAAO;AAAA,QAC1F,OAAuB;AACH,eAAK,MAAM,QACP,OAAO,cAAc,yBAAyB,OAAO,yBAAyB,SAAS;AAAA,QAC/G;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAuBI,WAAW,OAAO;AAAA,EAEtB;AAAA;AAAA;AAAA;AAAA,EAKI,UAAU,OAAO;AAAA,EAErB;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY,OAAO;AAAA,EAEvB;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW,OAAO;AAAA,EAEtB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,sBAAsB;;AAClB,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAU,CAAC,KAAK;AAAA,MAChB,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ,KAAK;AAAA,IAChB;AAED,QAAI,KAAK,eAAa,gBAAK,cAAL,mBAAgB,WAAhB,mBAAwB,YAAW,KAAK,gBAAgB;AAC1E,WAAK,UAAU,OAAQ;AACvB,WAAK,YAAY;AAAA,IAC7B;AAEQ,QAAI,KAAK,qBAAmB,gBAAK,oBAAL,mBAAsB,WAAtB,mBAA8B,YAAW,KAAK,eAAe;AACrF,WAAK,gBAAgB,OAAQ;AAC7B,WAAK,kBAAkB;AAAA,IACnC;AAEQ,QAAI,CAAC,KAAK,SAAS;AACf,UAAI,KAAK,aAAa,KAAK,iBAAiB;AACxC,aAAK,UAAU,QAAS;AACxB,aAAK,gBAAgB,QAAS;AAAA,MAC9C,OAAmB;AACH,aAAK,YAAY,KAAK,eAAe;AAAA,UACjC;AAAA,YACI;AAAA,cACI,OAAO;AAAA,YACV;AAAA,YACD;AAAA,cACI,OAAO,KAAK;AAAA,YACf;AAAA,UACJ;AAAA,UACD;AAAA,QACH;AAED,aAAK,kBAAkB,KAAK,cAAc;AAAA,UACtC;AAAA,YACI;AAAA,cACI,GAAI,KAAK,aAAa,EAAE,SAAS,EAAC,IAAK,CAAA;AAAA,cACvC,OAAO;AAAA,YACV;AAAA,YACD;AAAA,cACI,GAAI,KAAK,aAAa,EAAE,SAAS,EAAC,IAAK,CAAA;AAAA,cACvC,OAAO,KAAK;AAAA,YACf;AAAA,UACJ;AAAA,UACD;AAAA,QACH;AAAA,MACjB;AAAA,IACA,OAAe;AACH,UAAI,KAAK,aAAa,KAAK,iBAAiB;AACxC,aAAK,UAAU,QAAS;AACxB,aAAK,gBAAgB,QAAS;AAAA,MAC9C,OAAmB;AACH,aAAK,YAAY,KAAK,eAAe;AAAA,UACjC;AAAA,YACI;AAAA,cACI,OAAO,KAAK;AAAA,YACf;AAAA,YACD;AAAA,cACI,OAAO;AAAA,YACV;AAAA,UACJ;AAAA,UACD;AAAA,QACH;AAED,aAAK,kBAAkB,KAAK,cAAc;AAAA,UACtC;AAAA,YACI;AAAA,cACI,GAAI,KAAK,aAAa,EAAE,SAAS,EAAC,IAAK,CAAA;AAAA,cACvC,OAAO,KAAK;AAAA,YACf;AAAA,YACD;AAAA,cACI,GAAI,KAAK,aAAa,EAAE,SAAS,EAAC,IAAK,CAAA;AAAA,cACvC,OAAO;AAAA,YACV;AAAA,UACJ;AAAA,UACD;AAAA,QACH;AAAA,MACjB;AAAA,IACA;AAEQ,WAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACpC,WAAK,UAAU,WAAW,MAAM;AAC5B,aAAK,UAAU,CAAC,KAAK;AACrB,gBAAS;AAAA,MACZ;AAAA,IACb,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,MAAM,KAAK,OAAO;AACd,UAAM,QAAQ,QAAQ,KAAK,WAAW,KAAK,CAAC,EAAE,KAAK,YAAY;AAC3D,UAAI,CAAC,KAAK,SAAS;AACf,aAAK;AAAA,UACD,IAAI,YAAY,oCAAoC;AAAA,YAChD,SAAS;AAAA,YACT,UAAU;AAAA,UACb,CAAA;AAAA,QACJ;AAED,aAAK,gBAAgB,KAAK,OAAO;AAEjC,cAAM,KAAK,oBAAqB;AAEhC,cAAM,QAAQ,QAAQ,KAAK,UAAU,KAAK,CAAC,EAAE,KAAK,MAAM;AACpD,eAAK;AAAA,YACD,IAAI,YAAY,8BAA8B;AAAA,cAC1C,SAAS;AAAA,cACT,UAAU;AAAA,YACb,CAAA;AAAA,UACJ;AAAA,QACrB,CAAiB;AAAA,MACjB;AAAA,IACA,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,MAAM,MAAM,OAAO;AACf,UAAM,QAAQ,QAAQ,KAAK,YAAY,KAAK,CAAC,EAAE,KAAK,YAAY;AAC5D,UAAI,KAAK,SAAS;AACd,aAAK;AAAA,UACD,IAAI,YAAY,qCAAqC;AAAA,YACjD,SAAS;AAAA,YACT,UAAU;AAAA,UACb,CAAA;AAAA,QACJ;AAED,cAAM,KAAK,oBAAqB;AAEhC,cAAM,QAAQ,QAAQ,KAAK,WAAW,KAAK,CAAC,EAAE,KAAK,MAAM;AACrD,cAAI,KAAK,uBAAuB;AAC5B,iBAAK,WAAW,QAAQ,CAAC,UAAU;AAC/B,oBAAM,OAAQ;AAAA,YAC1C,CAAyB;AAAA,UACzB;AAEoB,eAAK;AAAA,YACD,IAAI,YAAY,+BAA+B;AAAA,cAC3C,SAAS;AAAA,cACT,UAAU;AAAA,YACb,CAAA;AAAA,UACJ;AAAA,QACrB,CAAiB;AAAA,MACjB;AAAA,IACA,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,MAAM,OAAO,OAAO;AAChB,QAAI,KAAK,SAAS;AACd,YAAM,KAAK,MAAM,KAAK;AAAA,IAClC,OAAe;AACH,YAAM,KAAK,KAAK,KAAK;AAAA,IACjC;AAAA,EACA;AAAA,EAEI,mBAAmB;;AACf,eAAK,oBAAL,mBAAsB;AACtB,SAAK,kBAAkB;AAAA,EAC/B;AACA;ACvkBA,iBAAiB,OAAO,yBAAyB,gBAAgB;"}

package/dist/wje-tooltip.js

@@ -14,6 +14,9 @@ class Tooltip extends WJElement {
      * @type {string}
      */
     __publicField(this, "className", "Tooltip");
+    __publicField(this, "popupHideCallback", () => {
+      this.onHide();
+    });
     /**
      * Handles the logic for showing the component's popup or tooltip.
      * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.
@@ -21,6 +24,7 @@ class Tooltip extends WJElement {
      */
     __publicField(this, "onShow", () => {
       var _a;
+      event.addListener(this, "wje-popup:hide", null, this.popupHideCallback);
       this.classList.add("active");
       if ((_a = this.querySelector("wje-dropdown")) == null ? void 0 : _a.classList.contains("active")) {
         return;
@@ -42,6 +46,7 @@ class Tooltip extends WJElement {
      * Removes the `active` class from the component and hides the popup element.
      */
     __publicField(this, "onHide", () => {
+      event.removeListener(this, "wje-popup:hide", null, this.popupHideCallback);
       this.classList.remove("active");
       this.popup.hide();
     });
@@ -132,6 +137,12 @@ class Tooltip extends WJElement {
     event.addListener(this, "wje-dropdown:open", null, this.onHide);
     event.addListener(this, "wje-dropdown:close", null, this.onShow);
   }
+  afterDisconnect() {
+    event.removeListener(this, "wje-dropdown:open", null, this.onHide);
+    event.removeListener(this, "wje-dropdown:close", null, this.onShow);
+    event.removeListener(this, "mouseenter", null, this.onShow);
+    event.removeListener(this, "mouseleave", null, this.onHide);
+  }
   dispatch(customEvent) {
     return new Promise((resolve) => {
       event.dispatchCustomEvent(this, customEvent, {

package/dist/wje-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tooltip.js","sources":["../packages/wje-tooltip/tooltip.element.js","../packages/wje-tooltip/tooltip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tooltip` is a custom web component that represents a tooltip.\n * @summary This element represents a tooltip.\n * @documentation https://elements.webjet.sk/components/tooltip\n * @status stable\n * @augments {WJElement}\n * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.\n * @slot arrow - The arrow slot for the tooltip.\n * @slot anchor - The anchor slot for the tooltip.\n * @csspart native - The native tooltip wrapper.\n * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.\n * @tag wje-tooltip\n */\nexport default class Tooltip extends WJElement {\n    /**\n     * Creates an instance of Tooltip.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Set active attribute for the tooltip element.\n     * @param value\n     */\n    set content(value) {\n        this.setAttribute('content', value);\n    }\n\n    /**\n     * Get active attribute for the tooltip element.\n     * @returns {string}\n     */\n    get content() {\n        if (this.hasAttribute('content')) return this.getAttribute('content');\n\n        return '';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tooltip';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An array of observed attributes\n     */\n    static get observedAttributes() {\n        return ['active'];\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 tooltip.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'top');\n        popup.setAttribute('offset', this.offset || '0');\n\n        // SLOT - Anchor\n        let slot = document.createElement('slot');\n        slot.setAttribute('slot', 'anchor');\n\n        // let slot = this.querySelector(\"wje-button\");\n\n        let arrow = document.createElement('div');\n        arrow.classList.add('arrow');\n        arrow.setAttribute('slot', 'arrow');\n\n        // SLOT - Start\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        // SLOT - End\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let content = document.createElement('div');\n        content.innerHTML = this.content;\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tooltip');\n\n        native.appendChild(start);\n        native.appendChild(content);\n        native.appendChild(end);\n\n        popup.appendChild(slot);\n        popup.appendChild(arrow);\n        popup.appendChild(native);\n\n        this.mySlot = slot;\n        this.popup = popup;\n        this.native = native;\n\n        fragment.appendChild(popup);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component for the tooltip.\n     */\n    afterDraw() {\n        let anchorEl = this.mySlot.assignedElements()[0];\n        if (this.selector) {\n            anchorEl = this.checkSelector(anchorEl);\n        }\n\n        if (!anchorEl) return;\n\n        event.addListener(anchorEl, 'mouseenter', null, this.onShow);\n        event.addListener(anchorEl, 'mouseleave', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:close', null, this.onShow);\n    }\n\n    dispatch(customEvent) {\n        return new Promise((resolve) => {\n            event.dispatchCustomEvent(this, customEvent, {\n                resolve: resolve,\n            });\n        });\n    }\n\n    beforeShow() {\n        return this.native.innerHTML;\n    }\n\n    afterShow() {\n        return true;\n    }\n\n    /**\n     * Handles the logic for showing the component's popup or tooltip.\n     * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.\n     * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.\n     */\n    onShow = () => {\n        this.classList.add('active');\n\n        if (this.querySelector('wje-dropdown')?.classList.contains('active')) {\n            return;\n        }\n\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active') || !res || typeof res !== 'string') {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.native.innerHTML = res;\n\n                this.popup.show(); // Show tooltip\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch(() => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide();\n            });\n    };\n\n    /**\n     * Hides the component's popup or tooltip.\n     * Removes the `active` class from the component and hides the popup element.\n     */\n    onHide = () => {\n        this.classList.remove('active');\n        this.popup.hide();\n    };\n\n    /**\n     * Validates if the specified selector exists within the provided element.\n     * Logs an error if the selector is not found and returns the found element or `null`.\n     * @param {HTMLElement} anchorEl The root element to search within.\n     * @returns {HTMLElement|null} The first element matching the selector, or `null` if not found.\n     */\n    checkSelector(anchorEl) {\n        const newAnchorEl = anchorEl.querySelector(this.selector);\n        if (newAnchorEl === null) {\n            console.error('Selector not found:', this.selector);\n        }\n\n        return newAnchorEl;\n    }\n}\n","import Tooltip from './tooltip.element.js';\n\nexport default Tooltip;\n\nTooltip.define('wje-tooltip', Tooltip);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tooltip.js","sources":["../packages/wje-tooltip/tooltip.element.js","../packages/wje-tooltip/tooltip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tooltip` is a custom web component that represents a tooltip.\n * @summary This element represents a tooltip.\n * @documentation https://elements.webjet.sk/components/tooltip\n * @status stable\n * @augments {WJElement}\n * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.\n * @slot arrow - The arrow slot for the tooltip.\n * @slot anchor - The anchor slot for the tooltip.\n * @csspart native - The native tooltip wrapper.\n * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.\n * @tag wje-tooltip\n */\nexport default class Tooltip extends WJElement {\n    /**\n     * Creates an instance of Tooltip.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Set active attribute for the tooltip element.\n     * @param value\n     */\n    set content(value) {\n        this.setAttribute('content', value);\n    }\n\n    /**\n     * Get active attribute for the tooltip element.\n     * @returns {string}\n     */\n    get content() {\n        if (this.hasAttribute('content')) return this.getAttribute('content');\n\n        return '';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tooltip';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An array of observed attributes\n     */\n    static get observedAttributes() {\n        return ['active'];\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 tooltip.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'top');\n        popup.setAttribute('offset', this.offset || '0');\n\n        // SLOT - Anchor\n        let slot = document.createElement('slot');\n        slot.setAttribute('slot', 'anchor');\n\n        // let slot = this.querySelector(\"wje-button\");\n\n        let arrow = document.createElement('div');\n        arrow.classList.add('arrow');\n        arrow.setAttribute('slot', 'arrow');\n\n        // SLOT - Start\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        // SLOT - End\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let content = document.createElement('div');\n        content.innerHTML = this.content;\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tooltip');\n\n        native.appendChild(start);\n        native.appendChild(content);\n        native.appendChild(end);\n\n        popup.appendChild(slot);\n        popup.appendChild(arrow);\n        popup.appendChild(native);\n\n        this.mySlot = slot;\n        this.popup = popup;\n        this.native = native;\n\n        fragment.appendChild(popup);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component for the tooltip.\n     */\n    afterDraw() {\n        let anchorEl = this.mySlot.assignedElements()[0];\n        if (this.selector) {\n            anchorEl = this.checkSelector(anchorEl);\n        }\n\n        if (!anchorEl) return;\n\n        event.addListener(anchorEl, 'mouseenter', null, this.onShow);\n        event.addListener(anchorEl, 'mouseleave', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:close', null, this.onShow);\n    }\n\n    afterDisconnect() {\n        event.removeListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.removeListener(this, 'wje-dropdown:close', null, this.onShow);\n        event.removeListener(this, 'mouseenter', null, this.onShow);\n        event.removeListener(this, 'mouseleave', null, this.onHide);\n    }\n\n    dispatch(customEvent) {\n        return new Promise((resolve) => {\n            event.dispatchCustomEvent(this, customEvent, {\n                resolve: resolve,\n            });\n        });\n    }\n\n    beforeShow() {\n        return this.native.innerHTML;\n    }\n\n    afterShow() {\n        return true;\n    }\n\n    popupHideCallback = () => {\n        this.onHide();\n    };\n\n    /**\n     * Handles the logic for showing the component's popup or tooltip.\n     * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.\n     * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.\n     */\n    onShow = () => {\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.add('active');\n\n        if (this.querySelector('wje-dropdown')?.classList.contains('active')) {\n            return;\n        }\n\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active') || !res || typeof res !== 'string') {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.native.innerHTML = res;\n\n                this.popup.show(); // Show tooltip\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch(() => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide();\n            });\n    };\n\n    /**\n     * Hides the component's popup or tooltip.\n     * Removes the `active` class from the component and hides the popup element.\n     */\n    onHide = () => {\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.remove('active');\n        this.popup.hide();\n    };\n\n    /**\n     * Validates if the specified selector exists within the provided element.\n     * Logs an error if the selector is not found and returns the found element or `null`.\n     * @param {HTMLElement} anchorEl The root element to search within.\n     * @returns {HTMLElement|null} The first element matching the selector, or `null` if not found.\n     */\n    checkSelector(anchorEl) {\n        const newAnchorEl = anchorEl.querySelector(this.selector);\n        if (newAnchorEl === null) {\n            console.error('Selector not found:', this.selector);\n        }\n\n        return newAnchorEl;\n    }\n}\n","import Tooltip from './tooltip.element.js';\n\nexport default Tooltip;\n\nTooltip.define('wje-tooltip', Tooltip);\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.154",
+  "version": "0.1.156",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -35,26 +35,22 @@
     "preview": "vite preview --mode production",
     "watch": "vite build --watch --mode development",
     "analyze": "cem analyze",
-    "create-element": "node wje-cli-script/create-element.cjs paginationys",
+    "create-element": "node wje-cli-script/create-element.cjs",
     "copy-dist": "node wje-cli-script/copy-dist.cjs",
     "build:copy-dist": "npm run build && npm run copy-dist -- /Users/rastislavhrompa/Desktop/Interway-MFE/root/node_modules/wj-elements",
     "test": "web-test-runner --group default",
     "test:watch": "web-test-runner --watch --group default",
-    "lint": "eslint packages --max-warnings 0",
-    "lint:fix": "eslint packages --max-warnings 0 --fix",
-    "prettier": "prettier --write ./packages",
+    "lint": "eslint packages experimental-packages --max-warnings 0",
+    "lint:fix": "eslint packages experimental-packages --max-warnings 0 --fix",
+    "prettier": "prettier --write ./packages ./experimental-packages",
     "test:animation": "web-test-runner --files packages/wje-animation/animation.test.js",
-    "test:avatar": "web-test-runner --files packages/wje-avatar/avatar.test.js",
     "test:badge": "web-test-runner --files packages/wje-badge/badge.test.js",
     "test:breadcrumbs": "web-test-runner --files packages/wje-breadcrumbs/breadcrumbs.test.js",
     "test:button": "web-test-runner --files packages/wje-button/button.test.js",
     "test:color-picker": "web-test-runner --files packages/wje-color-picker/color-picker.test.js",
     "test:format-digital": "web-test-runner --files packages/wje-format-digital/format-digital.test.js",
     "test:relative-time": "web-test-runner --files packages/wje-relative-time/relative-time.test.js",
-    "test:toast": "web-test-runner --files packages/wje-toast/toast.test.js",
-    "test:pagination": "web-test-runner --files packages/wje-pagination/pagination.test.js",
-    "test:tree": "web-test-runner --files packages/wje-tree/tree.test.js",
-    "test:tree-item": "web-test-runner --files packages/wje-tree-item/tree-item.test.js"
+    "test:toast": "web-test-runner --files packages/wje-toast/toast.test.js"
   },
   "exports": {
     ".": {
@@ -76,7 +72,6 @@
     "@crowdin/cli": "^3.19.2",
     "@faker-js/faker": "^8.0.0",
     "@floating-ui/dom": "^1.5.1",
-    "ajv": "^8.17.1",
     "animate.css": "^4.1.1",
     "qrious": "^4.0.2",
     "slick-router": "^3.0.1",
@@ -111,4 +106,4 @@
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-javascript-obfuscator": "^3.1.0"
   }
-}
+}

package/dist/packages/wje-color-picker/color-picker.test.d.ts

@@ -1 +0,0 @@
-export {};