wj-elements

{ "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json", "name": "wj-elements", "version": "0.7.4", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "wje-accordion", "description": "This class represents an Accordion element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Accordion element.\n- **beforeDraw()** - Method to run before the element is drawn.\n- **draw(): _object_** - Method to draw the Accordion element.\n- **afterDraw()** - Method to run after the element is drawn.\n- **collapseAll(exception)** - Method to run after the element is drawn.\n- **getAccordions(): _Array_** - Method to get the accordions.\n\n### **Slots:**\n - **default** - Slot for direct `wje-accordion-item` children.", "doc-url": "", "attributes": [ { "name": "multiple", "description": "Allows multiple accordion items to stay expanded at the same time.", "value": { "type": "boolean" } }, { "name": "index", "description": "Sets which child accordion item should start expanded based on DOM order.", "value": { "type": "number" } } ], "slots": [ { "name": "default", "description": "Slot for direct `wje-accordion-item` children." } ], "events": [], "js": { "properties": [ { "name": "multiple", "description": "Determines whether the element has the `multiple` attribute." }, { "name": "index", "description": "Retrieves the value of the `index` attribute as a number." }, { "name": "className", "description": "The class name for the Accordion element.", "type": "string" } ], "events": [] } }, { "name": "wje-accordion-item", "description": "This class represents an Accordion Item element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Accordion Item element.\n- **draw(): _object_** - Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n- **afterDraw()** - Method to execute after the Accordion Item element is drawn.\n- **collapse()** - Collapses the accordion item and updates the headline ARIA state.\n- **expand()** - Expands the accordion item and updates the headline ARIA state.\n\n### **Slots:**\n - **headline** - Slot for the clickable accordion headline content.\n- **description** - Slot for supporting text shown below the headline.\n- **toggle** - Slot for a custom toggle icon or toggle content.\n- **content** - Slot for the expandable panel body.\n\n### **CSS Properties:**\n - **--wje-accordion-background** - Background color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border** - Border color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-radius** - Border radius of the item wrapper. _(default: var(--wje-border-radius-large))_\n- **--wje-accordion-background-hover** - Background color used when the headline is hovered. _(default: var(--wje-color-contrast-1))_\n- **--wje-accordion-border-hover** - Border color used when the headline is hovered. _(default: var(--wje-color-contrast-2))_\n- **--wje-accordion-background-expanded** - Background color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-expanded** - Border color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-headline-color** - Text color of the headline area. _(default: var(--wje-color-contrast-11))_\n- **--wje-accordion-content-color** - Text color of the expandable content area. _(default: var(--wje-color-contrast-6))_\n- **--wje-accordion-marker-rotate** - Rotation applied to the toggle marker icon. // @fires wje-accordion-item:open - Dispatched when the item is expanded. // @fires wje-accordion-item:close - Dispatched when the item is collapsed. _(default: 0deg)_\n\n### **CSS Parts:**\n - **native** - The wrapper of the whole accordion item.\n- **headline** - The clickable headline area.\n- **description** - The description slot container inside the headline.\n- **toggle** - The toggle slot container and fallback chevron area.\n- **content** - The expandable content panel.", "doc-url": "", "attributes": [ { "name": "color", "description": "Applies a contextual color variant such as `primary`, `success`, `danger`, `warning`, `info`, or `complete`.", "value": { "type": "string" } } ], "slots": [ { "name": "headline", "description": "Slot for the clickable accordion headline content." }, { "name": "description", "description": "Slot for supporting text shown below the headline." }, { "name": "toggle", "description": "Slot for a custom toggle icon or toggle content." }, { "name": "content", "description": "Slot for the expandable panel body." } ], "events": [], "js": { "properties": [ { "name": "className", "description": "The class name for the Accordion Item element.", "type": "string" } ], "events": [] } }, { "name": "wje-animation", "description": "This class represents an Animation element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Animation element.\n- **draw(): _object_** - Method to draw the Animation element.\n- **afterDraw()** - Method to perform actions after the Animation element is drawn.\nThis method destroys any existing animation, fetches a new animations array,\nselects the appropriate animation, and applies it to the element.\n- **getAnimationsArray(): _Array_** - Method to fetch and parse the animations array from a CSS file.\n- **destroyAnimation(): _void_** - Terminates and cleans up the currently active animation if it exists.\nCalls the `cancel` method to stop the animation process.\n- **play(): _void_** - Plays the currently assigned animation, if available.\n- **cancel(): _void_** - Cancels the current animation if it is initialized and has a cancel method.\nLogs a warning if the animation is not initialized or the cancel method is unavailable.\n\n### **Slots:**\n - _default_ - The animation main content.", "doc-url": "", "attributes": [ { "name": "name", "description": "The Animate.css animation name played on the slotted element.", "value": { "type": "string" } }, { "name": "duration", "description": "The animation playback duration in milliseconds.", "value": { "type": "number" } }, { "name": "delay", "description": "The delay before the animation starts.", "value": { "type": "number" } }, { "name": "endDelay", "description": "The delay applied after the animation completes.", "value": { "type": "number" } }, { "name": "fill", "description": "The fill mode used by the animation playback.", "value": { "type": "string" } }, { "name": "iterations", "description": "The number of animation repetitions.", "value": { "type": "string|number" } }, { "name": "iterationStart", "description": "The starting offset for the first animation iteration.", "value": { "type": "number" } }, { "name": "direction", "description": "The playback direction of the animation.", "value": { "type": "string" } }, { "name": "easing", "description": "The easing function used by the animation playback.", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The animation main content." } ], "events": [], "js": { "properties": [ { "name": "name", "description": "Getter for the name attribute." }, { "name": "duration", "description": "Getter for the name attribute." }, { "name": "delay", "description": "Getter for the name attribute." }, { "name": "endDelay", "description": "Getter for the name attribute." }, { "name": "fill", "description": "Getter for the name attribute." }, { "name": "iterations", "description": "Getter for the name attribute." }, { "name": "iterationStart", "description": "Getter for the name attribute." }, { "name": "direction", "description": "Getter for the name attribute." }, { "name": "easing", "description": "Getter for the name attribute." }, { "name": "animations", "description": "Getter for the animations' property." }, { "name": "className", "description": "The class name for the Animation element.", "type": "string" }, { "name": "_animations", "type": "array" } ], "events": [] } }, { "name": "wje-aside", "description": "This class represents an Aside element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Aside element.\n- **draw(): _object_** - Method to draw the Aside element.\n\n### **Slots:**\n - **default** - Slot for the aside content.\n\n### **CSS Properties:**\n - **--wje-aside-width** - Controls the width of the aside column. _(default: undefined)_\n- **--wje-aside-top** - Controls the top offset of a fixed aside. _(default: undefined)_\n- **--wje-aside-border-color** - Controls the border color of the aside. _(default: var(--wje-border-color))_\n- **--wje-aside-border-width** - Controls the border width of the aside. _(default: undefined)_\n- **--wje-aside-border-style** - Controls the border style of the aside. _(default: undefined)_", "doc-url": "", "attributes": [ { "name": "width", "description": "Sets the width of the aside column, typically through a CSS length or design token.", "value": { "type": "string" } }, { "name": "top", "description": "Sets the top offset used together with the `fixed` layout mode.", "value": { "type": "string" } }, { "name": "fixed", "description": "Pins the aside in a fixed desktop position instead of keeping it in normal flow.", "value": { "type": "boolean" } }, { "name": "variant", "description": "Selects an alternate layout variant such as the mobile `top-start` drawer style.", "value": { "type": "string" } } ], "slots": [ { "name": "default", "description": "Slot for the aside content." } ], "events": [], "js": { "properties": [ { "name": "className", "description": "The class name for the Aside element.", "type": "string" } ], "events": [] } }, { "name": "wje-avatar", "description": "This class represents an Avatar element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes.\n- **draw(): _object_** - Method to draw the avatar element and return a document fragment.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **isImage(): _boolean_** - Method to check if the avatar is an image.\n\n### **Slots:**\n - **default** - Slot for the main avatar content, typically an image.\n- **icon** - Slot for an icon rendered inside the avatar.\n- **status** - Slot for a status badge or indicator positioned on the avatar edge.\n- **secondary** - Slot for additional secondary content rendered with the avatar.\n\n### **CSS Properties:**\n - **--wje-avatar-size** - Controls the overall rendered size of the avatar shell. _(default: undefined)_\n- **--wje-avatar-font-size** - Controls the font size used for initials and text content. _(default: undefined)_\n- **--wje-avatar-font-weight** - Controls the font weight used for initials and text content. _(default: undefined)_\n- **--wje-avatar-color** - Controls the text color inside the avatar. _(default: undefined)_\n- **--wje-avatar-background-color** - Controls the background color of the avatar surface. _(default: undefined)_\n- **--wje-avatar-border-radius** - Controls the avatar border radius. _(default: undefined)_\n- **--wje-avatar-border-color** - Controls the avatar border color when a border is applied. _(default: undefined)_\n- **--wje-avatar-border-width** - Controls the avatar border width when a border is applied. _(default: undefined)_\n- **--wje-avatar-border-style** - Controls the avatar border style when a border is applied. _(default: undefined)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.\n- **status** - The positioned slot container for status content.\n- **secondary** - The slot container for secondary avatar content.", "doc-url": "", "attributes": [ { "name": "initials", "description": "Renders generated initials from `label` instead of the default slotted content.", "value": { "type": "boolean" } }, { "name": "label", "description": "Provides the source text for generated initials and the accessible label of the avatar.", "value": { "type": "string" } }, { "name": "size", "description": "Selects a predefined avatar size such as `small`, `medium`, `normal`, `large`, or larger variants.", "value": { "type": "string" } }, { "name": "status-placement", "description": "Positions the `status` slot on one of the avatar corners.", "value": { "type": "string" } } ], "slots": [ { "name": "default", "description": "Slot for the main avatar content, typically an image." }, { "name": "icon", "description": "Slot for an icon rendered inside the avatar." }, { "name": "status", "description": "Slot for a status badge or indicator positioned on the avatar edge." }, { "name": "secondary", "description": "Slot for additional secondary content rendered with the avatar." } ], "events": [], "js": { "properties": [ { "name": "label", "description": "Retrieves the value of the 'label' attribute for the element.\nIf the attribute is not set, it defaults to an empty string." }, { "name": "initials", "description": "Retrieves the value of the 'initials' attribute if it exists." }, { "name": "size", "description": "Retrieves the size attribute of the element. If the size attribute\nis not defined, it returns the default value 'medium'." }, { "name": "className", "description": "Class name for the Avatar element.", "type": "string" } ], "events": [] } }, { "name": "wje-breadcrumb", "description": "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---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Breadcrumb element.\n- **draw(): _object_** - Draw method for the Breadcrumb element.\n- **shouldRenderSeparator(): _boolean_** - Returns whether the separator should be visible after this breadcrumb.\n- **hasVisibleBreadcrumbAfter(): _boolean_** - Returns whether any later breadcrumb is still visible in the rendered trail.\n- **isBreadcrumbVisibleInTrail(breadcrumb: _Element_): _boolean_** - Returns whether a breadcrumb is visible in the rendered trail.\n- **syncNativeAttributes()** - Synchronizes host attributes to the internal anchor.\n- **afterDraw()** - Sets up native anchor listeners after render.\n- **beforeDisconnect()** - Removes native anchor listeners before redraw/disconnect.\n- **handleDisabledNativeClick(e: _MouseEvent_)** - Prevents disabled breadcrumbs from navigating or bubbling click handlers.\n- **drawCollapsedIndicator(): _any_** - Renders the collapsed indicator based on the current collapsed variant.\nIf the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\nMobile breakpoint variants render compact breadcrumb summaries, otherwise the default button is used.\n- **isMobileCollapsedVariant(): _boolean_** - Returns whether the current collapsed variant is a compact mobile layout.\n- **collapseDropdown(): _HTMLElement_** - Creates and returns a dropdown UI component for collapsed breadcrumbs.\nThis method generates a dropdown element with a button trigger and a menu populated with items corresponding\nto the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\nevents are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\nbreadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n- **createBreadcrumbDropdown({ breadcrumbs, trigger, placement = 'bottom' }, options: _@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 * _): _HTMLElement_** - Creates a dropdown containing breadcrumb menu items.\n- **createCollapsedBreadcrumbMenu(breadcrumbs: _Array<HTMLElement>_): _HTMLElement_** - Creates the menu used by collapsed dropdown variants.\n- **getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator: _boolean_): _Array<HTMLElement>_** - Returns breadcrumbs that should be exposed in a collapsed menu.\n- **collapseMobileVariant(variant: _string_): _HTMLElement_** - Renders one of the compact mobile breakpoint variants.\n- **collapseMobileText(): _HTMLElement_** - Renders only the current breadcrumb title.\n- **collapseMobileBack(): _HTMLElement_** - Renders a parent back action above the current title.\n- **collapseMobileParentTitle(): _HTMLElement_** - Renders parent context above the current title.\n- **collapseMobileMenuTitle(): _HTMLElement_** - Renders a menu trigger with the current title.\n- **collapseMobileSheet(): _HTMLElement_** - Renders the future sheet variant using the dropdown fallback for now.\n- **createMobileDropdown(trigger: _HTMLElement_): _HTMLElement_** - Creates a dropdown fallback for mobile menu-like variants.\n- **createMobileDropdownTrigger({ icon, iconPosition = 'start', label, ariaLabel, className }, options: _@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 * _): _HTMLElement_** - Creates a compact mobile dropdown trigger.\n- **createMobileContainer(className: _string_): _HTMLElement_** - Creates a wrapper for compact mobile breadcrumb variants.\n- **createMobileBreadcrumbControl(breadcrumb: _HTMLElement|null_, className: _string_, { actionable = false, ariaCurrent = false, ariaLabel, icon }, options: _@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 * _): _HTMLElement_** - Creates a text or button control for a breadcrumb.\n- **getTrailBreadcrumbs(): _Array<HTMLElement>_** - Returns the full trail of sibling breadcrumbs.\n- **getCurrentBreadcrumb(): _HTMLElement|null_** - Returns the current breadcrumb item.\n- **getParentBreadcrumb(): _HTMLElement|null_** - Returns the parent breadcrumb item.\n- **isBreadcrumbActionable(breadcrumb: _HTMLElement|null_): _boolean_** - Returns whether a breadcrumb has a known action to forward.\n- **forwardBreadcrumbClick(breadcrumb: _HTMLElement|null_)** - Forwards a compact control or menu item click to the original breadcrumb.\n- **createCollapsedDropdownTrigger(isBreakpointMenuIndicator: _boolean_): _HTMLElement_** - Creates the dropdown trigger for collapsed breadcrumbs.\n- **getCollapsedDropdownIcon(isBreakpointMenuIndicator: _boolean_): _string_** - Resolves the icon used by the default dropdown trigger.\n- **populateCollapsedMenuItem(menuItem: _HTMLElement_, breadcrumb: _HTMLElement_)** - Copies breadcrumb content into a collapsed menu item.\n- **getBreadcrumbLabel(breadcrumb: _HTMLElement|null_): _string_** - Resolves a readable label for a breadcrumb item.\n- **getCollapsedMenuItemLabel(breadcrumb: _HTMLElement_): _string_** - Resolves a readable label for icon-only collapsed menu items.\n- **humanizeCollapsedMenuItemLabel(value: _string_): _string_** - Turns a URL segment into a readable menu label.\n- **isBreakpointMenuIndicator(): _boolean_** - Returns whether this collapsed indicator represents the full breakpoint menu.\n- **collapseButton(): _HTMLButtonElement_** - Creates a button element that expands hidden breadcrumbs when clicked.\nThe button is set with appropriate attributes and event listeners to handle\nthe expanding of hidden breadcrumb elements. Clicking the button will remove\nthe button itself, reveal hidden breadcrumbs, and stop the current event\npropagation.\n- **getBreadcrumbs(): _Element_** - Retrieves the breadcrumb trail for the current element by returning its parent element.\n\n### **Slots:**\n - _default_ - The main content of the breadcrumb.\n- **start** - Slot for content at the start of the breadcrumb.\n- **end** - Slot for content at the end of the breadcrumb.\n- **separator** - Slot for a custom separator between breadcrumb items.\n\n### **CSS Properties:**\n - **--wje-breadcrumb-a** - The color of the breadcrumb text. _(default: var(--wje-color-contrast-8))_\n- **--wje-breadcrumb-a-hover** - The color of the breadcrumb separator line. _(default: var(--wje-color-contrast-6))_\n- **--wje-breadcrumb-line-height** - Controls the vertical rhythm of breadcrumb text. _(default: 1.5)_\n- **--wje-breadcrumb-native-line-height** - Controls the line height of the native breadcrumb wrapper. _(default: var(--wje-breadcrumb-line-height))_\n- **--wje-breadcrumb-native-margin** - Sets outer spacing around the native breadcrumb wrapper. _(default: 0)_\n- **--wje-breadcrumb-native-padding** - Sets inner spacing inside the native breadcrumb wrapper. _(default: 0.25rem 0.75rem)_\n- **--wje-breadcrumb-margin** - Backwards-compatible alias for native breadcrumb margin. _(default: var(--wje-breadcrumb-native-margin))_\n- **--wje-breadcrumb-padding** - Backwards-compatible alias for native breadcrumb padding. _(default: var(--wje-breadcrumb-native-padding))_\n\n### **CSS Parts:**\n - **native** - The native wrapper of the breadcrumb component.\n- **separator** - The separator between breadcrumb items.", "doc-url": "", "attributes": [ { "name": "show-collapsed-indicator", "value": { "type": "string" } }, { "name": "collapsed", "value": { "type": "string" } }, { "name": "last", "value": { "type": "string" } }, { "name": "href", "value": { "type": "string" } }, { "name": "target", "value": { "type": "string" } }, { "name": "rel", "value": { "type": "string" } }, { "name": "download", "value": { "type": "string" } }, { "name": "disabled", "value": { "type": "string" } }, { "name": "title", "value": { "type": "string" } }, { "name": "aria-label", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The main content of the breadcrumb." }, { "name": "start", "description": "Slot for content at the start of the breadcrumb." }, { "name": "end", "description": "Slot for content at the end of the breadcrumb." }, { "name": "separator", "description": "Slot for a custom separator between breadcrumb items." } ], "events": [], "js": { "properties": [ { "name": "href", "description": "Gets the breadcrumb link URL." }, { "name": "disabled", "description": "Gets the disabled state." }, { "name": "showSeparator", "description": "Set show separator flag." }, { "name": "collapsedVariant", "description": "Get collapsed variant." }, { "name": "collapsedVariantName", "description": "Get collapsed variant token." }, { "name": "className", "description": "Class name for the Breadcrumb element.", "type": "string" }, { "name": "_showSeparator", "type": "boolean" }, { "name": "_showCollapsedIndicator", "type": "boolean" }, { "name": "handleNativeClick" } ], "events": [] } }, { "name": "wje-breadcrumbs", "description": "This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Breadcrumbs element.\n- **syncAria()** - Syncs host navigation semantics while preserving user-provided names.\n- **draw(): _object_** - Draw method for the Breadcrumbs element.\n- **afterDraw(): _void_** - Updates the breadcrumb elements after they are drawn on the page.\nIt manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\nif the total exceeds the specified maximum items.\n- **afterDisconnect()** - Removes listeners after disconnect.\n- **upgradeProperty(property: _string_)** - Upgrades properties set before the custom element definition was loaded.\n- **normalizeItems(value: _Array|string|null|undefined_): _Array<object>_** - Normalizes incoming item data for keyed DOM diffing.\n- **normalizeItem(item: _object|string|number_, index: _number_, usedKeys: _Set<string>_): _object_** - Normalizes a single item while preserving the original object for events.\n- **getItemKey(item: _object_, index: _number_, usedKeys: _Set<string>_): _string_** - Resolves a stable key for an item.\n- **syncItems(records: _Array<object>_)** - Incrementally synchronizes data-driven items into light DOM breadcrumbs.\n- **createItemElement(record: _object_, index: _number_): _HTMLElement_** - Creates a managed breadcrumb element.\n- **updateItemElement(breadcrumb: _HTMLElement_, record: _object_, index: _number_)** - Updates a managed breadcrumb element only where values changed.\n- **syncItemAttribute(element: _HTMLElement_, name: _string_, value: _string|null|undefined_)** - Synchronizes an attribute when its value changed.\n- **syncBooleanItemAttribute(element: _HTMLElement_, name: _string_, isEnabled: _boolean_)** - Synchronizes a boolean attribute.\n- **syncItemContent(breadcrumb: _HTMLElement_, record: _object_)** - Synchronizes slotted icon and text nodes for a managed breadcrumb.\n- **getItemStructureSignature(record: _object_): _string_** - Returns a small signature for structural changes that need item replacement.\n- **dispatchManagedItemClick(e: _MouseEvent_)** - Dispatches the data-driven item click event.\n- **getManagedBreadcrumbFromEvent(e: _Event_): _HTMLElement|null_** - Finds the managed breadcrumb that originated an event.\n- **handleBreakpointResize(): _void_** - Reacts to viewport resize only when the breakpoint mode actually changes.\n- **updateCollapse(): _void_** - Recalculates breadcrumb collapse state.\n- **applyMenuCollapse(breadcrumbs: _Array<Element>_)** - Collapses the whole breadcrumb trail into a single menu indicator.\n- **isBreakpointMenuCollapseActive(): _boolean_** - Returns whether the active breakpoint mode should move the full trail into one menu.\n- **usesMobileCollapsedVariant(): _boolean_** - Returns whether the active collapsed variant is one of the mobile compact layouts.\n- **resetCollapseState(breadcrumbs: _Array<Element>_)** - Clears attributes/classes managed by the collapse algorithm.\n- **syncManagedAttribute(element: _Element_, name: _string_, isEnabled: _boolean_)** - Applies a managed boolean attribute only when its value truly changes.\n- **refreshCollapsedIndicators()** - Redraws active collapsed indicators when parent-only rendering inputs change.\n- **shouldApplyBreakpointCollapse(): _boolean_** - Returns whether collapse rules should currently be applied.\n- **getBreakpointWidth(): _number|null_** - Resolves the configured breakpoint to a pixel width.\n- **getBreakpointCollapseTrigger(): _Element|null_** - Returns the custom trigger element configured for breakpoint menu collapse.\n- **getBreadcrumbs(): _Array<Element>_** - Retrieves all breadcrumb elements within the current instance.\n- **getManagedBreadcrumbs(): _Array<Element>_** - Retrieves breadcrumbs managed by the items property.\n- **getBreadcrumbsCollapsed(): _Array<Element>_** - Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n\n### **Slots:**\n - _default_ - The container for breadcrumb elements.\n- **breakpoint-collapse-trigger** - Custom trigger used when breakpoint-collapse=\"menu\" moves the full trail into a dropdown.\n\n### **CSS Parts:**\n - **container** - The component's container wrapper.", "doc-url": "", "attributes": [ { "name": "breakpoint", "description": "The viewport breakpoint where collapsing starts.", "value": { "type": "string" } }, { "name": "breakpoint-collapse", "description": "The collapse behavior used below the breakpoint. Use \"menu\" to put the whole trail into one menu.", "value": { "type": "string" } }, { "name": "max-items", "description": "The maximum number of visible breadcrumbs before collapsing.", "value": { "type": "number" } }, { "name": "items-before-collapse", "description": "The number of breadcrumbs to show before the collapsed indicator.", "value": { "type": "number" } }, { "name": "items-after-collapse", "description": "The number of breadcrumbs to show after the collapsed indicator.", "value": { "type": "number" } }, { "name": "collapsed-variant", "description": "The UI used for collapsed breadcrumbs. Use \"dropdown\" to render a menu, or \"text\", \"back\", \"parent-title\", \"menu-title\", and \"sheet\" for compact breakpoint menu layouts.", "value": { "type": "string" } }, { "name": "breakpoint-collapse-icon", "description": "Icon used by the default breakpoint menu trigger. // @fires wje-breadcrumbs:item-click - Dispatched when a data-driven breadcrumb item is clicked.", "value": { "type": "string" } }, { "name": "variant", "value": { "type": "string" } }, { "name": "aria-label", "value": { "type": "string" } }, { "name": "aria-labelledby", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The container for breadcrumb elements." }, { "name": "breakpoint-collapse-trigger", "description": "Custom trigger used when breakpoint-collapse=\"menu\" moves the full trail into a dropdown." } ], "events": [], "js": { "properties": [ { "name": "items", "description": "Data-driven breadcrumb items.", "type": "Array<{id: string|number, label: string, href?: string, icon?: string, title?: string, disabled?: boolean, data?: any}>" }, { "name": "variant", "description": "Get variant attribute for the Breadcrumbs element." }, { "name": "collapsedVariant", "description": "Get the collapsed indicator variant." }, { "name": "normalizedCollapsedVariant", "description": "Gets the collapsed indicator variant as a normalized token." }, { "name": "breakpoint", "description": "Gets the collapse breakpoint token or value." }, { "name": "breakpointCollapse", "description": "Gets the collapse behavior used below the configured breakpoint." }, { "name": "breakpointCollapseIcon", "description": "Gets the icon used by the default breakpoint menu trigger." }, { "name": "maxItems", "description": "Get items before collapse attribute." }, { "name": "itemsBeforeCollapse", "description": "Get items before collapse attribute." }, { "name": "itemsAfterCollapse", "description": "Get items after collapse attribute." }, { "name": "className", "description": "Class name for the Breadcrumbs element.", "type": "string" }, { "name": "last", "description": "Last breadcrumb flag", "type": "boolean" }, { "name": "_isCollapsedByBreakpoint", "type": "null" }, { "name": "_items", "type": "array" }, { "name": "_itemRecords", "type": "array" }, { "name": "_hasItemsValue", "type": "boolean" }, { "name": "handleManagedItemClick" } ], "events": [] } }, { "name": "wje-badge", "description": "This class represents a Badge element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes(): _void_** - Configures initial attributes for the Badge element.\n- **draw(): _DocumentFragment_** - Creates the DOM structure for the Badge element.\n\n### **Slots:**\n - _default_ - The badge's main content.\n\n### **CSS Properties:**\n - **--wje-badge-border-radius** - Border radius of the badge element. _(default: var(--wje-border-radius-pill))_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.", "doc-url": "", "attributes": [ { "name": "color", "description": "The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.", "value": { "type": "string" } } ], "slots": [{ "name": "", "description": "The badge's main content." }], "events": [], "js": { "properties": [ { "name": "className", "description": "The class name for the Badge element.", "type": "string" } ], "events": [] } }, { "name": "wje-button", "description": "This class represents Button element, extending the WJElement class.\n---\n\n\n### **Events:**\n \n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **draw(): _object_** - Draw method for the Button element.\n- **afterDraw()** - After draw method for the Button element.\n- **beforeDisconnect()** - Before disconnect method for the Button element.\n- **syncToggleState()** - Keeps toggle slot visibility aligned with the current value.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n\n### **Slots:**\n - _default_ - The button main content.\n- **icon** - The button icon.\n- **caret** - The button caret.\n- **start** - The button start slot.\n- **end** - The button end slot.\n- **toggle** - The button toggle slot.\n\n### **CSS Properties:**\n - **--wje-button-background-color** - Background color of the component; _(default: transparent)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-4)_\n- **--wje-button-color** - Color of the component; _(default: --wje-color-contrast-11)_\n- **--wje-button-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-button-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-button-border-style** - Border style of the component; _(default: solid)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-button-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.", "doc-url": "", "attributes": [ { "name": "disabled", "value": { "type": "string" } }, { "name": "color", "value": { "type": "string" } }, { "name": "value", "value": { "type": "string" } }, { "name": "active", "value": { "type": "string" } }, { "name": "href", "value": { "type": "string" } }, { "name": "toggle", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The button main content." }, { "name": "icon", "description": "The button icon." }, { "name": "caret", "description": "The button caret." }, { "name": "start", "description": "The button start slot." }, { "name": "end", "description": "The button end slot." }, { "name": "toggle", "description": "The button toggle slot." } ], "events": [], "js": { "properties": [ { "name": "dependencies", "description": "Dependencies of the Button element.", "type": "object" }, { "name": "color", "description": "Get color of the Button element." }, { "name": "caret", "description": "Get variant of the Button element." }, { "name": "round", "description": "Retrieves the value of the 'round' attribute as a boolean.\nChecks if the 'round' attribute is present on the element." }, { "name": "tooltip", "description": "Get variant of the Button element." }, { "name": "dialog", "description": "Get variant of the Button element." }, { "name": "active", "description": "Get active state of the Button element." }, { "name": "disabled", "description": "Get disabled state of the Button element." }, { "name": "fill", "description": "Get fill of the Button element." }, { "name": "outline", "description": "Get outline state of the Button element." }, { "name": "stopPropagation", "description": "Get stop propagation state of the Button element." }, { "name": "customEvent", "description": "Retrieves the value of the 'custom-event' attribute from the element." }, { "name": "customEventParameters", "description": "Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\nAttributes considered are those that begin with 'custom-event-'.\nThe mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\nand the values are the corresponding attribute values." }, { "name": "className", "description": "Class name for the Button element", "type": "string" }, { "name": "eventDialogOpen", "description": "Event dialog open method for the Button element." }, { "name": "toggleStates", "description": "Toggle states method for the Button element." } ], "events": [] } }, { "name": "wje-button-group", "description": "ButtonGroup class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the ButtonGroup element.\n- **draw(): _object_** - Draw method for the ButtonGroup element.\n- **afterDraw()** - After draw method for the ButtonGroup element.\n- **syncAria()** - Sync ARIA attributes on host.\n- **findButton(el: _object_): _object_** - Find button method to find the button element.\n- **toggle(activeButton: _object_, buttons: _Array<object>_, index): _void_** - Toggles the state of a group of buttons based on the active button.\n- **updateButtonState(button: _HTMLElement_, modeToRemove: _string_): _void_** - Updates the state of a button by removing one mode attribute and setting another mode attribute.\n\n### **Slots:**\n - _default_ - The button group main content.\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.\n- **native** - The component's native wrapper.", "doc-url": "", "attributes": [], "slots": [ { "name": "", "description": "The button group main content." } ], "events": [], "js": { "properties": [ { "name": "active", "description": "Retrieves the value of the 'active' attribute.\nIf the attribute is not set, it returns false." }, { "name": "color", "description": "Retrieves the current value of the 'color' attribute.\nIf the 'color' attribute is not set, it defaults to 'primary'." }, { "name": "round", "description": "Returns whether the element has the 'round' attribute." }, { "name": "fill", "description": "Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,\nit returns the default value 'link'." }, { "name": "className", "description": "Class name for the ButtonGroup element", "type": "string" } ], "events": [] } }, { "name": "wje-card", "description": "This class represents Card element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Card element.\n- **syncAria()** - Sync ARIA attributes on host only when labeling is provided.\n- **draw(context: _object_, store: _object_, params: _object_): _object_** - Draw method for the Card element.\n\n### **Slots:**\n - _default_ - The card main content.\n\n### **CSS Properties:**\n - **--wje-card-background** - Background of the component; _(default: #fff)_\n- **--wje-card-color** - Color of the component; _(default: #000)_\n- **--wje-card-border-color** - Border color of the component; _(default: transparent)_\n- **--wje-card-border-style** - Border style of the component; _(default: solid)_\n- **--wje-card-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-card-border-radius** - Border radius of the component; _(default: 0.5rem)_\n- **--wje-card-shadow** - Shadow of the component; _(default: var(--wje-shadow-x-large))_", "doc-url": "", "attributes": [ { "name": "label", "value": { "type": "string" } }, { "name": "aria-label", "value": { "type": "string" } }, { "name": "aria-labelledby", "value": { "type": "string" } } ], "slots": [{ "name": "", "description": "The card main content." }], "events": [], "js": { "properties": [ { "name": "className", "description": "Class name for the Card element.", "type": "string" } ], "events": [] } }, { "name": "wje-card-content", "description": "This class represents an Card Content element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the CardContent element.\n- **draw(): _object_** - Draw method for the CardContent element.\n\n### **Slots:**\n - _default_ - The card content main content.\n\n### **CSS Properties:**\n - **--wje-card-padding** - Padding of the component; _(default: 0)_", "doc-url": "", "attributes": [], "slots": [ { "name": "", "description": "The card content main content." } ], "events": [], "js": { "properties": [ { "name": "className", "description": "Class name for the CardContent element.", "type": "string" } ], "events": [] } }, { "name": "wje-card-controls", "description": "This class represents Card Controls element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the CardControls element.\n- **draw(): _object_** - Draw method for the CardControls element.\n\n### **Slots:**\n - _default_ - The card controls main content.\n\n### **CSS Properties:**\n - **--wje-card-controls-font-size** - Font size of the component; _(default: 11px)_\n- **--wje-card-controls-font-family** - Font family of the component; _(default: --wje-font-family-secondary)_", "doc-url": "", "attributes": [], "slots": [ { "name": "", "description": "The card controls main content." }