wj-elements 0.1.223 → 0.1.224
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.
package/dist/wje-radio-group.js
CHANGED
|
@@ -133,8 +133,7 @@ class RadioGroup extends FormAssociatedElement {
|
|
|
133
133
|
this.validate();
|
|
134
134
|
this.pristine = false;
|
|
135
135
|
this.propagateValidation();
|
|
136
|
-
|
|
137
|
-
event.dispatchCustomEvent(this, "wje-toggle:input");
|
|
136
|
+
event.dispatchCustomEvent(this, "wje-radio-group:change");
|
|
138
137
|
});
|
|
139
138
|
this.addEventListener("wje-radio-group:invalid", (e) => {
|
|
140
139
|
this.invalid = true;
|
|
@@ -167,6 +166,7 @@ class RadioGroup extends FormAssociatedElement {
|
|
|
167
166
|
radio.checked = true;
|
|
168
167
|
this.value = radio.value;
|
|
169
168
|
this.input.value = radio.value;
|
|
169
|
+
this.input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
|
|
170
170
|
return true;
|
|
171
171
|
}
|
|
172
172
|
console.error(`Radio with value ${radio.value} not found`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n #internalValue = '';\n\n /**\n * Creates an instance of RadioGroup.\n * @class\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.#internalValue = value;\n this.pristine = false;\n this.internals.setFormValue(value);\n this.setAttribute('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.getAttribute('value');\n }\n /**\n * Setter for the name attribute.\n * @param {string} value The name to set.\n */\n set required(value) {\n if (value === null || value === undefined) {\n this.removeAttribute('required');\n } else {\n this.setAttribute('required', '');\n }\n }\n\n /**\n * Getter for the name attribute.\n * @returns {boolean}\n */\n get required() {\n return this.hasAttribute('required');\n }\n\n className = 'RadioGroup';\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 static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n if (this.pristine) {\n this.pristine = false;\n }\n }\n\n /**\n * Draws the component for the radio group.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n let input = document.createElement('input');\n input.type = 'text';\n input.name = this.name;\n input.disabled = this.disabled;\n input.required = this.required;\n input.value = this.value || '';\n input.classList.add('input-hidden');\n\n let slot = document.createElement('slot');\n\n let label = document.createElement('label');\n label.innerText = this.label;\n if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n if (this.label) {\n native.append(label);\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 native.append(input);\n native.append(slot);\n native.append(errorSlot);\n\n this.append(error);\n\n fragment.append(native);\n\n this.input = input;\n\n return fragment;\n }\n\n /**\n * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n */\n afterDraw() {\n if(this.value)\n this.checkRadio(this.getRadioByValue(this.value));\n\n // this.addEventListener('wje-radio:input', (e) => {\n // this.value = e.detail.context.value;\n // });\n\n this.validate();\n\n if (this.invalid) {\n this.showInvalidMessage();\n }\n\n this.addEventListener('wje-radio:change', (e) => {\n this.checkRadio(e.target);\n\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n });\n\n this.input.addEventListener('input', (e) => {\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n
|
|
1
|
+
{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n #internalValue = '';\n\n /**\n * Creates an instance of RadioGroup.\n * @class\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.#internalValue = value;\n this.pristine = false;\n this.internals.setFormValue(value);\n this.setAttribute('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.getAttribute('value');\n }\n /**\n * Setter for the name attribute.\n * @param {string} value The name to set.\n */\n set required(value) {\n if (value === null || value === undefined) {\n this.removeAttribute('required');\n } else {\n this.setAttribute('required', '');\n }\n }\n\n /**\n * Getter for the name attribute.\n * @returns {boolean}\n */\n get required() {\n return this.hasAttribute('required');\n }\n\n className = 'RadioGroup';\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 static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n if (this.pristine) {\n this.pristine = false;\n }\n }\n\n /**\n * Draws the component for the radio group.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n let input = document.createElement('input');\n input.type = 'text';\n input.name = this.name;\n input.disabled = this.disabled;\n input.required = this.required;\n input.value = this.value || '';\n input.classList.add('input-hidden');\n\n let slot = document.createElement('slot');\n\n let label = document.createElement('label');\n label.innerText = this.label;\n if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n if (this.label) {\n native.append(label);\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 native.append(input);\n native.append(slot);\n native.append(errorSlot);\n\n this.append(error);\n\n fragment.append(native);\n\n this.input = input;\n\n return fragment;\n }\n\n /**\n * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n */\n afterDraw() {\n if(this.value)\n this.checkRadio(this.getRadioByValue(this.value));\n\n // this.addEventListener('wje-radio:input', (e) => {\n // this.value = e.detail.context.value;\n // });\n\n this.validate();\n\n if (this.invalid) {\n this.showInvalidMessage();\n }\n\n this.addEventListener('wje-radio:change', (e) => {\n this.checkRadio(e.target);\n\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n });\n\n this.input.addEventListener('input', (e) => {\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n event.dispatchCustomEvent(this, 'wje-radio-group:change');\n });\n\n this.addEventListener('wje-radio-group:invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n });\n\n }\n\n /**\n * Returns the radio button with the given value.\n * @param {string} value The value of the radio button.\n * @returns {Radio} The radio button.\n */\n getRadioByValue(value) {\n return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n }\n\n /**\n * Removes the check from all radio buttons.\n */\n removeCheck() {\n this.getAllElements().forEach((el) => {\n if (el instanceof Radio) el.checked = false;\n });\n }\n\n /**\n * Sets the given radio button to checked.\n */\n checkRadio(radio) {\n this.removeCheck();\n\n if (radio) {\n // debugger\n radio.checked = true;\n this.value = radio.value;\n this.input.value = radio.value;\n this.input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n return true;\n }\n\n console.error(`Radio with value ${radio.value} not found`);\n return false;\n }\n\n /**\n * Retrieves all direct child elements of the current element.\n * @returns {HTMLElement[]} An array of child elements.\n */\n getAllElements() {\n return Array.from(this.children);\n }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.224",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|