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-textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n /\n\nexport default class Textarea extends FormAssociatedElement {\n static _instanceId = 0;\n /\n Creates an instance of Textarea.\n * @class\n /\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\n this._instanceId = ++Textarea._instanceId;\n }\n\n /\n Setter for the value attribute.\n * @param {string} value The value to set.\n /\n set value(value) {\n this.internals.setFormValue(value);\n\n if (this.input) this.input.value = value;\n\n this.pristine = false;\n this._value = value;\n this.syncAria();\n }\n\n /\n Getter for the value attribute.\n * @returns {string} The value of the attribute.\n /\n get value() {\n return this.input?.value ?? this._value ?? '';\n }\n\n /\n Sets the label attribute of the element.\n * @param {string} value The value to set as the label attribute.\n /\n set label(value) {\n if (value === null \|\| value === undefined) {\n this.removeAttribute('label');\n } else {\n this.setAttribute('label', value);\n }\n }\n\n /\n Retrieves the value of the 'label' attribute if it exists.\n * If the 'label' attribute is not set, it returns false.\n * @returns {string\|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n /\n get label() {\n return this.getAttribute('label') \|\| false;\n }\n\n /\n Sets the `validateOnChange` property. If set to a truthy value, it adds the\n * `validate-on-change` attribute to the element. If set to a falsy value, it\n * removes the `validate-on-change` attribute from the element.\n * @param {boolean} value Determines whether to add or remove the\n * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n * falsy value removes it.\n /\n set validateOnChange(value) {\n if (value) {\n this.setAttribute('validate-on-change', '');\n } else {\n this.removeAttribute('validate-on-change');\n }\n }\n\n /\n Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n set placeholder(value) {\n this.setAttribute('placeholder', value);\n }\n\n get placeholder() {\n return this.getAttribute('placeholder');\n }\n\n className = 'Textarea';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return ['value', 'name', 'disabled', 'placeholder', 'label', 'required', 'readonly', 'invalid', 'rows'];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n\n // if some value was set via value setter then don't use default value\n if (this.pristine) {\n const attrValue = this.getAttribute('value');\n this.value = attrValue !== null ? attrValue : this.innerHTML;\n this.pristine = false;\n }\n this.syncAria();\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (oldValue === newValue) return;\n\n if (name === 'label') {\n this.refresh();\n return;\n }\n\n if (!this.input) {\n this.syncAria();\n return;\n }\n\n if (name === 'value') {\n this._value = newValue ?? '';\n this.input.value = this.value;\n this.internals.setFormValue(this.value);\n } else if (name === 'name') {\n this.input.name = this.name;\n } else if (name === 'disabled') {\n this.input.disabled = this.hasAttribute('disabled');\n } else if (name === 'required') {\n this.input.required = this.required;\n } else if (name === 'readonly') {\n this.input.readOnly = this.hasAttribute('readonly');\n } else if (name === 'placeholder') {\n this.input.placeholder = this.placeholder \|\| '';\n } else if (name === 'rows') {\n this.input.rows = Number(newValue \|\| 3);\n }\n\n this.syncAria();\n }\n\n /\n Draws the component for the textarea.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-textarea', this.variant \|\| 'default');\n native.setAttribute('part', 'native');\n\n if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n let wrapper = document.createElement('div');\n wrapper.setAttribute('part', 'wrapper');\n wrapper.classList.add('wrapper');\n\n let inputWrapper = document.createElement('div');\n inputWrapper.classList.add('input-wrapper');\n\n let label = document.createElement('label');\n label.setAttribute('part', 'label');\n label.htmlFor = 'textarea';\n label.innerHTML = this.label \|\| '';\n\n let input = document.createElement('textarea');\n input.id = 'textarea';\n input.name = this.name;\n input.disabled = this.hasAttribute('disabled');\n input.innerText = this.value;\n input.placeholder = this.placeholder \|\| '';\n input.classList.add('form-control');\n input.setAttribute('part', 'input');\n input.rows = Number(this.getAttribute('rows') \|\| 3);\n input.setAttribute('spellcheck', false);\n\n const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n attributes.forEach((attr) => {\n if (this.hasAttribute(attr)) {\n input.setAttribute(attr, this[attr] \|\| '');\n }\n });\n\n let error = document.createElement('div');\n error.setAttribute('slot', 'error');\n\n let errorSlot = document.createElement('slot');\n errorSlot.setAttribute('name', 'error');\n this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`;\n errorSlot.id = this._ariaErrorId;\n\n if (this.getAttribute('resize') === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n if (this.label) {\n if (this.variant === 'standard') {\n native.appendChild(label);\n } else {\n inputWrapper.appendChild(label);\n }\n }\n\n inputWrapper.appendChild(input);\n\n wrapper.appendChild(inputWrapper);\n\n native.appendChild(wrapper);\n native.append(errorSlot);\n\n this.append(error);\n\n fragment.appendChild(native);\n\n if (this.hasAttribute('counter')) {\n input.maxLength = this.maxLength \|\| 1000;\n input.addEventListener('input', this.counterFn);\n\n let counter = document.createElement('div');\n counter.classList.add('counter');\n counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n this.counterElement = counter;\n fragment.appendChild(counter);\n }\n\n this.native = native;\n this.labelElement = label;\n this.input = input;\n\n this.syncAria();\n return fragment;\n }\n\n /\n Sets up the event listeners after the component is drawn.\n /\n afterDraw() {\n if (this.getAttribute('resize') === 'auto' && typeof ResizeObserver === 'function') {\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n this.resizeObserver.observe(this.input);\n }\n\n if (!this.hasAttribute('disabled')) {\n event.addListener(this, 'click', 'wje-textarea:change');\n event.addListener(this, 'click', 'wje-textarea:input');\n }\n\n this.input.addEventListener('focus', (e) => {\n this.labelElement.classList.add('fade');\n this.native.classList.add('focused');\n });\n\n this.input.addEventListener('blur', (e) => {\n this.native.classList.remove('focused');\n if (!e.target.value) this.labelElement.classList.remove('fade');\n });\n\n this.input.addEventListener('input', (e) => {\n this.validate();\n\n if (this.validateOnChange) {\n this.pristine = false;\n this.propagateValidation();\n }\n\n if (this.invalid) {\n this.invalid = false;\n this.internals.setValidity({}, '');\n }\n\n this.input.classList.remove('pristine');\n this.labelElement.classList.add('fade');\n\n const clone = new e.constructor(e.type, e);\n this.dispatchEvent(clone);\n\n event.dispatchCustomEvent(this, 'wje-textarea:input', {\n value: this.input.value,\n });\n\n this.value = this.input.value;\n });\n\n this.addEventListener('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n\n if (this.customErrorDisplay) {\n e.preventDefault();\n }\n });\n\n this.validate();\n\n this.syncAria();\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n const requiredInvalid = this.required && !this.value;\n const invalid = this.invalid \|\| requiredInvalid;\n const label = this.label && this.label !== false ? this.label.trim() : '';\n this.setAriaState({\n role: 'textbox',\n disabled: this.disabled,\n required: this.required,\n readonly: this.hasAttribute('readonly'),\n invalid,\n describedBy: this._ariaErrorId,\n ...(label ? { label } : {}),\n });\n }\n\n componentCleanup() {\n this.resizeObserver?.unobserve(this.input);\n this.resizeObserver?.disconnect();\n }\n\n /\n Disconnects the component.\n /\n beforeDisconnect() {\n this.resizeObserver?.unobserve(this.input);\n this.resizeObserver?.disconnect();\n }\n\n /\n Sets the height of the textarea.\n /\n setTextareaHeight = () => {\n if (this.getAttribute('resize') === 'auto') {\n this.input.style.height = 'auto';\n this.input.style.height = this.input.scrollHeight + 'px';\n }\n };\n\n /\n Updates the counter for the textarea.\n * @param {Event} e The event object.\n */\n counterFn = (e) => {\n this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n /\n\nexport default class Textarea extends FormAssociatedElement {\n static _instanceId = 0;\n /\n Creates an instance of Textarea.\n * @class\n /\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\n this._instanceId = ++Textarea._instanceId;\n }\n\n /\n Setter for the value attribute.\n * @param {string} value The value to set.\n /\n set value(value) {\n this.internals.setFormValue(value);\n\n if (this.input) this.input.value = value;\n\n this.pristine = false;\n this._value = value;\n this.syncAria();\n }\n\n /\n Getter for the value attribute.\n * @returns {string} The value of the attribute.\n /\n get value() {\n return this.input?.value ?? this._value ?? '';\n }\n\n /\n Sets the label attribute of the element.\n * @param {string} value The value to set as the label attribute.\n /\n set label(value) {\n if (value === null \|\| value === undefined) {\n this.removeAttribute('label');\n } else {\n this.setAttribute('label', value);\n }\n }\n\n /\n Retrieves the value of the 'label' attribute if it exists.\n * If the 'label' attribute is not set, it returns false.\n * @returns {string\|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n /\n get label() {\n return this.getAttribute('label') \|\| false;\n }\n\n /\n Sets the `validateOnChange` property. If set to a truthy value, it adds the\n * `validate-on-change` attribute to the element. If set to a falsy value, it\n * removes the `validate-on-change` attribute from the element.\n * @param {boolean} value Determines whether to add or remove the\n * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n * falsy value removes it.\n /\n set validateOnChange(value) {\n if (value) {\n this.setAttribute('validate-on-change', '');\n } else {\n this.removeAttribute('validate-on-change');\n }\n }\n\n /\n Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n set placeholder(value) {\n this.setAttribute('placeholder', value);\n }\n\n get placeholder() {\n return this.getAttribute('placeholder');\n }\n\n className = 'Textarea';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return ['value', 'name', 'disabled', 'placeholder', 'label', 'required', 'readonly', 'invalid', 'rows'];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n\n // if some value was set via value setter then don't use default value\n if (this.pristine) {\n const attrValue = this.getAttribute('value');\n this.value = attrValue !== null ? attrValue : this.innerHTML;\n this.pristine = false;\n }\n this.syncAria();\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (oldValue === newValue) return;\n\n if (name === 'label') {\n this.refresh();\n return;\n }\n\n if (!this.input) {\n this.syncAria();\n return;\n }\n\n if (name === 'value') {\n this._value = newValue ?? '';\n this.input.value = this.value;\n this.internals.setFormValue(this.value);\n } else if (name === 'name') {\n this.input.name = this.name;\n } else if (name === 'disabled') {\n this.input.disabled = this.hasAttribute('disabled');\n } else if (name === 'required') {\n this.input.required = this.required;\n } else if (name === 'readonly') {\n this.input.readOnly = this.hasAttribute('readonly');\n } else if (name === 'placeholder') {\n this.input.placeholder = this.placeholder \|\| '';\n } else if (name === 'rows') {\n this.input.rows = Number(newValue \|\| 3);\n }\n\n this.syncAria();\n }\n\n /\n Draws the component for the textarea.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-textarea', this.variant \|\| 'default');\n native.setAttribute('part', 'native');\n\n if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n let wrapper = document.createElement('div');\n wrapper.setAttribute('part', 'wrapper');\n wrapper.classList.add('wrapper');\n\n let inputWrapper = document.createElement('div');\n inputWrapper.classList.add('input-wrapper');\n\n let label = document.createElement('label');\n label.setAttribute('part', 'label');\n label.htmlFor = 'textarea';\n label.innerHTML = this.label \|\| '';\n\n let input = document.createElement('textarea');\n input.id = 'textarea';\n input.name = this.name;\n input.disabled = this.hasAttribute('disabled');\n input.innerText = this.value;\n input.placeholder = this.placeholder \|\| '';\n input.classList.add('form-control');\n input.setAttribute('part', 'input');\n input.rows = Number(this.getAttribute('rows') \|\| 3);\n input.setAttribute('spellcheck', false);\n\n const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n attributes.forEach((attr) => {\n if (this.hasAttribute(attr)) {\n input.setAttribute(attr, this[attr] \|\| '');\n }\n });\n\n let error = document.createElement('div');\n error.setAttribute('slot', 'error');\n\n let errorSlot = document.createElement('slot');\n errorSlot.setAttribute('name', 'error');\n this._ariaErrorId = this.id ? `${this.id}-error` : `wje-textarea-${this._instanceId}-error`;\n errorSlot.id = this._ariaErrorId;\n\n if (this.getAttribute('resize') === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n if (this.label) {\n if (this.variant === 'standard') {\n native.appendChild(label);\n } else {\n inputWrapper.appendChild(label);\n }\n }\n\n inputWrapper.appendChild(input);\n\n wrapper.appendChild(inputWrapper);\n\n native.appendChild(wrapper);\n native.append(errorSlot);\n\n this.append(error);\n\n fragment.appendChild(native);\n\n if (this.hasAttribute('counter')) {\n input.maxLength = this.maxLength \|\| 1000;\n input.addEventListener('input', this.counterFn);\n\n let counter = document.createElement('div');\n counter.classList.add('counter');\n counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n this.counterElement = counter;\n fragment.appendChild(counter);\n }\n\n this.native = native;\n this.labelElement = label;\n this.input = input;\n\n this.syncAria();\n return fragment;\n }\n\n /\n Sets up the event listeners after the component is drawn.\n /\n afterDraw() {\n if (this.getAttribute('resize') === 'auto' && typeof ResizeObserver === 'function') {\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n this.resizeObserver.observe(this.input);\n }\n\n if (!this.hasAttribute('disabled')) {\n event.addListener(this, 'click', 'wje-textarea:change');\n event.addListener(this, 'click', 'wje-textarea:input');\n }\n\n this.input.addEventListener('focus', (e) => {\n this.labelElement.classList.add('fade');\n this.native.classList.add('focused');\n });\n\n this.input.addEventListener('blur', (e) => {\n this.native.classList.remove('focused');\n if (!e.target.value) this.labelElement.classList.remove('fade');\n });\n\n this.input.addEventListener('input', (e) => {\n this.validate();\n\n if (this.validateOnChange) {\n this.pristine = false;\n this.propagateValidation();\n }\n\n if (this.invalid) {\n this.invalid = false;\n this.internals.setValidity({}, '');\n }\n\n this.input.classList.remove('pristine');\n this.labelElement.classList.add('fade');\n\n const clone = new e.constructor(e.type, e);\n this.dispatchEvent(clone);\n\n event.dispatchCustomEvent(this, 'wje-textarea:input', {\n value: this.input.value,\n });\n\n this.value = this.input.value;\n });\n\n this.addEventListener('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n\n if (this.customErrorDisplay) {\n e.preventDefault();\n }\n });\n\n this.validate();\n\n this.syncAria();\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n const requiredInvalid = this.required && !this.value;\n const invalid = this.invalid \|\| requiredInvalid;\n const label = this.label && this.label !== false ? this.label.trim() : '';\n this.setAriaState({\n role: 'textbox',\n disabled: this.disabled,\n required: this.required,\n readonly: this.hasAttribute('readonly'),\n invalid,\n describedBy: this._ariaErrorId,\n ...(label ? { label } : {}),\n });\n }\n\n componentCleanup() {\n this.resizeObserver?.unobserve(this.input);\n this.resizeObserver?.disconnect();\n }\n\n /\n Disconnects the component.\n /\n beforeDisconnect() {\n this.resizeObserver?.unobserve(this.input);\n this.resizeObserver?.disconnect();\n }\n\n /\n Sets the height of the textarea.\n /\n setTextareaHeight = () => {\n if (this.getAttribute('resize') === 'auto') {\n this.input.style.height = 'auto';\n this.input.style.height = this.input.scrollHeight + 'px';\n }\n };\n\n /\n Updates the counter for the textarea.\n * @param {Event} e The event object.\n */\n counterFn = (e) => {\n this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-thumbnail.js","sources":["../packages/wje-thumbnail/thumbnail.element.js","../packages/wje-thumbnail/thumbnail.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary Thumbnail class\n * @documentation https://elements.webjet.sk/components/thumbnail\n * @status stable\n * @augments WJElement\n * @slot thumbnail-slot - The slot for the thumbnail content.\n * @cssproperty [--wje-thumbnail-width=48px] - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`.\n * @cssproperty [--wje-thumbnail-height=48px] - Specifies the height of the thumbnail. Accepts any valid CSS length unit.\n * @cssproperty [--wje-thumbnail-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable.\n * @tag thumbnail-element\n /\n\nexport default class Thumbnail extends WJElement {\n /\n Creates an instance of Thumbnail.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component\n /\n className = 'Thumbnail';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of observed attributes.\n * @static\n * @returns {Array} An empty array\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 for the thumbnail.\n * @returns {object} Document fragment\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 /\n Sync ARIA attributes on host.\n */\n syncAria() {\n const ariaLabel = this.getAttribute('aria-label');\n const label = this.getAttribute('label');\n\n if (ariaLabel \|\| label) {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'img');\n }\n if (!ariaLabel && label) {\n this.setAriaState({ label });\n }\n this.removeAttribute('aria-hidden');\n } else {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n}\n","import Thumbnail from './thumbnail.element.js';\n\nexport default Thumbnail;\n\nThumbnail.define('wje-thumbnail', Thumbnail);\n"],"names":[],"mappings":";;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,~~UAAO~~;~~AAMX~~;AAAA;AAAA;AAAA,qCAAY;AAAA,~~EALhB~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAYI~~,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,~~SAAU~~;AAAA,~~EACvB~~;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;AAAA;AAAA;AAAA,~~EAKI~~,WAAW;AACP,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,UAAM,QAAQ,KAAK,aAAa,OAAO;AAEvC,QAAI,aAAa,OAAO;AACpB,UAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,aAAK,aAAa,QAAQ,KAAK;AAAA,~~MAC/C~~;~~AACY~~,UAAI,CAAC,aAAa,OAAO;AACrB,aAAK,aAAa,EAAE,OAAO;AAAA,~~MAC3C~~;~~AACY~~,WAAK,gBAAgB,aAAa;AAAA,~~IAC9C~~,~~OAAe~~;AACH,WAAK,aAAa,eAAe,MAAM;AAAA,~~IACnD~~;AAAA,~~EACA~~;~~AACA~~;ACnFA,UAAU,OAAO,iBAAiB,SAAS;"}
1	+ {"version":3,"file":"wje-thumbnail.js","sources":["../packages/wje-thumbnail/thumbnail.element.js","../packages/wje-thumbnail/thumbnail.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary Thumbnail class\n * @documentation https://elements.webjet.sk/components/thumbnail\n * @status stable\n * @augments WJElement\n * @slot thumbnail-slot - The slot for the thumbnail content.\n * @cssproperty [--wje-thumbnail-width=48px] - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`.\n * @cssproperty [--wje-thumbnail-height=48px] - Specifies the height of the thumbnail. Accepts any valid CSS length unit.\n * @cssproperty [--wje-thumbnail-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable.\n * @tag thumbnail-element\n /\n\nexport default class Thumbnail extends WJElement {\n /\n Creates an instance of Thumbnail.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component\n /\n className = 'Thumbnail';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of observed attributes.\n * @static\n * @returns {Array} An empty array\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 for the thumbnail.\n * @returns {object} Document fragment\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 /\n Sync ARIA attributes on host.\n */\n syncAria() {\n const ariaLabel = this.getAttribute('aria-label');\n const label = this.getAttribute('label');\n\n if (ariaLabel \|\| label) {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'img');\n }\n if (!ariaLabel && label) {\n this.setAriaState({ label });\n }\n this.removeAttribute('aria-hidden');\n } else {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n}\n","import Thumbnail from './thumbnail.element.js';\n\nexport default Thumbnail;\n\nThumbnail.define('wje-thumbnail', Thumbnail);\n"],"names":[],"mappings":";;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAK;AAMT;AAAA;AAAA;AAAA,qCAAY;AAAA,EALZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,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,SAAQ;AAAA,EACjB;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;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,UAAM,QAAQ,KAAK,aAAa,OAAO;AAEvC,QAAI,aAAa,OAAO;AACpB,UAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,aAAK,aAAa,QAAQ,KAAK;AAAA,MACnC;AACA,UAAI,CAAC,aAAa,OAAO;AACrB,aAAK,aAAa,EAAE,OAAO;AAAA,MAC/B;AACA,WAAK,gBAAgB,aAAa;AAAA,IACtC,OAAO;AACH,WAAK,aAAa,eAAe,MAAM;AAAA,IAC3C;AAAA,EACJ;AACJ;ACnFA,UAAU,OAAO,iBAAiB,SAAS;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.\n * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n /\n\nexport default class Toast extends WJElement {\n /\n Creates an instance of Toast.\n /\n constructor() {\n super();\n\n this.toastStack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n }\n\n /\n Set headline value of the toast.\n * @param value\n /\n set headline(value) {\n this.setAttribute('headline', value);\n }\n\n /\n Get headline value of the toast.\n * @returns {string}\n /\n get headline() {\n return this.getAttribute('headline');\n }\n\n /\n Set open value of the toast.\n * @param value\n /\n set open(value) {\n this.removeAttribute('open');\n\n if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n }\n\n /\n Get open value of the toast.\n * @returns {boolean}\n /\n get open() {\n return this.hasAttribute('open');\n }\n\n /\n Set duration value of the toast.\n * @param value\n /\n set duration(value) {\n this.setAttribute('duration', value);\n }\n\n /\n Get duration value of the toast.\n * @returns {number}\n /\n get duration() {\n return +this.getAttribute('duration');\n }\n\n /\n Set closable value of the toast.\n * @param value\n /\n set closable(value) {\n this.setAttribute('closable', value \|\| '');\n }\n\n /\n Get closable value of the toast.\n * @returns {boolean}\n /\n get closable() {\n return this.hasAttribute('closable');\n }\n\n /\n Set color value of the toast.\n * @param value\n /\n set color(value) {\n this.setAttribute('color', value);\n }\n\n /\n Get color value of the toast.\n * @returns {string}\n /\n get color() {\n return this.getAttribute('color');\n }\n\n /\n Set countdown value of the toast.\n * @param value\n /\n set countdown(value) {\n if (value) this.setAttribute('countdown', value);\n }\n\n /\n Get countdown value of the toast.\n * @returns {boolean}\n /\n get countdown() {\n return this.hasAttribute('countdown');\n }\n\n /\n Set icon value of the toast.\n * @param value\n /\n set icon(value) {\n this.setAttribute('icon', value);\n }\n\n /\n Get icon value of the toast.\n * @returns {string}\n /\n get icon() {\n return this.getAttribute('icon');\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'Toast';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Setup attributes for the Button element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({\n role: 'status',\n });\n }\n\n /\n Draw method for the toast notification.\n * @returns {object} Document fragment\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-toast');\n\n let mediaSlot = document.createElement('slot');\n mediaSlot.setAttribute('name', 'media');\n mediaSlot.classList.add('media');\n mediaSlot.addEventListener('slotchange', () => {\n if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n mediaSlot.parentElement.classList.add('has-media');\n } else {\n mediaSlot.parentElement.classList.remove('has-media');\n }\n });\n\n let content = document.createElement('div');\n content.classList.add('content');\n content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n let iconX = document.createElement('wje-icon');\n iconX.setAttribute('name', 'x');\n\n let closeBtn = document.createElement('wje-button');\n closeBtn.setAttribute('fill', 'link');\n closeBtn.setAttribute('color', this.color);\n closeBtn.setAttribute('size', 'small');\n closeBtn.classList.add('close');\n closeBtn.setAttribute('aria-label', 'Close');\n\n let countdownEl = document.createElement('div');\n countdownEl.classList.add('countdown');\n\n let countdownBar = document.createElement('div');\n countdownBar.classList.add('countdown-bar');\n\n closeBtn.appendChild(iconX);\n countdownEl.appendChild(countdownBar);\n\n if (this.hasAttribute('icon') && this.icon) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', this.icon);\n icon.setAttribute('color', this.color);\n icon.setAttribute('slot', 'media');\n icon.setAttribute('part', 'icon');\n\n this.appendChild(icon);\n }\n\n native.appendChild(mediaSlot);\n native.appendChild(content);\n\n if (this.closable) native.appendChild(closeBtn);\n\n if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n fragment.appendChild(native);\n\n this.closeBtn = closeBtn;\n this.countdownBar = countdownBar;\n\n return fragment;\n }\n\n /\n After draw method for the toast notification.\n /\n afterDraw() {\n this.closeBtn.addEventListener('wje-button:click', this.hide);\n this.addEventListener('mouseenter', this.pause);\n this.addEventListener('mouseleave', this.resume);\n\n if (this.hasAttribute('countdown')) {\n const startWidth = '100%';\n const endWidth = '0';\n\n this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n duration: this.duration,\n easing: 'linear',\n });\n }\n\n if (this.duration > 0) {\n this.remainingTime = this.duration;\n this.startTimer();\n }\n }\n\n /\n Before disconnect method\n * This method is called before the element is disconnected from the document.\n /\n beforeDisconnect() {\n this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n this.removeEventListener('mouseenter', this.pause);\n this.removeEventListener('mouseleave', this.resume);\n\n clearTimeout(this.timeoutID);\n }\n\n /\n Starts the timer.\n * This method sets the `startTime` property to the current time and sets\n * the `timeoutID` property to the ID of the timeout. The method also\n * dispatches the `wje-toast:after-hide` custom event when the timeout\n * expires.\n /\n startTimer() {\n this.startTime = Date.now();\n if (this.timeoutID) {\n clearTimeout(this.timeoutID);\n }\n this.timeoutID = window.setTimeout(() => {\n this.hide();\n }, this.remainingTime);\n }\n\n /\n Stops the timer.\n * This method clears the timeout and calculates the remaining time.\n * The method is called when the toast notification is paused.\n /\n stopTimer() {\n if (this.timeoutID) {\n window.clearTimeout(this.timeoutID);\n }\n const elapsedTime = Date.now() - this.startTime;\n this.remainingTime -= elapsedTime;\n }\n\n /\n Resumes the timer.\n * This method resumes the timer if the remaining time is greater\n * than zero. The method is called when the toast notification is resumed.\n /\n resumeTimer() {\n if (this.remainingTime > 0) {\n this.startTimer();\n }\n }\n\n /\n Asynchronously shows the toast notification.\n * This method sets the `open` property to `true` and dispatches the\n * `wje-toast:after-show` custom event. If the toast is already open,\n * the method returns `undefined`.\n /\n show = () => {\n if (this.open) {\n return;\n }\n\n this.open = true;\n event.dispatchCustomEvent(this, 'wje-toast:after-show');\n };\n\n /\n Asynchronously hides the toast notification.\n * This method sets the `open` property to `false` and dispatches the\n * `wje-toast:after-hide` custom event. If the toast is already hidden,\n * the method returns `undefined`.\n /\n hide = () => {\n if (!this.open) {\n return;\n }\n\n this.open = false;\n event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n };\n\n /\n Pauses the countdown animation and stops the timer.\n /\n pause = () => {\n this.countdownAnimation?.pause();\n this.stopTimer();\n };\n\n /\n Resumes the countdown animation and resumes the timer.\n /\n resume = () => {\n this.countdownAnimation?.play();\n this.resumeTimer();\n };\n\n /\n Removes the toast notification and the toast stack.\n \n This method removes the toast notification from the toast stack and\n * removes the toast stack from the document body if the toast stack is\n * empty.\n /\n removeChildAndStack() {\n this.toastStack.removeChild(this);\n\n if (this.toastStack.querySelector('wje-toast') === null) {\n this.toastStack.remove();\n }\n }\n\n /\n Asynchronously starts the toast notification.\n * This method appends the toast notification to the document body and\n * shows the toast notification. The method returns a promise that\n * resolves when the toast notification is shown.\n * @returns {Promise<unknown>}\n */\n start = () => {\n return new Promise((resolve) => {\n let stack = document.body.querySelector('.wje-toast-stack');\n if (stack) {\n this.toastStack = stack;\n }\n\n if (this.toastStack.parentElement === null) {\n document.body.append(this.toastStack);\n }\n\n this.toastStack.append(this);\n\n this.show();\n\n this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n });\n };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.\n * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n /\n\nexport default class Toast extends WJElement {\n /\n Creates an instance of Toast.\n /\n constructor() {\n super();\n\n this.toastStack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n }\n\n /\n Set headline value of the toast.\n * @param value\n /\n set headline(value) {\n this.setAttribute('headline', value);\n }\n\n /\n Get headline value of the toast.\n * @returns {string}\n /\n get headline() {\n return this.getAttribute('headline');\n }\n\n /\n Set open value of the toast.\n * @param value\n /\n set open(value) {\n this.removeAttribute('open');\n\n if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n }\n\n /\n Get open value of the toast.\n * @returns {boolean}\n /\n get open() {\n return this.hasAttribute('open');\n }\n\n /\n Set duration value of the toast.\n * @param value\n /\n set duration(value) {\n this.setAttribute('duration', value);\n }\n\n /\n Get duration value of the toast.\n * @returns {number}\n /\n get duration() {\n return +this.getAttribute('duration');\n }\n\n /\n Set closable value of the toast.\n * @param value\n /\n set closable(value) {\n this.setAttribute('closable', value \|\| '');\n }\n\n /\n Get closable value of the toast.\n * @returns {boolean}\n /\n get closable() {\n return this.hasAttribute('closable');\n }\n\n /\n Set color value of the toast.\n * @param value\n /\n set color(value) {\n this.setAttribute('color', value);\n }\n\n /\n Get color value of the toast.\n * @returns {string}\n /\n get color() {\n return this.getAttribute('color');\n }\n\n /\n Set countdown value of the toast.\n * @param value\n /\n set countdown(value) {\n if (value) this.setAttribute('countdown', value);\n }\n\n /\n Get countdown value of the toast.\n * @returns {boolean}\n /\n get countdown() {\n return this.hasAttribute('countdown');\n }\n\n /\n Set icon value of the toast.\n * @param value\n /\n set icon(value) {\n this.setAttribute('icon', value);\n }\n\n /\n Get icon value of the toast.\n * @returns {string}\n /\n get icon() {\n return this.getAttribute('icon');\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'Toast';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Setup attributes for the Button element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({\n role: 'status',\n });\n }\n\n /\n Draw method for the toast notification.\n * @returns {object} Document fragment\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-toast');\n\n let mediaSlot = document.createElement('slot');\n mediaSlot.setAttribute('name', 'media');\n mediaSlot.classList.add('media');\n mediaSlot.addEventListener('slotchange', () => {\n if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n mediaSlot.parentElement.classList.add('has-media');\n } else {\n mediaSlot.parentElement.classList.remove('has-media');\n }\n });\n\n let content = document.createElement('div');\n content.classList.add('content');\n content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n let iconX = document.createElement('wje-icon');\n iconX.setAttribute('name', 'x');\n\n let closeBtn = document.createElement('wje-button');\n closeBtn.setAttribute('fill', 'link');\n closeBtn.setAttribute('color', this.color);\n closeBtn.setAttribute('size', 'small');\n closeBtn.classList.add('close');\n closeBtn.setAttribute('aria-label', 'Close');\n\n let countdownEl = document.createElement('div');\n countdownEl.classList.add('countdown');\n\n let countdownBar = document.createElement('div');\n countdownBar.classList.add('countdown-bar');\n\n closeBtn.appendChild(iconX);\n countdownEl.appendChild(countdownBar);\n\n if (this.hasAttribute('icon') && this.icon) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', this.icon);\n icon.setAttribute('color', this.color);\n icon.setAttribute('slot', 'media');\n icon.setAttribute('part', 'icon');\n\n this.appendChild(icon);\n }\n\n native.appendChild(mediaSlot);\n native.appendChild(content);\n\n if (this.closable) native.appendChild(closeBtn);\n\n if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n fragment.appendChild(native);\n\n this.closeBtn = closeBtn;\n this.countdownBar = countdownBar;\n\n return fragment;\n }\n\n /\n After draw method for the toast notification.\n /\n afterDraw() {\n this.closeBtn.addEventListener('wje-button:click', this.hide);\n this.addEventListener('mouseenter', this.pause);\n this.addEventListener('mouseleave', this.resume);\n\n if (this.hasAttribute('countdown')) {\n const startWidth = '100%';\n const endWidth = '0';\n\n this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n duration: this.duration,\n easing: 'linear',\n });\n }\n\n if (this.duration > 0) {\n this.remainingTime = this.duration;\n this.startTimer();\n }\n }\n\n /\n Before disconnect method\n * This method is called before the element is disconnected from the document.\n /\n beforeDisconnect() {\n this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n this.removeEventListener('mouseenter', this.pause);\n this.removeEventListener('mouseleave', this.resume);\n\n clearTimeout(this.timeoutID);\n }\n\n /\n Starts the timer.\n * This method sets the `startTime` property to the current time and sets\n * the `timeoutID` property to the ID of the timeout. The method also\n * dispatches the `wje-toast:after-hide` custom event when the timeout\n * expires.\n /\n startTimer() {\n this.startTime = Date.now();\n if (this.timeoutID) {\n clearTimeout(this.timeoutID);\n }\n this.timeoutID = window.setTimeout(() => {\n this.hide();\n }, this.remainingTime);\n }\n\n /\n Stops the timer.\n * This method clears the timeout and calculates the remaining time.\n * The method is called when the toast notification is paused.\n /\n stopTimer() {\n if (this.timeoutID) {\n window.clearTimeout(this.timeoutID);\n }\n const elapsedTime = Date.now() - this.startTime;\n this.remainingTime -= elapsedTime;\n }\n\n /\n Resumes the timer.\n * This method resumes the timer if the remaining time is greater\n * than zero. The method is called when the toast notification is resumed.\n /\n resumeTimer() {\n if (this.remainingTime > 0) {\n this.startTimer();\n }\n }\n\n /\n Asynchronously shows the toast notification.\n * This method sets the `open` property to `true` and dispatches the\n * `wje-toast:after-show` custom event. If the toast is already open,\n * the method returns `undefined`.\n /\n show = () => {\n if (this.open) {\n return;\n }\n\n this.open = true;\n event.dispatchCustomEvent(this, 'wje-toast:after-show');\n };\n\n /\n Asynchronously hides the toast notification.\n * This method sets the `open` property to `false` and dispatches the\n * `wje-toast:after-hide` custom event. If the toast is already hidden,\n * the method returns `undefined`.\n /\n hide = () => {\n if (!this.open) {\n return;\n }\n\n this.open = false;\n event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n };\n\n /\n Pauses the countdown animation and stops the timer.\n /\n pause = () => {\n this.countdownAnimation?.pause();\n this.stopTimer();\n };\n\n /\n Resumes the countdown animation and resumes the timer.\n /\n resume = () => {\n this.countdownAnimation?.play();\n this.resumeTimer();\n };\n\n /\n Removes the toast notification and the toast stack.\n \n This method removes the toast notification from the toast stack and\n * removes the toast stack from the document body if the toast stack is\n * empty.\n /\n removeChildAndStack() {\n this.toastStack.removeChild(this);\n\n if (this.toastStack.querySelector('wje-toast') === null) {\n this.toastStack.remove();\n }\n }\n\n /\n Asynchronously starts the toast notification.\n * This method appends the toast notification to the document body and\n * shows the toast notification. The method returns a promise that\n * resolves when the toast notification is shown.\n * @returns {Promise<unknown>}\n */\n start = () => {\n return new Promise((resolve) => {\n let stack = document.body.querySelector('.wje-toast-stack');\n if (stack) {\n this.toastStack = stack;\n }\n\n if (this.toastStack.parentElement === null) {\n document.body.append(this.toastStack);\n }\n\n this.toastStack.append(this);\n\n this.show();\n\n this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n });\n };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\n\nimport styles from './styles/styles.css?inline';\n\n/*\n `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n /\n\nexport default class Toggle extends FormAssociatedElement {\n #internalValue;\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 if (this.input) {\n this.input.value = value;\n }\n }\n\n /\n Getter for the value attribute.\n * @returns {string} The value of the attribute.\n /\n get value() {\n return this.#internalValue ?? this.getAttribute('value') ?? 'on';\n }\n\n /\n Getter for the customErrorDisplay attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get customErrorDisplay() {\n return this.hasAttribute('custom-error-display');\n }\n\n /\n Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n /\n Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n /\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /\n Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n /\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /\n Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n /\n set checked(value) {\n if (value) {\n this.setAttribute('checked', '');\n this.internals.setFormValue(this.value); // len ak je checked\n } else {\n this.removeAttribute('checked');\n this.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n }\n if (this.input) {\n this.input.checked = value;\n }\n }\n\n /\n Get checked attribute.\n * @returns {boolean} true if the toggle is checked, false otherwise\n /\n get checked() {\n return this.hasAttribute('checked');\n }\n\n static get cssStyleSheet() {\n return styles;\n }\n\n static get observedAttributes() {\n return ['checked', 'disabled', 'required'];\n }\n\n setupAttributes() {\n this.isShadowRoot = 'open';\n // if some value was set via value setter then dont use default value\n if (this.pristine) {\n this.value = this.#internalValue;\n this.pristine = false;\n }\n this.syncAria();\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (!this.input) return;\n if (name === 'checked') {\n const isChecked = this.hasAttribute('checked');\n this.input.checked = isChecked;\n // Reflect into form value\n if (isChecked) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(null);\n }\n } else if (name === 'disabled') {\n this.input.disabled = this.hasAttribute('disabled');\n } else if (name === 'indeterminate') {\n this.input.indeterminate = this.hasAttribute('indeterminate');\n } else if (name === 'value') {\n // keep payload in sync; do not toggle checked here\n this.#internalValue = newValue ?? undefined;\n this.input.value = this.value;\n // If currently checked, update the submitted payload\n if (this.input.checked) {\n this.internals.setFormValue(this.value);\n }\n }\n this.syncAria();\n }\n\n draw() {\n const fragment = document.createDocumentFragment();\n\n const native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-toggle');\n\n const input = document.createElement('input');\n input.setAttribute('part', 'input');\n input.type = 'checkbox';\n input.name = this.name;\n input.id = 'input';\n input.checked = this.hasAttribute('checked');\n input.disabled = this.hasAttribute('disabled');\n if (this.hasAttribute('required')) input.required = true;\n\n const label = document.createElement('label');\n label.setAttribute('for', 'input');\n\n const toggle = document.createElement('div');\n toggle.setAttribute('part', 'toggle');\n toggle.classList.add('label-wrapper');\n\n const text = document.createElement('div');\n text.classList.add('text');\n text.innerHTML = '<slot></slot>';\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 // APPEND\n if (this.placement === 'end') {\n native.classList.add('end');\n label.appendChild(text);\n label.appendChild(toggle);\n } else {\n label.appendChild(toggle);\n label.appendChild(text);\n }\n\n native.appendChild(input);\n native.appendChild(label);\n native.append(errorSlot);\n\n this.append(error);\n\n fragment.appendChild(native);\n\n this.input = input;\n\n return fragment;\n }\n\n afterDraw() {\n this.internals.setFormValue(this.checked ? this.value : null); // Set initial form value based on checked state\n this.syncAria();\n\n if (!this.disabled) {\n this.input.addEventListener('input', (e) => {\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n this.indeterminate = false;\n this.checked = e.target.checked;\n this.syncAria();\n\n event.dispatchCustomEvent(this, 'wje-toggle:input');\n });\n\n this.input.addEventListener('change', (e) => {\n event.dispatchCustomEvent(this, 'wje-toggle:change');\n });\n\n this.addEventListener('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n });\n\n this.validate();\n\n if (this.invalid) {\n this.showInvalidMessage();\n }\n }\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n this.setAriaState({\n role: 'switch',\n checked: this.checked,\n disabled: this.disabled,\n required: this.required,\n invalid: this.invalid,\n });\n }\n\n /\n Removes the event listener when the checkbox is disconnected.\n */\n beforeDisconnect() {\n event.removeElement(this.input);\n }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\n\nimport styles from './styles/styles.css?inline';\n\n/*\n `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n /\n\nexport default class Toggle extends FormAssociatedElement {\n #internalValue;\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 if (this.input) {\n this.input.value = value;\n }\n }\n\n /\n Getter for the value attribute.\n * @returns {string} The value of the attribute.\n /\n get value() {\n return this.#internalValue ?? this.getAttribute('value') ?? 'on';\n }\n\n /\n Getter for the customErrorDisplay attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get customErrorDisplay() {\n return this.hasAttribute('custom-error-display');\n }\n\n /\n Getter for the validateOnChange attribute.\n * @returns {boolean} Whether the attribute is present.\n /\n get validateOnChange() {\n return this.hasAttribute('validate-on-change');\n }\n\n /\n Setter for the defaultValue attribute.\n * This method sets the 'value' attribute of the custom input element to the provided value.\n * The 'value' attribute represents the default value of the input element.\n * @param {string} value The value to set as the default value.\n /\n set defaultValue(value) {\n this.setAttribute('value', value);\n }\n\n /\n Getter for the defaultValue attribute.\n * This method retrieves the 'value' attribute of the custom input element.\n * The 'value' attribute represents the default value of the input element.\n * If the 'value' attribute is not set, it returns an empty string.\n * @returns {string} The default value of the input element.\n /\n get defaultValue() {\n return this.getAttribute('value') ?? '';\n }\n\n /\n Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n /\n set checked(value) {\n if (value) {\n this.setAttribute('checked', '');\n this.internals.setFormValue(this.value); // len ak je checked\n } else {\n this.removeAttribute('checked');\n this.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n }\n if (this.input) {\n this.input.checked = value;\n }\n }\n\n /\n Get checked attribute.\n * @returns {boolean} true if the toggle is checked, false otherwise\n /\n get checked() {\n return this.hasAttribute('checked');\n }\n\n static get cssStyleSheet() {\n return styles;\n }\n\n static get observedAttributes() {\n return ['checked', 'disabled', 'required'];\n }\n\n setupAttributes() {\n this.isShadowRoot = 'open';\n // if some value was set via value setter then dont use default value\n if (this.pristine) {\n this.value = this.#internalValue;\n this.pristine = false;\n }\n this.syncAria();\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (!this.input) return;\n if (name === 'checked') {\n const isChecked = this.hasAttribute('checked');\n this.input.checked = isChecked;\n // Reflect into form value\n if (isChecked) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(null);\n }\n } else if (name === 'disabled') {\n this.input.disabled = this.hasAttribute('disabled');\n } else if (name === 'indeterminate') {\n this.input.indeterminate = this.hasAttribute('indeterminate');\n } else if (name === 'value') {\n // keep payload in sync; do not toggle checked here\n this.#internalValue = newValue ?? undefined;\n this.input.value = this.value;\n // If currently checked, update the submitted payload\n if (this.input.checked) {\n this.internals.setFormValue(this.value);\n }\n }\n this.syncAria();\n }\n\n draw() {\n const fragment = document.createDocumentFragment();\n\n const native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-toggle');\n\n const input = document.createElement('input');\n input.setAttribute('part', 'input');\n input.type = 'checkbox';\n input.name = this.name;\n input.id = 'input';\n input.checked = this.hasAttribute('checked');\n input.disabled = this.hasAttribute('disabled');\n if (this.hasAttribute('required')) input.required = true;\n\n const label = document.createElement('label');\n label.setAttribute('for', 'input');\n\n const toggle = document.createElement('div');\n toggle.setAttribute('part', 'toggle');\n toggle.classList.add('label-wrapper');\n\n const text = document.createElement('div');\n text.classList.add('text');\n text.innerHTML = '<slot></slot>';\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 // APPEND\n if (this.placement === 'end') {\n native.classList.add('end');\n label.appendChild(text);\n label.appendChild(toggle);\n } else {\n label.appendChild(toggle);\n label.appendChild(text);\n }\n\n native.appendChild(input);\n native.appendChild(label);\n native.append(errorSlot);\n\n this.append(error);\n\n fragment.appendChild(native);\n\n this.input = input;\n\n return fragment;\n }\n\n afterDraw() {\n this.internals.setFormValue(this.checked ? this.value : null); // Set initial form value based on checked state\n this.syncAria();\n\n if (!this.disabled) {\n this.input.addEventListener('input', (e) => {\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n this.indeterminate = false;\n this.checked = e.target.checked;\n this.syncAria();\n\n event.dispatchCustomEvent(this, 'wje-toggle:input');\n });\n\n this.input.addEventListener('change', (e) => {\n event.dispatchCustomEvent(this, 'wje-toggle:change');\n });\n\n this.addEventListener('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n });\n\n this.validate();\n\n if (this.invalid) {\n this.showInvalidMessage();\n }\n }\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n this.setAriaState({\n role: 'switch',\n checked: this.checked,\n disabled: this.disabled,\n required: this.required,\n invalid: this.invalid,\n });\n }\n\n /\n Removes the event listener when the checkbox is disconnected.\n */\n beforeDisconnect() {\n event.removeElement(this.input);\n }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":[],"mappings":";;;;;;;;;;;AA8Be,MAAM,eAAe,sBAAsB;AAAA,EAGtD,cAAc;AACV,UAAK;AAHT;AAKI,SAAK,UAAU;AACf,SAAK,WAAW;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,uBAAK,gBAAiB;AACtB,QAAI,KAAK,OAAO;AACZ,WAAK,MAAM,QAAQ;AAAA,IACvB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,mBAAK,mBAAkB,KAAK,aAAa,OAAO,KAAK;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,qBAAqB;AACrB,WAAO,KAAK,aAAa,sBAAsB;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,mBAAmB;AACnB,WAAO,KAAK,aAAa,oBAAoB;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAI,aAAa,OAAO;AACpB,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,IAAI,eAAe;AACf,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,EAAE;AAC/B,WAAK,UAAU,aAAa,KAAK,KAAK;AAAA,IAC1C,OAAO;AACH,WAAK,gBAAgB,SAAS;AAC9B,WAAK,UAAU,aAAa,IAAI;AAAA,IACpC;AACA,QAAI,KAAK,OAAO;AACZ,WAAK,MAAM,UAAU;AAAA,IACzB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EACtC;AAAA,EAEA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA,EAEA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,WAAW,YAAY,UAAU;AAAA,EAC7C;AAAA,EAEA,kBAAkB;AACd,SAAK,eAAe;AAEpB,QAAI,KAAK,UAAU;AACf,WAAK,QAAQ,mBAAK;AAClB,WAAK,WAAW;AAAA,IACpB;AACA,SAAK,SAAQ;AAAA,EACjB;AAAA,EAEA,yBAAyB,MAAM,UAAU,UAAU;AAC/C,QAAI,CAAC,KAAK,MAAO;AACjB,QAAI,SAAS,WAAW;AACpB,YAAM,YAAY,KAAK,aAAa,SAAS;AAC7C,WAAK,MAAM,UAAU;AAErB,UAAI,WAAW;AACX,aAAK,UAAU,aAAa,KAAK,KAAK;AAAA,MAC1C,OAAO;AACH,aAAK,UAAU,aAAa,IAAI;AAAA,MACpC;AAAA,IACJ,WAAW,SAAS,YAAY;AAC5B,WAAK,MAAM,WAAW,KAAK,aAAa,UAAU;AAAA,IACtD,WAAW,SAAS,iBAAiB;AACjC,WAAK,MAAM,gBAAgB,KAAK,aAAa,eAAe;AAAA,IAChE,WAAW,SAAS,SAAS;AAEzB,yBAAK,gBAAiB,YAAY;AAClC,WAAK,MAAM,QAAQ,KAAK;AAExB,UAAI,KAAK,MAAM,SAAS;AACpB,aAAK,UAAU,aAAa,KAAK,KAAK;AAAA,MAC1C;AAAA,IACJ;AACA,SAAK,SAAQ;AAAA,EACjB;AAAA,EAEA,OAAO;AACH,UAAM,WAAW,SAAS,uBAAsB;AAEhD,UAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AAEpC,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,OAAO;AACb,UAAM,OAAO,KAAK;AAClB,UAAM,KAAK;AACX,UAAM,UAAU,KAAK,aAAa,SAAS;AAC3C,UAAM,WAAW,KAAK,aAAa,UAAU;AAC7C,QAAI,KAAK,aAAa,UAAU,EAAG,OAAM,WAAW;AAEpD,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,aAAa,OAAO,OAAO;AAEjC,UAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AAEpC,UAAM,OAAO,SAAS,cAAc,KAAK;AACzC,SAAK,UAAU,IAAI,MAAM;AACzB,SAAK,YAAY;AAGjB,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,OAAO;AAEtC,QAAI,QAAQ,SAAS,cAAc,KAAK;AACxC,UAAM,aAAa,QAAQ,OAAO;AAGlC,QAAI,KAAK,cAAc,OAAO;AAC1B,aAAO,UAAU,IAAI,KAAK;AAC1B,YAAM,YAAY,IAAI;AACtB,YAAM,YAAY,MAAM;AAAA,IAC5B,OAAO;AACH,YAAM,YAAY,MAAM;AACxB,YAAM,YAAY,IAAI;AAAA,IAC1B;AAEA,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,KAAK;AACxB,WAAO,OAAO,SAAS;AAEvB,SAAK,OAAO,KAAK;AAEjB,aAAS,YAAY,MAAM;AAE3B,SAAK,QAAQ;AAEb,WAAO;AAAA,EACX;AAAA,EAEA,YAAY;AACR,SAAK,UAAU,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;AAC5D,SAAK,SAAQ;AAEb,QAAI,CAAC,KAAK,UAAU;AAChB,WAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,aAAK,SAAQ;AAEb,aAAK,WAAW;AAChB,aAAK,oBAAmB;AAExB,aAAK,gBAAgB;AACrB,aAAK,UAAU,EAAE,OAAO;AACxB,aAAK,SAAQ;AAEb,cAAM,oBAAoB,MAAM,kBAAkB;AAAA,MACtD,CAAC;AAED,WAAK,MAAM,iBAAiB,UAAU,CAAC,MAAM;AACzC,cAAM,oBAAoB,MAAM,mBAAmB;AAAA,MACvD,CAAC;AAED,WAAK,iBAAiB,WAAW,CAAC,MAAM;AACpC,aAAK,UAAU;AACf,aAAK,WAAW;AAEhB,aAAK,mBAAkB;AAAA,MAC3B,CAAC;AAED,WAAK,SAAQ;AAEb,UAAI,KAAK,SAAS;AACd,aAAK,mBAAkB;AAAA,MAC3B;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,IAC1B,CAAS;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;AACf,UAAM,cAAc,KAAK,KAAK;AAAA,EAClC;AACJ;AAxPI;AC3BJ,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-toolbar-action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n /\nexport default class ToolbarAction extends WJElement {\n /\n Creates an instance of ToolbarAction.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'ToolbarAction';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of observed attributes.\n * @static\n * @returns {Array} An empty array\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 toolbar action.\n * @returns {object} Document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let maxItems = +this.maxItems \|\| 0;\n let actions = this.getActions();\n\n let slot = document.createElement('slot');\n\n let element = document.createElement('div');\n element.setAttribute('part', 'native');\n element.classList.add('native-toolbar-action');\n\n const shouldCollapse = maxItems !== 0 && actions.length > maxItems;\n if (shouldCollapse) {\n element = document.createElement('wje-dropdown');\n }\n\n element.appendChild(slot);\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n /\n Returns the actions for the toolbar action.\n * @returns {Array} An array of wje-button elements\n */\n getActions() {\n return Array.from(this.querySelectorAll('wje-button'));\n }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\n"],"names":[],"mappings":";;;;;AAae,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjD,cAAc;AACV,~~UAAO~~;~~AAOX~~;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,~~EANhB~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAaI~~,WAAW,gBAAgB;AACvB,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAOI~~,WAAW,qBAAqB;AAC5B,WAAO,~~CAAE~~;AAAA,~~EACjB~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,kBAAkB;AACd,SAAK,eAAe;AAAA,~~EAC5B~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,OAAO;AACH,QAAI,WAAW,SAAS,~~uBAAwB~~;~~AAEhD~~,QAAI,WAAW,CAAC,KAAK,YAAY;AACjC,QAAI,UAAU,KAAK,~~WAAY~~;~~AAE/B~~,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,uBAAuB;AAE7C,UAAM,iBAAiB,aAAa,KAAK,QAAQ,SAAS;AAC1D,QAAI,gBAAgB;AAChB,gBAAU,SAAS,cAAc,cAAc;AAAA,~~IAC3D~~;~~AAEQ~~,YAAQ,YAAY,IAAI;AAExB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMI~~,aAAa;AACT,WAAO,MAAM,KAAK,KAAK,iBAAiB,YAAY,CAAC;AAAA,~~EAC7D~~;~~AACA~~;ACnFA,cAAc,OAAO,sBAAsB,aAAa;"}
1	+ {"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n /\nexport default class ToolbarAction extends WJElement {\n /\n Creates an instance of ToolbarAction.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'ToolbarAction';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of observed attributes.\n * @static\n * @returns {Array} An empty array\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 toolbar action.\n * @returns {object} Document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let maxItems = +this.maxItems \|\| 0;\n let actions = this.getActions();\n\n let slot = document.createElement('slot');\n\n let element = document.createElement('div');\n element.setAttribute('part', 'native');\n element.classList.add('native-toolbar-action');\n\n const shouldCollapse = maxItems !== 0 && actions.length > maxItems;\n if (shouldCollapse) {\n element = document.createElement('wje-dropdown');\n }\n\n element.appendChild(slot);\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n /\n Returns the actions for the toolbar action.\n * @returns {Array} An array of wje-button elements\n */\n getActions() {\n return Array.from(this.querySelectorAll('wje-button'));\n }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\n"],"names":[],"mappings":";;;;;AAae,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjD,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,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;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,WAAW,CAAC,KAAK,YAAY;AACjC,QAAI,UAAU,KAAK,WAAU;AAE7B,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,uBAAuB;AAE7C,UAAM,iBAAiB,aAAa,KAAK,QAAQ,SAAS;AAC1D,QAAI,gBAAgB;AAChB,gBAAU,SAAS,cAAc,cAAc;AAAA,IACnD;AAEA,YAAQ,YAAY,IAAI;AAExB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAa;AACT,WAAO,MAAM,KAAK,KAAK,iBAAiB,YAAY,CAAC;AAAA,EACzD;AACJ;ACnFA,cAAc,OAAO,sBAAsB,aAAa;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-toolbar.js","sources":["../packages/wje-toolbar/toolbar.element.js","../packages/wje-toolbar/toolbar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Toolbar` is a custom web component that represents a toolbar.\n * @summary This element represents a toolbar.\n * @documentation https://elements.webjet.sk/components/toolbar\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar wrapper.\n * @slot start - The start slot for the toolbar.\n * @slot end - The end slot for the toolbar.\n * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`.\n * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content.\n * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size.\n * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.\n * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.\n * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.\n * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.\n * @tag wje-toolbar\n /\n\nexport default class Toolbar extends WJElement {\n /\n Creates an instance of Toolbar.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'Toolbar';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of observed attributes.\n * @static\n * @returns {Array} An empty array\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 for the toolbar.\n * @returns {object} Document fragment\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-toolbar');\n\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n native.appendChild(start);\n native.appendChild(end);\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Sync ARIA attributes on host.\n */\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'toolbar' });\n }\n\n const ariaLabel = this.getAttribute('aria-label');\n const label = this.getAttribute('label');\n if (!ariaLabel && label) {\n this.setAriaState({ label });\n }\n }\n}\n","import Toolbar from './toolbar.element.js';\n\nexport default Toolbar;\n\nToolbar.define('wje-toolbar', Toolbar);\n"],"names":[],"mappings":";;;;;AAuBe,MAAM,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI3C,cAAc;AACV,~~UAAO~~;~~AAOX~~;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,~~EANhB~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAaI~~,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,~~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,gBAAgB;AAErC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,GAAG;AACtB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,~~EACf~~;AAAA;AAAA;AAAA;AAAA,~~EAKI~~,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,UAAS,CAAE;AAAA,~~IACjD~~;~~AAEQ~~,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,UAAM,QAAQ,KAAK,aAAa,OAAO;AACvC,QAAI,CAAC,aAAa,OAAO;AACrB,WAAK,aAAa,EAAE,OAAO;AAAA,~~IACvC~~;AAAA,~~EACA~~;~~AACA~~;ACjGA,QAAQ,OAAO,eAAe,OAAO;"}
1	+ {"version":3,"file":"wje-toolbar.js","sources":["../packages/wje-toolbar/toolbar.element.js","../packages/wje-toolbar/toolbar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Toolbar` is a custom web component that represents a toolbar.\n * @summary This element represents a toolbar.\n * @documentation https://elements.webjet.sk/components/toolbar\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar wrapper.\n * @slot start - The start slot for the toolbar.\n * @slot end - The end slot for the toolbar.\n * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`.\n * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content.\n * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size.\n * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.\n * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.\n * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.\n * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.\n * @tag wje-toolbar\n /\n\nexport default class Toolbar extends WJElement {\n /\n Creates an instance of Toolbar.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'Toolbar';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of observed attributes.\n * @static\n * @returns {Array} An empty array\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 for the toolbar.\n * @returns {object} Document fragment\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-toolbar');\n\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n native.appendChild(start);\n native.appendChild(end);\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Sync ARIA attributes on host.\n */\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'toolbar' });\n }\n\n const ariaLabel = this.getAttribute('aria-label');\n const label = this.getAttribute('label');\n if (!ariaLabel && label) {\n this.setAriaState({ label });\n }\n }\n}\n","import Toolbar from './toolbar.element.js';\n\nexport default Toolbar;\n\nToolbar.define('wje-toolbar', Toolbar);\n"],"names":[],"mappings":";;;;;AAuBe,MAAM,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI3C,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,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,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,gBAAgB;AAErC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,GAAG;AACtB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,UAAS,CAAE;AAAA,IACzC;AAEA,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,UAAM,QAAQ,KAAK,aAAa,OAAO;AACvC,QAAI,CAAC,aAAa,OAAO;AACrB,WAAK,aAAa,EAAE,OAAO;AAAA,IAC/B;AAAA,EACJ;AACJ;ACjGA,QAAQ,OAAO,eAAe,OAAO;"}

package/dist/wje-tooltip.js CHANGED Viewed

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import "./wje-popup.js";
-import { P as Popup } from "./popup.element-Cl6QeG8M.js";
+import { P as Popup } from "./popup.element-DklicGea.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Tooltip ]\n*/\n\n.native-tooltip {\n    display: flex;\n    align-items: center;\n    padding: var(--wje-tooltip-spacing);\n    color: var(--wje-tooltip-color);\n    background-color: var(--wje-tooltip-background);\n    font-weight: var(--wje-tooltip-font-weight);\n    font-size: var(--wje-tooltip-font-size);\n    border-radius: var(--wje-tooltip-border-radius);\n    line-height: var(--wje-tooltip-line-height);\n    box-sizing: border-box;\n    box-shadow: var(--wje-tooltip-shadow);\n}\n\n::slotted([slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted([slot='end']) {\n    margin: 0 0 0 0.3rem;\n}\n\n.arrow {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: var(--wje-tooltip-arrow-color);\n    transform: rotate(45deg);\n}\n";
 const _Tooltip = class _Tooltip extends WJElement {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-tooltip.js","sources":["../packages/wje-tooltip/tooltip.element.js","../packages/wje-tooltip/tooltip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Tooltip` is a custom web component that represents a tooltip.\n * @summary This element represents a tooltip.\n * @documentation https://elements.webjet.sk/components/tooltip\n * @status stable\n * @augments {WJElement}\n * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.\n * @slot arrow - The arrow slot for the tooltip.\n * @slot anchor - The anchor slot for the tooltip.\n * @csspart native - The native tooltip wrapper.\n * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.\n * @tag wje-tooltip\n /\nexport default class Tooltip extends WJElement {\n static _instanceId = 0;\n /\n Creates an instance of Tooltip.\n /\n constructor() {\n super();\n this._instanceId = ++Tooltip._instanceId;\n }\n\n /\n Dependencies of the Button element.\n * @type {object}\n /\n dependencies = {\n 'wje-popup': Popup,\n };\n\n /\n Set active attribute for the tooltip element.\n * @param value\n /\n set content(value) {\n this.setAttribute('content', value);\n }\n\n /\n Get active attribute for the tooltip element.\n * @returns {string}\n /\n get content() {\n if (this.hasAttribute('content')) return this.getAttribute('content');\n\n return '';\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'Tooltip';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of observed attributes.\n * @static\n * @returns {Array} An array of observed attributes\n /\n static get observedAttributes() {\n return ['active'];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'tooltip' });\n }\n\n /\n Draws the component for the tooltip.\n * @returns {object} Document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', this.placement \|\| 'top');\n popup.setAttribute('offset', this.offset \|\| '0');\n\n // SLOT - Anchor\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'anchor');\n slot.setAttribute('slot', 'anchor');\n\n let arrow = document.createElement('div');\n arrow.classList.add('arrow');\n arrow.setAttribute('slot', 'arrow');\n\n // SLOT - Start\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n // SLOT - End\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n let content = document.createElement('div');\n content.innerHTML = this.content;\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-tooltip');\n\n native.appendChild(start);\n native.appendChild(content);\n native.appendChild(end);\n\n popup.appendChild(slot);\n popup.appendChild(arrow);\n popup.appendChild(native);\n\n this.mySlot = slot;\n this.popup = popup;\n this.native = native;\n\n fragment.appendChild(popup);\n\n return fragment;\n }\n\n /\n Draws the component for the tooltip.\n /\n afterDraw() {\n const resolveAnchor = () => {\n let anchorEl = this.mySlot.assignedElements()[0];\n if (!anchorEl) {\n anchorEl = this.querySelector(':scope > :not([slot])');\n if (anchorEl) anchorEl.setAttribute('slot', 'anchor');\n }\n if (this.selector) {\n anchorEl = this.checkSelector(anchorEl);\n }\n\n if (!anchorEl) return null;\n\n const tooltipId = this.id \|\| `wje-tooltip-${this._instanceId}`;\n if (!this.id) this.id = tooltipId;\n anchorEl.setAttribute('aria-describedby', tooltipId);\n return anchorEl;\n };\n\n this.onSlotChange = () => {\n resolveAnchor();\n };\n\n this.mySlot.addEventListener('slotchange', this.onSlotChange);\n this.onSlotChange();\n\n let anchorEl = resolveAnchor();\n\n if (!anchorEl) return;\n\n event.addListener(anchorEl, 'mouseenter', null, this.onShow);\n event.addListener(anchorEl, 'mouseleave', null, this.onHide);\n event.addListener(this, 'wje-dropdown:open', null, this.onHide);\n event.addListener(this, 'wje-dropdown:close', null, this.onShow);\n }\n\n afterDisconnect() {\n event.removeListener(this, 'wje-dropdown:open', null, this.onHide);\n event.removeListener(this, 'wje-dropdown:close', null, this.onShow);\n event.removeListener(this, 'mouseenter', null, this.onShow);\n event.removeListener(this, 'mouseleave', null, this.onHide);\n this.mySlot?.removeEventListener('slotchange', this.onSlotChange);\n }\n\n dispatch(customEvent) {\n return new Promise((resolve) => {\n event.dispatchCustomEvent(this, customEvent, {\n resolve: resolve,\n });\n });\n }\n\n beforeShow() {\n return this.native.innerHTML;\n }\n\n afterShow() {\n return true;\n }\n\n popupHideCallback = () => {\n this.onHide();\n };\n\n /*\n Handles the logic for showing the component's popup or tooltip.\n * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.\n * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.\n /\n onShow = () => {\n event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n this.classList.add('active');\n\n if (this.querySelector('wje-dropdown')?.classList.contains('active')) {\n return;\n }\n\n Promise.resolve(this.beforeShow(this))\n .then((res) => {\n if (!this.classList.contains('active') \|\| !res \|\| typeof res !== 'string') {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.native.innerHTML = res;\n\n this.popup.show(); // Show tooltip\n\n Promise.resolve(this.afterShow(this));\n })\n .catch(() => {\n // ak je nejaka chyba tak to len zatvorime\n this.classList.remove('active');\n this.popup.hide();\n });\n };\n\n /\n Hides the component's popup or tooltip.\n * Removes the `active` class from the component and hides the popup element.\n /\n onHide = () => {\n event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n this.classList.remove('active');\n this.popup.hide();\n };\n\n /\n Validates if the specified selector exists within the provided element.\n * Logs an error if the selector is not found and returns the found element or `null`.\n * @param {HTMLElement} anchorEl The root element to search within.\n * @returns {HTMLElement\|null} The first element matching the selector, or `null` if not found.\n */\n checkSelector(anchorEl) {\n const newAnchorEl = anchorEl.querySelector(this.selector);\n if (newAnchorEl === null) {\n console.error('Selector not found:', this.selector);\n }\n\n return newAnchorEl;\n }\n}\n","import Tooltip from './tooltip.element.js';\n\nexport default Tooltip;\n\nTooltip.define('wje-tooltip', Tooltip);\n"],"names":["anchorEl"],"mappings":"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"}
1	+ {"version":3,"file":"wje-tooltip.js","sources":["../packages/wje-tooltip/tooltip.element.js","../packages/wje-tooltip/tooltip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Tooltip` is a custom web component that represents a tooltip.\n * @summary This element represents a tooltip.\n * @documentation https://elements.webjet.sk/components/tooltip\n * @status stable\n * @augments {WJElement}\n * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.\n * @slot arrow - The arrow slot for the tooltip.\n * @slot anchor - The anchor slot for the tooltip.\n * @csspart native - The native tooltip wrapper.\n * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.\n * @tag wje-tooltip\n /\nexport default class Tooltip extends WJElement {\n static _instanceId = 0;\n /\n Creates an instance of Tooltip.\n /\n constructor() {\n super();\n this._instanceId = ++Tooltip._instanceId;\n }\n\n /\n Dependencies of the Button element.\n * @type {object}\n /\n dependencies = {\n 'wje-popup': Popup,\n };\n\n /\n Set active attribute for the tooltip element.\n * @param value\n /\n set content(value) {\n this.setAttribute('content', value);\n }\n\n /\n Get active attribute for the tooltip element.\n * @returns {string}\n /\n get content() {\n if (this.hasAttribute('content')) return this.getAttribute('content');\n\n return '';\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'Tooltip';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Returns the list of observed attributes.\n * @static\n * @returns {Array} An array of observed attributes\n /\n static get observedAttributes() {\n return ['active'];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'tooltip' });\n }\n\n /\n Draws the component for the tooltip.\n * @returns {object} Document fragment\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', this.placement \|\| 'top');\n popup.setAttribute('offset', this.offset \|\| '0');\n\n // SLOT - Anchor\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'anchor');\n slot.setAttribute('slot', 'anchor');\n\n let arrow = document.createElement('div');\n arrow.classList.add('arrow');\n arrow.setAttribute('slot', 'arrow');\n\n // SLOT - Start\n let start = document.createElement('slot');\n start.setAttribute('name', 'start');\n\n // SLOT - End\n let end = document.createElement('slot');\n end.setAttribute('name', 'end');\n\n let content = document.createElement('div');\n content.innerHTML = this.content;\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-tooltip');\n\n native.appendChild(start);\n native.appendChild(content);\n native.appendChild(end);\n\n popup.appendChild(slot);\n popup.appendChild(arrow);\n popup.appendChild(native);\n\n this.mySlot = slot;\n this.popup = popup;\n this.native = native;\n\n fragment.appendChild(popup);\n\n return fragment;\n }\n\n /\n Draws the component for the tooltip.\n /\n afterDraw() {\n const resolveAnchor = () => {\n let anchorEl = this.mySlot.assignedElements()[0];\n if (!anchorEl) {\n anchorEl = this.querySelector(':scope > :not([slot])');\n if (anchorEl) anchorEl.setAttribute('slot', 'anchor');\n }\n if (this.selector) {\n anchorEl = this.checkSelector(anchorEl);\n }\n\n if (!anchorEl) return null;\n\n const tooltipId = this.id \|\| `wje-tooltip-${this._instanceId}`;\n if (!this.id) this.id = tooltipId;\n anchorEl.setAttribute('aria-describedby', tooltipId);\n return anchorEl;\n };\n\n this.onSlotChange = () => {\n resolveAnchor();\n };\n\n this.mySlot.addEventListener('slotchange', this.onSlotChange);\n this.onSlotChange();\n\n let anchorEl = resolveAnchor();\n\n if (!anchorEl) return;\n\n event.addListener(anchorEl, 'mouseenter', null, this.onShow);\n event.addListener(anchorEl, 'mouseleave', null, this.onHide);\n event.addListener(this, 'wje-dropdown:open', null, this.onHide);\n event.addListener(this, 'wje-dropdown:close', null, this.onShow);\n }\n\n afterDisconnect() {\n event.removeListener(this, 'wje-dropdown:open', null, this.onHide);\n event.removeListener(this, 'wje-dropdown:close', null, this.onShow);\n event.removeListener(this, 'mouseenter', null, this.onShow);\n event.removeListener(this, 'mouseleave', null, this.onHide);\n this.mySlot?.removeEventListener('slotchange', this.onSlotChange);\n }\n\n dispatch(customEvent) {\n return new Promise((resolve) => {\n event.dispatchCustomEvent(this, customEvent, {\n resolve: resolve,\n });\n });\n }\n\n beforeShow() {\n return this.native.innerHTML;\n }\n\n afterShow() {\n return true;\n }\n\n popupHideCallback = () => {\n this.onHide();\n };\n\n /*\n Handles the logic for showing the component's popup or tooltip.\n * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.\n * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.\n /\n onShow = () => {\n event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n this.classList.add('active');\n\n if (this.querySelector('wje-dropdown')?.classList.contains('active')) {\n return;\n }\n\n Promise.resolve(this.beforeShow(this))\n .then((res) => {\n if (!this.classList.contains('active') \|\| !res \|\| typeof res !== 'string') {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.native.innerHTML = res;\n\n this.popup.show(); // Show tooltip\n\n Promise.resolve(this.afterShow(this));\n })\n .catch(() => {\n // ak je nejaka chyba tak to len zatvorime\n this.classList.remove('active');\n this.popup.hide();\n });\n };\n\n /\n Hides the component's popup or tooltip.\n * Removes the `active` class from the component and hides the popup element.\n /\n onHide = () => {\n event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n this.classList.remove('active');\n this.popup.hide();\n };\n\n /\n Validates if the specified selector exists within the provided element.\n * Logs an error if the selector is not found and returns the found element or `null`.\n * @param {HTMLElement} anchorEl The root element to search within.\n * @returns {HTMLElement\|null} The first element matching the selector, or `null` if not found.\n */\n checkSelector(anchorEl) {\n const newAnchorEl = anchorEl.querySelector(this.selector);\n if (newAnchorEl === null) {\n console.error('Selector not found:', this.selector);\n }\n\n return newAnchorEl;\n }\n}\n","import Tooltip from './tooltip.element.js';\n\nexport default Tooltip;\n\nTooltip.define('wje-tooltip', Tooltip);\n"],"names":["anchorEl"],"mappings":"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"}

package/dist/wje-tree-item.js CHANGED Viewed

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n\n            .indent {\n                display: block;\n                width: 1em;\n                flex-shrink: 0;\n            }\n\n            .toggle {\n                font-size: var(--wje-tree-item-font-size);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n\n            wje-checkbox {\n                font-size: var(--wje-tree-item-font-size);\n                margin: 0;\n            }\n\n            .content {\n                font-size: var(--wje-tree-item-font-size);\n            }\n\n            slot {\n                display: flex;\n                align-items: center;\n            }\n\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            font-size: calc(1rem + var(--wje-tree-item-indent, var(--wje-spacing-medium)));\n            padding-inline-start: var(--wje-tree-item-indent, var(--wje-spacing-medium));\n            display: none;\n            &.open {\n                font-size: var(--wje-tree-item-font-size);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
+const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n\n            .indent {\n                display: block;\n                width: calc(var(--wje-tree-item-indent, var(--wje-spacing-medium)) * var(--wje-tree-item-depth, 0));\n                flex-shrink: 0;\n            }\n\n            .toggle {\n                font-size: var(--wje-tree-item-font-size);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n\n            wje-checkbox {\n                font-size: var(--wje-tree-item-font-size);\n                margin: 0;\n            }\n\n            .content {\n                font-size: var(--wje-tree-item-font-size);\n            }\n\n            slot {\n                display: flex;\n                align-items: center;\n            }\n\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            display: none;\n            &.open {\n                font-size: var(--wje-tree-item-font-size);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(\n                        (var(--wje-tree-item-indent, var(--wje-spacing-medium)) * var(--wje-tree-item-depth, 0)) +\n                        1em -\n                        (var(--wje-spacing-3x-small) * 2) -\n                        (var(--wje-tree-item-indent-guid-width) / 2)\n                    );\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
 class TreeItem extends WJElement {
   /**
    * Creates an instance of Toast.
@@ -107,7 +107,7 @@ class TreeItem extends WJElement {
   connectedCallback() {
     var _a;
     (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
-    if (this.isNestedItem()) this.slot = "children";
+    this.syncNestingState();
   }
   /**
    * Returns the list of attributes to observe for changes.
@@ -151,10 +151,25 @@ class TreeItem extends WJElement {
    */
   beforeDraw() {
     var _a;
-    if (this.isNestedItem()) this.slot = "children";
+    this.syncNestingState();
     if ((_a = this.closest("wje-tree")) == null ? void 0 : _a.hasAttribute("slot-hover-visible"))
       this.setAttribute("slot-hover-visible", "");
   }
+  /**
+   * Synchronizes the nesting-related state on the host element.
+   * Sets the "slot" to children for nested items and updates
+   * the nesting depth used to compute visual indentation.
+   * @returns {void}
+   */
+  syncNestingState() {
+    const depth = this.getNestingDepth();
+    this.style.setProperty("--wje-tree-item-depth", String(depth));
+    if (depth > 0) {
+      this.slot = "children";
+    } else if (this.getAttribute("slot") === "children") {
+      this.removeAttribute("slot");
+    }
+  }
   /**
    * Creates and returns a document fragment representing the structure of a tree item component.
    * The method constructs the DOM elements including the native container, indentation, toggle button,
@@ -248,6 +263,20 @@ class TreeItem extends WJElement {
     const parent = this.parentElement;
     return !!parent && this.isTreeItem(parent);
   }
+  /**
+   * Calculates nesting depth based on ancestor tree items.
+   * Root items have depth 0, direct children depth 1, etc.
+   * @returns {number}
+   */
+  getNestingDepth() {
+    let depth = 0;
+    let current = this.parentElement;
+    while (current) {
+      if (this.isTreeItem(current)) depth += 1;
+      current = current.parentElement;
+    }
+    return depth;
+  }
   /**
    * Checks whether the given node is a tree item.
    * @param {object} node The node to check.