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

wj-elements 0.1.167 → 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 (25) 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-icon-picker.js +1 -1
package/dist/wje-icon-picker.js.map +1 -1
package/dist/wje-icon.js +1 -1
package/dist/wje-icon.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":"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"}

package/dist/wje-icon-picker.js CHANGED Viewed

@@ -147,7 +147,7 @@ class IconPicker extends WJElement {
      * @returns {string} The URL of the tags path.
      */
     __publicField(this, "getTagsUrl", (path) => {
-      return new URL("http://localhost:5174/dist/assets/img/icons/" + path).href;
+      return new URL(process.env.VITE_ICON_ASSETS_URL + path).href;
     });
   }
   /**

package/dist/wje-icon-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Popup from '../wje-popup/popup.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n /\n\nexport default class IconPicker extends WJElement {\n /\n Creates an instance of IconPicker.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Dependencies of the IconPicker component.\n * @property {object} dependencies\n /\n dependencies = {\n 'wje-input': Input,\n 'wje-infinite-scroll': InfiniteScroll,\n 'wje-tooltip': Tooltip,\n 'wje-popup': Popup,\n };\n\n /\n Setter for the markerPosition property.\n * @param {any} value The value to set.\n /\n set size(value) {\n this.setAttribute('size', value);\n }\n\n /\n Getter for the markerPosition property.\n * @returns {any} size The value of the markerPosition property.\n /\n get size() {\n return this.getAttribute('size') \|\| 60;\n }\n\n /\n Setter for the value property.\n * @param value\n /\n set icon(value) {\n this.setAttribute('icon', value);\n }\n\n /\n Getter for the value property.\n * @returns {string}\n /\n get icon() {\n return this.getAttribute('icon');\n }\n\n className = 'IconPicker';\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 Prepares the component before drawing.\n /\n async beforeDraw() {\n this.tags = Object.values(await this.getTags());\n\n this.transformedObjects = this.convertObject(this.tags);\n\n this.index = this.transformedObjects.map((item) => ({\n ...item,\n searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n }));\n }\n\n /\n Draws the component.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-color-picker');\n\n // ANCHOR\n let anchor = document.createElement('div');\n anchor.setAttribute('slot', 'anchor');\n anchor.classList.add('anchor');\n\n if (this.hasAttribute('icon') && this.icon) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', this.icon);\n\n anchor.appendChild(icon);\n }\n\n // PICKER\n let picker = document.createElement('div');\n picker.classList.add('picker');\n\n let input = document.createElement('wje-input');\n input.classList.add('input');\n input.setAttribute('variant', 'standard');\n input.setAttribute('placeholder', 'type to filter...');\n input.setAttribute('clearable', '');\n input.addEventListener('wje-input:input', this.searchIcon);\n\n let infiniteScroll = new InfiniteScroll();\n\n infiniteScroll.setAttribute('url', this.getTagsUrl('../../tags.json'));\n infiniteScroll.setAttribute('placement', '.icon-items');\n infiniteScroll.setAttribute('size', this.size);\n infiniteScroll.setAttribute('height', '223px');\n infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n // APPEND\n picker.appendChild(input);\n\n picker.appendChild(infiniteScroll);\n\n // POPUP\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', this.placement \|\| 'bottom-start');\n popup.setAttribute('offset', this.offset);\n popup.setAttribute('manual', '');\n\n popup.appendChild(anchor);\n popup.appendChild(picker);\n\n native.appendChild(popup);\n\n fragment.appendChild(native);\n\n this.popup = popup;\n this.input = input;\n this.anchor = anchor;\n this.picker = picker;\n this.infiniteScroll = infiniteScroll;\n\n this.infiniteScroll.dataToHtml = this.dataToHtml;\n this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n this.infiniteScroll.setCustomData = (page = 0) => {\n return {\n data: this.transformedObjects.slice(page this.size, page * this.size + this.size),\n page: page,\n size: this.size,\n totalPages: Math.round(this.transformedObjects.length / this.size),\n };\n };\n\n return fragment;\n }\n\n /*\n Called after the component has been drawn.\n /\n afterDraw() {\n this.addEventListener('wje-popup:show', () => {\n this.initial();\n });\n\n // udalost po vymazani inputu\n this.addEventListener('wje-input:clear', () => {\n this.clearIconsContainer(); // clear icons container\n this.infiniteScroll.scrollEvent(); // bind scroll event\n this.infiniteScroll.loadPages(0); // load first page\n });\n\n this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n let icon = e.detail.context.querySelector('wje-icon');\n let name = icon.getAttribute('name');\n let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n let uniqueObject = this.transformedObjects.find(\n (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n );\n\n const iconElement = document.createElement('wje-icon');\n iconElement.setAttribute('name', name);\n if (uniqueObject.styles.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n uniqueObject.icon = iconElement;\n\n this.value = uniqueObject;\n this.icon = uniqueObject.name;\n\n this.anchor.innerHTML = '';\n this.anchor.appendChild(iconElement);\n\n event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n });\n\n this.init = false;\n }\n\n /\n Initializes the component.\n /\n initial() {\n this.infiniteScroll.scrollEvent();\n }\n\n /\n Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n * The function processes an input object containing tags, extracts its values,\n * and for each tag that has both `filled` and `outline` styles, splits them into\n * two separate objects. Tags without `filled` styles remain unchanged.\n * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n * @param {object} [tags[].styles.outline] The outline style object, if present.\n * @param {object} [tags[].styles.filled] The filled style object, if present.\n * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n * @example\n * const tags = {\n * hourglass: {\n * styles: {\n * outline: { ... },\n * filled: { ... },\n * }\n * },\n * clock: {\n * styles: {\n * outline: { ... },\n * }\n * }\n * };\n * const result = convertObject(tags);\n * console.log(result);\n * // [\n * // { styles: { outline: { ... } } },\n * // { styles: { filled: { ... } } },\n * // { styles: { outline: { ... } } }\n * // ]\n /\n convertObject = (tags = {}) => {\n let originalObjects = Object.values(tags);\n let transformedObjects = [];\n for (let i = 0; i < originalObjects.length; i++) {\n const obj = originalObjects[i];\n if (obj.styles.filled) {\n transformedObjects.push(\n { ...obj, styles: { outline: obj.styles.outline } },\n { ...obj, styles: { filled: obj.styles.filled } }\n );\n } else {\n transformedObjects.push(obj);\n }\n }\n\n return transformedObjects;\n };\n\n /\n Converts an icon data object into an HTML element structure.\n * This function creates a styled HTML element that represents an icon with a tooltip.\n * The tooltip displays the name of the icon, and the icon itself is styled based on\n * whether it uses the `filled` style.\n * @param {object} data The icon data object.\n * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n * @example\n * const iconData = {\n * name: \"hourglass\",\n * styles: {\n * filled: { ... }\n * }\n * };\n * const htmlElement = dataToHtml(iconData);\n * document.body.appendChild(htmlElement);\n \n // The resulting structure:\n * // <div class=\"icon-item\">\n * // <wje-tooltip content=\"hourglass\">\n * // <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon>\n * // </wje-tooltip>\n * // </div>\n /\n dataToHtml = (data) => {\n let iconItem = document.createElement('div');\n iconItem.classList.add('icon-item');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', data.name);\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', data.name);\n icon.setAttribute('size', 'large');\n if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n tooltip.appendChild(icon);\n iconItem.appendChild(tooltip);\n\n return iconItem;\n };\n\n /\n Gets the category of the tags.\n * @param {Array} tags The tags to get the category of.\n * @returns {Array} The category of the tags.\n /\n getCategory(tags) {\n return [...new Set(tags.map((obj) => obj.category))];\n }\n\n /\n Gets the tags.\n * @returns {Promise<Array>} The tags of the component.\n /\n async getTags() {\n const response = await fetch(this.getTagsUrl('../../tags.json'));\n return response.json();\n }\n\n /\n Called when the component is disconnected.\n /\n beforeDisconnect() {\n this.init = false;\n }\n\n /\n Searches icons based on user input.\n * This method handles the input event and filters the available icons based on the provided search string.\n * The filtering is performed on an index that combines icon names and their tags.\n * The results are then adjusted for infinite scrolling.\n * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n /\n searchIcon = (e) => {\n const query = e.detail.value.toLowerCase();\n\n const results = this.index.filter((item) => item.searchText.includes(query));\n\n this.infiniteScroll.unScrollEvent();\n this.infiniteScroll.setCustomData = (page = 0) => {\n const data = results.slice(page this.size, page * this.size + this.size);\n return {\n data: data,\n page: page,\n size: this.size,\n totalPages: Math.ceil(results.length / this.size),\n };\n };\n\n this.clearIconsContainer();\n this.infiniteScroll.loadPages(0);\n };\n\n /*\n Clears the icons container.\n /\n clearIconsContainer() {\n this.context.querySelector('.icon-items').innerHTML = '';\n }\n\n /\n Closes the component.\n /\n onClose = () => {\n this.popup.handleHide();\n };\n\n /\n Gets the URL of the tags.\n * @param {string} path The path to get the URL of.\n * @returns {string} The URL of the tags path.\n */\n getTagsUrl = (path) => {\n return new URL(process.env.VITE_ICON_ASSETS_URL + path).href;\n };\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Popup from '../wje-popup/popup.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n /\n\nexport default class IconPicker extends WJElement {\n /\n Creates an instance of IconPicker.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Dependencies of the IconPicker component.\n * @property {object} dependencies\n /\n dependencies = {\n 'wje-input': Input,\n 'wje-infinite-scroll': InfiniteScroll,\n 'wje-tooltip': Tooltip,\n 'wje-popup': Popup,\n };\n\n /\n Setter for the markerPosition property.\n * @param {any} value The value to set.\n /\n set size(value) {\n this.setAttribute('size', value);\n }\n\n /\n Getter for the markerPosition property.\n * @returns {any} size The value of the markerPosition property.\n /\n get size() {\n return this.getAttribute('size') \|\| 60;\n }\n\n /\n Setter for the value property.\n * @param value\n /\n set icon(value) {\n this.setAttribute('icon', value);\n }\n\n /\n Getter for the value property.\n * @returns {string}\n /\n get icon() {\n return this.getAttribute('icon');\n }\n\n className = 'IconPicker';\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 Prepares the component before drawing.\n /\n async beforeDraw() {\n this.tags = Object.values(await this.getTags());\n\n this.transformedObjects = this.convertObject(this.tags);\n\n this.index = this.transformedObjects.map((item) => ({\n ...item,\n searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n }));\n }\n\n /\n Draws the component.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-color-picker');\n\n // ANCHOR\n let anchor = document.createElement('div');\n anchor.setAttribute('slot', 'anchor');\n anchor.classList.add('anchor');\n\n if (this.hasAttribute('icon') && this.icon) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', this.icon);\n\n anchor.appendChild(icon);\n }\n\n // PICKER\n let picker = document.createElement('div');\n picker.classList.add('picker');\n\n let input = document.createElement('wje-input');\n input.classList.add('input');\n input.setAttribute('variant', 'standard');\n input.setAttribute('placeholder', 'type to filter...');\n input.setAttribute('clearable', '');\n input.addEventListener('wje-input:input', this.searchIcon);\n\n let infiniteScroll = new InfiniteScroll();\n\n infiniteScroll.setAttribute('url', this.getTagsUrl('../../tags.json'));\n infiniteScroll.setAttribute('placement', '.icon-items');\n infiniteScroll.setAttribute('size', this.size);\n infiniteScroll.setAttribute('height', '223px');\n infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n // APPEND\n picker.appendChild(input);\n\n picker.appendChild(infiniteScroll);\n\n // POPUP\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', this.placement \|\| 'bottom-start');\n popup.setAttribute('offset', this.offset);\n popup.setAttribute('manual', '');\n\n popup.appendChild(anchor);\n popup.appendChild(picker);\n\n native.appendChild(popup);\n\n fragment.appendChild(native);\n\n this.popup = popup;\n this.input = input;\n this.anchor = anchor;\n this.picker = picker;\n this.infiniteScroll = infiniteScroll;\n\n this.infiniteScroll.dataToHtml = this.dataToHtml;\n this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n this.infiniteScroll.setCustomData = (page = 0) => {\n return {\n data: this.transformedObjects.slice(page this.size, page * this.size + this.size),\n page: page,\n size: this.size,\n totalPages: Math.round(this.transformedObjects.length / this.size),\n };\n };\n\n return fragment;\n }\n\n /*\n Called after the component has been drawn.\n /\n afterDraw() {\n this.addEventListener('wje-popup:show', () => {\n this.initial();\n });\n\n // udalost po vymazani inputu\n this.addEventListener('wje-input:clear', () => {\n this.clearIconsContainer(); // clear icons container\n this.infiniteScroll.scrollEvent(); // bind scroll event\n this.infiniteScroll.loadPages(0); // load first page\n });\n\n this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n let icon = e.detail.context.querySelector('wje-icon');\n let name = icon.getAttribute('name');\n let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n let uniqueObject = this.transformedObjects.find(\n (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n );\n\n const iconElement = document.createElement('wje-icon');\n iconElement.setAttribute('name', name);\n if (uniqueObject.styles.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n uniqueObject.icon = iconElement;\n\n this.value = uniqueObject;\n this.icon = uniqueObject.name;\n\n this.anchor.innerHTML = '';\n this.anchor.appendChild(iconElement);\n\n event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n });\n\n this.init = false;\n }\n\n /\n Initializes the component.\n /\n initial() {\n this.infiniteScroll.scrollEvent();\n }\n\n /\n Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n * The function processes an input object containing tags, extracts its values,\n * and for each tag that has both `filled` and `outline` styles, splits them into\n * two separate objects. Tags without `filled` styles remain unchanged.\n * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n * @param {object} [tags[].styles.outline] The outline style object, if present.\n * @param {object} [tags[].styles.filled] The filled style object, if present.\n * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n * @example\n * const tags = {\n * hourglass: {\n * styles: {\n * outline: { ... },\n * filled: { ... },\n * }\n * },\n * clock: {\n * styles: {\n * outline: { ... },\n * }\n * }\n * };\n * const result = convertObject(tags);\n * console.log(result);\n * // [\n * // { styles: { outline: { ... } } },\n * // { styles: { filled: { ... } } },\n * // { styles: { outline: { ... } } }\n * // ]\n /\n convertObject = (tags = {}) => {\n let originalObjects = Object.values(tags);\n let transformedObjects = [];\n for (let i = 0; i < originalObjects.length; i++) {\n const obj = originalObjects[i];\n if (obj.styles.filled) {\n transformedObjects.push(\n { ...obj, styles: { outline: obj.styles.outline } },\n { ...obj, styles: { filled: obj.styles.filled } }\n );\n } else {\n transformedObjects.push(obj);\n }\n }\n\n return transformedObjects;\n };\n\n /\n Converts an icon data object into an HTML element structure.\n * This function creates a styled HTML element that represents an icon with a tooltip.\n * The tooltip displays the name of the icon, and the icon itself is styled based on\n * whether it uses the `filled` style.\n * @param {object} data The icon data object.\n * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n * @example\n * const iconData = {\n * name: \"hourglass\",\n * styles: {\n * filled: { ... }\n * }\n * };\n * const htmlElement = dataToHtml(iconData);\n * document.body.appendChild(htmlElement);\n \n // The resulting structure:\n * // <div class=\"icon-item\">\n * // <wje-tooltip content=\"hourglass\">\n * // <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon>\n * // </wje-tooltip>\n * // </div>\n /\n dataToHtml = (data) => {\n let iconItem = document.createElement('div');\n iconItem.classList.add('icon-item');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', data.name);\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', data.name);\n icon.setAttribute('size', 'large');\n if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n tooltip.appendChild(icon);\n iconItem.appendChild(tooltip);\n\n return iconItem;\n };\n\n /\n Gets the category of the tags.\n * @param {Array} tags The tags to get the category of.\n * @returns {Array} The category of the tags.\n /\n getCategory(tags) {\n return [...new Set(tags.map((obj) => obj.category))];\n }\n\n /\n Gets the tags.\n * @returns {Promise<Array>} The tags of the component.\n /\n async getTags() {\n const response = await fetch(this.getTagsUrl('../../tags.json'));\n return response.json();\n }\n\n /\n Called when the component is disconnected.\n /\n beforeDisconnect() {\n this.init = false;\n }\n\n /\n Searches icons based on user input.\n * This method handles the input event and filters the available icons based on the provided search string.\n * The filtering is performed on an index that combines icon names and their tags.\n * The results are then adjusted for infinite scrolling.\n * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n /\n searchIcon = (e) => {\n const query = e.detail.value.toLowerCase();\n\n const results = this.index.filter((item) => item.searchText.includes(query));\n\n this.infiniteScroll.unScrollEvent();\n this.infiniteScroll.setCustomData = (page = 0) => {\n const data = results.slice(page this.size, page * this.size + this.size);\n return {\n data: data,\n page: page,\n size: this.size,\n totalPages: Math.ceil(results.length / this.size),\n };\n };\n\n this.clearIconsContainer();\n this.infiniteScroll.loadPages(0);\n };\n\n /*\n Clears the icons container.\n /\n clearIconsContainer() {\n this.context.querySelector('.icon-items').innerHTML = '';\n }\n\n /\n Closes the component.\n /\n onClose = () => {\n this.popup.handleHide();\n };\n\n /\n Gets the URL of the tags.\n * @param {string} path The path to get the URL of.\n * @returns {string} The URL of the tags path.\n */\n getTagsUrl = (path) => {\n return new URL(process.env.VITE_ICON_ASSETS_URL + path).href;\n };\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":[],"mappings":"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"}

package/dist/wje-icon.js CHANGED Viewed

@@ -107,7 +107,7 @@ const getName = (iconName) => {
 };
 const getNamedUrl = (iconName, filled = false) => {
   const path = `${filled ? "filled" : "outline"}/${iconName}.svg`;
-  let url = new URL("http://localhost:5174/dist/assets/img/icons/" + path);
+  let url = new URL(process.env.VITE_ICON_ASSETS_URL + path);
   return url.href;
 };
 const styles = "/*\n[ WJ Icon ]\n*/\n\n:host {\n    width: var(--wje-icon-size);\n    height: var(--wje-icon-size);\n    display: block;\n}\n\n.native-icon {\n    display: flex;\n    align-items: center;\n}\n\nsvg {\n    width: 100%;\n    height: 100%;\n    stroke-width: var(--wje-icon-stroke);\n    color: var(--wje-icon-color);\n}\n\n/*STROKE*/\n:host([stroke='1']) {\n    --wje-icon-stroke: 1;\n}\n\n:host([stroke='1.25']) {\n    --wje-icon-stroke: 1.25;\n}\n\n:host([stroke='1.5']) {\n    --wje-icon-stroke: 1.5;\n}\n\n:host([stroke='1.75']) {\n    --wje-icon-stroke: 1.75;\n}\n\n:host([stroke='2']) {\n    --wje-icon-stroke: 2;\n}\n\n/*SIZE*/\n:host([size='2x-small']) {\n    --wje-icon-size: var(--wje-size-2x-small);\n}\n\n:host([size='x-small']) {\n    --wje-icon-size: var(--wje-size-x-small);\n}\n\n:host([size='small']) {\n    --wje-icon-size: var(--wje-size-small);\n}\n\n:host([size='medium']) {\n    --wje-icon-size: var(--wje-size-medium);\n}\n\n:host([size='large']) {\n    --wje-icon-size: var(--wje-size-large);\n}\n\n:host([size='x-large']) {\n    --wje-icon-size: var(--wje-size-x-large);\n}\n\n:host([size='2x-large']) {\n    --wje-icon-size: var(--wje-size-2x-large);\n}\n\n:host([size='3x-large']) {\n    --wje-icon-size: var(--wje-size-3x-large);\n}\n\n:host([size='4x-large']) {\n    --wje-icon-size: var(--wje-size-4x-large);\n}\n\n/*COLOR*/\n:host([color='primary']) .native-icon {\n    color: var(--wje-color-primary-9);\n}\n\n:host([color='complete']) .native-icon {\n    color: var(--wje-color-complete-9);\n}\n\n:host([color='success']) .native-icon {\n    color: var(--wje-color-success-9);\n}\n\n:host([color='warning']) .native-icon {\n    color: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) .native-icon {\n    color: var(--wje-color-danger-9);\n}\n\n:host([color='info']) .native-icon {\n    color: var(--wje-color-info-9);\n}\n\n:host([color='menu']) .native-icon {\n    color: var(--wje-color-contrast-9);\n}\n";

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

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

package/dist/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.