@nuralyui/menu 0.0.19 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/bundle.js +94 -51
  2. package/index.js.map +1 -1
  3. package/menu.component.d.ts +38 -3
  4. package/menu.component.js +351 -45
  5. package/menu.component.js.map +1 -1
  6. package/menu.constants.js.map +1 -1
  7. package/menu.style.js +113 -64
  8. package/menu.style.js.map +1 -1
  9. package/menu.types.d.ts +4 -0
  10. package/menu.types.js.map +1 -1
  11. package/package.json +1 -1
  12. package/react.js.map +1 -1
package/menu.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './menu.style.js';\nimport { IMenu, IAction, MenuSize } from './menu.types.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { StateController, KeyboardController, AccessibilityController } from './controllers/index.js';\n\n/**\n * Versatile menu component for hierarchical navigation with support for nested submenus.\n * \n * @example\n * ```html\n * <nr-menu .items=${menuItems}></nr-menu>\n * ```\n * \n * @fires change - Menu item selected\n * @fires action-click - Menu action clicked\n * \n * @slot - Menu items (auto-generated from items property)\n */\n@customElement('nr-menu')\nexport class NrMenuElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n \n override requiredComponents = ['nr-icon', 'nr-dropdown'];\n\n /** Menu items configuration */\n @property({ type: Array })\n items: IMenu[] = [];\n\n /** Menu size variant (small, medium, large) */\n @property({ type: String })\n size: MenuSize | string = MenuSize.Medium;\n\n // Controllers\n private stateController: StateController;\n // Keyboard controller is connected via Lit's controller system and listens to events\n // @ts-ignore - Controller is used via Lit's reactive controller system\n private keyboardController: KeyboardController;\n private accessibilityController: AccessibilityController;\n\n private _linkIndex = 0;\n\n constructor() {\n super();\n this.stateController = new StateController(this);\n this.keyboardController = new KeyboardController(this, this.stateController);\n this.accessibilityController = new AccessibilityController(this, this.stateController);\n }\n\n override firstUpdated(): void {\n this._initializeSelectedState();\n this.accessibilityController.updateAriaAttributes();\n }\n\n override updated(): void {\n this.accessibilityController.updateAriaAttributes();\n }\n\n private _initializeSelectedState() {\n this._linkIndex = 0;\n this._findSelectedPath(this.items);\n }\n\n private _findSelectedPath(items: IMenu[], path: number[] = []): boolean {\n for (let index = 0; index < items.length; index++) {\n const item = items[index];\n const currentPath = [...path, index];\n \n if (item.children) {\n if (this._findSelectedPath(item.children, currentPath)) {\n return true;\n }\n } else {\n if (item.selected) {\n this.stateController.setSelectedPath(currentPath);\n return true;\n }\n }\n }\n return false;\n }\n\n private _handleLinkClick(path: number[], value: string, event?: Event) {\n if ((event?.target as HTMLElement)?.classList.contains('action-icon')) {\n return;\n }\n\n if (event?.type === 'click') {\n const mouseEvent = event as MouseEvent;\n if (mouseEvent.detail > 0) {\n return;\n }\n }\n\n this.stateController.setSelectedPath(path);\n \n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { path, value },\n })\n );\n \n this.requestUpdate();\n }\n\n private _handleSubMenuClick(path: number[], value: string, event: Event) {\n const mouseEvent = event as MouseEvent;\n const target = event.target as HTMLElement;\n \n // Don't handle if clicking on toggle icon or its parent container\n if (target.id === 'toggle-icon' || target.closest('#toggle-icon')) {\n return;\n }\n \n // If it's a click event\n if (event.type === 'click') {\n // Check if it's keyboard activation (Enter/Space) - detail will be 0\n if (mouseEvent.detail === 0) {\n // Keyboard activation - toggle the submenu\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n return;\n }\n // Real mouse click - already handled by mousedown, so return\n return;\n }\n\n // This is a mousedown event - highlight and toggle the submenu\n \n this.stateController.setSelectedPath([]);\n this.stateController.clearHighlights();\n this.stateController.setHighlighted(path, true);\n \n // Toggle the submenu when clicking on header\n this.stateController.toggleSubMenu(path);\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { path, value },\n })\n );\n \n this.requestUpdate();\n }\n\n private _toggleSubMenu(path: number[], event: Event) {\n event.stopPropagation();\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n }\n\n private _handleSubMenuMouseEnter(path: number[]) {\n this.stateController.setHovered(path, true);\n this.requestUpdate();\n }\n\n private _handleSubMenuMouseLeave(path: number[]) {\n this.stateController.setHovered(path, false);\n this.requestUpdate();\n }\n\n private _handleActionClick(path: number[], event: CustomEvent) {\n const item = event.detail.item;\n this.dispatchEvent(\n new CustomEvent('action-click', {\n detail: { value: item.value, path, item },\n composed: true,\n bubbles: true,\n })\n );\n }\n\n private _isPathSelected(path: number[]): boolean {\n return this.stateController.isPathSelected(path);\n }\n\n private _convertActionsToDropdownItems(actions: IAction[]): any[] {\n return actions.map(action => ({\n id: action.value,\n label: action.label,\n value: action.value\n }));\n }\n\n private _renderMenuLink(menu: IMenu, path: number[]): any {\n const pathKey = path.join('-');\n const isSelected = this._isPathSelected(path);\n const linkIndex = this._linkIndex++;\n \n return html`\n <li \n class=\"menu-link ${isSelected ? 'selected' : ''} ${menu.disabled ? 'disabled' : ''}\"\n data-path=${pathKey}\n data-index=${linkIndex}\n tabindex=\"0\"\n @mousedown=${!menu.disabled ? (e: Event) => this._handleLinkClick(path, menu.text, e) : nothing}\n @click=${!menu.disabled ? (e: Event) => this._handleLinkClick(path, menu.text, e) : nothing}>\n <div class=\"icon-container\">\n ${menu.icon ? html`\n ${!menu.text \n ? html`<div class=\"icon-only\"><nr-icon name=\"${menu.icon}\"></nr-icon></div>`\n : html`<nr-icon name=\"${menu.icon}\"></nr-icon>`}\n ` : nothing}\n </div>\n ${menu.text ? html`\n <div class=\"action-text-container\">\n <div class=\"text-container\">\n <span>${menu.text}</span>\n </div>\n <div class=\"icon-container\">\n ${menu.status?.icon ? html`\n <nr-icon name=${menu.status.icon} class=\"status-icon\"></nr-icon>\n ` : nothing}\n ${menu.menu?.actions ? html`\n <nr-dropdown \n .items=${this._convertActionsToDropdownItems(menu.menu.actions)} \n trigger=\"click\" \n placement=\"bottom-end\"\n @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\"></nr-icon>\n </nr-dropdown>\n ` : nothing}\n </div>\n </div>\n ` : nothing}\n </li>\n `;\n }\n\n private _renderSubMenu(menu: IMenu, path: number[]): any {\n const pathKey = path.join('-');\n const isOpen = this.stateController.isSubMenuOpen(path) || menu.opened;\n const isHovered = this.stateController.isSubMenuHovered(path);\n const isHighlighted = this.stateController.isSubMenuHighlighted(path);\n const isSelected = menu.selected;\n \n return html`\n <ul \n class=\"sub-menu ${isHighlighted ? 'highlighted' : ''} ${menu.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}\"\n data-path=${pathKey}\n tabindex=\"0\"\n @mouseenter=${() => this._handleSubMenuMouseEnter(path)}\n @mouseleave=${() => this._handleSubMenuMouseLeave(path)}\n @click=${!menu.disabled ? (e: Event) => {\n // Handle keyboard activation on the ul element\n const target = e.target as HTMLElement;\n const mouseEvent = e as MouseEvent;\n // If click is on the ul itself (not children) and it's keyboard-generated\n if (target.classList.contains('sub-menu') && mouseEvent.detail === 0) {\n e.stopPropagation(); // Prevent bubbling to parent submenus\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n }\n } : nothing}>\n <div \n class=\"sub-menu-header\"\n @mousedown=${!menu.disabled ? (e: Event) => this._handleSubMenuClick(path, menu.text, e) : nothing}\n @click=${!menu.disabled ? (e: Event) => this._handleSubMenuClick(path, menu.text, e) : nothing}>\n ${menu.icon ? html`<nr-icon class=\"text-icon\" name=\"${menu.icon}\"></nr-icon>` : nothing}\n <span>${menu.text}</span>\n <div class=\"icons-container\">\n ${menu.status?.icon ? html`\n <nr-icon name=${menu.status.icon} class=\"status-icon\"></nr-icon>\n ` : nothing}\n ${(isHighlighted || isHovered) && menu.menu?.actions ? html`\n <nr-dropdown \n .items=${this._convertActionsToDropdownItems(menu.menu.actions)} \n trigger=\"click\" \n placement=\"bottom-end\"\n @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\"></nr-icon>\n </nr-dropdown>\n ` : nothing}\n ${menu.children && menu.children.length ? html`\n <nr-icon \n id=\"toggle-icon\" \n name=\"${isOpen ? 'angle-up' : 'angle-down'}\" \n @mousedown=${!menu.disabled ? (e: Event) => this._toggleSubMenu(path, e) : nothing}>\n </nr-icon>\n ` : nothing}\n </div>\n </div>\n <div class=\"sub-menu-children\" style=\"display: ${isOpen ? 'block' : 'none'}\">\n ${menu.children ? this._renderMenuItems(menu.children, path) : nothing}\n </div>\n </ul>\n `;\n }\n\n private _renderMenuItems(items: IMenu[], parentPath: number[] = []): any {\n return items.map((menu, index) => {\n const currentPath = [...parentPath, index];\n \n if (menu.children) {\n return this._renderSubMenu(menu, currentPath);\n } else {\n return this._renderMenuLink(menu, currentPath);\n }\n });\n }\n\n override render() {\n this._linkIndex = 0;\n return html`\n <ul class=\"menu-root menu--${this.size}\">\n ${this._renderMenuItems(this.items)}\n </ul>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './menu.style.js';\nimport { IMenu, IAction, MenuSize, IconPosition } from './menu.types.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { StateController, KeyboardController, AccessibilityController } from './controllers/index.js';\n\n/**\n * Versatile menu component for hierarchical navigation with support for nested submenus.\n *\n * @example\n * ```html\n * <nr-menu .items=${menuItems}></nr-menu>\n * <nr-menu .items=${menuItems} arrowPosition=\"left\"></nr-menu>\n * ```\n *\n * @fires change - Menu item selected\n * @fires action-click - Menu action clicked\n * @fires label-edit - Menu item label edited (detail: { path, oldValue, newValue })\n *\n * @slot - Menu items (auto-generated from items property)\n */\n@customElement('nr-menu')\nexport class NrMenuElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n \n override requiredComponents = ['nr-icon', 'nr-dropdown'];\n\n /** Menu items configuration */\n @property({ type: Array })\n items: IMenu[] = [];\n\n /** Menu size variant (small, medium, large) */\n @property({ type: String })\n size: MenuSize | string = MenuSize.Medium;\n\n /** Default arrow icon position for submenus (left or right) */\n @property({ type: String })\n arrowPosition: IconPosition | string = IconPosition.Right;\n\n /** Callback for label edit events (alternative to event listener) */\n @property({ type: Object, attribute: false })\n onLabelEdit?: (detail: { path: number[]; oldValue: string; newValue: string }) => void;\n\n /** Track context menu state */\n @state()\n private _contextMenuState: { path: number[]; x: number; y: number; actions: IAction[] } | null = null;\n\n /** Track which menu item is currently being edited (path as string for comparison) */\n @state()\n private _editingPath: string | null = null;\n\n /** Temporary value while editing */\n @state()\n private _editingValue: string = '';\n\n /** Pending click timeout for double-click detection */\n private _pendingClickTimeout: ReturnType<typeof setTimeout> | null = null;\n\n /** Path of pending click */\n private _pendingClickPath: string | null = null;\n\n // Controllers\n private stateController: StateController;\n // Keyboard controller is connected via Lit's controller system and listens to events\n // @ts-ignore - Controller is used via Lit's reactive controller system\n private keyboardController: KeyboardController;\n private accessibilityController: AccessibilityController;\n\n private _linkIndex = 0;\n\n constructor() {\n super();\n this.stateController = new StateController(this);\n this.keyboardController = new KeyboardController(this, this.stateController);\n this.accessibilityController = new AccessibilityController(this, this.stateController);\n }\n\n override firstUpdated(): void {\n this._initializeSelectedState();\n this.accessibilityController.updateAriaAttributes();\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n // Re-initialize selection state when items change\n if (changedProperties.has('items')) {\n this._initializeSelectedState();\n // Also open submenus that have 'opened' set to true\n this._initializeOpenedState();\n }\n this.accessibilityController.updateAriaAttributes();\n }\n\n private _initializeOpenedState() {\n this._openSubMenusFromItems(this.items, []);\n }\n\n private _openSubMenusFromItems(items: IMenu[], parentPath: number[]): void {\n for (let index = 0; index < items.length; index++) {\n const item = items[index];\n const currentPath = [...parentPath, index];\n\n if (item.children) {\n // If this item has 'opened' set to true, open it\n if (item.opened) {\n this.stateController.openSubMenu(currentPath);\n }\n // Recursively check children\n this._openSubMenusFromItems(item.children, currentPath);\n }\n }\n }\n\n private _initializeSelectedState() {\n this._linkIndex = 0;\n this._findSelectedPath(this.items);\n }\n\n private _findSelectedPath(items: IMenu[], path: number[] = []): boolean {\n for (let index = 0; index < items.length; index++) {\n const item = items[index];\n const currentPath = [...path, index];\n \n if (item.children) {\n if (this._findSelectedPath(item.children, currentPath)) {\n return true;\n }\n } else {\n if (item.selected) {\n this.stateController.setSelectedPath(currentPath);\n return true;\n }\n }\n }\n return false;\n }\n\n private _handleLinkClick(path: number[], value: string, editable: boolean, event?: Event) {\n if ((event?.target as HTMLElement)?.classList.contains('action-icon')) {\n return;\n }\n\n if (event?.type === 'click') {\n const mouseEvent = event as MouseEvent;\n if (mouseEvent.detail > 0) {\n return;\n }\n }\n\n const pathKey = path.join('-');\n\n // If editable, delay the click to allow double-click detection\n if (editable && event?.type === 'mousedown') {\n // Clear any existing pending click\n if (this._pendingClickTimeout) {\n clearTimeout(this._pendingClickTimeout);\n }\n\n this._pendingClickPath = pathKey;\n this._pendingClickTimeout = setTimeout(() => {\n if (this._pendingClickPath === pathKey) {\n this._executeClick(path, value);\n this._pendingClickPath = null;\n }\n }, 200); // 200ms delay for double-click detection\n return;\n }\n\n this._executeClick(path, value);\n }\n\n private _executeClick(path: number[], value: string) {\n this.stateController.setSelectedPath(path);\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { path, value },\n })\n );\n\n this.requestUpdate();\n }\n\n private _handleSubMenuClick(path: number[], value: string, editable: boolean, event: Event) {\n const mouseEvent = event as MouseEvent;\n const target = event.target as HTMLElement;\n\n // Don't handle if clicking on toggle icon or its parent container\n if (target.id === 'toggle-icon' || target.closest('#toggle-icon')) {\n return;\n }\n\n // If it's a click event\n if (event.type === 'click') {\n // Check if it's keyboard activation (Enter/Space) - detail will be 0\n if (mouseEvent.detail === 0) {\n // Keyboard activation - toggle the submenu\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n return;\n }\n // Real mouse click - already handled by mousedown, so return\n return;\n }\n\n const pathKey = path.join('-');\n\n // If editable, delay the click to allow double-click detection\n if (editable) {\n // Clear any existing pending click\n if (this._pendingClickTimeout) {\n clearTimeout(this._pendingClickTimeout);\n }\n\n this._pendingClickPath = pathKey;\n this._pendingClickTimeout = setTimeout(() => {\n if (this._pendingClickPath === pathKey) {\n this._executeSubMenuClick(path, value);\n this._pendingClickPath = null;\n }\n }, 200);\n return;\n }\n\n this._executeSubMenuClick(path, value);\n }\n\n private _executeSubMenuClick(path: number[], value: string) {\n this.stateController.setSelectedPath([]);\n this.stateController.clearHighlights();\n this.stateController.setHighlighted(path, true);\n\n // Toggle the submenu when clicking on header\n this.stateController.toggleSubMenu(path);\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { path, value },\n })\n );\n\n this.requestUpdate();\n }\n\n private _toggleSubMenu(path: number[], event: Event) {\n event.stopPropagation();\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n }\n\n private _handleSubMenuMouseEnter(path: number[]) {\n this.stateController.setHovered(path, true);\n this.requestUpdate();\n }\n\n private _handleSubMenuMouseLeave(path: number[]) {\n this.stateController.setHovered(path, false);\n this.requestUpdate();\n }\n\n private _handleActionClick(path: number[], event: CustomEvent) {\n const item = event.detail.item;\n const originalEvent = event.detail.originalEvent;\n const dropdown = event.detail.dropdown;\n\n // Create a close callback for async actions\n const close = () => {\n if (dropdown) {\n if (typeof dropdown.hide === 'function') {\n dropdown.hide();\n } else if (typeof dropdown.close === 'function') {\n dropdown.close();\n }\n }\n };\n\n this.dispatchEvent(\n new CustomEvent('action-click', {\n detail: { value: item.value, path, item, originalEvent, close },\n composed: true,\n bubbles: true,\n })\n );\n }\n\n private _handleContextMenu(path: number[], menu: IMenu, event: MouseEvent) {\n if (!menu.menu?.actions?.length) return;\n\n event.preventDefault();\n event.stopPropagation();\n\n this._contextMenuState = {\n path,\n x: event.clientX,\n y: event.clientY,\n actions: menu.menu.actions\n };\n\n this.requestUpdate();\n\n // Wait for render then show the dropdown\n this.updateComplete.then(() => {\n const dropdown = this.shadowRoot?.querySelector('#context-menu-dropdown') as any;\n if (dropdown && typeof dropdown.show === 'function') {\n dropdown.show();\n }\n });\n }\n\n private _handleContextMenuAction(path: number[], event: CustomEvent) {\n const item = event.detail.item;\n const originalEvent = event.detail.originalEvent;\n const dropdown = event.detail.dropdown;\n\n // Create a close callback\n const close = () => {\n this._contextMenuState = null;\n if (dropdown) {\n if (typeof dropdown.hide === 'function') {\n dropdown.hide();\n } else if (typeof dropdown.close === 'function') {\n dropdown.close();\n }\n }\n this.requestUpdate();\n };\n\n this.dispatchEvent(\n new CustomEvent('action-click', {\n detail: { value: item.value, path, item, originalEvent, close },\n composed: true,\n bubbles: true,\n })\n );\n\n close();\n }\n\n private _handleContextMenuClose() {\n this._contextMenuState = null;\n this.requestUpdate();\n }\n\n private _handleDoubleClick(path: number[], menu: IMenu, event: Event) {\n if (menu.disabled) return;\n\n event.preventDefault();\n event.stopPropagation();\n\n // Cancel any pending single click\n if (this._pendingClickTimeout) {\n clearTimeout(this._pendingClickTimeout);\n this._pendingClickTimeout = null;\n this._pendingClickPath = null;\n }\n\n const pathKey = path.join('-');\n this._editingPath = pathKey;\n this._editingValue = menu.text;\n this.requestUpdate();\n\n // Focus the input after render\n this.updateComplete.then(() => {\n const input = this.shadowRoot?.querySelector(`input[data-edit-path=\"${pathKey}\"]`) as HTMLInputElement;\n if (input) {\n input.focus();\n input.select();\n }\n });\n }\n\n private _handleEditInput(event: Event) {\n event.stopPropagation();\n const input = event.target as HTMLInputElement;\n this._editingValue = input.value;\n }\n\n private _handleEditKeyDown(path: number[], originalText: string, event: KeyboardEvent) {\n event.stopPropagation(); // Prevent keyboard navigation from capturing keys\n console.log('Edit keydown:', event.key, 'editingValue:', this._editingValue);\n if (event.key === 'Enter') {\n event.preventDefault();\n // Get the current value directly from the input\n const input = event.target as HTMLInputElement;\n this._editingValue = input.value;\n console.log('Saving with value:', this._editingValue);\n this._saveEdit(path, originalText);\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this._cancelEdit();\n }\n }\n\n private _handleEditBlur(path: number[], originalText: string, event: FocusEvent) {\n // Check if focus is moving to another element within this component\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (relatedTarget && this.shadowRoot?.contains(relatedTarget)) {\n return; // Don't save if focus is moving within the component\n }\n\n // Delay to allow click events to process first\n setTimeout(() => {\n if (this._editingPath === path.join('-')) {\n this._saveEdit(path, originalText);\n }\n }, 200);\n }\n\n private _saveEdit(path: number[], originalText: string) {\n const newValue = this._editingValue.trim();\n console.log('_saveEdit called:', { newValue, originalText, willEmit: newValue && newValue !== originalText });\n\n if (newValue && newValue !== originalText) {\n const detail = {\n path,\n oldValue: originalText,\n newValue,\n };\n\n // Call callback if provided\n if (this.onLabelEdit) {\n console.log('Calling onLabelEdit callback');\n this.onLabelEdit(detail);\n }\n\n // Also dispatch event\n console.log('Dispatching label-edit event from:', this.tagName);\n const event = new CustomEvent('label-edit', {\n bubbles: true,\n composed: true,\n detail,\n });\n this.dispatchEvent(event);\n }\n\n this._editingPath = null;\n this._editingValue = '';\n this.requestUpdate();\n }\n\n private _cancelEdit() {\n this._editingPath = null;\n this._editingValue = '';\n this.requestUpdate();\n }\n\n private _isEditing(path: number[]): boolean {\n return this._editingPath === path.join('-');\n }\n\n private _isPathSelected(path: number[]): boolean {\n return this.stateController.isPathSelected(path);\n }\n\n private _convertActionsToDropdownItems(actions: IAction[]): any[] {\n return actions.map(action => ({\n id: action.value,\n label: action.label,\n value: action.value,\n icon: action.icon,\n additionalData: (action as any).additionalData\n }));\n }\n\n private _renderMenuLink(menu: IMenu, path: number[]): any {\n const pathKey = path.join('-');\n const isSelected = this._isPathSelected(path);\n const isEditing = this._isEditing(path);\n const linkIndex = this._linkIndex++;\n\n return html`\n <li\n class=\"menu-link ${isSelected ? 'selected' : ''} ${menu.disabled ? 'disabled' : ''} ${isEditing ? 'editing' : ''}\"\n data-path=${pathKey}\n data-index=${linkIndex}\n tabindex=${isEditing ? -1 : 0}\n @mousedown=${!menu.disabled && !isEditing ? (e: Event) => this._handleLinkClick(path, menu.text, !!menu.editable, e) : nothing}\n @click=${!menu.disabled && !isEditing ? (e: Event) => this._handleLinkClick(path, menu.text, !!menu.editable, e) : nothing}\n @dblclick=${!menu.disabled ? (e: Event) => this._handleDoubleClick(path, menu, e) : nothing}\n @contextmenu=${!menu.disabled && menu.menu?.actions ? (e: MouseEvent) => this._handleContextMenu(path, menu, e) : nothing}>\n <div class=\"icon-container\">\n ${menu.icon ? html`\n ${!menu.text\n ? html`<div class=\"icon-only\"><nr-icon name=\"${menu.icon}\"></nr-icon></div>`\n : html`<nr-icon name=\"${menu.icon}\" size=\"small\"></nr-icon>`}\n ` : nothing}\n </div>\n ${menu.text ? html`\n <div class=\"action-text-container\">\n <div class=\"text-container\" @dblclick=${!menu.disabled ? (e: Event) => this._handleDoubleClick(path, menu, e) : nothing}>\n ${isEditing ? html`\n <input\n type=\"text\"\n class=\"edit-input\"\n data-edit-path=${pathKey}\n .value=${this._editingValue}\n @input=${this._handleEditInput}\n @keydown=${(e: KeyboardEvent) => this._handleEditKeyDown(path, menu.text, e)}\n @blur=${(e: FocusEvent) => this._handleEditBlur(path, menu.text, e)}\n />\n ` : html`<span>${menu.text}</span>`}\n </div>\n <div class=\"icon-container\">\n ${menu.status?.icon ? html`\n <nr-icon name=${menu.status.icon} class=\"status-icon\" size=\"small\"></nr-icon>\n ` : nothing}\n ${menu.menu?.actions ? html`\n <nr-dropdown\n .items=${this._convertActionsToDropdownItems(menu.menu.actions)}\n trigger=\"click\"\n placement=\"bottom-end\"\n @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\" size=\"small\"></nr-icon>\n </nr-dropdown>\n ` : nothing}\n </div>\n </div>\n ` : nothing}\n </li>\n `;\n }\n\n private _renderSubMenu(menu: IMenu, path: number[]): any {\n const pathKey = path.join('-');\n const isOpen = this.stateController.isSubMenuOpen(path) || menu.opened;\n const isHovered = this.stateController.isSubMenuHovered(path);\n const isHighlighted = this.stateController.isSubMenuHighlighted(path);\n const isSelected = menu.selected;\n const isEditing = this._isEditing(path);\n\n // Determine icon position - use individual menu item setting or fall back to global setting\n const iconPosition = menu.iconPosition || this.arrowPosition;\n const isLeftPosition = iconPosition === IconPosition.Left || iconPosition === 'left';\n\n return html`\n <ul\n class=\"sub-menu ${isHighlighted ? 'highlighted' : ''} ${menu.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''} ${isLeftPosition ? 'arrow-left' : 'arrow-right'} ${isEditing ? 'editing' : ''}\"\n data-path=${pathKey}\n tabindex=${isEditing ? -1 : 0}\n @mouseenter=${() => this._handleSubMenuMouseEnter(path)}\n @mouseleave=${() => this._handleSubMenuMouseLeave(path)}\n @click=${!menu.disabled && !isEditing ? (e: Event) => {\n // Handle keyboard activation on the ul element\n const target = e.target as HTMLElement;\n const mouseEvent = e as MouseEvent;\n // If click is on the ul itself (not children) and it's keyboard-generated\n if (target.classList.contains('sub-menu') && mouseEvent.detail === 0) {\n e.stopPropagation(); // Prevent bubbling to parent submenus\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n }\n } : nothing}>\n <div\n class=\"sub-menu-header\"\n @mousedown=${!menu.disabled && !isEditing ? (e: Event) => this._handleSubMenuClick(path, menu.text, !!menu.editable, e) : nothing}\n @click=${!menu.disabled && !isEditing ? (e: Event) => this._handleSubMenuClick(path, menu.text, !!menu.editable, e) : nothing}\n @dblclick=${!menu.disabled && menu.editable ? (e: Event) => this._handleDoubleClick(path, menu, e) : nothing}\n @contextmenu=${!menu.disabled && menu.menu?.actions ? (e: MouseEvent) => this._handleContextMenu(path, menu, e) : nothing}>\n ${isLeftPosition && menu.children && menu.children.length ? html`\n <nr-icon\n id=\"toggle-icon\"\n name=\"${isOpen ? 'ChevronDown' : 'ChevronRight'}\"\n @mousedown=${!menu.disabled ? (e: Event) => this._toggleSubMenu(path, e) : nothing}\n size=\"small\">\n </nr-icon>\n ` : nothing}\n ${menu.icon ? html`<nr-icon class=\"text-icon\" name=\"${menu.icon}\" size=\"small\"></nr-icon>` : nothing}\n ${isEditing ? html`\n <input\n type=\"text\"\n class=\"edit-input\"\n data-edit-path=${pathKey}\n .value=${this._editingValue}\n @input=${this._handleEditInput}\n @keydown=${(e: KeyboardEvent) => this._handleEditKeyDown(path, menu.text, e)}\n @blur=${(e: FocusEvent) => this._handleEditBlur(path, menu.text, e)}\n />\n ` : html`<span class=\"menu-text\" @dblclick=${!menu.disabled ? (e: Event) => this._handleDoubleClick(path, menu, e) : nothing}>${menu.text}</span>`}\n <div class=\"icons-container\">\n ${menu.status?.icon ? html`\n <nr-icon name=${menu.status.icon} class=\"status-icon\" size=\"small\"></nr-icon>\n ` : nothing}\n ${(isHighlighted || isHovered) && menu.menu?.actions ? html`\n <nr-dropdown\n .items=${this._convertActionsToDropdownItems(menu.menu.actions)}\n trigger=\"click\"\n placement=\"bottom-end\"\n @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\" size=\"small\"></nr-icon>\n </nr-dropdown>\n ` : nothing}\n ${!isLeftPosition && menu.children && menu.children.length ? html`\n <nr-icon\n id=\"toggle-icon\"\n name=\"${isOpen ? 'ChevronDown' : 'ChevronRight'}\"\n @mousedown=${!menu.disabled ? (e: Event) => this._toggleSubMenu(path, e) : nothing}\n size=\"small\">\n </nr-icon>\n ` : nothing}\n </div>\n </div>\n <div class=\"sub-menu-children\" style=\"display: ${isOpen ? 'block' : 'none'}\">\n ${menu.children ? this._renderMenuItems(menu.children, path) : nothing}\n </div>\n </ul>\n `;\n }\n\n private _renderMenuItems(items: IMenu[], parentPath: number[] = []): any {\n return items.map((menu, index) => {\n const currentPath = [...parentPath, index];\n \n if (menu.children) {\n return this._renderSubMenu(menu, currentPath);\n } else {\n return this._renderMenuLink(menu, currentPath);\n }\n });\n }\n\n private _renderContextMenu() {\n if (!this._contextMenuState) return nothing;\n\n const { x, y, actions, path } = this._contextMenuState;\n\n return html`\n <nr-dropdown\n id=\"context-menu-dropdown\"\n .items=${this._convertActionsToDropdownItems(actions)}\n trigger=\"manual\"\n placement=\"bottom-start\"\n style=\"position: fixed; top: ${y}px; left: ${x}px; z-index: 9999;\"\n @nr-dropdown-item-click=${(e: CustomEvent) => this._handleContextMenuAction(path, e)}\n @nr-dropdown-close=${() => this._handleContextMenuClose()}\n >\n <span slot=\"trigger\" style=\"display: block; width: 1px; height: 1px;\"></span>\n </nr-dropdown>\n `;\n }\n\n override render() {\n this._linkIndex = 0;\n return html`\n <ul class=\"menu-root menu--${this.size}\">\n ${this._renderMenuItems(this.items)}\n </ul>\n ${this._renderContextMenu()}\n `;\n }\n}\n"]}
package/menu.constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.constants.js","sourceRoot":"","sources":["../../../src/components/menu/menu.constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AACjC,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;AACrB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,QAIX;AAJD,WAAY,QAAQ;IAClB,2BAAe,CAAA;IACf,2BAAe,CAAA;IACf,wCAA4B,CAAA;AAC9B,CAAC,EAJW,QAAQ,KAAR,QAAQ,QAInB","sourcesContent":["export const EMPTY_STRING = '';\nexport const NOTHING_STRING = '';\nexport enum OPTION_TYPES {\n GROUP = 'group',\n DIVIDER = 'divider',\n}\n\nexport enum TRIGGERS {\n Click = 'click',\n Hover = 'hover',\n ContextMenu = 'context-menu',\n}\n"]}
1
+ {"version":3,"file":"menu.constants.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AACjC,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;AACrB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,QAIX;AAJD,WAAY,QAAQ;IAClB,2BAAe,CAAA;IACf,2BAAe,CAAA;IACf,wCAA4B,CAAA;AAC9B,CAAC,EAJW,QAAQ,KAAR,QAAQ,QAInB","sourcesContent":["export const EMPTY_STRING = '';\nexport const NOTHING_STRING = '';\nexport enum OPTION_TYPES {\n GROUP = 'group',\n DIVIDER = 'divider',\n}\n\nexport enum TRIGGERS {\n Click = 'click',\n Hover = 'hover',\n ContextMenu = 'context-menu',\n}\n"]}
package/menu.style.js CHANGED
@@ -21,7 +21,7 @@ const menuStyle = css `
21
21
  display: flex;
22
22
  align-items: center;
23
23
  cursor: pointer;
24
- padding: var(--nuraly-menu-link-padding-vertical) var(--nuraly-menu-link-padding-horizontal);
24
+ padding: var(--nuraly-menu-link-padding, 1px);
25
25
  color: var(--nuraly-menu-link-color);
26
26
  background-color: var(--nuraly-menu-link-background-color);
27
27
  border-left: 4px solid transparent;
@@ -29,9 +29,8 @@ const menuStyle = css `
29
29
  border-right: 2px solid transparent;
30
30
  border-bottom: 2px solid transparent;
31
31
  border-radius: var(--nuraly-menu-border-radius);
32
- transition: background-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),
33
- color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),
34
- border-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing);
32
+ margin-bottom: 4px;
33
+ gap: 8px;
35
34
  }
36
35
 
37
36
  .menu-link.disabled {
@@ -48,42 +47,40 @@ const menuStyle = css `
48
47
  .menu-link.selected {
49
48
  background-color: var(--nuraly-menu-selected-link-background-color);
50
49
  color: var(--nuraly-menu-selected-color);
51
- border-left: var(--nuraly-menu-selected-link-border);
50
+ border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
52
51
  }
53
52
 
54
53
  .menu-link:not(.disabled):not(.selected):focus {
55
54
  outline: none;
56
- border-left: 4px solid transparent;
57
- border-top: var(--nuraly-menu-focus-border);
58
- border-right: var(--nuraly-menu-focus-border);
59
- border-bottom: var(--nuraly-menu-focus-border);
55
+ border-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
56
+ border-left-color: transparent;
60
57
  color: var(--nuraly-menu-focus-color);
61
58
  }
62
59
 
63
60
  .menu-link.selected:not(.disabled):focus {
64
61
  outline: none;
65
- border-left: var(--nuraly-menu-selected-link-border);
66
- border-top: var(--nuraly-menu-focus-border);
67
- border-right: var(--nuraly-menu-focus-border);
68
- border-bottom: var(--nuraly-menu-focus-border);
62
+ border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
63
+ border-top-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
64
+ border-right-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
65
+ border-bottom-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
69
66
  color: var(--nuraly-menu-focus-color);
70
67
  }
71
68
 
72
69
  /* Focus-visible for keyboard navigation */
73
70
  .menu-link:not(.disabled):focus-visible {
74
71
  outline: none;
75
- border-top: var(--nuraly-menu-focus-border);
76
- border-right: var(--nuraly-menu-focus-border);
77
- border-bottom: var(--nuraly-menu-focus-border);
72
+ border-top-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
73
+ border-right-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
74
+ border-bottom-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
78
75
  }
79
76
 
80
77
  .menu-link:not(.disabled):not(.selected):focus-visible {
81
- border-left: var(--nuraly-menu-focus-border);
78
+ border-left-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));
82
79
  color: var(--nuraly-menu-focus-color);
83
80
  }
84
81
 
85
82
  .menu-link.selected:not(.disabled):focus-visible {
86
- border-left: var(--nuraly-menu-selected-link-border) !important;
83
+ border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
87
84
  color: var(--nuraly-menu-focus-color);
88
85
  }
89
86
 
@@ -95,10 +92,7 @@ const menuStyle = css `
95
92
  .menu-link.selected:not(.disabled):active {
96
93
  background-color: var(--nuraly-menu-active-background-color);
97
94
  color: var(--nuraly-menu-active-color);
98
- border-left: var(--nuraly-menu-selected-link-border) !important;
99
- border-top: 2px solid transparent;
100
- border-right: 2px solid transparent;
101
- border-bottom: 2px solid transparent;
95
+ border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
102
96
  }
103
97
 
104
98
  .menu-link .action-text-container {
@@ -117,12 +111,22 @@ const menuStyle = css `
117
111
  .menu-link nr-icon {
118
112
  display: flex;
119
113
  align-items: center;
120
- --nuraly-icon-color: var(--nuraly-menu-link-icon-color);
114
+ --nuraly-color-icon: var(--nuraly-menu-link-icon-color);
115
+ --nuraly-icon-size: var(--nuraly-menu-icon-size, 20px);
116
+ flex-shrink: 0;
121
117
  }
122
118
 
123
119
  .menu-link nr-icon:first-child {
124
- padding-right: var(--nuraly-menu-icon-padding-right);
125
- padding-left: var(--nuraly-menu-icon-padding-left);
120
+ padding-right: 0;
121
+ padding-left: 0;
122
+ }
123
+
124
+ .menu-link:not(.disabled):not(.selected):hover nr-icon {
125
+ --nuraly-color-icon: var(--nuraly-menu-hover-link-icon-color);
126
+ }
127
+
128
+ .menu-link.selected nr-icon {
129
+ --nuraly-color-icon: var(--nuraly-menu-selected-link-icon-color);
126
130
  }
127
131
 
128
132
  /* Sub Menu Styles */
@@ -132,6 +136,7 @@ const menuStyle = css `
132
136
  padding-left: 0;
133
137
  list-style: none;
134
138
  color: var(--nuraly-sub-menu-color);
139
+ margin-bottom: 4px;
135
140
  }
136
141
 
137
142
  .sub-menu.disabled .sub-menu-header {
@@ -150,38 +155,38 @@ const menuStyle = css `
150
155
  justify-content: space-between;
151
156
  align-items: center;
152
157
  cursor: pointer;
153
- padding: var(--nuraly-sub-menu-padding-vertical) var(--nuraly-sub-menu-padding-horizontal);
158
+ padding: var(--nuraly-sub-menu-header-padding, 1px);
154
159
  border-left: 4px solid transparent;
155
160
  border-top: 2px solid transparent;
156
161
  border-right: 2px solid transparent;
157
162
  border-bottom: 2px solid transparent;
158
163
  border-radius: var(--nuraly-menu-border-radius);
159
- transition: background-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),
160
- color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),
161
- border-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing);
164
+ gap: 8px;
162
165
  }
163
166
 
164
167
  .sub-menu .sub-menu-header span {
165
168
  flex: 1;
166
169
  min-width: 0;
167
- padding-left: var(--nuraly-sub-menu-icon-padding-right);
170
+ padding-left: 0;
168
171
  }
169
172
 
170
173
  .sub-menu .text-icon {
171
174
  flex-shrink: 0;
175
+ --nuraly-color-icon: var(--nuraly-sub-menu-text-icon-color);
176
+ --nuraly-icon-size: var(--nuraly-menu-icon-size, 20px);
172
177
  }
173
178
 
174
179
  .sub-menu .icons-container {
175
180
  display: flex;
176
181
  align-items: center;
177
- gap: var(--nuraly-sub-menu-icon-padding-right);
182
+ gap: 8px;
178
183
  position: relative;
179
184
  flex-shrink: 0;
180
185
  /* Reserve space for dropdown to prevent layout shift */
181
186
  min-width: fit-content;
182
187
  /* Fixed height to prevent vertical shifting */
183
188
  height: 100%;
184
- min-height: 24px;
189
+ min-height: 20px;
185
190
  }
186
191
 
187
192
  .menu-link .icon-container {
@@ -191,7 +196,7 @@ const menuStyle = css `
191
196
  flex-shrink: 0;
192
197
  /* Fixed height to prevent vertical shifting */
193
198
  height: 100%;
194
- min-height: 24px;
199
+ min-height: 20px;
195
200
  }
196
201
 
197
202
  .sub-menu nr-dropdown,
@@ -211,54 +216,56 @@ const menuStyle = css `
211
216
  }
212
217
 
213
218
  .sub-menu .action-icon {
214
- --nuraly-icon-color: var(--nuraly-sub-menu-action-icon-color);
219
+ --nuraly-color-icon: var(--nuraly-sub-menu-action-icon-color);
220
+ --nuraly-icon-size: var(--nuraly-menu-icon-size, 16px);
215
221
  }
216
222
 
217
223
  .sub-menu .status-icon {
218
- --nuraly-icon-color: var(--nuraly-sub-menu-status-icon-color);
224
+ --nuraly-color-icon: var(--nuraly-sub-menu-status-icon-color);
225
+ --nuraly-icon-size: var(--nuraly-menu-icon-size, 16px);
219
226
  }
220
227
 
221
228
  .sub-menu .text-icon {
222
- --nuraly-icon-color: var(--nuraly-sub-menu-text-icon-color);
229
+ --nuraly-color-icon: var(--nuraly-sub-menu-text-icon-color);
230
+ --nuraly-icon-size: var(--nuraly-menu-icon-size, 20px);
223
231
  }
224
232
 
225
233
  .sub-menu #toggle-icon {
226
- --nuraly-icon-color: var(--nuraly-sub-menu-toggle-icon-color);
234
+ --nuraly-color-icon: var(--nuraly-sub-menu-toggle-icon-color);
235
+ --nuraly-icon-size: var(--nuraly-menu-icon-size, 16px);
227
236
  }
228
237
 
229
238
  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus {
230
239
  outline: none;
231
- border-left: 4px solid transparent;
232
- border-top: var(--nuraly-sub-menu-focus-border);
233
- border-right: var(--nuraly-sub-menu-focus-border);
234
- border-bottom: var(--nuraly-sub-menu-focus-border);
240
+ border-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
241
+ border-left-color: transparent;
235
242
  color: var(--nuraly-sub-menu-focus-color);
236
243
  }
237
244
 
238
245
  .sub-menu.selected:not(.disabled) .sub-menu-header:focus {
239
246
  outline: none;
240
- border-left: var(--nuraly-menu-selected-link-border);
241
- border-top: var(--nuraly-sub-menu-focus-border);
242
- border-right: var(--nuraly-sub-menu-focus-border);
243
- border-bottom: var(--nuraly-sub-menu-focus-border);
247
+ border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
248
+ border-top-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
249
+ border-right-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
250
+ border-bottom-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
244
251
  color: var(--nuraly-sub-menu-focus-color);
245
252
  }
246
253
 
247
254
  /* Focus-visible for keyboard navigation on submenus */
248
255
  .sub-menu:not(.disabled) .sub-menu-header:focus-visible {
249
256
  outline: none;
250
- border-top: var(--nuraly-sub-menu-focus-border);
251
- border-right: var(--nuraly-sub-menu-focus-border);
252
- border-bottom: var(--nuraly-sub-menu-focus-border);
257
+ border-top-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
258
+ border-right-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
259
+ border-bottom-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
253
260
  }
254
261
 
255
262
  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus-visible {
256
- border-left: var(--nuraly-sub-menu-focus-border);
263
+ border-left-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));
257
264
  color: var(--nuraly-sub-menu-focus-color);
258
265
  }
259
266
 
260
267
  .sub-menu.selected:not(.disabled) .sub-menu-header:focus-visible {
261
- border-left: var(--nuraly-menu-selected-link-border) !important;
268
+ border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
262
269
  color: var(--nuraly-sub-menu-focus-color);
263
270
  }
264
271
 
@@ -270,19 +277,13 @@ const menuStyle = css `
270
277
  .sub-menu.selected:not(.disabled) .sub-menu-header {
271
278
  background-color: var(--nuraly-menu-selected-link-background-color);
272
279
  color: var(--nuraly-menu-selected-color);
273
- border-left: var(--nuraly-menu-selected-link-border);
274
- border-top: 2px solid transparent;
275
- border-right: 2px solid transparent;
276
- border-bottom: 2px solid transparent;
280
+ border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
277
281
  }
278
282
 
279
283
  .sub-menu.selected:not(.disabled) .sub-menu-header:active {
280
284
  background-color: var(--nuraly-sub-menu-active-background-color);
281
285
  color: var(--nuraly-sub-menu-active-color);
282
- border-left: var(--nuraly-menu-selected-link-border);
283
- border-top: 2px solid transparent;
284
- border-right: 2px solid transparent;
285
- border-bottom: 2px solid transparent;
286
+ border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));
286
287
  }
287
288
 
288
289
  .sub-menu:not(.disabled):not(.selected) .sub-menu-header:active {
@@ -294,30 +295,78 @@ const menuStyle = css `
294
295
  padding-left: var(--nuraly-sub-menu-nested-padding-left);
295
296
  }
296
297
 
298
+ /* Arrow positioning for left arrow */
299
+ .sub-menu.arrow-left .sub-menu-header {
300
+ padding-left: var(--nuraly-sub-menu-arrow-left-padding, 8px); /* Add space for left arrow */
301
+ }
302
+
303
+ .sub-menu.arrow-left .sub-menu-header #toggle-icon {
304
+ margin-right: 8px; /* Space between arrow and text */
305
+ order: -1; /* Place arrow at the beginning */
306
+ }
307
+
308
+ /* Arrow positioning for right arrow (default) */
309
+ .sub-menu.arrow-right .sub-menu-header #toggle-icon {
310
+ margin-left: 8px; /* Space between text and arrow */
311
+ }
312
+
313
+ /* Ensure proper spacing in the header */
314
+ .sub-menu.arrow-left .sub-menu-header span {
315
+ padding-left: 0; /* Remove left padding when arrow is on the left */
316
+ }
317
+
297
318
  /* Size Variants */
298
319
  .menu--small .menu-link {
299
- padding: var(--nuraly-menu-link-padding-vertical-small) var(--nuraly-menu-link-padding-horizontal-small);
320
+ padding: var(--nuraly-menu-link-padding-small, 1px);
300
321
  }
301
322
 
302
323
  .menu--small .sub-menu .sub-menu-header {
303
- padding: var(--nuraly-sub-menu-padding-vertical-small) var(--nuraly-sub-menu-padding-horizontal-small);
324
+ padding: var(--nuraly-sub-menu-header-padding-small, 1px);
304
325
  }
305
326
 
306
327
  .menu--medium .menu-link {
307
- padding: var(--nuraly-menu-link-padding-vertical-medium) var(--nuraly-menu-link-padding-horizontal-medium);
328
+ padding: var(--nuraly-menu-link-padding-medium, 1px);
308
329
  }
309
330
 
310
331
  .menu--medium .sub-menu .sub-menu-header {
311
- padding: var(--nuraly-sub-menu-padding-vertical-medium) var(--nuraly-sub-menu-padding-horizontal-medium);
332
+ padding: var(--nuraly-sub-menu-header-padding-medium, 1px);
312
333
  }
313
334
 
314
335
  .menu--large .menu-link {
315
- padding: var(--nuraly-menu-link-padding-vertical-large) var(--nuraly-menu-link-padding-horizontal-large);
336
+ padding: var(--nuraly-menu-link-padding-large, 1px);
316
337
  }
317
338
 
318
339
  .menu--large .sub-menu .sub-menu-header {
319
- padding: var(--nuraly-sub-menu-padding-vertical-large) var(--nuraly-sub-menu-padding-horizontal-large);
340
+ padding: var(--nuraly-sub-menu-header-padding-large, 1px);
320
341
  }
342
+
343
+ /* Edit input styles */
344
+ .edit-input {
345
+ flex: 1;
346
+ min-width: 0;
347
+ font-size: inherit;
348
+ font-family: inherit;
349
+ font-weight: inherit;
350
+ line-height: inherit;
351
+ color: inherit;
352
+ background-color: var(--nuraly-menu-edit-input-background, transparent);
353
+ border: none;
354
+ border-radius: 0;
355
+ padding: 0;
356
+ margin: 0;
357
+ outline: none;
358
+ }
359
+
360
+ .edit-input:focus {
361
+ outline: none;
362
+ box-shadow: none;
363
+ }
364
+
365
+ .menu-link.editing,
366
+ .sub-menu.editing > .sub-menu-header {
367
+ background-color: var(--nuraly-menu-edit-background, transparent);
368
+ }
369
+
321
370
  `;
322
371
  export const styles = [menuStyle];
323
372
  //# sourceMappingURL=menu.style.js.map
package/menu.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../../src/components/menu/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+TpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuStyle = css`\n /* Root menu container */\n :host {\n display: block;\n }\n\n .menu-root {\n font-size: var(--nuraly-menu-font-size);\n font-family: var(--nuraly-menu-font-family);\n font-weight: var(--nuraly-menu-font-weight);\n line-height: var(--nuraly-menu-line-height);\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n /* Menu Link Styles */\n .menu-link {\n list-style: none;\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: var(--nuraly-menu-link-padding-vertical) var(--nuraly-menu-link-padding-horizontal);\n color: var(--nuraly-menu-link-color);\n background-color: var(--nuraly-menu-link-background-color);\n border-left: 4px solid transparent;\n border-top: 2px solid transparent;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n border-radius: var(--nuraly-menu-border-radius);\n transition: background-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),\n color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),\n border-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing);\n }\n\n .menu-link.disabled {\n color: var(--nuraly-menu-disabled-link-color);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .menu-link:not(.disabled):not(.selected):hover {\n background-color: var(--nuraly-menu-hover-link-background-color);\n color: var(--nuraly-menu-hover-link-color);\n }\n\n .menu-link.selected {\n background-color: var(--nuraly-menu-selected-link-background-color);\n color: var(--nuraly-menu-selected-color);\n border-left: var(--nuraly-menu-selected-link-border);\n }\n\n .menu-link:not(.disabled):not(.selected):focus {\n outline: none;\n border-left: 4px solid transparent;\n border-top: var(--nuraly-menu-focus-border);\n border-right: var(--nuraly-menu-focus-border);\n border-bottom: var(--nuraly-menu-focus-border);\n color: var(--nuraly-menu-focus-color);\n }\n\n .menu-link.selected:not(.disabled):focus {\n outline: none;\n border-left: var(--nuraly-menu-selected-link-border);\n border-top: var(--nuraly-menu-focus-border);\n border-right: var(--nuraly-menu-focus-border);\n border-bottom: var(--nuraly-menu-focus-border);\n color: var(--nuraly-menu-focus-color);\n }\n\n /* Focus-visible for keyboard navigation */\n .menu-link:not(.disabled):focus-visible {\n outline: none;\n border-top: var(--nuraly-menu-focus-border);\n border-right: var(--nuraly-menu-focus-border);\n border-bottom: var(--nuraly-menu-focus-border);\n }\n\n .menu-link:not(.disabled):not(.selected):focus-visible {\n border-left: var(--nuraly-menu-focus-border);\n color: var(--nuraly-menu-focus-color);\n }\n\n .menu-link.selected:not(.disabled):focus-visible {\n border-left: var(--nuraly-menu-selected-link-border) !important;\n color: var(--nuraly-menu-focus-color);\n }\n\n .menu-link:not(.disabled):not(.selected):active {\n color: var(--nuraly-menu-active-color);\n background-color: var(--nuraly-menu-active-background-color);\n }\n\n .menu-link.selected:not(.disabled):active {\n background-color: var(--nuraly-menu-active-background-color);\n color: var(--nuraly-menu-active-color);\n border-left: var(--nuraly-menu-selected-link-border) !important;\n border-top: 2px solid transparent;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n }\n\n .menu-link .action-text-container {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n }\n\n .menu-link .text-container {\n flex: 1;\n min-width: 0;\n }\n\n .menu-link nr-icon {\n display: flex;\n align-items: center;\n --nuraly-icon-color: var(--nuraly-menu-link-icon-color);\n }\n\n .menu-link nr-icon:first-child {\n padding-right: var(--nuraly-menu-icon-padding-right);\n padding-left: var(--nuraly-menu-icon-padding-left);\n }\n\n /* Sub Menu Styles */\n .sub-menu {\n display: flex;\n flex-direction: column;\n padding-left: 0;\n list-style: none;\n color: var(--nuraly-sub-menu-color);\n }\n\n .sub-menu.disabled .sub-menu-header {\n color: var(--nuraly-sub-menu-disabled-color);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .sub-menu.highlighted .sub-menu-header {\n background-color: var(--nuraly-sub-menu-highlighted-background-color);\n color: var(--nuraly-sub-menu-highlighted-color);\n }\n\n .sub-menu .sub-menu-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n padding: var(--nuraly-sub-menu-padding-vertical) var(--nuraly-sub-menu-padding-horizontal);\n border-left: 4px solid transparent;\n border-top: 2px solid transparent;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n border-radius: var(--nuraly-menu-border-radius);\n transition: background-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),\n color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing),\n border-color var(--nuraly-menu-transition-duration) var(--nuraly-menu-transition-timing);\n }\n\n .sub-menu .sub-menu-header span {\n flex: 1;\n min-width: 0;\n padding-left: var(--nuraly-sub-menu-icon-padding-right);\n }\n\n .sub-menu .text-icon {\n flex-shrink: 0;\n }\n\n .sub-menu .icons-container {\n display: flex;\n align-items: center;\n gap: var(--nuraly-sub-menu-icon-padding-right);\n position: relative;\n flex-shrink: 0;\n /* Reserve space for dropdown to prevent layout shift */\n min-width: fit-content;\n /* Fixed height to prevent vertical shifting */\n height: 100%;\n min-height: 24px;\n }\n\n .menu-link .icon-container {\n display: flex;\n align-items: center;\n position: relative;\n flex-shrink: 0;\n /* Fixed height to prevent vertical shifting */\n height: 100%;\n min-height: 24px;\n }\n\n .sub-menu nr-dropdown,\n .menu-link nr-dropdown {\n /* Keep in normal flow but ensure it doesn't grow/shrink */\n display: inline-flex;\n flex-shrink: 0;\n flex-grow: 0;\n align-items: center;\n vertical-align: middle;\n }\n\n .sub-menu .action-icon,\n .menu-link .action-icon {\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .sub-menu .action-icon {\n --nuraly-icon-color: var(--nuraly-sub-menu-action-icon-color);\n }\n\n .sub-menu .status-icon {\n --nuraly-icon-color: var(--nuraly-sub-menu-status-icon-color);\n }\n\n .sub-menu .text-icon {\n --nuraly-icon-color: var(--nuraly-sub-menu-text-icon-color);\n }\n\n .sub-menu #toggle-icon {\n --nuraly-icon-color: var(--nuraly-sub-menu-toggle-icon-color);\n }\n\n .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus {\n outline: none;\n border-left: 4px solid transparent;\n border-top: var(--nuraly-sub-menu-focus-border);\n border-right: var(--nuraly-sub-menu-focus-border);\n border-bottom: var(--nuraly-sub-menu-focus-border);\n color: var(--nuraly-sub-menu-focus-color);\n }\n\n .sub-menu.selected:not(.disabled) .sub-menu-header:focus {\n outline: none;\n border-left: var(--nuraly-menu-selected-link-border);\n border-top: var(--nuraly-sub-menu-focus-border);\n border-right: var(--nuraly-sub-menu-focus-border);\n border-bottom: var(--nuraly-sub-menu-focus-border);\n color: var(--nuraly-sub-menu-focus-color);\n }\n\n /* Focus-visible for keyboard navigation on submenus */\n .sub-menu:not(.disabled) .sub-menu-header:focus-visible {\n outline: none;\n border-top: var(--nuraly-sub-menu-focus-border);\n border-right: var(--nuraly-sub-menu-focus-border);\n border-bottom: var(--nuraly-sub-menu-focus-border);\n }\n\n .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus-visible {\n border-left: var(--nuraly-sub-menu-focus-border);\n color: var(--nuraly-sub-menu-focus-color);\n }\n\n .sub-menu.selected:not(.disabled) .sub-menu-header:focus-visible {\n border-left: var(--nuraly-menu-selected-link-border) !important;\n color: var(--nuraly-sub-menu-focus-color);\n }\n\n .sub-menu:not(.disabled) .sub-menu-header:hover {\n background-color: var(--nuraly-sub-menu-hover-background-color);\n color: var(--nuraly-sub-menu-hover-color);\n }\n\n .sub-menu.selected:not(.disabled) .sub-menu-header {\n background-color: var(--nuraly-menu-selected-link-background-color);\n color: var(--nuraly-menu-selected-color);\n border-left: var(--nuraly-menu-selected-link-border);\n border-top: 2px solid transparent;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n }\n\n .sub-menu.selected:not(.disabled) .sub-menu-header:active {\n background-color: var(--nuraly-sub-menu-active-background-color);\n color: var(--nuraly-sub-menu-active-color);\n border-left: var(--nuraly-menu-selected-link-border);\n border-top: 2px solid transparent;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n }\n\n .sub-menu:not(.disabled):not(.selected) .sub-menu-header:active {\n background-color: var(--nuraly-sub-menu-active-background-color);\n color: var(--nuraly-sub-menu-active-color);\n }\n\n .sub-menu-children {\n padding-left: var(--nuraly-sub-menu-nested-padding-left);\n }\n\n /* Size Variants */\n .menu--small .menu-link {\n padding: var(--nuraly-menu-link-padding-vertical-small) var(--nuraly-menu-link-padding-horizontal-small);\n }\n\n .menu--small .sub-menu .sub-menu-header {\n padding: var(--nuraly-sub-menu-padding-vertical-small) var(--nuraly-sub-menu-padding-horizontal-small);\n }\n\n .menu--medium .menu-link {\n padding: var(--nuraly-menu-link-padding-vertical-medium) var(--nuraly-menu-link-padding-horizontal-medium);\n }\n\n .menu--medium .sub-menu .sub-menu-header {\n padding: var(--nuraly-sub-menu-padding-vertical-medium) var(--nuraly-sub-menu-padding-horizontal-medium);\n }\n\n .menu--large .menu-link {\n padding: var(--nuraly-menu-link-padding-vertical-large) var(--nuraly-menu-link-padding-horizontal-large);\n }\n\n .menu--large .sub-menu .sub-menu-header {\n padding: var(--nuraly-sub-menu-padding-vertical-large) var(--nuraly-sub-menu-padding-horizontal-large);\n }\n`;\n\nexport const styles = [menuStyle];\n"]}
1
+ {"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgXpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuStyle = css`\n /* Root menu container */\n :host {\n display: block;\n }\n\n .menu-root {\n font-size: var(--nuraly-menu-font-size);\n font-family: var(--nuraly-menu-font-family);\n font-weight: var(--nuraly-menu-font-weight);\n line-height: var(--nuraly-menu-line-height);\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n /* Menu Link Styles */\n .menu-link {\n list-style: none;\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: var(--nuraly-menu-link-padding, 1px);\n color: var(--nuraly-menu-link-color);\n background-color: var(--nuraly-menu-link-background-color);\n border-left: 4px solid transparent;\n border-top: 2px solid transparent;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n border-radius: var(--nuraly-menu-border-radius);\n margin-bottom: 4px;\n gap: 8px;\n }\n\n .menu-link.disabled {\n color: var(--nuraly-menu-disabled-link-color);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .menu-link:not(.disabled):not(.selected):hover {\n background-color: var(--nuraly-menu-hover-link-background-color);\n color: var(--nuraly-menu-hover-link-color);\n }\n\n .menu-link.selected {\n background-color: var(--nuraly-menu-selected-link-background-color);\n color: var(--nuraly-menu-selected-color);\n border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));\n }\n\n .menu-link:not(.disabled):not(.selected):focus {\n outline: none;\n border-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));\n border-left-color: transparent;\n color: var(--nuraly-menu-focus-color);\n }\n\n .menu-link.selected:not(.disabled):focus {\n outline: none;\n border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));\n border-top-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));\n border-right-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));\n border-bottom-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));\n color: var(--nuraly-menu-focus-color);\n }\n\n /* Focus-visible for keyboard navigation */\n .menu-link:not(.disabled):focus-visible {\n outline: none;\n border-top-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));\n border-right-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));\n border-bottom-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));\n }\n\n .menu-link:not(.disabled):not(.selected):focus-visible {\n border-left-color: var(--nuraly-menu-focus-border-color, var(--nuraly-menu-focus-color));\n color: var(--nuraly-menu-focus-color);\n }\n\n .menu-link.selected:not(.disabled):focus-visible {\n border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));\n color: var(--nuraly-menu-focus-color);\n }\n\n .menu-link:not(.disabled):not(.selected):active {\n color: var(--nuraly-menu-active-color);\n background-color: var(--nuraly-menu-active-background-color);\n }\n\n .menu-link.selected:not(.disabled):active {\n background-color: var(--nuraly-menu-active-background-color);\n color: var(--nuraly-menu-active-color);\n border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));\n }\n\n .menu-link .action-text-container {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n }\n\n .menu-link .text-container {\n flex: 1;\n min-width: 0;\n }\n\n .menu-link nr-icon {\n display: flex;\n align-items: center;\n --nuraly-color-icon: var(--nuraly-menu-link-icon-color);\n --nuraly-icon-size: var(--nuraly-menu-icon-size, 20px);\n flex-shrink: 0;\n }\n\n .menu-link nr-icon:first-child {\n padding-right: 0;\n padding-left: 0;\n }\n\n .menu-link:not(.disabled):not(.selected):hover nr-icon {\n --nuraly-color-icon: var(--nuraly-menu-hover-link-icon-color);\n }\n\n .menu-link.selected nr-icon {\n --nuraly-color-icon: var(--nuraly-menu-selected-link-icon-color);\n }\n\n /* Sub Menu Styles */\n .sub-menu {\n display: flex;\n flex-direction: column;\n padding-left: 0;\n list-style: none;\n color: var(--nuraly-sub-menu-color);\n margin-bottom: 4px;\n }\n\n .sub-menu.disabled .sub-menu-header {\n color: var(--nuraly-sub-menu-disabled-color);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n .sub-menu.highlighted .sub-menu-header {\n background-color: var(--nuraly-sub-menu-highlighted-background-color);\n color: var(--nuraly-sub-menu-highlighted-color);\n }\n\n .sub-menu .sub-menu-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n padding: var(--nuraly-sub-menu-header-padding, 1px);\n border-left: 4px solid transparent;\n border-top: 2px solid transparent;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n border-radius: var(--nuraly-menu-border-radius);\n gap: 8px;\n }\n\n .sub-menu .sub-menu-header span {\n flex: 1;\n min-width: 0;\n padding-left: 0;\n }\n\n .sub-menu .text-icon {\n flex-shrink: 0;\n --nuraly-color-icon: var(--nuraly-sub-menu-text-icon-color);\n --nuraly-icon-size: var(--nuraly-menu-icon-size, 20px);\n }\n\n .sub-menu .icons-container {\n display: flex;\n align-items: center;\n gap: 8px;\n position: relative;\n flex-shrink: 0;\n /* Reserve space for dropdown to prevent layout shift */\n min-width: fit-content;\n /* Fixed height to prevent vertical shifting */\n height: 100%;\n min-height: 20px;\n }\n\n .menu-link .icon-container {\n display: flex;\n align-items: center;\n position: relative;\n flex-shrink: 0;\n /* Fixed height to prevent vertical shifting */\n height: 100%;\n min-height: 20px;\n }\n\n .sub-menu nr-dropdown,\n .menu-link nr-dropdown {\n /* Keep in normal flow but ensure it doesn't grow/shrink */\n display: inline-flex;\n flex-shrink: 0;\n flex-grow: 0;\n align-items: center;\n vertical-align: middle;\n }\n\n .sub-menu .action-icon,\n .menu-link .action-icon {\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .sub-menu .action-icon {\n --nuraly-color-icon: var(--nuraly-sub-menu-action-icon-color);\n --nuraly-icon-size: var(--nuraly-menu-icon-size, 16px);\n }\n\n .sub-menu .status-icon {\n --nuraly-color-icon: var(--nuraly-sub-menu-status-icon-color);\n --nuraly-icon-size: var(--nuraly-menu-icon-size, 16px);\n }\n\n .sub-menu .text-icon {\n --nuraly-color-icon: var(--nuraly-sub-menu-text-icon-color);\n --nuraly-icon-size: var(--nuraly-menu-icon-size, 20px);\n }\n\n .sub-menu #toggle-icon {\n --nuraly-color-icon: var(--nuraly-sub-menu-toggle-icon-color);\n --nuraly-icon-size: var(--nuraly-menu-icon-size, 16px);\n }\n\n .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus {\n outline: none;\n border-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));\n border-left-color: transparent;\n color: var(--nuraly-sub-menu-focus-color);\n }\n\n .sub-menu.selected:not(.disabled) .sub-menu-header:focus {\n outline: none;\n border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));\n border-top-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));\n border-right-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));\n border-bottom-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));\n color: var(--nuraly-sub-menu-focus-color);\n }\n\n /* Focus-visible for keyboard navigation on submenus */\n .sub-menu:not(.disabled) .sub-menu-header:focus-visible {\n outline: none;\n border-top-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));\n border-right-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));\n border-bottom-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));\n }\n\n .sub-menu:not(.disabled):not(.selected) .sub-menu-header:focus-visible {\n border-left-color: var(--nuraly-sub-menu-focus-border-color, var(--nuraly-sub-menu-focus-color));\n color: var(--nuraly-sub-menu-focus-color);\n }\n\n .sub-menu.selected:not(.disabled) .sub-menu-header:focus-visible {\n border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));\n color: var(--nuraly-sub-menu-focus-color);\n }\n\n .sub-menu:not(.disabled) .sub-menu-header:hover {\n background-color: var(--nuraly-sub-menu-hover-background-color);\n color: var(--nuraly-sub-menu-hover-color);\n }\n\n .sub-menu.selected:not(.disabled) .sub-menu-header {\n background-color: var(--nuraly-menu-selected-link-background-color);\n color: var(--nuraly-menu-selected-color);\n border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));\n }\n\n .sub-menu.selected:not(.disabled) .sub-menu-header:active {\n background-color: var(--nuraly-sub-menu-active-background-color);\n color: var(--nuraly-sub-menu-active-color);\n border-left-color: var(--nuraly-menu-selected-link-border-color, var(--nuraly-menu-selected-color));\n }\n\n .sub-menu:not(.disabled):not(.selected) .sub-menu-header:active {\n background-color: var(--nuraly-sub-menu-active-background-color);\n color: var(--nuraly-sub-menu-active-color);\n }\n\n .sub-menu-children {\n padding-left: var(--nuraly-sub-menu-nested-padding-left);\n }\n\n /* Arrow positioning for left arrow */\n .sub-menu.arrow-left .sub-menu-header {\n padding-left: var(--nuraly-sub-menu-arrow-left-padding, 8px); /* Add space for left arrow */\n }\n\n .sub-menu.arrow-left .sub-menu-header #toggle-icon {\n margin-right: 8px; /* Space between arrow and text */\n order: -1; /* Place arrow at the beginning */\n }\n\n /* Arrow positioning for right arrow (default) */\n .sub-menu.arrow-right .sub-menu-header #toggle-icon {\n margin-left: 8px; /* Space between text and arrow */\n }\n\n /* Ensure proper spacing in the header */\n .sub-menu.arrow-left .sub-menu-header span {\n padding-left: 0; /* Remove left padding when arrow is on the left */\n }\n\n /* Size Variants */\n .menu--small .menu-link {\n padding: var(--nuraly-menu-link-padding-small, 1px);\n }\n\n .menu--small .sub-menu .sub-menu-header {\n padding: var(--nuraly-sub-menu-header-padding-small, 1px);\n }\n\n .menu--medium .menu-link {\n padding: var(--nuraly-menu-link-padding-medium, 1px);\n }\n\n .menu--medium .sub-menu .sub-menu-header {\n padding: var(--nuraly-sub-menu-header-padding-medium, 1px);\n }\n\n .menu--large .menu-link {\n padding: var(--nuraly-menu-link-padding-large, 1px);\n }\n\n .menu--large .sub-menu .sub-menu-header {\n padding: var(--nuraly-sub-menu-header-padding-large, 1px);\n }\n\n /* Edit input styles */\n .edit-input {\n flex: 1;\n min-width: 0;\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n line-height: inherit;\n color: inherit;\n background-color: var(--nuraly-menu-edit-input-background, transparent);\n border: none;\n border-radius: 0;\n padding: 0;\n margin: 0;\n outline: none;\n }\n\n .edit-input:focus {\n outline: none;\n box-shadow: none;\n }\n\n .menu-link.editing,\n .sub-menu.editing > .sub-menu-header {\n background-color: var(--nuraly-menu-edit-background, transparent);\n }\n\n`;\n\nexport const styles = [menuStyle];\n"]}
package/menu.types.d.ts CHANGED
@@ -47,6 +47,8 @@ export interface IMenu {
47
47
  disabled?: boolean;
48
48
  /** Whether the submenu is opened */
49
49
  opened?: boolean;
50
+ /** Whether the menu item label can be edited (double-click to edit) */
51
+ editable?: boolean;
50
52
  /** Child menu items for nested menus */
51
53
  children?: IMenu[];
52
54
  }
@@ -58,5 +60,7 @@ export interface IAction {
58
60
  label: string;
59
61
  /** Action value */
60
62
  value: string;
63
+ /** Action icon */
64
+ icon?: string;
61
65
  }
62
66
  //# sourceMappingURL=menu.types.d.ts.map
package/menu.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.types.js","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport const EMPTY_STRING = '';\n\n/**\n * Menu size variants\n */\nexport const enum MenuSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large'\n}\n\n/**\n * Icon position in menu items\n */\nexport const enum IconPosition {\n Left = 'left',\n Right = 'right',\n}\n\n/**\n * Menu item configuration interface\n */\nexport interface IMenu {\n /** Display text for the menu item */\n text: string;\n /** URL link for navigation */\n link?: string;\n /** Menu configuration with icon and actions */\n menu?: { icon: string; actions: IAction[] };\n /** Status indicator with icon and label */\n status?: { icon: string; label: string };\n /** Icon name */\n icon?: string;\n /** Icon position (left or right) */\n iconPosition?: IconPosition | string;\n /** Whether the menu item is selected */\n selected?: boolean;\n /** Whether the menu item is disabled */\n disabled?: boolean;\n /** Whether the submenu is opened */\n opened?: boolean;\n /** Child menu items for nested menus */\n children?: IMenu[];\n}\n\n/**\n * Menu action configuration interface\n */\nexport interface IAction {\n /** Action label */\n label: string;\n /** Action value */\n value: string;\n}\n"]}
1
+ {"version":3,"file":"menu.types.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport const EMPTY_STRING = '';\n\n/**\n * Menu size variants\n */\nexport const enum MenuSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large'\n}\n\n/**\n * Icon position in menu items\n */\nexport const enum IconPosition {\n Left = 'left',\n Right = 'right',\n}\n\n/**\n * Menu item configuration interface\n */\nexport interface IMenu {\n /** Display text for the menu item */\n text: string;\n /** URL link for navigation */\n link?: string;\n /** Menu configuration with icon and actions */\n menu?: { icon: string; actions: IAction[] };\n /** Status indicator with icon and label */\n status?: { icon: string; label: string };\n /** Icon name */\n icon?: string;\n /** Icon position (left or right) */\n iconPosition?: IconPosition | string;\n /** Whether the menu item is selected */\n selected?: boolean;\n /** Whether the menu item is disabled */\n disabled?: boolean;\n /** Whether the submenu is opened */\n opened?: boolean;\n /** Whether the menu item label can be edited (double-click to edit) */\n editable?: boolean;\n /** Child menu items for nested menus */\n children?: IMenu[];\n}\n\n/**\n * Menu action configuration interface\n */\nexport interface IAction {\n /** Action label */\n label: string;\n /** Action value */\n value: string;\n /** Action icon */\n icon?: string;\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/menu",
3
- "version": "0.0.19",
3
+ "version": "0.0.20",
4
4
  "description": "Menu component for NuralyUI library with support for nested submenus",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/react.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/menu/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrMenuElement } from './menu.component.js';\nexport const NrMenu = createComponent({\n tagName: 'nr-menu',\n elementClass: NrMenuElement,\n react: React,\n events: {\n change: 'change',\n },\n});\n"]}
1
+ {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/menu/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrMenuElement } from './menu.component.js';\nexport const NrMenu = createComponent({\n tagName: 'nr-menu',\n elementClass: NrMenuElement,\n react: React,\n events: {\n change: 'change',\n },\n});\n"]}