npm - wj-elements - Versions diffs - 0.1.141 → 0.1.142 - Mend

wj-elements 0.1.141 → 0.1.142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/dist/wje-pagination.js.map ADDED Viewed

@@ -0,0 +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 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 + 1) {\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\n // Otherwise, only show 3 pages (current, previous, next)\n startPage = currentPage - halfPages;\n endPage = maxPages % 2 === 1 ? currentPage + halfPages : currentPage + halfPages - 1;\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 totalItems: totalItems,\n currentPage: currentPage,\n pageSize: pageSize,\n totalPages: totalPages,\n startPage: startPage,\n endPage: endPage,\n startIndex: startIndex,\n endIndex: endIndex,\n pages: pages,\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 // console.log('totalItems nastavené na:', 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 // console.log(\"SOM V TOTAL ITEMS:\", this, this.getAttribute('total-items'));\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 // console.log('paginateObj nastavené na:', 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'];\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 + 1, 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 // console.log(\"SOM PAGINATE OBJ:\",this.paginateObj);\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.paginateObj.endIndex + 1 >= this.totalItems)\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) {\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 newButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, page - 1));\n\n if (page - 1 === this.page) newButton.removeAttribute('fill');\n\n fragment.appendChild(newButton);\n });\n\n if (paginateObj.pages.length === this.maxPages || paginateObj.currentPage <= this.maxPages + 1) {\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) return;\n\n this.page = page;\n event.dispatchCustomEvent(this, 'wje-pagination:page-change', this.paginateObj);\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-slider.js CHANGED Viewed

@@ -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, { event } from "./wje-element.js";
-const styles = ":host {\n    --wje-slider-track-height: 0.25rem;\n    --wje-slider-color: var(--wje-color-primary-9); /* Predvolená farba */\n    --wje-slider-thumb-color: var(--wje-color-primary-9); /* Farba tiahla */\n    --wje-slider-thumb-border: none; /* Predvolene žiadny border */\n    --wje-slider-thumb-shadow: none; /* Tieň vo výchozom stave */\n    --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n    --wje-slider-track-color: var(--wje-color-contrast-4); /* Farba tracku */\n\n    position: relative;\n    display: flex;\n    align-items: center;\n    max-width: 100%;\n}\n\n.native-slider {\n    display: flex;\n    position: relative;\n    flex-grow: 1;\n    align-items: center;\n    height: inherit;\n}\n\n.slider {\n    display: flex;\n    align-items: center;\n    position: relative;\n    flex: 1 1 0%;\n    width: 100%;\n    height: var(--height);\n    contain: size layout style;\n    cursor: grab;\n    touch-action: pan-y;\n}\n\ninput[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--wje-slider-track-height);\n    margin: 0;\n    border-radius: 5px;\n    background-size: 70% 100%;\n    background-repeat: no-repeat;\n    background-color: var(--wje-slider-track-color);\n    background-image: linear-gradient(var(--wje-slider-color), var(--wje-slider-color));\n}\n\ninput[type='range']::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: ew-resize;\n    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;\n}\n\ninput[type='range']::-moz-range-thumb {\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: pointer;\n    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;\n}\n\ninput[type='range']::-ms-thumb {\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: ew-resize;\n    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;\n}\n\ninput[type='range']::-webkit-slider-thumb:active,\ninput[type='range']::-moz-range-thumb:active,\ninput[type='range']::-ms-thumb:active {\n    box-shadow: var(--wje-slider-thumb-shadow-active); /* Tieň pri aktívnom stave */\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range']::-moz-range-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range']::-ms-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range'][color='primary'] {\n    --wje-slider-color: var(--wje-color-primary-9);\n    --wje-slider-thumb-color: var(--wje-color-primary-9);\n}\n\ninput[type='range'][color='success'] {\n    --wje-slider-color: var(--wje-color-success-9);\n    --wje-slider-thumb-color: var(--wje-color-success-9);\n}\n\ninput[type='range'][color='complete'] {\n    --wje-slider-color: var(--wje-color-complete-9);\n    --wje-slider-thumb-color: var(--wje-color-complete-9);\n}\n\ninput[type='range'][color='danger'] {\n    --wje-slider-color: var(--wje-color-danger-9);\n    --wje-slider-thumb-color: var(--wje-color-danger-9);\n}\n\ninput[type='range'][color='warning'] {\n    --wje-slider-color: var(--wje-color-warning-9);\n    --wje-slider-thumb-color: var(--wje-color-warning-9);\n}\n\ninput[type='range'][color='dark'] {\n    --wje-slider-color: var(--wje-color-contrast-11);\n    --wje-slider-thumb-color: var(--wje-color-contrast-11);\n}\n\ndatalist {\n    display: flex;\n    justify-content: space-between;\n    height: auto;\n    overflow: hidden;\n    margin-top: 16px;\n\n    option::before {\n        content: '';\n        display: block;\n        width: 0;\n        height: auto;\n        padding-left: 3px;\n        text-indent: 0;\n    }\n}\n\noutput {\n    position: absolute;\n    background: var(--wje-color-contrast-11);\n    color: var(--wje-color-contrast-0);\n    top: -46px;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n::slotted([slot='label']) {\n    margin-inline: 0 0.5rem;\n    font-size: var(--wje-font-size);\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0rem 0.75rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.75rem 0rem;\n}";
+const styles = ":host {\n    --wje-slider-track-height: 0.25rem;\n    --wje-slider-color: var(--wje-color-primary-9); /* Predvolená farba */\n    --wje-slider-thumb-color: var(--wje-color-primary-9); /* Farba tiahla */\n    --wje-slider-thumb-border: none; /* Predvolene žiadny border */\n    --wje-slider-thumb-shadow: none; /* Tieň vo výchozom stave */\n    --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n    --wje-slider-track-color: var(--wje-color-contrast-4); /* Farba tracku */\n\n    position: relative;\n    display: flex;\n    align-items: center;\n    max-width: 100%;\n}\n\n.native-slider {\n    display: flex;\n    position: relative;\n    flex-grow: 1;\n    align-items: center;\n    height: inherit;\n}\n\n.slider {\n    display: flex;\n    align-items: center;\n    position: relative;\n    flex: 1 1 0%;\n    width: 100%;\n    height: var(--height);\n    contain: size layout style;\n    cursor: grab;\n    touch-action: pan-y;\n}\n\ninput[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--wje-slider-track-height);\n    margin: 0;\n    border-radius: 5px;\n    background-size: 70% 100%;\n    background-repeat: no-repeat;\n    background-color: var(--wje-slider-track-color);\n    background-image: linear-gradient(var(--wje-slider-color), var(--wje-slider-color));\n}\n\ninput[type='range']::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: ew-resize;\n    transition:\n        background 0.3s ease-in-out,\n        border 0.3s ease-in-out;\n}\n\ninput[type='range']::-moz-range-thumb {\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: pointer;\n    transition:\n        background 0.3s ease-in-out,\n        border 0.3s ease-in-out;\n}\n\ninput[type='range']::-ms-thumb {\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: ew-resize;\n    transition:\n        background 0.3s ease-in-out,\n        border 0.3s ease-in-out;\n}\n\ninput[type='range']::-webkit-slider-thumb:active,\ninput[type='range']::-moz-range-thumb:active,\ninput[type='range']::-ms-thumb:active {\n    box-shadow: var(--wje-slider-thumb-shadow-active); /* Tieň pri aktívnom stave */\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range']::-moz-range-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range']::-ms-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range'][color='primary'] {\n    --wje-slider-color: var(--wje-color-primary-9);\n    --wje-slider-thumb-color: var(--wje-color-primary-9);\n}\n\ninput[type='range'][color='success'] {\n    --wje-slider-color: var(--wje-color-success-9);\n    --wje-slider-thumb-color: var(--wje-color-success-9);\n}\n\ninput[type='range'][color='complete'] {\n    --wje-slider-color: var(--wje-color-complete-9);\n    --wje-slider-thumb-color: var(--wje-color-complete-9);\n}\n\ninput[type='range'][color='danger'] {\n    --wje-slider-color: var(--wje-color-danger-9);\n    --wje-slider-thumb-color: var(--wje-color-danger-9);\n}\n\ninput[type='range'][color='warning'] {\n    --wje-slider-color: var(--wje-color-warning-9);\n    --wje-slider-thumb-color: var(--wje-color-warning-9);\n}\n\ninput[type='range'][color='dark'] {\n    --wje-slider-color: var(--wje-color-contrast-11);\n    --wje-slider-thumb-color: var(--wje-color-contrast-11);\n}\n\ndatalist {\n    display: flex;\n    justify-content: space-between;\n    height: auto;\n    overflow: hidden;\n    margin-top: 16px;\n\n    option::before {\n        content: '';\n        display: block;\n        width: 0;\n        height: auto;\n        padding-left: 3px;\n        text-indent: 0;\n    }\n}\n\noutput {\n    position: absolute;\n    background: var(--wje-color-contrast-11);\n    color: var(--wje-color-contrast-0);\n    top: -46px;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n::slotted([slot='label']) {\n    margin-inline: 0 0.5rem;\n    font-size: var(--wje-font-size);\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0rem 0.75rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.75rem 0rem;\n}\n";
 class Slider extends WJElement {
   /**
    * Creates an instance of Slider.

package/dist/wje-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-slider.js","sources":["../packages/wje-slider/slider.element.js","../packages/wje-slider/slider.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n Represents a slider component that extends the WJElement class.\n * This slider supports features such as min, max, step values, bubble display, and event handling.\n * It offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n /\n\nexport default class Slider extends WJElement {\n /\n Creates an instance of Slider.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Sets the value of the slider.\n * @param {number} value The value to set.\n /\n set value(value) {\n this.setAttribute('value', value);\n\n if (this.input) {\n this.input.value = value;\n this.setHandlePosition();\n }\n }\n\n /\n Returns the value of the slider.\n * @returns {number} The value of the slider input.\n /\n get value() {\n return this.getAttribute('value') \|\| 0;\n }\n\n /\n Sets the minimum value of the slider.\n * @param {number} value The minimum value to set.\n /\n set min(value) {\n this.setAttribute('min', value);\n }\n\n /\n Returns the minimum value of the slider.\n * @returns {number} The minimum value of the slider.\n /\n get min() {\n return this.getAttribute('min') \|\| 0;\n }\n\n /\n Sets the maximum value of the slider.\n * @param {number} value The maximum value to set.\n /\n set max(value) {\n this.setAttribute('max', value);\n }\n\n /\n Returns the maximum value of the slider.\n * @returns {number} The maximum value of the slider.\n /\n get max() {\n return this.getAttribute('max') \|\| 100;\n }\n\n /\n Sets the step value of the slider.\n * @param {number} value The step value to set.\n /\n set step(value) {\n this.setAttribute('step', value);\n }\n\n /\n Returns the step value of the slider.\n * @returns {number} The step value of the slider.\n /\n get step() {\n return this.getAttribute('step') \|\| 1;\n }\n\n className = 'Slider';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return ['max'];\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 slider.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('div');\n element.className = 'native-slider';\n element.setAttribute('part', 'native');\n\n let slider = document.createElement('div');\n slider.className = 'slider';\n\n let label = document.createElement('slot');\n label.name = 'label';\n\n let start = document.createElement('slot');\n start.name = 'start';\n\n let end = document.createElement('slot');\n end.name = 'end';\n\n let output = document.createElement('output');\n output.setAttribute('for', 'slider');\n output.id = 'output';\n output.setAttribute('hidden', '');\n\n let input = document.createElement('input');\n input.type = 'range';\n input.min = this.min;\n input.max = this.max;\n input.step = this.step;\n input.value = this.value;\n input.id = 'slider';\n input.name = 'slider';\n input.part = 'slider';\n input.setAttribute('autocomplete', 'off');\n input.setAttribute('color', this.color \|\| '');\n\n input.addEventListener('input', null, (e) => {\n this.setHandlePosition(e.target);\n });\n\n slider.appendChild(input);\n if (this.hasAttribute('bubble')) {\n slider.appendChild(output);\n }\n element.appendChild(label);\n element.appendChild(start);\n element.appendChild(slider);\n element.appendChild(end);\n\n fragment.appendChild(element);\n\n this.input = input;\n this.output = output;\n\n return fragment;\n }\n\n\n /\n Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n * - Sets the position of the handle.\n * - Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n * - Dispatches initialization, movement, and change custom events for the slider input element.\n * - Updates the bubble position and value dynamically on input changes.\n * @returns {void} This method does not return a value.\n /\n afterDraw() {\n this.setHandlePosition();\n\n if (this.hasAttribute('bubble')) {\n this.output.innerHTML = this.input.value;\n this.output.removeAttribute('hidden');\n\n setTimeout(this.setBubble, 50);\n }\n\n event.dispatchCustomEvent(this.input, 'wje-slider:init', {\n value: this.input.value,\n output: this.output,\n });\n\n event.addListener(this.input, 'input', null, (e) => {\n this.value = e.target.value;\n\n event.dispatchCustomEvent(this.input, 'wje-slider:move', {\n value: e.target.value,\n output: this.output,\n });\n\n if (this.hasAttribute('bubble')) {\n this.setBubble();\n }\n });\n\n event.addListener(this.input, 'change', null, (e) => {\n event.dispatchCustomEvent(this.input, 'wje-slider:change', {\n value: e.target.value,\n output: this.output,\n });\n });\n }\n\n /\n Sets the handle position of the slider.\n /\n setHandlePosition = () => {\n this.input.style.backgroundSize =\n this.getPercentage(this.input.min, this.input.max, this.input.value) + '% 100%';\n };\n\n\n /\n Updates the position and content of a bubble element based on the input value.\n \n This function calculates the position of the bubble using the percentage representation\n * of the input's current value relative to its minimum and maximum bounds. It then adjusts\n * the bubble's left position dynamically for aesthetic purposes and updates its displayed\n * content to reflect the current input value.\n \n The function relies on the following elements:\n * - `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n * - `this.output`: Represents the bubble element to be positioned and updated.\n \n The left positioning of the bubble ensures precise alignment with the input value indicator.\n /\n setBubble = () => {\n let newValue = this.getPercentage(this.input.min, this.input.max, this.input.value);\n this.output.style.left = `calc(${newValue}% + (${8 - newValue 0.15}px) - ${this.output.offsetWidth / 2}px)`;\n this.output.innerHTML = this.input.value;\n };\n\n /*\n Calculates the percentage of a value within a given range.\n * @param {number} min The minimum value of the range.\n * @param {number} max The maximum value of the range.\n * @param {number} [value] The current value within the range. Defaults to 0 if not provided.\n * @returns {number} The calculated percentage as a number between 0 and 100. Returns 0 if the range is invalid.\n /\n getPercentage(min, max, value = 0) {\n return Number(((value - min) 100) / (max - min)) \|\| 0;\n }\n}\n","import Slider from './slider.element.js';\n\nexport default Slider;\n\nSlider.define('wje-slider', Slider);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-slider.js","sources":["../packages/wje-slider/slider.element.js","../packages/wje-slider/slider.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n Represents a slider component that extends the WJElement class.\n * This slider supports features such as min, max, step values, bubble display, and event handling.\n * It offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n /\n\nexport default class Slider extends WJElement {\n /\n Creates an instance of Slider.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Sets the value of the slider.\n * @param {number} value The value to set.\n /\n set value(value) {\n this.setAttribute('value', value);\n\n if (this.input) {\n this.input.value = value;\n this.setHandlePosition();\n }\n }\n\n /\n Returns the value of the slider.\n * @returns {number} The value of the slider input.\n /\n get value() {\n return this.getAttribute('value') \|\| 0;\n }\n\n /\n Sets the minimum value of the slider.\n * @param {number} value The minimum value to set.\n /\n set min(value) {\n this.setAttribute('min', value);\n }\n\n /\n Returns the minimum value of the slider.\n * @returns {number} The minimum value of the slider.\n /\n get min() {\n return this.getAttribute('min') \|\| 0;\n }\n\n /\n Sets the maximum value of the slider.\n * @param {number} value The maximum value to set.\n /\n set max(value) {\n this.setAttribute('max', value);\n }\n\n /\n Returns the maximum value of the slider.\n * @returns {number} The maximum value of the slider.\n /\n get max() {\n return this.getAttribute('max') \|\| 100;\n }\n\n /\n Sets the step value of the slider.\n * @param {number} value The step value to set.\n /\n set step(value) {\n this.setAttribute('step', value);\n }\n\n /\n Returns the step value of the slider.\n * @returns {number} The step value of the slider.\n /\n get step() {\n return this.getAttribute('step') \|\| 1;\n }\n\n className = 'Slider';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return ['max'];\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 slider.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('div');\n element.className = 'native-slider';\n element.setAttribute('part', 'native');\n\n let slider = document.createElement('div');\n slider.className = 'slider';\n\n let label = document.createElement('slot');\n label.name = 'label';\n\n let start = document.createElement('slot');\n start.name = 'start';\n\n let end = document.createElement('slot');\n end.name = 'end';\n\n let output = document.createElement('output');\n output.setAttribute('for', 'slider');\n output.id = 'output';\n output.setAttribute('hidden', '');\n\n let input = document.createElement('input');\n input.type = 'range';\n input.min = this.min;\n input.max = this.max;\n input.step = this.step;\n input.value = this.value;\n input.id = 'slider';\n input.name = 'slider';\n input.part = 'slider';\n input.setAttribute('autocomplete', 'off');\n input.setAttribute('color', this.color \|\| '');\n\n input.addEventListener('input', null, (e) => {\n this.setHandlePosition(e.target);\n });\n\n slider.appendChild(input);\n if (this.hasAttribute('bubble')) {\n slider.appendChild(output);\n }\n element.appendChild(label);\n element.appendChild(start);\n element.appendChild(slider);\n element.appendChild(end);\n\n fragment.appendChild(element);\n\n this.input = input;\n this.output = output;\n\n return fragment;\n }\n\n /\n Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n * - Sets the position of the handle.\n * - Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n * - Dispatches initialization, movement, and change custom events for the slider input element.\n * - Updates the bubble position and value dynamically on input changes.\n * @returns {void} This method does not return a value.\n /\n afterDraw() {\n this.setHandlePosition();\n\n if (this.hasAttribute('bubble')) {\n this.output.innerHTML = this.input.value;\n this.output.removeAttribute('hidden');\n\n setTimeout(this.setBubble, 50);\n }\n\n event.dispatchCustomEvent(this.input, 'wje-slider:init', {\n value: this.input.value,\n output: this.output,\n });\n\n event.addListener(this.input, 'input', null, (e) => {\n this.value = e.target.value;\n\n event.dispatchCustomEvent(this.input, 'wje-slider:move', {\n value: e.target.value,\n output: this.output,\n });\n\n if (this.hasAttribute('bubble')) {\n this.setBubble();\n }\n });\n\n event.addListener(this.input, 'change', null, (e) => {\n event.dispatchCustomEvent(this.input, 'wje-slider:change', {\n value: e.target.value,\n output: this.output,\n });\n });\n }\n\n /\n Sets the handle position of the slider.\n /\n setHandlePosition = () => {\n this.input.style.backgroundSize =\n this.getPercentage(this.input.min, this.input.max, this.input.value) + '% 100%';\n };\n\n /\n Updates the position and content of a bubble element based on the input value.\n \n This function calculates the position of the bubble using the percentage representation\n * of the input's current value relative to its minimum and maximum bounds. It then adjusts\n * the bubble's left position dynamically for aesthetic purposes and updates its displayed\n * content to reflect the current input value.\n \n The function relies on the following elements:\n * - `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n * - `this.output`: Represents the bubble element to be positioned and updated.\n \n The left positioning of the bubble ensures precise alignment with the input value indicator.\n /\n setBubble = () => {\n let newValue = this.getPercentage(this.input.min, this.input.max, this.input.value);\n this.output.style.left = `calc(${newValue}% + (${8 - newValue 0.15}px) - ${this.output.offsetWidth / 2}px)`;\n this.output.innerHTML = this.input.value;\n };\n\n /*\n Calculates the percentage of a value within a given range.\n * @param {number} min The minimum value of the range.\n * @param {number} max The maximum value of the range.\n * @param {number} [value] The current value within the range. Defaults to 0 if not provided.\n * @returns {number} The calculated percentage as a number between 0 and 100. Returns 0 if the range is invalid.\n /\n getPercentage(min, max, value = 0) {\n return Number(((value - min) 100) / (max - min)) \|\| 0;\n }\n}\n","import Slider from './slider.element.js';\n\nexport default Slider;\n\nSlider.define('wje-slider', Slider);\n"],"names":[],"mappings":"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"}

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

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

package/dist/wje-store.js CHANGED Viewed

@@ -302,9 +302,7 @@ class Store {
   createObjectReducer(stateValueName) {
     return (action, state = {}) => {
       if (Array.isArray(action.payload) && (action.type === `${stateValueName}/ADD` || action.type === `${stateValueName}/UPDATE`)) {
-        console.error(
-          `Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`
-        );
+        console.error(`Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`);
       }
       const actionType = action.type.split("/")[1];
       if (!["ADD", "UPDATE", "DELETE"].includes(actionType)) {
@@ -344,9 +342,7 @@ class Store {
       var _a;
       if (action.actionType === "LOAD" && ((_a = action.type) == null ? void 0 : _a.includes(stateValueName))) {
         if (!Array.isArray(action.payload)) {
-          console.error(
-            `Snažíte sa použiť "LOAD" akciu na pole, ale payload nie je pole.`
-          );
+          console.error(`Snažíte sa použiť "LOAD" akciu na pole, ale payload nie je pole.`);
           return [...state];
         }
       }
@@ -376,7 +372,9 @@ class Store {
           if (Array.isArray(action.payload)) {
             return [
               ...state.filter(
-                (obj) => !action.payload.some((item) => obj.hasOwnProperty(key) && obj[key] !== item[key] || !obj.hasOwnProperty(key) && obj !== item)
+                (obj) => !action.payload.some(
+                  (item) => obj.hasOwnProperty(key) && obj[key] !== item[key] || !obj.hasOwnProperty(key) && obj !== item
+                )
               )
             ];
           }

package/dist/wje-store.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-store.js","sources":["../packages/wje-store/default-store-actions.js","../packages/wje-store/pubsub.js","../packages/wje-store/store.js"],"sourcesContent":["const addAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/ADD`,\n payload: payload2,\n actionType: 'ADD',\n };\n };\n};\n\nconst addManyAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/ADD_MANY`,\n payload: payload2,\n actionType: 'ADD_MANY',\n };\n };\n};\n\nconst updateAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/UPDATE`,\n payload: payload2,\n actionType: 'UPDATE',\n };\n };\n};\n\nconst deleteAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/DELETE`,\n payload: payload2,\n actionType: 'DELETE',\n };\n };\n};\n\nconst loadAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/LOAD`,\n payload: payload2,\n actionType: 'LOAD',\n };\n };\n};\n\nexport {\n addAction,\n deleteAction,\n loadAction,\n updateAction,\n addManyAction,\n};\n","export default class PubSub {\n constructor() {\n this.events = {};\n }\n\n /*\n Either create a new event instance for passed `event` name.\n * or push a new callback into the existing collection.\n * @param {string} event The event name to subscribe to\n * @param {Function} callback The callback function to subscribe to the event\n * @returns {number} A count of callbacks for this event\n * @memberof PubSub\n /\n subscribe(event, callback) {\n let self = this;\n let index;\n\n // If there's not already an event with this name set in our collection\n // go ahead and create a new one and set it with an empty array, so we don't\n // have to type check it later down-the-line\n if (!self.events.hasOwnProperty(event)) {\n self.events[event] = [];\n }\n\n index = self.events[event].push(callback) - 1;\n\n return {\n unsubscribe() {\n self.events[event].splice(self.events[event].indexOf(callback), 1);\n },\n };\n }\n\n /\n If the passed event has callbacks attached to it, loop through each one and call it.\n * @param {string} event The name of the event to publish\n * @param {object} [newData] The data to pass to the callbacks\n * @param {object} [oldData] The data to pass to the callbacks\n * @returns {Array} The callbacks for this event, or an empty array if no event exits\n * @memberof PubSub\n /\n publish(event, newData = {}, oldData = {}) {\n let self = this;\n\n // There's no event to publish to, so bail out\n if (!self.events.hasOwnProperty(event)) {\n return [];\n }\n\n // Get each subscription and call its callback with the passed data\n return self.events[event].map((callback) => callback(newData, oldData));\n }\n}\n","import as defaultStoreActions from './default-store-actions.js';\nimport PubSub from './pubsub.js';\n\n/*\n @summary A reactive state management system with support for reducers, events, and state immutability.\n * @description The `Store` class provides a centralized way to manage application state with actions, reducers, and event subscriptions. It supports handling both object and array state, with flexibility for custom reducers.\n * @example\n * const store = new Store({\n * reducer: (state, action) => { ... },\n * state: { user: { id: 1, name: 'John' } }\n * });\n * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));\n * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });\n /\nclass Store {\n _state;\n _reducer;\n events;\n status;\n\n /\n Initializes the store with optional reducer and state.\n * @param {object} [params] Configuration for the store.\n * @param {Function} [params.reducer] Initial reducer function for handling state updates.\n * @param {object} [params.state] Initial state of the store.\n /\n constructor(params = {}) {\n this._isPause = false;\n this._state = {};\n this._reducer = () => {\n return {};\n };\n\n // A status enum to set during actions and mutations\n this.status = 'resting';\n\n // Attach our PubSub module as an `events` element\n this.events = new PubSub();\n\n if (params?.hasOwnProperty('reducer')) {\n this._reducer = params.reducer;\n }\n\n this.refreshProxy(params?.state);\n }\n\n /\n Dispatches an action to update the state by invoking the reducer function.\n * @param {object} action The action object containing the type and any associated payload.\n * @param {string} action.type The type of the action being dispatched.\n * @returns {boolean} Returns `true` after the state has been successfully updated.\n * @example\n * const action = { type: 'INCREMENT', payload: { amount: 1 } };\n * store.dispatch(action);\n /\n dispatch(action) {\n // Create a console group which will contain the logs from our Proxy etc\n // console.groupCollapsed(`ACTION: ${action.type}`);\n\n // Let anything that's watching the status know that we're dispatching an action\n this.status = 'action';\n\n let newState = this._reducer(this._state, action);\n\n this.status = 'mutation';\n // Merge the old and new together to create a new state and set it\n this._state = Object.assign(this._state, newState);\n\n // Close our console group to keep things nice and neat\n // console.groupEnd();\n\n return true;\n }\n\n /\n Retrieves a deep copy of the current state to ensure immutability.\n * @returns {object} A deep copy of the current state.\n * @example\n * const currentState = store.getState();\n * console.log(currentState);\n /\n getState() {\n return JSON.parse(JSON.stringify(this._state));\n }\n\n /\n Subscribes to a specific event with a provided callback function.\n * @param {string} eventName The name of the event to subscribe to.\n * @param {Function} callbackFn The function to execute when the event is triggered.\n * @returns {Function} - A function to unsubscribe from the event.\n * @example\n * const unsubscribe = store.subscribe('stateChange', (newState) => {\n * console.log('State changed:', newState);\n * });\n * // Later, to unsubscribe\n * unsubscribe();\n /\n subscribe(eventName, callbackFn) {\n return this.events.subscribe(eventName, callbackFn);\n }\n\n /\n Unsubscribes from a specific event by removing all associated listeners.\n * @param {string} eventName The name of the event to unsubscribe from.\n * @returns {void}\n * @example\n * store.unsubscribe('stateChange');\n /\n unsubscribe(eventName) {\n delete this.events[eventName];\n }\n\n /\n Pauses event handling or other operations.\n * @returns {this} Returns the current instance for method chaining.\n * @example\n * store.pause().doSomething();\n /\n pause() {\n this._isPause = true;\n return this;\n }\n\n /\n Resumes event handling or other operations.\n * @param {} [val] Optional value to pass while resuming.\n @returns {this} Returns the current instance for method chaining.\n * @example\n * store.play().doSomething();\n /\n play(val) {\n this._isPause = false;\n return this;\n }\n\n /\n Merges a new reducer function into the existing reducer for a specific state property.\n * @param {string} stateValueName The key in the state object that the new reducer will manage.\n * @param {Function} newReducer The reducer function to handle updates for the specified state property.\n * @returns {void}\n * @example\n * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });\n * store.mergeReducers('user', newReducer);\n /\n mergeReducers(stateValueName, newReducer) {\n let reducerCopy = this._reducer;\n this._reducer = (state, newState) => {\n let preState = reducerCopy(state, newState);\n return {\n ...preState,\n [stateValueName]: newReducer(newState, state[stateValueName]),\n };\n };\n }\n\n /\n Synchronizes each entry in an array with the store by defining or updating state entries.\n * @param {string} storeKey The key prefix used for defining or updating store entries.\n * @param {Array<object>} [array] The array of entries to be synchronized with the store.\n * @param {string} [identificator] The property name used as a unique identifier for each entry.\n * @returns {void}\n * @example\n * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];\n * store.makeEveryArrayEntryAsStoreState('items', data, 'id');\n /\n makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = 'id') {\n array.forEach((entry) => {\n if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {\n this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));\n } else {\n this.define(\n `${storeKey}-${entry.id \|\| entry.source \|\| entry[identificator]}`,\n entry,\n null,\n identificator\n );\n }\n });\n }\n\n /\n Defines a new state variable and associates it with a reducer.\n * @param {string} stateValueName The name of the state variable to define.\n * @param {} defaultValue The initial value of the state variable.\n @param {Function\|null} [reducer] An optional reducer function to manage updates for the state variable.\n * @param {string} [key] The key used to identify individual entries if the state value is an array or object.\n * @returns {void}\n * @example\n * // Define a new state with a custom reducer\n * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));\n * @example\n * // Define a new state with default array reducer\n * store.define('items', [], null, 'itemId');\n /\n define(stateValueName, defaultValue, reducer, key = 'id') {\n if (this._state.hasOwnProperty(stateValueName)) {\n console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);\n return;\n }\n\n if (reducer instanceof Function) {\n this.mergeReducers(stateValueName, reducer);\n } else {\n if (defaultValue instanceof Array) {\n this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));\n } else {\n this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));\n }\n }\n\n this.refreshProxy({\n ...this._state,\n [stateValueName]: defaultValue,\n });\n }\n\n /\n Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.\n * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.\n * @returns {void}\n * @example\n * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });\n /\n refreshProxy(newState) {\n // Set our state to be a Proxy. We are setting the default state by\n // checking the params and defaulting to an empty object if no default\n // state is passed in\n this._state = new Proxy(newState \|\| {}, {\n set: (state, key, value) => {\n if (JSON.stringify(state[key]) === JSON.stringify(value)) {\n return true;\n }\n\n //Set the value as we would normally\n let oldState = state[key];\n state[key] = value;\n\n // Trace out to the console. This will be grouped by the related action\n // console.log(`stateChange: ${key}: `, value);\n\n // TODO vieme to rozšíríť a subscripe sa len na zmenu určitej časti statu\n // Publish the change event for the components that are listening\n if (!this._isPause) this.events.publish(key, this._state, oldState);\n\n // Give the user a little telling off if they set a value directly\n if (this.status !== 'mutation') {\n console.warn(`You should use a mutation to set ${key}`);\n }\n\n // Reset the status ready for the next operation\n this.status = 'resting';\n\n return true;\n },\n });\n }\n\n /\n Creates a reducer function to manage an object state.\n * @param {string} stateValueName The name of the state property this reducer manages.\n * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.\n * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.\n * @example\n * const userReducer = store.createObjectReducer('user');\n * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });\n /\n createObjectReducer(stateValueName) {\n return (action, state = {}) => {\n if (Array.isArray(action.payload) && (action.type === `${stateValueName}/ADD` \|\| action.type === `${stateValueName}/UPDATE`)) {\n console.error(\n `Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`\n );\n }\n\n const actionType = action.type.split('/')[1];\n\n if (!['ADD', 'UPDATE', 'DELETE'].includes(actionType)) {\n console.error(\n `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`\n );\n }\n\n switch (action.type) {\n case `${stateValueName}/ADD`:\n return {\n ...action.payload,\n };\n case `${stateValueName}/UPDATE`:\n return {\n ...state,\n ...action.payload,\n };\n case `${stateValueName}/DELETE`:\n return {};\n default:\n return state;\n }\n };\n }\n\n /\n Creates a reducer function to manage an array state.\n * @param {string} stateValueName The name of the state property this reducer manages.\n * @param {string} key The unique key used to identify items in the array for updates and deletions.\n * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.\n * @throws {Error} If `action.payload` is not an array when required.\n * @example\n * const itemsReducer = store.createArrayReducer('items', 'id');\n * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });\n */\n createArrayReducer(stateValueName, key) {\n return (action, state = []) => {\n\n if (action.actionType === \"LOAD\" && action.type?.includes(stateValueName)) {\n if (!Array.isArray(action.payload)) {\n console.error(\n `Snažíte sa použiť \"LOAD\" akciu na pole, ale payload nie je pole.`\n );\n\n return [...state];\n }\n }\n\n switch (action.type) {\n case `${stateValueName}/ADD`:\n if (Array.isArray(action.payload)) {\n return [...state, ...action.payload];\n } else {\n return [...state, action.payload];\n }\n case `${stateValueName}/ADD_MANY`:\n return [...state, ...action.payload];\n case `${stateValueName}/UPDATE`:\n if (state.some((obj) => obj[key] === action.payload[key])) {\n return [\n ...state.map((obj) => {\n if (obj[key] === action.payload[key]) {\n return action.payload;\n }\n return obj;\n }),\n ];\n } else {\n return [...state, action.payload];\n }\n case `${stateValueName}/DELETE`:\n if (Array.isArray(action.payload)) {\n return [\n ...state.filter(\n (obj) =>\n !action.payload.some((item) => (obj.hasOwnProperty(key) && obj[key] !== item[key]) \|\|\n (!obj.hasOwnProperty(key) && obj !== item))\n\n ),\n ]\n }\n\n return [\n ...state.filter(\n (obj) =>\n (obj.hasOwnProperty(key) && obj[key] !== action.payload[key]) \|\|\n (!obj.hasOwnProperty(key) && obj !== action.payload)\n ),\n ];\n\n case `${stateValueName}/LOAD`:\n return [...action.payload];\n default:\n return state;\n }\n };\n }\n}\n\nlet store = new Store();\nexport { store, defaultStoreActions };\n"],"names":["defaultStoreActions.updateAction"],"mappings":"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"}
1	+ {"version":3,"file":"wje-store.js","sources":["../packages/wje-store/default-store-actions.js","../packages/wje-store/pubsub.js","../packages/wje-store/store.js"],"sourcesContent":["const addAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/ADD`,\n payload: payload2,\n actionType: 'ADD',\n };\n };\n};\n\nconst addManyAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/ADD_MANY`,\n payload: payload2,\n actionType: 'ADD_MANY',\n };\n };\n};\n\nconst updateAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/UPDATE`,\n payload: payload2,\n actionType: 'UPDATE',\n };\n };\n};\n\nconst deleteAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/DELETE`,\n payload: payload2,\n actionType: 'DELETE',\n };\n };\n};\n\nconst loadAction = (stateValueName) => {\n return (payload2) => {\n return {\n type: `${stateValueName}/LOAD`,\n payload: payload2,\n actionType: 'LOAD',\n };\n };\n};\n\nexport { addAction, deleteAction, loadAction, updateAction, addManyAction };\n","export default class PubSub {\n constructor() {\n this.events = {};\n }\n\n /*\n Either create a new event instance for passed `event` name.\n * or push a new callback into the existing collection.\n * @param {string} event The event name to subscribe to\n * @param {Function} callback The callback function to subscribe to the event\n * @returns {number} A count of callbacks for this event\n * @memberof PubSub\n /\n subscribe(event, callback) {\n let self = this;\n let index;\n\n // If there's not already an event with this name set in our collection\n // go ahead and create a new one and set it with an empty array, so we don't\n // have to type check it later down-the-line\n if (!self.events.hasOwnProperty(event)) {\n self.events[event] = [];\n }\n\n index = self.events[event].push(callback) - 1;\n\n return {\n unsubscribe() {\n self.events[event].splice(self.events[event].indexOf(callback), 1);\n },\n };\n }\n\n /\n If the passed event has callbacks attached to it, loop through each one and call it.\n * @param {string} event The name of the event to publish\n * @param {object} [newData] The data to pass to the callbacks\n * @param {object} [oldData] The data to pass to the callbacks\n * @returns {Array} The callbacks for this event, or an empty array if no event exits\n * @memberof PubSub\n /\n publish(event, newData = {}, oldData = {}) {\n let self = this;\n\n // There's no event to publish to, so bail out\n if (!self.events.hasOwnProperty(event)) {\n return [];\n }\n\n // Get each subscription and call its callback with the passed data\n return self.events[event].map((callback) => callback(newData, oldData));\n }\n}\n","import as defaultStoreActions from './default-store-actions.js';\nimport PubSub from './pubsub.js';\n\n/*\n @summary A reactive state management system with support for reducers, events, and state immutability.\n * @description The `Store` class provides a centralized way to manage application state with actions, reducers, and event subscriptions. It supports handling both object and array state, with flexibility for custom reducers.\n * @example\n * const store = new Store({\n * reducer: (state, action) => { ... },\n * state: { user: { id: 1, name: 'John' } }\n * });\n * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));\n * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });\n /\nclass Store {\n _state;\n _reducer;\n events;\n status;\n\n /\n Initializes the store with optional reducer and state.\n * @param {object} [params] Configuration for the store.\n * @param {Function} [params.reducer] Initial reducer function for handling state updates.\n * @param {object} [params.state] Initial state of the store.\n /\n constructor(params = {}) {\n this._isPause = false;\n this._state = {};\n this._reducer = () => {\n return {};\n };\n\n // A status enum to set during actions and mutations\n this.status = 'resting';\n\n // Attach our PubSub module as an `events` element\n this.events = new PubSub();\n\n if (params?.hasOwnProperty('reducer')) {\n this._reducer = params.reducer;\n }\n\n this.refreshProxy(params?.state);\n }\n\n /\n Dispatches an action to update the state by invoking the reducer function.\n * @param {object} action The action object containing the type and any associated payload.\n * @param {string} action.type The type of the action being dispatched.\n * @returns {boolean} Returns `true` after the state has been successfully updated.\n * @example\n * const action = { type: 'INCREMENT', payload: { amount: 1 } };\n * store.dispatch(action);\n /\n dispatch(action) {\n // Create a console group which will contain the logs from our Proxy etc\n // console.groupCollapsed(`ACTION: ${action.type}`);\n\n // Let anything that's watching the status know that we're dispatching an action\n this.status = 'action';\n\n let newState = this._reducer(this._state, action);\n\n this.status = 'mutation';\n // Merge the old and new together to create a new state and set it\n this._state = Object.assign(this._state, newState);\n\n // Close our console group to keep things nice and neat\n // console.groupEnd();\n\n return true;\n }\n\n /\n Retrieves a deep copy of the current state to ensure immutability.\n * @returns {object} A deep copy of the current state.\n * @example\n * const currentState = store.getState();\n * console.log(currentState);\n /\n getState() {\n return JSON.parse(JSON.stringify(this._state));\n }\n\n /\n Subscribes to a specific event with a provided callback function.\n * @param {string} eventName The name of the event to subscribe to.\n * @param {Function} callbackFn The function to execute when the event is triggered.\n * @returns {Function} - A function to unsubscribe from the event.\n * @example\n * const unsubscribe = store.subscribe('stateChange', (newState) => {\n * console.log('State changed:', newState);\n * });\n * // Later, to unsubscribe\n * unsubscribe();\n /\n subscribe(eventName, callbackFn) {\n return this.events.subscribe(eventName, callbackFn);\n }\n\n /\n Unsubscribes from a specific event by removing all associated listeners.\n * @param {string} eventName The name of the event to unsubscribe from.\n * @returns {void}\n * @example\n * store.unsubscribe('stateChange');\n /\n unsubscribe(eventName) {\n delete this.events[eventName];\n }\n\n /\n Pauses event handling or other operations.\n * @returns {this} Returns the current instance for method chaining.\n * @example\n * store.pause().doSomething();\n /\n pause() {\n this._isPause = true;\n return this;\n }\n\n /\n Resumes event handling or other operations.\n * @param {} [val] Optional value to pass while resuming.\n @returns {this} Returns the current instance for method chaining.\n * @example\n * store.play().doSomething();\n /\n play(val) {\n this._isPause = false;\n return this;\n }\n\n /\n Merges a new reducer function into the existing reducer for a specific state property.\n * @param {string} stateValueName The key in the state object that the new reducer will manage.\n * @param {Function} newReducer The reducer function to handle updates for the specified state property.\n * @returns {void}\n * @example\n * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });\n * store.mergeReducers('user', newReducer);\n /\n mergeReducers(stateValueName, newReducer) {\n let reducerCopy = this._reducer;\n this._reducer = (state, newState) => {\n let preState = reducerCopy(state, newState);\n return {\n ...preState,\n [stateValueName]: newReducer(newState, state[stateValueName]),\n };\n };\n }\n\n /\n Synchronizes each entry in an array with the store by defining or updating state entries.\n * @param {string} storeKey The key prefix used for defining or updating store entries.\n * @param {Array<object>} [array] The array of entries to be synchronized with the store.\n * @param {string} [identificator] The property name used as a unique identifier for each entry.\n * @returns {void}\n * @example\n * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];\n * store.makeEveryArrayEntryAsStoreState('items', data, 'id');\n /\n makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = 'id') {\n array.forEach((entry) => {\n if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {\n this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));\n } else {\n this.define(\n `${storeKey}-${entry.id \|\| entry.source \|\| entry[identificator]}`,\n entry,\n null,\n identificator\n );\n }\n });\n }\n\n /\n Defines a new state variable and associates it with a reducer.\n * @param {string} stateValueName The name of the state variable to define.\n * @param {} defaultValue The initial value of the state variable.\n @param {Function\|null} [reducer] An optional reducer function to manage updates for the state variable.\n * @param {string} [key] The key used to identify individual entries if the state value is an array or object.\n * @returns {void}\n * @example\n * // Define a new state with a custom reducer\n * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));\n * @example\n * // Define a new state with default array reducer\n * store.define('items', [], null, 'itemId');\n /\n define(stateValueName, defaultValue, reducer, key = 'id') {\n if (this._state.hasOwnProperty(stateValueName)) {\n console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);\n return;\n }\n\n if (reducer instanceof Function) {\n this.mergeReducers(stateValueName, reducer);\n } else {\n if (defaultValue instanceof Array) {\n this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));\n } else {\n this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));\n }\n }\n\n this.refreshProxy({\n ...this._state,\n [stateValueName]: defaultValue,\n });\n }\n\n /\n Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.\n * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.\n * @returns {void}\n * @example\n * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });\n /\n refreshProxy(newState) {\n // Set our state to be a Proxy. We are setting the default state by\n // checking the params and defaulting to an empty object if no default\n // state is passed in\n this._state = new Proxy(newState \|\| {}, {\n set: (state, key, value) => {\n if (JSON.stringify(state[key]) === JSON.stringify(value)) {\n return true;\n }\n\n //Set the value as we would normally\n let oldState = state[key];\n state[key] = value;\n\n // Trace out to the console. This will be grouped by the related action\n // console.log(`stateChange: ${key}: `, value);\n\n // TODO vieme to rozšíríť a subscripe sa len na zmenu určitej časti statu\n // Publish the change event for the components that are listening\n if (!this._isPause) this.events.publish(key, this._state, oldState);\n\n // Give the user a little telling off if they set a value directly\n if (this.status !== 'mutation') {\n console.warn(`You should use a mutation to set ${key}`);\n }\n\n // Reset the status ready for the next operation\n this.status = 'resting';\n\n return true;\n },\n });\n }\n\n /\n Creates a reducer function to manage an object state.\n * @param {string} stateValueName The name of the state property this reducer manages.\n * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.\n * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.\n * @example\n * const userReducer = store.createObjectReducer('user');\n * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });\n /\n createObjectReducer(stateValueName) {\n return (action, state = {}) => {\n if (\n Array.isArray(action.payload) &&\n (action.type === `${stateValueName}/ADD` \|\| action.type === `${stateValueName}/UPDATE`)\n ) {\n console.error(`Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`);\n }\n\n const actionType = action.type.split('/')[1];\n\n if (!['ADD', 'UPDATE', 'DELETE'].includes(actionType)) {\n console.error(\n `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`\n );\n }\n\n switch (action.type) {\n case `${stateValueName}/ADD`:\n return {\n ...action.payload,\n };\n case `${stateValueName}/UPDATE`:\n return {\n ...state,\n ...action.payload,\n };\n case `${stateValueName}/DELETE`:\n return {};\n default:\n return state;\n }\n };\n }\n\n /\n Creates a reducer function to manage an array state.\n * @param {string} stateValueName The name of the state property this reducer manages.\n * @param {string} key The unique key used to identify items in the array for updates and deletions.\n * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.\n * @throws {Error} If `action.payload` is not an array when required.\n * @example\n * const itemsReducer = store.createArrayReducer('items', 'id');\n * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });\n */\n createArrayReducer(stateValueName, key) {\n return (action, state = []) => {\n if (action.actionType === 'LOAD' && action.type?.includes(stateValueName)) {\n if (!Array.isArray(action.payload)) {\n console.error(`Snažíte sa použiť \"LOAD\" akciu na pole, ale payload nie je pole.`);\n\n return [...state];\n }\n }\n\n switch (action.type) {\n case `${stateValueName}/ADD`:\n if (Array.isArray(action.payload)) {\n return [...state, ...action.payload];\n } else {\n return [...state, action.payload];\n }\n case `${stateValueName}/ADD_MANY`:\n return [...state, ...action.payload];\n case `${stateValueName}/UPDATE`:\n if (state.some((obj) => obj[key] === action.payload[key])) {\n return [\n ...state.map((obj) => {\n if (obj[key] === action.payload[key]) {\n return action.payload;\n }\n return obj;\n }),\n ];\n } else {\n return [...state, action.payload];\n }\n case `${stateValueName}/DELETE`:\n if (Array.isArray(action.payload)) {\n return [\n ...state.filter(\n (obj) =>\n !action.payload.some(\n (item) =>\n (obj.hasOwnProperty(key) && obj[key] !== item[key]) \|\|\n (!obj.hasOwnProperty(key) && obj !== item)\n )\n ),\n ];\n }\n\n return [\n ...state.filter(\n (obj) =>\n (obj.hasOwnProperty(key) && obj[key] !== action.payload[key]) \|\|\n (!obj.hasOwnProperty(key) && obj !== action.payload)\n ),\n ];\n\n case `${stateValueName}/LOAD`:\n return [...action.payload];\n default:\n return state;\n }\n };\n }\n}\n\nlet store = new Store();\nexport { store, defaultStoreActions };\n"],"names":["defaultStoreActions.updateAction"],"mappings":";;;AAAA,MAAM,YAAY,CAAC,mBAAmB;AAClC,SAAO,CAAC,aAAa;AACjB,WAAO;AAAA,MACH,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,IACf;AAAA,EACJ;AACL;AAEA,MAAM,gBAAgB,CAAC,mBAAmB;AACtC,SAAO,CAAC,aAAa;AACjB,WAAO;AAAA,MACH,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,IACf;AAAA,EACJ;AACL;AAEA,MAAM,eAAe,CAAC,mBAAmB;AACrC,SAAO,CAAC,aAAa;AACjB,WAAO;AAAA,MACH,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,IACf;AAAA,EACJ;AACL;AAEA,MAAM,eAAe,CAAC,mBAAmB;AACrC,SAAO,CAAC,aAAa;AACjB,WAAO;AAAA,MACH,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,IACf;AAAA,EACJ;AACL;AAEA,MAAM,aAAa,CAAC,mBAAmB;AACnC,SAAO,CAAC,aAAa;AACjB,WAAO;AAAA,MACH,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,IACf;AAAA,EACJ;AACL;;;;;;;;;AChDe,MAAM,OAAO;AAAA,EACxB,cAAc;AACV,SAAK,SAAS,CAAE;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,UAAU,OAAO,UAAU;AACvB,QAAI,OAAO;AAMX,QAAI,CAAC,KAAK,OAAO,eAAe,KAAK,GAAG;AACpC,WAAK,OAAO,KAAK,IAAI,CAAE;AAAA,IACnC;AAEgB,SAAK,OAAO,KAAK,EAAE,KAAK,QAAQ,IAAI;AAE5C,WAAO;AAAA,MACH,cAAc;AACV,aAAK,OAAO,KAAK,EAAE,OAAO,KAAK,OAAO,KAAK,EAAE,QAAQ,QAAQ,GAAG,CAAC;AAAA,MACpE;AAAA,IACJ;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,QAAQ,OAAO,UAAU,CAAA,GAAI,UAAU,CAAA,GAAI;AACvC,QAAI,OAAO;AAGX,QAAI,CAAC,KAAK,OAAO,eAAe,KAAK,GAAG;AACpC,aAAO,CAAE;AAAA,IACrB;AAGQ,WAAO,KAAK,OAAO,KAAK,EAAE,IAAI,CAAC,aAAa,SAAS,SAAS,OAAO,CAAC;AAAA,EAC9E;AACA;ACtCA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYR,YAAY,SAAS,IAAI;AAXzB;AACA;AACA;AACA;AASI,SAAK,WAAW;AAChB,SAAK,SAAS,CAAE;AAChB,SAAK,WAAW,MAAM;AAClB,aAAO,CAAE;AAAA,IACZ;AAGD,SAAK,SAAS;AAGd,SAAK,SAAS,IAAI,OAAQ;AAE1B,QAAI,iCAAQ,eAAe,YAAY;AACnC,WAAK,WAAW,OAAO;AAAA,IACnC;AAEQ,SAAK,aAAa,iCAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWI,SAAS,QAAQ;AAKb,SAAK,SAAS;AAEd,QAAI,WAAW,KAAK,SAAS,KAAK,QAAQ,MAAM;AAEhD,SAAK,SAAS;AAEd,SAAK,SAAS,OAAO,OAAO,KAAK,QAAQ,QAAQ;AAKjD,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW;AACP,WAAO,KAAK,MAAM,KAAK,UAAU,KAAK,MAAM,CAAC;AAAA,EACrD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcI,UAAU,WAAW,YAAY;AAC7B,WAAO,KAAK,OAAO,UAAU,WAAW,UAAU;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,YAAY,WAAW;AACnB,WAAO,KAAK,OAAO,SAAS;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,QAAQ;AACJ,SAAK,WAAW;AAChB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,KAAK,KAAK;AACN,SAAK,WAAW;AAChB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWI,cAAc,gBAAgB,YAAY;AACtC,QAAI,cAAc,KAAK;AACvB,SAAK,WAAW,CAAC,OAAO,aAAa;AACjC,UAAI,WAAW,YAAY,OAAO,QAAQ;AAC1C,aAAO;AAAA,QACH,GAAG;AAAA,QACH,CAAC,cAAc,GAAG,WAAW,UAAU,MAAM,cAAc,CAAC;AAAA,MAC/D;AAAA,IACJ;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,gCAAgC,UAAU,QAAQ,CAAA,GAAI,gBAAgB,MAAM;AACxE,UAAM,QAAQ,CAAC,UAAU;AACrB,UAAI,KAAK,WAAW,eAAe,GAAG,QAAQ,IAAI,MAAM,aAAa,CAAC,EAAE,GAAG;AACvE,aAAK,SAASA,aAAiC,GAAG,QAAQ,IAAI,MAAM,aAAa,CAAC,EAAE,EAAE,KAAK,CAAC;AAAA,MAC5G,OAAmB;AACH,aAAK;AAAA,UACD,GAAG,QAAQ,IAAI,MAAM,MAAM,MAAM,UAAU,MAAM,aAAa,CAAC;AAAA,UAC/D;AAAA,UACA;AAAA,UACA;AAAA,QACH;AAAA,MACjB;AAAA,IACA,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBI,OAAO,gBAAgB,cAAc,SAAS,MAAM,MAAM;AACtD,QAAI,KAAK,OAAO,eAAe,cAAc,GAAG;AAC5C,cAAQ,KAAK,8BAA8B,cAAc,2BAA2B;AACpF;AAAA,IACZ;AAEQ,QAAI,mBAAmB,UAAU;AAC7B,WAAK,cAAc,gBAAgB,OAAO;AAAA,IACtD,OAAe;AACH,UAAI,wBAAwB,OAAO;AAC/B,aAAK,cAAc,gBAAgB,KAAK,mBAAmB,gBAAgB,GAAG,CAAC;AAAA,MAC/F,OAAmB;AACH,aAAK,cAAc,gBAAgB,KAAK,oBAAoB,gBAAgB,GAAG,CAAC;AAAA,MAChG;AAAA,IACA;AAEQ,SAAK,aAAa;AAAA,MACd,GAAG,KAAK;AAAA,MACR,CAAC,cAAc,GAAG;AAAA,IAC9B,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,aAAa,UAAU;AAInB,SAAK,SAAS,IAAI,MAAM,YAAY,CAAA,GAAI;AAAA,MACpC,KAAK,CAAC,OAAO,KAAK,UAAU;AACxB,YAAI,KAAK,UAAU,MAAM,GAAG,CAAC,MAAM,KAAK,UAAU,KAAK,GAAG;AACtD,iBAAO;AAAA,QAC3B;AAGgB,YAAI,WAAW,MAAM,GAAG;AACxB,cAAM,GAAG,IAAI;AAOb,YAAI,CAAC,KAAK,SAAU,MAAK,OAAO,QAAQ,KAAK,KAAK,QAAQ,QAAQ;AAGlE,YAAI,KAAK,WAAW,YAAY;AAC5B,kBAAQ,KAAK,oCAAoC,GAAG,EAAE;AAAA,QAC1E;AAGgB,aAAK,SAAS;AAEd,eAAO;AAAA,MACV;AAAA,IACb,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWI,oBAAoB,gBAAgB;AAChC,WAAO,CAAC,QAAQ,QAAQ,OAAO;AAC3B,UACI,MAAM,QAAQ,OAAO,OAAO,MAC3B,OAAO,SAAS,GAAG,cAAc,UAAU,OAAO,SAAS,GAAG,cAAc,YAC/E;AACE,gBAAQ,MAAM,8BAA8B,cAAc,0BAA0B;AAAA,MACpG;AAEY,YAAM,aAAa,OAAO,KAAK,MAAM,GAAG,EAAE,CAAC;AAE3C,UAAI,CAAC,CAAC,OAAO,UAAU,QAAQ,EAAE,SAAS,UAAU,GAAG;AACnD,gBAAQ;AAAA,UACJ,yBAAyB,UAAU;AAAA,QACtC;AAAA,MACjB;AAEY,cAAQ,OAAO,MAAI;AAAA,QACf,KAAK,GAAG,cAAc;AAClB,iBAAO;AAAA,YACH,GAAG,OAAO;AAAA,UACb;AAAA,QACL,KAAK,GAAG,cAAc;AAClB,iBAAO;AAAA,YACH,GAAG;AAAA,YACH,GAAG,OAAO;AAAA,UACb;AAAA,QACL,KAAK,GAAG,cAAc;AAClB,iBAAO,CAAE;AAAA,QACb;AACI,iBAAO;AAAA,MAC3B;AAAA,IACS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,mBAAmB,gBAAgB,KAAK;AACpC,WAAO,CAAC,QAAQ,QAAQ,OAAO;AFxTvC;AEyTY,UAAI,OAAO,eAAe,YAAU,YAAO,SAAP,mBAAa,SAAS,kBAAiB;AACvE,YAAI,CAAC,MAAM,QAAQ,OAAO,OAAO,GAAG;AAChC,kBAAQ,MAAM,kEAAkE;AAEhF,iBAAO,CAAC,GAAG,KAAK;AAAA,QACpC;AAAA,MACA;AAEY,cAAQ,OAAO,MAAI;AAAA,QACf,KAAK,GAAG,cAAc;AAClB,cAAI,MAAM,QAAQ,OAAO,OAAO,GAAG;AAC/B,mBAAO,CAAC,GAAG,OAAO,GAAG,OAAO,OAAO;AAAA,UAC3D,OAA2B;AACH,mBAAO,CAAC,GAAG,OAAO,OAAO,OAAO;AAAA,UACxD;AAAA,QACgB,KAAK,GAAG,cAAc;AAClB,iBAAO,CAAC,GAAG,OAAO,GAAG,OAAO,OAAO;AAAA,QACvC,KAAK,GAAG,cAAc;AAClB,cAAI,MAAM,KAAK,CAAC,QAAQ,IAAI,GAAG,MAAM,OAAO,QAAQ,GAAG,CAAC,GAAG;AACvD,mBAAO;AAAA,cACH,GAAG,MAAM,IAAI,CAAC,QAAQ;AAClB,oBAAI,IAAI,GAAG,MAAM,OAAO,QAAQ,GAAG,GAAG;AAClC,yBAAO,OAAO;AAAA,gBAClD;AACgC,uBAAO;AAAA,cACvC,CAA6B;AAAA,YACJ;AAAA,UACzB,OAA2B;AACH,mBAAO,CAAC,GAAG,OAAO,OAAO,OAAO;AAAA,UACxD;AAAA,QACgB,KAAK,GAAG,cAAc;AAClB,cAAI,MAAM,QAAQ,OAAO,OAAO,GAAG;AAC/B,mBAAO;AAAA,cACH,GAAG,MAAM;AAAA,gBACL,CAAC,QACG,CAAC,OAAO,QAAQ;AAAA,kBACZ,CAAC,SACI,IAAI,eAAe,GAAG,KAAK,IAAI,GAAG,MAAM,KAAK,GAAG,KAChD,CAAC,IAAI,eAAe,GAAG,KAAK,QAAQ;AAAA,gBACjF;AAAA,cAC6B;AAAA,YACJ;AAAA,UACzB;AAEoB,iBAAO;AAAA,YACH,GAAG,MAAM;AAAA,cACL,CAAC,QACI,IAAI,eAAe,GAAG,KAAK,IAAI,GAAG,MAAM,OAAO,QAAQ,GAAG,KAC1D,CAAC,IAAI,eAAe,GAAG,KAAK,QAAQ,OAAO;AAAA,YACnD;AAAA,UACJ;AAAA,QAEL,KAAK,GAAG,cAAc;AAClB,iBAAO,CAAC,GAAG,OAAO,OAAO;AAAA,QAC7B;AACI,iBAAO;AAAA,MAC3B;AAAA,IACS;AAAA,EACT;AACA;AAEG,IAAC,QAAQ,IAAI,MAAK;"}

package/dist/wje-textarea.js CHANGED Viewed

@@ -260,16 +260,13 @@ class Textarea extends WJElement {
     });
   }
   componentCleanup() {
-    var _a;
     this.observer.disconnect();
-    (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.input);
   }
   /**
    * Disconnects the component.
    */
   beforeDisconnect() {
-    var _a;
-    (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.input);
+    this.resizeObserver.unobserve(this.input);
   }
   /**
    * @summary Validates the input.

package/dist/wje-textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments WJElement\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n /\n\nexport default class Textarea extends WJElement {\n /\n Creates an instance of Textarea.\n * @class\n /\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\n this.internals = this.attachInternals();\n this.observer = new MutationObserver(this.observeFunction);\n }\n\n observeFunction = (mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes') {\n const attributeName = mutation.attributeName;\n const oldValue = mutation.oldValue;\n const newValue = this.getAttribute(attributeName);\n\n console.log(`Attribute ${attributeName} changed from ${oldValue} to ${newValue}`);\n }\n });\n\n this.refresh();\n };\n\n /\n Setter for the value attribute.\n * @param {string} value The value to set.\n /\n set value(value) {\n this.internals.setFormValue(value);\n\n if (this.input) this.input.value = value;\n\n this.pristine = false;\n this._value = value;\n }\n\n /\n Getter for the value attribute.\n * @returns {string} The value of the attribute.\n /\n get value() {\n return this.input?.value ?? this._value ?? '';\n }\n\n /\n Getter for the invalid attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get invalid() {\n return this.hasAttribute('invalid');\n }\n\n /\n Setter for the invalid attribute.\n * @param {boolean} isInvalid Whether the input is invalid.\n /\n set invalid(isInvalid) {\n if (isInvalid) this.setAttribute('invalid', '');\n else this.removeAttribute('invalid');\n }\n\n /\n Getter for the form attribute.\n * @returns {HTMLFormElement} The form the input is associated with.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n Getter for the name attribute.\n * @returns {string} The name of the input.\n /\n get name() {\n return this.getAttribute('name');\n }\n\n /\n Getter for the type attribute.\n * @returns {string} The type of the input.\n /\n get type() {\n return this.localName;\n }\n\n /\n Getter for the validity attribute.\n * @returns {ValidityState} The validity state of the input.\n /\n get validity() {\n return this.internals.validity;\n }\n\n /\n Getter for the validationMessage attribute.\n * @returns {string} The validation message of the input.\n /\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /\n Getter for the willValidate attribute.\n * @returns {boolean} Whether the input will be validated.\n /\n get willValidate() {\n return this.internals.willValidate;\n }\n\n className = 'Textarea';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Whether the input is associated with a form.\n * @type {boolean}\n /\n static formAssociated = true;\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return [];\n }\n\n set placeholder(value) {\n this.setAttribute('placeholder', value);\n }\n\n get placeholder() {\n return this.getAttribute('placeholder');\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n\n // if some value was set via value setter then don't use default value\n if (this.pristine) {\n this.value = this.innerHTML;\n this.pristine = false;\n }\n }\n\n beforeDraw() {\n this.observer.disconnect();\n }\n\n /\n Draws the component for the textarea.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-textarea', this.variant \|\| 'default');\n native.setAttribute('part', 'native');\n\n if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n let wrapper = document.createElement('div');\n wrapper.setAttribute('part', 'wrapper');\n wrapper.classList.add('wrapper');\n\n let inputWrapper = document.createElement('div');\n inputWrapper.classList.add('input-wrapper');\n\n let label = document.createElement('label');\n label.htmlFor = 'textarea';\n label.innerHTML = this.label \|\| '';\n\n let input = document.createElement('textarea');\n input.id = 'textarea';\n input.name = this.name;\n input.disabled = this.hasAttribute('disabled');\n input.innerText = this.value;\n input.placeholder = this.placeholder \|\| '';\n input.classList.add('form-control');\n input.setAttribute('part', 'input');\n input.setAttribute('rows', this.rows \|\| 3);\n input.setAttribute('spellcheck', false);\n\n const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n attributes.forEach((attr) => {\n if (this.hasAttribute(attr)) {\n input.setAttribute(attr, this[attr] \|\| '');\n }\n });\n\n if (this.resize === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n if (this.variant === 'standard') {\n if (this.label) native.appendChild(label);\n } else {\n inputWrapper.appendChild(label);\n }\n\n inputWrapper.appendChild(input);\n\n wrapper.appendChild(inputWrapper);\n\n native.appendChild(wrapper);\n\n fragment.appendChild(native);\n\n if (this.hasAttribute('counter')) {\n input.maxLength = this.maxLength \|\| 1000;\n input.addEventListener('input', this.counterFn);\n\n let counter = document.createElement('div');\n counter.classList.add('counter');\n counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n this.counterElement = counter;\n fragment.appendChild(counter);\n }\n\n this.native = native;\n this.labelElement = label;\n this.input = input;\n\n return fragment;\n }\n\n /\n Sets up the event listeners after the component is drawn.\n /\n afterDraw() {\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);\n\n if (!this.hasAttribute('disabled')) {\n event.addListener(this, 'click', 'wje:textarea:change');\n event.addListener(this, 'click', 'wje:textarea:input');\n }\n\n this.input.addEventListener('focus', (e) => {\n this.labelElement.classList.add('fade');\n this.native.classList.add('focused');\n });\n\n this.input.addEventListener('blur', (e) => {\n this.native.classList.remove('focused');\n if (!e.target.value) this.labelElement.classList.remove('fade');\n });\n\n this.addEventListener('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n\n if (this.customErrorDisplay) {\n e.preventDefault();\n }\n });\n\n this.input.addEventListener('input', (e) => {\n this.validateInput();\n\n if (this.validateOnChange) {\n this.pristine = false;\n this.propagateValidation();\n }\n\n this.input.classList.remove('pristine');\n this.labelElement.classList.add('fade');\n\n const clone = new e.constructor(e.type, e);\n this.dispatchEvent(clone);\n\n event.dispatchCustomEvent(this, 'wje-textarea:input', {\n value: this.input.value,\n });\n\n this.value = this.input.value;\n });\n\n this.validateInput();\n\n this.observer.observe(this, {\n attributes: true, // Watch for attribute changes\n attributeOldValue: true, // Keep track of the old value of attributes\n });\n }\n\n componentCleanup() {\n this.observer.disconnect();\n this.resizeObserver?.unobserve(this.input);\n }\n\n /\n Disconnects the component.\n /\n beforeDisconnect() {\n this.resizeObserver?.unobserve(this.input);\n }\n\n /\n Sets the height of the textarea.\n /\n setTextareaHeight = () => {\n if (this.getAttribute('resize') === 'auto') {\n this.input.style.height = 'auto';\n this.input.style.height = this.input.scrollHeight + 'px';\n }\n };\n\n /\n Updates the counter for the textarea.\n * @param {Event} e The event object.\n /\n counterFn = (e) => {\n this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n };\n\n /\n @summary Validates the input.\n * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.\n * For each invalid state, it constructs an attribute name and checks if the input has this attribute.\n * If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.\n * If the input does not have the attribute, it sets the error message to the default validation message of the input.\n * It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.\n * If the input is valid, it sets the validity in the form internals to an empty object.\n /\n validateInput() {\n const validState = this.input.validity;\n\n if (!validState.valid) {\n for (let state in validState) {\n const attr = `message-${state.toString()}`;\n\n if (validState[state]) {\n this.validationError = state.toString();\n let errorMessage = this.message;\n\n // TODO this take error messages based on lang from operating system of user should we implement custom translations based on app language ?\n if (!this.hasAttribute('message'))\n errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;\n\n this.internals.setValidity({ [this.validationError]: true }, errorMessage);\n }\n }\n } else {\n this.internals.setValidity({});\n }\n }\n\n /\n @summary Propagates the validation state of the input.\n * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.\n * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.\n /\n propagateValidation() {\n this.invalid = !this.pristine && !this.internals.validity.valid;\n\n if (this.invalid && this.customErrorDisplay) {\n this.dispatchEvent(new Event('invalid'));\n }\n }\n\n /\n @summary Callback function that is called when the custom element is associated with a form.\n * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n /\n formAssociatedCallback(form) {\n this.internals.setFormValue(this.value);\n form?.addEventListener('submit', () => {\n this.validateInput();\n this.propagateValidation();\n });\n }\n\n /\n The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n * This method is responsible for resetting the value of the custom input element to its default value.\n * It also resets the form value and validity state in the form internals.\n * @function\n /\n formResetCallback() {\n // Set the value of the custom input element to its default value\n this.value = this.defaultValue;\n // Reset the form value in the form internals to the default value\n this.internals.setFormValue(this.defaultValue);\n // Reset the validity state in the form internals\n this.internals.setValidity({});\n }\n\n /\n The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n * This method is responsible for restoring the value of the custom input element to its saved state.\n * It also restores the form value and validity state in the form internals to their saved states.\n * @param {object} state The saved state of the custom input element.\n * @function\n /\n formStateRestoreCallback(state) {\n // Set the value of the custom input element to its saved value\n this.value = state.value;\n // Restore the form value in the form internals to the saved value\n this.internals.setFormValue(state.value);\n // Restore the validity state in the form internals to the saved state\n this.internals.setValidity({});\n }\n\n /\n The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n * This method is responsible for saving the value of the custom input element.\n * @returns {object} The saved state of the custom input element.\n * @function\n /\n formStateSaveCallback() {\n return {\n value: this.value,\n };\n }\n\n /\n The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n * This method is not implemented yet.\n * @param {boolean} disabled The new disabled state of the custom input element.\n * @function\n */\n formDisabledCallback(disabled) {\n console.warn('formDisabledCallback not implemented yet');\n }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments WJElement\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n /\n\nexport default class Textarea extends WJElement {\n /\n Creates an instance of Textarea.\n * @class\n /\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\n this.internals = this.attachInternals();\n this.observer = new MutationObserver(this.observeFunction);\n }\n\n observeFunction = (mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes') {\n const attributeName = mutation.attributeName;\n const oldValue = mutation.oldValue;\n const newValue = this.getAttribute(attributeName);\n\n console.log(`Attribute ${attributeName} changed from ${oldValue} to ${newValue}`);\n }\n });\n\n this.refresh();\n };\n\n /\n Setter for the value attribute.\n * @param {string} value The value to set.\n /\n set value(value) {\n this.internals.setFormValue(value);\n\n if (this.input) this.input.value = value;\n\n this.pristine = false;\n this._value = value;\n }\n\n /\n Getter for the value attribute.\n * @returns {string} The value of the attribute.\n /\n get value() {\n return this.input?.value ?? this._value ?? '';\n }\n\n /\n Getter for the invalid attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get invalid() {\n return this.hasAttribute('invalid');\n }\n\n /\n Setter for the invalid attribute.\n * @param {boolean} isInvalid Whether the input is invalid.\n /\n set invalid(isInvalid) {\n if (isInvalid) this.setAttribute('invalid', '');\n else this.removeAttribute('invalid');\n }\n\n /\n Getter for the form attribute.\n * @returns {HTMLFormElement} The form the input is associated with.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n Getter for the name attribute.\n * @returns {string} The name of the input.\n /\n get name() {\n return this.getAttribute('name');\n }\n\n /\n Getter for the type attribute.\n * @returns {string} The type of the input.\n /\n get type() {\n return this.localName;\n }\n\n /\n Getter for the validity attribute.\n * @returns {ValidityState} The validity state of the input.\n /\n get validity() {\n return this.internals.validity;\n }\n\n /\n Getter for the validationMessage attribute.\n * @returns {string} The validation message of the input.\n /\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /\n Getter for the willValidate attribute.\n * @returns {boolean} Whether the input will be validated.\n /\n get willValidate() {\n return this.internals.willValidate;\n }\n\n className = 'Textarea';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Whether the input is associated with a form.\n * @type {boolean}\n /\n static formAssociated = true;\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return [];\n }\n\n set placeholder(value) {\n this.setAttribute('placeholder', value);\n }\n\n get placeholder() {\n return this.getAttribute('placeholder');\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n\n // if some value was set via value setter then don't use default value\n if (this.pristine) {\n this.value = this.innerHTML;\n this.pristine = false;\n }\n }\n\n beforeDraw() {\n this.observer.disconnect();\n }\n\n /\n Draws the component for the textarea.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-textarea', this.variant \|\| 'default');\n native.setAttribute('part', 'native');\n\n if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n let wrapper = document.createElement('div');\n wrapper.setAttribute('part', 'wrapper');\n wrapper.classList.add('wrapper');\n\n let inputWrapper = document.createElement('div');\n inputWrapper.classList.add('input-wrapper');\n\n let label = document.createElement('label');\n label.htmlFor = 'textarea';\n label.innerHTML = this.label \|\| '';\n\n let input = document.createElement('textarea');\n input.id = 'textarea';\n input.name = this.name;\n input.disabled = this.hasAttribute('disabled');\n input.innerText = this.value;\n input.placeholder = this.placeholder \|\| '';\n input.classList.add('form-control');\n input.setAttribute('part', 'input');\n input.setAttribute('rows', this.rows \|\| 3);\n input.setAttribute('spellcheck', false);\n\n const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n attributes.forEach((attr) => {\n if (this.hasAttribute(attr)) {\n input.setAttribute(attr, this[attr] \|\| '');\n }\n });\n\n if (this.resize === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n if (this.variant === 'standard') {\n if (this.label) native.appendChild(label);\n } else {\n inputWrapper.appendChild(label);\n }\n\n inputWrapper.appendChild(input);\n\n wrapper.appendChild(inputWrapper);\n\n native.appendChild(wrapper);\n\n fragment.appendChild(native);\n\n if (this.hasAttribute('counter')) {\n input.maxLength = this.maxLength \|\| 1000;\n input.addEventListener('input', this.counterFn);\n\n let counter = document.createElement('div');\n counter.classList.add('counter');\n counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n this.counterElement = counter;\n fragment.appendChild(counter);\n }\n\n this.native = native;\n this.labelElement = label;\n this.input = input;\n\n return fragment;\n }\n\n /\n Sets up the event listeners after the component is drawn.\n /\n afterDraw() {\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);\n\n if (!this.hasAttribute('disabled')) {\n event.addListener(this, 'click', 'wje:textarea:change');\n event.addListener(this, 'click', 'wje:textarea:input');\n }\n\n this.input.addEventListener('focus', (e) => {\n this.labelElement.classList.add('fade');\n this.native.classList.add('focused');\n });\n\n this.input.addEventListener('blur', (e) => {\n this.native.classList.remove('focused');\n if (!e.target.value) this.labelElement.classList.remove('fade');\n });\n\n this.addEventListener('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n\n if (this.customErrorDisplay) {\n e.preventDefault();\n }\n });\n\n this.input.addEventListener('input', (e) => {\n this.validateInput();\n\n if (this.validateOnChange) {\n this.pristine = false;\n this.propagateValidation();\n }\n\n this.input.classList.remove('pristine');\n this.labelElement.classList.add('fade');\n\n const clone = new e.constructor(e.type, e);\n this.dispatchEvent(clone);\n\n event.dispatchCustomEvent(this, 'wje-textarea:input', {\n value: this.input.value,\n });\n\n this.value = this.input.value;\n });\n\n this.validateInput();\n\n this.observer.observe(this, {\n attributes: true, // Watch for attribute changes\n attributeOldValue: true, // Keep track of the old value of attributes\n });\n }\n\n componentCleanup() {\n this.observer.disconnect();\n }\n\n /\n Disconnects the component.\n /\n beforeDisconnect() {\n this.resizeObserver.unobserve(this.input);\n }\n\n /\n Sets the height of the textarea.\n /\n setTextareaHeight = () => {\n if (this.getAttribute('resize') === 'auto') {\n this.input.style.height = 'auto';\n this.input.style.height = this.input.scrollHeight + 'px';\n }\n };\n\n /\n Updates the counter for the textarea.\n * @param {Event} e The event object.\n /\n counterFn = (e) => {\n this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n };\n\n /\n @summary Validates the input.\n * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.\n * For each invalid state, it constructs an attribute name and checks if the input has this attribute.\n * If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.\n * If the input does not have the attribute, it sets the error message to the default validation message of the input.\n * It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.\n * If the input is valid, it sets the validity in the form internals to an empty object.\n /\n validateInput() {\n const validState = this.input.validity;\n\n if (!validState.valid) {\n for (let state in validState) {\n const attr = `message-${state.toString()}`;\n\n if (validState[state]) {\n this.validationError = state.toString();\n let errorMessage = this.message;\n\n // TODO this take error messages based on lang from operating system of user should we implement custom translations based on app language ?\n if (!this.hasAttribute('message'))\n errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;\n\n this.internals.setValidity({ [this.validationError]: true }, errorMessage);\n }\n }\n } else {\n this.internals.setValidity({});\n }\n }\n\n /\n @summary Propagates the validation state of the input.\n * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.\n * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.\n /\n propagateValidation() {\n this.invalid = !this.pristine && !this.internals.validity.valid;\n\n if (this.invalid && this.customErrorDisplay) {\n this.dispatchEvent(new Event('invalid'));\n }\n }\n\n /\n @summary Callback function that is called when the custom element is associated with a form.\n * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n /\n formAssociatedCallback(form) {\n this.internals.setFormValue(this.value);\n form?.addEventListener('submit', () => {\n this.validateInput();\n this.propagateValidation();\n });\n }\n\n /\n The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n * This method is responsible for resetting the value of the custom input element to its default value.\n * It also resets the form value and validity state in the form internals.\n * @function\n /\n formResetCallback() {\n // Set the value of the custom input element to its default value\n this.value = this.defaultValue;\n // Reset the form value in the form internals to the default value\n this.internals.setFormValue(this.defaultValue);\n // Reset the validity state in the form internals\n this.internals.setValidity({});\n }\n\n /\n The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n * This method is responsible for restoring the value of the custom input element to its saved state.\n * It also restores the form value and validity state in the form internals to their saved states.\n * @param {object} state The saved state of the custom input element.\n * @function\n /\n formStateRestoreCallback(state) {\n // Set the value of the custom input element to its saved value\n this.value = state.value;\n // Restore the form value in the form internals to the saved value\n this.internals.setFormValue(state.value);\n // Restore the validity state in the form internals to the saved state\n this.internals.setValidity({});\n }\n\n /\n The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n * This method is responsible for saving the value of the custom input element.\n * @returns {object} The saved state of the custom input element.\n * @function\n /\n formStateSaveCallback() {\n return {\n value: this.value,\n };\n }\n\n /\n The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n * This method is not implemented yet.\n * @param {boolean} disabled The new disabled state of the custom input element.\n * @function\n */\n formDisabledCallback(disabled) {\n console.warn('formDisabledCallback not implemented yet');\n }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":"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"}