npm - wj-elements - Versions diffs - 0.1.168 → 0.1.169 - Mend

wj-elements 0.1.168 → 0.1.169

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 (21) hide show

package/dist/light.css +4 -0
package/dist/packages/wje-element/element.d.ts +1 -1
package/dist/packages/wje-option/option.element.d.ts +1 -0
package/dist/wje-dialog.js +1 -1
package/dist/wje-dropdown.js +1 -0
package/dist/wje-dropdown.js.map +1 -1
package/dist/wje-input.js +2 -1
package/dist/wje-input.js.map +1 -1
package/dist/wje-option.js +3 -0
package/dist/wje-option.js.map +1 -1
package/dist/wje-options.js +1 -0
package/dist/wje-options.js.map +1 -1
package/dist/wje-select.js +5 -2
package/dist/wje-select.js.map +1 -1
package/dist/wje-store.js +5 -5
package/dist/wje-store.js.map +1 -1
package/dist/wje-textarea.js +1 -0
package/dist/wje-textarea.js.map +1 -1
package/package.json +3 -2
package/dist/packages/wje-accordion/accordion.test.d.ts +0 -0
package/dist/packages/wje-color-picker/color-picker.test.d.ts +0 -1

package/dist/light.css CHANGED Viewed

@@ -328,6 +328,10 @@
     --wje-dialog-padding-inline: var(--wje-spacing-medium);
     --wje-dialog-padding-top: var(--wje-spacing-medium);
     --wje-dialog-padding-bottom: var(--wje-spacing-medium);
+    --wje-dialog-headline-font-size: 0.656rem;
+    --wje-dialog-headline-letter-spacing: 0.06em;
+    --wje-dialog-headline-font-weight: 500;
+    --wje-dialog-headline-text-transform: uppercase;
     /* Divider */
     --wje-divider-border-width: var(--wje-border-width, 1px);

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

@@ -97,7 +97,7 @@ export default class WJElement extends HTMLElement {
      * Gets the rendering context, either the shadow root or the component itself.
      * @returns The rendering context.
      */
-    get context(): any;
+    get context(): this | ShadowRoot;
     /**
      * Gets the store instance.
      * @returns {object} The store instance.

package/dist/packages/wje-option/option.element.d.ts CHANGED Viewed

@@ -42,6 +42,7 @@ export default class Option extends WJElement {
      * @param {string} value The value to set.
      */
     set value(value: string);
+    get value(): string;
     /**
      * Sets the text content of the option.
      * @param {string} value The text to set.

package/dist/wje-dialog.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 = "/*\n[ WJ Dialog ]\n*/\n\n:host {\n    --wje-dialog-header-actions-gap: 0.5rem;\n\n    .close {\n        margin-left: auto;\n    }\n\n    .header-actions {\n        margin-left: auto;\n        display: flex;\n        align-items: center;\n        gap: var(--wje-dialog-header-actions-gap);\n    }\n\n    .modal-content {\n        border-radius: 3px;\n        box-shadow: none;\n    }\n\n    .dialog-header {\n        position: relative;\n        border-bottom: 0;\n        padding-inline: var(--wje-dialog-padding);\n        padding-top: var(--wje-dialog-padding);\n        padding-bottom: var(--wje-dialog-padding);\n        display: flex;\n        align-items: center;\n        span {\n            font-family: var(--wje-font-family-secondary);\n            font-size: 10.5px;\n            text-transform: uppercase;\n            display: inline-block;\n            letter-spacing: 0.06em;\n            font-weight: 500;\n            margin: 0;\n            padding: 0;\n            line-height: normal;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            filter: alpha(opacity=40);\n        }\n    }\n\n    .dialog-content {\n        box-shadow: none;\n        padding-inline: var(--wje-dialog-padding);\n        white-space: normal;\n        z-index: 1;\n    }\n\n    .dialog-footer {\n        display: flex;\n        justify-content: end;\n        border-top: none;\n        box-shadow: none;\n        margin-top: 0;\n        padding-inline: var(--wje-dialog-padding-inline);\n        padding-top: var(--wje-dialog-padding-top);\n        padding-bottom: var(--wje-dialog-padding-bottom);\n    }\n}\n\n/*Blocking element styles*/\n.blocking-element {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--wje-color-contrast-0);\n    opacity: 0.75;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n\n    wje-icon {\n        animation: loader 1s linear infinite;\n    }\n}\n\n@keyframes loader {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\ndialog::backdrop {\n    opacity: var(--wje-backdrop-opacity);\n    background-color: var(--wje-backdrop);\n}\n\ndialog:focus-visible {\n    outline: none;\n}\n\n:host(.separator) .dialog-header:after {\n    content: '';\n    height: 1px;\n    background: rgba(0, 0, 0, 0.08);\n    left: var(--wje-dialog-padding);\n    right: var(--wje-dialog-padding);\n    position: absolute;\n    bottom: 0;\n}\n\n:host {\n    dialog {\n        box-sizing: border-box;\n        transition: all 0.2s !important;\n        width: var(--wje-dialog-width);\n        height: var(--wje-dialog-height);\n        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n\n        border-radius: var(--wje-dialog-border-radius);\n        border-width: var(--wje-dialog-border-width);\n        border-style: var(--wje-dialog-border-style);\n        border-color: var(--wje-dialog-border-color);\n\n        margin-top: var(--wje-dialog-margin-top);\n\n        margin-bottom: var(--wje-dialog-margin-bottom);\n        margin-inline: var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);\n\n        padding: 0;\n    }\n}\n\n/*Top*/\n:host(.stick-up) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: fit-content;\n    --wje-dialog-border-radius: 0 0 8px 8px;\n    --wje-dialog-border-width: 0 1px 1px 1px;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-translate-from: translateY(-110%);\n    --wje-dialog-template-to: translateX(0);\n}\n\n/*Cenetered*/\n:host(.slide-up) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: fit-content;\n    --wje-dialog-border-radius: 8px;\n    --wje-dialog-border-width: 1px;\n    --wje-dialog-opacity-from: 0;\n    --wje-dialog-translate-from: scale(0.9);\n    --wje-dialog-translate-to: scale(1);\n}\n\n/*Fullscreen*/\n:host(.fill-in) {\n    --wje-dialog-width: 100%;\n    --wje-dialog-height: 100%;\n    --wje-dialog-border-radius: 0 0 0 0 !important;\n    --wje-dialog-border-width: 0;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-margin-start: 0;\n    --wje-dialog-margin-end: 0;\n    --wje-dialog-margin-bottom: 0;\n    --wje-dialog-translate-from: scale(0.95);\n    --wje-dialog-translate-to: scale(1);\n    dialog {\n        min-width: var(--wje-dialog-width);\n        min-height: var(--wje-dialog-height);\n    }\n}\n\n/*Slide Left*/\n:host(.slide-left) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: 100% !important;\n    --wje-dialog-border-radius: 0;\n    --wje-dialog-border-width: 0 1px 0 0;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-margin-start: 0;\n    --wje-dialog-margin-end: auto;\n    --wje-dialog-margin-bottom: 0;\n    dialog {\n        min-height: var(--wje-dialog-height);\n        --wje-dialog-translate-from: translateX(-110%);\n        --wje-dialog-template-to: translateX(0);\n    }\n}\n\n/*Slide Right*/\n:host(.slide-right) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: 100% !important;\n    --wje-dialog-border-radius: 0;\n    --wje-dialog-border-width: 0 0 0 1px;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-margin-start: auto;\n    --wje-dialog-margin-end: 0;\n    --wje-dialog-margin-bottom: 0;\n    dialog {\n        min-height: var(--wje-dialog-height);\n        --wje-dialog-translate-from: translateX(110%);\n        --wje-dialog-template-to: translateX(0);\n    }\n}\n\n:host(.small) {\n    --wje-dialog-width: 300px !important;\n}\n\n:host(.medium) {\n    --wje-dialog-width: 500px !important;\n}\n\n:host(.large) {\n    --wje-dialog-width: 600px !important;\n}\n\n:host(.ex-large) {\n    --wje-dialog-width: 900px !important;\n}\n\ndialog[open] {\n    animation: show 0.5s ease normal;\n}\n\n@keyframes show {\n    from {\n        opacity: var(--wje-dialog-opacity-from, 1);\n        transform: var(--wje-dialog-translate-from);\n    }\n    to {\n        opacity: 1;\n        transform: var(--wje-dialog-translate-to);\n    }\n}\n";
+const styles = "/*\n[ WJ Dialog ]\n*/\n\n:host {\n    --wje-dialog-header-actions-gap: 0.5rem;\n\n    .close {\n        margin-left: auto;\n    }\n\n    .header-actions {\n        margin-left: auto;\n        display: flex;\n        align-items: center;\n        gap: var(--wje-dialog-header-actions-gap);\n    }\n\n    .modal-content {\n        border-radius: 3px;\n        box-shadow: none;\n    }\n\n    .dialog-header {\n        position: relative;\n        border-bottom: 0;\n        padding-inline: var(--wje-dialog-padding);\n        padding-top: var(--wje-dialog-padding);\n        padding-bottom: var(--wje-dialog-padding);\n        display: flex;\n        align-items: center;\n        span {\n            font-family: var(--wje-font-family-secondary);\n            font-size: var(--wje-dialog-headline-font-size);\n            text-transform: var(--wje-dialog-headline-text-transform);\n            display: inline-block;\n            letter-spacing: var(--wje-dialog-headline-letter-spacing);\n            font-weight: var(--wje-dialog-headline-font-weight);\n            margin: 0;\n            padding: 0;\n            line-height: normal;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            filter: alpha(opacity=40);\n        }\n    }\n\n    .dialog-content {\n        box-shadow: none;\n        padding-inline: var(--wje-dialog-padding);\n        white-space: normal;\n        z-index: 1;\n    }\n\n    .dialog-footer {\n        display: flex;\n        justify-content: end;\n        border-top: none;\n        box-shadow: none;\n        margin-top: 0;\n        padding-inline: var(--wje-dialog-padding-inline);\n        padding-top: var(--wje-dialog-padding-top);\n        padding-bottom: var(--wje-dialog-padding-bottom);\n    }\n}\n\n/*Blocking element styles*/\n.blocking-element {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--wje-color-contrast-0);\n    opacity: 0.75;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n\n    wje-icon {\n        animation: loader 1s linear infinite;\n    }\n}\n\n@keyframes loader {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\ndialog::backdrop {\n    opacity: var(--wje-backdrop-opacity);\n    background-color: var(--wje-backdrop);\n}\n\ndialog:focus-visible {\n    outline: none;\n}\n\n:host(.separator) .dialog-header:after {\n    content: '';\n    height: 1px;\n    background: rgba(0, 0, 0, 0.08);\n    left: var(--wje-dialog-padding);\n    right: var(--wje-dialog-padding);\n    position: absolute;\n    bottom: 0;\n}\n\n:host {\n    dialog {\n        box-sizing: border-box;\n        transition: all 0.2s !important;\n        width: var(--wje-dialog-width);\n        height: var(--wje-dialog-height);\n        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n\n        border-radius: var(--wje-dialog-border-radius);\n        border-width: var(--wje-dialog-border-width);\n        border-style: var(--wje-dialog-border-style);\n        border-color: var(--wje-dialog-border-color);\n\n        margin-top: var(--wje-dialog-margin-top);\n\n        margin-bottom: var(--wje-dialog-margin-bottom);\n        margin-inline: var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);\n\n        padding: 0;\n    }\n}\n\n/*Top*/\n:host(.stick-up) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: fit-content;\n    --wje-dialog-border-radius: 0 0 8px 8px;\n    --wje-dialog-border-width: 0 1px 1px 1px;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-translate-from: translateY(-110%);\n    --wje-dialog-template-to: translateX(0);\n}\n\n/*Cenetered*/\n:host(.slide-up) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: fit-content;\n    --wje-dialog-border-radius: 8px;\n    --wje-dialog-border-width: 1px;\n    --wje-dialog-opacity-from: 0;\n    --wje-dialog-translate-from: scale(0.9);\n    --wje-dialog-translate-to: scale(1);\n}\n\n/*Fullscreen*/\n:host(.fill-in) {\n    --wje-dialog-width: 100%;\n    --wje-dialog-height: 100%;\n    --wje-dialog-border-radius: 0 0 0 0 !important;\n    --wje-dialog-border-width: 0;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-margin-start: 0;\n    --wje-dialog-margin-end: 0;\n    --wje-dialog-margin-bottom: 0;\n    --wje-dialog-translate-from: scale(0.95);\n    --wje-dialog-translate-to: scale(1);\n    dialog {\n        min-width: var(--wje-dialog-width);\n        min-height: var(--wje-dialog-height);\n    }\n}\n\n/*Slide Left*/\n:host(.slide-left) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: 100% !important;\n    --wje-dialog-border-radius: 0;\n    --wje-dialog-border-width: 0 1px 0 0;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-margin-start: 0;\n    --wje-dialog-margin-end: auto;\n    --wje-dialog-margin-bottom: 0;\n    dialog {\n        min-height: var(--wje-dialog-height);\n        --wje-dialog-translate-from: translateX(-110%);\n        --wje-dialog-template-to: translateX(0);\n    }\n}\n\n/*Slide Right*/\n:host(.slide-right) {\n    --wje-dialog-width: 300px !important;\n    --wje-dialog-height: 100% !important;\n    --wje-dialog-border-radius: 0;\n    --wje-dialog-border-width: 0 0 0 1px;\n    --wje-dialog-margin-top: 0;\n    --wje-dialog-margin-start: auto;\n    --wje-dialog-margin-end: 0;\n    --wje-dialog-margin-bottom: 0;\n    dialog {\n        min-height: var(--wje-dialog-height);\n        --wje-dialog-translate-from: translateX(110%);\n        --wje-dialog-template-to: translateX(0);\n    }\n}\n\n:host(.small) {\n    --wje-dialog-width: 300px !important;\n}\n\n:host(.medium) {\n    --wje-dialog-width: 500px !important;\n}\n\n:host(.large) {\n    --wje-dialog-width: 600px !important;\n}\n\n:host(.ex-large) {\n    --wje-dialog-width: 900px !important;\n}\n\ndialog[open] {\n    animation: show 0.5s ease normal;\n}\n\n@keyframes show {\n    from {\n        opacity: var(--wje-dialog-opacity-from, 1);\n        transform: var(--wje-dialog-translate-from);\n    }\n    to {\n        opacity: 1;\n        transform: var(--wje-dialog-translate-to);\n    }\n}\n";
 class Dialog extends WJElement {
   /**
    * @class

package/dist/wje-dropdown.js CHANGED Viewed

@@ -154,6 +154,7 @@ class Dropdown extends WJElement {
     let popup = document.createElement("wje-popup");
     popup.setAttribute("placement", this.placement);
     popup.setAttribute("offset", this.offset);
+    popup.setAttribute("part", "popup");
     popup.appendChild(anchorSlot);
     popup.appendChild(slot);
     popup.setAttribute("manual", "");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/*\n `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n /\nexport default class Dropdown extends WJElement {\n /\n Creates an instance of Dropdown.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n The placement of the dropdown.\n * @type {{\"wje-popup\": Popup}}\n /\n dependencies = {\n 'wje-popup': Popup,\n };\n\n /\n Sets the placement of the dropdown.\n * @param value\n /\n set trigger(value) {\n this.setAttribute('trigger', value);\n }\n\n /\n Gets the placement of the dropdown.\n * @returns {string\|string}\n /\n get trigger() {\n return this.getAttribute('trigger') \|\| 'click';\n }\n\n /\n Sets the placement of the dropdown.\n * @type {string}\n /\n className = 'Dropdown';\n\n /\n Getter for the CSS stylesheet.\n * @returns {string[]}\n /\n static get observedAttributes() {\n return ['active'];\n }\n\n /\n Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n * @param {Event} e The event object.\n /\n otherDropdownOpennedCallback = (e) => {\n if (e.detail.detail.target !== this) {\n this.classList.remove('active');\n this.popup.hide();\n }\n };\n\n /\n Sets up the attributes for the dropdown.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Removes the popup element.\n /\n beforeDraw() {\n this.popup?.remove();\n this.popup = null;\n }\n\n /\n Draws the dropdown element and returns the created document fragment.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('wje-placement', 'wje-' + this.placement \|\| 'wje-start');\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-dropdown');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.tooltip);\n\n let anchorSlot = document.createElement('slot');\n anchorSlot.setAttribute('name', 'trigger');\n anchorSlot.setAttribute('slot', 'anchor');\n\n let slot = document.createElement('slot');\n\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', this.placement);\n popup.setAttribute('offset', this.offset);\n\n popup.appendChild(anchorSlot);\n popup.appendChild(slot);\n\n // if(this.trigger === \"click\")\n popup.setAttribute('manual', '');\n\n native.appendChild(popup);\n\n fragment.appendChild(native);\n\n this.popup = popup;\n this.anchorSlot = anchorSlot;\n\n return fragment;\n }\n\n /\n Adds event listeners for the mouseenter and mouseleave events.\n /\n afterDisconnect() {\n event.removeListener(this, 'mouseenter', null, this.onOpen);\n event.removeListener(this, 'mouseleave', null, this.onClose);\n event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n }\n\n popupHideCallback = () => {\n if (this.classList.contains('active')) {\n this.classList.remove('active');\n\n event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n bubbles: true,\n detail: { target: this },\n });\n }\n };\n\n /\n Adds event listeners for the mouseenter and mouseleave events.\n /\n afterDraw() {\n event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n if (this.trigger !== 'click') {\n event.addListener(this, 'mouseenter', null, this.onOpen);\n event.addListener(this, 'mouseleave', null, this.onClose);\n } else {\n event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n }\n\n if (this.hasAttribute('collapsible')) {\n event.addListener(\n Array.from(this.querySelectorAll('wje-menu-item')),\n 'click',\n 'wje-menu-item:click',\n this.onClose\n );\n }\n }\n\n /\n @summary Returns the content to be displayed before showing the dropdown.\n * @returns {any} The content to be displayed.\n /\n beforeShow() {\n return this.content;\n }\n\n /\n This method is called after the dropdown is shown.\n /\n afterShow() {\n // Do nothing\n }\n\n /\n @summary Toggles the dropdown element between active and inactive states.\n * Calls the `onOpen` method if the element is currently inactive,\n * and calls the `onClose` method if the element is currently active.\n * @param {Event} e The event object.\n /\n toggleCallback = (e) => {\n e.stopPropagation();\n\n if (this.classList.contains('active')) {\n this.onClose(e);\n } else {\n this.onOpen(e);\n }\n };\n\n /\n Open the popup element.\n * @param {object} e\n */\n onOpen = (e) => {\n e.stopPropagation();\n\n this.classList.add('active');\n Promise.resolve(this.beforeShow(this))\n .then((res) => {\n if (!this.classList.contains('active')) {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.popup.show(true); // Show tooltip\n\n event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n bubbles: true,\n detail: { target: this },\n });\n\n Promise.resolve(this.afterShow(this));\n })\n .catch((error) => {\n // ak je nejaka chyba tak to len zatvorime\n this.classList.remove('active');\n this.popup.hide(true);\n });\n };\n\n beforeClose = () => {\n // Do nothing\n };\n\n afterClose = () => {\n // Do nothing\n };\n\n onClose = (e) => {\n e.stopPropagation();\n\n this.classList.remove('active');\n Promise.resolve(this.beforeClose(this))\n .then((res) => {\n if (this.classList.contains('active')) {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.popup.hide(true); // Show tooltip\n\n event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n bubbles: true,\n detail: { target: this },\n });\n\n Promise.resolve(this.afterClose(this));\n })\n .catch((error) => {\n this.classList.add('active');\n this.popup.show(true);\n });\n };\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/*\n `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n /\nexport default class Dropdown extends WJElement {\n /\n Creates an instance of Dropdown.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n The placement of the dropdown.\n * @type {{\"wje-popup\": Popup}}\n /\n dependencies = {\n 'wje-popup': Popup,\n };\n\n /\n Sets the placement of the dropdown.\n * @param value\n /\n set trigger(value) {\n this.setAttribute('trigger', value);\n }\n\n /\n Gets the placement of the dropdown.\n * @returns {string\|string}\n /\n get trigger() {\n return this.getAttribute('trigger') \|\| 'click';\n }\n\n /\n Sets the placement of the dropdown.\n * @type {string}\n /\n className = 'Dropdown';\n\n /\n Getter for the CSS stylesheet.\n * @returns {string[]}\n /\n static get observedAttributes() {\n return ['active'];\n }\n\n /\n Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n * @param {Event} e The event object.\n /\n otherDropdownOpennedCallback = (e) => {\n if (e.detail.detail.target !== this) {\n this.classList.remove('active');\n this.popup.hide();\n }\n };\n\n /\n Sets up the attributes for the dropdown.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Removes the popup element.\n /\n beforeDraw() {\n this.popup?.remove();\n this.popup = null;\n }\n\n /\n Draws the dropdown element and returns the created document fragment.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('wje-placement', 'wje-' + this.placement \|\| 'wje-start');\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-dropdown');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.tooltip);\n\n let anchorSlot = document.createElement('slot');\n anchorSlot.setAttribute('name', 'trigger');\n anchorSlot.setAttribute('slot', 'anchor');\n\n let slot = document.createElement('slot');\n\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', this.placement);\n popup.setAttribute('offset', this.offset);\n popup.setAttribute('part', 'popup');\n\n popup.appendChild(anchorSlot);\n popup.appendChild(slot);\n\n // if(this.trigger === \"click\")\n popup.setAttribute('manual', '');\n\n native.appendChild(popup);\n\n fragment.appendChild(native);\n\n this.popup = popup;\n this.anchorSlot = anchorSlot;\n\n return fragment;\n }\n\n /\n Adds event listeners for the mouseenter and mouseleave events.\n /\n afterDisconnect() {\n event.removeListener(this, 'mouseenter', null, this.onOpen);\n event.removeListener(this, 'mouseleave', null, this.onClose);\n event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n }\n\n popupHideCallback = () => {\n if (this.classList.contains('active')) {\n this.classList.remove('active');\n\n event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n bubbles: true,\n detail: { target: this },\n });\n }\n };\n\n /\n Adds event listeners for the mouseenter and mouseleave events.\n /\n afterDraw() {\n event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n if (this.trigger !== 'click') {\n event.addListener(this, 'mouseenter', null, this.onOpen);\n event.addListener(this, 'mouseleave', null, this.onClose);\n } else {\n event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n }\n\n if (this.hasAttribute('collapsible')) {\n event.addListener(\n Array.from(this.querySelectorAll('wje-menu-item')),\n 'click',\n 'wje-menu-item:click',\n this.onClose\n );\n }\n }\n\n /\n @summary Returns the content to be displayed before showing the dropdown.\n * @returns {any} The content to be displayed.\n /\n beforeShow() {\n return this.content;\n }\n\n /\n This method is called after the dropdown is shown.\n /\n afterShow() {\n // Do nothing\n }\n\n /\n @summary Toggles the dropdown element between active and inactive states.\n * Calls the `onOpen` method if the element is currently inactive,\n * and calls the `onClose` method if the element is currently active.\n * @param {Event} e The event object.\n /\n toggleCallback = (e) => {\n e.stopPropagation();\n\n if (this.classList.contains('active')) {\n this.onClose(e);\n } else {\n this.onOpen(e);\n }\n };\n\n /\n Open the popup element.\n * @param {object} e\n */\n onOpen = (e) => {\n e.stopPropagation();\n\n this.classList.add('active');\n Promise.resolve(this.beforeShow(this))\n .then((res) => {\n if (!this.classList.contains('active')) {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.popup.show(true); // Show tooltip\n\n event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n bubbles: true,\n detail: { target: this },\n });\n\n Promise.resolve(this.afterShow(this));\n })\n .catch((error) => {\n // ak je nejaka chyba tak to len zatvorime\n this.classList.remove('active');\n this.popup.hide(true);\n });\n };\n\n beforeClose = () => {\n // Do nothing\n };\n\n afterClose = () => {\n // Do nothing\n };\n\n onClose = (e) => {\n e.stopPropagation();\n\n this.classList.remove('active');\n Promise.resolve(this.beforeClose(this))\n .then((res) => {\n if (this.classList.contains('active')) {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.popup.hide(true); // Show tooltip\n\n event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n bubbles: true,\n detail: { target: this },\n });\n\n Promise.resolve(this.afterClose(this));\n })\n .catch((error) => {\n this.classList.add('active');\n this.popup.show(true);\n });\n };\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":";;;;;AAgBe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5C,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,wCAAe;AAAA,MACX,aAAa;AAAA,IAChB;AAsBD;AAAA;AAAA;AAAA;AAAA,qCAAY;AAcZ;AAAA;AAAA;AAAA;AAAA,wDAA+B,CAAC,MAAM;AAClC,UAAI,EAAE,OAAO,OAAO,WAAW,MAAM;AACjC,aAAK,UAAU,OAAO,QAAQ;AAC9B,aAAK,MAAM,KAAM;AAAA,MAC7B;AAAA,IACK;AAsED,6CAAoB,MAAM;AACtB,UAAI,KAAK,UAAU,SAAS,QAAQ,GAAG;AACnC,aAAK,UAAU,OAAO,QAAQ;AAE9B,cAAM,oBAAoB,MAAM,sBAAsB;AAAA,UAClD,SAAS;AAAA,UACT,QAAQ,EAAE,QAAQ,KAAM;AAAA,QACxC,CAAa;AAAA,MACb;AAAA,IACK;AA8CD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAAiB,CAAC,MAAM;AACpB,QAAE,gBAAiB;AAEnB,UAAI,KAAK,UAAU,SAAS,QAAQ,GAAG;AACnC,aAAK,QAAQ,CAAC;AAAA,MAC1B,OAAe;AACH,aAAK,OAAO,CAAC;AAAA,MACzB;AAAA,IACK;AAMD;AAAA;AAAA;AAAA;AAAA,kCAAS,CAAC,MAAM;AACZ,QAAE,gBAAiB;AAEnB,WAAK,UAAU,IAAI,QAAQ;AAC3B,cAAQ,QAAQ,KAAK,WAAW,IAAI,CAAC,EAChC,KAAK,CAAC,QAAQ;AACX,YAAI,CAAC,KAAK,UAAU,SAAS,QAAQ,GAAG;AACpC,gBAAM,IAAI,MAAM,gDAAgD;AAAA,QACpF;AAEgB,aAAK,MAAM,KAAK,IAAI;AAEpB,cAAM,oBAAoB,MAAM,qBAAqB;AAAA,UACjD,SAAS;AAAA,UACT,QAAQ,EAAE,QAAQ,KAAM;AAAA,QAC5C,CAAiB;AAED,gBAAQ,QAAQ,KAAK,UAAU,IAAI,CAAC;AAAA,MACvC,CAAA,EACA,MAAM,CAAC,UAAU;AAEd,aAAK,UAAU,OAAO,QAAQ;AAC9B,aAAK,MAAM,KAAK,IAAI;AAAA,MACpC,CAAa;AAAA,IACR;AAED,uCAAc,MAAM;AAAA,IAEnB;AAED,sCAAa,MAAM;AAAA,IAElB;AAED,mCAAU,CAAC,MAAM;AACb,QAAE,gBAAiB;AAEnB,WAAK,UAAU,OAAO,QAAQ;AAC9B,cAAQ,QAAQ,KAAK,YAAY,IAAI,CAAC,EACjC,KAAK,CAAC,QAAQ;AACX,YAAI,KAAK,UAAU,SAAS,QAAQ,GAAG;AACnC,gBAAM,IAAI,MAAM,gDAAgD;AAAA,QACpF;AAEgB,aAAK,MAAM,KAAK,IAAI;AAEpB,cAAM,oBAAoB,MAAM,sBAAsB;AAAA,UAClD,SAAS;AAAA,UACT,QAAQ,EAAE,QAAQ,KAAM;AAAA,QAC5C,CAAiB;AAED,gBAAQ,QAAQ,KAAK,WAAW,IAAI,CAAC;AAAA,MACxC,CAAA,EACA,MAAM,CAAC,UAAU;AACd,aAAK,UAAU,IAAI,QAAQ;AAC3B,aAAK,MAAM,KAAK,IAAI;AAAA,MACpC,CAAa;AAAA,IACR;AAAA,EArPL;AAAA;AAAA;AAAA;AAAA;AAAA,EAcI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,QAAQ;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAgBI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKI,aAAa;;AACT,eAAK,UAAL,mBAAY;AACZ,SAAK,QAAQ;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,SAAK,UAAU,IAAI,iBAAiB,SAAS,KAAK,aAAa,WAAW;AAE1E,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,UAAU,SAAS,cAAc,aAAa;AAClD,YAAQ,aAAa,WAAW,KAAK,OAAO;AAE5C,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,aAAa,QAAQ,SAAS;AACzC,eAAW,aAAa,QAAQ,QAAQ;AAExC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,WAAW;AAC9C,UAAM,aAAa,aAAa,KAAK,SAAS;AAC9C,UAAM,aAAa,UAAU,KAAK,MAAM;AACxC,UAAM,aAAa,QAAQ,OAAO;AAElC,UAAM,YAAY,UAAU;AAC5B,UAAM,YAAY,IAAI;AAGtB,UAAM,aAAa,UAAU,EAAE;AAE/B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,SAAK,QAAQ;AACb,SAAK,aAAa;AAElB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,UAAM,eAAe,MAAM,cAAc,MAAM,KAAK,MAAM;AAC1D,UAAM,eAAe,MAAM,cAAc,MAAM,KAAK,OAAO;AAC3D,UAAM,eAAe,KAAK,YAAY,SAAS,MAAM,KAAK,gBAAgB,EAAE,SAAS,KAAI,CAAE;AAC3F,UAAM,eAAe,MAAM,kBAAkB,MAAM,KAAK,iBAAiB;AAAA,EACjF;AAAA;AAAA;AAAA;AAAA,EAgBI,YAAY;AACR,UAAM,YAAY,MAAM,kBAAkB,MAAM,KAAK,iBAAiB;AAEtE,QAAI,KAAK,YAAY,SAAS;AAC1B,YAAM,YAAY,MAAM,cAAc,MAAM,KAAK,MAAM;AACvD,YAAM,YAAY,MAAM,cAAc,MAAM,KAAK,OAAO;AAAA,IACpE,OAAe;AACH,YAAM,YAAY,KAAK,YAAY,SAAS,MAAM,KAAK,gBAAgB,EAAE,SAAS,KAAI,CAAE;AAAA,IACpG;AAEQ,QAAI,KAAK,aAAa,aAAa,GAAG;AAClC,YAAM;AAAA,QACF,MAAM,KAAK,KAAK,iBAAiB,eAAe,CAAC;AAAA,QACjD;AAAA,QACA;AAAA,QACA,KAAK;AAAA,MACR;AAAA,IACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,aAAa;AACT,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AAAA,EAEhB;AAgFA;ACzQA,SAAS,OAAO,gBAAgB,QAAQ;"}

package/dist/wje-input.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 = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n\n    .wrapper {\n        display: flex;\n        width: 100%;\n        flex-direction: column;\n    }\n    .native-input {\n        .input-wrapper {\n            flex-wrap: wrap;\n            display: flex;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                margin: 0;\n                display: block;\n                opacity: 1;\n                cursor: text;\n                transition: opacity 0.2s ease;\n                line-height: var(--wje-input-line-height);\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            label {\n                margin: 0;\n                display: inline-block;\n                opacity: 1;\n                cursor: text;\n                transition: opacity 0.2s ease;\n                line-height: var(--wje-input-line-height);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            .error-message {\n                position: static;\n\n                background: transparent;\n                padding: 0.25rem 0;\n                left: auto;\n                transform: none;\n                color: var(--wje-input-color-invalid);\n                font-size: 12px;\n                line-height: normal;\n            }\n        }\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: 0;\n    top: 3px;\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([required]) .input-wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: '*';\n    font-family: var(--wje-force-mac-font-family);\n    font-size: 20px;\n    position: absolute;\n    right: 0;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    top: 0;\n}\n\n:host([invalid]) {\n    .error-message {\n        display: block;\n    }\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n/*\n    .options-show is a class that is added to the host element when the select options are shown\n */\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n    margin-inline: 0.5rem;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    font-family: var(--wje-input-font-family);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\n.error-message {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -75%);\n    color: white;\n    font-size: 12px;\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
+const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    --wje-input-in-select-background: var(--wje-input-background-color, var(--wje-color-contrast-0));\n    --wje-input-in-select-border-width: var(--wje-input-border-width, 1px);\n    --wje-input-in-select-padding: var(--wje-input-padding, 2px 0.5rem);\n\n    .wrapper {\n        display: flex;\n        width: 100%;\n        flex-direction: column;\n    }\n    .native-input {\n        .input-wrapper {\n            flex-wrap: wrap;\n            display: flex;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                margin: 0;\n                display: block;\n                opacity: 1;\n                cursor: text;\n                transition: opacity 0.2s ease;\n                line-height: var(--wje-input-line-height);\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            label {\n                margin: 0;\n                display: inline-block;\n                opacity: 1;\n                cursor: text;\n                transition: opacity 0.2s ease;\n                line-height: var(--wje-input-line-height);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            .error-message {\n                position: static;\n\n                background: transparent;\n                padding: 0.25rem 0;\n                left: auto;\n                transform: none;\n                color: var(--wje-input-color-invalid);\n                font-size: 12px;\n                line-height: normal;\n            }\n        }\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: 0;\n    top: 3px;\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([required]) .input-wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: '*';\n    font-family: var(--wje-force-mac-font-family);\n    font-size: 20px;\n    position: absolute;\n    right: 0;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    top: 0;\n}\n\n:host([invalid]) {\n    .error-message {\n        display: block;\n    }\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n/*\n    .options-show is a class that is added to the host element when the select options are shown\n */\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n    margin-inline: 0.5rem;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    font-family: var(--wje-input-font-family);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\n.error-message {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -75%);\n    color: white;\n    font-size: 12px;\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
 class Input extends WJElement {
   /**
    * Creates an instance of Input.
@@ -176,6 +176,7 @@ class Input extends WJElement {
     inputWrapper.setAttribute("part", "wrapper");
     inputWrapper.classList.add("input-wrapper");
     let label = document.createElement("label");
+    label.setAttribute("part", "label");
     label.innerText = this.label;
     if (this.value && !this.hasAttribute("error")) label.classList.add("fade");
     let input = document.createElement("input");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-input.js","sources":["../packages/wje-input/input.element.js","../packages/wje-input/input.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n * @documentation https://elements.webjet.sk/components/input\n * @status stable\n * @augments WJElement\n * @csspart native - The native part.\n * @csspart wrapper - The wrapper part.\n * @csspart input - The input part.\n * @csspart clear - The clear part.\n * @slot start - Slot for content at the start of the input.\n * @slot end - Slot for content at the end of the input.\n * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.\n * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.\n * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.\n * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.\n * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.\n * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.\n * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.\n * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).\n * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.\n * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.\n * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.\n * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.\n * // @fires wje-input:input - Dispatched when the input value changes.\n * // @fires wje-input:clear - Dispatched when the input is cleared.\n /\nexport default class Input extends WJElement {\n /\n Creates an instance of Input.\n /\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\n this.internals = this.attachInternals();\n\n // Create a mutation observer instance to watch for changes in attributes\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\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 customErrorDisplay attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get customErrorDisplay() {\n return this.hasAttribute('custom-error-display');\n }\n\n /\n Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n /\n Getter for the invalid attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get invalid() {\n return this.hasAttribute('invalid');\n }\n\n /\n Setter for the invalid attribute.\n * @param {boolean} isInvalid Whether the input is invalid.\n /\n set invalid(isInvalid) {\n if (isInvalid) this.setAttribute('invalid', '');\n else this.removeAttribute('invalid');\n }\n\n /\n Getter for the form attribute.\n * @returns {HTMLFormElement} The form the input is associated with.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n Getter for the name attribute.\n * @returns {string} The name of the input element.\n /\n get name() {\n return this.getAttribute('name');\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 element.\n /\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /\n Getter for the willValidate attribute.\n * @returns {boolean} Whether the input will be validated.\n /\n get willValidate() {\n return this.internals.willValidate;\n }\n\n /\n @summary Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n /\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /\n @summary Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n /\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /\n The class name of the input element.\n * @type {string}\n /\n className = 'Input';\n\n /\n Getter for the cssStyleSheet attribute.\n * @returns {CSSStyleSheet} The CSS style sheet of the input element.\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 ['value', 'name', 'disabled', 'placeholder', 'label', 'message', 'error-inline'];\n }\n\n /\n Whether the input is associated with a form.\n * @type {boolean}\n /\n static formAssociated = true;\n\n /\n Sets up the attributes for the input.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n // if some value was set via value setter then dont use default value\n if (this.pristine) {\n this.value = this.defaultValue;\n this.pristine = false;\n }\n }\n\n beforeDraw() {\n this.observer.disconnect();\n }\n\n /\n Draws the input element.\n * @returns {DocumentFragment} The drawn input.\n /\n draw() {\n let hasSlotStart = this.hasSlot(this, 'start');\n let hasSlotEnd = this.hasSlot(this, 'end');\n let hasSlotError = this.hasSlot(this, 'error');\n let fragment = document.createDocumentFragment();\n\n // Wrapper\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-input', this.variant \|\| 'default');\n\n if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n let wrapper = document.createElement('div');\n wrapper.classList.add('wrapper');\n\n let inputWrapper = document.createElement('div');\n inputWrapper.setAttribute('part', 'wrapper');\n inputWrapper.classList.add('input-wrapper');\n\n // Label\n let label = document.createElement('label');\n label.innerText = this.label;\n if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n // Input\n let input = document.createElement('input');\n input.setAttribute('type', 'text');\n input.setAttribute('part', 'input');\n input.setAttribute('value', this.value \|\| '');\n input.classList.add('form-control');\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 // Error\n let error = document.createElement('div');\n error.classList.add('error-message');\n error.setAttribute('part', 'error');\n\n let errorSlot = null;\n if (hasSlotError) {\n errorSlot = document.createElement('slot');\n errorSlot.setAttribute('name', 'error');\n\n if (this.hasAttribute('error-inline')) {\n // inline version of error message\n native.appendChild(errorSlot);\n } else {\n // tooltip version of error message\n error.appendChild(errorSlot);\n wrapper.appendChild(error);\n }\n } else {\n wrapper.appendChild(error);\n }\n\n let start = null;\n if (hasSlotStart) {\n start = document.createElement('slot');\n start.setAttribute('name', 'start');\n start.setAttribute('part', 'start');\n }\n\n let end = null;\n if (hasSlotEnd) {\n end = document.createElement('slot');\n end.setAttribute('name', 'end');\n end.setAttribute('part', 'end');\n }\n\n if (hasSlotStart) {\n inputWrapper.appendChild(start);\n native.classList.add('has-start');\n }\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 wrapper.appendChild(inputWrapper);\n\n native.appendChild(wrapper);\n\n if (this.hasAttribute('clearable')) {\n this.clear = document.createElement('wje-button');\n this.clear.classList.add('clear');\n this.clear.setAttribute('fill', 'link');\n this.clear.setAttribute('part', 'clear');\n\n let clearIcon = document.createElement('wje-icon');\n clearIcon.setAttribute('name', 'x');\n this.clear.appendChild(clearIcon);\n inputWrapper.appendChild(this.clear);\n }\n\n if (hasSlotEnd) {\n inputWrapper.appendChild(end);\n native.classList.add('has-end');\n }\n\n fragment.appendChild(native);\n\n this.native = native;\n this.labelElement = label;\n this.input = input;\n this.errorMessage = error;\n\n return fragment;\n }\n\n /\n Runs after the input is drawn to the DOM.\n /\n afterDraw() {\n this.input.addEventListener('focus', (e) => {\n this.labelElement.classList.add('fade');\n this.native.classList.add('focused');\n });\n\n this.input.addEventListener('blur', (e) => {\n this.native.classList.remove('focused');\n if (!e.target.value) this.labelElement.classList.remove('fade');\n });\n\n this.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-input:input', {\n value: this.input.value,\n });\n\n this.value = this.input.value;\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.addEventListener('focus', () => this.input.focus());\n\n if (this.clear) {\n this.clear.addEventListener('wje-button:click', (e) => {\n this.input.value = '';\n event.dispatchCustomEvent(this.clear, 'wje-input:clear');\n });\n }\n\n this.validateInput();\n\n if (this.hasAttribute('invalid')) {\n this.showInvalidMessage();\n }\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 @summary Displays the validation message for the input.\n * If the input has a slot named 'error', it sets the text content of the element with attribute 'error-message' inside the slot to the validation message.\n * If the input does not have an 'error' slot, it sets the text content of the errorMessage property to the validation message.\n /\n showInvalidMessage() {\n let hasSlotError = this.hasSlot(this, 'error');\n\n if (hasSlotError) {\n const slot = this.querySelector(\"[slot='error']\");\n let errorMessage = slot.querySelector('[error-message]');\n\n if (!errorMessage) {\n const error = document.createElement('div');\n error.setAttribute('error-message', '');\n slot.appendChild(error);\n errorMessage = error;\n }\n\n errorMessage.textContent = this.internals.validationMessage;\n } else {\n this.errorMessage.textContent = this.internals.validationMessage;\n }\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 Checks whether the input has a slot.\n * @param {HTMLElement} el The element to check.\n * @param {string} slotName The name of the slot to check for.\n * @returns {boolean} Whether the input has the slot.\n /\n hasSlot(el, slotName = null) {\n let selector = slotName ? `[slot=\"${slotName}\"]` : '[slot]';\n\n return el.querySelectorAll(selector).length > 0 ? true : false;\n }\n\n /\n @summary Callback function that is called when the custom element is associated with a form.\n * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n /\n formAssociatedCallback(form) {\n if (form) {\n this.internals.setFormValue(this.value);\n form?.addEventListener('submit', () => {\n this.validateInput();\n this.propagateValidation();\n });\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 // dispatchEvent(e) {\n // return false;\n // }\n}\n","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-input.js","sources":["../packages/wje-input/input.element.js","../packages/wje-input/input.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n * @documentation https://elements.webjet.sk/components/input\n * @status stable\n * @augments WJElement\n * @csspart native - The native part.\n * @csspart wrapper - The wrapper part.\n * @csspart input - The input part.\n * @csspart clear - The clear part.\n * @slot start - Slot for content at the start of the input.\n * @slot end - Slot for content at the end of the input.\n * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.\n * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.\n * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.\n * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.\n * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.\n * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.\n * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.\n * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).\n * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.\n * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.\n * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.\n * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.\n * // @fires wje-input:input - Dispatched when the input value changes.\n * // @fires wje-input:clear - Dispatched when the input is cleared.\n /\nexport default class Input extends WJElement {\n /\n Creates an instance of Input.\n /\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\n this.internals = this.attachInternals();\n\n // Create a mutation observer instance to watch for changes in attributes\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\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 customErrorDisplay attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get customErrorDisplay() {\n return this.hasAttribute('custom-error-display');\n }\n\n /\n Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n /\n Getter for the invalid attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get invalid() {\n return this.hasAttribute('invalid');\n }\n\n /\n Setter for the invalid attribute.\n * @param {boolean} isInvalid Whether the input is invalid.\n /\n set invalid(isInvalid) {\n if (isInvalid) this.setAttribute('invalid', '');\n else this.removeAttribute('invalid');\n }\n\n /\n Getter for the form attribute.\n * @returns {HTMLFormElement} The form the input is associated with.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n Getter for the name attribute.\n * @returns {string} The name of the input element.\n /\n get name() {\n return this.getAttribute('name');\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 element.\n /\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /\n Getter for the willValidate attribute.\n * @returns {boolean} Whether the input will be validated.\n /\n get willValidate() {\n return this.internals.willValidate;\n }\n\n /\n @summary Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n /\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /\n @summary Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n /\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /\n The class name of the input element.\n * @type {string}\n /\n className = 'Input';\n\n /\n Getter for the cssStyleSheet attribute.\n * @returns {CSSStyleSheet} The CSS style sheet of the input element.\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 ['value', 'name', 'disabled', 'placeholder', 'label', 'message', 'error-inline'];\n }\n\n /\n Whether the input is associated with a form.\n * @type {boolean}\n /\n static formAssociated = true;\n\n /\n Sets up the attributes for the input.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n // if some value was set via value setter then dont use default value\n if (this.pristine) {\n this.value = this.defaultValue;\n this.pristine = false;\n }\n }\n\n beforeDraw() {\n this.observer.disconnect();\n }\n\n /\n Draws the input element.\n * @returns {DocumentFragment} The drawn input.\n /\n draw() {\n let hasSlotStart = this.hasSlot(this, 'start');\n let hasSlotEnd = this.hasSlot(this, 'end');\n let hasSlotError = this.hasSlot(this, 'error');\n let fragment = document.createDocumentFragment();\n\n // Wrapper\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-input', this.variant \|\| 'default');\n\n if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n let wrapper = document.createElement('div');\n wrapper.classList.add('wrapper');\n\n let inputWrapper = document.createElement('div');\n inputWrapper.setAttribute('part', 'wrapper');\n inputWrapper.classList.add('input-wrapper');\n\n // Label\n let label = document.createElement('label');\n label.setAttribute('part', 'label');\n label.innerText = this.label;\n if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n // Input\n let input = document.createElement('input');\n input.setAttribute('type', 'text');\n input.setAttribute('part', 'input');\n input.setAttribute('value', this.value \|\| '');\n input.classList.add('form-control');\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 // Error\n let error = document.createElement('div');\n error.classList.add('error-message');\n error.setAttribute('part', 'error');\n\n let errorSlot = null;\n if (hasSlotError) {\n errorSlot = document.createElement('slot');\n errorSlot.setAttribute('name', 'error');\n\n if (this.hasAttribute('error-inline')) {\n // inline version of error message\n native.appendChild(errorSlot);\n } else {\n // tooltip version of error message\n error.appendChild(errorSlot);\n wrapper.appendChild(error);\n }\n } else {\n wrapper.appendChild(error);\n }\n\n let start = null;\n if (hasSlotStart) {\n start = document.createElement('slot');\n start.setAttribute('name', 'start');\n start.setAttribute('part', 'start');\n }\n\n let end = null;\n if (hasSlotEnd) {\n end = document.createElement('slot');\n end.setAttribute('name', 'end');\n end.setAttribute('part', 'end');\n }\n\n if (hasSlotStart) {\n inputWrapper.appendChild(start);\n native.classList.add('has-start');\n }\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 wrapper.appendChild(inputWrapper);\n\n native.appendChild(wrapper);\n\n if (this.hasAttribute('clearable')) {\n this.clear = document.createElement('wje-button');\n this.clear.classList.add('clear');\n this.clear.setAttribute('fill', 'link');\n this.clear.setAttribute('part', 'clear');\n\n let clearIcon = document.createElement('wje-icon');\n clearIcon.setAttribute('name', 'x');\n this.clear.appendChild(clearIcon);\n inputWrapper.appendChild(this.clear);\n }\n\n if (hasSlotEnd) {\n inputWrapper.appendChild(end);\n native.classList.add('has-end');\n }\n\n fragment.appendChild(native);\n\n this.native = native;\n this.labelElement = label;\n this.input = input;\n this.errorMessage = error;\n\n return fragment;\n }\n\n /\n Runs after the input is drawn to the DOM.\n /\n afterDraw() {\n this.input.addEventListener('focus', (e) => {\n this.labelElement.classList.add('fade');\n this.native.classList.add('focused');\n });\n\n this.input.addEventListener('blur', (e) => {\n this.native.classList.remove('focused');\n if (!e.target.value) this.labelElement.classList.remove('fade');\n });\n\n this.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-input:input', {\n value: this.input.value,\n });\n\n this.value = this.input.value;\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.addEventListener('focus', () => this.input.focus());\n\n if (this.clear) {\n this.clear.addEventListener('wje-button:click', (e) => {\n this.input.value = '';\n event.dispatchCustomEvent(this.clear, 'wje-input:clear');\n });\n }\n\n this.validateInput();\n\n if (this.hasAttribute('invalid')) {\n this.showInvalidMessage();\n }\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 @summary Displays the validation message for the input.\n * If the input has a slot named 'error', it sets the text content of the element with attribute 'error-message' inside the slot to the validation message.\n * If the input does not have an 'error' slot, it sets the text content of the errorMessage property to the validation message.\n /\n showInvalidMessage() {\n let hasSlotError = this.hasSlot(this, 'error');\n\n if (hasSlotError) {\n const slot = this.querySelector(\"[slot='error']\");\n let errorMessage = slot.querySelector('[error-message]');\n\n if (!errorMessage) {\n const error = document.createElement('div');\n error.setAttribute('error-message', '');\n slot.appendChild(error);\n errorMessage = error;\n }\n\n errorMessage.textContent = this.internals.validationMessage;\n } else {\n this.errorMessage.textContent = this.internals.validationMessage;\n }\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 Checks whether the input has a slot.\n * @param {HTMLElement} el The element to check.\n * @param {string} slotName The name of the slot to check for.\n * @returns {boolean} Whether the input has the slot.\n /\n hasSlot(el, slotName = null) {\n let selector = slotName ? `[slot=\"${slotName}\"]` : '[slot]';\n\n return el.querySelectorAll(selector).length > 0 ? true : false;\n }\n\n /\n @summary Callback function that is called when the custom element is associated with a form.\n * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n /\n formAssociatedCallback(form) {\n if (form) {\n this.internals.setFormValue(this.value);\n form?.addEventListener('submit', () => {\n this.validateInput();\n this.propagateValidation();\n });\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 // dispatchEvent(e) {\n // return false;\n // }\n}\n","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":"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"}

package/dist/wje-option.js CHANGED Viewed

@@ -34,6 +34,9 @@ class Option extends WJElement {
   set value(value) {
     this.setAttribute("value", value);
   }
+  get value() {
+    return this.getAttribute("value");
+  }
   /**
    * Sets the text content of the option.
    * @param {string} value The text to set.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n /\nexport default class Option extends WJElement {\n /\n Creates an instance of Option.\n * @class\n /\n ~~constructor~~() {\n ~~super~~();\n }\n\n /\n Dependencies of the Option component.\n /\n ~~dependencies~~ = {\n 'wje-icon': Icon,\n };\n\n /\n Sets the selected attribute of the option.\n * @param {boolean} value The value to set.\n /\n ~~set~~ selected(value) {\n if (value) this.setAttribute('selected', '');\n ~~else~~ this.removeAttribute('selected');\n }\n\n /\n Sets the value attribute of the option.\n * @param {string} value The value to set.\n /\n ~~set~~ value(value) {\n ~~this~~.setAttribute('value', value);\n }\n\n /\n Sets the text content of the option.\n * @param {string} value The text to set.\n /\n ~~set~~ text(value) {\n ~~this~~.innerText = value;\n }\n\n ~~className~~ = 'Option';\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 option.\n * @returns {DocumentFragment}\n /\n ~~draw~~() {\n ~~let~~ fragment = document.createDocumentFragment();\n\n ~~let~~ element = document.createElement('div');\n ~~element~~.classList.add('native-option');\n ~~element~~.setAttribute('part', 'native');\n\n ~~let~~ icon = document.createElement('wje-icon');\n ~~icon~~.setAttribute('name', 'check');\n\n ~~let~~ start = document.createElement('slot');\n ~~start~~.setAttribute('name', 'start');\n\n ~~let~~ slot = document.createElement('slot');\n\n ~~let~~ end = document.createElement('slot');\n ~~end~~.setAttribute('name', 'end');\n\n ~~element~~.appendChild(icon);\n ~~element~~.appendChild(start);\n ~~element~~.appendChild(slot);\n ~~element~~.appendChild(end);\n\n ~~fragment~~.appendChild(element);\n\n ~~return~~ fragment;\n }\n\n /\n Adds event listeners after the component is drawn.\n */\n ~~afterDraw~~() {\n ~~event~~.addListener(this, 'click', null, this.optionClickCallback);\n }\n\n ~~beforeDisconnect~~() {\n ~~event~~.removeListener(this, 'click', null, this.optionClickCallback);\n }\n\n ~~optionClickCallback~~(e, b, c) {\n if (this.hasAttribute('disabled')) return;\n\n ~~this~~.dispatchEvent(\n ~~new~~ CustomEvent('wje-option:change', {\n ~~bubbles~~: true,\n ~~composed~~: true,\n ~~detail~~: {\n ~~value~~: this.value,\n ~~text~~: this.text,\n },\n })\n );\n }\n}\n","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":[],"mappings":";;;;;;AAiBe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAK1C~~,cAAc;~~AACV~~,UAAO;~~AAMX~~;AAAA;AAAA;AAAA,wCAAe;AAAA,~~MACX~~,YAAY;AAAA,~~IACf~~;~~AA2BD~~,qCAAY;AAAA,~~EAlChB~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAaI~~,IAAI,SAAS,OAAO;~~AAChB~~,QAAI,MAAO,MAAK,aAAa,YAAY,EAAE;AAAA,QACtC,MAAK,gBAAgB,UAAU;AAAA,~~EAC5C~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,MAAM,OAAO;~~AACb~~,SAAK,aAAa,SAAS,KAAK;AAAA,~~EACxC~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,KAAK,OAAO;~~AACZ~~,SAAK,YAAY;AAAA,~~EACzB~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EASI~~,WAAW,gBAAgB;~~AACvB~~,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAOI~~,WAAW,qBAAqB;~~AAC5B~~,WAAO,CAAE;AAAA,~~EACjB~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,kBAAkB;~~AACd~~,SAAK,eAAe;AAAA,~~EAC5B~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,OAAO;~~AACH~~,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,eAAe;AACrC,YAAQ,aAAa,QAAQ,QAAQ;AAErC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,OAAO;AAEjC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,YAAQ,YAAY,IAAI;AACxB,YAAQ,YAAY,KAAK;AACzB,YAAQ,YAAY,IAAI;AACxB,YAAQ,YAAY,GAAG;AAEvB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,YAAY;~~AACR~~,UAAM,YAAY,MAAM,SAAS,MAAM,KAAK,mBAAmB;AAAA,~~EACvE~~;AAAA,~~EAEI~~,mBAAmB;~~AACf~~,UAAM,eAAe,MAAM,SAAS,MAAM,KAAK,mBAAmB;AAAA,~~EAC1E~~;AAAA,~~EAEI~~,oBAAoB,GAAG,GAAG,GAAG;~~AACzB~~,QAAI,KAAK,aAAa,UAAU,EAAG;AAEnC,SAAK;AAAA,~~MACD~~,IAAI,YAAY,qBAAqB;AAAA,~~QACjC~~,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,~~UACJ~~,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,~~QACd~~;AAAA,~~MACJ~~,CAAA;AAAA,~~IACJ~~;AAAA,~~EACT~~;AACA;~~AC1IA~~,OAAO,OAAO,cAAc,MAAM;"}
1	+ {"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n /\nexport default class Option extends WJElement {\n\t/\n\t Creates an instance of Option.\n\t * @class\n\t /\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t/\n\t Dependencies of the Option component.\n\t /\n\tdependencies = {\n\t\t'wje-icon': Icon,\n\t};\n\n\t/\n\t Sets the selected attribute of the option.\n\t * @param {boolean} value The value to set.\n\t /\n\tset selected(value) {\n\t\tif (value) this.setAttribute('selected', '');\n\t\telse this.removeAttribute('selected');\n\t}\n\n\t/\n\t Sets the value attribute of the option.\n\t * @param {string} value The value to set.\n\t /\n\tset value(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\tget value() {\n\t\treturn this.getAttribute('value');\n\t}\n\n\t/\n\t Sets the text content of the option.\n\t * @param {string} value The text to set.\n\t /\n\tset text(value) {\n\t\tthis.innerText = value;\n\t}\n\n\tclassName = 'Option';\n\n\t/\n\t Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t /\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/\n\t Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t /\n\tstatic get observedAttributes() {\n\t\treturn [];\n\t}\n\n\t/\n\t Sets up the attributes for the component.\n\t /\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/\n\t Draws the component for the option.\n\t * @returns {DocumentFragment}\n\t /\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet element = document.createElement('div');\n\t\telement.classList.add('native-option');\n\t\telement.setAttribute('part', 'native');\n\n\t\tlet icon = document.createElement('wje-icon');\n\t\ticon.setAttribute('name', 'check');\n\n\t\tlet start = document.createElement('slot');\n\t\tstart.setAttribute('name', 'start');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet end = document.createElement('slot');\n\t\tend.setAttribute('name', 'end');\n\n\t\telement.appendChild(icon);\n\t\telement.appendChild(start);\n\t\telement.appendChild(slot);\n\t\telement.appendChild(end);\n\n\t\tfragment.appendChild(element);\n\n\t\treturn fragment;\n\t}\n\n\t/\n\t Adds event listeners after the component is drawn.\n\t */\n\tafterDraw() {\n\t\tevent.addListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\toptionClickCallback(e, b, c) {\n\t\tif (this.hasAttribute('disabled')) return;\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('wje-option:change', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t\tdetail: {\n\t\t\t\t\tvalue: this.value,\n\t\t\t\t\ttext: this.text,\n\t\t\t\t},\n\t\t\t})\n\t\t);\n\t}\n}\n","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":[],"mappings":";;;;;;AAiBe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK7C,cAAc;AACb,UAAO;AAMR;AAAA;AAAA;AAAA,wCAAe;AAAA,MACd,YAAY;AAAA,IACZ;AA+BD,qCAAY;AAAA,EAtCb;AAAA;AAAA;AAAA;AAAA;AAAA,EAaC,IAAI,SAAS,OAAO;AACnB,QAAI,MAAO,MAAK,aAAa,YAAY,EAAE;AAAA,QACtC,MAAK,gBAAgB,UAAU;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,IAAI,MAAM,OAAO;AAChB,SAAK,aAAa,SAAS,KAAK;AAAA,EAClC;AAAA,EAEC,IAAI,QAAQ;AACX,WAAO,KAAK,aAAa,OAAO;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,IAAI,KAAK,OAAO;AACf,SAAK,YAAY;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASC,WAAW,gBAAgB;AAC1B,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOC,WAAW,qBAAqB;AAC/B,WAAO,CAAE;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKC,kBAAkB;AACjB,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMC,OAAO;AACN,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,eAAe;AACrC,YAAQ,aAAa,QAAQ,QAAQ;AAErC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,OAAO;AAEjC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,YAAQ,YAAY,IAAI;AACxB,YAAQ,YAAY,KAAK;AACzB,YAAQ,YAAY,IAAI;AACxB,YAAQ,YAAY,GAAG;AAEvB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKC,YAAY;AACX,UAAM,YAAY,MAAM,SAAS,MAAM,KAAK,mBAAmB;AAAA,EACjE;AAAA,EAEC,mBAAmB;AAClB,UAAM,eAAe,MAAM,SAAS,MAAM,KAAK,mBAAmB;AAAA,EACpE;AAAA,EAEC,oBAAoB,GAAG,GAAG,GAAG;AAC5B,QAAI,KAAK,aAAa,UAAU,EAAG;AAEnC,SAAK;AAAA,MACJ,IAAI,YAAY,qBAAqB;AAAA,QACpC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,UACP,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,QACX;AAAA,MACD,CAAA;AAAA,IACD;AAAA,EACH;AACA;AC9IA,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-options.js CHANGED Viewed

@@ -351,6 +351,7 @@ class Options extends WJElement {
       optionsData = this.processData(optionsData);
       this.loadedOptions.push(...optionsData);
       this.append(...optionsData.map(this.htmlItem));
+      event.dispatchCustomEvent(this, "wje-options:load", {});
     }
     return fragment;
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-options.js","sources":["../packages/wje-options/options.element.js","../packages/wje-options/options.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.element.js';\nimport List from '../wje-list/list.element.js';\nimport Option from '../wje-option/option.js';\n\n/*\n `Options` is a custom web component that represents a set of options.\n * It extends from `WJElement`.\n * @summary This element represents a set of options.\n * @documentation https://elements.webjet.sk/components/options\n * @status stable\n * @augments {WJElement}\n * // @fires wje-options:load - Event fired when the options are loaded.\n * @tag wje-options\n /\nexport default class Options extends WJElement {\n /\n Stores the loaded options.\n * @type {Array}\n * @private\n /\n #loadedOptions = [];\n\n #drawPreloadedElements = []\n\n /\n Creates an instance of Options.\n * @class\n /\n constructor() {\n super();\n }\n\n dependencies = {\n 'wje-option': Option,\n 'wje-infinite-scroll': InfiniteScroll,\n 'wje-list': List,\n };\n\n className = 'Options';\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return ['search', 'attached'];\n }\n\n /\n Sets the option array path attribute.\n * @param {string} value The value to set for the option array path.\n /\n set optionArrayPath(value) {\n this.setAttribute('option-array-path', value);\n }\n\n /\n Gets the option array path attribute.\n * @returns {string} The value of the option array path attribute or \"data\" if not set.\n /\n get optionArrayPath() {\n return this.getAttribute('option-array-path');\n }\n\n /\n Checks if the option array path attribute is present.\n * @returns {boolean} True if the option array path attribute is present, false otherwise.\n /\n get hasOptionArrayPath() {\n return this.hasAttribute('option-array-path');\n }\n\n /\n Gets the dropdown height attribute.\n * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n /\n get dropdownHeight() {\n return this.getAttribute('dropdown-height') \|\| '100%';\n }\n\n /\n Sets the dropdown height attribute.\n * @param {string} value The value to set for the dropdown height.\n /\n set dropdownHeight(value) {\n this.setAttribute('dropdown-height', value);\n }\n\n /\n Sets the item value attribute.\n * @param {string} value The value to set for the item value.\n /\n set itemValue(value) {\n this.setAttribute('item-value', value);\n }\n\n /\n Gets the item value attribute.\n * @returns {string} The value of the item value attribute or \"value\" if not set.\n /\n get itemValue() {\n return this.getAttribute('item-value') \|\| 'value';\n }\n\n /\n Sets the item text attribute.\n * @param {string} value The value to set for the item text.\n /\n set itemText(value) {\n this.setAttribute('item-text', value);\n }\n\n /\n Gets the item text attribute.\n * @returns {string} The value of the item text attribute or \"text\" if not set.\n /\n get itemText() {\n return this.getAttribute('item-text') \|\| 'text';\n }\n\n /\n Gets the lazy load size attribute.\n * @returns {number} The value of the lazy load size attribute or 10 if not set.\n /\n get lazyLoadSize() {\n return this.getAttribute('lazy-load-size') \|\| 10;\n }\n\n /\n Sets the lazy load size attribute.\n * @param {number} value The value to set for the lazy load size.\n /\n set lazyLoadSize(value) {\n this.setAttribute('lazy-load-size', value);\n }\n\n /\n Sets the search attribute.\n * @param {string} value The value to set for the search.\n /\n set search(value) {\n this.setAttribute('search', value);\n }\n\n /\n Gets the search attribute.\n * @returns {string} The value of the search attribute.\n /\n get search() {\n return this.getAttribute('search');\n }\n\n /\n Checks if the search attribute is present.\n * @returns {boolean} True if the search attribute is present, false otherwise.\n /\n get hasSearch() {\n return this.hasAttribute('search');\n }\n\n /\n Retrieves the value of the 'search-to-query-params' attribute from the current instance.\n * @returns {string \| null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.\n /\n get searchToQueryParams() {\n return this.getAttribute('search-to-query-params');\n }\n\n /\n Sets the value to define search-to-query params behavior.\n * @param {string} value The value to be set for the search-to-query-params attribute.\n /\n set searchToQueryParams(value) {\n this.setAttribute('search-to-query-params', value);\n }\n\n /\n Determines whether the 'search-to-query-params' attribute is present on the element.\n * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.\n /\n get hasSearchToQueryParams() {\n return this.hasAttribute('search-to-query-params');\n }\n\n /\n Sets the value of the search parameter name attribute.\n * @param {string} value The string value to set as the search parameter name.\n /\n set searchParamName(value) {\n this.setAttribute('search-param-name', value);\n }\n\n /\n Gets the search parameter name used in queries.\n * Retrieves the value of the 'search-param-name' attribute.\n * If the attribute is not set, it defaults to 'search'.\n * @returns {string} The search parameter name used for queries.\n /\n get searchParamName() {\n return this.getAttribute('search-param-name') \|\| 'search';\n }\n\n /\n Sets the queryParams attribute on the element.\n * @param {string} value The query parameters to set, represented as a string.\n /\n set queryParams(value) {\n this.setAttribute('query-params', value);\n }\n\n /\n Retrieves the value of the 'query-params' attribute.\n * @returns {string \| null} The value of the 'query-params' attribute, or null if the attribute is not set.\n /\n get queryParams() {\n return this.getAttribute('query-params');\n }\n\n /\n Checks if the lazy attribute is present.\n * @returns {boolean} True if the lazy attribute is present, false otherwise.\n /\n get lazy() {\n return this.hasAttribute('lazy');\n }\n\n /\n Sets the lazy attribute.\n * @param {boolean} value The value to set for the lazy attribute.\n /\n set lazy(value) {\n this.setAttribute('lazy', value);\n }\n\n /\n Gets the loaded options.\n * @returns {Array} The loaded options.\n /\n get options() {\n return this.loadedOptions?.flat();\n }\n\n /\n Gets the loaded options.\n * @type {Array}\n /\n get loadedOptions() {\n return this.#loadedOptions;\n }\n\n /\n Sets the loaded options.\n * @type {Array}\n /\n set loadedOptions(loadedOptions) {\n this.#loadedOptions = loadedOptions;\n }\n\n /\n Array of preloaded elements.\n * @type {Array}\n * @private\n /\n get drawPreloadedElements() {\n return this.#drawPreloadedElements;\n }\n\n set drawPreloadedElements(elements) {\n this.#drawPreloadedElements = elements;\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Prepares the component before drawing.\n * Fetches the pages and creates the options elements.\n /\n afterDraw() {\n // event.dispatchCustomEvent(this, 'wje-options:load', {}); // nepomohlo to, v ff stale je scroll hore\n }\n\n /\n Draws the component.\n * @returns {DocumentFragment}\n /\n async draw() {\n let fragment = document.createDocumentFragment();\n\n const slot = document.createElement('slot');\n fragment.appendChild(slot);\n\n if (this.hasAttribute('lazy')) {\n\n if (this.contains(this.infiniteScroll)) {\n this.drawPreloadedElements.forEach((el) => { el.remove() });\n this.loadedOptions = [];\n this.infiniteScroll.placementObj.innerHTML = '';\n this.infiniteScroll.totalPages = 0;\n this.infiniteScroll.refresh();\n\n return fragment;\n }\n\n const infiniteScroll = document.createElement('wje-infinite-scroll');\n infiniteScroll.setAttribute('placement', 'wje-list');\n infiniteScroll.setAttribute('height', this.dropdownHeight);\n infiniteScroll.setAttribute('object-name', this.optionArrayPath);\n\n const list = document.createElement('wje-list');\n infiniteScroll.append(list);\n\n infiniteScroll.dataToHtml = this.htmlItem;\n\n infiniteScroll.setCustomData = async (page, signal) => {\n let processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}`;\n\n if (this.hasSearchToQueryParams) {\n processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}${this.search ? `&${this.searchParamName}=${this.search}` : ''}`;\n }\n\n let res = await this.service.get(processedUrl, null, false, signal);\n const filteredOptions = this.filterOutDrawnOptions(res);\n this.loadedOptions.push(...this.processData(filteredOptions));\n\n return filteredOptions;\n };\n\n event.addListener(infiniteScroll, 'wje-infinite-scroll:load', null, (e) => {\n event.dispatchCustomEvent(this, 'wje-options:load', {});\n });\n\n if (this.hasAttribute('attached')) {\n this.appendChild(infiniteScroll);\n this.drawPreloadedElements.forEach((el) => {\n list.appendChild(el);\n })\n }\n\n this.infiniteScroll = infiniteScroll;\n\n } else {\n this.response = await this.getPages();\n let optionsData = this.filterOutDrawnOptions(this.response);\n optionsData = this.processData(optionsData);\n\n this.loadedOptions.push(...optionsData);\n\n this.append(...optionsData.map(this.htmlItem));\n }\n\n return fragment;\n }\n\n /\n Processes the given data and returns the options based on the option array path.\n * @param {any} data The data to be processed.\n * @returns {any} - The options based on the option array path.\n /\n processData(data) {\n const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n let options = data;\n\n splittedOptionArrayPath?.forEach((path) => {\n options = options[path];\n });\n\n return options ?? [];\n }\n\n /\n Filters out drawn options from the response.\n * @param {object \| null} response The response to filter.\n * @returns {object} The filtered response.\n /\n filterOutDrawnOptions(response) {\n const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n let filteredResponse = structuredClone(response);\n\n filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n return filteredResponse;\n }\n\n /\n Recursively updates the object based on the provided path to the property.\n * @param {object \| Array \| null} object\n * @param {Array<string> \| null} pathToProperty\n * @returns {object \| Array \| null}\n /\n recursiveUpdate = (object, pathToProperty) => {\n if (pathToProperty.length === 0) {\n if (Array.isArray(object)) {\n return object.filter(\n (option) =>\n !this.loadedOptions.some(\n (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n )\n );\n } else {\n console.error('Expected an array but got:', object, pathToProperty);\n return [];\n }\n }\n\n const [currentPath, ...remainingPath] = pathToProperty;\n if (remainingPath.length > 0) {\n object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n } else {\n object[currentPath] =\n object[currentPath]?.filter(\n (option) =>\n !this.loadedOptions.some(\n (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n )\n ) ?? [];\n }\n return object;\n };\n\n /\n Generates an HTML option element based on the provided item.\n * @param {object} item The item to generate the option element for.\n * @returns {HTMLElement} The generated option element.\n /\n htmlItem = (item) => {\n let option = document.createElement('wje-option');\n\n if (item[this.itemValue] === null \|\| item[this.itemValue] === undefined) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n }\n\n if (item[this.itemText] === null \|\| item[this.itemText] === undefined) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n }\n\n option.setAttribute('value', item[this.itemValue] ?? '');\n option.innerText = item[this.itemText] ?? '';\n\n return option;\n };\n\n /\n Fetches the pages from the provided URL.\n * @param {number} page The page number to fetch.\n * @returns {Promise<object>} The fetched data.\n * @throws Will throw an error if the response is not ok.\n /\n async getPages(page) {\n const response = await fetch(this.url);\n if (!response.ok) {\n throw new Error(`An error occurred: ${response.status}`);\n }\n return await response.json();\n }\n\n /\n Finds the selected option data based on the given selected option values.\n * @param {Array} selectedOptionValues The array of selected option values.\n * @returns {Array} - The array of option data that matches the selected option values.\n /\n findSelectedOptionData(selectedOptionValues = []) {\n return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n }\n\n /\n Adds an option to the element.\n * @param {object} optionData The data of the option to be added.\n /\n addOption(optionData) {\n if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n return;\n }\n\n const item = this.htmlItem(optionData);\n this.#drawPreloadedElements.push(item);\n this.prepend(item);\n this.loadedOptions.push(optionData);\n }\n\n /\n Adds options to the element.\n * @param {Array} optionsData The array of option data to be added.\n * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n */\n addOptions(optionsData = [], silent = false) {\n if (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n else this.addOption(optionsData, silent);\n }\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-options.js","sources":["../packages/wje-options/options.element.js","../packages/wje-options/options.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.element.js';\nimport List from '../wje-list/list.element.js';\nimport Option from '../wje-option/option.js';\n\n/*\n `Options` is a custom web component that represents a set of options.\n * It extends from `WJElement`.\n * @summary This element represents a set of options.\n * @documentation https://elements.webjet.sk/components/options\n * @status stable\n * @augments {WJElement}\n * // @fires wje-options:load - Event fired when the options are loaded.\n * @tag wje-options\n /\nexport default class Options extends WJElement {\n\t/\n\t Stores the loaded options.\n\t * @type {Array}\n\t * @private\n\t /\n\t#loadedOptions = [];\n\n\t#drawPreloadedElements = []\n\n\t/\n\t Creates an instance of Options.\n\t * @class\n\t /\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tdependencies = {\n\t\t'wje-option': Option,\n\t\t'wje-infinite-scroll': InfiniteScroll,\n\t\t'wje-list': List,\n\t};\n\n\tclassName = 'Options';\n\n\t/\n\t Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t /\n\tstatic get observedAttributes() {\n\t\treturn ['search', 'attached'];\n\t}\n\n\t/\n\t Sets the option array path attribute.\n\t * @param {string} value The value to set for the option array path.\n\t /\n\tset optionArrayPath(value) {\n\t\tthis.setAttribute('option-array-path', value);\n\t}\n\n\t/\n\t Gets the option array path attribute.\n\t * @returns {string} The value of the option array path attribute or \"data\" if not set.\n\t /\n\tget optionArrayPath() {\n\t\treturn this.getAttribute('option-array-path');\n\t}\n\n\t/\n\t Checks if the option array path attribute is present.\n\t * @returns {boolean} True if the option array path attribute is present, false otherwise.\n\t /\n\tget hasOptionArrayPath() {\n\t\treturn this.hasAttribute('option-array-path');\n\t}\n\n\t/\n\t Gets the dropdown height attribute.\n\t * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n\t /\n\tget dropdownHeight() {\n\t\treturn this.getAttribute('dropdown-height') \|\| '100%';\n\t}\n\n\t/\n\t Sets the dropdown height attribute.\n\t * @param {string} value The value to set for the dropdown height.\n\t /\n\tset dropdownHeight(value) {\n\t\tthis.setAttribute('dropdown-height', value);\n\t}\n\n\t/\n\t Sets the item value attribute.\n\t * @param {string} value The value to set for the item value.\n\t /\n\tset itemValue(value) {\n\t\tthis.setAttribute('item-value', value);\n\t}\n\n\t/\n\t Gets the item value attribute.\n\t * @returns {string} The value of the item value attribute or \"value\" if not set.\n\t /\n\tget itemValue() {\n\t\treturn this.getAttribute('item-value') \|\| 'value';\n\t}\n\n\t/\n\t Sets the item text attribute.\n\t * @param {string} value The value to set for the item text.\n\t /\n\tset itemText(value) {\n\t\tthis.setAttribute('item-text', value);\n\t}\n\n\t/\n\t Gets the item text attribute.\n\t * @returns {string} The value of the item text attribute or \"text\" if not set.\n\t /\n\tget itemText() {\n\t\treturn this.getAttribute('item-text') \|\| 'text';\n\t}\n\n\t/\n\t Gets the lazy load size attribute.\n\t * @returns {number} The value of the lazy load size attribute or 10 if not set.\n\t /\n\tget lazyLoadSize() {\n\t\treturn this.getAttribute('lazy-load-size') \|\| 10;\n\t}\n\n\t/\n\t Sets the lazy load size attribute.\n\t * @param {number} value The value to set for the lazy load size.\n\t /\n\tset lazyLoadSize(value) {\n\t\tthis.setAttribute('lazy-load-size', value);\n\t}\n\n\t/\n\t Sets the search attribute.\n\t * @param {string} value The value to set for the search.\n\t /\n\tset search(value) {\n\t\tthis.setAttribute('search', value);\n\t}\n\n\t/\n\t Gets the search attribute.\n\t * @returns {string} The value of the search attribute.\n\t /\n\tget search() {\n\t\treturn this.getAttribute('search');\n\t}\n\n\t/\n\t Checks if the search attribute is present.\n\t * @returns {boolean} True if the search attribute is present, false otherwise.\n\t /\n\tget hasSearch() {\n\t\treturn this.hasAttribute('search');\n\t}\n\n\t/\n\t Retrieves the value of the 'search-to-query-params' attribute from the current instance.\n\t * @returns {string \| null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.\n\t /\n\tget searchToQueryParams() {\n\t\treturn this.getAttribute('search-to-query-params');\n\t}\n\n\t/\n\t Sets the value to define search-to-query params behavior.\n\t * @param {string} value The value to be set for the search-to-query-params attribute.\n\t /\n\tset searchToQueryParams(value) {\n\t\tthis.setAttribute('search-to-query-params', value);\n\t}\n\n\t/\n\t Determines whether the 'search-to-query-params' attribute is present on the element.\n\t * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.\n\t /\n\tget hasSearchToQueryParams() {\n\t\treturn this.hasAttribute('search-to-query-params');\n\t}\n\n\t/\n\t Sets the value of the search parameter name attribute.\n\t * @param {string} value The string value to set as the search parameter name.\n\t /\n\tset searchParamName(value) {\n\t\tthis.setAttribute('search-param-name', value);\n\t}\n\n\t/\n\t Gets the search parameter name used in queries.\n\t * Retrieves the value of the 'search-param-name' attribute.\n\t * If the attribute is not set, it defaults to 'search'.\n\t * @returns {string} The search parameter name used for queries.\n\t /\n\tget searchParamName() {\n\t\treturn this.getAttribute('search-param-name') \|\| 'search';\n\t}\n\n\t/\n\t Sets the queryParams attribute on the element.\n\t * @param {string} value The query parameters to set, represented as a string.\n\t /\n\tset queryParams(value) {\n\t\tthis.setAttribute('query-params', value);\n\t}\n\n\t/\n\t Retrieves the value of the 'query-params' attribute.\n\t * @returns {string \| null} The value of the 'query-params' attribute, or null if the attribute is not set.\n\t /\n\tget queryParams() {\n\t\treturn this.getAttribute('query-params');\n\t}\n\n\t/\n\t Checks if the lazy attribute is present.\n\t * @returns {boolean} True if the lazy attribute is present, false otherwise.\n\t /\n\tget lazy() {\n\t\treturn this.hasAttribute('lazy');\n\t}\n\n\t/\n\t Sets the lazy attribute.\n\t * @param {boolean} value The value to set for the lazy attribute.\n\t /\n\tset lazy(value) {\n\t\tthis.setAttribute('lazy', value);\n\t}\n\n\t/\n\t Gets the loaded options.\n\t * @returns {Array} The loaded options.\n\t /\n\tget options() {\n\t\treturn this.loadedOptions?.flat();\n\t}\n\n\t/\n\t Gets the loaded options.\n\t * @type {Array}\n\t /\n\tget loadedOptions() {\n\t\treturn this.#loadedOptions;\n\t}\n\n\t/\n\t Sets the loaded options.\n\t * @type {Array}\n\t /\n\tset loadedOptions(loadedOptions) {\n\t\tthis.#loadedOptions = loadedOptions;\n\t}\n\n\t/\n\t Array of preloaded elements.\n\t * @type {Array}\n\t * @private\n\t /\n\tget drawPreloadedElements() {\n\t\treturn this.#drawPreloadedElements;\n\t}\n\n\tset drawPreloadedElements(elements) {\n\t\tthis.#drawPreloadedElements = elements;\n\t}\n\n\t/\n\t Sets up the attributes for the component.\n\t /\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/\n\t Prepares the component before drawing.\n\t * Fetches the pages and creates the options elements.\n\t /\n\tafterDraw() {\n\t\t// event.dispatchCustomEvent(this, 'wje-options:load', {}); // nepomohlo to, v ff stale je scroll hore\n\t}\n\n\t/\n\t Draws the component.\n\t * @returns {DocumentFragment}\n\t /\n\tasync draw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tconst slot = document.createElement('slot');\n\t\tfragment.appendChild(slot);\n\n\t\tif (this.hasAttribute('lazy')) {\n\n\t\t\tif (this.contains(this.infiniteScroll)) {\n\t\t\t\tthis.drawPreloadedElements.forEach((el) => { el.remove() });\n\t\t\t\tthis.loadedOptions = [];\n\t\t\t\tthis.infiniteScroll.placementObj.innerHTML = '';\n\t\t\t\tthis.infiniteScroll.totalPages = 0;\n\t\t\t\tthis.infiniteScroll.refresh();\n\n\t\t\t\treturn fragment;\n\t\t\t}\n\n\t\t\tconst infiniteScroll = document.createElement('wje-infinite-scroll');\n\t\t\tinfiniteScroll.setAttribute('placement', 'wje-list');\n\t\t\tinfiniteScroll.setAttribute('height', this.dropdownHeight);\n\t\t\tinfiniteScroll.setAttribute('object-name', this.optionArrayPath);\n\n\t\t\tconst list = document.createElement('wje-list');\n\t\t\tinfiniteScroll.append(list);\n\n\t\t\tinfiniteScroll.dataToHtml = this.htmlItem;\n\n\t\t\tinfiniteScroll.setCustomData = async (page, signal) => {\n\t\t\t\tlet processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}`;\n\n\t\t\t\tif (this.hasSearchToQueryParams) {\n\t\t\t\t\tprocessedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}${this.search ? `&${this.searchParamName}=${this.search}` : ''}`;\n\t\t\t\t}\n\n\t\t\t\tlet res = await this.service.get(processedUrl, null, false, signal);\n\t\t\t\tconst filteredOptions = this.filterOutDrawnOptions(res);\n\t\t\t\tthis.loadedOptions.push(...this.processData(filteredOptions));\n\n\t\t\t\treturn filteredOptions;\n\t\t\t};\n\n\t\t\tevent.addListener(infiniteScroll, 'wje-infinite-scroll:load', null, (e) => {\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-options:load', {});\n\t\t\t});\n\n\t\t\tif (this.hasAttribute('attached')) {\n\t\t\t\tthis.appendChild(infiniteScroll);\n\t\t\t\tthis.drawPreloadedElements.forEach((el) => {\n\t\t\t\t\tlist.appendChild(el);\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tthis.infiniteScroll = infiniteScroll;\n\n\t\t} else {\n\t\t\tthis.response = await this.getPages();\n\t\t\tlet optionsData = this.filterOutDrawnOptions(this.response);\n\t\t\toptionsData = this.processData(optionsData);\n\n\t\t\tthis.loadedOptions.push(...optionsData);\n\n\t\t\tthis.append(...optionsData.map(this.htmlItem));\n\n\t\t\tevent.dispatchCustomEvent(this, 'wje-options:load', {});\n\t\t}\n\n\t\treturn fragment;\n\t}\n\n\t/\n\t Processes the given data and returns the options based on the option array path.\n\t * @param {any} data The data to be processed.\n\t * @returns {any} - The options based on the option array path.\n\t /\n\tprocessData(data) {\n\t\tconst splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n\t\tlet options = data;\n\n\t\tsplittedOptionArrayPath?.forEach((path) => {\n\t\t\toptions = options[path];\n\t\t});\n\n\t\treturn options ?? [];\n\t}\n\n\t/\n\t Filters out drawn options from the response.\n\t * @param {object \| null} response The response to filter.\n\t * @returns {object} The filtered response.\n\t /\n\tfilterOutDrawnOptions(response) {\n\t\tconst splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n\t\tlet filteredResponse = structuredClone(response);\n\n\t\tfilteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n\t\treturn filteredResponse;\n\t}\n\n\t/\n\t Recursively updates the object based on the provided path to the property.\n\t * @param {object \| Array \| null} object\n\t * @param {Array<string> \| null} pathToProperty\n\t * @returns {object \| Array \| null}\n\t /\n\trecursiveUpdate = (object, pathToProperty) => {\n\t\tif (pathToProperty.length === 0) {\n\t\t\tif (Array.isArray(object)) {\n\t\t\t\treturn object.filter(\n\t\t\t\t\t(option) =>\n\t\t\t\t\t\t!this.loadedOptions.some(\n\t\t\t\t\t\t\t(loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n\t\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconsole.error('Expected an array but got:', object, pathToProperty);\n\t\t\t\treturn [];\n\t\t\t}\n\t\t}\n\n\t\tconst [currentPath, ...remainingPath] = pathToProperty;\n\t\tif (remainingPath.length > 0) {\n\t\t\tobject[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n\t\t} else {\n\t\t\tobject[currentPath] =\n\t\t\t\tobject[currentPath]?.filter(\n\t\t\t\t\t(option) =>\n\t\t\t\t\t\t!this.loadedOptions.some(\n\t\t\t\t\t\t\t(loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n\t\t\t\t\t\t)\n\t\t\t\t) ?? [];\n\t\t}\n\t\treturn object;\n\t};\n\n\t/\n\t Generates an HTML option element based on the provided item.\n\t * @param {object} item The item to generate the option element for.\n\t * @returns {HTMLElement} The generated option element.\n\t /\n\thtmlItem = (item) => {\n\t\tlet option = document.createElement('wje-option');\n\n\t\tif (item[this.itemValue] === null \|\| item[this.itemValue] === undefined) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n\t\t}\n\n\t\tif (item[this.itemText] === null \|\| item[this.itemText] === undefined) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n\t\t}\n\n\t\toption.setAttribute('value', item[this.itemValue] ?? '');\n\t\toption.innerText = item[this.itemText] ?? '';\n\n\t\treturn option;\n\t};\n\n\t/\n\t Fetches the pages from the provided URL.\n\t * @param {number} page The page number to fetch.\n\t * @returns {Promise<object>} The fetched data.\n\t * @throws Will throw an error if the response is not ok.\n\t /\n\tasync getPages(page) {\n\t\tconst response = await fetch(this.url);\n\t\tif (!response.ok) {\n\t\t\tthrow new Error(`An error occurred: ${response.status}`);\n\t\t}\n\t\treturn await response.json();\n\t}\n\n\t/\n\t Finds the selected option data based on the given selected option values.\n\t * @param {Array} selectedOptionValues The array of selected option values.\n\t * @returns {Array} - The array of option data that matches the selected option values.\n\t /\n\tfindSelectedOptionData(selectedOptionValues = []) {\n\t\treturn this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n\t}\n\n\t/\n\t Adds an option to the element.\n\t * @param {object} optionData The data of the option to be added.\n\t /\n\taddOption(optionData) {\n\t\tif (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst item = this.htmlItem(optionData);\n\t\tthis.#drawPreloadedElements.push(item);\n\t\tthis.prepend(item);\n\t\tthis.loadedOptions.push(optionData);\n\t}\n\n\t/\n\t Adds options to the element.\n\t * @param {Array} optionsData The array of option data to be added.\n\t * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n\t */\n\taddOptions(optionsData = [], silent = false) {\n\t\tif (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n\t\telse this.addOption(optionsData, silent);\n\t}\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":[],"mappings":"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"}

package/dist/wje-select.js CHANGED Viewed

@@ -53,7 +53,7 @@ class Select extends WJElement {
             option.removeAttribute("selected");
           }
         });
-        this.popup.hide();
+        this.popup.hide(false);
       } else {
         this.processClickedOption(e.target, true);
       }
@@ -274,6 +274,7 @@ class Select extends WJElement {
     wrapper.classList.add("wrapper");
     wrapper.setAttribute("slot", "anchor");
     let label = document.createElement("wje-label");
+    label.setAttribute("part", "label");
     label.innerText = this.label || "";
     let inputWrapper = document.createElement("div");
     inputWrapper.setAttribute("part", "input-wrapper");
@@ -312,6 +313,7 @@ class Select extends WJElement {
     popup.setAttribute("placement", "bottom-start");
     popup.setAttribute("manual", "");
     popup.setAttribute("size", "");
+    popup.setAttribute("part", "popup");
     if (this.hasAttribute("disabled")) popup.setAttribute("disabled", "");
     if (this.variant === "standard") {
       if (this.hasAttribute("label")) native.appendChild(label);
@@ -329,6 +331,7 @@ class Select extends WJElement {
       let find = document.createElement("wje-input");
       find.setAttribute("variant", "standard");
       find.setAttribute("placeholder", "Hľadať");
+      find.setAttribute("part", "find");
       find.classList.add("find");
       optionsWrapper.appendChild(find);
       this.findEl = find;
@@ -459,7 +462,7 @@ class Select extends WJElement {
         this.input.value = "";
       } else {
         if (option !== null) this.chips.appendChild(this.getChip(option));
-        if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {
+        if (this.counterEl instanceof HTMLElement || !this.maxOptions || length > +this.maxOptions) {
           this.counter();
         }
       }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-select.js","sources":["../packages/wje-select/select.element.js","../packages/wje-select/select.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport Popup from '../wje-popup/popup.js';\nimport Icon from '../wje-icon/icon.js';\nimport Label from '../wje-label/label.js';\nimport Chip from '../wje-chip/chip.js';\nimport Input from '../wje-input/input.js';\nimport Option from '../wje-option/option.js';\nimport Options from '../wje-options/options.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Select` is a custom web component that represents a select input.\n * @summary This element represents a select input.\n * @documentation https://elements.webjet.sk/components/select\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the select.\n * @slot anchor - The slot for the anchor.\n * @slot arrow - The slot for the arrow.\n * @csspart native - The native select wrapper.\n * @csspart input - The input field.\n * @csspart clear - The clear button.\n * @property {Array} _selected - An array to store selected items.\n * @property {HTMLElement\|null} counterEl - A reference to the counter element, initially null.\n * @property {ElementInternals} internals - The internal element API for managing state and attributes.\n * @property {boolean} _wasOppened - Tracks whether the select element was previously opened, initially false.\n * @cssproperty [--wje-select-border-width=1px] - Specifies the width of the border around the select component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`).\n * @cssproperty [--wje-select-border-style=solid] - Defines the style of the border for the select component. Accepts standard CSS border styles, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-select-border-color=var(--wje-border-color)] - Sets the color of the border for the select component. Accepts any valid CSS color value, including color variables, named colors, and hex values.\n * @cssproperty [--wje-select-options-border-width=1px] - Specifies the width of the border for the select options dropdown. Accepts any valid CSS length unit.\n * @cssproperty [--wje-select-options-border-style=var(--wje-border-style)] - Defines the border style for the select options dropdown. Inherits from a defined CSS variable for consistency.\n * @cssproperty [--wje-select-options-border-color=var(--wje-border-color)] - Sets the border color for the select options dropdown. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-background=var(--wje-background)] - Specifies the background color of the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-line-height=20px] - Defines the line height for the text within the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment.\n * @cssproperty [--wje-select-color=var(--wje-color)] - Sets the text color for the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-border-radius=var(--wje-border-radius-medium)] - Specifies the border radius for the select component.Determines the roundness of the corners and accepts any valid CSS length unit or variable.\n * @tag wje-select\n /\n\nexport default class Select extends WJElement {\n /\n Constructor for the Select class.\n * @class\n * @description Initializes the Select component.\n * This constructor sets up the initial state of the component, including selected items, counter element, and internal element API.\n * It also tracks whether the select element was previously opened.\n * @class\n * @augments {WJElement}\n * @memberof Select\n /\n constructor() {\n super();\n\n /\n @type {Array}\n * @description An array to store selected items.\n /\n this._selected = [];\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the counter element, initially null.\n * @private\n /\n this.counterEl = null;\n\n /\n @type {ElementInternals}\n * @description The internal element API for managing state and attributes.\n * @private\n * @readonly\n * @constant\n * @default {ElementInternals} this.attachInternals()\n * @description Attaches the internals to the element.\n /\n this.internals = this.attachInternals();\n\n /\n @type {boolean}\n * @description Tracks whether the select element was previously opened, initially false.\n * @private\n * @default {boolean} false\n /\n this._wasOppened = false;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the native select element, initially null.\n /\n this.native = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the popup element, initially null.\n /\n this.popup = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the label element, initially null.\n /\n this.labelElement = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the slot start element, initially null.\n /\n this.slotStart = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the slot end element, initially null.\n /\n this.slotEnd = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the input element, initially null.\n /\n this.input = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the options wrapper element, initially null.\n /\n this.optionsWrapper = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the chips element, initially null.\n /\n this.chips = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the clear button element, initially null.\n /\n this.clear = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the list element, initially null.\n /\n this.list = null;\n\n this.selectedOptions = []\n }\n\n dependencies = {\n 'wje-button': Button,\n 'wje-popup': Popup,\n 'wje-icon': Icon,\n 'wje-label': Label,\n 'wje-chip': Chip,\n 'wje-input': Input,\n 'wje-option': Option,\n 'wje-options': Options,\n };\n\n /\n Setter for the value attribute.\n * @param {string} value The value to set.\n /\n set value(value) {\n if (this.hasAttribute('multiple')) {\n const formData = new FormData();\n value.forEach(v => formData.append(this.name, v));\n this.internals.setFormValue(formData);\n } else {\n this.internals.setFormValue(value);\n }\n }\n\n /\n Getter for the value attribute.\n * @returns {string} The value of the attribute.\n /\n get value() {\n return this.selected;\n }\n\n /\n Getter for the customErrorDisplay attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get customErrorDisplay() {\n return this.hasAttribute('custom-error-display');\n }\n\n /\n Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n /\n Getter for the invalid attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get invalid() {\n return this.hasAttribute('invalid');\n }\n\n /\n Setter for the invalid attribute.\n * @param {boolean} isInvalid Whether the input is invalid.\n /\n set invalid(isInvalid) {\n if (isInvalid) this.setAttribute('invalid', '');\n else this.removeAttribute('invalid');\n }\n\n /\n Getter for the form attribute.\n * @returns {HTMLFormElement} The form the input is associated with.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n Getter for the name attribute.\n * @returns {string} The name of the input.\n /\n get name() {\n return this.getAttribute('name');\n }\n\n /\n Getter for the type attribute.\n * @returns {string} The type of the input.\n /\n get type() {\n return this.localName;\n }\n\n /\n Getter for the validity attribute.\n * @returns {ValidityState} The validity state of the input.\n /\n get validity() {\n return this.internals.validity;\n }\n\n /\n Getter for the validationMessage attribute.\n * @returns {string} The validation message of the input.\n /\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /\n Getter for the willValidate attribute.\n * @returns {boolean} Whether the input will be validated.\n /\n get willValidate() {\n return this.internals.willValidate;\n }\n\n /\n @summary Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n /\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /\n @summary Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n /\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /\n Sets the label value.\n * @param {Array} value The selected value to set.\n /\n set selected(value) {\n this._selected = value;\n }\n\n /\n Returns the selected value.\n * @returns {Array} The selected value.\n /\n get selected() {\n return this.getSelected();\n }\n\n /\n Sets the trigger value.\n * @param {string} value The trigger value to set.\n /\n set trigger(value) {\n this.setAttribute('trigger', value);\n }\n\n /\n Returns the trigger value.\n * @returns {string} The trigger value.\n /\n get trigger() {\n return this.getAttribute('trigger') \|\| 'click';\n }\n\n className = 'Select';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return ['active', 'value', 'disabled', 'multiple', 'label', 'placeholder', 'max-height', 'max-options', 'variant', 'placement'];\n }\n\n /\n Whether the input is associated with a form.\n * @type {boolean}\n /\n static formAssociated = true;\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draws the component for the select.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('wje-placement', this.placement ? 'wje-' + this.placement : 'wje-start');\n\n // zakladny obalovac\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-select', this.variant \|\| 'default');\n\n // wrapper pre label a inputWrapper\n let wrapper = document.createElement('div');\n wrapper.classList.add('wrapper');\n wrapper.setAttribute('slot', 'anchor');\n\n // label\n let label = document.createElement('wje-label');\n label.innerText = this.label \|\| '';\n\n // obalovac pre input\n let inputWrapper = document.createElement('div');\n inputWrapper.setAttribute('part', 'input-wrapper');\n inputWrapper.classList.add('input-wrapper');\n\n let slotStart = document.createElement('div');\n slotStart.classList.add('slot-start');\n\n let input = document.createElement('input');\n input.setAttribute('type', 'text');\n input.setAttribute('part', 'input');\n input.setAttribute('autocomplete', 'off');\n input.setAttribute('readonly', '');\n input.setAttribute('placeholder', this.placeholder \|\| '');\n\n let slotEnd = document.createElement('div');\n slotEnd.classList.add('slot-end');\n\n let arrow = document.createElement('wje-icon');\n arrow.setAttribute('name', 'chevron-down');\n arrow.setAttribute('slot', 'arrow');\n\n let chips = document.createElement('div');\n chips.classList.add('chips');\n chips.innerText = this.placeholder \|\| '';\n\n // obalovac pre option a find\n let optionsWrapper = document.createElement('div');\n optionsWrapper.setAttribute('part', 'options-wrapper');\n optionsWrapper.classList.add('options-wrapper');\n optionsWrapper.style.setProperty('height', this.maxHeight \|\| 'auto');\n\n let list = document.createElement('div');\n list.classList.add('list');\n\n let slot = document.createElement('slot');\n\n let clear = document.createElement('wje-button');\n clear.setAttribute('fill', 'link');\n clear.setAttribute('part', 'clear');\n clear.setAttribute('stop-propagation', '');\n\n let clearIcon = document.createElement('wje-icon');\n clearIcon.setAttribute('name', 'x');\n\n clear.appendChild(clearIcon);\n\n // vytvorime popup\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', 'bottom-start');\n popup.setAttribute('manual', '');\n popup.setAttribute('size', '');\n\n if (this.hasAttribute('disabled')) popup.setAttribute('disabled', '');\n\n if (this.variant === 'standard') {\n if (this.hasAttribute('label')) native.appendChild(label);\n } else {\n wrapper.appendChild(label);\n }\n\n inputWrapper.appendChild(slotStart);\n inputWrapper.appendChild(input);\n if (this.hasAttribute('multiple')) inputWrapper.appendChild(chips);\n\n if (this.hasAttribute('clearable')) inputWrapper.appendChild(clear);\n\n inputWrapper.appendChild(slotEnd);\n inputWrapper.appendChild(arrow);\n\n list.appendChild(slot);\n\n if (this.hasAttribute('find')) {\n let find = document.createElement('wje-input');\n find.setAttribute('variant', 'standard');\n find.setAttribute('placeholder', 'Hľadať');\n find.classList.add('find');\n\n optionsWrapper.appendChild(find);\n\n this.findEl = find;\n }\n\n if (this.hasAttribute('lazy')) {\n event.addListener(popup, 'wje-popup:show', null, (e) => {\n if (this._wasOppened) return;\n this._wasOppened = true;\n\n const optionsElement = this.querySelector('wje-options');\n optionsElement.setAttribute('lazy', '');\n optionsElement.setAttribute('attached', '');\n });\n } else {\n const optionsElement = this.querySelector('wje-options');\n optionsElement?.setAttribute('attached', '');\n }\n\n optionsWrapper.appendChild(list);\n\n wrapper.appendChild(inputWrapper);\n popup.appendChild(optionsWrapper);\n popup.appendChild(wrapper);\n\n if (this.trigger === 'click') popup.setAttribute('manual', '');\n\n native.appendChild(popup);\n\n this.native = native;\n this.popup = popup;\n this.labelElement = label;\n this.slotStart = slotStart;\n this.slotEnd = slotEnd;\n this.input = input;\n this.optionsWrapper = optionsWrapper;\n this.chips = chips;\n this.clear = clear;\n this.list = list;\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Sets up the event listeners after the component is drawn.\n /\n afterDraw() {\n this.input.addEventListener('focus', (e) => {\n this.labelElement?.classList.add('fade');\n this.native.classList.add('focused');\n });\n\n this.input.addEventListener('blur', (e) => {\n this.native.classList.remove('focused');\n if (!e.target.value) this.labelElement?.classList.remove('fade');\n });\n\n this.addEventListener('wje-option:change', this.optionChange);\n\n this.clear?.addEventListener('wje-button:click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.selectedOptions = [];\n\n this.getAllOptions().forEach((option) => {\n option.selected = false;\n option.removeAttribute('selected');\n });\n this.selections();\n\n e.stopPropagation();\n });\n\n this.selectedOptions = this.getSelectedOptions();\n this.selections(true);\n\n this.list.addEventListener('wje-options:load', (e) => {\n // todo select options from this.selectedOptions\n this.selectedOptions.forEach((option) => {\n this.getAllOptions().forEach((el) => {\n if (el.value === option.value) {\n el.selected = true;\n el.setAttribute('selected', '');\n }\n });\n })\n\n this.list.scrollTo(0, 0);\n });\n\n // skontrolujeme ci ma select atribut find\n if (this.hasAttribute('find') && this.findEl instanceof HTMLElement) {\n event.addListener(this.findEl, 'keyup', '', (e) => {\n // contains wj-options element with options\n const optionsElement = this.querySelector('wje-options');\n if (optionsElement && optionsElement.hasAttribute('lazy')) {\n // pass search value to wj-options element and infinite scroll will handle the rest\n optionsElement.setAttribute('search', e.target.value);\n } else {\n let value = e.target.value.trim().toLowerCase();\n\n this.getAllOptions().forEach((option) => {\n if (option.textContent.trim().toLowerCase().includes(value)) option.style.display = 'block';\n else option.style.display = 'none';\n });\n }\n });\n }\n }\n\n /\n Handles the option change event.\n * @param {Event} e The event.\n /\n optionChange = (e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n\n let allOptions = this.getAllOptions();\n\n if (!this.hasAttribute('multiple')) {\n allOptions.forEach((option) => {\n if (option.value === e.target.value) {\n this.processClickedOption(option);\n\n } else {\n option.selected = false;\n option.removeAttribute('selected');\n }\n });\n this.popup.hide();\n } else {\n this.processClickedOption(e.target, true);\n }\n\n this.selections();\n };\n\n processClickedOption = (option, multiple = false) => {\n const isSelected = option.hasAttribute(\"selected\")\n option.selected = !isSelected;\n\n if (isSelected) {\n option.removeAttribute('selected');\n this.filterOutOption(option);\n } else {\n option.setAttribute('selected', '');\n this.selectedOptions = multiple ? [...this.selectedOptions, option] : [option];\n }\n }\n\n filterOutOption = (option) => {\n this.selectedOptions = this.selectedOptions.filter((sOption) => {\n return sOption.value !== option.value;\n });\n }\n\n /\n Returns all the options as HTML.\n * @returns {NodeList} The options as HTML.\n /\n getAllOptions() {\n return this.querySelectorAll('wje-option');\n }\n\n /\n Returns the selected options as HTML.\n * @returns {NodeList} The selected options as HTML.\n /\n getSelectedOptions() {\n return Array.from(this.querySelectorAll('wje-option[selected]'));\n }\n\n /\n Returns the selected options.\n * @returns {Array} The selected options.\n /\n getSelected() {\n return this.selectedOptions.map((option) => {\n return {\n value: option.value,\n text: option.textContent.trim(),\n };\n });\n }\n\n /\n Handles the selection change.\n * @param {Element} option The option that changed.\n * @param {number} length The length of the selected options.\n /\n selectionChanged(option = null, length = 0) {\n if (this.hasAttribute('multiple')) {\n this.value = this.selectedOptions.map((el) => el.value).reverse();\n\n if (this.placeholder && length === 0) {\n this.chips.innerHTML = this.placeholder;\n this.input.value = '';\n } else {\n if (option !== null) this.chips.appendChild(this.getChip(option));\n if (this.counterEl instanceof HTMLElement \|\| length > +this.maxOptions) {\n this.counter();\n }\n }\n } else {\n let value = option?.textContent.trim() \|\| '';\n this.value = this.selectedOptions?.map((el) => el.value)?.at(0);\n this.input.value = value;\n\n if (option && option instanceof HTMLElement) {\n this.slotStart.innerHTML = '';\n\n if (option?.querySelector('[slot=start]')) {\n this.slotStart.appendChild(option?.querySelector('[slot=start]').cloneNode(true));\n }\n\n this.slotEnd.innerHTML = '';\n\n if (option?.querySelector('[slot=end]')) {\n this.slotEnd.appendChild(option?.querySelector('[slot=end]').cloneNode(true));\n }\n }\n }\n }\n\n /\n Updates the selected options and their corresponding chips.\n * @param {boolean} [silence] Determines whether to suppress the \"wje-select:change\" event.\n * @returns {void}\n * @description\n * This method fetches the currently selected options and updates the `selectedOptions` array.\n * It clears and rebuilds the chips representing the selected items in the UI.\n * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.\n * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.\n * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.\n * @example\n * // Call the method and allow event dispatch\n * selections();\n * @example\n * // Call the method without dispatching the event\n * selections(true);\n /\n selections(silence = false) {\n if (this.selectedOptions.length >= +this.maxOptions) {\n this.counterEl = null;\n }\n\n if (this.chips) {\n this.chips.innerHTML = '';\n }\n\n if (this.selectedOptions.length > 0) {\n this.selectionChanged(this.selectedOptions.at(0), this.selectedOptions.length);\n\n } else {\n this.selectionChanged();\n }\n\n if (silence) return;\n event.dispatchCustomEvent(this, 'wje-select:change');\n }\n\n /\n Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.\n * - If the number of selected items equals the maximum allowed, the counter element is removed.\n * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.\n /\n counter() {\n // zmazanie counter (span)\n if (this.counterEl && this.value.length === +this.maxOptions) {\n this.counterEl.remove();\n this.counterEl = null;\n return;\n }\n\n // ak counter nie je, tak ho vytvorime\n if (!this.counterEl) {\n this.counterEl = document.createElement('span');\n this.counterEl.classList.add('counter');\n\n this.chips.appendChild(this.counterEl);\n }\n\n // nastavime hodnotu counter\n this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;\n }\n\n /\n Returns a chip element.\n * @param {Element} option The option to get the chip for.\n * @returns {Element} The chip element.\n /\n getChip(option) {\n let chip = document.createElement('wje-chip');\n chip.setAttribute('removable', '');\n chip.addEventListener('wje:chip-remove', this.removeChip);\n chip.option = option;\n\n let label = document.createElement('wje-label');\n label.innerText = option.textContent.trim();\n\n chip.appendChild(label);\n\n return chip;\n }\n\n /\n Handles the chip remove event.\n * @param {Event} e The event.\n /\n removeChip = (e) => {\n e.target.parentNode.removeChild(e.target);\n this.processClickedOption(e.target.option, true);\n this.selections();\n };\n\n /\n Generates an HTML option element based on the provided item and mapping.\n * @param {object} item The item to generate the option for.\n * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.\n * @param {string} [map.value] The property of the item to use for the option's value.\n * @param {string} [map.text] The property of the item to use for the option's text.\n * @returns {HTMLElement} The generated HTML option element.\n /\n htmlOption(item, map = { value: 'value', text: 'text' }) {\n let option = document.createElement('wje-option');\n\n if (item[map.value] === null) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);\n }\n\n if (item[map.text] === null) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);\n }\n\n option.setAttribute('value', item[map.value] ?? '');\n option.innerText = item[map.text] ?? '';\n return option;\n }\n\n /\n Adds an option to the select element.\n * @param {any} optionData The data for the option to be added.\n * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.\n * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.\n /\n addOption(optionData, silent = false, map = { value: 'value', text: 'text' }) {\n if (!optionData) return;\n\n const optionsElement = this.querySelector('wje-options');\n if (optionsElement) {\n optionsElement.addOption(optionData, silent, map);\n return;\n }\n\n let option = this.htmlOption(optionData, map);\n this.appendChild(option);\n }\n\n /\n Adds options to the select element.\n * @param {Array \| object} optionsData The options data to be added. Can be an array of objects or a single object.\n * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.\n * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: \"value\", text: \"text\" }.\n /\n addOptions(optionsData, silent = false, map = { value: 'value', text: 'text' }) {\n if (!Array.isArray(optionsData)) {\n this.addOption(optionsData, silent, map);\n } else {\n const optionsElement = this.querySelector('wje-options');\n if (optionsElement) {\n optionsElement.addOptions(optionsData, silent, map);\n return;\n }\n\n optionsData.forEach((item) => {\n this.addOption(item, silent, map);\n });\n }\n }\n\n /\n Selects an option with the specified value.\n * @param {string} value The value of the option to be selected.\n * @param {boolean} [silent] Whether to suppress firing events.\n /\n selectOption(value, silent = false) {\n if (!value) return;\n\n let option = this.querySelector(`wje-option[value=\"${value}\"]`);\n\n if (option) {\n this.processClickedOption(option, this.hasAttribute('multiple'));\n }\n\n if (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);\n }\n\n /\n Selects one or multiple options in the select element.\n * @param {Array\|any} values The value(s) of the option(s) to be selected.\n * @param {boolean} [silent] Whether to trigger the change event or not.\n /\n selectOptions(values, silent = false) {\n if (!Array.isArray(values)) {\n this.selectOption(values, silent);\n } else {\n values.forEach((value) => {\n this.selectOption(value, silent);\n });\n }\n }\n\n /\n @summary Callback function that is called when the custom element is associated with a form.\n * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n /\n formAssociatedCallback(form) {\n if (form) {\n this.internals.setFormValue(this.value);\n }\n }\n\n /\n The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n * This method is responsible for resetting the value of the custom input element to its default value.\n * It also resets the form value and validity state in the form internals.\n * @function\n /\n formResetCallback() {\n // Set the value of the custom input element to its default value\n this.value = this.defaultValue;\n // Reset the form value in the form internals to the default value\n this.internals.setFormValue(this.defaultValue);\n // Reset the validity state in the form internals\n this.internals.setValidity({});\n }\n\n /\n The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n * This method is responsible for restoring the value of the custom input element to its saved state.\n * It also restores the form value and validity state in the form internals to their saved states.\n * @param {object} state The saved state of the custom input element.\n * @function\n /\n formStateRestoreCallback(state) {\n // Set the value of the custom input element to its saved value\n this.value = state.value;\n // Restore the form value in the form internals to the saved value\n this.internals.setFormValue(state.value);\n // Restore the validity state in the form internals to the saved state\n this.internals.setValidity({});\n }\n\n /\n The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n * This method is responsible for saving the value of the custom input element.\n * @returns {object} The saved state of the custom input element.\n * @function\n /\n formStateSaveCallback() {\n return {\n value: this.value,\n };\n }\n\n /\n The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n * This method is not implemented yet.\n * @param {boolean} disabled The new disabled state of the custom input element.\n * @function\n */\n formDisabledCallback(disabled) {\n console.warn('formDisabledCallback not implemented yet');\n this.native?.classList.toggle('disabled', disabled);\n this.toggleAttribute('disabled', disabled);\n }\n}\n","import Select from './select.element.js';\n\nexport default Select;\n\nSelect.define('wje-select', Select);\n"],"names":["_a"],"mappings":"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"}
1	+ {"version":3,"file":"wje-select.js","sources":["../packages/wje-select/select.element.js","../packages/wje-select/select.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport Popup from '../wje-popup/popup.js';\nimport Icon from '../wje-icon/icon.js';\nimport Label from '../wje-label/label.js';\nimport Chip from '../wje-chip/chip.js';\nimport Input from '../wje-input/input.js';\nimport Option from '../wje-option/option.js';\nimport Options from '../wje-options/options.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Select` is a custom web component that represents a select input.\n * @summary This element represents a select input.\n * @documentation https://elements.webjet.sk/components/select\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the select.\n * @slot anchor - The slot for the anchor.\n * @slot arrow - The slot for the arrow.\n * @csspart native - The native select wrapper.\n * @csspart input - The input field.\n * @csspart clear - The clear button.\n * @property {Array} _selected - An array to store selected items.\n * @property {HTMLElement\|null} counterEl - A reference to the counter element, initially null.\n * @property {ElementInternals} internals - The internal element API for managing state and attributes.\n * @property {boolean} _wasOppened - Tracks whether the select element was previously opened, initially false.\n * @cssproperty [--wje-select-border-width=1px] - Specifies the width of the border around the select component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`).\n * @cssproperty [--wje-select-border-style=solid] - Defines the style of the border for the select component. Accepts standard CSS border styles, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-select-border-color=var(--wje-border-color)] - Sets the color of the border for the select component. Accepts any valid CSS color value, including color variables, named colors, and hex values.\n * @cssproperty [--wje-select-options-border-width=1px] - Specifies the width of the border for the select options dropdown. Accepts any valid CSS length unit.\n * @cssproperty [--wje-select-options-border-style=var(--wje-border-style)] - Defines the border style for the select options dropdown. Inherits from a defined CSS variable for consistency.\n * @cssproperty [--wje-select-options-border-color=var(--wje-border-color)] - Sets the border color for the select options dropdown. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-background=var(--wje-background)] - Specifies the background color of the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-line-height=20px] - Defines the line height for the text within the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment.\n * @cssproperty [--wje-select-color=var(--wje-color)] - Sets the text color for the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-border-radius=var(--wje-border-radius-medium)] - Specifies the border radius for the select component.Determines the roundness of the corners and accepts any valid CSS length unit or variable.\n * @tag wje-select\n /\n\nexport default class Select extends WJElement {\n /\n Constructor for the Select class.\n * @class\n * @description Initializes the Select component.\n * This constructor sets up the initial state of the component, including selected items, counter element, and internal element API.\n * It also tracks whether the select element was previously opened.\n * @class\n * @augments {WJElement}\n * @memberof Select\n /\n constructor() {\n super();\n\n /\n @type {Array}\n * @description An array to store selected items.\n /\n this._selected = [];\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the counter element, initially null.\n * @private\n /\n this.counterEl = null;\n\n /\n @type {ElementInternals}\n * @description The internal element API for managing state and attributes.\n * @private\n * @readonly\n * @constant\n * @default {ElementInternals} this.attachInternals()\n * @description Attaches the internals to the element.\n /\n this.internals = this.attachInternals();\n\n /\n @type {boolean}\n * @description Tracks whether the select element was previously opened, initially false.\n * @private\n * @default {boolean} false\n /\n this._wasOppened = false;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the native select element, initially null.\n /\n this.native = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the popup element, initially null.\n /\n this.popup = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the label element, initially null.\n /\n this.labelElement = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the slot start element, initially null.\n /\n this.slotStart = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the slot end element, initially null.\n /\n this.slotEnd = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the input element, initially null.\n /\n this.input = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the options wrapper element, initially null.\n /\n this.optionsWrapper = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the chips element, initially null.\n /\n this.chips = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the clear button element, initially null.\n /\n this.clear = null;\n\n /\n @type {HTMLElement\|null}\n * @description A reference to the list element, initially null.\n /\n this.list = null;\n\n this.selectedOptions = []\n }\n\n dependencies = {\n 'wje-button': Button,\n 'wje-popup': Popup,\n 'wje-icon': Icon,\n 'wje-label': Label,\n 'wje-chip': Chip,\n 'wje-input': Input,\n 'wje-option': Option,\n 'wje-options': Options,\n };\n\n /\n Setter for the value attribute.\n * @param {string} value The value to set.\n /\n set value(value) {\n if (this.hasAttribute('multiple')) {\n const formData = new FormData();\n value.forEach(v => formData.append(this.name, v));\n this.internals.setFormValue(formData);\n } else {\n this.internals.setFormValue(value);\n }\n }\n\n /\n Getter for the value attribute.\n * @returns {string} The value of the attribute.\n /\n get value() {\n return this.selected;\n }\n\n /\n Getter for the customErrorDisplay attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get customErrorDisplay() {\n return this.hasAttribute('custom-error-display');\n }\n\n /\n Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n /\n Getter for the invalid attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get invalid() {\n return this.hasAttribute('invalid');\n }\n\n /\n Setter for the invalid attribute.\n * @param {boolean} isInvalid Whether the input is invalid.\n /\n set invalid(isInvalid) {\n if (isInvalid) this.setAttribute('invalid', '');\n else this.removeAttribute('invalid');\n }\n\n /\n Getter for the form attribute.\n * @returns {HTMLFormElement} The form the input is associated with.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n Getter for the name attribute.\n * @returns {string} The name of the input.\n /\n get name() {\n return this.getAttribute('name');\n }\n\n /\n Getter for the type attribute.\n * @returns {string} The type of the input.\n /\n get type() {\n return this.localName;\n }\n\n /\n Getter for the validity attribute.\n * @returns {ValidityState} The validity state of the input.\n /\n get validity() {\n return this.internals.validity;\n }\n\n /\n Getter for the validationMessage attribute.\n * @returns {string} The validation message of the input.\n /\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /\n Getter for the willValidate attribute.\n * @returns {boolean} Whether the input will be validated.\n /\n get willValidate() {\n return this.internals.willValidate;\n }\n\n /\n @summary Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n /\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /\n @summary Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n /\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /\n Sets the label value.\n * @param {Array} value The selected value to set.\n /\n set selected(value) {\n this._selected = value;\n }\n\n /\n Returns the selected value.\n * @returns {Array} The selected value.\n /\n get selected() {\n return this.getSelected();\n }\n\n /\n Sets the trigger value.\n * @param {string} value The trigger value to set.\n /\n set trigger(value) {\n this.setAttribute('trigger', value);\n }\n\n /\n Returns the trigger value.\n * @returns {string} The trigger value.\n /\n get trigger() {\n return this.getAttribute('trigger') \|\| 'click';\n }\n\n className = 'Select';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return ['active', 'value', 'disabled', 'multiple', 'label', 'placeholder', 'max-height', 'max-options', 'variant', 'placement'];\n }\n\n /\n Whether the input is associated with a form.\n * @type {boolean}\n /\n static formAssociated = true;\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draws the component for the select.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('wje-placement', this.placement ? 'wje-' + this.placement : 'wje-start');\n\n // zakladny obalovac\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-select', this.variant \|\| 'default');\n\n // wrapper pre label a inputWrapper\n let wrapper = document.createElement('div');\n wrapper.classList.add('wrapper');\n wrapper.setAttribute('slot', 'anchor');\n\n // label\n let label = document.createElement('wje-label');\n label.setAttribute('part', 'label');\n label.innerText = this.label \|\| '';\n\n // obalovac pre input\n let inputWrapper = document.createElement('div');\n inputWrapper.setAttribute('part', 'input-wrapper');\n inputWrapper.classList.add('input-wrapper');\n\n let slotStart = document.createElement('div');\n slotStart.classList.add('slot-start');\n\n let input = document.createElement('input');\n input.setAttribute('type', 'text');\n input.setAttribute('part', 'input');\n input.setAttribute('autocomplete', 'off');\n input.setAttribute('readonly', '');\n input.setAttribute('placeholder', this.placeholder \|\| '');\n\n let slotEnd = document.createElement('div');\n slotEnd.classList.add('slot-end');\n\n let arrow = document.createElement('wje-icon');\n arrow.setAttribute('name', 'chevron-down');\n arrow.setAttribute('slot', 'arrow');\n\n let chips = document.createElement('div');\n chips.classList.add('chips');\n chips.innerText = this.placeholder \|\| '';\n\n // obalovac pre option a find\n let optionsWrapper = document.createElement('div');\n optionsWrapper.setAttribute('part', 'options-wrapper');\n optionsWrapper.classList.add('options-wrapper');\n optionsWrapper.style.setProperty('height', this.maxHeight \|\| 'auto');\n\n let list = document.createElement('div');\n list.classList.add('list');\n\n let slot = document.createElement('slot');\n\n let clear = document.createElement('wje-button');\n clear.setAttribute('fill', 'link');\n clear.setAttribute('part', 'clear');\n clear.setAttribute('stop-propagation', '');\n\n let clearIcon = document.createElement('wje-icon');\n clearIcon.setAttribute('name', 'x');\n\n clear.appendChild(clearIcon);\n\n // vytvorime popup\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', 'bottom-start');\n popup.setAttribute('manual', '');\n popup.setAttribute('size', '');\n popup.setAttribute('part', 'popup');\n\n if (this.hasAttribute('disabled')) popup.setAttribute('disabled', '');\n\n if (this.variant === 'standard') {\n if (this.hasAttribute('label')) native.appendChild(label);\n } else {\n wrapper.appendChild(label);\n }\n\n inputWrapper.appendChild(slotStart);\n inputWrapper.appendChild(input);\n if (this.hasAttribute('multiple')) inputWrapper.appendChild(chips);\n\n if (this.hasAttribute('clearable')) inputWrapper.appendChild(clear);\n\n inputWrapper.appendChild(slotEnd);\n inputWrapper.appendChild(arrow);\n\n list.appendChild(slot);\n\n if (this.hasAttribute('find')) {\n let find = document.createElement('wje-input');\n find.setAttribute('variant', 'standard');\n find.setAttribute('placeholder', 'Hľadať');\n find.setAttribute('part', 'find');\n find.classList.add('find');\n\n optionsWrapper.appendChild(find);\n\n this.findEl = find;\n }\n\n if (this.hasAttribute('lazy')) {\n event.addListener(popup, 'wje-popup:show', null, (e) => {\n if (this._wasOppened) return;\n this._wasOppened = true;\n\n const optionsElement = this.querySelector('wje-options');\n optionsElement.setAttribute('lazy', '');\n optionsElement.setAttribute('attached', '');\n });\n } else {\n const optionsElement = this.querySelector('wje-options');\n optionsElement?.setAttribute('attached', '');\n }\n\n optionsWrapper.appendChild(list);\n\n wrapper.appendChild(inputWrapper);\n popup.appendChild(optionsWrapper);\n popup.appendChild(wrapper);\n\n if (this.trigger === 'click') popup.setAttribute('manual', '');\n\n native.appendChild(popup);\n\n this.native = native;\n this.popup = popup;\n this.labelElement = label;\n this.slotStart = slotStart;\n this.slotEnd = slotEnd;\n this.input = input;\n this.optionsWrapper = optionsWrapper;\n this.chips = chips;\n this.clear = clear;\n this.list = list;\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Sets up the event listeners after the component is drawn.\n /\n afterDraw() {\n this.input.addEventListener('focus', (e) => {\n this.labelElement?.classList.add('fade');\n this.native.classList.add('focused');\n });\n\n this.input.addEventListener('blur', (e) => {\n this.native.classList.remove('focused');\n if (!e.target.value) this.labelElement?.classList.remove('fade');\n });\n\n this.addEventListener('wje-option:change', this.optionChange);\n\n this.clear?.addEventListener('wje-button:click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.selectedOptions = [];\n\n this.getAllOptions().forEach((option) => {\n option.selected = false;\n option.removeAttribute('selected');\n });\n this.selections();\n\n e.stopPropagation();\n });\n\n this.selectedOptions = this.getSelectedOptions();\n this.selections(true);\n\n this.list.addEventListener('wje-options:load', (e) => {\n // todo select options from this.selectedOptions\n this.selectedOptions.forEach((option) => {\n this.getAllOptions().forEach((el) => {\n if (el.value === option.value) {\n el.selected = true;\n el.setAttribute('selected', '');\n }\n });\n })\n\n this.list.scrollTo(0, 0);\n });\n\n // skontrolujeme ci ma select atribut find\n if (this.hasAttribute('find') && this.findEl instanceof HTMLElement) {\n event.addListener(this.findEl, 'keyup', '', (e) => {\n // contains wj-options element with options\n const optionsElement = this.querySelector('wje-options');\n if (optionsElement && optionsElement.hasAttribute('lazy')) {\n // pass search value to wj-options element and infinite scroll will handle the rest\n optionsElement.setAttribute('search', e.target.value);\n } else {\n let value = e.target.value.trim().toLowerCase();\n\n this.getAllOptions().forEach((option) => {\n if (option.textContent.trim().toLowerCase().includes(value)) option.style.display = 'block';\n else option.style.display = 'none';\n });\n }\n });\n }\n }\n\n /\n Handles the option change event.\n * @param {Event} e The event.\n /\n optionChange = (e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n\n let allOptions = this.getAllOptions();\n\n if (!this.hasAttribute('multiple')) {\n allOptions.forEach((option) => {\n if (option.value === e.target.value) {\n this.processClickedOption(option);\n\n } else {\n option.selected = false;\n option.removeAttribute('selected');\n }\n });\n this.popup.hide(false);\n } else {\n this.processClickedOption(e.target, true);\n }\n\n this.selections();\n };\n\n processClickedOption = (option, multiple = false) => {\n const isSelected = option.hasAttribute(\"selected\")\n option.selected = !isSelected;\n\n if (isSelected) {\n option.removeAttribute('selected');\n this.filterOutOption(option);\n } else {\n option.setAttribute('selected', '');\n this.selectedOptions = multiple ? [...this.selectedOptions, option] : [option];\n }\n }\n\n filterOutOption = (option) => {\n this.selectedOptions = this.selectedOptions.filter((sOption) => {\n return sOption.value !== option.value;\n });\n }\n\n /\n Returns all the options as HTML.\n * @returns {NodeList} The options as HTML.\n /\n getAllOptions() {\n return this.querySelectorAll('wje-option');\n }\n\n /\n Returns the selected options as HTML.\n * @returns {NodeList} The selected options as HTML.\n /\n getSelectedOptions() {\n return Array.from(this.querySelectorAll('wje-option[selected]'));\n }\n\n /\n Returns the selected options.\n * @returns {Array} The selected options.\n /\n getSelected() {\n return this.selectedOptions.map((option) => {\n return {\n value: option.value,\n text: option.textContent.trim(),\n };\n });\n }\n\n /\n Handles the selection change.\n * @param {Element} option The option that changed.\n * @param {number} length The length of the selected options.\n /\n selectionChanged(option = null, length = 0) {\n if (this.hasAttribute('multiple')) {\n this.value = this.selectedOptions.map((el) => el.value).reverse();\n\n if (this.placeholder && length === 0) {\n this.chips.innerHTML = this.placeholder;\n this.input.value = '';\n } else {\n if (option !== null) this.chips.appendChild(this.getChip(option));\n if (this.counterEl instanceof HTMLElement \|\| !this.maxOptions \|\| length > +this.maxOptions) {\n this.counter();\n }\n }\n } else {\n let value = option?.textContent.trim() \|\| '';\n this.value = this.selectedOptions?.map((el) => el.value)?.at(0);\n this.input.value = value;\n\n if (option && option instanceof HTMLElement) {\n this.slotStart.innerHTML = '';\n\n if (option?.querySelector('[slot=start]')) {\n this.slotStart.appendChild(option?.querySelector('[slot=start]').cloneNode(true));\n }\n\n this.slotEnd.innerHTML = '';\n\n if (option?.querySelector('[slot=end]')) {\n this.slotEnd.appendChild(option?.querySelector('[slot=end]').cloneNode(true));\n }\n }\n }\n }\n\n /\n Updates the selected options and their corresponding chips.\n * @param {boolean} [silence] Determines whether to suppress the \"wje-select:change\" event.\n * @returns {void}\n * @description\n * This method fetches the currently selected options and updates the `selectedOptions` array.\n * It clears and rebuilds the chips representing the selected items in the UI.\n * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.\n * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.\n * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.\n * @example\n * // Call the method and allow event dispatch\n * selections();\n * @example\n * // Call the method without dispatching the event\n * selections(true);\n /\n selections(silence = false) {\n if (this.selectedOptions.length >= +this.maxOptions) {\n this.counterEl = null;\n }\n\n if (this.chips) {\n this.chips.innerHTML = '';\n }\n\n if (this.selectedOptions.length > 0) {\n this.selectionChanged(this.selectedOptions.at(0), this.selectedOptions.length);\n\n } else {\n this.selectionChanged();\n }\n\n if (silence) return;\n event.dispatchCustomEvent(this, 'wje-select:change');\n }\n\n /\n Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.\n * - If the number of selected items equals the maximum allowed, the counter element is removed.\n * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.\n /\n counter() {\n // zmazanie counter (span)\n if (this.counterEl && this.value.length === +this.maxOptions) {\n this.counterEl.remove();\n this.counterEl = null;\n return;\n }\n\n // ak counter nie je, tak ho vytvorime\n if (!this.counterEl) {\n this.counterEl = document.createElement('span');\n this.counterEl.classList.add('counter');\n\n this.chips.appendChild(this.counterEl);\n }\n\n // nastavime hodnotu counter\n this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;\n }\n\n /\n Returns a chip element.\n * @param {Element} option The option to get the chip for.\n * @returns {Element} The chip element.\n /\n getChip(option) {\n let chip = document.createElement('wje-chip');\n chip.setAttribute('removable', '');\n chip.addEventListener('wje:chip-remove', this.removeChip);\n chip.option = option;\n\n let label = document.createElement('wje-label');\n label.innerText = option.textContent.trim();\n\n chip.appendChild(label);\n\n return chip;\n }\n\n /\n Handles the chip remove event.\n * @param {Event} e The event.\n /\n removeChip = (e) => {\n e.target.parentNode.removeChild(e.target);\n this.processClickedOption(e.target.option, true);\n this.selections();\n };\n\n /\n Generates an HTML option element based on the provided item and mapping.\n * @param {object} item The item to generate the option for.\n * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.\n * @param {string} [map.value] The property of the item to use for the option's value.\n * @param {string} [map.text] The property of the item to use for the option's text.\n * @returns {HTMLElement} The generated HTML option element.\n /\n htmlOption(item, map = { value: 'value', text: 'text' }) {\n let option = document.createElement('wje-option');\n\n if (item[map.value] === null) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);\n }\n\n if (item[map.text] === null) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);\n }\n\n option.setAttribute('value', item[map.value] ?? '');\n option.innerText = item[map.text] ?? '';\n return option;\n }\n\n /\n Adds an option to the select element.\n * @param {any} optionData The data for the option to be added.\n * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.\n * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.\n /\n addOption(optionData, silent = false, map = { value: 'value', text: 'text' }) {\n if (!optionData) return;\n\n const optionsElement = this.querySelector('wje-options');\n if (optionsElement) {\n optionsElement.addOption(optionData, silent, map);\n return;\n }\n\n let option = this.htmlOption(optionData, map);\n this.appendChild(option);\n }\n\n /\n Adds options to the select element.\n * @param {Array \| object} optionsData The options data to be added. Can be an array of objects or a single object.\n * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.\n * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: \"value\", text: \"text\" }.\n /\n addOptions(optionsData, silent = false, map = { value: 'value', text: 'text' }) {\n if (!Array.isArray(optionsData)) {\n this.addOption(optionsData, silent, map);\n } else {\n const optionsElement = this.querySelector('wje-options');\n if (optionsElement) {\n optionsElement.addOptions(optionsData, silent, map);\n return;\n }\n\n optionsData.forEach((item) => {\n this.addOption(item, silent, map);\n });\n }\n }\n\n /\n Selects an option with the specified value.\n * @param {string} value The value of the option to be selected.\n * @param {boolean} [silent] Whether to suppress firing events.\n /\n selectOption(value, silent = false) {\n if (!value) return;\n\n let option = this.querySelector(`wje-option[value=\"${value}\"]`);\n\n if (option) {\n this.processClickedOption(option, this.hasAttribute('multiple'));\n }\n\n if (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);\n }\n\n /\n Selects one or multiple options in the select element.\n * @param {Array\|any} values The value(s) of the option(s) to be selected.\n * @param {boolean} [silent] Whether to trigger the change event or not.\n /\n selectOptions(values, silent = false) {\n if (!Array.isArray(values)) {\n this.selectOption(values, silent);\n } else {\n values.forEach((value) => {\n this.selectOption(value, silent);\n });\n }\n }\n\n /\n @summary Callback function that is called when the custom element is associated with a form.\n * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n /\n formAssociatedCallback(form) {\n if (form) {\n this.internals.setFormValue(this.value);\n }\n }\n\n /\n The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n * This method is responsible for resetting the value of the custom input element to its default value.\n * It also resets the form value and validity state in the form internals.\n * @function\n /\n formResetCallback() {\n // Set the value of the custom input element to its default value\n this.value = this.defaultValue;\n // Reset the form value in the form internals to the default value\n this.internals.setFormValue(this.defaultValue);\n // Reset the validity state in the form internals\n this.internals.setValidity({});\n }\n\n /\n The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n * This method is responsible for restoring the value of the custom input element to its saved state.\n * It also restores the form value and validity state in the form internals to their saved states.\n * @param {object} state The saved state of the custom input element.\n * @function\n /\n formStateRestoreCallback(state) {\n // Set the value of the custom input element to its saved value\n this.value = state.value;\n // Restore the form value in the form internals to the saved value\n this.internals.setFormValue(state.value);\n // Restore the validity state in the form internals to the saved state\n this.internals.setValidity({});\n }\n\n /\n The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n * This method is responsible for saving the value of the custom input element.\n * @returns {object} The saved state of the custom input element.\n * @function\n /\n formStateSaveCallback() {\n return {\n value: this.value,\n };\n }\n\n /\n The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n * This method is not implemented yet.\n * @param {boolean} disabled The new disabled state of the custom input element.\n * @function\n */\n formDisabledCallback(disabled) {\n console.warn('formDisabledCallback not implemented yet');\n this.native?.classList.toggle('disabled', disabled);\n this.toggleAttribute('disabled', disabled);\n }\n}\n","import Select from './select.element.js';\n\nexport default Select;\n\nSelect.define('wje-select', Select);\n"],"names":["_a"],"mappings":"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"}

package/dist/wje-store.js CHANGED Viewed

@@ -5,7 +5,7 @@ const addAction = (stateValueName) => {
   return (payload2) => {
     return {
       type: `${stateValueName}/ADD`,
-      payload: payload2,
+      payload: structuredClone(payload2),
       actionType: "ADD"
     };
   };
@@ -14,7 +14,7 @@ const addManyAction = (stateValueName) => {
   return (payload2) => {
     return {
       type: `${stateValueName}/ADD_MANY`,
-      payload: payload2,
+      payload: structuredClone(payload2),
       actionType: "ADD_MANY"
     };
   };
@@ -23,7 +23,7 @@ const updateAction = (stateValueName) => {
   return (payload2) => {
     return {
       type: `${stateValueName}/UPDATE`,
-      payload: payload2,
+      payload: structuredClone(payload2),
       actionType: "UPDATE"
     };
   };
@@ -32,7 +32,7 @@ const deleteAction = (stateValueName) => {
   return (payload2) => {
     return {
       type: `${stateValueName}/DELETE`,
-      payload: payload2,
+      payload: structuredClone(payload2),
       actionType: "DELETE"
     };
   };
@@ -41,7 +41,7 @@ const loadAction = (stateValueName) => {
   return (payload2) => {
     return {
       type: `${stateValueName}/LOAD`,
-      payload: payload2,
+      payload: structuredClone(payload2),
       actionType: "LOAD"
     };
   };

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 { 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 {any} state The current state to pass to the callbacks\n * @param {object} [newData] The new data to pass to the callbacks\n * @param {object} [oldData] The old data to pass to the callbacks\n * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists\n * @memberof PubSub\n /\n publish(event, state, 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(state, oldData, newData));\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, state[key], 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;AAAA,EAWI,QAAQ,OAAO,OAAO,UAAU,CAAE,GAAE,UAAU,IAAI;AAC9C,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,OAAO,SAAS,OAAO,CAAC;AAAA,EACrF;AACA;ACvCA,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,MAAM,GAAG,GAAG,QAAQ;AAG9E,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;"}
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\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD',\n\t\t};\n\t};\n};\n\nconst addManyAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD_MANY`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD_MANY',\n\t\t};\n\t};\n};\n\nconst updateAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/UPDATE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'UPDATE',\n\t\t};\n\t};\n};\n\nconst deleteAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/DELETE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'DELETE',\n\t\t};\n\t};\n};\n\nconst loadAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/LOAD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'LOAD',\n\t\t};\n\t};\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 {any} state The current state to pass to the callbacks\n * @param {object} [newData] The new data to pass to the callbacks\n * @param {object} [oldData] The old data to pass to the callbacks\n * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists\n * @memberof PubSub\n /\n publish(event, state, 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(state, oldData, newData));\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, state[key], 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":"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"}

package/dist/wje-textarea.js CHANGED Viewed

@@ -169,6 +169,7 @@ class Textarea extends WJElement {
     let inputWrapper = document.createElement("div");
     inputWrapper.classList.add("input-wrapper");
     let label = document.createElement("label");
+    label.setAttribute("part", "label");
     label.htmlFor = "textarea";
     label.innerHTML = this.label || "";
     let input = document.createElement("textarea");

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.setAttribute('part', '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":";;;;;AA2Be,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5C,cAAc;AACV,UAAO;AAQX,2CAAkB,CAAC,cAAc;AAC7B,gBAAU,QAAQ,CAAC,aAAa;AAC5B,YAAI,SAAS,SAAS,cAAc;AAChC,gBAAM,gBAAgB,SAAS;AAC/B,gBAAM,WAAW,SAAS;AAC1B,gBAAM,WAAW,KAAK,aAAa,aAAa;AAEhD,kBAAQ,IAAI,aAAa,aAAa,iBAAiB,QAAQ,OAAO,QAAQ,EAAE;AAAA,QAChG;AAAA,MACA,CAAS;AAED,WAAK,QAAS;AAAA,IACjB;AAwFD,qCAAY;AA8MZ;AAAA;AAAA;AAAA,6CAAoB,MAAM;AACtB,UAAI,KAAK,aAAa,QAAQ,MAAM,QAAQ;AACxC,aAAK,MAAM,MAAM,SAAS;AAC1B,aAAK,MAAM,MAAM,SAAS,KAAK,MAAM,eAAe;AAAA,MAChE;AAAA,IACK;AAMD;AAAA;AAAA;AAAA;AAAA,qCAAY,CAAC,MAAM;AACf,WAAK,eAAe,YAAY,EAAE,OAAO,MAAM,SAAS,MAAM,KAAK,MAAM;AAAA,IAC5E;AArUG,SAAK,UAAU;AACf,SAAK,WAAW;AAChB,SAAK,YAAY,KAAK,gBAAiB;AACvC,SAAK,WAAW,IAAI,iBAAiB,KAAK,eAAe;AAAA,EACjE;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBI,IAAI,MAAM,OAAO;AACb,SAAK,UAAU,aAAa,KAAK;AAEjC,QAAI,KAAK,MAAO,MAAK,MAAM,QAAQ;AAEnC,SAAK,WAAW;AAChB,SAAK,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;;AACR,aAAO,UAAK,UAAL,mBAAY,UAAS,KAAK,UAAU;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,WAAW;AACnB,QAAI,UAAW,MAAK,aAAa,WAAW,EAAE;AAAA,QACzC,MAAK,gBAAgB,SAAS;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,UAAU;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,UAAU;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,oBAAoB;AACpB,WAAO,KAAK,UAAU;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,eAAe;AACf,WAAO,KAAK,UAAU;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA,EAEI,IAAI,YAAY,OAAO;AACnB,SAAK,aAAa,eAAe,KAAK;AAAA,EAC9C;AAAA,EAEI,IAAI,cAAc;AACd,WAAO,KAAK,aAAa,aAAa;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAGpB,QAAI,KAAK,UAAU;AACf,WAAK,QAAQ,KAAK;AAClB,WAAK,WAAW;AAAA,IAC5B;AAAA,EACA;AAAA,EAEI,aAAa;AACT,SAAK,SAAS,WAAY;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,mBAAmB,KAAK,WAAW,SAAS;AACjE,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,KAAK,aAAa,SAAS,EAAG,QAAO,UAAU,IAAI,WAAW;AAElE,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,SAAS;AACtC,YAAQ,UAAU,IAAI,SAAS;AAE/B,QAAI,eAAe,SAAS,cAAc,KAAK;AAC/C,iBAAa,UAAU,IAAI,eAAe;AAE1C,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,UAAU;AAChB,UAAM,YAAY,KAAK,SAAS;AAEhC,QAAI,QAAQ,SAAS,cAAc,UAAU;AAC7C,UAAM,KAAK;AACX,UAAM,OAAO,KAAK;AAClB,UAAM,WAAW,KAAK,aAAa,UAAU;AAC7C,UAAM,YAAY,KAAK;AACvB,UAAM,cAAc,KAAK,eAAe;AACxC,UAAM,UAAU,IAAI,cAAc;AAClC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,QAAQ,KAAK,QAAQ,CAAC;AACzC,UAAM,aAAa,cAAc,KAAK;AAEtC,UAAM,aAAa,MAAM,KAAK,KAAK,UAAU,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;AAEtE,eAAW,QAAQ,CAAC,SAAS;AACzB,UAAI,KAAK,aAAa,IAAI,GAAG;AACzB,cAAM,aAAa,MAAM,KAAK,IAAI,KAAK,EAAE;AAAA,MACzD;AAAA,IACA,CAAS;AAED,QAAI,KAAK,WAAW,OAAQ,OAAM,iBAAiB,SAAS,KAAK,iBAAiB;AAElF,QAAI,KAAK,YAAY,YAAY;AAC7B,UAAI,KAAK,MAAO,QAAO,YAAY,KAAK;AAAA,IACpD,OAAe;AACH,mBAAa,YAAY,KAAK;AAAA,IAC1C;AAEQ,iBAAa,YAAY,KAAK;AAE9B,YAAQ,YAAY,YAAY;AAEhC,WAAO,YAAY,OAAO;AAE1B,aAAS,YAAY,MAAM;AAE3B,QAAI,KAAK,aAAa,SAAS,GAAG;AAC9B,YAAM,YAAY,KAAK,aAAa;AACpC,YAAM,iBAAiB,SAAS,KAAK,SAAS;AAE9C,UAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,cAAQ,UAAU,IAAI,SAAS;AAC/B,cAAQ,YAAY,GAAG,MAAM,MAAM,MAAM,IAAI,MAAM,SAAS;AAE5D,WAAK,iBAAiB;AACtB,eAAS,YAAY,OAAO;AAAA,IACxC;AAEQ,SAAK,SAAS;AACd,SAAK,eAAe;AACpB,SAAK,QAAQ;AAEb,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,iBAAiB,IAAI,eAAe,MAAM,KAAK,iBAAiB;AAErE,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,MAAM,SAAS,qBAAqB;AACtD,YAAM,YAAY,MAAM,SAAS,oBAAoB;AAAA,IACjE;AAEQ,SAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,WAAK,aAAa,UAAU,IAAI,MAAM;AACtC,WAAK,OAAO,UAAU,IAAI,SAAS;AAAA,IAC/C,CAAS;AAED,SAAK,MAAM,iBAAiB,QAAQ,CAAC,MAAM;AACvC,WAAK,OAAO,UAAU,OAAO,SAAS;AACtC,UAAI,CAAC,EAAE,OAAO,MAAO,MAAK,aAAa,UAAU,OAAO,MAAM;AAAA,IAC1E,CAAS;AAED,SAAK,iBAAiB,WAAW,CAAC,MAAM;AACpC,WAAK,UAAU;AACf,WAAK,WAAW;AAEhB,WAAK,mBAAoB;AAEzB,UAAI,KAAK,oBAAoB;AACzB,UAAE,eAAgB;AAAA,MAClC;AAAA,IACA,CAAS;AAED,SAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,WAAK,cAAe;AAEpB,UAAI,KAAK,kBAAkB;AACvB,aAAK,WAAW;AAChB,aAAK,oBAAqB;AAAA,MAC1C;AAEY,WAAK,MAAM,UAAU,OAAO,UAAU;AACtC,WAAK,aAAa,UAAU,IAAI,MAAM;AAEtC,YAAM,QAAQ,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC;AACzC,WAAK,cAAc,KAAK;AAExB,YAAM,oBAAoB,MAAM,sBAAsB;AAAA,QAClD,OAAO,KAAK,MAAM;AAAA,MAClC,CAAa;AAED,WAAK,QAAQ,KAAK,MAAM;AAAA,IACpC,CAAS;AAED,SAAK,cAAe;AAEpB,SAAK,SAAS,QAAQ,MAAM;AAAA,MACxB,YAAY;AAAA;AAAA,MACZ,mBAAmB;AAAA;AAAA,IAC/B,CAAS;AAAA,EACT;AAAA,EAEI,mBAAmB;;AACf,SAAK,SAAS,WAAY;AAC1B,eAAK,mBAAL,mBAAqB,UAAU,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AACf,eAAK,mBAAL,mBAAqB,UAAU,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BI,gBAAgB;AACZ,UAAM,aAAa,KAAK,MAAM;AAE9B,QAAI,CAAC,WAAW,OAAO;AACnB,eAAS,SAAS,YAAY;AAC1B,cAAM,OAAO,WAAW,MAAM,SAAU,CAAA;AAExC,YAAI,WAAW,KAAK,GAAG;AACnB,eAAK,kBAAkB,MAAM,SAAU;AACvC,cAAI,eAAe,KAAK;AAGxB,cAAI,CAAC,KAAK,aAAa,SAAS;AAC5B,2BAAe,KAAK,aAAa,IAAI,IAAI,KAAK,aAAa,IAAI,IAAI,KAAK,MAAM;AAElF,eAAK,UAAU,YAAY,EAAE,CAAC,KAAK,eAAe,GAAG,KAAM,GAAE,YAAY;AAAA,QAC7F;AAAA,MACA;AAAA,IACA,OAAe;AACH,WAAK,UAAU,YAAY,EAAE;AAAA,IACzC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,sBAAsB;AAClB,SAAK,UAAU,CAAC,KAAK,YAAY,CAAC,KAAK,UAAU,SAAS;AAE1D,QAAI,KAAK,WAAW,KAAK,oBAAoB;AACzC,WAAK,cAAc,IAAI,MAAM,SAAS,CAAC;AAAA,IACnD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,uBAAuB,MAAM;AACzB,SAAK,UAAU,aAAa,KAAK,KAAK;AACtC,iCAAM,iBAAiB,UAAU,MAAM;AACnC,WAAK,cAAe;AACpB,WAAK,oBAAqB;AAAA,IACtC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,oBAAoB;AAEhB,SAAK,QAAQ,KAAK;AAElB,SAAK,UAAU,aAAa,KAAK,YAAY;AAE7C,SAAK,UAAU,YAAY,EAAE;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,yBAAyB,OAAO;AAE5B,SAAK,QAAQ,MAAM;AAEnB,SAAK,UAAU,aAAa,MAAM,KAAK;AAEvC,SAAK,UAAU,YAAY,EAAE;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,wBAAwB;AACpB,WAAO;AAAA,MACH,OAAO,KAAK;AAAA,IACf;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,qBAAqB,UAAU;AAC3B,YAAQ,KAAK,0CAA0C;AAAA,EAC/D;AACA;AAAA;AAAA;AAAA;AAAA;AA5TI,cAjIiB,UAiIV,kBAAiB;ACxJ5B,SAAS,OAAO,gBAAgB,QAAQ;"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.168",
+  "version": "0.1.169",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "create-element": "node wje-cli-script/create-element.cjs",
     "copy-dist": "node wje-cli-script/copy-dist.cjs",
     "build:copy-dist": "npm run build && npm run copy-dist -- /Users/rastislavhrompa/Desktop/Interway-MFE/parcels/node_modules/wj-elements",
-    "target:copy-dist": "npm run copy-dist -- /Users/rastislavhrompa/Desktop/Interway-MFE/parcels/node_modules/wj-elements",
+    "target:copy-dist": "npm run copy-dist -- /Users/rastislavhrompa/Desktop/Interway-MFE/custom-fields/node_modules/wj-elements",
     "test": "web-test-runner --group default",
     "test:watch": "web-test-runner --watch --group default",
     "lint": "eslint packages experimental-packages --max-warnings 0",
@@ -74,6 +74,7 @@
     "@faker-js/faker": "^8.0.0",
     "@floating-ui/dom": "^1.5.1",
     "animate.css": "^4.1.1",
+    "morphdom": "^2.7.4",
     "qrious": "^4.0.2",
     "slick-router": "^3.0.1",
     "tinycolor2": "^1.6.0",

package/dist/packages/wje-accordion/accordion.test.d.ts DELETED Viewed

File without changes

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

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