All files / components/dropdown-menu dropdown-menu-item.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
6x
 
6x
6x
 
 
6x
 
 
 
import { IconComponent } from '../icon/icon.component';
import { CdkMenuItem } from '@angular/cdk/menu';
import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@Component({
    selector: 'ui-dropdown-menu-item',
    imports: [IconComponent],
    hostDirectives: [
        {
            directive: CdkMenuItem,
            inputs: ['cdkMenuItemDisabled: disabled'],
        },
    ],
    template: `
        @if (icon() !== undefined) {
            <span class="icon-slot">
                @if (icon()) {
                    <ui-icon
                        [name]="icon()!"
                        size="small"
                    />
                }
            </span>
        }
        <ng-content />
    `,
    styleUrl: './dropdown-menu-item.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DropdownMenuItemComponent {
    private readonly cdkMenuItem = inject(CdkMenuItem);
 
    readonly icon = input<string>();
    readonly clicked = output<void>();
 
    constructor() {
        this.cdkMenuItem.triggered.pipe(takeUntilDestroyed()).subscribe(() => this.clicked.emit());
    }
}