npm - wj-elements - Versions diffs - 0.1.213 → 0.1.215 - Mend

wj-elements 0.1.213 → 0.1.215

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

package/dist/packages/wje-checkbox/checkbox.element.d.ts +1 -2
package/dist/wje-checkbox.js +3 -3
package/dist/wje-checkbox.js.map +1 -1
package/dist/wje-input.js +1 -1
package/dist/wje-input.js.map +1 -1
package/package.json +1 -1

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

@@ -1,6 +1,6 @@
 import { FormAssociatedElement } from '../internals/form-associated-element.js';
 /**
- * @summary This method dispatches a custom event named "wje-checkbox:change".
+ * @summary This method dispatches a custom event named "wje-toggle:change".
  * It is triggered when the input event is fired, which happens when the state of the checkbox changes.
  * The event is dispatched on the current instance of the Checkbox class.
  * @documentation https://elements.webjet.sk/components/checkbox
@@ -13,7 +13,6 @@ import { FormAssociatedElement } from '../internals/form-associated-element.js';
  * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;
  * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;
  * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;
- * @fires wje-checkbox:change - Dispatched when the checkbox state changes;
  */
 export default class Checkbox extends FormAssociatedElement {
     /**

package/dist/wje-checkbox.js CHANGED Viewed

@@ -211,12 +211,12 @@ class Checkbox extends FormAssociatedElement {
         this.propagateValidation();
         this.indeterminate = false;
         this.checked = e.target.checked;
-        event.dispatchCustomEvent(this, "wje-checkbox:input");
+        event.dispatchCustomEvent(this, "wje-toggle:input");
       });
       this.input.addEventListener("change", (e) => {
-        event.dispatchCustomEvent(this, "wje-checkbox:change");
+        event.dispatchCustomEvent(this, "wje-toggle:change");
       });
-      this.addEventListener("wje-checkbox:invalid", (e) => {
+      this.addEventListener("wje-toggle:invalid", (e) => {
         this.invalid = true;
         this.pristine = false;
         this.showInvalidMessage();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-checkbox.js","sources":["../packages/wje-checkbox/checkbox.element.js","../packages/wje-checkbox/checkbox.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This method dispatches a custom event named \"wje-checkbox:change\".\n * It is triggered when the input event is fired, which happens when the state of the checkbox changes.\n * The event is dispatched on the current instance of the Checkbox class.\n * @documentation https://elements.webjet.sk/components/checkbox\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The checkbox main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;\n * @fires wje-checkbox:change - Dispatched when the checkbox state changes;\n /\nexport default class Checkbox extends FormAssociatedElement {\n\t#internalValue;\n\t/\n\t Checkbox constructor method.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.invalid = false;\n\t\tthis.pristine = true;\n\t}\n\n\t/\n\t Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t /\n\tset value(value) {\n\t\tthis.#internalValue = value;\n\t\tif (this.input) {\n\t\t\tthis.input.value = value;\n\t\t}\n\t}\n\n\t/\n\t Getter for the value attribute.\n\t * @returns {string} The value of the attribute.\n\t /\n\tget value() {\n\t\treturn this.#internalValue ?? this.getAttribute('value') ?? 'on';;\n\t}\n\n\t/\n\t Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t /\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/\n\t Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t /\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/\n\t Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t /\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/\n\t Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t /\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/\n\t Sets or removes the 'indeterminate' attribute for the object.\n\t * This property typically reflects the visual or functional state where\n\t * the component is neither fully active nor inactive.\n\t * @param {boolean} value A boolean where `true` indicates the 'indeterminate'\n\t * state should be set, and `false` removes it.\n\t /\n\tset indeterminate(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('indeterminate', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('indeterminate');\n\t\t}\n\t}\n\n\t/\n\t Retrieves the current state of the 'indeterminate' attribute.\n\t \n\t The 'indeterminate' attribute is typically used to signify a state\n\t * where a checkbox is neither checked nor unchecked, such as a partially\n\t * selected state.\n\t * @returns {boolean} Returns true if the 'indeterminate' attribute is present; otherwise, false.\n\t /\n\tget indeterminate() {\n\t\treturn this.hasAttribute('indeterminate');\n\t}\n\n\t/\n\t Set checked attribute.\n\t * @param {boolean} value true if the toggle is checked, false otherwise\n\t /\n\tset checked(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('checked', '');\n\t\t\tthis.internals.setFormValue(this.value); // len ak je checked\n\t\t} else {\n\t\t\tthis.removeAttribute('checked');\n\t\t\tthis.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n\t\t}\n\t\tif (this.input) {\n\t\t\tthis.input.checked = value;\n\t\t}\n\t}\n\n\t/\n\t Get checked attribute.\n\t * @returns {boolean} true if the toggle is checked, false otherwise\n\t /\n\tget checked() {\n\t\treturn this.hasAttribute('checked');\n\t}\n\n\t/\n\t The class name for the Checkbox.\n\t /\n\tclassName = 'Checkbox';\n\n\t/\n\t Getter for the CSS stylesheet.\n\t * @returns {string} The CSS stylesheet.\n\t /\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tstatic get observedAttributes() {\n\t\treturn ['checked', 'disabled', 'value', 'indeterminate'];\n\t}\n\n\tattributeChangedCallback(name, oldValue, newValue) {\n\t\tif (!this.input) return;\n\t\tif (name === 'checked') {\n\t\t\tconst isChecked = this.hasAttribute('checked');\n\t\t\tthis.input.checked = isChecked;\n\t\t\t// Reflect into form value\n\t\t\tif (isChecked) {\n\t\t\t\tthis.internals.setFormValue(this.value);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t} else if (name === 'disabled') {\n\t\t\tthis.input.disabled = this.hasAttribute('disabled');\n\t\t} else if (name === 'indeterminate') {\n\t\t\tthis.input.indeterminate = this.hasAttribute('indeterminate');\n\t\t} else if (name === 'value') {\n\t\t\t// keep payload in sync; do not toggle checked here\n\t\t\tthis.#internalValue = newValue ?? undefined;\n\t\t\tthis.input.value = this.value;\n\t\t\t// If currently checked, update the submitted payload\n\t\t\tif (this.input.checked) {\n\t\t\t\tthis.internals.setFormValue(this.value);\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Sets up the attributes for the checkbox.\n\t /\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\t// if some value was set via value setter then dont use default value\n\t\tif (this.pristine) {\n\t\t\tthis.value = this.#internalValue;\n\t\t\tthis.pristine = false;\n\t\t}\n\t}\n\n\t/\n\t Draws the checkbox element.\n\t * @returns {DocumentFragment} The created fragment.\n\t /\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-checkbox');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.type = 'checkbox';\n\t\tinput.id = 'checkbox';\n\t\tinput.name = this.name \|\| 'checkbox';\n\t\tinput.checked = this.checked;\n\t\tinput.disabled = this.disabled;\n\t\tinput.indeterminate = this.indeterminate;\n\t\tinput.required = this.required;\n\t\tinput.value = this.value;\n\n\t\tlet label = document.createElement('label');\n\t\tlabel.htmlFor = 'checkbox';\n\t\tlabel.innerHTML = '<slot></slot>';\n\n\t\t// Error\n\t\tlet errorSlot = document.createElement('slot');\n\t\terrorSlot.setAttribute('name', 'error');\n\n\t\tlet error = document.createElement('div');\n\t\terror.setAttribute('slot', 'error');\n\n\t\tnative.append(input);\n\t\tnative.append(label);\n\t\tnative.append(errorSlot);\n\n\t\tthis.append(error);\n\n\t\tthis.input = input;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/\n\t Adds an event listener after drawing the checkbox.\n\t /\n\tafterDraw() {\n\t\tif (!this.disabled) {\n\t\t\tthis.input.addEventListener('input', (e) => {\n\t\t\t\tthis.validate();\n\n\t\t\t\tthis.pristine = false;\n\t\t\t\tthis.propagateValidation();\n\n\t\t\t\t// User interaction decides the checked state; value stays as payload\n\t\t\t\tthis.indeterminate = false;\n\t\t\t\tthis.checked = e.target.checked;\n\n\t\t\t\t// Fire checkbox-specific event name\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-checkbox:input');\n\t\t\t});\n\n\t\t\tthis.input.addEventListener('change', (e) => {\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-checkbox:change');\n\t\t\t});\n\n\t\t\tthis.addEventListener('wje-checkbox:invalid', (e) => {\n\t\t\t\tthis.invalid = true;\n\t\t\t\tthis.pristine = false;\n\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t});\n\n\t\t\tthis.validate();\n\n\t\t\tif (this.invalid) {\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Removes the event listener when the checkbox is disconnected.\n\t /\n\tbeforeDisconnect() {\n\t\tevent.removeElement(this.input);\n\t}\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Checkbox from './checkbox.element.js';\n\n// export from \"./checkbox.element.js\";\nexport default Checkbox;\n\nWJElement.define('wje-checkbox', Checkbox);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-checkbox.js","sources":["../packages/wje-checkbox/checkbox.element.js","../packages/wje-checkbox/checkbox.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This method dispatches a custom event named \"wje-toggle:change\".\n * It is triggered when the input event is fired, which happens when the state of the checkbox changes.\n * The event is dispatched on the current instance of the Checkbox class.\n * @documentation https://elements.webjet.sk/components/checkbox\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The checkbox main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;\n /\nexport default class Checkbox extends FormAssociatedElement {\n\t#internalValue;\n\t/\n\t Checkbox constructor method.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.invalid = false;\n\t\tthis.pristine = true;\n\t}\n\n\t/\n\t Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t /\n\tset value(value) {\n\t\tthis.#internalValue = value;\n\t\tif (this.input) {\n\t\t\tthis.input.value = value;\n\t\t}\n\t}\n\n\t/\n\t Getter for the value attribute.\n\t * @returns {string} The value of the attribute.\n\t /\n\tget value() {\n\t\treturn this.#internalValue ?? this.getAttribute('value') ?? 'on';;\n\t}\n\n\t/\n\t Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t /\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/\n\t Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t /\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/\n\t Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t /\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/\n\t Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t /\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/\n\t Sets or removes the 'indeterminate' attribute for the object.\n\t * This property typically reflects the visual or functional state where\n\t * the component is neither fully active nor inactive.\n\t * @param {boolean} value A boolean where `true` indicates the 'indeterminate'\n\t * state should be set, and `false` removes it.\n\t /\n\tset indeterminate(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('indeterminate', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('indeterminate');\n\t\t}\n\t}\n\n\t/\n\t Retrieves the current state of the 'indeterminate' attribute.\n\t \n\t The 'indeterminate' attribute is typically used to signify a state\n\t * where a checkbox is neither checked nor unchecked, such as a partially\n\t * selected state.\n\t * @returns {boolean} Returns true if the 'indeterminate' attribute is present; otherwise, false.\n\t /\n\tget indeterminate() {\n\t\treturn this.hasAttribute('indeterminate');\n\t}\n\n\t/\n\t Set checked attribute.\n\t * @param {boolean} value true if the toggle is checked, false otherwise\n\t /\n\tset checked(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('checked', '');\n\t\t\tthis.internals.setFormValue(this.value); // len ak je checked\n\t\t} else {\n\t\t\tthis.removeAttribute('checked');\n\t\t\tthis.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n\t\t}\n\t\tif (this.input) {\n\t\t\tthis.input.checked = value;\n\t\t}\n\t}\n\n\t/\n\t Get checked attribute.\n\t * @returns {boolean} true if the toggle is checked, false otherwise\n\t /\n\tget checked() {\n\t\treturn this.hasAttribute('checked');\n\t}\n\n\t/\n\t The class name for the Checkbox.\n\t /\n\tclassName = 'Checkbox';\n\n\t/\n\t Getter for the CSS stylesheet.\n\t * @returns {string} The CSS stylesheet.\n\t /\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tstatic get observedAttributes() {\n\t\treturn ['checked', 'disabled', 'value', 'indeterminate'];\n\t}\n\n\tattributeChangedCallback(name, oldValue, newValue) {\n\t\tif (!this.input) return;\n\t\tif (name === 'checked') {\n\t\t\tconst isChecked = this.hasAttribute('checked');\n\t\t\tthis.input.checked = isChecked;\n\t\t\t// Reflect into form value\n\t\t\tif (isChecked) {\n\t\t\t\tthis.internals.setFormValue(this.value);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t} else if (name === 'disabled') {\n\t\t\tthis.input.disabled = this.hasAttribute('disabled');\n\t\t} else if (name === 'indeterminate') {\n\t\t\tthis.input.indeterminate = this.hasAttribute('indeterminate');\n\t\t} else if (name === 'value') {\n\t\t\t// keep payload in sync; do not toggle checked here\n\t\t\tthis.#internalValue = newValue ?? undefined;\n\t\t\tthis.input.value = this.value;\n\t\t\t// If currently checked, update the submitted payload\n\t\t\tif (this.input.checked) {\n\t\t\t\tthis.internals.setFormValue(this.value);\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Sets up the attributes for the checkbox.\n\t /\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\t// if some value was set via value setter then dont use default value\n\t\tif (this.pristine) {\n\t\t\tthis.value = this.#internalValue;\n\t\t\tthis.pristine = false;\n\t\t}\n\t}\n\n\t/\n\t Draws the checkbox element.\n\t * @returns {DocumentFragment} The created fragment.\n\t /\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-checkbox');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.type = 'checkbox';\n\t\tinput.id = 'checkbox';\n\t\tinput.name = this.name \|\| 'checkbox';\n\t\tinput.checked = this.checked;\n\t\tinput.disabled = this.disabled;\n\t\tinput.indeterminate = this.indeterminate;\n\t\tinput.required = this.required;\n\t\tinput.value = this.value;\n\n\t\tlet label = document.createElement('label');\n\t\tlabel.htmlFor = 'checkbox';\n\t\tlabel.innerHTML = '<slot></slot>';\n\n\t\t// Error\n\t\tlet errorSlot = document.createElement('slot');\n\t\terrorSlot.setAttribute('name', 'error');\n\n\t\tlet error = document.createElement('div');\n\t\terror.setAttribute('slot', 'error');\n\n\t\tnative.append(input);\n\t\tnative.append(label);\n\t\tnative.append(errorSlot);\n\n\t\tthis.append(error);\n\n\t\tthis.input = input;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/\n\t Adds an event listener after drawing the checkbox.\n\t /\n\tafterDraw() {\n\t\tif (!this.disabled) {\n\t\t\tthis.input.addEventListener('input', (e) => {\n\t\t\t\tthis.validate();\n\n\t\t\t\tthis.pristine = false;\n\t\t\t\tthis.propagateValidation();\n\n\t\t\t\t// User interaction decides the checked state; value stays as payload\n\t\t\t\tthis.indeterminate = false;\n\t\t\t\tthis.checked = e.target.checked;\n\n\t\t\t\t// Fire checkbox-specific event name\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:input');\n\t\t\t});\n\n\t\t\tthis.input.addEventListener('change', (e) => {\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:change');\n\t\t\t});\n\n\t\t\tthis.addEventListener('wje-toggle:invalid', (e) => {\n\t\t\t\tthis.invalid = true;\n\t\t\t\tthis.pristine = false;\n\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t});\n\n\t\t\tthis.validate();\n\n\t\t\tif (this.invalid) {\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Removes the event listener when the checkbox is disconnected.\n\t /\n\tbeforeDisconnect() {\n\t\tevent.removeElement(this.input);\n\t}\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Checkbox from './checkbox.element.js';\n\n// export from \"./checkbox.element.js\";\nexport default Checkbox;\n\nWJElement.define('wje-checkbox', Checkbox);\n"],"names":[],"mappings":"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"}

package/dist/wje-input.js CHANGED Viewed

@@ -25,7 +25,6 @@ class Input extends FormAssociatedElement {
   set value(value) {
     this.internals.setFormValue(value);
     if (this.input) this.input.value = value;
-    this.setAttribute("value", value);
     this.pristine = false;
     this._value = value;
   }
@@ -291,6 +290,7 @@ class Input extends FormAssociatedElement {
       this.native.classList.add("focused");
     });
     this.input.addEventListener("blur", (e) => {
+      console.log("Input blur event", e);
       this.native.classList.remove("focused");
       if (!e.target.value) this.labelElement.classList.remove("fade");
     });

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 { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.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 {FormAssociatedElement}\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 FormAssociatedElement {\n /\n Creates an instance of Input.\n /\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\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.setAttribute('value', value);\n\n this.pristine = false;\n this._value = value;\n }\n\n /\n Retrieves the value from the input element if available; otherwise,\n * returns the internal _value property or an empty string as the default.\n * @returns {string} The current value from the input element, the internal _value, or an empty string.\n /\n get value() {\n return this.input?.value ?? this._value ?? '';\n }\n\n /\n Sets the label attribute of the element.\n * @param {string} value The value to set as the label attribute.\n /\n set label(value) {\n this.setAttribute('label', value);\n }\n\n /\n Retrieves the value of the 'label' attribute if it exists.\n * If the 'label' attribute is not set, it returns false.\n * @returns {string\|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n /\n get label() {\n return this.getAttribute('label') \|\| false;\n }\n\n /\n Sets the custom error display attribute for an element.\n * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.\n /\n set customErrorDisplay(value) {\n if (value) {\n this.setAttribute('custom-error-display', '');\n } else {\n this.removeAttribute('custom-error-display');\n }\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 Sets the `validateOnChange` property. If set to a truthy value, it adds the\n * `validate-on-change` attribute to the element. If set to a falsy value, it\n * removes the `validate-on-change` attribute from the element.\n * @param {boolean} value Determines whether to add or remove the\n * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n * falsy value removes it.\n /\n set validateOnChange(value) {\n if (value) {\n this.setAttribute('validate-on-change', '');\n } else {\n this.removeAttribute('validate-on-change');\n }\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 @summary Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n /\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /\n @summary Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n /\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /\n Sets or removes the 'clearable' attribute on the element.\n * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.\n * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.\n /\n set clearable(value) {\n if (value) {\n this.setAttribute('clearable', '');\n } else {\n this.removeAttribute('clearable');\n }\n }\n\n /\n Checks if the 'clearable' attribute is present on the element.\n * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.\n /\n get clearable() {\n return this.hasAttribute('clearable');\n }\n\n /\n Sets the placeholder value for an element. If the provided value is non-empty,\n * it assigns the value to the \"placeholder\" attribute. Otherwise, it removes\n * the \"placeholder\" attribute from the element.\n * @param {string} value The placeholder text to set or null/undefined to remove the attribute.\n /\n set placeholder(value) {\n if (value) {\n this.setAttribute('placeholder', value);\n } else {\n this.removeAttribute('placeholder');\n }\n }\n\n /\n Retrieves the value of the 'placeholder' attribute from the element.\n * If the attribute is not set, it returns an empty string.\n * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.\n /\n get placeholder() {\n return this.getAttribute('placeholder') \|\| '';\n }\n\n /\n Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.\n * If no value is provided, it removes the `variant` attribute from the element.\n * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.\n /\n set variant(value) {\n if (value) {\n this.setAttribute('variant', value);\n } else {\n this.removeAttribute('variant');\n }\n }\n\n /\n Retrieves the value of the 'variant' attribute from the element.\n * If the attribute is not set, it defaults to 'default'.\n * @returns {string} The value of the 'variant' attribute or 'default' if not set.\n /\n get variant() {\n return this.getAttribute('variant') \|\| 'default';\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 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 /\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);\n\n if (this.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 errorSlot = document.createElement('slot');\n errorSlot.setAttribute('name', 'error');\n\n let error = document.createElement('div');\n error.setAttribute('slot', 'error');\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 wrapper.appendChild(start); // zmenene\n native.classList.add('has-start');\n }\n\n if (this.label) {\n if (this.variant === 'standard') {\n native.append(label);\n } else {\n inputWrapper.appendChild(label);\n }\n }\n\n inputWrapper.appendChild(input);\n wrapper.appendChild(inputWrapper);\n\n native.appendChild(wrapper);\n native.append(errorSlot);\n\n this.append(error);\n\n if (this.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 wrapper.appendChild(end);// zmenene\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.validate();\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('wje-input: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.validate();\n\n if (this.invalid) {\n this.showInvalidMessage();\n }\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","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":";;;;;;AA8Be,MAAM,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,EAIrD,cAAc;AACV,UAAO;AAsLX;AAAA;AAAA;AAAA;AAAA,qCAAY;AApLR,SAAK,UAAU;AACf,SAAK,WAAW;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,UAAU,aAAa,KAAK;AAEjC,QAAI,KAAK,MAAO,MAAK,MAAM,QAAQ;AAEnC,SAAK,aAAa,SAAS,KAAK;AAEhC,SAAK,WAAW;AAChB,SAAK,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;;AACR,aAAO,UAAK,UAAL,mBAAY,UAAS,KAAK,UAAU;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB,OAAO;AAC1B,QAAI,OAAO;AACP,WAAK,aAAa,wBAAwB,EAAE;AAAA,IACxD,OAAe;AACH,WAAK,gBAAgB,sBAAsB;AAAA,IACvD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,KAAK,aAAa,sBAAsB;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,IAAI,iBAAiB,OAAO;AACxB,QAAI,OAAO;AACP,WAAK,aAAa,sBAAsB,EAAE;AAAA,IACtD,OAAe;AACH,WAAK,gBAAgB,oBAAoB;AAAA,IACrD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB;AACnB,WAAO,KAAK,aAAa,oBAAoB;AAAA,EACrD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,IAAI,eAAe;AACf,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,IAAI,aAAa,OAAO;AACpB,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,UAAU,OAAO;AACjB,QAAI,OAAO;AACP,WAAK,aAAa,aAAa,EAAE;AAAA,IAC7C,OAAe;AACH,WAAK,gBAAgB,WAAW;AAAA,IAC5C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,IAAI,YAAY,OAAO;AACnB,QAAI,OAAO;AACP,WAAK,aAAa,eAAe,KAAK;AAAA,IAClD,OAAe;AACH,WAAK,gBAAgB,aAAa;AAAA,IAC9C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,cAAc;AACd,WAAO,KAAK,aAAa,aAAa,KAAK;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,KAAK;AAAA,IAC9C,OAAe;AACH,WAAK,gBAAgB,SAAS;AAAA,IAC1C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS,QAAQ,YAAY,eAAe,SAAS,WAAW,cAAc;AAAA,EAC9F;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAEpB,QAAI,KAAK,UAAU;AACf,WAAK,QAAQ,KAAK;AAClB,WAAK,WAAW;AAAA,IAC5B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,eAAe,KAAK,QAAQ,MAAM,OAAO;AAC7C,QAAI,aAAa,KAAK,QAAQ,MAAM,KAAK;AACtB,SAAK,QAAQ,MAAM,OAAO;AAC7C,QAAI,WAAW,SAAS,uBAAwB;AAGhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,gBAAgB,KAAK,OAAO;AAEjD,QAAI,KAAK,QAAS,QAAO,UAAU,IAAI,WAAW;AAElD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,SAAS;AAE/B,QAAI,eAAe,SAAS,cAAc,KAAK;AAC/C,iBAAa,aAAa,QAAQ,SAAS;AAC3C,iBAAa,UAAU,IAAI,eAAe;AAG1C,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,YAAY,KAAK;AACvB,QAAI,KAAK,SAAS,CAAC,KAAK,aAAa,OAAO,EAAG,OAAM,UAAU,IAAI,MAAM;AAGzE,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,QAAQ,MAAM;AACjC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,SAAS,KAAK,SAAS,EAAE;AAC5C,UAAM,UAAU,IAAI,cAAc;AAElC,UAAM,aAAa,MAAM,KAAK,KAAK,UAAU,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;AAEtE,eAAW,QAAQ,CAAC,SAAS;AACzB,UAAI,KAAK,aAAa,IAAI,GAAG;AACzB,cAAM,aAAa,MAAM,KAAK,IAAI,KAAK,EAAE;AAAA,MACzD;AAAA,IACA,CAAS;AAGD,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,OAAO;AAEtC,QAAI,QAAQ,SAAS,cAAc,KAAK;AACxC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,QAAQ;AACZ,QAAI,cAAc;AACd,cAAQ,SAAS,cAAc,MAAM;AACrC,YAAM,aAAa,QAAQ,OAAO;AAClC,YAAM,aAAa,QAAQ,OAAO;AAAA,IAC9C;AAEQ,QAAI,MAAM;AACV,QAAI,YAAY;AACZ,YAAM,SAAS,cAAc,MAAM;AACnC,UAAI,aAAa,QAAQ,KAAK;AAC9B,UAAI,aAAa,QAAQ,KAAK;AAAA,IAC1C;AAEQ,QAAI,cAAc;AACd,cAAQ,YAAY,KAAK;AACzB,aAAO,UAAU,IAAI,WAAW;AAAA,IAC5C;AAEQ,QAAI,KAAK,OAAO;AACZ,UAAI,KAAK,YAAY,YAAY;AAC7B,eAAO,OAAO,KAAK;AAAA,MACnC,OAAmB;AACH,qBAAa,YAAY,KAAK;AAAA,MAC9C;AAAA,IACA;AAEQ,iBAAa,YAAY,KAAK;AAC9B,YAAQ,YAAY,YAAY;AAEhC,WAAO,YAAY,OAAO;AAC1B,WAAO,OAAO,SAAS;AAEvB,SAAK,OAAO,KAAK;AAEjB,QAAI,KAAK,WAAW;AAChB,WAAK,QAAQ,SAAS,cAAc,YAAY;AAChD,WAAK,MAAM,UAAU,IAAI,OAAO;AAChC,WAAK,MAAM,aAAa,QAAQ,MAAM;AACtC,WAAK,MAAM,aAAa,QAAQ,OAAO;AAEvC,UAAI,YAAY,SAAS,cAAc,UAAU;AACjD,gBAAU,aAAa,QAAQ,GAAG;AAClC,WAAK,MAAM,YAAY,SAAS;AAChC,mBAAa,YAAY,KAAK,KAAK;AAAA,IAC/C;AAEQ,QAAI,YAAY;AACZ,cAAQ,YAAY,GAAG;AACvB,aAAO,UAAU,IAAI,SAAS;AAAA,IAC1C;AAEQ,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AACd,SAAK,eAAe;AACpB,SAAK,QAAQ;AACb,SAAK,eAAe;AAEpB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,WAAK,aAAa,UAAU,IAAI,MAAM;AACtC,WAAK,OAAO,UAAU,IAAI,SAAS;AAAA,IAC/C,CAAS;AAED,SAAK,MAAM,iBAAiB,QAAQ,CAAC,MAAM;AACvC,WAAK,OAAO,UAAU,OAAO,SAAS;AACtC,UAAI,CAAC,EAAE,OAAO,MAAO,MAAK,aAAa,UAAU,OAAO,MAAM;AAAA,IAC1E,CAAS;AAED,SAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,WAAK,SAAU;AAEf,UAAI,KAAK,kBAAkB;AACvB,aAAK,WAAW;AAChB,aAAK,oBAAqB;AAAA,MAC1C;AAEY,WAAK,MAAM,UAAU,OAAO,UAAU;AACtC,WAAK,aAAa,UAAU,IAAI,MAAM;AAKtC,YAAM,oBAAoB,MAAM,mBAAmB;AAAA,QAC/C,OAAO,KAAK,MAAM;AAAA,MAClC,CAAa;AAED,WAAK,QAAQ,KAAK,MAAM;AAAA,IACpC,CAAS;AAED,SAAK,iBAAiB,qBAAqB,CAAC,MAAM;AAC9C,WAAK,UAAU;AACf,WAAK,WAAW;AAEhB,WAAK,mBAAoB;AAEzB,UAAI,KAAK,oBAAoB;AACzB,UAAE,eAAgB;AAAA,MAClC;AAAA,IACA,CAAS;AAED,SAAK,iBAAiB,SAAS,MAAM,KAAK,MAAM,OAAO;AAEvD,QAAI,KAAK,OAAO;AACZ,WAAK,MAAM,iBAAiB,oBAAoB,CAAC,MAAM;AACnD,aAAK,MAAM,QAAQ;AACnB,cAAM,oBAAoB,KAAK,OAAO,iBAAiB;AAAA,MACvE,CAAa;AAAA,IACb;AAEQ,SAAK,SAAU;AAEf,QAAI,KAAK,SAAS;AACd,WAAK,mBAAoB;AAAA,IACrC;AAAA,EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,QAAQ,IAAI,WAAW,MAAM;AACzB,QAAI,WAAW,WAAW,UAAU,QAAQ,OAAO;AAEnD,WAAO,GAAG,iBAAiB,QAAQ,EAAE,SAAS,IAAI,OAAO;AAAA,EACjE;AACA;AC/aA,MAAM,OAAO,aAAa,KAAK;"}
1	+ {"version":3,"file":"wje-input.js","sources":["../packages/wje-input/input.element.js","../packages/wje-input/input.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.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 {FormAssociatedElement}\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 FormAssociatedElement {\n /\n Creates an instance of Input.\n /\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\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 Retrieves the value from the input element if available; otherwise,\n * returns the internal _value property or an empty string as the default.\n * @returns {string} The current value from the input element, the internal _value, or an empty string.\n /\n get value() {\n return this.input?.value ?? this._value ?? '';\n }\n\n /\n Sets the label attribute of the element.\n * @param {string} value The value to set as the label attribute.\n /\n set label(value) {\n this.setAttribute('label', value);\n }\n\n /\n Retrieves the value of the 'label' attribute if it exists.\n * If the 'label' attribute is not set, it returns false.\n * @returns {string\|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n /\n get label() {\n return this.getAttribute('label') \|\| false;\n }\n\n /\n Sets the custom error display attribute for an element.\n * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.\n /\n set customErrorDisplay(value) {\n if (value) {\n this.setAttribute('custom-error-display', '');\n } else {\n this.removeAttribute('custom-error-display');\n }\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 Sets the `validateOnChange` property. If set to a truthy value, it adds the\n * `validate-on-change` attribute to the element. If set to a falsy value, it\n * removes the `validate-on-change` attribute from the element.\n * @param {boolean} value Determines whether to add or remove the\n * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n * falsy value removes it.\n /\n set validateOnChange(value) {\n if (value) {\n this.setAttribute('validate-on-change', '');\n } else {\n this.removeAttribute('validate-on-change');\n }\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 @summary Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n /\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /\n @summary Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n /\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /\n Sets or removes the 'clearable' attribute on the element.\n * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.\n * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.\n /\n set clearable(value) {\n if (value) {\n this.setAttribute('clearable', '');\n } else {\n this.removeAttribute('clearable');\n }\n }\n\n /\n Checks if the 'clearable' attribute is present on the element.\n * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.\n /\n get clearable() {\n return this.hasAttribute('clearable');\n }\n\n /\n Sets the placeholder value for an element. If the provided value is non-empty,\n * it assigns the value to the \"placeholder\" attribute. Otherwise, it removes\n * the \"placeholder\" attribute from the element.\n * @param {string} value The placeholder text to set or null/undefined to remove the attribute.\n /\n set placeholder(value) {\n if (value) {\n this.setAttribute('placeholder', value);\n } else {\n this.removeAttribute('placeholder');\n }\n }\n\n /\n Retrieves the value of the 'placeholder' attribute from the element.\n * If the attribute is not set, it returns an empty string.\n * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.\n /\n get placeholder() {\n return this.getAttribute('placeholder') \|\| '';\n }\n\n /\n Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.\n * If no value is provided, it removes the `variant` attribute from the element.\n * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.\n /\n set variant(value) {\n if (value) {\n this.setAttribute('variant', value);\n } else {\n this.removeAttribute('variant');\n }\n }\n\n /\n Retrieves the value of the 'variant' attribute from the element.\n * If the attribute is not set, it defaults to 'default'.\n * @returns {string} The value of the 'variant' attribute or 'default' if not set.\n /\n get variant() {\n return this.getAttribute('variant') \|\| 'default';\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 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 /\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);\n\n if (this.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 errorSlot = document.createElement('slot');\n errorSlot.setAttribute('name', 'error');\n\n let error = document.createElement('div');\n error.setAttribute('slot', 'error');\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 wrapper.appendChild(start); // zmenene\n native.classList.add('has-start');\n }\n\n if (this.label) {\n if (this.variant === 'standard') {\n native.append(label);\n } else {\n inputWrapper.appendChild(label);\n }\n }\n\n inputWrapper.appendChild(input);\n wrapper.appendChild(inputWrapper);\n\n native.appendChild(wrapper);\n native.append(errorSlot);\n\n this.append(error);\n\n if (this.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 wrapper.appendChild(end);// zmenene\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 console.log(\"Input blur event\", 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.validate();\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('wje-input: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.validate();\n\n if (this.invalid) {\n this.showInvalidMessage();\n }\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","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.213",
+  "version": "0.1.215",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",