ngwr 6.1.1 → 7.1.0

package/fesm2022/ngwr-dropdown.mjs

@@ -1,10 +1,11 @@
-import { Overlay, ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { input, signal, inject, ElementRef, ViewContainerRef, DestroyRef, effect, Directive, HostBinding, HostListener, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, booleanAttribute } from '@angular/core';
+import { input, output, inject, ElementRef, ViewContainerRef, DestroyRef, signal, effect, Directive, viewChild, TemplateRef, ViewEncapsulation, Component, computed } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { filter, fromEvent, merge } from 'rxjs';
-import { WrIconComponent } from 'ngwr/icon';
+import { WR_OVERLAY } from 'ngwr/overlay';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { WrIcon } from 'ngwr/icon';
 
 /**
  * @license
@@ -12,71 +13,20 @@ import { WrIconComponent } from 'ngwr/icon';
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+/**
+ * Maps friendly names to CDK ConnectedPosition fallback lists.
+ *
+ * @internal
+ */
 const WR_DROPDOWN_POSITIONS = {
-    top: [
-        {
-            originX: 'center',
-            originY: 'top',
-            overlayX: 'center',
-            overlayY: 'bottom',
-        },
-    ],
-    topLeft: [
-        {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom',
-        },
-    ],
-    topRight: [
-        {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'bottom',
-        },
-    ],
-    bottom: [
-        {
-            originX: 'center',
-            originY: 'bottom',
-            overlayX: 'center',
-            overlayY: 'top',
-        },
-    ],
-    bottomLeft: [
-        {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-        },
-    ],
-    bottomRight: [
-        {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'top',
-        },
-    ],
-    left: [
-        {
-            originX: 'start',
-            originY: 'center',
-            overlayX: 'end',
-            overlayY: 'center',
-        },
-    ],
-    right: [
-        {
-            originX: 'end',
-            originY: 'center',
-            overlayX: 'start',
-            overlayY: 'center',
-        },
-    ],
+    top: [{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' }],
+    'top-start': [{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }],
+    'top-end': [{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }],
+    bottom: [{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' }],
+    'bottom-start': [{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' }],
+    'bottom-end': [{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' }],
+    left: [{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' }],
+    right: [{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' }],
 };
 
 /**
@@ -85,149 +35,226 @@ const WR_DROPDOWN_POSITIONS = {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-class WrDropdownDirective {
-    get hostClasses() {
-        return {
-            'wr-dropdown-trigger': true,
-        };
-    }
+/**
+ * Attach to any element to open a `<wr-dropdown-menu>` as a CDK overlay.
+ *
+ * @example
+ * ```html
+ * <button [wrDropdown]="menu" position="bottom-start" trigger="click">
+ *   Actions
+ * </button>
+ *
+ * <wr-dropdown-menu #menu>
+ *   <wr-dropdown-item icon="copy" (click)="copy()">Copy</wr-dropdown-item>
+ *   <wr-dropdown-item icon="trash" (click)="remove()">Delete</wr-dropdown-item>
+ * </wr-dropdown-menu>
+ * ```
+ *
+ * @see https://ngwr.dev/components/dropdown
+ */
+let triggerUid = 0;
+class WrDropdown {
+    /** Menu to open. Pass a `<wr-dropdown-menu>` template reference. */
+    menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'wrDropdown' });
+    /** How the menu opens. @default 'click' */
+    trigger = input('click', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    /** Where the menu anchors relative to the trigger. @default 'bottom-start' */
+    position = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Fires after the menu opens. */
+    opened = output();
+    /** Fires after the menu closes. */
+    closed = output();
+    host = inject(ElementRef);
+    overlay = inject(WR_OVERLAY);
+    vcr = inject(ViewContainerRef);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    destroyRef = inject(DestroyRef);
+    /** @internal Public so host bindings can read it. */
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Auto-generated id for `aria-labelledby` wiring on the menu. */
+    triggerId = `wr-dropdown-trigger-${++triggerUid}`;
+    overlayRef = null;
     constructor() {
-        this.dropdownMenu = input(...(ngDevMode ? [undefined, { debugName: "dropdownMenu" }] : []));
-        this.trigger = input('click', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
-        this.position = input('bottomLeft', ...(ngDevMode ? [{ debugName: "position" }] : []));
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.clickTimeStamp = 0;
-        this.overlay = inject(Overlay);
-        this.elementRef = inject(ElementRef);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.scrollStrategyOptions = inject(ScrollStrategyOptions);
-        this.destroyRef = inject(DestroyRef);
-        const isOpen = this.isOpen;
         effect(() => {
-            if (isOpen()) {
-                this.open();
+            if (this.isOpen()) {
+                this.openOverlay();
             }
             else {
-                this.close();
+                this.closeOverlay();
             }
         });
     }
-    ngOnDestroy() {
-        this.destroyOverlay();
+    /** Open the menu. */
+    open() {
+        this.isOpen.set(true);
     }
+    /** Close the menu. */
+    close() {
+        this.isOpen.set(false);
+    }
+    /** Toggle the menu. */
+    toggle() {
+        this.isOpen.update(v => !v);
+    }
+    // Host listeners
+    /** @internal */
     onClick(event) {
-        if (this.trigger() !== 'click') {
+        if (this.trigger() !== 'click')
             return;
-        }
         event.stopPropagation();
-        if (event.timeStamp === this.clickTimeStamp) {
-            return;
-        }
-        this.isOpen.update(value => !value);
+        this.toggle();
     }
+    /** @internal */
     onMouseEnter() {
-        if (this.trigger() !== 'hover') {
+        if (this.trigger() !== 'hover')
             return;
-        }
         this.isOpen.set(true);
     }
-    open() {
-        if (this.overlayRef || !this.dropdownMenu()) {
+    /** @internal */
+    onMouseLeave(event) {
+        if (this.trigger() !== 'hover')
+            return;
+        const related = event.relatedTarget;
+        if (related && this.overlayRef?.overlayElement.contains(related))
+            return;
+        this.isOpen.set(false);
+    }
+    // Overlay management
+    openOverlay() {
+        if (this.overlayRef)
             return;
-        }
         const positionStrategy = this.overlay
             .position()
-            .flexibleConnectedTo(this.elementRef)
+            .flexibleConnectedTo(this.host)
             .withPositions(WR_DROPDOWN_POSITIONS[this.position()])
             .withPush(true);
         this.overlayRef = this.overlay.create({
             positionStrategy,
-            scrollStrategy: this.scrollStrategyOptions.reposition(),
-            panelClass: ['wr-dropdown-overlay', `wr-dropdown--${this.position()}`],
+            scrollStrategy: this.scrollStrategies.reposition(),
+            panelClass: ['wr-dropdown-overlay', `wr-dropdown-overlay--${this.position()}`],
         });
-        const portal = new TemplatePortal(this.dropdownMenu().contentTpl, this.viewContainerRef);
+        // Wire trigger id into menu so it can render aria-labelledby.
+        this.menu().triggerId.set(this.triggerId);
+        const portal = new TemplatePortal(this.menu().contentTpl(), this.vcr);
         this.overlayRef.attach(portal);
-        if (this.trigger() === 'hover') {
-            this.setupHoverEvents();
-        }
-        else {
-            this.setupClickEvents();
-        }
+        // Focus the first menu item after the menu renders.
+        queueMicrotask(() => this.focusItemAt(0));
         this.overlayRef
-            .keydownEvents()
+            .outsidePointerEvents()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(event => {
-            if (event.key === 'Escape') {
-                this.clickTimeStamp = event.timeStamp;
-                this.isOpen.set(false);
-            }
-        });
-        setTimeout(() => {
-            this.overlayRef?.updatePosition();
-        });
-    }
-    setupClickEvents() {
-        this.overlayRef.outsidePointerEvents()
-            .pipe(filter(event => !this.elementRef.nativeElement.contains(event.target)), takeUntilDestroyed(this.destroyRef))
-            .subscribe(event => {
-            this.clickTimeStamp = event.timeStamp;
+            if (this.host.nativeElement.contains(event.target))
+                return;
             this.isOpen.set(false);
         });
-    }
-    setupHoverEvents() {
-        const overlayElement = this.overlayRef.overlayElement;
-        const triggerElement = this.elementRef.nativeElement;
-        const triggerLeave$ = fromEvent(triggerElement, 'mouseleave').pipe(filter(event => {
-            const relatedTarget = event.relatedTarget;
-            return !overlayElement.contains(relatedTarget) && relatedTarget !== overlayElement;
-        }));
-        const overlayLeave$ = fromEvent(overlayElement, 'mouseleave').pipe(filter(event => {
-            const relatedTarget = event.relatedTarget;
-            return !triggerElement.contains(relatedTarget) && relatedTarget !== triggerElement;
-        }));
-        merge(triggerLeave$, overlayLeave$)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (!triggerElement.matches(':hover') && !overlayElement.matches(':hover')) {
-                this.isOpen.set(false);
-            }
-        });
-        fromEvent(overlayElement, 'mouseenter')
+        this.overlayRef
+            .keydownEvents()
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.isOpen.set(true);
+            .subscribe(event => {
+            this.handleMenuKeydown(event);
         });
+        if (this.trigger() === 'hover') {
+            this.overlayRef.overlayElement.addEventListener('mouseleave', this.onOverlayMouseLeave);
+        }
+        this.opened.emit();
     }
-    close() {
-        if (this.overlayRef) {
-            this.overlayRef.detach();
-            this.destroyOverlay();
+    closeOverlay() {
+        if (!this.overlayRef)
+            return;
+        if (this.trigger() === 'hover') {
+            this.overlayRef.overlayElement.removeEventListener('mouseleave', this.onOverlayMouseLeave);
         }
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.closed.emit();
     }
-    destroyOverlay() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = undefined;
+    // Keyboard handling
+    /** @internal Trigger keydown — ArrowDown/Up/Enter/Space open the menu. */
+    onKeydown(event) {
+        if (this.isOpen())
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.open();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: WrDropdownDirective, isStandalone: true, selector: "[wrDropdown]", inputs: { dropdownMenu: { classPropertyName: "dropdownMenu", publicName: "dropdownMenu", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()" }, properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+    handleMenuKeydown(event) {
+        const items = this.getItems();
+        if (items.length === 0 && event.key !== 'Escape' && event.key !== 'Tab')
+            return;
+        const current = document.activeElement;
+        const idx = current ? items.indexOf(current) : -1;
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.isOpen.set(false);
+                this.host.nativeElement.focus();
+                break;
+            case 'Tab':
+                // Let focus leave naturally; close the menu.
+                this.isOpen.set(false);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusItemAt(idx < items.length - 1 ? idx + 1 : 0);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusItemAt(idx > 0 ? idx - 1 : items.length - 1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusItemAt(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusItemAt(items.length - 1);
+                break;
+            default:
+                break;
+        }
+    }
+    getItems() {
+        if (!this.overlayRef)
+            return [];
+        return Array.from(this.overlayRef.overlayElement.querySelectorAll('.wr-dropdown-item:not(.wr-dropdown-item--disabled)'));
+    }
+    focusItemAt(index) {
+        const items = this.getItems();
+        if (items.length === 0)
+            return;
+        const clamped = ((index % items.length) + items.length) % items.length;
+        items[clamped]?.focus();
+    }
+    onOverlayMouseLeave = (event) => {
+        const related = event.relatedTarget;
+        if (related && this.host.nativeElement.contains(related))
+            return;
+        this.isOpen.set(false);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: WrDropdown, isStandalone: true, selector: "[wrDropdown]", inputs: { menu: { classPropertyName: "menu", publicName: "wrDropdown", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)" }, properties: { "attr.id": "triggerId", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? menu().menuId() : null" }, classAttribute: "wr-dropdown-trigger" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDropdownDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrDropdown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDropdown]',
+                    host: {
+                        class: 'wr-dropdown-trigger',
+                        '[attr.id]': 'triggerId',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-controls]': 'isOpen() ? menu().menuId() : null',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave($event)',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { dropdownMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMenu", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrDropdown", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * @license
@@ -235,70 +262,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-class WrDropdownMenuComponent {
-    get hostClasses() {
-        return {
-            display: 'none',
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: WrDropdownMenuComponent, isStandalone: true, selector: "wr-dropdown-menu", host: { properties: { "style": "this.hostClasses" } }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true }], exportAs: ["wrDropdownMenu"], ngImport: i0, template: "<ng-template #contentTpl>\n  <div class=\"wr-dropdown-menu\">\n    <ng-content />\n  </div>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDropdownMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wr-dropdown-menu', exportAs: 'wrDropdownMenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #contentTpl>\n  <div class=\"wr-dropdown-menu\">\n    <ng-content />\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['style']
-            }], contentTpl: [{
-                type: ViewChild,
-                args: ['contentTpl']
-            }] } });
-
+let uid = 0;
 /**
- * @license
+ * Holds the menu content rendered when a {@link WrDropdown} opens.
  *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ * The component itself doesn't render anywhere — the directive grabs its
+ * internal `<ng-template>` and portals it into an overlay.
+ *
+ * @example
+ * ```html
+ * <button [wrDropdown]="menu">Actions</button>
+ * <wr-dropdown-menu #menu>
+ *   <wr-dropdown-item icon="copy">Copy</wr-dropdown-item>
+ *   <wr-dropdown-item icon="trash">Delete</wr-dropdown-item>
+ * </wr-dropdown-menu>
+ * ```
+ *
+ * @see https://ngwr.dev/components/dropdown
  */
-class WrDropdownMenuItemComponent {
-    constructor() {
-        this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.attrRole = 'menuitem';
-        this.tabindex = this.disabled() ? '' : '0';
-    }
-    get hostClasses() {
-        return {
-            'wr-dropdown-item': true,
-            'wr-dropdown-item--disabled': this.disabled(),
-        };
-    }
-    onClick(event) {
-        if (this.disabled()) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: WrDropdownMenuItemComponent, isStandalone: true, selector: "wr-dropdown-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.role": "this.attrRole", "attr.tabindex": "this.tabindex" } }, ngImport: i0, template: "<div class=\"wr-dropdown-item__content\">\n  @if (icon()) {\n    <wr-icon class=\"wr-dropdown-item__icon\" [name]=\"icon()!\" />\n  }\n  <span class=\"wr-dropdown-item__label\">\n    <ng-content></ng-content>\n  </span>\n</div>\n", dependencies: [{ kind: "component", type: WrIconComponent, selector: "wr-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class WrDropdownMenu {
+    /** The internal template the directive portals into the overlay. @internal */
+    contentTpl = viewChild.required(TemplateRef);
+    /** Stable id used on the menu element and referenced from the trigger's `aria-controls`. */
+    menuId = signal(`wr-dropdown-menu-${++uid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuId" }] : /* istanbul ignore next */ []));
+    /** Trigger element id, set by the directive for `aria-labelledby` wiring. */
+    triggerId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: WrDropdownMenu, isStandalone: true, selector: "wr-dropdown-menu", host: { styleAttribute: "display:none" }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["wrDropdownMenu"], ngImport: i0, template: '<ng-template><div class="wr-dropdown-menu" role="menu" [attr.id]="menuId()" [attr.aria-labelledby]="triggerId() || null"><ng-content /></div></ng-template>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDropdownMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrDropdownMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-dropdown-menu-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [WrIconComponent], template: "<div class=\"wr-dropdown-item__content\">\n  @if (icon()) {\n    <wr-icon class=\"wr-dropdown-item__icon\" [name]=\"icon()!\" />\n  }\n  <span class=\"wr-dropdown-item__label\">\n    <ng-content></ng-content>\n  </span>\n</div>\n" }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], attrRole: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+            args: [{
+                    selector: 'wr-dropdown-menu',
+                    template: '<ng-template><div class="wr-dropdown-menu" role="menu" [attr.id]="menuId()" [attr.aria-labelledby]="triggerId() || null"><ng-content /></div></ng-template>',
+                    exportAs: 'wrDropdownMenu',
+                    encapsulation: ViewEncapsulation.None,
+                    host: { style: 'display:none' },
+                }]
+        }], propDecorators: { contentTpl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 /**
  * @license
@@ -306,10 +309,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+/**
+ * Single row inside a `<wr-dropdown-menu>`.
+ *
+ * @example
+ * ```html
+ * <wr-dropdown-item icon="copy" (click)="copy()">Copy</wr-dropdown-item>
+ * <wr-dropdown-item icon="trash" disabled>Delete</wr-dropdown-item>
+ * ```
+ */
+class WrDropdownItem {
+    /** Optional leading icon name. @default null */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Disable interaction (suppresses pointer + keyboard). @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    classes = computed(() => {
+        const parts = ['wr-dropdown-item'];
+        if (this.disabled())
+            parts.push('wr-dropdown-item--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    /** @internal Keyboard activation — fires the same click consumers bind to. */
+    activate(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.host.nativeElement.click();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrDropdownItem, isStandalone: true, selector: "wr-dropdown-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "keydown.enter": "activate($event)", "keydown.space": "activate($event)" }, properties: { "class": "classes()", "attr.tabindex": "-1", "attr.aria-disabled": "disabled() ? true : null" } }, ngImport: i0, template: "@if (icon(); as name) {\n  <wr-icon class=\"wr-dropdown-item__icon\" [name]=\"name\" />\n}\n<span class=\"wr-dropdown-item__label\">\n  <ng-content />\n</span>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrDropdownItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-dropdown-item', encapsulation: ViewEncapsulation.None, host: {
+                        role: 'menuitem',
+                        '[class]': 'classes()',
+                        '[attr.tabindex]': '-1',
+                        '[attr.aria-disabled]': 'disabled() ? true : null',
+                        '(keydown.enter)': 'activate($event)',
+                        '(keydown.space)': 'activate($event)',
+                    }, imports: [WrIcon], template: "@if (icon(); as name) {\n  <wr-icon class=\"wr-dropdown-item__icon\" [name]=\"name\" />\n}\n<span class=\"wr-dropdown-item__label\">\n  <ng-content />\n</span>\n" }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WR_DROPDOWN_POSITIONS, WrDropdownDirective, WrDropdownMenuComponent, WrDropdownMenuItemComponent };
+export { WrDropdown, WrDropdownItem, WrDropdownMenu };
 //# sourceMappingURL=ngwr-dropdown.mjs.map