wj-elements 0.7.6 → 0.7.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +5500 -5500
- package/dist/packages/wje-img/img.element.d.ts +4 -4
- package/dist/web-types.json +465 -465
- package/dist/wje-breadcrumb.js +7 -3
- package/dist/wje-breadcrumb.js.map +1 -1
- package/dist/wje-chip.js +1 -1
- package/dist/wje-chip.js.map +1 -1
- package/dist/wje-dialog.js +1 -1
- package/dist/wje-dialog.js.map +1 -1
- package/dist/wje-file-upload-item.js +2 -2
- package/dist/wje-file-upload-item.js.map +1 -1
- package/dist/wje-file-upload.js +2 -2
- package/dist/wje-file-upload.js.map +1 -1
- package/dist/wje-img.js +4 -3
- package/dist/wje-img.js.map +1 -1
- package/dist/wje-pagination.js +4 -4
- package/dist/wje-pagination.js.map +1 -1
- package/dist/wje-toast.js +1 -1
- package/dist/wje-toast.js.map +1 -1
- package/dist/wje-toolbar-action.js +1 -1
- package/dist/wje-toolbar-action.js.map +1 -1
- package/package.json +2 -1
package/dist/wje-breadcrumb.js
CHANGED
|
@@ -513,7 +513,7 @@ class Breadcrumb extends WJElement {
|
|
|
513
513
|
const trigger = document.createElement("wje-button");
|
|
514
514
|
trigger.setAttribute("slot", "trigger");
|
|
515
515
|
trigger.setAttribute("fill", "link");
|
|
516
|
-
trigger.setAttribute("
|
|
516
|
+
trigger.setAttribute("label", ariaLabel);
|
|
517
517
|
trigger.classList.add("breadcrumb-mobile", "breadcrumb-mobile__menu", className);
|
|
518
518
|
const iconElement = document.createElement("wje-icon");
|
|
519
519
|
iconElement.setAttribute("name", icon);
|
|
@@ -651,7 +651,11 @@ class Breadcrumb extends WJElement {
|
|
|
651
651
|
if (customTrigger) {
|
|
652
652
|
const trigger = customTrigger.cloneNode(true);
|
|
653
653
|
trigger.setAttribute("slot", "trigger");
|
|
654
|
-
if (
|
|
654
|
+
if (trigger.localName === "wje-button") {
|
|
655
|
+
if (!trigger.hasAttribute("label") && !trigger.hasAttribute("aria-label")) {
|
|
656
|
+
trigger.setAttribute("label", "Show breadcrumb menu");
|
|
657
|
+
}
|
|
658
|
+
} else if (!trigger.hasAttribute("aria-label")) {
|
|
655
659
|
trigger.setAttribute("aria-label", "Show breadcrumb menu");
|
|
656
660
|
}
|
|
657
661
|
return trigger;
|
|
@@ -660,7 +664,7 @@ class Breadcrumb extends WJElement {
|
|
|
660
664
|
let button = document.createElement("wje-button");
|
|
661
665
|
button.setAttribute("slot", "trigger");
|
|
662
666
|
button.setAttribute("fill", "link");
|
|
663
|
-
button.setAttribute("
|
|
667
|
+
button.setAttribute("label", "Show more breadcrumbs");
|
|
664
668
|
button.innerHTML = `<wje-icon name="${this.getCollapsedDropdownIcon(isBreakpointMenuIndicator)}"></wje-icon>`;
|
|
665
669
|
return button;
|
|
666
670
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst MOBILE_COLLAPSED_VARIANTS = new Set(['TEXT', 'BACK', 'PARENT-TITLE', 'MENU-TITLE', 'SHEET']);\n\n/**\n * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @cssproperty [--wje-breadcrumb-line-height=1.5] - Controls the vertical rhythm of breadcrumb text.\n * @cssproperty [--wje-breadcrumb-native-line-height=var(--wje-breadcrumb-line-height)] - Controls the line height of the native breadcrumb wrapper.\n * @cssproperty [--wje-breadcrumb-native-margin=0] - Sets outer spacing around the native breadcrumb wrapper.\n * @cssproperty [--wje-breadcrumb-native-padding=0.25rem 0.75rem] - Sets inner spacing inside the native breadcrumb wrapper.\n * @cssproperty [--wje-breadcrumb-margin=var(--wje-breadcrumb-native-margin)] - Backwards-compatible alias for native breadcrumb margin.\n * @cssproperty [--wje-breadcrumb-padding=var(--wje-breadcrumb-native-padding)] - Backwards-compatible alias for native breadcrumb padding.\n * @tag wje-breadcrumb\n */\nexport default class Breadcrumb extends WJElement {\n /**\n * Breadcrumb constructor method.\n */\n constructor() {\n super();\n\n this._showSeparator = true;\n this._showCollapsedIndicator = false;\n this.handleNativeClick = (e) => this.handleDisabledNativeClick(e);\n }\n\n /**\n * Sets the breadcrumb link URL.\n * @param {string|null} value Link URL.\n */\n set href(value) {\n if (value === null || value === undefined) this.removeAttribute('href');\n else this.setAttribute('href', value);\n }\n\n /**\n * Gets the breadcrumb link URL.\n * @returns {string|null}\n */\n get href() {\n return this.getAttribute('href');\n }\n\n /**\n * Sets the disabled state.\n * @param {boolean} value Disabled state.\n */\n set disabled(value) {\n if (value === true || value === '' || value === 'true' || value === 1 || value === '1') {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Gets the disabled state.\n * @returns {boolean}\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Get show separator flag.\n * @returns {boolean} showSeparator - The show separator flag\n */\n get showSeparator() {\n return this._showSeparator;\n }\n\n /**\n * Set show separator flag.\n * @param {boolean} value The value to set\n */\n set showSeparator(value) {\n this._showSeparator = value;\n }\n\n /**\n * Set collapsed variant.\n * @param {string} value The value to set\n */\n set collapsedVariant(value) {\n this._collapsedVariant = value;\n }\n\n /**\n * Get collapsed variant.\n * @returns {string} The collapsed variant value in uppercase.\n */\n get collapsedVariant() {\n return this.collapsedVariantName.toUpperCase();\n }\n\n /**\n * Get collapsed variant token.\n * @returns {string}\n */\n get collapsedVariantName() {\n return String(this.parentElement?.collapsedVariant || this.parentElement?.variant || this._collapsedVariant || 'button').trim();\n }\n\n /**\n * Class name for the Breadcrumb element.\n * @type {string}\n */\n className = 'Breadcrumb';\n\n /**\n * Get CSS stylesheet for the Breadcrumb element.\n * @static\n * @returns {object} styles - The CSS styles\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n */\n static get observedAttributes() {\n return ['show-collapsed-indicator', 'collapsed', 'last', 'href', 'target', 'rel', 'download', 'disabled', 'title', 'aria-label'];\n }\n\n /**\n * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.\n * @param {string} name The name of the attribute that was changed.\n * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.\n * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (oldValue === newValue) return;\n\n if (name === 'collapsed') {\n const isCollapsed = newValue !== null && WjElementUtils.stringToBoolean(newValue);\n\n this.classList.toggle('collapsed', isCollapsed && !this.hasAttribute('show-collapsed-indicator'));\n\n } else if (name === 'show-collapsed-indicator') {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n const isOn = newValue !== null && WjElementUtils.stringToBoolean(newValue);\n this._showCollapsedIndicator = isOn;\n this.classList.toggle('collapsed', this.hasAttribute('collapsed') && !isOn);\n this.refresh();\n\n } else if (name === 'last') {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n const isLast = newValue !== null && WjElementUtils.stringToBoolean(newValue);\n this.active = isLast;\n this.showSeparator = !isLast;\n this.syncAria();\n this.syncNativeAttributes();\n this.refresh();\n } else {\n this.syncAria();\n this.syncNativeAttributes();\n }\n }\n\n /**\n * Setup attributes for the Breadcrumb element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n syncAria() {\n this.setAriaState({ role: 'link' });\n if (this.active) this.setAriaState({ current: 'page' });\n else this.removeAttribute('aria-current');\n\n if (this.disabled) this.setAriaState({ disabled: true });\n else this.removeAttribute('aria-disabled');\n }\n\n /**\n * Draw method for the Breadcrumb element.\n * @returns {object} fragment - The document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('a');\n native.classList.add('native-breadcrumb');\n native.setAttribute('part', 'native');\n\n this.native = native;\n this.syncNativeAttributes();\n\n let slot = document.createElement('slot');\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.append(start, slot, end);\n\n // APPEND\n fragment.append(native);\n\n if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {\n // pridame button za native element\n fragment.append(this.drawCollapsedIndicator());\n\n // skryjeme native element\n native.classList.add('hidden');\n }\n\n if (this.shouldRenderSeparator()) {\n let separator = document.createElement('span');\n separator.classList.add('separator');\n separator.setAttribute('part', 'separator');\n\n if (WjElementUtils.hasSlot(this, 'separator')) {\n let slotSeparator = document.createElement('slot');\n slotSeparator.setAttribute('name', 'separator');\n\n separator.append(slotSeparator);\n } else {\n separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n }\n\n fragment.append(separator);\n }\n\n return fragment;\n }\n\n /**\n * Returns whether the separator should be visible after this breadcrumb.\n * @returns {boolean}\n */\n shouldRenderSeparator() {\n return this.showSeparator && this.hasVisibleBreadcrumbAfter();\n }\n\n /**\n * Returns whether any later breadcrumb is still visible in the rendered trail.\n * @returns {boolean}\n */\n hasVisibleBreadcrumbAfter() {\n const breadcrumbs = this.parentElement?.getBreadcrumbs?.();\n\n if (!Array.isArray(breadcrumbs)) return true;\n\n const index = breadcrumbs.indexOf(this);\n\n if (index === -1) return true;\n\n return breadcrumbs.slice(index + 1).some((breadcrumb) => this.isBreadcrumbVisibleInTrail(breadcrumb));\n }\n\n /**\n * Returns whether a breadcrumb is visible in the rendered trail.\n * @param {Element} breadcrumb Breadcrumb element to inspect.\n * @returns {boolean}\n */\n isBreadcrumbVisibleInTrail(breadcrumb) {\n return !(breadcrumb?.hasAttribute?.('collapsed') && !breadcrumb?.hasAttribute?.('show-collapsed-indicator'));\n }\n\n /**\n * Synchronizes host attributes to the internal anchor.\n */\n syncNativeAttributes() {\n const native = this.native || this.context?.querySelector('a.native-breadcrumb');\n if (!native) return;\n\n const isDisabled = this.disabled;\n const href = this.href;\n\n if (href !== null && href !== undefined && !isDisabled) {\n native.setAttribute('href', href);\n } else {\n native.removeAttribute('href');\n }\n\n ['target', 'rel', 'download'].forEach((attr) => {\n if (this.hasAttribute(attr) && !isDisabled) {\n native.setAttribute(attr, this.getAttribute(attr));\n } else {\n native.removeAttribute(attr);\n }\n });\n\n ['title', 'aria-label'].forEach((attr) => {\n if (this.hasAttribute(attr)) {\n native.setAttribute(attr, this.getAttribute(attr));\n } else {\n native.removeAttribute(attr);\n }\n });\n\n native.classList.toggle('active', Boolean(this.active));\n native.classList.toggle('disabled', isDisabled);\n\n if (this.active) native.setAttribute('aria-current', 'page');\n else native.removeAttribute('aria-current');\n\n if (isDisabled) {\n native.setAttribute('aria-disabled', 'true');\n native.setAttribute('tabindex', '-1');\n } else {\n native.removeAttribute('aria-disabled');\n native.removeAttribute('tabindex');\n }\n }\n\n /**\n * Sets up native anchor listeners after render.\n */\n afterDraw() {\n this.native?.addEventListener('click', this.handleNativeClick);\n }\n\n /**\n * Removes native anchor listeners before redraw/disconnect.\n */\n beforeDisconnect() {\n this.native?.removeEventListener('click', this.handleNativeClick);\n }\n\n /**\n * Prevents disabled breadcrumbs from navigating or bubbling click handlers.\n * @param {MouseEvent} e Click event.\n */\n handleDisabledNativeClick(e) {\n if (!this.disabled) return;\n\n e.preventDefault();\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n }\n\n /**\n * Renders the collapsed indicator based on the current collapsed variant.\n * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\n * Mobile breakpoint variants render compact breadcrumb summaries, otherwise the default button is used.\n * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.\n */\n drawCollapsedIndicator() {\n const variant = this.collapsedVariant;\n\n if (variant === 'DROPDOWN') {\n return this.collapseDropdown();\n }\n\n if (this.isMobileCollapsedVariant() && this.isBreakpointMenuIndicator()) {\n return this.collapseMobileVariant(variant);\n }\n\n return this.collapseButton();\n }\n\n /**\n * Returns whether the current collapsed variant is a compact mobile layout.\n * @returns {boolean}\n */\n isMobileCollapsedVariant() {\n return MOBILE_COLLAPSED_VARIANTS.has(this.collapsedVariant);\n }\n\n /**\n * Creates and returns a dropdown UI component for collapsed breadcrumbs.\n * This method generates a dropdown element with a button trigger and a menu populated with items corresponding\n * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\n * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\n * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.\n */\n collapseDropdown() {\n const isBreakpointMenuIndicator = this.isBreakpointMenuIndicator();\n const breadcrumbs = this.getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator);\n const trigger = this.createCollapsedDropdownTrigger(isBreakpointMenuIndicator);\n\n return this.createBreadcrumbDropdown({\n breadcrumbs,\n trigger,\n placement: isBreakpointMenuIndicator ? 'bottom-start' : 'bottom',\n });\n }\n\n /**\n * Creates a dropdown containing breadcrumb menu items.\n * @param {object} options Configuration for the dropdown shell.\n * @param {Array<HTMLElement>} options.breadcrumbs Breadcrumb elements to mirror in the menu.\n * @param {HTMLElement} options.trigger Element assigned to the dropdown trigger slot.\n * @param {string} options.placement Floating UI placement token for the popup.\n * @returns {HTMLElement}\n */\n createBreadcrumbDropdown({ breadcrumbs, trigger, placement = 'bottom' }) {\n const dropdown = document.createElement('wje-dropdown');\n dropdown.setAttribute('placement', placement);\n dropdown.setAttribute('offset', '10');\n\n const menu = this.createCollapsedBreadcrumbMenu(breadcrumbs);\n\n dropdown.append(trigger, menu);\n\n return dropdown;\n }\n\n /**\n * Creates the menu used by collapsed dropdown variants.\n * @param {Array<HTMLElement>} breadcrumbs Breadcrumb items represented by menu items.\n * @returns {HTMLElement}\n */\n createCollapsedBreadcrumbMenu(breadcrumbs) {\n const menu = document.createElement('wje-menu');\n menu.setAttribute('variant', 'context');\n menu.style.setProperty('--wje-menu-item-justify-content', 'flex-start');\n\n menu.addEventListener('click', (e) => {\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n });\n\n breadcrumbs.forEach((breadcrumb) => {\n const menuItem = document.createElement('wje-menu-item');\n this.populateCollapsedMenuItem(menuItem, breadcrumb);\n\n menuItem.__breadcrumb = breadcrumb;\n\n menuItem.addEventListener('wje-menu-item:click', (e) => {\n e.preventDefault?.();\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n\n this.forwardBreadcrumbClick(e.currentTarget.__breadcrumb);\n });\n\n menu.append(menuItem);\n });\n\n return menu;\n }\n\n /**\n * Returns breadcrumbs that should be exposed in a collapsed menu.\n * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.\n * @returns {Array<HTMLElement>}\n */\n getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator) {\n const breadcrumbs = this.getBreadcrumbs();\n\n if (isBreakpointMenuIndicator) {\n return breadcrumbs?.getBreadcrumbs?.() || [];\n }\n\n return breadcrumbs?.getBreadcrumbsCollapsed?.() || [];\n }\n\n /**\n * Renders one of the compact mobile breakpoint variants.\n * @param {string} variant Normalized uppercase variant token.\n * @returns {HTMLElement}\n */\n collapseMobileVariant(variant) {\n if (variant === 'TEXT') return this.collapseMobileText();\n if (variant === 'BACK') return this.collapseMobileBack();\n if (variant === 'PARENT-TITLE') return this.collapseMobileParentTitle();\n if (variant === 'MENU-TITLE') return this.collapseMobileMenuTitle();\n if (variant === 'SHEET') return this.collapseMobileSheet();\n\n return this.collapseButton();\n }\n\n /**\n * Renders only the current breadcrumb title.\n * @returns {HTMLElement}\n */\n collapseMobileText() {\n const current = this.getCurrentBreadcrumb();\n const container = this.createMobileContainer('breadcrumb-mobile--text');\n const title = this.createMobileBreadcrumbControl(current, 'breadcrumb-mobile__title', {\n ariaCurrent: true,\n actionable: this.isBreadcrumbActionable(current),\n });\n\n container.append(title);\n\n return container;\n }\n\n /**\n * Renders a parent back action above the current title.\n * @returns {HTMLElement}\n */\n collapseMobileBack() {\n const current = this.getCurrentBreadcrumb();\n const parent = this.getParentBreadcrumb();\n const container = this.createMobileContainer('breadcrumb-mobile--back');\n\n if (parent) {\n const back = this.createMobileBreadcrumbControl(parent, 'breadcrumb-mobile__back', {\n ariaLabel: 'Go to parent',\n icon: 'arrow-left',\n actionable: this.isBreadcrumbActionable(parent),\n });\n container.append(back);\n }\n\n const title = this.createMobileBreadcrumbControl(current, 'breadcrumb-mobile__title', {\n ariaCurrent: true,\n actionable: false,\n });\n container.append(title);\n\n return container;\n }\n\n /**\n * Renders parent context above the current title.\n * @returns {HTMLElement}\n */\n collapseMobileParentTitle() {\n const current = this.getCurrentBreadcrumb();\n const parent = this.getParentBreadcrumb();\n const container = this.createMobileContainer('breadcrumb-mobile--parent-title');\n\n if (parent) {\n const parentControl = this.createMobileBreadcrumbControl(parent, 'breadcrumb-mobile__parent', {\n actionable: this.isBreadcrumbActionable(parent),\n });\n container.append(parentControl);\n }\n\n const title = this.createMobileBreadcrumbControl(current, 'breadcrumb-mobile__title', {\n ariaCurrent: true,\n actionable: false,\n });\n container.append(title);\n\n return container;\n }\n\n /**\n * Renders a menu trigger with the current title.\n * @returns {HTMLElement}\n */\n collapseMobileMenuTitle() {\n const trigger = this.createMobileDropdownTrigger({\n icon: 'dots',\n label: this.getBreadcrumbLabel(this.getCurrentBreadcrumb()),\n ariaLabel: 'Show breadcrumb menu',\n className: 'breadcrumb-mobile--menu-title',\n });\n\n return this.createMobileDropdown(trigger);\n }\n\n /**\n * Renders the future sheet variant using the dropdown fallback for now.\n * @returns {HTMLElement}\n */\n collapseMobileSheet() {\n const trigger = this.createMobileDropdownTrigger({\n icon: 'chevron-down',\n iconPosition: 'end',\n label: this.getBreadcrumbLabel(this.getCurrentBreadcrumb()),\n ariaLabel: 'Show breadcrumb path',\n className: 'breadcrumb-mobile--sheet',\n });\n\n return this.createMobileDropdown(trigger);\n }\n\n /**\n * Creates a dropdown fallback for mobile menu-like variants.\n * @param {HTMLElement} trigger Element that opens the fallback dropdown.\n * @returns {HTMLElement}\n */\n createMobileDropdown(trigger) {\n const dropdown = this.createBreadcrumbDropdown({\n breadcrumbs: this.getTrailBreadcrumbs(),\n trigger,\n placement: 'bottom-start',\n });\n\n dropdown.classList.add('breadcrumb-mobile-dropdown');\n\n return dropdown;\n }\n\n /**\n * Creates a compact mobile dropdown trigger.\n * @param {object} options Visual settings for the compact trigger.\n * @param {string} options.icon Icon shown next to the title.\n * @param {string} options.iconPosition Whether the icon renders at the start or end.\n * @param {string} options.label Current breadcrumb label shown beside the icon.\n * @param {string} options.ariaLabel Accessible name for the dropdown trigger.\n * @param {string} options.className Variant-specific class applied to the trigger.\n * @returns {HTMLElement}\n */\n createMobileDropdownTrigger({ icon, iconPosition = 'start', label, ariaLabel, className }) {\n const trigger = document.createElement('wje-button');\n trigger.setAttribute('slot', 'trigger');\n trigger.setAttribute('fill', 'link');\n trigger.setAttribute('aria-label', ariaLabel);\n trigger.classList.add('breadcrumb-mobile', 'breadcrumb-mobile__menu', className);\n\n const iconElement = document.createElement('wje-icon');\n iconElement.setAttribute('name', icon);\n iconElement.setAttribute('slot', iconPosition === 'end' ? 'end' : 'start');\n iconElement.classList.add('breadcrumb-mobile__icon');\n\n const title = document.createElement('span');\n title.classList.add('breadcrumb-mobile__title');\n title.setAttribute('aria-current', 'page');\n title.textContent = label;\n if (label) title.setAttribute('title', label);\n\n if (iconPosition === 'end') {\n trigger.append(title, iconElement);\n } else {\n trigger.append(iconElement, title);\n }\n\n return trigger;\n }\n\n /**\n * Creates a wrapper for compact mobile breadcrumb variants.\n * @param {string} className Variant class.\n * @returns {HTMLElement}\n */\n createMobileContainer(className) {\n const container = document.createElement('div');\n container.classList.add('breadcrumb-mobile', className);\n\n return container;\n }\n\n /**\n * Creates a text or button control for a breadcrumb.\n * @param {HTMLElement|null} breadcrumb Source breadcrumb.\n * @param {string} className Class applied to the created control.\n * @param {object} options Behavior and accessibility settings for the control.\n * @param {boolean} options.actionable Whether clicks should forward to the source breadcrumb.\n * @param {boolean} options.ariaCurrent Whether the control marks the current page.\n * @param {string} options.ariaLabel Accessible name for action controls.\n * @param {string} options.icon Optional icon shown before the label.\n * @returns {HTMLElement}\n */\n createMobileBreadcrumbControl(breadcrumb, className, { actionable = false, ariaCurrent = false, ariaLabel, icon } = {}) {\n const label = this.getBreadcrumbLabel(breadcrumb);\n const control = document.createElement(actionable ? 'button' : 'span');\n\n control.classList.add(className);\n if (actionable) {\n control.setAttribute('type', 'button');\n control.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n this.forwardBreadcrumbClick(breadcrumb);\n });\n }\n\n if (ariaCurrent) control.setAttribute('aria-current', 'page');\n if (ariaLabel && actionable) control.setAttribute('aria-label', ariaLabel);\n if (label) control.setAttribute('title', label);\n\n if (icon) {\n const iconElement = document.createElement('wje-icon');\n iconElement.setAttribute('name', icon);\n iconElement.classList.add('breadcrumb-mobile__icon');\n control.append(iconElement);\n }\n\n const text = document.createElement('span');\n text.classList.add('breadcrumb-mobile__label');\n text.textContent = label;\n control.append(text);\n\n return control;\n }\n\n /**\n * Returns the full trail of sibling breadcrumbs.\n * @returns {Array<HTMLElement>}\n */\n getTrailBreadcrumbs() {\n return this.getBreadcrumbs()?.getBreadcrumbs?.() || [];\n }\n\n /**\n * Returns the current breadcrumb item.\n * @returns {HTMLElement|null}\n */\n getCurrentBreadcrumb() {\n const breadcrumbs = this.getTrailBreadcrumbs();\n\n return breadcrumbs[breadcrumbs.length - 1] || null;\n }\n\n /**\n * Returns the parent breadcrumb item.\n * @returns {HTMLElement|null}\n */\n getParentBreadcrumb() {\n const breadcrumbs = this.getTrailBreadcrumbs();\n\n return breadcrumbs.length > 1 ? breadcrumbs[breadcrumbs.length - 2] : null;\n }\n\n /**\n * Returns whether a breadcrumb has a known action to forward.\n * @param {HTMLElement|null} breadcrumb Breadcrumb to inspect.\n * @returns {boolean}\n */\n isBreadcrumbActionable(breadcrumb) {\n if (!breadcrumb || breadcrumb.disabled || breadcrumb.hasAttribute?.('disabled')) return false;\n\n return Boolean(\n breadcrumb.hasAttribute?.('href') ||\n breadcrumb.hasAttribute?.('onclick') ||\n breadcrumb.__wjeBreadcrumbManaged ||\n breadcrumb.hasAttribute?.('data-wje-breadcrumbs-item')\n );\n }\n\n /**\n * Forwards a compact control or menu item click to the original breadcrumb.\n * @param {HTMLElement|null} breadcrumb Source breadcrumb.\n */\n forwardBreadcrumbClick(breadcrumb) {\n if (!breadcrumb) return;\n\n const native = breadcrumb.native || breadcrumb.context?.querySelector('a.native-breadcrumb');\n if (native && typeof native.click === 'function') {\n native.click();\n } else if (typeof breadcrumb.click === 'function') {\n breadcrumb.click();\n } else {\n breadcrumb.dispatchEvent(\n new MouseEvent('click', {\n bubbles: true,\n composed: true,\n cancelable: true\n })\n );\n }\n }\n\n /**\n * Creates the dropdown trigger for collapsed breadcrumbs.\n * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.\n * @returns {HTMLElement}\n */\n createCollapsedDropdownTrigger(isBreakpointMenuIndicator) {\n if (isBreakpointMenuIndicator) {\n const customTrigger = this.getBreadcrumbs()?.getBreakpointCollapseTrigger?.();\n\n if (customTrigger) {\n const trigger = customTrigger.cloneNode(true);\n trigger.setAttribute('slot', 'trigger');\n\n if (!trigger.hasAttribute('aria-label')) {\n trigger.setAttribute('aria-label', 'Show breadcrumb menu');\n }\n\n return trigger;\n }\n }\n\n let button = document.createElement('wje-button');\n button.setAttribute('slot', 'trigger');\n button.setAttribute('fill', 'link');\n button.setAttribute('aria-label', 'Show more breadcrumbs');\n button.innerHTML = `<wje-icon name=\"${this.getCollapsedDropdownIcon(isBreakpointMenuIndicator)}\"></wje-icon>`;\n\n return button;\n }\n\n /**\n * Resolves the icon used by the default dropdown trigger.\n * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.\n * @returns {string}\n */\n getCollapsedDropdownIcon(isBreakpointMenuIndicator) {\n if (!isBreakpointMenuIndicator) return 'dots';\n\n return this.getBreadcrumbs()?.breakpointCollapseIcon || 'menu';\n }\n\n /**\n * Copies breadcrumb content into a collapsed menu item.\n * @param {HTMLElement} menuItem Menu item receiving the content.\n * @param {HTMLElement} breadcrumb Source breadcrumb.\n */\n populateCollapsedMenuItem(menuItem, breadcrumb) {\n const nodes = Array.from(breadcrumb.childNodes).map((node) => node.cloneNode(true));\n\n menuItem.replaceChildren(...nodes);\n\n if (menuItem.textContent.trim()) return;\n\n const label = this.getBreadcrumbLabel(breadcrumb);\n\n if (label) {\n menuItem.append(document.createTextNode(label));\n }\n }\n\n /**\n * Resolves a readable label for a breadcrumb item.\n * @param {HTMLElement|null} breadcrumb Source breadcrumb.\n * @returns {string}\n */\n getBreadcrumbLabel(breadcrumb) {\n if (!breadcrumb) return '';\n\n return this.getCollapsedMenuItemLabel(breadcrumb);\n }\n\n /**\n * Resolves a readable label for icon-only collapsed menu items.\n * @param {HTMLElement} breadcrumb Source breadcrumb.\n * @returns {string}\n */\n getCollapsedMenuItemLabel(breadcrumb) {\n const explicitLabel = breadcrumb.getAttribute('aria-label') || breadcrumb.getAttribute('title');\n\n if (explicitLabel?.trim()) return explicitLabel.trim();\n\n const text = breadcrumb.textContent.trim();\n\n if (text) return text;\n\n const iconName = breadcrumb.querySelector('wje-icon[slot=\"start\"]')?.getAttribute('name');\n\n if (iconName === 'home') return 'Home';\n\n const href = breadcrumb.getAttribute('href');\n const path = href?.split(/[?#]/)[0] || '';\n const segment = path.split('/').filter(Boolean).pop();\n\n return segment ? this.humanizeCollapsedMenuItemLabel(segment) : '';\n }\n\n /**\n * Turns a URL segment into a readable menu label.\n * @param {string} value URL segment.\n * @returns {string}\n */\n humanizeCollapsedMenuItemLabel(value) {\n return decodeURIComponent(value)\n .replace(/[-_]+/g, ' ')\n .replace(/\\b\\w/g, (letter) => letter.toUpperCase());\n }\n\n /**\n * Returns whether this collapsed indicator represents the full breakpoint menu.\n * @returns {boolean}\n */\n isBreakpointMenuIndicator() {\n const breadcrumbs = this.parentElement;\n\n return (\n this.hasAttribute('show-collapsed-indicator') &&\n this.hasAttribute('collapsed') &&\n breadcrumbs?.isBreakpointMenuCollapseActive?.()\n );\n }\n\n /**\n * Creates a button element that expands hidden breadcrumbs when clicked.\n * The button is set with appropriate attributes and event listeners to handle\n * the expanding of hidden breadcrumb elements. Clicking the button will remove\n * the button itself, reveal hidden breadcrumbs, and stop the current event\n * propagation.\n * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.\n */\n collapseButton() {\n let button = document.createElement('button');\n button.setAttribute('aria-label', 'Show more breadcrumbs');\n button.setAttribute('part', 'collapsed-indicator');\n button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n event.addListener(button, 'click', null, (e) => {\n this.native.classList.remove('hidden');\n button.remove();\n this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {\n el.classList.remove('collapsed');\n });\n e.stopPropagation();\n });\n\n return button;\n }\n\n /**\n * Retrieves the breadcrumb trail for the current element by returning its parent element.\n * @returns {Element} The parent element representing the breadcrumb trail.\n */\n getBreadcrumbs() {\n return this.parentElement;\n }\n}\n","import Breadcrumb from './breadcrumb.element.js';\nimport '../wje-button/button.js';\nimport '../wje-dropdown/dropdown.js';\nimport '../wje-icon/icon.js';\nimport '../wje-menu/menu.js';\nimport '../wje-menu-item/menu-item.js';\nimport '../wje-popup/popup.js';\nimport '../wje-tooltip/tooltip.js';\n\n// export * from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst MOBILE_COLLAPSED_VARIANTS = new Set(['TEXT', 'BACK', 'PARENT-TITLE', 'MENU-TITLE', 'SHEET']);\n\n/**\n * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @cssproperty [--wje-breadcrumb-line-height=1.5] - Controls the vertical rhythm of breadcrumb text.\n * @cssproperty [--wje-breadcrumb-native-line-height=var(--wje-breadcrumb-line-height)] - Controls the line height of the native breadcrumb wrapper.\n * @cssproperty [--wje-breadcrumb-native-margin=0] - Sets outer spacing around the native breadcrumb wrapper.\n * @cssproperty [--wje-breadcrumb-native-padding=0.25rem 0.75rem] - Sets inner spacing inside the native breadcrumb wrapper.\n * @cssproperty [--wje-breadcrumb-margin=var(--wje-breadcrumb-native-margin)] - Backwards-compatible alias for native breadcrumb margin.\n * @cssproperty [--wje-breadcrumb-padding=var(--wje-breadcrumb-native-padding)] - Backwards-compatible alias for native breadcrumb padding.\n * @tag wje-breadcrumb\n */\nexport default class Breadcrumb extends WJElement {\n /**\n * Breadcrumb constructor method.\n */\n constructor() {\n super();\n\n this._showSeparator = true;\n this._showCollapsedIndicator = false;\n this.handleNativeClick = (e) => this.handleDisabledNativeClick(e);\n }\n\n /**\n * Sets the breadcrumb link URL.\n * @param {string|null} value Link URL.\n */\n set href(value) {\n if (value === null || value === undefined) this.removeAttribute('href');\n else this.setAttribute('href', value);\n }\n\n /**\n * Gets the breadcrumb link URL.\n * @returns {string|null}\n */\n get href() {\n return this.getAttribute('href');\n }\n\n /**\n * Sets the disabled state.\n * @param {boolean} value Disabled state.\n */\n set disabled(value) {\n if (value === true || value === '' || value === 'true' || value === 1 || value === '1') {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Gets the disabled state.\n * @returns {boolean}\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Get show separator flag.\n * @returns {boolean} showSeparator - The show separator flag\n */\n get showSeparator() {\n return this._showSeparator;\n }\n\n /**\n * Set show separator flag.\n * @param {boolean} value The value to set\n */\n set showSeparator(value) {\n this._showSeparator = value;\n }\n\n /**\n * Set collapsed variant.\n * @param {string} value The value to set\n */\n set collapsedVariant(value) {\n this._collapsedVariant = value;\n }\n\n /**\n * Get collapsed variant.\n * @returns {string} The collapsed variant value in uppercase.\n */\n get collapsedVariant() {\n return this.collapsedVariantName.toUpperCase();\n }\n\n /**\n * Get collapsed variant token.\n * @returns {string}\n */\n get collapsedVariantName() {\n return String(this.parentElement?.collapsedVariant || this.parentElement?.variant || this._collapsedVariant || 'button').trim();\n }\n\n /**\n * Class name for the Breadcrumb element.\n * @type {string}\n */\n className = 'Breadcrumb';\n\n /**\n * Get CSS stylesheet for the Breadcrumb element.\n * @static\n * @returns {object} styles - The CSS styles\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n */\n static get observedAttributes() {\n return ['show-collapsed-indicator', 'collapsed', 'last', 'href', 'target', 'rel', 'download', 'disabled', 'title', 'aria-label'];\n }\n\n /**\n * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.\n * @param {string} name The name of the attribute that was changed.\n * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.\n * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (oldValue === newValue) return;\n\n if (name === 'collapsed') {\n const isCollapsed = newValue !== null && WjElementUtils.stringToBoolean(newValue);\n\n this.classList.toggle('collapsed', isCollapsed && !this.hasAttribute('show-collapsed-indicator'));\n\n } else if (name === 'show-collapsed-indicator') {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n const isOn = newValue !== null && WjElementUtils.stringToBoolean(newValue);\n this._showCollapsedIndicator = isOn;\n this.classList.toggle('collapsed', this.hasAttribute('collapsed') && !isOn);\n this.refresh();\n\n } else if (name === 'last') {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n const isLast = newValue !== null && WjElementUtils.stringToBoolean(newValue);\n this.active = isLast;\n this.showSeparator = !isLast;\n this.syncAria();\n this.syncNativeAttributes();\n this.refresh();\n } else {\n this.syncAria();\n this.syncNativeAttributes();\n }\n }\n\n /**\n * Setup attributes for the Breadcrumb element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n syncAria() {\n this.setAriaState({ role: 'link' });\n if (this.active) this.setAriaState({ current: 'page' });\n else this.removeAttribute('aria-current');\n\n if (this.disabled) this.setAriaState({ disabled: true });\n else this.removeAttribute('aria-disabled');\n }\n\n /**\n * Draw method for the Breadcrumb element.\n * @returns {object} fragment - The document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('a');\n native.classList.add('native-breadcrumb');\n native.setAttribute('part', 'native');\n\n this.native = native;\n this.syncNativeAttributes();\n\n let slot = document.createElement('slot');\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.append(start, slot, end);\n\n // APPEND\n fragment.append(native);\n\n if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {\n // pridame button za native element\n fragment.append(this.drawCollapsedIndicator());\n\n // skryjeme native element\n native.classList.add('hidden');\n }\n\n if (this.shouldRenderSeparator()) {\n let separator = document.createElement('span');\n separator.classList.add('separator');\n separator.setAttribute('part', 'separator');\n\n if (WjElementUtils.hasSlot(this, 'separator')) {\n let slotSeparator = document.createElement('slot');\n slotSeparator.setAttribute('name', 'separator');\n\n separator.append(slotSeparator);\n } else {\n separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n }\n\n fragment.append(separator);\n }\n\n return fragment;\n }\n\n /**\n * Returns whether the separator should be visible after this breadcrumb.\n * @returns {boolean}\n */\n shouldRenderSeparator() {\n return this.showSeparator && this.hasVisibleBreadcrumbAfter();\n }\n\n /**\n * Returns whether any later breadcrumb is still visible in the rendered trail.\n * @returns {boolean}\n */\n hasVisibleBreadcrumbAfter() {\n const breadcrumbs = this.parentElement?.getBreadcrumbs?.();\n\n if (!Array.isArray(breadcrumbs)) return true;\n\n const index = breadcrumbs.indexOf(this);\n\n if (index === -1) return true;\n\n return breadcrumbs.slice(index + 1).some((breadcrumb) => this.isBreadcrumbVisibleInTrail(breadcrumb));\n }\n\n /**\n * Returns whether a breadcrumb is visible in the rendered trail.\n * @param {Element} breadcrumb Breadcrumb element to inspect.\n * @returns {boolean}\n */\n isBreadcrumbVisibleInTrail(breadcrumb) {\n return !(breadcrumb?.hasAttribute?.('collapsed') && !breadcrumb?.hasAttribute?.('show-collapsed-indicator'));\n }\n\n /**\n * Synchronizes host attributes to the internal anchor.\n */\n syncNativeAttributes() {\n const native = this.native || this.context?.querySelector('a.native-breadcrumb');\n if (!native) return;\n\n const isDisabled = this.disabled;\n const href = this.href;\n\n if (href !== null && href !== undefined && !isDisabled) {\n native.setAttribute('href', href);\n } else {\n native.removeAttribute('href');\n }\n\n ['target', 'rel', 'download'].forEach((attr) => {\n if (this.hasAttribute(attr) && !isDisabled) {\n native.setAttribute(attr, this.getAttribute(attr));\n } else {\n native.removeAttribute(attr);\n }\n });\n\n ['title', 'aria-label'].forEach((attr) => {\n if (this.hasAttribute(attr)) {\n native.setAttribute(attr, this.getAttribute(attr));\n } else {\n native.removeAttribute(attr);\n }\n });\n\n native.classList.toggle('active', Boolean(this.active));\n native.classList.toggle('disabled', isDisabled);\n\n if (this.active) native.setAttribute('aria-current', 'page');\n else native.removeAttribute('aria-current');\n\n if (isDisabled) {\n native.setAttribute('aria-disabled', 'true');\n native.setAttribute('tabindex', '-1');\n } else {\n native.removeAttribute('aria-disabled');\n native.removeAttribute('tabindex');\n }\n }\n\n /**\n * Sets up native anchor listeners after render.\n */\n afterDraw() {\n this.native?.addEventListener('click', this.handleNativeClick);\n }\n\n /**\n * Removes native anchor listeners before redraw/disconnect.\n */\n beforeDisconnect() {\n this.native?.removeEventListener('click', this.handleNativeClick);\n }\n\n /**\n * Prevents disabled breadcrumbs from navigating or bubbling click handlers.\n * @param {MouseEvent} e Click event.\n */\n handleDisabledNativeClick(e) {\n if (!this.disabled) return;\n\n e.preventDefault();\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n }\n\n /**\n * Renders the collapsed indicator based on the current collapsed variant.\n * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\n * Mobile breakpoint variants render compact breadcrumb summaries, otherwise the default button is used.\n * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.\n */\n drawCollapsedIndicator() {\n const variant = this.collapsedVariant;\n\n if (variant === 'DROPDOWN') {\n return this.collapseDropdown();\n }\n\n if (this.isMobileCollapsedVariant() && this.isBreakpointMenuIndicator()) {\n return this.collapseMobileVariant(variant);\n }\n\n return this.collapseButton();\n }\n\n /**\n * Returns whether the current collapsed variant is a compact mobile layout.\n * @returns {boolean}\n */\n isMobileCollapsedVariant() {\n return MOBILE_COLLAPSED_VARIANTS.has(this.collapsedVariant);\n }\n\n /**\n * Creates and returns a dropdown UI component for collapsed breadcrumbs.\n * This method generates a dropdown element with a button trigger and a menu populated with items corresponding\n * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\n * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\n * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.\n */\n collapseDropdown() {\n const isBreakpointMenuIndicator = this.isBreakpointMenuIndicator();\n const breadcrumbs = this.getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator);\n const trigger = this.createCollapsedDropdownTrigger(isBreakpointMenuIndicator);\n\n return this.createBreadcrumbDropdown({\n breadcrumbs,\n trigger,\n placement: isBreakpointMenuIndicator ? 'bottom-start' : 'bottom',\n });\n }\n\n /**\n * Creates a dropdown containing breadcrumb menu items.\n * @param {object} options Configuration for the dropdown shell.\n * @param {Array<HTMLElement>} options.breadcrumbs Breadcrumb elements to mirror in the menu.\n * @param {HTMLElement} options.trigger Element assigned to the dropdown trigger slot.\n * @param {string} options.placement Floating UI placement token for the popup.\n * @returns {HTMLElement}\n */\n createBreadcrumbDropdown({ breadcrumbs, trigger, placement = 'bottom' }) {\n const dropdown = document.createElement('wje-dropdown');\n dropdown.setAttribute('placement', placement);\n dropdown.setAttribute('offset', '10');\n\n const menu = this.createCollapsedBreadcrumbMenu(breadcrumbs);\n\n dropdown.append(trigger, menu);\n\n return dropdown;\n }\n\n /**\n * Creates the menu used by collapsed dropdown variants.\n * @param {Array<HTMLElement>} breadcrumbs Breadcrumb items represented by menu items.\n * @returns {HTMLElement}\n */\n createCollapsedBreadcrumbMenu(breadcrumbs) {\n const menu = document.createElement('wje-menu');\n menu.setAttribute('variant', 'context');\n menu.style.setProperty('--wje-menu-item-justify-content', 'flex-start');\n\n menu.addEventListener('click', (e) => {\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n });\n\n breadcrumbs.forEach((breadcrumb) => {\n const menuItem = document.createElement('wje-menu-item');\n this.populateCollapsedMenuItem(menuItem, breadcrumb);\n\n menuItem.__breadcrumb = breadcrumb;\n\n menuItem.addEventListener('wje-menu-item:click', (e) => {\n e.preventDefault?.();\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n\n this.forwardBreadcrumbClick(e.currentTarget.__breadcrumb);\n });\n\n menu.append(menuItem);\n });\n\n return menu;\n }\n\n /**\n * Returns breadcrumbs that should be exposed in a collapsed menu.\n * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.\n * @returns {Array<HTMLElement>}\n */\n getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator) {\n const breadcrumbs = this.getBreadcrumbs();\n\n if (isBreakpointMenuIndicator) {\n return breadcrumbs?.getBreadcrumbs?.() || [];\n }\n\n return breadcrumbs?.getBreadcrumbsCollapsed?.() || [];\n }\n\n /**\n * Renders one of the compact mobile breakpoint variants.\n * @param {string} variant Normalized uppercase variant token.\n * @returns {HTMLElement}\n */\n collapseMobileVariant(variant) {\n if (variant === 'TEXT') return this.collapseMobileText();\n if (variant === 'BACK') return this.collapseMobileBack();\n if (variant === 'PARENT-TITLE') return this.collapseMobileParentTitle();\n if (variant === 'MENU-TITLE') return this.collapseMobileMenuTitle();\n if (variant === 'SHEET') return this.collapseMobileSheet();\n\n return this.collapseButton();\n }\n\n /**\n * Renders only the current breadcrumb title.\n * @returns {HTMLElement}\n */\n collapseMobileText() {\n const current = this.getCurrentBreadcrumb();\n const container = this.createMobileContainer('breadcrumb-mobile--text');\n const title = this.createMobileBreadcrumbControl(current, 'breadcrumb-mobile__title', {\n ariaCurrent: true,\n actionable: this.isBreadcrumbActionable(current),\n });\n\n container.append(title);\n\n return container;\n }\n\n /**\n * Renders a parent back action above the current title.\n * @returns {HTMLElement}\n */\n collapseMobileBack() {\n const current = this.getCurrentBreadcrumb();\n const parent = this.getParentBreadcrumb();\n const container = this.createMobileContainer('breadcrumb-mobile--back');\n\n if (parent) {\n const back = this.createMobileBreadcrumbControl(parent, 'breadcrumb-mobile__back', {\n ariaLabel: 'Go to parent',\n icon: 'arrow-left',\n actionable: this.isBreadcrumbActionable(parent),\n });\n container.append(back);\n }\n\n const title = this.createMobileBreadcrumbControl(current, 'breadcrumb-mobile__title', {\n ariaCurrent: true,\n actionable: false,\n });\n container.append(title);\n\n return container;\n }\n\n /**\n * Renders parent context above the current title.\n * @returns {HTMLElement}\n */\n collapseMobileParentTitle() {\n const current = this.getCurrentBreadcrumb();\n const parent = this.getParentBreadcrumb();\n const container = this.createMobileContainer('breadcrumb-mobile--parent-title');\n\n if (parent) {\n const parentControl = this.createMobileBreadcrumbControl(parent, 'breadcrumb-mobile__parent', {\n actionable: this.isBreadcrumbActionable(parent),\n });\n container.append(parentControl);\n }\n\n const title = this.createMobileBreadcrumbControl(current, 'breadcrumb-mobile__title', {\n ariaCurrent: true,\n actionable: false,\n });\n container.append(title);\n\n return container;\n }\n\n /**\n * Renders a menu trigger with the current title.\n * @returns {HTMLElement}\n */\n collapseMobileMenuTitle() {\n const trigger = this.createMobileDropdownTrigger({\n icon: 'dots',\n label: this.getBreadcrumbLabel(this.getCurrentBreadcrumb()),\n ariaLabel: 'Show breadcrumb menu',\n className: 'breadcrumb-mobile--menu-title',\n });\n\n return this.createMobileDropdown(trigger);\n }\n\n /**\n * Renders the future sheet variant using the dropdown fallback for now.\n * @returns {HTMLElement}\n */\n collapseMobileSheet() {\n const trigger = this.createMobileDropdownTrigger({\n icon: 'chevron-down',\n iconPosition: 'end',\n label: this.getBreadcrumbLabel(this.getCurrentBreadcrumb()),\n ariaLabel: 'Show breadcrumb path',\n className: 'breadcrumb-mobile--sheet',\n });\n\n return this.createMobileDropdown(trigger);\n }\n\n /**\n * Creates a dropdown fallback for mobile menu-like variants.\n * @param {HTMLElement} trigger Element that opens the fallback dropdown.\n * @returns {HTMLElement}\n */\n createMobileDropdown(trigger) {\n const dropdown = this.createBreadcrumbDropdown({\n breadcrumbs: this.getTrailBreadcrumbs(),\n trigger,\n placement: 'bottom-start',\n });\n\n dropdown.classList.add('breadcrumb-mobile-dropdown');\n\n return dropdown;\n }\n\n /**\n * Creates a compact mobile dropdown trigger.\n * @param {object} options Visual settings for the compact trigger.\n * @param {string} options.icon Icon shown next to the title.\n * @param {string} options.iconPosition Whether the icon renders at the start or end.\n * @param {string} options.label Current breadcrumb label shown beside the icon.\n * @param {string} options.ariaLabel Accessible name for the dropdown trigger.\n * @param {string} options.className Variant-specific class applied to the trigger.\n * @returns {HTMLElement}\n */\n createMobileDropdownTrigger({ icon, iconPosition = 'start', label, ariaLabel, className }) {\n const trigger = document.createElement('wje-button');\n trigger.setAttribute('slot', 'trigger');\n trigger.setAttribute('fill', 'link');\n trigger.setAttribute('label', ariaLabel);\n trigger.classList.add('breadcrumb-mobile', 'breadcrumb-mobile__menu', className);\n\n const iconElement = document.createElement('wje-icon');\n iconElement.setAttribute('name', icon);\n iconElement.setAttribute('slot', iconPosition === 'end' ? 'end' : 'start');\n iconElement.classList.add('breadcrumb-mobile__icon');\n\n const title = document.createElement('span');\n title.classList.add('breadcrumb-mobile__title');\n title.setAttribute('aria-current', 'page');\n title.textContent = label;\n if (label) title.setAttribute('title', label);\n\n if (iconPosition === 'end') {\n trigger.append(title, iconElement);\n } else {\n trigger.append(iconElement, title);\n }\n\n return trigger;\n }\n\n /**\n * Creates a wrapper for compact mobile breadcrumb variants.\n * @param {string} className Variant class.\n * @returns {HTMLElement}\n */\n createMobileContainer(className) {\n const container = document.createElement('div');\n container.classList.add('breadcrumb-mobile', className);\n\n return container;\n }\n\n /**\n * Creates a text or button control for a breadcrumb.\n * @param {HTMLElement|null} breadcrumb Source breadcrumb.\n * @param {string} className Class applied to the created control.\n * @param {object} options Behavior and accessibility settings for the control.\n * @param {boolean} options.actionable Whether clicks should forward to the source breadcrumb.\n * @param {boolean} options.ariaCurrent Whether the control marks the current page.\n * @param {string} options.ariaLabel Accessible name for action controls.\n * @param {string} options.icon Optional icon shown before the label.\n * @returns {HTMLElement}\n */\n createMobileBreadcrumbControl(breadcrumb, className, { actionable = false, ariaCurrent = false, ariaLabel, icon } = {}) {\n const label = this.getBreadcrumbLabel(breadcrumb);\n const control = document.createElement(actionable ? 'button' : 'span');\n\n control.classList.add(className);\n if (actionable) {\n control.setAttribute('type', 'button');\n control.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n this.forwardBreadcrumbClick(breadcrumb);\n });\n }\n\n if (ariaCurrent) control.setAttribute('aria-current', 'page');\n if (ariaLabel && actionable) control.setAttribute('aria-label', ariaLabel);\n if (label) control.setAttribute('title', label);\n\n if (icon) {\n const iconElement = document.createElement('wje-icon');\n iconElement.setAttribute('name', icon);\n iconElement.classList.add('breadcrumb-mobile__icon');\n control.append(iconElement);\n }\n\n const text = document.createElement('span');\n text.classList.add('breadcrumb-mobile__label');\n text.textContent = label;\n control.append(text);\n\n return control;\n }\n\n /**\n * Returns the full trail of sibling breadcrumbs.\n * @returns {Array<HTMLElement>}\n */\n getTrailBreadcrumbs() {\n return this.getBreadcrumbs()?.getBreadcrumbs?.() || [];\n }\n\n /**\n * Returns the current breadcrumb item.\n * @returns {HTMLElement|null}\n */\n getCurrentBreadcrumb() {\n const breadcrumbs = this.getTrailBreadcrumbs();\n\n return breadcrumbs[breadcrumbs.length - 1] || null;\n }\n\n /**\n * Returns the parent breadcrumb item.\n * @returns {HTMLElement|null}\n */\n getParentBreadcrumb() {\n const breadcrumbs = this.getTrailBreadcrumbs();\n\n return breadcrumbs.length > 1 ? breadcrumbs[breadcrumbs.length - 2] : null;\n }\n\n /**\n * Returns whether a breadcrumb has a known action to forward.\n * @param {HTMLElement|null} breadcrumb Breadcrumb to inspect.\n * @returns {boolean}\n */\n isBreadcrumbActionable(breadcrumb) {\n if (!breadcrumb || breadcrumb.disabled || breadcrumb.hasAttribute?.('disabled')) return false;\n\n return Boolean(\n breadcrumb.hasAttribute?.('href') ||\n breadcrumb.hasAttribute?.('onclick') ||\n breadcrumb.__wjeBreadcrumbManaged ||\n breadcrumb.hasAttribute?.('data-wje-breadcrumbs-item')\n );\n }\n\n /**\n * Forwards a compact control or menu item click to the original breadcrumb.\n * @param {HTMLElement|null} breadcrumb Source breadcrumb.\n */\n forwardBreadcrumbClick(breadcrumb) {\n if (!breadcrumb) return;\n\n const native = breadcrumb.native || breadcrumb.context?.querySelector('a.native-breadcrumb');\n if (native && typeof native.click === 'function') {\n native.click();\n } else if (typeof breadcrumb.click === 'function') {\n breadcrumb.click();\n } else {\n breadcrumb.dispatchEvent(\n new MouseEvent('click', {\n bubbles: true,\n composed: true,\n cancelable: true\n })\n );\n }\n }\n\n /**\n * Creates the dropdown trigger for collapsed breadcrumbs.\n * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.\n * @returns {HTMLElement}\n */\n createCollapsedDropdownTrigger(isBreakpointMenuIndicator) {\n if (isBreakpointMenuIndicator) {\n const customTrigger = this.getBreadcrumbs()?.getBreakpointCollapseTrigger?.();\n\n if (customTrigger) {\n const trigger = customTrigger.cloneNode(true);\n trigger.setAttribute('slot', 'trigger');\n\n if (trigger.localName === 'wje-button') {\n if (!trigger.hasAttribute('label') && !trigger.hasAttribute('aria-label')) {\n trigger.setAttribute('label', 'Show breadcrumb menu');\n }\n } else if (!trigger.hasAttribute('aria-label')) {\n trigger.setAttribute('aria-label', 'Show breadcrumb menu');\n }\n\n return trigger;\n }\n }\n\n let button = document.createElement('wje-button');\n button.setAttribute('slot', 'trigger');\n button.setAttribute('fill', 'link');\n button.setAttribute('label', 'Show more breadcrumbs');\n button.innerHTML = `<wje-icon name=\"${this.getCollapsedDropdownIcon(isBreakpointMenuIndicator)}\"></wje-icon>`;\n\n return button;\n }\n\n /**\n * Resolves the icon used by the default dropdown trigger.\n * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.\n * @returns {string}\n */\n getCollapsedDropdownIcon(isBreakpointMenuIndicator) {\n if (!isBreakpointMenuIndicator) return 'dots';\n\n return this.getBreadcrumbs()?.breakpointCollapseIcon || 'menu';\n }\n\n /**\n * Copies breadcrumb content into a collapsed menu item.\n * @param {HTMLElement} menuItem Menu item receiving the content.\n * @param {HTMLElement} breadcrumb Source breadcrumb.\n */\n populateCollapsedMenuItem(menuItem, breadcrumb) {\n const nodes = Array.from(breadcrumb.childNodes).map((node) => node.cloneNode(true));\n\n menuItem.replaceChildren(...nodes);\n\n if (menuItem.textContent.trim()) return;\n\n const label = this.getBreadcrumbLabel(breadcrumb);\n\n if (label) {\n menuItem.append(document.createTextNode(label));\n }\n }\n\n /**\n * Resolves a readable label for a breadcrumb item.\n * @param {HTMLElement|null} breadcrumb Source breadcrumb.\n * @returns {string}\n */\n getBreadcrumbLabel(breadcrumb) {\n if (!breadcrumb) return '';\n\n return this.getCollapsedMenuItemLabel(breadcrumb);\n }\n\n /**\n * Resolves a readable label for icon-only collapsed menu items.\n * @param {HTMLElement} breadcrumb Source breadcrumb.\n * @returns {string}\n */\n getCollapsedMenuItemLabel(breadcrumb) {\n const explicitLabel = breadcrumb.getAttribute('aria-label') || breadcrumb.getAttribute('title');\n\n if (explicitLabel?.trim()) return explicitLabel.trim();\n\n const text = breadcrumb.textContent.trim();\n\n if (text) return text;\n\n const iconName = breadcrumb.querySelector('wje-icon[slot=\"start\"]')?.getAttribute('name');\n\n if (iconName === 'home') return 'Home';\n\n const href = breadcrumb.getAttribute('href');\n const path = href?.split(/[?#]/)[0] || '';\n const segment = path.split('/').filter(Boolean).pop();\n\n return segment ? this.humanizeCollapsedMenuItemLabel(segment) : '';\n }\n\n /**\n * Turns a URL segment into a readable menu label.\n * @param {string} value URL segment.\n * @returns {string}\n */\n humanizeCollapsedMenuItemLabel(value) {\n return decodeURIComponent(value)\n .replace(/[-_]+/g, ' ')\n .replace(/\\b\\w/g, (letter) => letter.toUpperCase());\n }\n\n /**\n * Returns whether this collapsed indicator represents the full breakpoint menu.\n * @returns {boolean}\n */\n isBreakpointMenuIndicator() {\n const breadcrumbs = this.parentElement;\n\n return (\n this.hasAttribute('show-collapsed-indicator') &&\n this.hasAttribute('collapsed') &&\n breadcrumbs?.isBreakpointMenuCollapseActive?.()\n );\n }\n\n /**\n * Creates a button element that expands hidden breadcrumbs when clicked.\n * The button is set with appropriate attributes and event listeners to handle\n * the expanding of hidden breadcrumb elements. Clicking the button will remove\n * the button itself, reveal hidden breadcrumbs, and stop the current event\n * propagation.\n * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.\n */\n collapseButton() {\n let button = document.createElement('button');\n button.setAttribute('aria-label', 'Show more breadcrumbs');\n button.setAttribute('part', 'collapsed-indicator');\n button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n event.addListener(button, 'click', null, (e) => {\n this.native.classList.remove('hidden');\n button.remove();\n this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {\n el.classList.remove('collapsed');\n });\n e.stopPropagation();\n });\n\n return button;\n }\n\n /**\n * Retrieves the breadcrumb trail for the current element by returning its parent element.\n * @returns {Element} The parent element representing the breadcrumb trail.\n */\n getBreadcrumbs() {\n return this.parentElement;\n }\n}\n","import Breadcrumb from './breadcrumb.element.js';\nimport '../wje-button/button.js';\nimport '../wje-dropdown/dropdown.js';\nimport '../wje-icon/icon.js';\nimport '../wje-menu/menu.js';\nimport '../wje-menu-item/menu-item.js';\nimport '../wje-popup/popup.js';\nimport '../wje-tooltip/tooltip.js';\n\n// export * from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-chip.js
CHANGED
|
@@ -137,7 +137,7 @@ class Chip extends WJElement {
|
|
|
137
137
|
remove.setAttribute("part", "remove");
|
|
138
138
|
remove.setAttribute("fill", "link");
|
|
139
139
|
remove.setAttribute("color", this.color || "default");
|
|
140
|
-
remove.setAttribute("
|
|
140
|
+
remove.setAttribute("label", "Remove");
|
|
141
141
|
remove.round = !this.round;
|
|
142
142
|
if (this.hasAttribute("size")) {
|
|
143
143
|
if (this.size === "small") {
|
package/dist/wje-chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot start - The chip leading content.\n * @slot - The chip main content.\n * @slot end - The chip trailing content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n /**\n * Chip constructor method.\n */\n constructor() {\n super();\n }\n\n /**\n * Sets or removes the \"round\" attribute on the element based on the provided value.\n * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n * If true, the \"round\" attribute is added. If false, the \"round\"\n * attribute is removed.\n */\n set round(value) {\n if (value) {\n this.setAttribute('round', '');\n } else {\n this.removeAttribute('round');\n }\n }\n\n /**\n * Checks if the 'round' attribute is present on the element.\n * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n */\n get round() {\n return this.hasAttribute('round');\n }\n\n /**\n * Sets the size attribute of the element.\n * @param {string} value The value to set for the size attribute.\n */\n set size(value) {\n this.setAttribute('size', value);\n }\n\n /**\n * Retrieves the 'size' attribute of the current element.\n * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n */\n get size() {\n return this.getAttribute('size');\n }\n\n /**\n * Sets or removes the \"removable\" attribute on the element.\n * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n * If true, the \"removable\" attribute is added;\n * if false, the \"removable\" attribute is removed.\n */\n set removable(value) {\n if (value) {\n this.setAttribute('removable', '');\n } else {\n this.removeAttribute('removable');\n }\n }\n\n /**\n * Determines if the element has the 'removable' attribute.\n * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n */\n get removable() {\n return this.hasAttribute('removable');\n }\n\n /**\n * Sets the disabled state of the element.\n * If true, the 'disabled' attribute is added to the element.\n * If false, the 'disabled' attribute is removed from the element.\n * @param {boolean} value Specifies whether the element should be disabled.\n */\n set disabled(value) {\n if (value) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Determines if the element has the 'disabled' attribute.\n * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Class name for the Chip element.\n * @type {string}\n */\n className = 'Chip';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n static get observedAttributes() {\n return ['removable', 'disabled', 'label'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (name === 'removable' || name === 'disabled' || name === 'label') {\n this.syncAria();\n }\n }\n\n /**\n * Draws the Chip element.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-chip');\n\n let slotStart = document.createElement('slot');\n slotStart.setAttribute('name', 'start');\n\n let content = document.createElement('span');\n content.setAttribute('part', 'content');\n content.classList.add('content');\n\n let slot = document.createElement('slot');\n content.appendChild(slot);\n\n let slotEnd = document.createElement('slot');\n slotEnd.setAttribute('name', 'end');\n\n let remove = document.createElement('wje-button');\n remove.setAttribute('part', 'remove');\n remove.setAttribute('fill', 'link');\n remove.setAttribute('color', this.color || 'default');\n remove.setAttribute('aria-label', 'Remove');\n remove.round = !this.round;\n\n if(this.hasAttribute('size')) {\n if(this.size === 'small') {\n remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n } else if (this.size === 'large') {\n remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n }\n } else {\n remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n }\n\n let active = document.createElement('wje-icon');\n active.setAttribute('name', 'check');\n active.classList.add('check');\n\n // Add color\n if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n else native.classList.add('wje-color-default', 'wje-color');\n\n if (this.disabled) this.classList.add('wje-disabled');\n\n if (this.outline) this.classList.add('wje-outline');\n\n native.appendChild(slotStart);\n native.appendChild(content);\n native.appendChild(slotEnd);\n native.appendChild(active);\n\n if (this.removable) native.appendChild(remove);\n\n fragment.appendChild(native);\n\n this.removeElement = remove;\n this.slotStart = slotStart;\n this.slotEnd = slotEnd;\n\n return fragment;\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const label = this.getAttribute('label')?.trim();\n if (label) this.setAriaState({ label });\n if (this.removable) this.setAriaState({ role: 'button', disabled: this.disabled });\n else this.setAriaState({ role: 'status' });\n }\n\n /**\n * Getter for the observed attributes.\n */\n afterDraw() {\n if (WjElementUtils.hasSlotContent(this.context, 'start')) this.slotStart.classList.add('has-content');\n if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\n event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n }\n\n /**\n * Before disconnect event for the Chip element.\n */\n beforeDisconnect() {\n event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot start - The chip leading content.\n * @slot - The chip main content.\n * @slot end - The chip trailing content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n /**\n * Chip constructor method.\n */\n constructor() {\n super();\n }\n\n /**\n * Sets or removes the \"round\" attribute on the element based on the provided value.\n * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n * If true, the \"round\" attribute is added. If false, the \"round\"\n * attribute is removed.\n */\n set round(value) {\n if (value) {\n this.setAttribute('round', '');\n } else {\n this.removeAttribute('round');\n }\n }\n\n /**\n * Checks if the 'round' attribute is present on the element.\n * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n */\n get round() {\n return this.hasAttribute('round');\n }\n\n /**\n * Sets the size attribute of the element.\n * @param {string} value The value to set for the size attribute.\n */\n set size(value) {\n this.setAttribute('size', value);\n }\n\n /**\n * Retrieves the 'size' attribute of the current element.\n * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n */\n get size() {\n return this.getAttribute('size');\n }\n\n /**\n * Sets or removes the \"removable\" attribute on the element.\n * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n * If true, the \"removable\" attribute is added;\n * if false, the \"removable\" attribute is removed.\n */\n set removable(value) {\n if (value) {\n this.setAttribute('removable', '');\n } else {\n this.removeAttribute('removable');\n }\n }\n\n /**\n * Determines if the element has the 'removable' attribute.\n * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n */\n get removable() {\n return this.hasAttribute('removable');\n }\n\n /**\n * Sets the disabled state of the element.\n * If true, the 'disabled' attribute is added to the element.\n * If false, the 'disabled' attribute is removed from the element.\n * @param {boolean} value Specifies whether the element should be disabled.\n */\n set disabled(value) {\n if (value) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Determines if the element has the 'disabled' attribute.\n * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Class name for the Chip element.\n * @type {string}\n */\n className = 'Chip';\n\n /**\n * Getter for the CSS stylesheet.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observed attributes.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n static get observedAttributes() {\n return ['removable', 'disabled', 'label'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (name === 'removable' || name === 'disabled' || name === 'label') {\n this.syncAria();\n }\n }\n\n /**\n * Draws the Chip element.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-chip');\n\n let slotStart = document.createElement('slot');\n slotStart.setAttribute('name', 'start');\n\n let content = document.createElement('span');\n content.setAttribute('part', 'content');\n content.classList.add('content');\n\n let slot = document.createElement('slot');\n content.appendChild(slot);\n\n let slotEnd = document.createElement('slot');\n slotEnd.setAttribute('name', 'end');\n\n let remove = document.createElement('wje-button');\n remove.setAttribute('part', 'remove');\n remove.setAttribute('fill', 'link');\n remove.setAttribute('color', this.color || 'default');\n remove.setAttribute('label', 'Remove');\n remove.round = !this.round;\n\n if(this.hasAttribute('size')) {\n if(this.size === 'small') {\n remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n } else if (this.size === 'large') {\n remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n }\n } else {\n remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n }\n\n let active = document.createElement('wje-icon');\n active.setAttribute('name', 'check');\n active.classList.add('check');\n\n // Add color\n if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n else native.classList.add('wje-color-default', 'wje-color');\n\n if (this.disabled) this.classList.add('wje-disabled');\n\n if (this.outline) this.classList.add('wje-outline');\n\n native.appendChild(slotStart);\n native.appendChild(content);\n native.appendChild(slotEnd);\n native.appendChild(active);\n\n if (this.removable) native.appendChild(remove);\n\n fragment.appendChild(native);\n\n this.removeElement = remove;\n this.slotStart = slotStart;\n this.slotEnd = slotEnd;\n\n return fragment;\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const label = this.getAttribute('label')?.trim();\n if (label) this.setAriaState({ label });\n if (this.removable) this.setAriaState({ role: 'button', disabled: this.disabled });\n else this.setAriaState({ role: 'status' });\n }\n\n /**\n * Getter for the observed attributes.\n */\n afterDraw() {\n if (WjElementUtils.hasSlotContent(this.context, 'start')) this.slotStart.classList.add('has-content');\n if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\n event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n }\n\n /**\n * Before disconnect event for the Chip element.\n */\n beforeDisconnect() {\n event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-dialog.js
CHANGED
|
@@ -478,7 +478,7 @@ const _Dialog = class _Dialog extends WJElement {
|
|
|
478
478
|
close.setAttribute("fill", "link");
|
|
479
479
|
close.setAttribute("size", "small");
|
|
480
480
|
close.setAttribute("part", "close");
|
|
481
|
-
close.setAttribute("
|
|
481
|
+
close.setAttribute("label", "Close dialog");
|
|
482
482
|
close.addEventListener("click", (e) => {
|
|
483
483
|
this.close(e);
|
|
484
484
|
});
|
package/dist/wje-dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n static _instanceId = 0;\n /**\n * @class\n */\n constructor() {\n super();\n this._instanceId = ++Dialog._instanceId;\n this._opening = false;\n }\n\n /**\n * Sets the value of the 'headline' attribute.\n * @param {string} value The new value for the 'headline' attribute.\n */\n set headline(value) {\n this.setAttribute('headline', value);\n }\n\n /**\n * Retrieves the value of the \"headline\" attribute from the element.\n * If the \"headline\" attribute is not present, returns an empty string.\n * @returns {string} The headline attribute value or an empty string if not set.\n */\n get headline() {\n return this.getAttribute('headline') || '';\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set placement(value) {\n this.setAttribute('placement', value);\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {string|string}\n */\n get placement() {\n return this.getAttribute('placement') || 'slide-up';\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set async(value) {\n this.setAttribute('async', '');\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {boolean}\n */\n get async() {\n return this.hasAttribute('async');\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set closeHidden(value) {\n if (value) this.setAttribute('close-hidden', '');\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {boolean}\n */\n get closeHidden() {\n return !!this.hasAttribute('close-hidden');\n }\n\n set hiddenHeader(value) {\n if (value) this.setAttribute('hidden-header', '');\n }\n\n get hiddenHeader() {\n return !!this.hasAttribute('hidden-header');\n }\n\n set hiddenFooter(value) {\n if (value) this.setAttribute('hidden-footer', '');\n }\n\n get hiddenFooter() {\n return !!this.hasAttribute('hidden-footer');\n }\n\n /**\n * Sets the headline of the dialog.\n * @type {string}\n */\n className = 'Dialog';\n\n /**\n * Returns the CSS styles for the component.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @returns {*[]}\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.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n * @returns {DocumentFragment}\n */\n draw(context, store, params) {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('fade', this.placement, params.size);\n\n let dialog = document.createElement('dialog');\n dialog.setAttribute('part', 'dialog');\n dialog.classList.add('modal-dialog');\n dialog.addEventListener('close', this.onNativeDialogClose);\n\n fragment.appendChild(dialog);\n\n this.dialog = dialog;\n this.syncHostOpenState();\n\n return fragment;\n }\n\n /**\n * Draws the component after it has been drawn.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n */\n afterDraw(context, store, params) {\n if (params.trigger) {\n event.addListener(document, params.trigger, null, this.onOpen);\n }\n }\n\n /**\n * Creates the dialog body.\n * @param dialog\n */\n htmlDialogBody(dialog) {\n const dialogId = this.id || `wje-dialog-${this._instanceId}`;\n dialog.replaceChildren();\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'x');\n icon.setAttribute('slot', 'icon-only');\n\n let close = document.createElement('wje-button');\n close.setAttribute('fill', 'link');\n close.setAttribute('size', 'small');\n close.setAttribute('part', 'close');\n close.setAttribute('aria-label', 'Close dialog');\n close.addEventListener('click', (e) => {\n this.close(e);\n });\n\n let header = document.createElement('div');\n header.setAttribute('part', 'header');\n header.classList.add('dialog-header');\n header.id = `${dialogId}-header`;\n if (this.hasAttribute('headline'))\n header.innerHTML = `<span part=\"headline\">${this.headline}</span>`;\n\n let slotHeader = document.createElement('slot');\n slotHeader.setAttribute('name', 'header');\n\n const headerActions = document.createElement('div');\n headerActions.classList.add('header-actions');\n headerActions.setAttribute('part', 'header-actions');\n headerActions.appendChild(slotHeader);\n\n let contentSlot = document.createElement('slot');\n\n let body = document.createElement('div');\n body.setAttribute('part', 'body');\n body.classList.add('dialog-content');\n body.id = `${dialogId}-body`;\n\n let footer = document.createElement('div');\n footer.setAttribute('part', 'footer');\n footer.classList.add('dialog-footer');\n footer.innerHTML = '';\n\n let slotFooter = document.createElement('slot');\n slotFooter.setAttribute('name', 'footer');\n slotFooter.id = 'footerSlot';\n slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\n\n close.appendChild(icon);\n\n if (!this.closeHidden) header.appendChild(close);\n\n header.appendChild(headerActions);\n body.appendChild(contentSlot);\n footer.appendChild(slotFooter);\n\n if (!this.hiddenHeader) dialog.appendChild(header);\n dialog.appendChild(body);\n if (!this.hiddenFooter) dialog.appendChild(footer);\n\n dialog.setAttribute('role', 'dialog');\n dialog.setAttribute('aria-describedby', body.id);\n if (!this.hiddenHeader) {\n dialog.setAttribute('aria-labelledby', header.id);\n dialog.removeAttribute('aria-label');\n } else {\n dialog.removeAttribute('aria-labelledby');\n if (this.headline) {\n dialog.setAttribute('aria-label', this.headline);\n } else {\n dialog.removeAttribute('aria-label');\n }\n }\n\n Promise.resolve().then(() => this.updateHasFooter());\n }\n\n /**\n * Closes the dialog.\n * @param e\n */\n close(e) {\n this.onClose(e);\n }\n\n /**\n * Before the component is disconnected.\n */\n beforeDisconnect() {\n if (this.params?.trigger) {\n event.removeListener(document, this.params?.trigger, null, this.onOpen);\n }\n\n this.dialog?.removeEventListener('close', this.onNativeDialogClose);\n }\n\n /**\n * Before the dialog opens.\n */\n beforeOpen(dialog, trigger) {\n // Hook for extending behavior before the dialog opens\n }\n\n /**\n * After the dialog opens.\n */\n afterOpen(dialog, trigger) {\n // Hook for extending behavior after the dialog opens\n }\n\n /**\n * Before the dialog closes.\n */\n beforeClose(dialog, trigger) {\n // Hook for extending behavior before the dialog closes\n }\n\n /**\n * After the dialog closes.\n */\n afterClose(dialog, trigger) {\n // Hook for extending behavior after the dialog closes\n }\n\n /**\n * Opens the dialog.\n * @param e\n */\n onOpen = (e) => {\n if (!this.dialog || this.dialog.open || this._opening) return;\n this._opening = true;\n\n setTimeout(() => {\n Promise.resolve().then(() => this.beforeOpen(this, e)).then(() => {\n if (!this.dialog || this.dialog.open) return;\n this.dialog.replaceChildren();\n this.htmlDialogBody(this.dialog);\n\n this.dialog.showModal(); // Now open the dialog\n this.syncHostOpenState();\n this.dialog.setAttribute('aria-modal', 'true');\n\n if (this.dialog.open) {\n Promise.resolve(this.afterOpen(this, e));\n }\n }).catch((err) => {\n console.error(err);\n }).finally(() => {\n this._opening = false;\n });\n }, 0);\n }\n\n /**\n * Closes the dialog.\n * @param {object} e\n */\n onClose = (e) => {\n Promise.resolve(this.beforeClose(this, e)).then((res) => {\n if (!this.dialog || typeof this.dialog.close !== 'function') return;\n\n if (this.dialog.open) {\n this.dialog.close(); // Now close the dialog\n }\n this.dialog.removeAttribute('aria-modal');\n this.syncHostOpenState();\n\n if (!this.dialog.open) {\n Promise.resolve(this.afterClose(this, e));\n }\n });\n };\n\n onNativeDialogClose = () => {\n this.dialog?.removeAttribute('aria-modal');\n this.removeAttribute('open');\n };\n\n syncHostOpenState = () => {\n this.toggleAttribute('open', !!this.dialog?.open);\n };\n\n /**\n * Registers an event listener on the provided button that triggers a blocking UI element\n * and executes a given promise when the button is clicked.\n * @param {HTMLElement} button The button element to attach the event listener to.\n * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n */\n registerBlockingEvent(button, promise) {\n button.addEventListener('wje-button:click', async (e) => {\n let blockingElement = document.createElement('div');\n blockingElement.classList.add('blocking-element');\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'loader-2');\n icon.setAttribute('size', '2x-large');\n\n blockingElement.appendChild(icon);\n\n let scrollOffset = this.dialog.scrollTop;\n blockingElement.style.top = `${scrollOffset}px`;\n blockingElement.style.bottom = `-${scrollOffset}px`;\n\n this.dialog.appendChild(blockingElement);\n\n await promise()\n .then((res) => {\n this.close();\n blockingElement.remove();\n })\n .catch((err) => {\n console.error(err);\n blockingElement.remove();\n });\n });\n }\n\n updateHasFooter() {\n // If footer is intentionally hidden, ensure it doesn't reserve space\n if (this.hiddenFooter) {\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.setAttribute('hidden', '');\n this.removeAttribute('has-footer');\n return;\n }\n const slot = this.shadowRoot?.getElementById('footerSlot');\n if (!slot) {\n this.removeAttribute('has-footer');\n return;\n }\n\n const assigned = slot.assignedNodes({ flatten: true });\n const hasContent = assigned.some((n) => {\n if (n.nodeType === Node.ELEMENT_NODE) return true;\n if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n return false;\n });\n\n // Prefer toggling the actual footer element so CSS/spacing is always correct\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n // Keep host attribute too (harmless, may be used elsewhere)\n this.toggleAttribute('has-footer', hasContent);\n }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Be,MAAM,UAAN,MAAM,gBAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAK1C,cAAc;AACV,UAAK;AA0FT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAmMZ;AAAA;AAAA;AAAA;AAAA,kCAAS,CAAC,MAAM;AACZ,UAAI,CAAC,KAAK,UAAU,KAAK,OAAO,QAAQ,KAAK,SAAU;AACvD,WAAK,WAAW;AAEhB,iBAAW,MAAM;AACb,gBAAQ,QAAO,EAAG,KAAK,MAAM,KAAK,WAAW,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM;AAC9D,cAAI,CAAC,KAAK,UAAU,KAAK,OAAO,KAAM;AACtC,eAAK,OAAO,gBAAe;AAC3B,eAAK,eAAe,KAAK,MAAM;AAE/B,eAAK,OAAO;AACZ,eAAK,kBAAiB;AACtB,eAAK,OAAO,aAAa,cAAc,MAAM;AAE7C,cAAI,KAAK,OAAO,MAAM;AAClB,oBAAQ,QAAQ,KAAK,UAAU,MAAM,CAAC,CAAC;AAAA,UAC3C;AAAA,QACJ,CAAC,EAAE,MAAM,CAAC,QAAQ;AACd,kBAAQ,MAAM,GAAG;AAAA,QACrB,CAAC,EAAE,QAAQ,MAAM;AACb,eAAK,WAAW;AAAA,QACpB,CAAC;AAAA,MACL,GAAG,CAAC;AAAA,IACR;AAMA;AAAA;AAAA;AAAA;AAAA,mCAAU,CAAC,MAAM;AACb,cAAQ,QAAQ,KAAK,YAAY,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ;AACrD,YAAI,CAAC,KAAK,UAAU,OAAO,KAAK,OAAO,UAAU,WAAY;AAE7D,YAAI,KAAK,OAAO,MAAM;AAClB,eAAK,OAAO;QAChB;AACA,aAAK,OAAO,gBAAgB,YAAY;AACxC,aAAK,kBAAiB;AAEtB,YAAI,CAAC,KAAK,OAAO,MAAM;AACnB,kBAAQ,QAAQ,KAAK,WAAW,MAAM,CAAC,CAAC;AAAA,QAC5C;AAAA,MACJ,CAAC;AAAA,IACL;AAEA,+CAAsB,MAAM;;AACxB,iBAAK,WAAL,mBAAa,gBAAgB;AAC7B,WAAK,gBAAgB,MAAM;AAAA,IAC/B;AAEA,6CAAoB,MAAM;;AACtB,WAAK,gBAAgB,QAAQ,CAAC,GAAC,UAAK,WAAL,mBAAa,KAAI;AAAA,IACpD;AAhVI,SAAK,cAAc,EAAE,QAAO;AAC5B,SAAK,WAAW;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,aAAa,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,EAAE;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,YAAY,OAAO;AACnB,QAAI,MAAO,MAAK,aAAa,gBAAgB,EAAE;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,cAAc;AACd,WAAO,CAAC,CAAC,KAAK,aAAa,cAAc;AAAA,EAC7C;AAAA,EAEA,IAAI,aAAa,OAAO;AACpB,QAAI,MAAO,MAAK,aAAa,iBAAiB,EAAE;AAAA,EACpD;AAAA,EAEA,IAAI,eAAe;AACf,WAAO,CAAC,CAAC,KAAK,aAAa,eAAe;AAAA,EAC9C;AAAA,EAEA,IAAI,aAAa,OAAO;AACpB,QAAI,MAAO,MAAK,aAAa,iBAAiB,EAAE;AAAA,EACpD;AAAA,EAEA,IAAI,eAAe;AACf,WAAO,CAAC,CAAC,KAAK,aAAa,eAAe;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,KAAK,SAAS,OAAO,QAAQ;AACzB,QAAI,WAAW,SAAS,uBAAsB;AAE9C,SAAK,UAAU,IAAI,QAAQ,KAAK,WAAW,OAAO,IAAI;AAEtD,QAAI,SAAS,SAAS,cAAc,QAAQ;AAC5C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,cAAc;AACnC,WAAO,iBAAiB,SAAS,KAAK,mBAAmB;AAEzD,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AACd,SAAK,kBAAiB;AAEtB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,UAAU,SAAS,OAAO,QAAQ;AAC9B,QAAI,OAAO,SAAS;AAChB,YAAM,YAAY,UAAU,OAAO,SAAS,MAAM,KAAK,MAAM;AAAA,IACjE;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAe,QAAQ;AACnB,UAAM,WAAW,KAAK,MAAM,cAAc,KAAK,WAAW;AAC1D,WAAO,gBAAe;AAEtB,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,GAAG;AAC7B,SAAK,aAAa,QAAQ,WAAW;AAErC,QAAI,QAAQ,SAAS,cAAc,YAAY;AAC/C,UAAM,aAAa,QAAQ,MAAM;AACjC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,cAAc,cAAc;AAC/C,UAAM,iBAAiB,SAAS,CAAC,MAAM;AACnC,WAAK,MAAM,CAAC;AAAA,IAChB,CAAC;AAED,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AACpC,WAAO,KAAK,GAAG,QAAQ;AACvB,QAAI,KAAK,aAAa,UAAU;AAC5B,aAAO,YAAY,yBAAyB,KAAK,QAAQ;AAE7D,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,aAAa,QAAQ,QAAQ;AAExC,UAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,kBAAc,UAAU,IAAI,gBAAgB;AAC5C,kBAAc,aAAa,QAAQ,gBAAgB;AACnD,kBAAc,YAAY,UAAU;AAEpC,QAAI,cAAc,SAAS,cAAc,MAAM;AAE/C,QAAI,OAAO,SAAS,cAAc,KAAK;AACvC,SAAK,aAAa,QAAQ,MAAM;AAChC,SAAK,UAAU,IAAI,gBAAgB;AACnC,SAAK,KAAK,GAAG,QAAQ;AAErB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AACpC,WAAO,YAAY;AAEnB,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,aAAa,QAAQ,QAAQ;AACxC,eAAW,KAAK;AAChB,eAAW,iBAAiB,cAAc,MAAM,KAAK,gBAAe,CAAE;AAEtE,UAAM,YAAY,IAAI;AAEtB,QAAI,CAAC,KAAK,YAAa,QAAO,YAAY,KAAK;AAE/C,WAAO,YAAY,aAAa;AAChC,SAAK,YAAY,WAAW;AAC5B,WAAO,YAAY,UAAU;AAE7B,QAAI,CAAC,KAAK,aAAc,QAAO,YAAY,MAAM;AACjD,WAAO,YAAY,IAAI;AACvB,QAAI,CAAC,KAAK,aAAc,QAAO,YAAY,MAAM;AAEjD,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,oBAAoB,KAAK,EAAE;AAC/C,QAAI,CAAC,KAAK,cAAc;AACpB,aAAO,aAAa,mBAAmB,OAAO,EAAE;AAChD,aAAO,gBAAgB,YAAY;AAAA,IACvC,OAAO;AACH,aAAO,gBAAgB,iBAAiB;AACxC,UAAI,KAAK,UAAU;AACf,eAAO,aAAa,cAAc,KAAK,QAAQ;AAAA,MACnD,OAAO;AACH,eAAO,gBAAgB,YAAY;AAAA,MACvC;AAAA,IACJ;AAEA,YAAQ,QAAO,EAAG,KAAK,MAAM,KAAK,gBAAe,CAAE;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,GAAG;AACL,SAAK,QAAQ,CAAC;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;;AACf,SAAI,UAAK,WAAL,mBAAa,SAAS;AACtB,YAAM,eAAe,WAAU,UAAK,WAAL,mBAAa,SAAS,MAAM,KAAK,MAAM;AAAA,IAC1E;AAEA,eAAK,WAAL,mBAAa,oBAAoB,SAAS,KAAK;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW,QAAQ,SAAS;AAAA,EAE5B;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,QAAQ,SAAS;AAAA,EAE3B;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,QAAQ,SAAS;AAAA,EAE7B;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW,QAAQ,SAAS;AAAA,EAE5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkEA,sBAAsB,QAAQ,SAAS;AACnC,WAAO,iBAAiB,oBAAoB,OAAO,MAAM;AACrD,UAAI,kBAAkB,SAAS,cAAc,KAAK;AAClD,sBAAgB,UAAU,IAAI,kBAAkB;AAEhD,UAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,WAAK,aAAa,QAAQ,UAAU;AACpC,WAAK,aAAa,QAAQ,UAAU;AAEpC,sBAAgB,YAAY,IAAI;AAEhC,UAAI,eAAe,KAAK,OAAO;AAC/B,sBAAgB,MAAM,MAAM,GAAG,YAAY;AAC3C,sBAAgB,MAAM,SAAS,IAAI,YAAY;AAE/C,WAAK,OAAO,YAAY,eAAe;AAEvC,YAAM,QAAO,EACR,KAAK,CAAC,QAAQ;AACX,aAAK,MAAK;AACV,wBAAgB,OAAM;AAAA,MAC1B,CAAC,EACA,MAAM,CAAC,QAAQ;AACZ,gBAAQ,MAAM,GAAG;AACjB,wBAAgB,OAAM;AAAA,MAC1B,CAAC;AAAA,IACT,CAAC;AAAA,EACL;AAAA,EAEA,kBAAkB;;AAEd,QAAI,KAAK,cAAc;AACnB,YAAMA,aAAW,UAAK,eAAL,mBAAiB,cAAc;AAChD,UAAIA,UAAU,CAAAA,UAAS,aAAa,UAAU,EAAE;AAChD,WAAK,gBAAgB,YAAY;AACjC;AAAA,IACJ;AACA,UAAM,QAAO,UAAK,eAAL,mBAAiB,eAAe;AAC7C,QAAI,CAAC,MAAM;AACP,WAAK,gBAAgB,YAAY;AACjC;AAAA,IACJ;AAEA,UAAM,WAAW,KAAK,cAAc,EAAE,SAAS,KAAI,CAAE;AACrD,UAAM,aAAa,SAAS,KAAK,CAAC,MAAM;AACpC,UAAI,EAAE,aAAa,KAAK,aAAc,QAAO;AAC7C,UAAI,EAAE,aAAa,KAAK,UAAW,QAAO,EAAE,YAAY,OAAO,SAAS;AACxE,aAAO;AAAA,IACX,CAAC;AAGD,UAAM,YAAW,UAAK,eAAL,mBAAiB,cAAc;AAChD,QAAI,SAAU,UAAS,gBAAgB,UAAU,CAAC,UAAU;AAG5D,SAAK,gBAAgB,cAAc,UAAU;AAAA,EACjD;AACJ;AAvZI,cADiB,SACV,eAAc;AADV,IAAM,SAAN;ACvBf,OAAO,OAAO,cAAc,MAAM;"}
|
|
1
|
+
{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n static _instanceId = 0;\n /**\n * @class\n */\n constructor() {\n super();\n this._instanceId = ++Dialog._instanceId;\n this._opening = false;\n }\n\n /**\n * Sets the value of the 'headline' attribute.\n * @param {string} value The new value for the 'headline' attribute.\n */\n set headline(value) {\n this.setAttribute('headline', value);\n }\n\n /**\n * Retrieves the value of the \"headline\" attribute from the element.\n * If the \"headline\" attribute is not present, returns an empty string.\n * @returns {string} The headline attribute value or an empty string if not set.\n */\n get headline() {\n return this.getAttribute('headline') || '';\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set placement(value) {\n this.setAttribute('placement', value);\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {string|string}\n */\n get placement() {\n return this.getAttribute('placement') || 'slide-up';\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set async(value) {\n this.setAttribute('async', '');\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {boolean}\n */\n get async() {\n return this.hasAttribute('async');\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set closeHidden(value) {\n if (value) this.setAttribute('close-hidden', '');\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {boolean}\n */\n get closeHidden() {\n return !!this.hasAttribute('close-hidden');\n }\n\n set hiddenHeader(value) {\n if (value) this.setAttribute('hidden-header', '');\n }\n\n get hiddenHeader() {\n return !!this.hasAttribute('hidden-header');\n }\n\n set hiddenFooter(value) {\n if (value) this.setAttribute('hidden-footer', '');\n }\n\n get hiddenFooter() {\n return !!this.hasAttribute('hidden-footer');\n }\n\n /**\n * Sets the headline of the dialog.\n * @type {string}\n */\n className = 'Dialog';\n\n /**\n * Returns the CSS styles for the component.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @returns {*[]}\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.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n * @returns {DocumentFragment}\n */\n draw(context, store, params) {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('fade', this.placement, params.size);\n\n let dialog = document.createElement('dialog');\n dialog.setAttribute('part', 'dialog');\n dialog.classList.add('modal-dialog');\n dialog.addEventListener('close', this.onNativeDialogClose);\n\n fragment.appendChild(dialog);\n\n this.dialog = dialog;\n this.syncHostOpenState();\n\n return fragment;\n }\n\n /**\n * Draws the component after it has been drawn.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n */\n afterDraw(context, store, params) {\n if (params.trigger) {\n event.addListener(document, params.trigger, null, this.onOpen);\n }\n }\n\n /**\n * Creates the dialog body.\n * @param dialog\n */\n htmlDialogBody(dialog) {\n const dialogId = this.id || `wje-dialog-${this._instanceId}`;\n dialog.replaceChildren();\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'x');\n icon.setAttribute('slot', 'icon-only');\n\n let close = document.createElement('wje-button');\n close.setAttribute('fill', 'link');\n close.setAttribute('size', 'small');\n close.setAttribute('part', 'close');\n close.setAttribute('label', 'Close dialog');\n close.addEventListener('click', (e) => {\n this.close(e);\n });\n\n let header = document.createElement('div');\n header.setAttribute('part', 'header');\n header.classList.add('dialog-header');\n header.id = `${dialogId}-header`;\n if (this.hasAttribute('headline'))\n header.innerHTML = `<span part=\"headline\">${this.headline}</span>`;\n\n let slotHeader = document.createElement('slot');\n slotHeader.setAttribute('name', 'header');\n\n const headerActions = document.createElement('div');\n headerActions.classList.add('header-actions');\n headerActions.setAttribute('part', 'header-actions');\n headerActions.appendChild(slotHeader);\n\n let contentSlot = document.createElement('slot');\n\n let body = document.createElement('div');\n body.setAttribute('part', 'body');\n body.classList.add('dialog-content');\n body.id = `${dialogId}-body`;\n\n let footer = document.createElement('div');\n footer.setAttribute('part', 'footer');\n footer.classList.add('dialog-footer');\n footer.innerHTML = '';\n\n let slotFooter = document.createElement('slot');\n slotFooter.setAttribute('name', 'footer');\n slotFooter.id = 'footerSlot';\n slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\n\n close.appendChild(icon);\n\n if (!this.closeHidden) header.appendChild(close);\n\n header.appendChild(headerActions);\n body.appendChild(contentSlot);\n footer.appendChild(slotFooter);\n\n if (!this.hiddenHeader) dialog.appendChild(header);\n dialog.appendChild(body);\n if (!this.hiddenFooter) dialog.appendChild(footer);\n\n dialog.setAttribute('role', 'dialog');\n dialog.setAttribute('aria-describedby', body.id);\n if (!this.hiddenHeader) {\n dialog.setAttribute('aria-labelledby', header.id);\n dialog.removeAttribute('aria-label');\n } else {\n dialog.removeAttribute('aria-labelledby');\n if (this.headline) {\n dialog.setAttribute('aria-label', this.headline);\n } else {\n dialog.removeAttribute('aria-label');\n }\n }\n\n Promise.resolve().then(() => this.updateHasFooter());\n }\n\n /**\n * Closes the dialog.\n * @param e\n */\n close(e) {\n this.onClose(e);\n }\n\n /**\n * Before the component is disconnected.\n */\n beforeDisconnect() {\n if (this.params?.trigger) {\n event.removeListener(document, this.params?.trigger, null, this.onOpen);\n }\n\n this.dialog?.removeEventListener('close', this.onNativeDialogClose);\n }\n\n /**\n * Before the dialog opens.\n */\n beforeOpen(dialog, trigger) {\n // Hook for extending behavior before the dialog opens\n }\n\n /**\n * After the dialog opens.\n */\n afterOpen(dialog, trigger) {\n // Hook for extending behavior after the dialog opens\n }\n\n /**\n * Before the dialog closes.\n */\n beforeClose(dialog, trigger) {\n // Hook for extending behavior before the dialog closes\n }\n\n /**\n * After the dialog closes.\n */\n afterClose(dialog, trigger) {\n // Hook for extending behavior after the dialog closes\n }\n\n /**\n * Opens the dialog.\n * @param e\n */\n onOpen = (e) => {\n if (!this.dialog || this.dialog.open || this._opening) return;\n this._opening = true;\n\n setTimeout(() => {\n Promise.resolve().then(() => this.beforeOpen(this, e)).then(() => {\n if (!this.dialog || this.dialog.open) return;\n this.dialog.replaceChildren();\n this.htmlDialogBody(this.dialog);\n\n this.dialog.showModal(); // Now open the dialog\n this.syncHostOpenState();\n this.dialog.setAttribute('aria-modal', 'true');\n\n if (this.dialog.open) {\n Promise.resolve(this.afterOpen(this, e));\n }\n }).catch((err) => {\n console.error(err);\n }).finally(() => {\n this._opening = false;\n });\n }, 0);\n }\n\n /**\n * Closes the dialog.\n * @param {object} e\n */\n onClose = (e) => {\n Promise.resolve(this.beforeClose(this, e)).then((res) => {\n if (!this.dialog || typeof this.dialog.close !== 'function') return;\n\n if (this.dialog.open) {\n this.dialog.close(); // Now close the dialog\n }\n this.dialog.removeAttribute('aria-modal');\n this.syncHostOpenState();\n\n if (!this.dialog.open) {\n Promise.resolve(this.afterClose(this, e));\n }\n });\n };\n\n onNativeDialogClose = () => {\n this.dialog?.removeAttribute('aria-modal');\n this.removeAttribute('open');\n };\n\n syncHostOpenState = () => {\n this.toggleAttribute('open', !!this.dialog?.open);\n };\n\n /**\n * Registers an event listener on the provided button that triggers a blocking UI element\n * and executes a given promise when the button is clicked.\n * @param {HTMLElement} button The button element to attach the event listener to.\n * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n */\n registerBlockingEvent(button, promise) {\n button.addEventListener('wje-button:click', async (e) => {\n let blockingElement = document.createElement('div');\n blockingElement.classList.add('blocking-element');\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'loader-2');\n icon.setAttribute('size', '2x-large');\n\n blockingElement.appendChild(icon);\n\n let scrollOffset = this.dialog.scrollTop;\n blockingElement.style.top = `${scrollOffset}px`;\n blockingElement.style.bottom = `-${scrollOffset}px`;\n\n this.dialog.appendChild(blockingElement);\n\n await promise()\n .then((res) => {\n this.close();\n blockingElement.remove();\n })\n .catch((err) => {\n console.error(err);\n blockingElement.remove();\n });\n });\n }\n\n updateHasFooter() {\n // If footer is intentionally hidden, ensure it doesn't reserve space\n if (this.hiddenFooter) {\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.setAttribute('hidden', '');\n this.removeAttribute('has-footer');\n return;\n }\n const slot = this.shadowRoot?.getElementById('footerSlot');\n if (!slot) {\n this.removeAttribute('has-footer');\n return;\n }\n\n const assigned = slot.assignedNodes({ flatten: true });\n const hasContent = assigned.some((n) => {\n if (n.nodeType === Node.ELEMENT_NODE) return true;\n if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n return false;\n });\n\n // Prefer toggling the actual footer element so CSS/spacing is always correct\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n // Keep host attribute too (harmless, may be used elsewhere)\n this.toggleAttribute('has-footer', hasContent);\n }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"mappings":"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"}
|
|
@@ -182,9 +182,9 @@ class FileUploadItem extends WJElement {
|
|
|
182
182
|
if (nameText && !this.hasAttribute("aria-label")) {
|
|
183
183
|
this.setAriaState({ label: nameText });
|
|
184
184
|
}
|
|
185
|
-
if (this.button && !this.button.hasAttribute("aria-label")) {
|
|
185
|
+
if (this.button && !this.button.hasAttribute("label") && !this.button.hasAttribute("aria-label")) {
|
|
186
186
|
const label = nameText ? `Remove ${nameText}` : "Remove file";
|
|
187
|
-
this.button.setAttribute("
|
|
187
|
+
this.button.setAttribute("label", label);
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-file-upload-item.js","sources":["../packages/wje-file-upload-item/file-upload-item.element.js","../packages/wje-file-upload-item/file-upload-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport FormatDigital from '../wje-format-digital/format-digital.js';\nimport Icon from '../wje-icon/icon.js';\nimport Slider from '../wje-slider/slider.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to upload files.\n * `FileUploadItem` is a custom web component that represents a file upload item.\n * It extends from `WJElement` and uses the `Localizer` utility for localization.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @csspart button - The delete button part\n * @csspart image - The image part\n * @csspart name - The name part\n * @csspart size - The size part\n * @slot img - Slot for the image\n * @slot action - Slot for the action buttons\n * @cssproperty --primary-color - The primary color of the file upload item.\n * //@fires wje-button:click - Dispatches when the delete button is clicked\n * @tag wje-file-upload\n */\nexport default class FileUploadItem extends WJElement {\n /**\n * Creates an instance of FileUploadItem.\n * @class\n */\n constructor() {\n super();\n this.localizer = new Localizer(this);\n }\n\n /**\n * Sets the 'is-uploaded' attribute to indicate the uploaded status.\n * @param {boolean} value The value to determine if the element is uploaded.\n */\n set isUploaded(value) {\n this.setAttribute('is-uploaded', '');\n }\n\n /**\n * Checks if the 'is-uploaded' attribute is present on the element.\n * @returns {boolean} True if the 'is-uploaded' attribute exists, otherwise false.\n */\n get isUploaded() {\n return this.hasAttribute('is-uploaded');\n }\n\n /**\n * Sets the size attribute of the element.\n * @param {string | number} value The value to set for the size attribute.\n */\n set size(value) {\n this.setAttribute('size', value);\n }\n\n /**\n * Retrieves the value of the 'size' attribute.\n * @returns {string|null} The value of the 'size' attribute, or null if the attribute is not present.\n */\n get size() {\n return this.getAttribute('size');\n }\n\n /**\n * Dependencies for the component.\n * @type {object}\n */\n dependencies = {\n 'wje-format-digital': FormatDigital,\n 'wje-button': Button,\n 'wje-slider': Slider,\n 'wje-icon': Icon,\n };\n\n className = 'FileUploadItem';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['uploaded', 'is-uploaded'];\n }\n\n /**\n * A lifecycle method that is called when one of the observed attributes of the custom element is added, removed, or changed.\n * This method is used to react to changes in the specified attributes.\n * @param {string} name The name of the attribute that was changed.\n * @param {string|null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.\n * @param {string|null} newValue The new value of the attribute after the change, or null if the attribute has been removed.\n * @returns {void} This method does not return a value.\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (super.attributeChangedCallback) {\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n if (name === 'uploaded' && oldValue !== newValue && this.uploadedEl) {\n this.uploadedEl.setAttribute('value', newValue);\n\n let progress = (+newValue / +this.size) * 100 || 0;\n\n this.progress = Math.round(progress, 0);\n }\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Method to draw the component on the screen.\n * @returns {DocumentFragment} The fragment containing the component.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-file-upload-item');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'img');\n\n let image = document.createElement('div');\n image.setAttribute('part', 'image');\n image.classList.add('image');\n\n let name = document.createElement('span');\n name.classList.add('name');\n name.innerText = this.name;\n\n let actions = document.createElement('slot');\n actions.classList.add('actions');\n actions.setAttribute('name', 'action');\n\n let button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n button.setAttribute('size', 'small');\n button.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n\n let sizeWrapper = document.createElement('span');\n sizeWrapper.classList.add('size');\n\n let uploaded = document.createElement('wje-format-digital');\n uploaded.setAttribute('value', this.uploaded || 0);\n uploaded.innerHTML = `<span slot=\"start\">${this.localizer.translate('wj.file.upload.uploaded')}</span>`;\n\n let size = document.createElement('wje-format-digital');\n size.setAttribute('value', this.size || 0);\n size.innerHTML = `<span slot=\"start\"> ${this.localizer.translate('wj.file.upload.from')} </span>`;\n\n let size2 = document.createElement('wje-format-digital');\n size2.setAttribute('value', this.size || 0);\n\n let slider = document.createElement('wje-progress-bar');\n slider.classList.add('file-progress');\n slider.setAttribute('id', 'id-' + this.lastModified);\n slider.setAttribute('progress', this.progress);\n slider.setAttribute('color', 'success');\n\n image.appendChild(slot);\n actions.appendChild(button);\n\n sizeWrapper.appendChild(uploaded);\n sizeWrapper.appendChild(size);\n\n native.appendChild(image);\n native.appendChild(name);\n\n if (!this.isUploaded)\n native.appendChild(sizeWrapper);\n else\n native.appendChild(size2);\n\n native.appendChild(actions);\n\n if (!this.isUploaded)\n native.appendChild(slider);\n\n fragment.appendChild(native);\n\n this.button = button;\n this.uploadedEl = uploaded;\n this.sliderEl = slider;\n this.nameEl = name;\n\n return fragment;\n }\n\n /**\n * Called after the component has been drawn.\n */\n afterDraw() {\n this.syncAria();\n this.button.addEventListener('wje-button:click', this.onDelete);\n }\n\n /**\n * Sync ARIA attributes on host and actions.\n */\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'listitem' });\n }\n\n const nameText = (this.nameEl?.textContent || this.name || '').trim();\n if (nameText && !this.hasAttribute('aria-label')) {\n this.setAriaState({ label: nameText });\n }\n\n if (this.button && !this.button.hasAttribute('aria-label')) {\n const label = nameText ? `Remove ${nameText}` : 'Remove file';\n this.button.setAttribute('aria-label', label);\n }\n }\n\n /**\n * Handles the delete action.\n */\n onDelete = () => {\n event.dispatchCustomEvent(this, 'wje-file-upload-item:remove', this.data);\n\n this.remove();\n };\n}\n","import FileUploadItem from './file-upload-item.element.js';\n\nexport default FileUploadItem;\n\nFileUploadItem.define('wje-file-upload-item', FileUploadItem);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-file-upload-item.js","sources":["../packages/wje-file-upload-item/file-upload-item.element.js","../packages/wje-file-upload-item/file-upload-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport Button from '../wje-button/button.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport FormatDigital from '../wje-format-digital/format-digital.js';\nimport Icon from '../wje-icon/icon.js';\nimport Slider from '../wje-slider/slider.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to upload files.\n * `FileUploadItem` is a custom web component that represents a file upload item.\n * It extends from `WJElement` and uses the `Localizer` utility for localization.\n * @documentation https://elements.webjet.sk/components/file-upload\n * @status stable\n * @augments WJElement\n * @csspart button - The delete button part\n * @csspart image - The image part\n * @csspart name - The name part\n * @csspart size - The size part\n * @slot img - Slot for the image\n * @slot action - Slot for the action buttons\n * @cssproperty --primary-color - The primary color of the file upload item.\n * //@fires wje-button:click - Dispatches when the delete button is clicked\n * @tag wje-file-upload\n */\nexport default class FileUploadItem extends WJElement {\n /**\n * Creates an instance of FileUploadItem.\n * @class\n */\n constructor() {\n super();\n this.localizer = new Localizer(this);\n }\n\n /**\n * Sets the 'is-uploaded' attribute to indicate the uploaded status.\n * @param {boolean} value The value to determine if the element is uploaded.\n */\n set isUploaded(value) {\n this.setAttribute('is-uploaded', '');\n }\n\n /**\n * Checks if the 'is-uploaded' attribute is present on the element.\n * @returns {boolean} True if the 'is-uploaded' attribute exists, otherwise false.\n */\n get isUploaded() {\n return this.hasAttribute('is-uploaded');\n }\n\n /**\n * Sets the size attribute of the element.\n * @param {string | number} value The value to set for the size attribute.\n */\n set size(value) {\n this.setAttribute('size', value);\n }\n\n /**\n * Retrieves the value of the 'size' attribute.\n * @returns {string|null} The value of the 'size' attribute, or null if the attribute is not present.\n */\n get size() {\n return this.getAttribute('size');\n }\n\n /**\n * Dependencies for the component.\n * @type {object}\n */\n dependencies = {\n 'wje-format-digital': FormatDigital,\n 'wje-button': Button,\n 'wje-slider': Slider,\n 'wje-icon': Icon,\n };\n\n className = 'FileUploadItem';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['uploaded', 'is-uploaded'];\n }\n\n /**\n * A lifecycle method that is called when one of the observed attributes of the custom element is added, removed, or changed.\n * This method is used to react to changes in the specified attributes.\n * @param {string} name The name of the attribute that was changed.\n * @param {string|null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.\n * @param {string|null} newValue The new value of the attribute after the change, or null if the attribute has been removed.\n * @returns {void} This method does not return a value.\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (super.attributeChangedCallback) {\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n if (name === 'uploaded' && oldValue !== newValue && this.uploadedEl) {\n this.uploadedEl.setAttribute('value', newValue);\n\n let progress = (+newValue / +this.size) * 100 || 0;\n\n this.progress = Math.round(progress, 0);\n }\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Method to draw the component on the screen.\n * @returns {DocumentFragment} The fragment containing the component.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-file-upload-item');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'img');\n\n let image = document.createElement('div');\n image.setAttribute('part', 'image');\n image.classList.add('image');\n\n let name = document.createElement('span');\n name.classList.add('name');\n name.innerText = this.name;\n\n let actions = document.createElement('slot');\n actions.classList.add('actions');\n actions.setAttribute('name', 'action');\n\n let button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n button.setAttribute('size', 'small');\n button.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n\n let sizeWrapper = document.createElement('span');\n sizeWrapper.classList.add('size');\n\n let uploaded = document.createElement('wje-format-digital');\n uploaded.setAttribute('value', this.uploaded || 0);\n uploaded.innerHTML = `<span slot=\"start\">${this.localizer.translate('wj.file.upload.uploaded')}</span>`;\n\n let size = document.createElement('wje-format-digital');\n size.setAttribute('value', this.size || 0);\n size.innerHTML = `<span slot=\"start\"> ${this.localizer.translate('wj.file.upload.from')} </span>`;\n\n let size2 = document.createElement('wje-format-digital');\n size2.setAttribute('value', this.size || 0);\n\n let slider = document.createElement('wje-progress-bar');\n slider.classList.add('file-progress');\n slider.setAttribute('id', 'id-' + this.lastModified);\n slider.setAttribute('progress', this.progress);\n slider.setAttribute('color', 'success');\n\n image.appendChild(slot);\n actions.appendChild(button);\n\n sizeWrapper.appendChild(uploaded);\n sizeWrapper.appendChild(size);\n\n native.appendChild(image);\n native.appendChild(name);\n\n if (!this.isUploaded)\n native.appendChild(sizeWrapper);\n else\n native.appendChild(size2);\n\n native.appendChild(actions);\n\n if (!this.isUploaded)\n native.appendChild(slider);\n\n fragment.appendChild(native);\n\n this.button = button;\n this.uploadedEl = uploaded;\n this.sliderEl = slider;\n this.nameEl = name;\n\n return fragment;\n }\n\n /**\n * Called after the component has been drawn.\n */\n afterDraw() {\n this.syncAria();\n this.button.addEventListener('wje-button:click', this.onDelete);\n }\n\n /**\n * Sync ARIA attributes on host and actions.\n */\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'listitem' });\n }\n\n const nameText = (this.nameEl?.textContent || this.name || '').trim();\n if (nameText && !this.hasAttribute('aria-label')) {\n this.setAriaState({ label: nameText });\n }\n\n if (this.button && !this.button.hasAttribute('label') && !this.button.hasAttribute('aria-label')) {\n const label = nameText ? `Remove ${nameText}` : 'Remove file';\n this.button.setAttribute('label', label);\n }\n }\n\n /**\n * Handles the delete action.\n */\n onDelete = () => {\n event.dispatchCustomEvent(this, 'wje-file-upload-item:remove', this.data);\n\n this.remove();\n };\n}\n","import FileUploadItem from './file-upload-item.element.js';\n\nexport default FileUploadItem;\n\nFileUploadItem.define('wje-file-upload-item', FileUploadItem);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-file-upload.js
CHANGED
|
@@ -410,7 +410,7 @@ class FileUpload extends WJElement {
|
|
|
410
410
|
if (name === "label" && this.button) {
|
|
411
411
|
const nextLabel = this.label || this.localizer.translate("wj.file.upload.button");
|
|
412
412
|
this.button.innerText = nextLabel;
|
|
413
|
-
this.button.setAttribute("
|
|
413
|
+
this.button.setAttribute("label", nextLabel);
|
|
414
414
|
}
|
|
415
415
|
}
|
|
416
416
|
/**
|
|
@@ -458,7 +458,7 @@ class FileUpload extends WJElement {
|
|
|
458
458
|
let button = document.createElement("wje-button");
|
|
459
459
|
button.innerText = this.label || this.localizer.translate("wj.file.upload.button");
|
|
460
460
|
button.setAttribute("part", "upload-button");
|
|
461
|
-
button.setAttribute("
|
|
461
|
+
button.setAttribute("label", button.innerText);
|
|
462
462
|
label.appendChild(button);
|
|
463
463
|
this.button = button;
|
|
464
464
|
}
|