npm - wj-elements - Versions diffs - 0.3.0 → 0.3.1 - Mend

wj-elements 0.3.0 → 0.3.1

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

package/dist/wje-radio-group.js.map CHANGED Viewed

	@@ -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 /\n Setter for the label attribute.\n * @param {string} value The label to set.\n /\n set label(value) {\n if (value === null \|\| value === undefined) {\n this.removeAttribute('label');\n } else {\n this.setAttribute('label', value);\n }\n }\n\n /\n Getter for the label attribute.\n * @returns {string\|null}\n /\n get label() {\n return this.getAttribute('label');\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 ['required', 'value', 'disabled', 'invalid', 'label'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (['required', 'disabled', 'invalid', 'label'].includes(name)) this.syncAria();\n if (name === 'value' && this.pristine) {\n const radio = this.getRadioByValue(this.value);\n if (radio) this.checkRadio(radio);\n }\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 this.syncAria();\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 if (this.invalid) {\n this.invalid = false;\n // this.errorMessage.textContent = '';\n this.internals.setValidity({}, '');\n }\n this.syncAria();\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('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n });\n\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n const label = this.label?.trim();\n const requiredInvalid = this.required && !this.value;\n const invalid = this.invalid \|\| requiredInvalid;\n\n this.setAriaState({\n role: 'radiogroup',\n required: this.required,\n invalid,\n disabled: this.disabled,\n ...(label ? { label } : {}),\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 this.syncAria();\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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"}
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 /\n Setter for the label attribute.\n * @param {string} value The label to set.\n /\n set label(value) {\n if (value === null \|\| value === undefined) {\n this.removeAttribute('label');\n } else {\n this.setAttribute('label', value);\n }\n }\n\n /\n Getter for the label attribute.\n * @returns {string\|null}\n /\n get label() {\n return this.getAttribute('label');\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 ['required', 'value', 'disabled', 'invalid', 'label'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (['required', 'disabled', 'invalid', 'label'].includes(name)) this.syncAria();\n if (name === 'value' && this.pristine) {\n const radio = this.getRadioByValue(this.value);\n if (radio) this.checkRadio(radio);\n }\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 this.syncAria();\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 if (this.invalid) {\n this.invalid = false;\n // this.errorMessage.textContent = '';\n this.internals.setValidity({}, '');\n }\n this.syncAria();\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('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n });\n\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n const label = this.label?.trim();\n const requiredInvalid = this.required && !this.value;\n const invalid = this.invalid \|\| requiredInvalid;\n\n this.setAriaState({\n role: 'radiogroup',\n required: this.required,\n invalid,\n disabled: this.disabled,\n ...(label ? { label } : {}),\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 this.syncAria();\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/dist/wje-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.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 Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n /\n\nexport default class Radio extends WJElement {\n /\n Creates an instance of Radio.\n /\n constructor() {\n super();\n\n }\n\n set value(value) {\n this.setAttribute('value', value);\n }\n\n get value() {\n return this.getAttribute('value');\n }\n\n /\n Sets the name of the radio button.\n * @param value\n /\n set checked(value) {\n if (value) {\n this.setAttribute('checked', '');\n } else {\n this.removeAttribute('checked');\n }\n }\n\n /\n Gets the checked property of the radio button.\n * @returns {boolean}\n /\n get checked() {\n return this.hasAttribute('checked');\n }\n\n /\n Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n /\n set disabled(value) {\n if (value) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /\n Get disabled attribute value.\n * @returns {boolean} true if the toggle is disabled, false otherwise\n /\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /\n Sets the color of the radio button.\n * @type {string}\n /\n className = 'Radio';\n\n /\n Returns the CSS styles for the component.\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 ['checked', 'disabled', 'value'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (this.input) {\n if (name === 'checked') this.input.checked = this.checked;\n if (name === 'disabled') this.input.disabled = this.disabled;\n if (name === 'value') {\n this.input.id = this.value + '-radio';\n this.input.name = this.value + '-radio';\n }\n }\n if (['checked', 'disabled'].includes(name)) this.syncAria();\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the radio button.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-radio');\n\n if (this.color) native.classList.add(this.color);\n\n this.input = document.createElement('input');\n this.input.type = 'radio';\n this.input.id = this.value + '-radio';\n this.input.name = this.value + '-radio';\n this.input.checked = this.checked;\n this.input.disabled = this.disabled;\n\n let label = document.createElement('label');\n label.htmlFor = this.value + '-radio';\n label.innerHTML = '<slot></slot>';\n\n native.appendChild(this.input);\n native.appendChild(label);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Sets up the event listeners for the component.\n /\n afterDraw() {\n if (!this.hasAttribute('disabled')) {\n event.addListener(this.input, 'input', 'wje-radio:change');\n // event.addListener(this, 'click', 'wje-radio:input');\n }\n this.syncAria();\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n this.setAriaState({\n role: 'radio',\n checked: this.checked,\n disabled: this.disabled,\n });\n }\n\n /\n Called when an attribute changes.\n * @param {object} e\n /\n inputEvent = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.checked = e.target.checked;\n };\n\n /\n Toggles the radio button.\n */\n beforeDisconnect() {\n event.removeElement(this);\n }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":";;;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,~~UAAO~~;~~AAwDX~~;AAAA;AAAA;AAAA;AAAA,qCAAY;AAkGZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,QAAE,~~eAAgB~~;~~AAClB~~,QAAE,~~gBAAiB~~;~~AACnB~~,WAAK,UAAU,EAAE,OAAO;AAAA,~~IAC3B~~;AAAA,~~EA5JL~~;AAAA,~~EAEI~~,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,~~EACxC~~;AAAA,~~EAEI~~,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,~~EACxC~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,EAAE;AAAA,~~IAC3C~~,~~OAAe~~;AACH,WAAK,gBAAgB,SAAS;AAAA,~~IAC1C~~;AAAA,~~EACA~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,~~EAC1C~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,~~IAC5C~~,~~OAAe~~;AACH,WAAK,gBAAgB,UAAU;AAAA,~~IAC3C~~;AAAA,~~EACA~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,~~EAC3C~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAYI~~,WAAW,gBAAgB;AACvB,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAOI~~,WAAW,qBAAqB;AAC5B,WAAO,CAAC,WAAW,YAAY,OAAO;AAAA,~~EAC9C~~;AAAA,~~EAEI~~,yBAAyB,MAAM,UAAU,UAAU;;AAC/C,gBAAM,6BAAN,8BAAiC,MAAM,UAAU;AACjD,QAAI,aAAa,SAAU;AAC3B,QAAI,KAAK,OAAO;AACZ,UAAI,SAAS,UAAW,MAAK,MAAM,UAAU,KAAK;AAClD,UAAI,SAAS,WAAY,MAAK,MAAM,WAAW,KAAK;AACpD,UAAI,SAAS,SAAS;AAClB,aAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,aAAK,MAAM,OAAO,KAAK,QAAQ;AAAA,~~MAC/C~~;AAAA,~~IACA~~;~~AACQ~~,QAAI,CAAC,WAAW,UAAU,EAAE,SAAS,IAAI,EAAG,MAAK,~~SAAU~~;AAAA,~~EACnE~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,~~SAAU~~;AAAA,~~EACvB~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,OAAO;AACH,QAAI,WAAW,SAAS,~~uBAAwB~~;~~AAEhD~~,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,SAAK,MAAM,OAAO,KAAK,QAAQ;AAC/B,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,MAAM,WAAW,KAAK;AAE3B,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,KAAK,OAAO,SAAS,kBAAkB;AAAA,~~IAErE~~;~~AACQ~~,SAAK,~~SAAU~~;AAAA,~~EACvB~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,WAAW;AACP,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,IAC3B,CAAS;AAAA,~~EACT~~;AAAA;AAAA;AAAA;AAAA,~~EAeI~~,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,~~EAChC~~;~~AACA~~;ACxLA,MAAM,OAAO,aAAa,KAAK;"}
1	+ {"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.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 Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n /\n\nexport default class Radio extends WJElement {\n /\n Creates an instance of Radio.\n /\n constructor() {\n super();\n\n }\n\n set value(value) {\n this.setAttribute('value', value);\n }\n\n get value() {\n return this.getAttribute('value');\n }\n\n /\n Sets the name of the radio button.\n * @param value\n /\n set checked(value) {\n if (value) {\n this.setAttribute('checked', '');\n } else {\n this.removeAttribute('checked');\n }\n }\n\n /\n Gets the checked property of the radio button.\n * @returns {boolean}\n /\n get checked() {\n return this.hasAttribute('checked');\n }\n\n /\n Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n /\n set disabled(value) {\n if (value) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /\n Get disabled attribute value.\n * @returns {boolean} true if the toggle is disabled, false otherwise\n /\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /\n Sets the color of the radio button.\n * @type {string}\n /\n className = 'Radio';\n\n /\n Returns the CSS styles for the component.\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 ['checked', 'disabled', 'value'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (this.input) {\n if (name === 'checked') this.input.checked = this.checked;\n if (name === 'disabled') this.input.disabled = this.disabled;\n if (name === 'value') {\n this.input.id = this.value + '-radio';\n this.input.name = this.value + '-radio';\n }\n }\n if (['checked', 'disabled'].includes(name)) this.syncAria();\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the radio button.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-radio');\n\n if (this.color) native.classList.add(this.color);\n\n this.input = document.createElement('input');\n this.input.type = 'radio';\n this.input.id = this.value + '-radio';\n this.input.name = this.value + '-radio';\n this.input.checked = this.checked;\n this.input.disabled = this.disabled;\n\n let label = document.createElement('label');\n label.htmlFor = this.value + '-radio';\n label.innerHTML = '<slot></slot>';\n\n native.appendChild(this.input);\n native.appendChild(label);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Sets up the event listeners for the component.\n /\n afterDraw() {\n if (!this.hasAttribute('disabled')) {\n event.addListener(this.input, 'input', 'wje-radio:change');\n // event.addListener(this, 'click', 'wje-radio:input');\n }\n this.syncAria();\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n this.setAriaState({\n role: 'radio',\n checked: this.checked,\n disabled: this.disabled,\n });\n }\n\n /\n Called when an attribute changes.\n * @param {object} e\n /\n inputEvent = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.checked = e.target.checked;\n };\n\n /\n Toggles the radio button.\n */\n beforeDisconnect() {\n event.removeElement(this);\n }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-rate.js","sources":["../packages/wje-rate/rate.element.js","../packages/wje-rate/rate.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Rate` is a custom web component that represents a rating component.\n * @summary This element represents a rating component.\n * @documentation https://elements.webjet.sk/components/rate\n * @status stable\n * @augments {WJElement}\n * @attribute {number} precision - The precision of the rating component.\n * @attribute {number} max - The maximum value of the rating component.\n * @attribute {Array<string>} icons - The icons of the rating component.\n * @csspart native - The native part of the rating component.\n * @cssproperty [--wje-rate-gap=.25rem] - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements.\n * @cssproperty [--wje-rate-color=var(--wje-color-contrast-11)] - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.\n * @cssproperty [--wje-rate-selected-color=var(--wje-color-danger-9)] - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.\n * @tag wje-rate\n /\n\nexport default class Rate extends WJElement {\n /\n Creates an instance of Rate.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Sets the precision of the rating component.\n * @param {number} value The value to set.\n /\n set precision(value) {\n this.setAttribute('precision', value);\n }\n\n /\n Gets the precision of the rating component.\n * @returns {number} The value of the precision.\n /\n get precision() {\n return this.hasAttribute('precision') ? +this.getAttribute('precision') : 1;\n }\n\n /\n Sets the maximum value of the rating component.\n * @param {number} value The value to set.\n /\n set max(value) {\n this.setAttribute('max', value);\n }\n\n /\n Gets the maximum value of the rating component.\n * @returns {number} The value of the maximum value.\n /\n get max() {\n return this.hasAttribute('icons') ? this.icons.length : +this.getAttribute('max');\n }\n\n /\n Sets the icons of the rating component.\n * @param {Array<string>} value The value to set.\n /\n set icons(value) {\n return value;\n }\n\n /\n Gets the icons of the rating component.\n * @returns {Array<string>} The value of the icons.\n /\n get icons() {\n return this.hasAttribute('icons') ? JSON.parse(this.getAttribute('icons').replace(/'/g, '\"')) : ['star'];\n }\n\n /\n Sets the value of the rating component.\n * @param {number} value The value to set.\n /\n set value(value) {\n this.setAttribute('value', value);\n }\n\n /\n Gets the value of the rating component.\n * @returns {number} The value of the rating component.\n /\n get value() {\n return this.hasAttribute('value') ? +this.getAttribute('value') : 0;\n }\n\n /\n Sets the hover value of the rating component.\n * @type {string}\n /\n className = 'Rate';\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 ['is-hover', 'value', 'max', 'disabled', 'readonly'];\n }\n\n /\n Called when an attribute changes.\n * @param {string} name The name of the attribute that changed.\n * @param {string} old The old value of the attribute.\n * @param {string} newName The new value of the attribute.\n /\n attributeChangedCallback(name, old, newName) {\n if (super.attributeChangedCallback) {\n super.attributeChangedCallback(name, old, newName);\n }\n\n if (name === 'is-hover') {\n // this.draw();\n }\n\n if (old !== newName && name !== 'is-hover') {\n this.syncAria();\n }\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the component for the rating component.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-rate');\n\n this.native = native;\n\n if (this.hasAttribute('icons')) {\n let icons = this.icons;\n for (let i = 0; i < icons.length; i++) {\n native.appendChild(this.createIcons(i));\n }\n } else {\n for (let i = 0; i < this.max; i++) {\n native.appendChild(this.createIcons(i));\n }\n }\n\n this.changeRate();\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Adds event listeners after the component is drawn.\n /\n afterDraw() {\n this.syncAria();\n if (this.hasAttribute('disabled') \|\| this.hasAttribute('readonly')) {\n return;\n }\n\n this.addEventListener('mouseenter', this.onMouseEnter);\n this.addEventListener('mouseleave', this.onMouseLeave);\n this.addEventListener('mousemove', this.onMouseMove);\n this.addEventListener('touchstart', this.onTouchStart);\n this.addEventListener('touchend', this.onTouchEnd);\n this.addEventListener('touchmove', this.onTouchMove);\n this.addEventListener('click', this.onClick);\n }\n\n /\n Creates the icons for the rating component.\n * @param {number} i The index of the icon.\n * @returns {Element} The icon element.\n /\n createIcons(i) {\n let div = document.createElement('div');\n div.classList.add('wje-rate-icon');\n\n let icon = this.getIcons(i);\n let clone = icon.cloneNode(true);\n\n div.appendChild(icon);\n div.appendChild(clone);\n\n return div;\n }\n\n /\n Changes the rate of the rating component.\n /\n changeRate() {\n const icons = this.native.children;\n const rateValue =\n this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== undefined\n ? this.hoverValue\n : this.value;\n\n for (let i = 0; i < icons.length; i++) {\n const icon = icons[i];\n const firstIcon = icon.querySelector('wje-icon:first-child');\n const lastIcon = icon.querySelector('wje-icon:last-child');\n\n const isSelected = i < rateValue;\n const isPartial = rateValue > i && rateValue < i + 1;\n\n if (isSelected) {\n icon.classList.add('selected');\n if (this.hasAttribute('selected') && this.getAttribute('selected') === 'filled') {\n lastIcon.setAttribute('filled', '');\n }\n } else {\n icon.classList.remove('selected');\n lastIcon.removeAttribute('filled');\n }\n\n if (isPartial) {\n const percent = ((rateValue - i) 100).toFixed(2);\n icon.classList.add('half');\n\n firstIcon.style.clipPath = `inset(0 0 0 ${percent}%)`;\n lastIcon.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;\n\n lastIcon.removeAttribute('hidden');\n } else {\n icon.classList.remove('half');\n firstIcon.style.clipPath = ``;\n lastIcon.style.clipPath = ``;\n lastIcon.setAttribute('hidden', '');\n }\n\n icon.setAttribute('data-index', i);\n icon.setAttribute('data-rate', rateValue);\n }\n\n this.syncAria();\n }\n\n /*\n Sync ARIA attributes on host.\n /\n syncAria() {\n this.setAriaState({\n role: 'slider',\n valuemin: 0,\n valuemax: this.max,\n valuenow: this.value,\n disabled: this.hasAttribute('disabled'),\n readonly: this.hasAttribute('readonly'),\n });\n }\n\n /\n Event handler for the mouse enter event.\n * @param {Event} e The event.\n /\n onMouseEnter = (e) => {\n e.preventDefault();\n\n this.hoverValue = this.getValueFromXPosition(e.clientX);\n this.changeRate();\n };\n\n /\n Event handler for the mouse leave event.\n * @param {Event} e The event.\n /\n onMouseLeave = (e) => {\n e.preventDefault();\n\n this.hoverValue = 0;\n this.changeRate();\n };\n\n /\n Event handler for the mouse move event.\n * @param {Event} e The event.\n /\n onMouseMove = (e) => {\n e.preventDefault();\n\n let newValue = +this.getValueFromXPosition(e.clientX);\n if (newValue !== +this.hoverValue) {\n this.hoverValue = newValue;\n this.changeRate();\n }\n };\n\n /\n Event handler for the touch start event.\n * @param {Event} e The event.\n /\n onTouchStart = (e) => {\n e.preventDefault();\n\n this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n this.changeRate();\n };\n\n /\n Event handler for the touch end event.\n * @param {Event} e The event.\n /\n onTouchEnd = (e) => {\n e.preventDefault();\n\n this.hoverValue = 0;\n this.changeRate();\n };\n\n /\n Event handler for the touch move event.\n * @param {Event} e The event.\n /\n onTouchMove = (e) => {\n e.preventDefault();\n\n this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n this.changeRate();\n };\n\n /\n Event handler for the click event.\n * @param {Event} e The event.\n /\n onClick = (e) => {\n e.preventDefault();\n\n this.value = +this.hoverValue;\n };\n\n /\n Returns the icons for the rating component.\n * @param {number} index The index of the icon.\n * @returns {Element} The icon element.\n /\n getIcons(index) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', this.max ? this.icons[0] : this.icons[index]);\n\n if (this.hasAttribute('filled')) icon.setAttribute('filled', '');\n\n return icon;\n }\n\n /\n Returns the value from the x position.\n * @param {number} coordinate The x coordinate.\n * @returns {number} The value from the x position.\n /\n getValueFromXPosition(coordinate) {\n const { left, right, width } = this.native.getBoundingClientRect();\n const value = this.roundToPrecision(((coordinate - left) / width) this.max, this.precision);\n\n return Math.min(Math.max(value, 0), this.max);\n }\n\n /*\n Rounds a given number to the nearest specified precision.\n * @param {number} numberToRound The number to be rounded.\n * @param {number} [precision] The precision to which the number should be rounded.\n * @returns {number} - The rounded number.\n * @example\n * roundToPrecision(2.3); // Returns 2.5\n * roundToPrecision(2.3, 0.1); // Returns 2.3\n * roundToPrecision(2.6, 1); // Returns 3\n /\n roundToPrecision(numberToRound, precision = 0.5) {\n const multiplier = 1 / precision;\n return Math.ceil(numberToRound multiplier) / multiplier;\n }\n}\n","import Rate from './rate.element.js';\n\nexport default Rate;\n\nRate.define('wje-rate', Rate);\n"],"names":[],"mappings":";;;;;AAmBe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAuEX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuLZ;AAAA;AAAA;AAAA;AAAA,wCAAe,CAAC,MAAM;AAClB,QAAE,eAAgB;AAElB,WAAK,aAAa,KAAK,sBAAsB,EAAE,OAAO;AACtD,WAAK,WAAY;AAAA,IACpB;AAMD;AAAA;AAAA;AAAA;AAAA,wCAAe,CAAC,MAAM;AAClB,QAAE,eAAgB;AAElB,WAAK,aAAa;AAClB,WAAK,WAAY;AAAA,IACpB;AAMD;AAAA;AAAA;AAAA;AAAA,uCAAc,CAAC,MAAM;AACjB,QAAE,eAAgB;AAElB,UAAI,WAAW,CAAC,KAAK,sBAAsB,EAAE,OAAO;AACpD,UAAI,aAAa,CAAC,KAAK,YAAY;AAC/B,aAAK,aAAa;AAClB,aAAK,WAAY;AAAA,MAC7B;AAAA,IACK;AAMD;AAAA;AAAA;AAAA;AAAA,wCAAe,CAAC,MAAM;AAClB,QAAE,eAAgB;AAElB,WAAK,aAAa,KAAK,sBAAsB,EAAE,QAAQ,CAAC,EAAE,OAAO;AACjE,WAAK,WAAY;AAAA,IACpB;AAMD;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,QAAE,eAAgB;AAElB,WAAK,aAAa;AAClB,WAAK,WAAY;AAAA,IACpB;AAMD;AAAA;AAAA;AAAA;AAAA,uCAAc,CAAC,MAAM;AACjB,QAAE,eAAgB;AAElB,WAAK,aAAa,KAAK,sBAAsB,EAAE,QAAQ,CAAC,EAAE,OAAO;AACjE,WAAK,WAAY;AAAA,IACpB;AAMD;AAAA;AAAA;AAAA;AAAA,mCAAU,CAAC,MAAM;AACb,QAAE,eAAgB;AAElB,WAAK,QAAQ,CAAC,KAAK;AAAA,IACtB;AAAA,EAtUL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW,IAAI,CAAC,KAAK,aAAa,WAAW,IAAI;AAAA,EAClF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,IAAI,OAAO;AACX,SAAK,aAAa,OAAO,KAAK;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM;AACN,WAAO,KAAK,aAAa,OAAO,IAAI,KAAK,MAAM,SAAS,CAAC,KAAK,aAAa,KAAK;AAAA,EACxF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,IAAI,KAAK,MAAM,KAAK,aAAa,OAAO,EAAE,QAAQ,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAAA,EAC/G;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,IAAI,CAAC,KAAK,aAAa,OAAO,IAAI;AAAA,EAC1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,YAAY,SAAS,OAAO,YAAY,UAAU;AAAA,EAClE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,yBAAyB,MAAM,KAAK,SAAS;AACzC,QAAI,MAAM,0BAA0B;AAChC,YAAM,yBAAyB,MAAM,KAAK,OAAO;AAAA,IAC7D;AAMQ,QAAI,QAAQ,WAAW,SAAS,YAAY;AACxC,WAAK,SAAU;AAAA,IAC3B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAU;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,aAAa;AAElC,SAAK,SAAS;AAEd,QAAI,KAAK,aAAa,OAAO,GAAG;AAC5B,UAAI,QAAQ,KAAK;AACjB,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACnC,eAAO,YAAY,KAAK,YAAY,CAAC,CAAC;AAAA,MACtD;AAAA,IACA,OAAe;AACH,eAAS,IAAI,GAAG,IAAI,KAAK,KAAK,KAAK;AAC/B,eAAO,YAAY,KAAK,YAAY,CAAC,CAAC;AAAA,MACtD;AAAA,IACA;AAEQ,SAAK,WAAY;AAEjB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,SAAU;AACf,QAAI,KAAK,aAAa,UAAU,KAAK,KAAK,aAAa,UAAU,GAAG;AAChE;AAAA,IACZ;AAEQ,SAAK,iBAAiB,cAAc,KAAK,YAAY;AACrD,SAAK,iBAAiB,cAAc,KAAK,YAAY;AACrD,SAAK,iBAAiB,aAAa,KAAK,WAAW;AACnD,SAAK,iBAAiB,cAAc,KAAK,YAAY;AACrD,SAAK,iBAAiB,YAAY,KAAK,UAAU;AACjD,SAAK,iBAAiB,aAAa,KAAK,WAAW;AACnD,SAAK,iBAAiB,SAAS,KAAK,OAAO;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,YAAY,GAAG;AACX,QAAI,MAAM,SAAS,cAAc,KAAK;AACtC,QAAI,UAAU,IAAI,eAAe;AAEjC,QAAI,OAAO,KAAK,SAAS,CAAC;AAC1B,QAAI,QAAQ,KAAK,UAAU,IAAI;AAE/B,QAAI,YAAY,IAAI;AACpB,QAAI,YAAY,KAAK;AAErB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,aAAa;AACT,UAAM,QAAQ,KAAK,OAAO;AAC1B,UAAM,YACF,KAAK,UAAU,KAAK,cAAc,KAAK,eAAe,KAAK,KAAK,eAAe,SACzE,KAAK,aACL,KAAK;AAEf,aAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACnC,YAAM,OAAO,MAAM,CAAC;AACpB,YAAM,YAAY,KAAK,cAAc,sBAAsB;AAC3D,YAAM,WAAW,KAAK,cAAc,qBAAqB;AAEzD,YAAM,aAAa,IAAI;AACvB,YAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AAEnD,UAAI,YAAY;AACZ,aAAK,UAAU,IAAI,UAAU;AAC7B,YAAI,KAAK,aAAa,UAAU,KAAK,KAAK,aAAa,UAAU,MAAM,UAAU;AAC7E,mBAAS,aAAa,UAAU,EAAE;AAAA,QACtD;AAAA,MACA,OAAmB;AACH,aAAK,UAAU,OAAO,UAAU;AAChC,iBAAS,gBAAgB,QAAQ;AAAA,MACjD;AAEY,UAAI,WAAW;AACX,cAAM,YAAY,YAAY,KAAK,KAAK,QAAQ,CAAC;AACjD,aAAK,UAAU,IAAI,MAAM;AAEzB,kBAAU,MAAM,WAAW,eAAe,OAAO;AACjD,iBAAS,MAAM,WAAW,WAAW,MAAM,OAAO;AAElD,iBAAS,gBAAgB,QAAQ;AAAA,MACjD,OAAmB;AACH,aAAK,UAAU,OAAO,MAAM;AAC5B,kBAAU,MAAM,WAAW;AAC3B,iBAAS,MAAM,WAAW;AAC1B,iBAAS,aAAa,UAAU,EAAE;AAAA,MAClD;AAEY,WAAK,aAAa,cAAc,CAAC;AACjC,WAAK,aAAa,aAAa,SAAS;AAAA,IACpD;AAEQ,SAAK,SAAU;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW;AACP,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,UAAU,KAAK,aAAa,UAAU;AAAA,MACtC,UAAU,KAAK,aAAa,UAAU;AAAA,IAClD,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsFI,SAAS,OAAO;AACZ,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,KAAK,MAAM,KAAK,MAAM,CAAC,IAAI,KAAK,MAAM,KAAK,CAAC;AAEtE,QAAI,KAAK,aAAa,QAAQ,EAAG,MAAK,aAAa,UAAU,EAAE;AAE/D,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,sBAAsB,YAAY;AAC9B,UAAM,EAAE,MAAM,OAAO,MAAO,IAAG,KAAK,OAAO,sBAAuB;AAClE,UAAM,QAAQ,KAAK,kBAAmB,aAAa,QAAQ,QAAS,KAAK,KAAK,KAAK,SAAS;AAE5F,WAAO,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,KAAK,GAAG;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,iBAAiB,eAAe,YAAY,KAAK;AAC7C,UAAM,aAAa,IAAI;AACvB,WAAO,KAAK,KAAK,gBAAgB,UAAU,IAAI;AAAA,EACvD;AACA;ACtYA,KAAK,OAAO,YAAY,IAAI;"}
1	+ {"version":3,"file":"wje-rate.js","sources":["../packages/wje-rate/rate.element.js","../packages/wje-rate/rate.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Rate` is a custom web component that represents a rating component.\n * @summary This element represents a rating component.\n * @documentation https://elements.webjet.sk/components/rate\n * @status stable\n * @augments {WJElement}\n * @attribute {number} precision - The precision of the rating component.\n * @attribute {number} max - The maximum value of the rating component.\n * @attribute {Array<string>} icons - The icons of the rating component.\n * @csspart native - The native part of the rating component.\n * @cssproperty [--wje-rate-gap=.25rem] - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements.\n * @cssproperty [--wje-rate-color=var(--wje-color-contrast-11)] - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.\n * @cssproperty [--wje-rate-selected-color=var(--wje-color-danger-9)] - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.\n * @tag wje-rate\n /\n\nexport default class Rate extends WJElement {\n /\n Creates an instance of Rate.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n Sets the precision of the rating component.\n * @param {number} value The value to set.\n /\n set precision(value) {\n this.setAttribute('precision', value);\n }\n\n /\n Gets the precision of the rating component.\n * @returns {number} The value of the precision.\n /\n get precision() {\n return this.hasAttribute('precision') ? +this.getAttribute('precision') : 1;\n }\n\n /\n Sets the maximum value of the rating component.\n * @param {number} value The value to set.\n /\n set max(value) {\n this.setAttribute('max', value);\n }\n\n /\n Gets the maximum value of the rating component.\n * @returns {number} The value of the maximum value.\n /\n get max() {\n return this.hasAttribute('icons') ? this.icons.length : +this.getAttribute('max');\n }\n\n /\n Sets the icons of the rating component.\n * @param {Array<string>} value The value to set.\n /\n set icons(value) {\n return value;\n }\n\n /\n Gets the icons of the rating component.\n * @returns {Array<string>} The value of the icons.\n /\n get icons() {\n return this.hasAttribute('icons') ? JSON.parse(this.getAttribute('icons').replace(/'/g, '\"')) : ['star'];\n }\n\n /\n Sets the value of the rating component.\n * @param {number} value The value to set.\n /\n set value(value) {\n this.setAttribute('value', value);\n }\n\n /\n Gets the value of the rating component.\n * @returns {number} The value of the rating component.\n /\n get value() {\n return this.hasAttribute('value') ? +this.getAttribute('value') : 0;\n }\n\n /\n Sets the hover value of the rating component.\n * @type {string}\n /\n className = 'Rate';\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 ['is-hover', 'value', 'max', 'disabled', 'readonly'];\n }\n\n /\n Called when an attribute changes.\n * @param {string} name The name of the attribute that changed.\n * @param {string} old The old value of the attribute.\n * @param {string} newName The new value of the attribute.\n /\n attributeChangedCallback(name, old, newName) {\n if (super.attributeChangedCallback) {\n super.attributeChangedCallback(name, old, newName);\n }\n\n if (name === 'is-hover') {\n // this.draw();\n }\n\n if (old !== newName && name !== 'is-hover') {\n this.syncAria();\n }\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the component for the rating component.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-rate');\n\n this.native = native;\n\n if (this.hasAttribute('icons')) {\n let icons = this.icons;\n for (let i = 0; i < icons.length; i++) {\n native.appendChild(this.createIcons(i));\n }\n } else {\n for (let i = 0; i < this.max; i++) {\n native.appendChild(this.createIcons(i));\n }\n }\n\n this.changeRate();\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Adds event listeners after the component is drawn.\n /\n afterDraw() {\n this.syncAria();\n if (this.hasAttribute('disabled') \|\| this.hasAttribute('readonly')) {\n return;\n }\n\n this.addEventListener('mouseenter', this.onMouseEnter);\n this.addEventListener('mouseleave', this.onMouseLeave);\n this.addEventListener('mousemove', this.onMouseMove);\n this.addEventListener('touchstart', this.onTouchStart);\n this.addEventListener('touchend', this.onTouchEnd);\n this.addEventListener('touchmove', this.onTouchMove);\n this.addEventListener('click', this.onClick);\n }\n\n /\n Creates the icons for the rating component.\n * @param {number} i The index of the icon.\n * @returns {Element} The icon element.\n /\n createIcons(i) {\n let div = document.createElement('div');\n div.classList.add('wje-rate-icon');\n\n let icon = this.getIcons(i);\n let clone = icon.cloneNode(true);\n\n div.appendChild(icon);\n div.appendChild(clone);\n\n return div;\n }\n\n /\n Changes the rate of the rating component.\n /\n changeRate() {\n const icons = this.native.children;\n const rateValue =\n this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== undefined\n ? this.hoverValue\n : this.value;\n\n for (let i = 0; i < icons.length; i++) {\n const icon = icons[i];\n const firstIcon = icon.querySelector('wje-icon:first-child');\n const lastIcon = icon.querySelector('wje-icon:last-child');\n\n const isSelected = i < rateValue;\n const isPartial = rateValue > i && rateValue < i + 1;\n\n if (isSelected) {\n icon.classList.add('selected');\n if (this.hasAttribute('selected') && this.getAttribute('selected') === 'filled') {\n lastIcon.setAttribute('filled', '');\n }\n } else {\n icon.classList.remove('selected');\n lastIcon.removeAttribute('filled');\n }\n\n if (isPartial) {\n const percent = ((rateValue - i) 100).toFixed(2);\n icon.classList.add('half');\n\n firstIcon.style.clipPath = `inset(0 0 0 ${percent}%)`;\n lastIcon.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;\n\n lastIcon.removeAttribute('hidden');\n } else {\n icon.classList.remove('half');\n firstIcon.style.clipPath = ``;\n lastIcon.style.clipPath = ``;\n lastIcon.setAttribute('hidden', '');\n }\n\n icon.setAttribute('data-index', i);\n icon.setAttribute('data-rate', rateValue);\n }\n\n this.syncAria();\n }\n\n /*\n Sync ARIA attributes on host.\n /\n syncAria() {\n this.setAriaState({\n role: 'slider',\n valuemin: 0,\n valuemax: this.max,\n valuenow: this.value,\n disabled: this.hasAttribute('disabled'),\n readonly: this.hasAttribute('readonly'),\n });\n }\n\n /\n Event handler for the mouse enter event.\n * @param {Event} e The event.\n /\n onMouseEnter = (e) => {\n e.preventDefault();\n\n this.hoverValue = this.getValueFromXPosition(e.clientX);\n this.changeRate();\n };\n\n /\n Event handler for the mouse leave event.\n * @param {Event} e The event.\n /\n onMouseLeave = (e) => {\n e.preventDefault();\n\n this.hoverValue = 0;\n this.changeRate();\n };\n\n /\n Event handler for the mouse move event.\n * @param {Event} e The event.\n /\n onMouseMove = (e) => {\n e.preventDefault();\n\n let newValue = +this.getValueFromXPosition(e.clientX);\n if (newValue !== +this.hoverValue) {\n this.hoverValue = newValue;\n this.changeRate();\n }\n };\n\n /\n Event handler for the touch start event.\n * @param {Event} e The event.\n /\n onTouchStart = (e) => {\n e.preventDefault();\n\n this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n this.changeRate();\n };\n\n /\n Event handler for the touch end event.\n * @param {Event} e The event.\n /\n onTouchEnd = (e) => {\n e.preventDefault();\n\n this.hoverValue = 0;\n this.changeRate();\n };\n\n /\n Event handler for the touch move event.\n * @param {Event} e The event.\n /\n onTouchMove = (e) => {\n e.preventDefault();\n\n this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n this.changeRate();\n };\n\n /\n Event handler for the click event.\n * @param {Event} e The event.\n /\n onClick = (e) => {\n e.preventDefault();\n\n this.value = +this.hoverValue;\n };\n\n /\n Returns the icons for the rating component.\n * @param {number} index The index of the icon.\n * @returns {Element} The icon element.\n /\n getIcons(index) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', this.max ? this.icons[0] : this.icons[index]);\n\n if (this.hasAttribute('filled')) icon.setAttribute('filled', '');\n\n return icon;\n }\n\n /\n Returns the value from the x position.\n * @param {number} coordinate The x coordinate.\n * @returns {number} The value from the x position.\n /\n getValueFromXPosition(coordinate) {\n const { left, right, width } = this.native.getBoundingClientRect();\n const value = this.roundToPrecision(((coordinate - left) / width) this.max, this.precision);\n\n return Math.min(Math.max(value, 0), this.max);\n }\n\n /*\n Rounds a given number to the nearest specified precision.\n * @param {number} numberToRound The number to be rounded.\n * @param {number} [precision] The precision to which the number should be rounded.\n * @returns {number} - The rounded number.\n * @example\n * roundToPrecision(2.3); // Returns 2.5\n * roundToPrecision(2.3, 0.1); // Returns 2.3\n * roundToPrecision(2.6, 1); // Returns 3\n /\n roundToPrecision(numberToRound, precision = 0.5) {\n const multiplier = 1 / precision;\n return Math.ceil(numberToRound multiplier) / multiplier;\n }\n}\n","import Rate from './rate.element.js';\n\nexport default Rate;\n\nRate.define('wje-rate', Rate);\n"],"names":[],"mappings":"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"}

package/dist/wje-relative-time.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-relative-time.js","sources":["../packages/wje-relative-time/relative-time.element.js","../packages/wje-relative-time/relative-time.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/*\n `RelativeTime` is a custom web component that represents a relative time component.\n * @summary This element represents a relative time component.\n * @documentation https://elements.webjet.sk/components/relative-time\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the relative time component.\n * @tag wje-relative-time\n /\n\nexport default class RelativeTime extends WJElement {\n /\n Creates an instance of RelativeTime.\n * @class\n /\n constructor() {\n super();\n this.localizer = new Localizer(this);\n }\n\n /\n Sets the date of the relative time component.\n * @param value\n /\n set date(value) {\n this.setAttribute('date', value);\n }\n\n /\n Gets the date of the relative time component.\n * @returns {string}\n /\n get date() {\n return this.getAttribute('date');\n }\n\n /\n Sets the object date of the relative time component.\n * @param value\n /\n set objectDate(value) {\n this.setAttribute('object-date', value);\n }\n\n /\n Gets the object date of the relative time component.\n * @returns {Date}\n /\n get objectDate() {\n let date = new Date();\n let inputDate = this.date;\n\n if (!!inputDate && inputDate !== '') {\n inputDate = this.isISODate(inputDate) ? inputDate : +inputDate 1000;\n\n date = new Date(inputDate);\n }\n\n return date;\n }\n\n /*\n Sets the lang of the relative time component.\n * @type {string}\n /\n className = 'RelativeTime';\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 ['date', 'lang'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (this.native) {\n this.native.innerText = this.getRelativeTimeString();\n if (this.date) this.native.setAttribute('datetime', this.date);\n else this.native.removeAttribute('datetime');\n }\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'status' });\n }\n\n /\n Draws the component for the relative time.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('div');\n element.setAttribute('part', 'native');\n element.classList.add('native-relative-time');\n element.innerText = this.getRelativeTimeString();\n if (this.date) element.setAttribute('datetime', this.date);\n\n fragment.appendChild(element);\n this.native = element;\n\n return fragment;\n }\n\n /\n Returns the relative time string for the given date.\n /\n getRelativeTimeString(lang = navigator.language) {\n if (this.objectDate.toString() === 'Invalid Date' \|\| this.objectDate.toString() === 'NaN') {\n return '';\n }\n\n const timeMs = this.objectDate.getTime();\n\n const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);\n\n const cutoffs = [60, 3600, 86400, 86400 7, 86400 * 30, 86400 * 365, Infinity];\n\n const units = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];\n const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));\n const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;\n\n return this.localizer.relativeTime(\n this.getAttribute('lang'),\n Math.floor(deltaSeconds / divisor),\n units[unitIndex],\n { numeric: 'auto' }\n );\n }\n\n /*\n Checks if the given string is an ISO date.\n * @param {string} str The string to check.\n * @returns {boolean} True if the string is an ISO date, false otherwise.\n */\n isISODate(str) {\n const date = new Date(str);\n return !isNaN(date.getTime());\n }\n}\n","import RelativeTime from './relative-time.element.js';\n\nexport default RelativeTime;\n\nRelativeTime.define('wje-relative-time', RelativeTime);\n"],"names":[],"mappings":";;;;;AAae,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV,~~UAAO~~;~~AAiDX~~;AAAA;AAAA;AAAA;AAAA,qCAAY;AAhDR,SAAK,YAAY,IAAI,UAAU,IAAI;AAAA,~~EAC3C~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,~~EACvC~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,~~EACvC~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,WAAW,OAAO;AAClB,SAAK,aAAa,eAAe,KAAK;AAAA,~~EAC9C~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,IAAI,aAAa;AACb,QAAI,OAAO,oBAAI,~~KAAM~~;~~AACrB~~,QAAI,YAAY,KAAK;AAErB,QAAI,CAAC,CAAC,aAAa,cAAc,IAAI;AACjC,kBAAY,KAAK,UAAU,SAAS,IAAI,YAAY,CAAC,YAAY;AAEjE,aAAO,IAAI,KAAK,SAAS;AAAA,~~IACrC~~;~~AAEQ~~,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAaI~~,WAAW,qBAAqB;AAC5B,WAAO,CAAC,QAAQ,MAAM;AAAA,~~EAC9B~~;AAAA,~~EAEI~~,yBAAyB,MAAM,UAAU,UAAU;;AAC/C,gBAAM,6BAAN,8BAAiC,MAAM,UAAU;AACjD,QAAI,aAAa,SAAU;AAC3B,QAAI,KAAK,QAAQ;AACb,WAAK,OAAO,YAAY,KAAK,~~sBAAuB~~;~~AACpD~~,UAAI,KAAK,KAAM,MAAK,OAAO,aAAa,YAAY,KAAK,IAAI;AAAA,UACxD,MAAK,OAAO,gBAAgB,UAAU;AAAA,~~IACvD~~;AAAA,~~EACA~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,SAAQ,CAAE;AAAA,~~EAC5C~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,OAAO;AACH,QAAI,WAAW,SAAS,~~uBAAwB~~;~~AAEhD~~,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,sBAAsB;AAC5C,YAAQ,YAAY,KAAK,~~sBAAuB~~;~~AAChD~~,QAAI,KAAK,KAAM,SAAQ,aAAa,YAAY,KAAK,IAAI;AAEzD,aAAS,YAAY,OAAO;AAC5B,SAAK,SAAS;AAEd,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,sBAAsB,OAAO,UAAU,UAAU;AAC7C,QAAI,KAAK,WAAW,eAAe,kBAAkB,KAAK,WAAW,~~SAAU~~,~~MAAK~~,OAAO;AACvF,aAAO;AAAA,~~IACnB~~;~~AAEQ~~,UAAM,SAAS,KAAK,WAAW,~~QAAS~~;~~AAExC~~,UAAM,eAAe,KAAK,OAAO,SAAS,KAAK,~~IAAK~~,~~KAAI~~,GAAI;AAE5D,UAAM,UAAU,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,QAAQ,IAAI,QAAQ,KAAK,QAAQ;AAE9E,UAAM,QAAQ,CAAC,UAAU,UAAU,QAAQ,OAAO,QAAQ,SAAS,MAAM;AACzE,UAAM,YAAY,QAAQ,UAAU,CAAC,WAAW,SAAS,KAAK,IAAI,YAAY,CAAC;AAC/E,UAAM,UAAU,YAAY,QAAQ,YAAY,CAAC,IAAI;AAErD,WAAO,KAAK,UAAU;AAAA,MAClB,KAAK,aAAa,MAAM;AAAA,MACxB,KAAK,MAAM,eAAe,OAAO;AAAA,MACjC,MAAM,SAAS;AAAA,MACf,EAAE,SAAS,OAAM;AAAA,~~IACpB~~;AAAA,~~EACT~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAOI~~,UAAU,KAAK;AACX,UAAM,OAAO,IAAI,KAAK,GAAG;AACzB,WAAO,CAAC,MAAM,KAAK,SAAS;AAAA,~~EACpC~~;~~AACA~~;ACnJA,aAAa,OAAO,qBAAqB,YAAY;"}
1	+ {"version":3,"file":"wje-relative-time.js","sources":["../packages/wje-relative-time/relative-time.element.js","../packages/wje-relative-time/relative-time.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/*\n `RelativeTime` is a custom web component that represents a relative time component.\n * @summary This element represents a relative time component.\n * @documentation https://elements.webjet.sk/components/relative-time\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the relative time component.\n * @tag wje-relative-time\n /\n\nexport default class RelativeTime extends WJElement {\n /\n Creates an instance of RelativeTime.\n * @class\n /\n constructor() {\n super();\n this.localizer = new Localizer(this);\n }\n\n /\n Sets the date of the relative time component.\n * @param value\n /\n set date(value) {\n this.setAttribute('date', value);\n }\n\n /\n Gets the date of the relative time component.\n * @returns {string}\n /\n get date() {\n return this.getAttribute('date');\n }\n\n /\n Sets the object date of the relative time component.\n * @param value\n /\n set objectDate(value) {\n this.setAttribute('object-date', value);\n }\n\n /\n Gets the object date of the relative time component.\n * @returns {Date}\n /\n get objectDate() {\n let date = new Date();\n let inputDate = this.date;\n\n if (!!inputDate && inputDate !== '') {\n inputDate = this.isISODate(inputDate) ? inputDate : +inputDate 1000;\n\n date = new Date(inputDate);\n }\n\n return date;\n }\n\n /*\n Sets the lang of the relative time component.\n * @type {string}\n /\n className = 'RelativeTime';\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 ['date', 'lang'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (this.native) {\n this.native.innerText = this.getRelativeTimeString();\n if (this.date) this.native.setAttribute('datetime', this.date);\n else this.native.removeAttribute('datetime');\n }\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'status' });\n }\n\n /\n Draws the component for the relative time.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('div');\n element.setAttribute('part', 'native');\n element.classList.add('native-relative-time');\n element.innerText = this.getRelativeTimeString();\n if (this.date) element.setAttribute('datetime', this.date);\n\n fragment.appendChild(element);\n this.native = element;\n\n return fragment;\n }\n\n /\n Returns the relative time string for the given date.\n /\n getRelativeTimeString(lang = navigator.language) {\n if (this.objectDate.toString() === 'Invalid Date' \|\| this.objectDate.toString() === 'NaN') {\n return '';\n }\n\n const timeMs = this.objectDate.getTime();\n\n const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);\n\n const cutoffs = [60, 3600, 86400, 86400 7, 86400 * 30, 86400 * 365, Infinity];\n\n const units = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];\n const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));\n const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;\n\n return this.localizer.relativeTime(\n this.getAttribute('lang'),\n Math.floor(deltaSeconds / divisor),\n units[unitIndex],\n { numeric: 'auto' }\n );\n }\n\n /*\n Checks if the given string is an ISO date.\n * @param {string} str The string to check.\n * @returns {boolean} True if the string is an ISO date, false otherwise.\n */\n isISODate(str) {\n const date = new Date(str);\n return !isNaN(date.getTime());\n }\n}\n","import RelativeTime from './relative-time.element.js';\n\nexport default RelativeTime;\n\nRelativeTime.define('wje-relative-time', RelativeTime);\n"],"names":[],"mappings":"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"}

package/dist/wje-reorder-dropzone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-reorder-dropzone.js","sources":["../packages/wje-reorder-dropzone/reorder-dropzone.element.js","../packages/wje-reorder-dropzone/reorder-dropzone.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `ReorderDropzone` is a custom web component that represents a reorder dropzone.\n * @summary This element represents a reorder dropzone.\n * @documentation https://elements.webjet.sk/components/reorder-dropzone\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder dropzone.\n * @slot - The default slot for the reorder dropzone.\n * @tag wje-reorder-dropzone\n /\nexport default class ReorderDropzone extends WJElement {\n /\n Creates an instance of ReorderDropzone.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'ReorderDropzone';\n\n /\n Returns the CSS stylesheet for the component.\n * @returns {CSSStyleSheet} The CSS stylesheet.\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Returns the list of observed attributes.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let dropzone = document.createElement('div');\n dropzone.classList.add('dropzone');\n\n let slot = document.createElement('slot');\n\n dropzone.appendChild(slot);\n\n fragment.appendChild(dropzone);\n\n return fragment;\n }\n}\n","import ReorderDropzone from './reorder-dropzone.element';\n\nexport default ReorderDropzone;\n\nReorderDropzone.define('wje-reorder-dropzone', ReorderDropzone);\n"],"names":[],"mappings":";;;;;AAae,MAAM,wBAAwB,UAAU;AAAA;AAAA;AAAA;AAAA,EAInD,cAAc;AACV,~~UAAO~~;~~AAOX~~;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,~~EANhB~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAYI~~,WAAW,gBAAgB;AACvB,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,kBAAkB;AACd,SAAK,eAAe;AAAA,~~EAC5B~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,OAAO;AACH,QAAI,WAAW,SAAS,~~uBAAwB~~;~~AAEhD~~,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,UAAU,IAAI,UAAU;AAEjC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,aAAS,YAAY,QAAQ;AAE7B,WAAO;AAAA,~~EACf~~;~~AACA~~;ACxDA,gBAAgB,OAAO,wBAAwB,eAAe;"}
1	+ {"version":3,"file":"wje-reorder-dropzone.js","sources":["../packages/wje-reorder-dropzone/reorder-dropzone.element.js","../packages/wje-reorder-dropzone/reorder-dropzone.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `ReorderDropzone` is a custom web component that represents a reorder dropzone.\n * @summary This element represents a reorder dropzone.\n * @documentation https://elements.webjet.sk/components/reorder-dropzone\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder dropzone.\n * @slot - The default slot for the reorder dropzone.\n * @tag wje-reorder-dropzone\n /\nexport default class ReorderDropzone extends WJElement {\n /\n Creates an instance of ReorderDropzone.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'ReorderDropzone';\n\n /\n Returns the CSS stylesheet for the component.\n * @returns {CSSStyleSheet} The CSS stylesheet.\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Returns the list of observed attributes.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let dropzone = document.createElement('div');\n dropzone.classList.add('dropzone');\n\n let slot = document.createElement('slot');\n\n dropzone.appendChild(slot);\n\n fragment.appendChild(dropzone);\n\n return fragment;\n }\n}\n","import ReorderDropzone from './reorder-dropzone.element';\n\nexport default ReorderDropzone;\n\nReorderDropzone.define('wje-reorder-dropzone', ReorderDropzone);\n"],"names":[],"mappings":";;;;;AAae,MAAM,wBAAwB,UAAU;AAAA;AAAA;AAAA;AAAA,EAInD,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,UAAU,IAAI,UAAU;AAEjC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,aAAS,YAAY,QAAQ;AAE7B,WAAO;AAAA,EACX;AACJ;ACxDA,gBAAgB,OAAO,wBAAwB,eAAe;"}

package/dist/wje-reorder-handle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-reorder-handle.js","sources":["../packages/wje-reorder-handle/reorder-handle.element.js","../packages/wje-reorder-handle/reorder-handle.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `ReorderHandle` is a custom web component that represents a reorder handle.\n * @summary This element represents a reorder handle.\n * @documentation https://elements.webjet.sk/components/reorder-handle\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder handle.\n * @slot - The default slot for the reorder handle.\n * @tag wje-reorder-handle\n /\nexport default class ReorderHandle extends WJElement {\n /\n Creates an instance of ReorderHandle.\n /\n constructor() {\n super();\n this.addEventListener('mousedown', this.startDrag.bind(this));\n this.addEventListener('touchstart', this.startTouchDrag.bind(this));\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'ReorderHandle';\n\n /\n Returns the CSS styles for the component.\n * @returns {}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /*\n Returns the list of attributes to observe for changes.\n * @returns {string[]}\n /\n static get observedAttributes() {\n return ['dropzone', 'parent'];\n }\n\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the component.\n * @returns {DocumentFragment}\n /\n draw() {\n const fragment = document.createDocumentFragment();\n\n const container = document.createElement('div');\n container.classList.add('container');\n container.setAttribute('part', 'native');\n\n const slot = document.createElement('slot');\n\n container.appendChild(slot);\n\n fragment.appendChild(container);\n\n return fragment;\n }\n\n /\n Draws the component after it is connected to the DOM.\n /\n afterDraw() {\n this.syncAria();\n if (this.hasAttribute('disabled')) {\n this.style.opacity = '.3';\n }\n }\n\n /\n Sync ARIA attributes on host.\n /\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'button' });\n }\n\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n\n if (this.hasAttribute('disabled')) {\n this.setAriaState({ disabled: true });\n }\n\n const ariaLabel = this.getAttribute('aria-label');\n const label = this.getAttribute('label') \|\| 'Reorder item';\n if (!ariaLabel && label) {\n this.setAriaState({ label });\n }\n }\n\n /\n Handles the attribute changes.\n * @param {DragEvent} e\n /\n startDrag(e) {\n if (this.hasAttribute('disabled') \|\| this.hasAttribute('locked')) return;\n this.startDragAction(e.clientX, e.clientY);\n event.dispatchCustomEvent(this, 'wje-reorder-handle:start', {draggable: this.getDraggable()});\n }\n\n /\n Handles the touch start event.\n * @param {TouchEvent} e\n /\n startTouchDrag(e) {\n if (this.hasAttribute('disabled') \|\| this.hasAttribute('locked')) return;\n const touch = e.touches[0];\n this.startDragAction(touch.clientX, touch.clientY);\n }\n\n /\n Initiates the drag-and-drop action for a sortable element.\n * @param {number} clientX The x-coordinate of the mouse pointer at the start of the drag action.\n * @param {number} clientY The y-coordinate of the mouse pointer at the start of the drag action.\n /\n startDragAction(clientX, clientY) {\n let draggable = this.getDraggable();\n\n const initialContainer = this.getDropzone(draggable);\n\n if (!this.getAttribute('dropzone')) {\n this.setAttribute('dropzone', initialContainer.localName);\n }\n\n const rect = draggable.getBoundingClientRect();\n const offsetX = clientX - rect.left;\n const offsetY = clientY - rect.top;\n\n let placeholder = document.createElement('div');\n placeholder.classList.add('sortable-item');\n placeholder.style.visibility = 'hidden';\n placeholder.style.height = `${rect.height}px`;\n\n draggable.classList.add('dragging');\n\n draggable.style.position = 'fixed';\n draggable.style.zIndex = '1000';\n draggable.style.width = `${rect.width}px`;\n\n const moveAt = (pageX, pageY) => {\n draggable.style.left = `${pageX - offsetX - document.documentElement.scrollLeft}px`;\n draggable.style.top = `${pageY - offsetY - document.documentElement.scrollTop}px`;\n };\n\n moveAt(clientX, clientY);\n\n const onMouseMove = (e) => {\n moveAt(e.pageX, e.pageY);\n\n const dropzone = this.getClosestDropzone(e.clientX, e.clientY);\n if (!dropzone) return;\n\n const siblings = Array.from(dropzone.children).filter(\n (child) => child !== draggable && child !== placeholder\n );\n\n for (const sibling of siblings) {\n const siblingRect = sibling.getBoundingClientRect();\n\n if (sibling.children[0]?.hasAttribute('locked')) continue;\n\n if (e.clientY > siblingRect.top && e.clientY < siblingRect.bottom) {\n if (e.clientY < siblingRect.top + siblingRect.height / 2) {\n dropzone.insertBefore(placeholder, sibling);\n } else {\n dropzone.insertBefore(placeholder, sibling.nextSibling);\n }\n break;\n }\n }\n }\n\n const onMouseUp = () => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n\n draggable.classList.remove('dragging');\n\n draggable.style.position = '';\n draggable.style.zIndex = '';\n draggable.style.left = '';\n draggable.style.top = '';\n draggable.style.width = '';\n\n const finalContainer = placeholder.parentElement;\n finalContainer.insertBefore(draggable, placeholder);\n finalContainer.removeChild(placeholder);\n\n this.reIndexItems(finalContainer);\n\n event.dispatchCustomEvent(this, 'wje-reorder-handle:change', {finalContainer: finalContainer, draggable: draggable});\n };\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n\n initialContainer.insertBefore(placeholder, draggable);\n }\n\n /\n Retrieves the closest draggable element based on attribute conditions.\n * If the element has a \"parent\" attribute, the method attempts to find the closest ancestor\n * matching the CSS selector specified in the attribute. If no such ancestor exists,\n * the method defaults to returning the immediate parent element.\n * @returns {Element\|null} The closest matching ancestor or the immediate parent element if no match is found, or null if the element has no parent.\n /\n getDraggable() {\n if (this.hasAttribute('parent')) {\n let parent = this.closest(this.getAttribute('parent'));\n if(parent) return parent;\n }\n return this.parentElement;\n }\n\n /\n Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n * @param {HTMLElement} element The HTML element for which the dropzone is being determined.\n * @returns {HTMLElement\|null} The nearest dropzone element if found; otherwise, the parent element or null.\n /\n getDropzone(element) {\n const dropzoneAttr = this.getAttribute('dropzone');\n if (this.hasAttribute('dropzone')) {\n let dropzone = element.closest(this.getAttribute('dropzone'));\n if (dropzone) return dropzone;\n }\n return element.parentElement;\n }\n\n /\n Retrieves the closest dropzone element at the specified coordinates.\n * @param {number} clientX The x-coordinate relative to the viewport.\n * @param {number} clientY The y-coordinate relative to the viewport.\n * @returns {HTMLElement\|null} - The closest dropzone element matching the `dropzone` attribute, or `null` if none is found.\n /\n getClosestDropzone(clientX, clientY) {\n const elements = this.getElementsFromPointAll(clientX, clientY);\n for (const element of elements) {\n if (element.matches(this.getAttribute('dropzone'))) {\n return element;\n }\n }\n return null;\n }\n\n /\n Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n * @param {number} x The x-coordinate relative to the viewport.\n * @param {number} y The y-coordinate relative to the viewport.\n * @param {Document\|ShadowRoot} [root] The root context in which to search. Defaults to the main document.\n * @param {Set<Node>} [visited] A set of already visited nodes to avoid infinite recursion in nested shadow DOMs.\n * @returns {HTMLElement[]} An array of all elements found at the specified coordinates, including shadow DOM elements.\n /\n getElementsFromPointAll(x, y, root = document, visited = new Set()) {\n if (visited.has(root)) return [];\n visited.add(root);\n\n const elements = root.elementsFromPoint(x, y);\n let allElements = [...elements];\n\n for (const element of elements) {\n if (element.shadowRoot && !visited.has(element.shadowRoot)) {\n allElements = allElements.concat(this.getElementsFromPointAll(x, y, element.shadowRoot, visited));\n }\n }\n\n return allElements;\n }\n\n /\n Re-indexes child elements of the given container by setting their dataset index.\n * @param {HTMLElement} container The container element whose children are to be re-indexed.\n * @returns {void}\n */\n reIndexItems(container) {\n const items = Array.from(container.children);\n let index = 0;\n\n items.forEach((child) => {\n if (child.children[0]?.hasAttribute('locked')) {\n child.dataset.index = index;\n } else {\n child.dataset.index = index;\n }\n index++;\n });\n }\n}\n","import ReorderHandle from './reorder-handle.element.js';\n\nexport default ReorderHandle;\n\nReorderHandle.define('wje-reorder-handle', ReorderHandle);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-reorder-handle.js","sources":["../packages/wje-reorder-handle/reorder-handle.element.js","../packages/wje-reorder-handle/reorder-handle.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `ReorderHandle` is a custom web component that represents a reorder handle.\n * @summary This element represents a reorder handle.\n * @documentation https://elements.webjet.sk/components/reorder-handle\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder handle.\n * @slot - The default slot for the reorder handle.\n * @tag wje-reorder-handle\n /\nexport default class ReorderHandle extends WJElement {\n /\n Creates an instance of ReorderHandle.\n /\n constructor() {\n super();\n this.addEventListener('mousedown', this.startDrag.bind(this));\n this.addEventListener('touchstart', this.startTouchDrag.bind(this));\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'ReorderHandle';\n\n /\n Returns the CSS styles for the component.\n * @returns {}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /*\n Returns the list of attributes to observe for changes.\n * @returns {string[]}\n /\n static get observedAttributes() {\n return ['dropzone', 'parent'];\n }\n\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the component.\n * @returns {DocumentFragment}\n /\n draw() {\n const fragment = document.createDocumentFragment();\n\n const container = document.createElement('div');\n container.classList.add('container');\n container.setAttribute('part', 'native');\n\n const slot = document.createElement('slot');\n\n container.appendChild(slot);\n\n fragment.appendChild(container);\n\n return fragment;\n }\n\n /\n Draws the component after it is connected to the DOM.\n /\n afterDraw() {\n this.syncAria();\n if (this.hasAttribute('disabled')) {\n this.style.opacity = '.3';\n }\n }\n\n /\n Sync ARIA attributes on host.\n /\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'button' });\n }\n\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n\n if (this.hasAttribute('disabled')) {\n this.setAriaState({ disabled: true });\n }\n\n const ariaLabel = this.getAttribute('aria-label');\n const label = this.getAttribute('label') \|\| 'Reorder item';\n if (!ariaLabel && label) {\n this.setAriaState({ label });\n }\n }\n\n /\n Handles the attribute changes.\n * @param {DragEvent} e\n /\n startDrag(e) {\n if (this.hasAttribute('disabled') \|\| this.hasAttribute('locked')) return;\n this.startDragAction(e.clientX, e.clientY);\n event.dispatchCustomEvent(this, 'wje-reorder-handle:start', {draggable: this.getDraggable()});\n }\n\n /\n Handles the touch start event.\n * @param {TouchEvent} e\n /\n startTouchDrag(e) {\n if (this.hasAttribute('disabled') \|\| this.hasAttribute('locked')) return;\n const touch = e.touches[0];\n this.startDragAction(touch.clientX, touch.clientY);\n }\n\n /\n Initiates the drag-and-drop action for a sortable element.\n * @param {number} clientX The x-coordinate of the mouse pointer at the start of the drag action.\n * @param {number} clientY The y-coordinate of the mouse pointer at the start of the drag action.\n /\n startDragAction(clientX, clientY) {\n let draggable = this.getDraggable();\n\n const initialContainer = this.getDropzone(draggable);\n\n if (!this.getAttribute('dropzone')) {\n this.setAttribute('dropzone', initialContainer.localName);\n }\n\n const rect = draggable.getBoundingClientRect();\n const offsetX = clientX - rect.left;\n const offsetY = clientY - rect.top;\n\n let placeholder = document.createElement('div');\n placeholder.classList.add('sortable-item');\n placeholder.style.visibility = 'hidden';\n placeholder.style.height = `${rect.height}px`;\n\n draggable.classList.add('dragging');\n\n draggable.style.position = 'fixed';\n draggable.style.zIndex = '1000';\n draggable.style.width = `${rect.width}px`;\n\n const moveAt = (pageX, pageY) => {\n draggable.style.left = `${pageX - offsetX - document.documentElement.scrollLeft}px`;\n draggable.style.top = `${pageY - offsetY - document.documentElement.scrollTop}px`;\n };\n\n moveAt(clientX, clientY);\n\n const onMouseMove = (e) => {\n moveAt(e.pageX, e.pageY);\n\n const dropzone = this.getClosestDropzone(e.clientX, e.clientY);\n if (!dropzone) return;\n\n const siblings = Array.from(dropzone.children).filter(\n (child) => child !== draggable && child !== placeholder\n );\n\n for (const sibling of siblings) {\n const siblingRect = sibling.getBoundingClientRect();\n\n if (sibling.children[0]?.hasAttribute('locked')) continue;\n\n if (e.clientY > siblingRect.top && e.clientY < siblingRect.bottom) {\n if (e.clientY < siblingRect.top + siblingRect.height / 2) {\n dropzone.insertBefore(placeholder, sibling);\n } else {\n dropzone.insertBefore(placeholder, sibling.nextSibling);\n }\n break;\n }\n }\n }\n\n const onMouseUp = () => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n\n draggable.classList.remove('dragging');\n\n draggable.style.position = '';\n draggable.style.zIndex = '';\n draggable.style.left = '';\n draggable.style.top = '';\n draggable.style.width = '';\n\n const finalContainer = placeholder.parentElement;\n finalContainer.insertBefore(draggable, placeholder);\n finalContainer.removeChild(placeholder);\n\n this.reIndexItems(finalContainer);\n\n event.dispatchCustomEvent(this, 'wje-reorder-handle:change', {finalContainer: finalContainer, draggable: draggable});\n };\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n\n initialContainer.insertBefore(placeholder, draggable);\n }\n\n /\n Retrieves the closest draggable element based on attribute conditions.\n * If the element has a \"parent\" attribute, the method attempts to find the closest ancestor\n * matching the CSS selector specified in the attribute. If no such ancestor exists,\n * the method defaults to returning the immediate parent element.\n * @returns {Element\|null} The closest matching ancestor or the immediate parent element if no match is found, or null if the element has no parent.\n /\n getDraggable() {\n if (this.hasAttribute('parent')) {\n let parent = this.closest(this.getAttribute('parent'));\n if(parent) return parent;\n }\n return this.parentElement;\n }\n\n /\n Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n * @param {HTMLElement} element The HTML element for which the dropzone is being determined.\n * @returns {HTMLElement\|null} The nearest dropzone element if found; otherwise, the parent element or null.\n /\n getDropzone(element) {\n const dropzoneAttr = this.getAttribute('dropzone');\n if (this.hasAttribute('dropzone')) {\n let dropzone = element.closest(this.getAttribute('dropzone'));\n if (dropzone) return dropzone;\n }\n return element.parentElement;\n }\n\n /\n Retrieves the closest dropzone element at the specified coordinates.\n * @param {number} clientX The x-coordinate relative to the viewport.\n * @param {number} clientY The y-coordinate relative to the viewport.\n * @returns {HTMLElement\|null} - The closest dropzone element matching the `dropzone` attribute, or `null` if none is found.\n /\n getClosestDropzone(clientX, clientY) {\n const elements = this.getElementsFromPointAll(clientX, clientY);\n for (const element of elements) {\n if (element.matches(this.getAttribute('dropzone'))) {\n return element;\n }\n }\n return null;\n }\n\n /\n Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n * @param {number} x The x-coordinate relative to the viewport.\n * @param {number} y The y-coordinate relative to the viewport.\n * @param {Document\|ShadowRoot} [root] The root context in which to search. Defaults to the main document.\n * @param {Set<Node>} [visited] A set of already visited nodes to avoid infinite recursion in nested shadow DOMs.\n * @returns {HTMLElement[]} An array of all elements found at the specified coordinates, including shadow DOM elements.\n /\n getElementsFromPointAll(x, y, root = document, visited = new Set()) {\n if (visited.has(root)) return [];\n visited.add(root);\n\n const elements = root.elementsFromPoint(x, y);\n let allElements = [...elements];\n\n for (const element of elements) {\n if (element.shadowRoot && !visited.has(element.shadowRoot)) {\n allElements = allElements.concat(this.getElementsFromPointAll(x, y, element.shadowRoot, visited));\n }\n }\n\n return allElements;\n }\n\n /\n Re-indexes child elements of the given container by setting their dataset index.\n * @param {HTMLElement} container The container element whose children are to be re-indexed.\n * @returns {void}\n */\n reIndexItems(container) {\n const items = Array.from(container.children);\n let index = 0;\n\n items.forEach((child) => {\n if (child.children[0]?.hasAttribute('locked')) {\n child.dataset.index = index;\n } else {\n child.dataset.index = index;\n }\n index++;\n });\n }\n}\n","import ReorderHandle from './reorder-handle.element.js';\n\nexport default ReorderHandle;\n\nReorderHandle.define('wje-reorder-handle', ReorderHandle);\n"],"names":[],"mappings":"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"}

package/dist/wje-reorder-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-reorder-item.js","sources":["../packages/wje-reorder-item/reorder-item.element.js","../packages/wje-reorder-item/reorder-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `ReorderItem` is a custom web component that represents a reorder item.\n * @summary This element represents a reorder item.\n * @documentation https://elements.webjet.sk/components/reorder-item\n * @status stable\n * @augments WJElement\n * @csspart native-reorder-item - The native part of the reorder item.\n * @csspart handle-part - The handle part of the reorder item when the handle slot is present.\n * @slot - The default slot for the reorder item.\n * @tag wje-reorder-item\n /\nexport default class ReorderItem extends WJElement {\n /\n Creates an instance of ReorderItem.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'ReorderItem';\n\n /\n Returns the CSS stylesheet for the component.\n * @returns {CSSStyleSheet} The CSS stylesheet.\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Returns the list of observed attributes.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let wrapper = document.createElement('div');\n wrapper.classList.add('item');\n wrapper.setAttribute('part', 'native-reorder-item');\n\n let element = document.createElement('slot');\n element.classList.add('name');\n\n if (WjElementUtils.hasSlot(this, 'handle')) {\n const handle = document.createElement('slot');\n handle.classList.add('handle');\n handle.setAttribute('name', 'handle');\n handle.setAttribute('part', 'handle-part');\n\n wrapper.classList.add('item-w-handle');\n wrapper.appendChild(handle);\n } else {\n element.setAttribute('draggable', 'true');\n }\n\n wrapper.appendChild(element);\n\n fragment.appendChild(wrapper);\n\n return fragment;\n }\n}\n","import ReorderItem from './reorder-item.element.js';\n\nexport default ReorderItem;\n\nReorderItem.define('wje-reorder-item', ReorderItem);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI/C,cAAc;AACV,~~UAAO~~;~~AAOX~~;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,~~EANhB~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAYI~~,WAAW,gBAAgB;AACvB,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,kBAAkB;AACd,SAAK,eAAe;AAAA,~~EAC5B~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,OAAO;AACH,QAAI,WAAW,SAAS,~~uBAAwB~~;~~AAEhD~~,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,MAAM;AAC5B,YAAQ,aAAa,QAAQ,qBAAqB;AAElD,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,UAAU,IAAI,MAAM;AAE5B,QAAI,eAAe,QAAQ,MAAM,QAAQ,GAAG;AACxC,YAAM,SAAS,SAAS,cAAc,MAAM;AAC5C,aAAO,UAAU,IAAI,QAAQ;AAC7B,aAAO,aAAa,QAAQ,QAAQ;AACpC,aAAO,aAAa,QAAQ,aAAa;AAEzC,cAAQ,UAAU,IAAI,eAAe;AACrC,cAAQ,YAAY,MAAM;AAAA,~~IACtC~~,~~OAAe~~;AACH,cAAQ,aAAa,aAAa,MAAM;AAAA,~~IACpD~~;~~AAEQ~~,YAAQ,YAAY,OAAO;AAE3B,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,~~EACf~~;~~AACA~~;ACvEA,YAAY,OAAO,oBAAoB,WAAW;"}
1	+ {"version":3,"file":"wje-reorder-item.js","sources":["../packages/wje-reorder-item/reorder-item.element.js","../packages/wje-reorder-item/reorder-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `ReorderItem` is a custom web component that represents a reorder item.\n * @summary This element represents a reorder item.\n * @documentation https://elements.webjet.sk/components/reorder-item\n * @status stable\n * @augments WJElement\n * @csspart native-reorder-item - The native part of the reorder item.\n * @csspart handle-part - The handle part of the reorder item when the handle slot is present.\n * @slot - The default slot for the reorder item.\n * @tag wje-reorder-item\n /\nexport default class ReorderItem extends WJElement {\n /\n Creates an instance of ReorderItem.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'ReorderItem';\n\n /\n Returns the CSS stylesheet for the component.\n * @returns {CSSStyleSheet} The CSS stylesheet.\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Returns the list of observed attributes.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let wrapper = document.createElement('div');\n wrapper.classList.add('item');\n wrapper.setAttribute('part', 'native-reorder-item');\n\n let element = document.createElement('slot');\n element.classList.add('name');\n\n if (WjElementUtils.hasSlot(this, 'handle')) {\n const handle = document.createElement('slot');\n handle.classList.add('handle');\n handle.setAttribute('name', 'handle');\n handle.setAttribute('part', 'handle-part');\n\n wrapper.classList.add('item-w-handle');\n wrapper.appendChild(handle);\n } else {\n element.setAttribute('draggable', 'true');\n }\n\n wrapper.appendChild(element);\n\n fragment.appendChild(wrapper);\n\n return fragment;\n }\n}\n","import ReorderItem from './reorder-item.element.js';\n\nexport default ReorderItem;\n\nReorderItem.define('wje-reorder-item', ReorderItem);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI/C,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,MAAM;AAC5B,YAAQ,aAAa,QAAQ,qBAAqB;AAElD,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,UAAU,IAAI,MAAM;AAE5B,QAAI,eAAe,QAAQ,MAAM,QAAQ,GAAG;AACxC,YAAM,SAAS,SAAS,cAAc,MAAM;AAC5C,aAAO,UAAU,IAAI,QAAQ;AAC7B,aAAO,aAAa,QAAQ,QAAQ;AACpC,aAAO,aAAa,QAAQ,aAAa;AAEzC,cAAQ,UAAU,IAAI,eAAe;AACrC,cAAQ,YAAY,MAAM;AAAA,IAC9B,OAAO;AACH,cAAQ,aAAa,aAAa,MAAM;AAAA,IAC5C;AAEA,YAAQ,YAAY,OAAO;AAE3B,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;ACvEA,YAAY,OAAO,oBAAoB,WAAW;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-reorder.js","sources":["../packages/wje-reorder/reorder.element.js","../packages/wje-reorder/reorder.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Reorder` is a custom web component that represents a reorder.\n * It extends from `WJElement`.\n * @summary This element represents a reorder.\n * @documentation https://elements.webjet.sk/components/reorder\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder.\n * @slot - The default slot for the reorder.\n * // @fires wje-reorder:change - Event fired when the reorder is changed.\n * @tag wje-reorder\n /\n\nexport default class Reorder extends WJElement {\n /\n Creates an instance of Select.\n * @class\n /\n constructor() {\n super();\n this.dragEl = null;\n this.items = [];\n this.originalIndex = null;\n this.isDragging = false;\n this.offsetX = 0;\n this.offsetY = 0;\n this.cloneEl = null;\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'Select';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return [];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the component after it is connected to the DOM.\n * @returns {DocumentFragment}\n /\n draw() {\n const fragment = document.createDocumentFragment();\n\n const container = document.createElement('div');\n container.classList.add('container');\n container.setAttribute('part', 'native');\n\n const slot = document.createElement('slot');\n slot.classList.add('reorder-items');\n\n container.appendChild(slot);\n\n fragment.appendChild(container);\n\n this.container = container;\n\n return fragment;\n }\n\n /\n Adds event listeners after the component is drawn.\n /\n afterDraw() {\n this.syncAria();\n const items = this.querySelectorAll('wje-reorder-item');\n const dropZones = this.querySelectorAll('wje-reorder-dropzone');\n this.container.classList.add(this.hasAttribute('reverse') ? 'reversed' : 'basic');\n\n if (dropZones) {\n dropZones.forEach((dropZone) => {\n this.container.classList.remove('container');\n this.container.classList.add('container-w-dropzones');\n });\n }\n\n if (items) {\n items.forEach((item) => {\n const handles = item.querySelectorAll('[slot=handle]');\n const draggableElement = handles.length > 0 ? handles : [item];\n\n draggableElement.forEach((element) => {\n this.attachEventListeners(element);\n });\n });\n }\n }\n\n /\n Sync ARIA attributes on host.\n /\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'list' });\n }\n }\n\n /\n Attaches event listeners to the element.\n * @param element\n /\n attachEventListeners(element) {\n element.addEventListener('mousedown', this.mouseDown.bind(this), false);\n element.addEventListener('touchstart', this.touchStart.bind(this), false);\n element.addEventListener('dragstart', this.dragStart.bind(this), false);\n }\n\n /\n Handles the mouse down event.\n * @param {object} e\n /\n mouseDown(e) {\n this.startDragging(e.clientX, e.clientY, e.currentTarget);\n document.addEventListener('mousemove', this.mouseMove.bind(this), false);\n document.addEventListener('mouseup', this.mouseUp.bind(this), false);\n document.body.style.userSelect = 'none';\n }\n\n /\n Handles the touch start event.\n * @param e\n /\n touchStart(e) {\n const touch = e.touches[0];\n this.startDragging(touch.clientX, touch.clientY, e.currentTarget);\n document.addEventListener('touchmove', this.touchMove.bind(this), false);\n document.addEventListener('touchend', this.touchEnd.bind(this), false);\n document.body.style.userSelect = 'none';\n }\n\n /\n Initializes the dragging process for a reorderable item.\n * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.\n * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.\n * @param {HTMLElement} target The target element where the drag event originated.\n /\n startDragging(clientX, clientY, target) {\n if (this.hasAttribute('disabled')) {\n return;\n }\n\n this.isDragging = true;\n this.dragEl = target.closest('wje-reorder-item');\n\n this.createClone();\n\n this.dragEl.style.opacity = '0.3';\n\n const rect = this.dragEl.getBoundingClientRect();\n this.offsetX = clientX - rect.left;\n this.offsetY = clientY - rect.top;\n\n this.dragEl.classList.add('dragging');\n\n this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);\n this.originalParent = this.dragEl.parentNode;\n }\n\n /\n Handles the mouse move event.\n * @param e\n /\n mouseMove(e) {\n if (!this.isDragging) return;\n this.moveElement(e.pageX, e.pageY);\n\n if (this.cloneEl) {\n this.cloneEl.style.left = `${e.pageX - this.offsetX}px`;\n this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;\n }\n }\n\n /\n Handles the `touchmove` event and updates the position of the dragged element.\n * @param {TouchEvent} e The touch event containing touch position data.\n /\n touchMove(e) {\n if (!this.isDragging) return;\n const touch = e.touches[0];\n this.moveElement(touch.pageX, touch.pageY);\n }\n\n /\n Updates the position of the dragged element and handles reordering logic based on the mouse position.\n * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.\n * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.\n /\n moveElement(pageX, pageY) {\n const scrollX = window.scrollX \|\| document.documentElement.scrollLeft;\n const scrollY = window.scrollY \|\| document.documentElement.scrollTop;\n const adjustedPageX = pageX - scrollX;\n const adjustedPageY = pageY - scrollY;\n\n this.dragEl.style.left = `${adjustedPageX}px`;\n this.dragEl.style.top = `${adjustedPageY}px`;\n\n if (this.cloneEl) {\n this.cloneEl.style.left = `${adjustedPageX}px`;\n this.cloneEl.style.top = `${adjustedPageY}px`;\n }\n\n const items = this.querySelectorAll('wje-reorder-item');\n items.forEach((item) => {\n if (item === this.dragEl) return;\n\n const boundingBox = item.getBoundingClientRect();\n const mouseY = adjustedPageY - boundingBox.top;\n const mouseYPercent = (mouseY / boundingBox.height) 100;\n\n if (mouseYPercent > 30 && this.isMovingDown(item)) {\n item.parentNode.insertBefore(this.dragEl, item.nextSibling);\n } else if (mouseYPercent < 30 && !this.isMovingDown(item)) {\n item.parentNode.insertBefore(this.dragEl, item);\n }\n });\n }\n\n /*\n Handles the mouse up event.\n /\n mouseUp() {\n this.stopDragging();\n document.removeEventListener('mousemove', this.mouseMove.bind(this), false);\n document.removeEventListener('mouseup', this.mouseUp.bind(this), false);\n\n if (this.cloneEl) {\n this.cloneEl.remove();\n this.cloneEl = null;\n }\n\n if (this.dragEl) {\n this.dragEl.style.opacity = '1';\n }\n }\n\n /\n Handles the touch end event.\n /\n touchEnd() {\n this.stopDragging();\n document.removeEventListener('touchmove', this.touchMove.bind(this), false);\n document.removeEventListener('touchend', this.touchEnd.bind(this), false);\n }\n\n /\n Stops dragging the element.\n /\n stopDragging() {\n if (!this.isDragging) return;\n\n this.isDragging = false;\n this.dragEl.classList.remove('dragging');\n this.dragEl.style.left = '';\n this.dragEl.style.top = '';\n\n const parent = this.dragEl.parentNode;\n const newIndex = Array.from(parent.children).indexOf(this.dragEl);\n\n const newOrderElements = Array.from(parent.children).map((el) => {\n const clonedNode = el.cloneNode(true);\n const handle = clonedNode.querySelector('.handle');\n if (handle) {\n handle.remove();\n }\n return clonedNode;\n });\n\n const newOrder = newOrderElements.map(el => el.innerText.trim());\n\n this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);\n\n document.body.style.userSelect = '';\n }\n\n /\n Prevents the default behavior of the `dragstart` event.\n * @param {DragEvent} e The drag event triggered when a drag operation starts.\n /\n dragStart(e) {\n e.preventDefault();\n }\n\n /\n Creates a clone of the element.\n /\n createClone() {\n this.cloneEl = this.dragEl.cloneNode(true);\n this.cloneEl.style.position = 'absolute';\n this.cloneEl.style.pointerEvents = 'none';\n this.cloneEl.style.visibility = 'visible';\n\n document.body.appendChild(this.cloneEl);\n }\n\n /\n Checks if the dragged element is moving down.\n * @param droppedElement\n * @returns {boolean}\n /\n isMovingDown(droppedElement) {\n const parent = droppedElement.parentNode;\n const dragIndex = Array.from(parent.children).indexOf(this.dragEl);\n const dropIndex = Array.from(parent.children).indexOf(droppedElement);\n\n return dragIndex < dropIndex;\n }\n\n /\n Dispatches a custom event to signal that a reordering operation has occurred.\n * @param {number} from The original index of the dragged item.\n * @param {number} to The new index of the dragged item after reordering.\n * @param {Array<number>} order The updated order of items after the reordering.\n * // @fires wje-reorder:change - Dispatched when the reordering is completed.\n * The event includes details about the initial position, the new position, and the new order.\n */\n dispatchChange(from, to, order, orderElements) {\n this.dispatchEvent(\n new CustomEvent('wje-reorder:change', {\n detail: { from, to, order, orderElements },\n })\n );\n }\n}\n","import Reorder from './reorder.element.js';\n\nexport default Reorder;\n\nReorder.define('wje-reorder', Reorder);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-reorder.js","sources":["../packages/wje-reorder/reorder.element.js","../packages/wje-reorder/reorder.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Reorder` is a custom web component that represents a reorder.\n * It extends from `WJElement`.\n * @summary This element represents a reorder.\n * @documentation https://elements.webjet.sk/components/reorder\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder.\n * @slot - The default slot for the reorder.\n * // @fires wje-reorder:change - Event fired when the reorder is changed.\n * @tag wje-reorder\n /\n\nexport default class Reorder extends WJElement {\n /\n Creates an instance of Select.\n * @class\n /\n constructor() {\n super();\n this.dragEl = null;\n this.items = [];\n this.originalIndex = null;\n this.isDragging = false;\n this.offsetX = 0;\n this.offsetY = 0;\n this.cloneEl = null;\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'Select';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return [];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the component after it is connected to the DOM.\n * @returns {DocumentFragment}\n /\n draw() {\n const fragment = document.createDocumentFragment();\n\n const container = document.createElement('div');\n container.classList.add('container');\n container.setAttribute('part', 'native');\n\n const slot = document.createElement('slot');\n slot.classList.add('reorder-items');\n\n container.appendChild(slot);\n\n fragment.appendChild(container);\n\n this.container = container;\n\n return fragment;\n }\n\n /\n Adds event listeners after the component is drawn.\n /\n afterDraw() {\n this.syncAria();\n const items = this.querySelectorAll('wje-reorder-item');\n const dropZones = this.querySelectorAll('wje-reorder-dropzone');\n this.container.classList.add(this.hasAttribute('reverse') ? 'reversed' : 'basic');\n\n if (dropZones) {\n dropZones.forEach((dropZone) => {\n this.container.classList.remove('container');\n this.container.classList.add('container-w-dropzones');\n });\n }\n\n if (items) {\n items.forEach((item) => {\n const handles = item.querySelectorAll('[slot=handle]');\n const draggableElement = handles.length > 0 ? handles : [item];\n\n draggableElement.forEach((element) => {\n this.attachEventListeners(element);\n });\n });\n }\n }\n\n /\n Sync ARIA attributes on host.\n /\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'list' });\n }\n }\n\n /\n Attaches event listeners to the element.\n * @param element\n /\n attachEventListeners(element) {\n element.addEventListener('mousedown', this.mouseDown.bind(this), false);\n element.addEventListener('touchstart', this.touchStart.bind(this), false);\n element.addEventListener('dragstart', this.dragStart.bind(this), false);\n }\n\n /\n Handles the mouse down event.\n * @param {object} e\n /\n mouseDown(e) {\n this.startDragging(e.clientX, e.clientY, e.currentTarget);\n document.addEventListener('mousemove', this.mouseMove.bind(this), false);\n document.addEventListener('mouseup', this.mouseUp.bind(this), false);\n document.body.style.userSelect = 'none';\n }\n\n /\n Handles the touch start event.\n * @param e\n /\n touchStart(e) {\n const touch = e.touches[0];\n this.startDragging(touch.clientX, touch.clientY, e.currentTarget);\n document.addEventListener('touchmove', this.touchMove.bind(this), false);\n document.addEventListener('touchend', this.touchEnd.bind(this), false);\n document.body.style.userSelect = 'none';\n }\n\n /\n Initializes the dragging process for a reorderable item.\n * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.\n * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.\n * @param {HTMLElement} target The target element where the drag event originated.\n /\n startDragging(clientX, clientY, target) {\n if (this.hasAttribute('disabled')) {\n return;\n }\n\n this.isDragging = true;\n this.dragEl = target.closest('wje-reorder-item');\n\n this.createClone();\n\n this.dragEl.style.opacity = '0.3';\n\n const rect = this.dragEl.getBoundingClientRect();\n this.offsetX = clientX - rect.left;\n this.offsetY = clientY - rect.top;\n\n this.dragEl.classList.add('dragging');\n\n this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);\n this.originalParent = this.dragEl.parentNode;\n }\n\n /\n Handles the mouse move event.\n * @param e\n /\n mouseMove(e) {\n if (!this.isDragging) return;\n this.moveElement(e.pageX, e.pageY);\n\n if (this.cloneEl) {\n this.cloneEl.style.left = `${e.pageX - this.offsetX}px`;\n this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;\n }\n }\n\n /\n Handles the `touchmove` event and updates the position of the dragged element.\n * @param {TouchEvent} e The touch event containing touch position data.\n /\n touchMove(e) {\n if (!this.isDragging) return;\n const touch = e.touches[0];\n this.moveElement(touch.pageX, touch.pageY);\n }\n\n /\n Updates the position of the dragged element and handles reordering logic based on the mouse position.\n * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.\n * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.\n /\n moveElement(pageX, pageY) {\n const scrollX = window.scrollX \|\| document.documentElement.scrollLeft;\n const scrollY = window.scrollY \|\| document.documentElement.scrollTop;\n const adjustedPageX = pageX - scrollX;\n const adjustedPageY = pageY - scrollY;\n\n this.dragEl.style.left = `${adjustedPageX}px`;\n this.dragEl.style.top = `${adjustedPageY}px`;\n\n if (this.cloneEl) {\n this.cloneEl.style.left = `${adjustedPageX}px`;\n this.cloneEl.style.top = `${adjustedPageY}px`;\n }\n\n const items = this.querySelectorAll('wje-reorder-item');\n items.forEach((item) => {\n if (item === this.dragEl) return;\n\n const boundingBox = item.getBoundingClientRect();\n const mouseY = adjustedPageY - boundingBox.top;\n const mouseYPercent = (mouseY / boundingBox.height) 100;\n\n if (mouseYPercent > 30 && this.isMovingDown(item)) {\n item.parentNode.insertBefore(this.dragEl, item.nextSibling);\n } else if (mouseYPercent < 30 && !this.isMovingDown(item)) {\n item.parentNode.insertBefore(this.dragEl, item);\n }\n });\n }\n\n /*\n Handles the mouse up event.\n /\n mouseUp() {\n this.stopDragging();\n document.removeEventListener('mousemove', this.mouseMove.bind(this), false);\n document.removeEventListener('mouseup', this.mouseUp.bind(this), false);\n\n if (this.cloneEl) {\n this.cloneEl.remove();\n this.cloneEl = null;\n }\n\n if (this.dragEl) {\n this.dragEl.style.opacity = '1';\n }\n }\n\n /\n Handles the touch end event.\n /\n touchEnd() {\n this.stopDragging();\n document.removeEventListener('touchmove', this.touchMove.bind(this), false);\n document.removeEventListener('touchend', this.touchEnd.bind(this), false);\n }\n\n /\n Stops dragging the element.\n /\n stopDragging() {\n if (!this.isDragging) return;\n\n this.isDragging = false;\n this.dragEl.classList.remove('dragging');\n this.dragEl.style.left = '';\n this.dragEl.style.top = '';\n\n const parent = this.dragEl.parentNode;\n const newIndex = Array.from(parent.children).indexOf(this.dragEl);\n\n const newOrderElements = Array.from(parent.children).map((el) => {\n const clonedNode = el.cloneNode(true);\n const handle = clonedNode.querySelector('.handle');\n if (handle) {\n handle.remove();\n }\n return clonedNode;\n });\n\n const newOrder = newOrderElements.map(el => el.innerText.trim());\n\n this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);\n\n document.body.style.userSelect = '';\n }\n\n /\n Prevents the default behavior of the `dragstart` event.\n * @param {DragEvent} e The drag event triggered when a drag operation starts.\n /\n dragStart(e) {\n e.preventDefault();\n }\n\n /\n Creates a clone of the element.\n /\n createClone() {\n this.cloneEl = this.dragEl.cloneNode(true);\n this.cloneEl.style.position = 'absolute';\n this.cloneEl.style.pointerEvents = 'none';\n this.cloneEl.style.visibility = 'visible';\n\n document.body.appendChild(this.cloneEl);\n }\n\n /\n Checks if the dragged element is moving down.\n * @param droppedElement\n * @returns {boolean}\n /\n isMovingDown(droppedElement) {\n const parent = droppedElement.parentNode;\n const dragIndex = Array.from(parent.children).indexOf(this.dragEl);\n const dropIndex = Array.from(parent.children).indexOf(droppedElement);\n\n return dragIndex < dropIndex;\n }\n\n /\n Dispatches a custom event to signal that a reordering operation has occurred.\n * @param {number} from The original index of the dragged item.\n * @param {number} to The new index of the dragged item after reordering.\n * @param {Array<number>} order The updated order of items after the reordering.\n * // @fires wje-reorder:change - Dispatched when the reordering is completed.\n * The event includes details about the initial position, the new position, and the new order.\n */\n dispatchChange(from, to, order, orderElements) {\n this.dispatchEvent(\n new CustomEvent('wje-reorder:change', {\n detail: { from, to, order, orderElements },\n })\n );\n }\n}\n","import Reorder from './reorder.element.js';\n\nexport default Reorder;\n\nReorder.define('wje-reorder', Reorder);\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-route.js","sources":["../packages/wje-route/route.element.js","../packages/wje-route/route.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\n/*\n `Route` is a custom web component that represents a route in a routing system.\n * @summary This element represents a route in a routing system.\n * @documentation https://elements.webjet.sk/components/route\n * @status stable\n * @augments WJElement\n * @tag wje-route\n /\nexport default class Route extends WJElement {\n /\n Creates an instance of Route.\n * @class\n /\n constructor() {\n super();\n }\n\n className = 'Route';\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return [];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draws the component for the route.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let slot = document.createElement('slot');\n\n fragment.appendChild(slot);\n\n return fragment;\n }\n}\n","import Route from './route.element.js';\n\nexport default Route;\n\nRoute.define('wje-route', Route);\n"],"names":[],"mappings":";;;;AAUe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC,cAAc;AACV,~~UAAO~~;~~AAGX~~,qCAAY;AAAA,~~EAFhB~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EASI~~,WAAW,qBAAqB;AAC5B,WAAO,~~CAAE~~;AAAA,~~EACjB~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,kBAAkB;AACd,SAAK,eAAe;AAAA,~~EAC5B~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,OAAO;AACH,QAAI,WAAW,SAAS,~~uBAAwB~~;~~AAEhD~~,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,~~EACf~~;~~AACA~~;AC9CA,MAAM,OAAO,aAAa,KAAK;"}
1	+ {"version":3,"file":"wje-route.js","sources":["../packages/wje-route/route.element.js","../packages/wje-route/route.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\n/*\n `Route` is a custom web component that represents a route in a routing system.\n * @summary This element represents a route in a routing system.\n * @documentation https://elements.webjet.sk/components/route\n * @status stable\n * @augments WJElement\n * @tag wje-route\n /\nexport default class Route extends WJElement {\n /\n Creates an instance of Route.\n * @class\n /\n constructor() {\n super();\n }\n\n className = 'Route';\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return [];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draws the component for the route.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let slot = document.createElement('slot');\n\n fragment.appendChild(slot);\n\n return fragment;\n }\n}\n","import Route from './route.element.js';\n\nexport default Route;\n\nRoute.define('wje-route', Route);\n"],"names":[],"mappings":";;;;AAUe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACX;AACJ;AC9CA,MAAM,OAAO,aAAa,KAAK;"}

package/dist/wje-router-link.js CHANGED Viewed

@@ -1,7 +1,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 { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
+import { b as bindRouterLinks } from "./router-links-wjqCnncc.js";
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ WJ Router Link ]\n*/\n\n:host {\n    display: block;\n    background: transparent !important;\n}\n\n:host(.active) {\n    cursor: pointer;\n    font-weight: bold;\n}\n";
 class RouterLink extends WJElement {
@@ -47,7 +47,17 @@ class RouterLink extends WJElement {
     return fragment;
   }
   afterDraw(context, appStore, attributes) {
-    this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
+    this.bindRouterLinks();
+    if (!this.unbindRouterLinks) {
+      queueMicrotask(() => this.bindRouterLinks());
+    }
+  }
+  bindRouterLinks() {
+    var _a;
+    const parent = this.parentElement;
+    if (!parent) return;
+    (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
+    this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });
   }
   /**
    * Cleans up before the component is disconnected.

package/dist/wje-router-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-router-link.js","sources":["../packages/wje-router-link/router-link.element.js","../packages/wje-router-link/router-link.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `RouterLink` is a custom web component that represents a router link in a routing system.\n * @summary This element represents a router link in a routing system.\n * @documentation https://elements.webjet.sk/components/router-link\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the router link.\n * @tag wje-router-link\n /\nexport default class RouterLink extends WJElement {\n /\n Creates an instance of RouterLink.\n * @class\n /\n constructor() {\n super();\n }\n\n className = 'RouterLink';\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 this.setAttribute('active-class', 'active');\n }\n\n /\n Draws the component for the router link.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n afterDraw(context, appStore, attributes) {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n }\n\n /\n Cleans up before the component is disconnected.\n */\n beforeDisconnect() {\n this.unbindRouterLinks?.();\n }\n}\n","import RouterLink from './router-link.element.js';\n\nexport default RouterLink;\n\nRouterLink.define('wje-router-link', RouterLink);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,~~UAAO~~;~~AAGX~~,qCAAY;AAAA,~~EAFhB~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EASI~~,WAAW,gBAAgB;AACvB,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAOI~~,WAAW,qBAAqB;AAC5B,WAAO,~~CAAE~~;AAAA,~~EACjB~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAAA,~~EAClD~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,OAAO;AACH,QAAI,WAAW,SAAS,~~uBAAwB~~;~~AAEhD~~,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,~~EACf~~;AAAA,~~EAEI~~,UAAU,SAAS,UAAU,YAAY;AACrC,SAAK,oBAAoB,gBAAgB,~~KAAK~~,~~eAAe,~~EAAE,UAAU,OAAO;AAAA,~~EACxF~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,mBAAmB;;AACf,eAAK,sBAAL;AAAA,~~EACR~~;~~AACA~~;~~ACvEA~~,WAAW,OAAO,mBAAmB,UAAU;"}
1	+ {"version":3,"file":"wje-router-link.js","sources":["../packages/wje-router-link/router-link.element.js","../packages/wje-router-link/router-link.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `RouterLink` is a custom web component that represents a router link in a routing system.\n * @summary This element represents a router link in a routing system.\n * @documentation https://elements.webjet.sk/components/router-link\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the router link.\n * @tag wje-router-link\n /\nexport default class RouterLink extends WJElement {\n /\n Creates an instance of RouterLink.\n * @class\n /\n constructor() {\n super();\n }\n\n className = 'RouterLink';\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 this.setAttribute('active-class', 'active');\n }\n\n /\n Draws the component for the router link.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n afterDraw(context, appStore, attributes) {\n this.bindRouterLinks();\n if (!this.unbindRouterLinks) {\n queueMicrotask(() => this.bindRouterLinks());\n }\n }\n\n bindRouterLinks() {\n const parent = this.parentElement;\n if (!parent) return;\n\n this.unbindRouterLinks?.();\n this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });\n }\n\n /\n Cleans up before the component is disconnected.\n */\n beforeDisconnect() {\n this.unbindRouterLinks?.();\n }\n}\n","import RouterLink from './router-link.element.js';\n\nexport default RouterLink;\n\nRouterLink.define('wje-router-link', RouterLink);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA,EAEA,UAAU,SAAS,UAAU,YAAY;AACrC,SAAK,gBAAe;AACpB,QAAI,CAAC,KAAK,mBAAmB;AACzB,qBAAe,MAAM,KAAK,iBAAiB;AAAA,IAC/C;AAAA,EACJ;AAAA,EAEA,kBAAkB;;AACd,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,OAAQ;AAEb,eAAK,sBAAL;AACA,SAAK,oBAAoB,gBAAgB,QAAQ,EAAE,UAAU,OAAO;AAAA,EACxE;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACJ;AACJ;AClFA,WAAW,OAAO,mBAAmB,UAAU;"}

package/dist/wje-router-outlet.js CHANGED Viewed

@@ -129,10 +129,14 @@ function getAnimationHook(name) {
   return animationRegistry[name] || defaultHook || (defaultHook = new GenericCSS());
 }
 class AnimatedOutlet extends HTMLElement {
+  /**
+   * @template {Node} T
+   * @param {T} el
+   * @returns {T}
+   */
   appendChild(el) {
     if (!this.hasAttribute("animation")) {
-      super.appendChild(el);
-      return;
+      return super.appendChild(el);
     }
     const hook = getAnimationHook(this.getAttribute("animation"));
     const runParallel = hook.runParallel(this);
@@ -143,11 +147,16 @@ class AnimatedOutlet extends HTMLElement {
     } else {
       hook.enter(this, el);
     }
+    return el;
   }
+  /**
+   * @template {Node} T
+   * @param {T} el
+   * @returns {T}
+   */
   removeChild(el) {
     if (!this.hasAttribute("animation")) {
-      super.removeChild(el);
-      return;
+      return super.removeChild(el);
     }
     const hook = getAnimationHook(this.getAttribute("animation"));
     if (this.removing && this.removing.parentNode === this) {
@@ -158,7 +167,7 @@ class AnimatedOutlet extends HTMLElement {
         super.removeChild(el);
       }
       this.removing = null;
-      return;
+      return el;
     }
     this.removing = el;
     hook.leave(this, el, () => {
@@ -169,6 +178,7 @@ class AnimatedOutlet extends HTMLElement {
       this.appending = null;
       this.removing = null;
     });
+    return el;
   }
 }
 const styles = "/*\n[ WJ Router Outlet ]\n*/\n\n.fade-enter-active,\n.fade-leave-active {\n    transition: opacity 0.5s;\n}\n.fade-enter {\n    height: 0;\n    overflow: hidden;\n}\n\n.fade-enter,\n.fade-leave-to {\n    opacity: 0;\n}\n\n.slide-fade-enter-active {\n    transition: all 0.3s ease;\n}\n\n.slide-fade-leave-active {\n    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n\n.slide-fade-enter,\n.slide-fade-leave-to {\n    transform: translateX(100px);\n    opacity: 0;\n}\n\n.bounce-enter {\n    opacity: 0;\n}\n\n.bounce-enter-active {\n    animation: bounce-in 0.5s;\n}\n\n.bounce-leave-active {\n    animation: bounce-in 0.5s reverse;\n}\n\n@keyframes bounce-in {\n    0% {\n        transform: scale(0);\n    }\n    50% {\n        transform: scale(1.5);\n    }\n    100% {\n        transform: scale(1);\n    }\n}\n\n\n";