npm - wj-elements - Versions diffs - 0.2.0-alpha.8 → 0.3.0 - Mend

wj-elements 0.2.0-alpha.8 → 0.3.0

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 (385) 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 /\n Creates an instance of Textarea.\n * @class\n /\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\n }\n\n /\n Setter for the value attribute.\n * @param {string} value The value to set.\n /\n set value(value) {\n this.internals.setFormValue(value);\n\n if (this.input) this.input.value = value;\n\n this.pristine = false;\n this._value = value;\n }\n\n /\n Getter for the value attribute.\n * @returns {string} The value of the attribute.\n /\n get value() {\n return this.input?.value ?? this._value ?? '';\n }\n\n /\n 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 [];\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 this.value = this.innerHTML;\n this.pristine = false;\n }\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.setAttribute('rows', this.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\n if (this.resize === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n if (this.variant === 'standard') {\n if (this.label) native.appendChild(label);\n } else {\n inputWrapper.appendChild(label);\n }\n\n inputWrapper.appendChild(input);\n\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 return fragment;\n }\n\n /\n Sets up the event listeners after the component is drawn.\n /\n afterDraw() {\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);\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\n componentCleanup() {\n this.resizeObserver?.unobserve(this.input);\n }\n\n /\n Disconnects the component.\n /\n beforeDisconnect() {\n this.resizeObserver?.unobserve(this.input);\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/{packages/wje-thumbnail → wje-thumbnail}/thumbnail.element.d.ts RENAMED Viewed

@@ -28,4 +28,8 @@ export default class Thumbnail extends WJElement {
      * @returns {object} Document fragment
      */
     draw(): object;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
 }

package/dist/wje-thumbnail.js CHANGED Viewed

@@ -35,6 +35,7 @@ class Thumbnail extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component for the thumbnail.
@@ -46,6 +47,24 @@ class Thumbnail extends WJElement {
     fragment.appendChild(element);
     return fragment;
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    const ariaLabel = this.getAttribute("aria-label");
+    const label = this.getAttribute("label");
+    if (ariaLabel || label) {
+      if (!this.hasAttribute("role")) {
+        this.setAttribute("role", "img");
+      }
+      if (!ariaLabel && label) {
+        this.setAriaState({ label });
+      }
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
 }
 Thumbnail.define("wje-thumbnail", Thumbnail);
 export {

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 }\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","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;AAAA,~~EAC5B~~;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;AACA;~~AC9DA~~,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,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;"}

package/dist/{packages/wje-timeline → wje-timeline}/timeline.element.d.ts RENAMED Viewed

@@ -22,4 +22,8 @@ export default class Timeline extends WJElement {
      * @returns {DocumentFragment}
      */
     draw(): DocumentFragment;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
 }

package/dist/wje-toast.js CHANGED Viewed

@@ -193,6 +193,9 @@ class Toast extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({
+      role: "status"
+    });
   }
   /**
    * Draw method for the toast notification.
@@ -223,6 +226,7 @@ class Toast extends WJElement {
     closeBtn.setAttribute("color", this.color);
     closeBtn.setAttribute("size", "small");
     closeBtn.classList.add("close");
+    closeBtn.setAttribute("aria-label", "Close");
     let countdownEl = document.createElement("div");
     countdownEl.classList.add("countdown");
     let countdownBar = document.createElement("div");

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 }\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\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/{packages/wje-toggle → wje-toggle}/toggle.element.d.ts RENAMED Viewed

@@ -77,5 +77,9 @@ export default class Toggle extends FormAssociatedElement {
     input: HTMLInputElement;
     afterDraw(): void;
     indeterminate: boolean;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     #private;
 }

package/dist/wje-toggle.js CHANGED Viewed

@@ -6,7 +6,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _internalValue;
-import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
+import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Toggle ]\n*/\n\n:host {\n    --wje-toggle-color-base: var(--wje-color-contrast-3);\n    --wje-toggle-width: 30px;\n    --wje-toggle-height: 18px;\n    --wje-toggle-border-radius: 50px;\n    --wje-toggle-handle-width: 13px;\n    --wje-toggle-handle-height: 13px;\n    --wje-toggle-handle-border-radius: 9px;\n    --wje-toggle-handle-color: #fff;\n    --wje-toggle-handle-shadow: 1px 0 1px 0.5px rgba(0, 0, 0, 0.12), 2px 4px 6px rgba(0, 0, 0, 0.2);\n    --wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0, 0, 0, 0.08), -3px 3px 6px rgba(0, 0, 0, 0.3);\n    --wje-toggle-duration: 250ms;\n    --wje-toggle-curve: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([color='primary']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-primary-9) !important;\n}\n\n:host([color='complete']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-success-9) !important;\n}\n\n:host([color='warning']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-info-9);\n}\n\n.native-toggle {\n\n    label {\n        display: flex;\n        cursor: pointer;\n        align-items: center;\n        user-select: none;\n\n        .label-wrapper {\n            width: var(--wje-toggle-width) !important;\n            min-width: var(--wje-toggle-width);\n            height: var(--wje-toggle-height);\n            position: relative;\n            display: flex;\n            align-items: center;\n\n            &:before {\n                content: '';\n                position: absolute;\n                cursor: pointer;\n                width: 100%;\n                height: 100%;\n                top: auto;\n                left: 0;\n                background: var(--wje-toggle-color-base);\n                background-size: 300%;\n                background-position: right;\n                border-radius: var(--wje-toggle-border-radius);\n                border: none;\n                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n                transition: background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * 0.24)),\n                box-shadow var(--wje-toggle-duration);\n                transition-timing-function: var(--wje-toggle-curve);\n            }\n\n            &:after {\n                content: '';\n                position: absolute;\n                transform: translateX(0%);\n                background: var(--wje-toggle-handle-color);\n                width: var(--wje-toggle-handle-width);\n                height: var(--wje-toggle-handle-height);\n                border-radius: var(--wje-toggle-handle-border-radius);\n                top: auto;\n                left: 2px;\n                box-shadow: var(--wje-toggle-handle-shadow);\n                transition: transform, box-shadow;\n                transition-duration: var(--wje-toggle-duration);\n                transition-timing-function: var(--wje-toggle-curve);\n            }\n        }\n    }\n\n    input[type='checkbox'][disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-9);\n            opacity: 0.58;\n\n            &:before {\n                cursor: not-allowed !important;\n            }\n        }\n    }\n\n    input[type='checkbox'] {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n\n        &:checked {\n            & + label {\n                .label-wrapper:before {\n                    background-position: left;\n                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n                }\n\n                .label-wrapper:after {\n                    transform: translateX(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));\n                    box-shadow: var(--wje-toggle-handle-shadow-checked);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .label-wrapper:before {\n                    outline: none !important;\n                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12),\n                    0 0 0 0 #78c8fe;\n                }\n            }\n        }\n\n        &[disabled]:active {\n            & + label {\n                .label-wrapper:after {\n                    transform: scaleX(1.1);\n                    transform-origin: center left;\n                    transition: transform step-start;\n                }\n            }\n        }\n\n        &:checked {\n            &[disabled]:active {\n                & + label {\n                    .label-wrapper:after {\n                        transform: translateX(calc(100% - 6px)) scaleX(1.1);\n                        transform-origin: center right;\n                    }\n                }\n            }\n        }\n\n        &:hover {\n            &:active {\n                & + label {\n                    .label-wrapper:before {\n                        background-color: transparent;\n                    }\n                }\n            }\n        }\n    }\n}\n\n:host .text {\n    margin-inline: 0.5rem 0;\n}\n\n/*Placememt*/\n:host([placement='end']) {\n    label {\n        width: 100%;\n    }\n    .text {\n        margin-inline: 0 0.5rem;\n        width: 100%;\n    }\n}\n\n:host([invalid]) {\n    label{\n        color: var(--wje-input-color-invalid);\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    top: 0;\n    width: max-content;\n    line-height: normal;\n    position: static;\n    background: transparent;\n    padding: 0.25rem 0;\n    left: auto;\n    transform: none;\n    color: var(--wje-input-color-invalid);\n    font-size: 12px;\n}\n";
 class Toggle extends FormAssociatedElement {
@@ -101,6 +101,7 @@ class Toggle extends FormAssociatedElement {
       this.value = __privateGet(this, _internalValue);
       this.pristine = false;
     }
+    this.syncAria();
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.input) return;
@@ -123,6 +124,7 @@ class Toggle extends FormAssociatedElement {
         this.internals.setFormValue(this.value);
       }
     }
+    this.syncAria();
   }
   draw() {
     const fragment = document.createDocumentFragment();
@@ -167,6 +169,7 @@ class Toggle extends FormAssociatedElement {
   }
   afterDraw() {
     this.internals.setFormValue(this.checked ? this.value : null);
+    this.syncAria();
     if (!this.disabled) {
       this.input.addEventListener("input", (e) => {
         this.validate();
@@ -174,6 +177,7 @@ class Toggle extends FormAssociatedElement {
         this.propagateValidation();
         this.indeterminate = false;
         this.checked = e.target.checked;
+        this.syncAria();
         event.dispatchCustomEvent(this, "wje-toggle:input");
       });
       this.input.addEventListener("change", (e) => {
@@ -190,6 +194,18 @@ class Toggle extends FormAssociatedElement {
       }
     }
   }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    this.setAriaState({
+      role: "switch",
+      checked: this.checked,
+      disabled: this.disabled,
+      required: this.required,
+      invalid: this.invalid
+    });
+  }
   /**
    * Removes the event listener when the checkbox is disconnected.
    */

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 }\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 }\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\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\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 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":"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"}

package/dist/{packages/wje-toolbar → wje-toolbar}/toolbar.element.d.ts RENAMED Viewed

@@ -36,4 +36,8 @@ export default class Toolbar extends WJElement {
      * @returns {object} Document fragment
      */
     draw(): object;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
 }

package/dist/wje-toolbar.js CHANGED Viewed

@@ -36,6 +36,7 @@ class Toolbar extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component for the toolbar.
@@ -55,6 +56,19 @@ class Toolbar extends WJElement {
     fragment.appendChild(native);
     return fragment;
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "toolbar" });
+    }
+    const ariaLabel = this.getAttribute("aria-label");
+    const label = this.getAttribute("label");
+    if (!ariaLabel && label) {
+      this.setAriaState({ label });
+    }
+  }
 }
 Toolbar.define("wje-toolbar", Toolbar);
 export {

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 }\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","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;AAAA,~~EAC5B~~;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;AACA;~~ACjFA~~,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,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;"}

package/dist/{packages/wje-tooltip → wje-tooltip}/tooltip.element.d.ts RENAMED Viewed

@@ -13,6 +13,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @tag wje-tooltip
  */
 export default class Tooltip extends WJElement {
+    static _instanceId: number;
     /**
      * Returns the CSS stylesheet for the component.
      * @static
@@ -25,6 +26,7 @@ export default class Tooltip extends WJElement {
      * @returns {Array} An array of observed attributes
      */
     static get observedAttributes(): any[];
+    _instanceId: number;
     /**
      * Dependencies of the Button element.
      * @type {object}
@@ -52,6 +54,7 @@ export default class Tooltip extends WJElement {
      * Draws the component for the tooltip.
      */
     afterDraw(): void;
+    onSlotChange: () => void;
     dispatch(customEvent: any): Promise<any>;
     beforeShow(): string;
     afterShow(): boolean;

package/dist/wje-tooltip.js CHANGED Viewed

@@ -3,10 +3,10 @@ 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-DeajFyOQ.js";
+import { P as Popup } from "./popup.element-Cl6QeG8M.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";
-class Tooltip extends WJElement {
+const _Tooltip = class _Tooltip extends WJElement {
   /**
    * Creates an instance of Tooltip.
    */
@@ -60,6 +60,7 @@ class Tooltip extends WJElement {
       this.classList.remove("active");
       this.popup.hide();
     });
+    this._instanceId = ++_Tooltip._instanceId;
   }
   /**
    * Set active attribute for the tooltip element.
@@ -97,6 +98,7 @@ class Tooltip extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "tooltip" });
   }
   /**
    * Draws the component for the tooltip.
@@ -108,6 +110,7 @@ class Tooltip extends WJElement {
     popup.setAttribute("placement", this.placement || "top");
     popup.setAttribute("offset", this.offset || "0");
     let slot = document.createElement("slot");
+    slot.setAttribute("name", "anchor");
     slot.setAttribute("slot", "anchor");
     let arrow = document.createElement("div");
     arrow.classList.add("arrow");
@@ -137,10 +140,27 @@ class Tooltip extends WJElement {
    * Draws the component for the tooltip.
    */
   afterDraw() {
-    let anchorEl = this.mySlot.assignedElements()[0];
-    if (this.selector) {
-      anchorEl = this.checkSelector(anchorEl);
-    }
+    const resolveAnchor = () => {
+      let anchorEl2 = this.mySlot.assignedElements()[0];
+      if (!anchorEl2) {
+        anchorEl2 = this.querySelector(":scope > *:not([slot])");
+        if (anchorEl2) anchorEl2.setAttribute("slot", "anchor");
+      }
+      if (this.selector) {
+        anchorEl2 = this.checkSelector(anchorEl2);
+      }
+      if (!anchorEl2) return null;
+      const tooltipId = this.id || `wje-tooltip-${this._instanceId}`;
+      if (!this.id) this.id = tooltipId;
+      anchorEl2.setAttribute("aria-describedby", tooltipId);
+      return anchorEl2;
+    };
+    this.onSlotChange = () => {
+      resolveAnchor();
+    };
+    this.mySlot.addEventListener("slotchange", this.onSlotChange);
+    this.onSlotChange();
+    let anchorEl = resolveAnchor();
     if (!anchorEl) return;
     event.addListener(anchorEl, "mouseenter", null, this.onShow);
     event.addListener(anchorEl, "mouseleave", null, this.onHide);
@@ -148,10 +168,12 @@ class Tooltip extends WJElement {
     event.addListener(this, "wje-dropdown:close", null, this.onShow);
   }
   afterDisconnect() {
+    var _a;
     event.removeListener(this, "wje-dropdown:open", null, this.onHide);
     event.removeListener(this, "wje-dropdown:close", null, this.onShow);
     event.removeListener(this, "mouseenter", null, this.onShow);
     event.removeListener(this, "mouseleave", null, this.onHide);
+    (_a = this.mySlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
   }
   dispatch(customEvent) {
     return new Promise((resolve) => {
@@ -179,7 +201,9 @@ class Tooltip extends WJElement {
     }
     return newAnchorEl;
   }
-}
+};
+__publicField(_Tooltip, "_instanceId", 0);
+let Tooltip = _Tooltip;
 Tooltip.define("wje-tooltip", Tooltip);
 export {
   Tooltip as default