@ojiepermana/angular-component 22.0.44 → 22.0.46

package/fesm2022/ojiepermana-angular-component-dialog.mjs

@@ -2,12 +2,12 @@ import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, model, input, output, viewChild, computed, effect, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, model, input, output, signal, computed, viewChild, effect, Component, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DOCUMENT } from '@angular/common';
 import { filter } from 'rxjs/operators';
 import { ButtonComponent } from '@ojiepermana/angular-component/button';
-import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue, uniqueId } from '@ojiepermana/angular-component/utils';
 
 /**
  * Declarative modal dialog. Renders into the body via CDK overlay when
@@ -44,6 +44,9 @@ class DialogComponent {
     ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []));
     labelledBy = input(null, { ...(ngDevMode ? { debugName: "labelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** ARIA role for the surface. `'dialog'` by default; `AlertDialog` sets `'alertdialog'`. */
+    role = input('dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     radius = input('inherit', /* @ts-ignore */
@@ -51,6 +54,36 @@ class DialogComponent {
     density = input('inherit', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     openedChange = output();
+    registeredTitleId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredTitleId" }] : /* istanbul ignore next */ []));
+    registeredDescriptionId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredDescriptionId" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-labelledby` wins; otherwise a projected `DialogTitle` supplies the id. */
+    resolvedLabelledBy = computed(() => this.labelledBy() ?? this.registeredTitleId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-describedby` wins; otherwise a projected `DialogDescription` supplies the id. */
+    resolvedDescribedBy = computed(() => this.describedBy() ?? this.registeredDescriptionId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
+    /** Called by a projected `DialogTitle` so default usage has an accessible name (AXE-safe). */
+    registerTitleId(id) {
+        this.registeredTitleId.set(id);
+    }
+    /** Cleared by a `DialogTitle` on destroy so a closed/reopened dialog never points at a stale id. */
+    unregisterTitleId(id) {
+        if (this.registeredTitleId() === id) {
+            this.registeredTitleId.set(null);
+        }
+    }
+    /** Called by a projected `DialogDescription`. */
+    registerDescriptionId(id) {
+        this.registeredDescriptionId.set(id);
+    }
+    /** Cleared by a `DialogDescription` on destroy. */
+    unregisterDescriptionId(id) {
+        if (this.registeredDescriptionId() === id) {
+            this.registeredDescriptionId.set(null);
+        }
+    }
     tpl = viewChild.required('tpl');
     overlayRef = null;
     focusTrap = null;
@@ -117,17 +150,18 @@ class DialogComponent {
         this.requestClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="dialog-surface"
-        role="dialog"
+        [attr.role]="role()"
         aria-modal="true"
-        [attr.aria-labelledby]="labelledBy()"
-        [attr.aria-describedby]="describedBy()"
+        [attr.aria-labelledby]="resolvedLabelledBy()"
+        [attr.aria-describedby]="resolvedDescribedBy()"
         [class]="surfaceClasses()"
         [style.--radius-base]="radiusBase()"
-        [style.--spacing-base]="densityBase()">
+        [style.--spacing-base]="densityBase()"
+      >
         @if (showCloseButton()) {
           <button
             type="button"
@@ -136,7 +170,8 @@ class DialogComponent {
             size="icon-sm"
             class="dialog-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
             [attr.aria-label]="closeButtonLabel()"
-            (click)="close()">
+            (click)="close()"
+          >
             <span aria-hidden="true">X</span>
             <span class="sr-only">{{ closeButtonLabel() }}</span>
           </button>
@@ -144,25 +179,25 @@ class DialogComponent {
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Dialog',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ButtonComponent],
                     template: `
     <ng-template #tpl>
       <div
         class="dialog-surface"
-        role="dialog"
+        [attr.role]="role()"
         aria-modal="true"
-        [attr.aria-labelledby]="labelledBy()"
-        [attr.aria-describedby]="describedBy()"
+        [attr.aria-labelledby]="resolvedLabelledBy()"
+        [attr.aria-describedby]="resolvedDescribedBy()"
         [class]="surfaceClasses()"
         [style.--radius-base]="radiusBase()"
-        [style.--spacing-base]="densityBase()">
+        [style.--spacing-base]="densityBase()"
+      >
         @if (showCloseButton()) {
           <button
             type="button"
@@ -171,7 +206,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             size="icon-sm"
             class="dialog-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
             [attr.aria-label]="closeButtonLabel()"
-            (click)="close()">
+            (click)="close()"
+          >
             <span aria-hidden="true">X</span>
             <span class="sr-only">{{ closeButtonLabel() }}</span>
           </button>
@@ -181,7 +217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 
 class DialogCloseDirective {
     dialog = inject(DialogComponent);
@@ -207,64 +243,84 @@ class DialogHeaderComponent {
     classes = computed(() => cn('flex flex-col gap-1.5 text-center sm:text-left', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogHeaderComponent, isStandalone: true, selector: "DialogHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogHeaderComponent, isStandalone: true, selector: "DialogHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class DialogTitleComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    autoId = uniqueId('dialog-title');
+    dialog = inject(DialogComponent, { optional: true });
+    /** The id rendered on the element, used by the parent dialog for aria-labelledby. */
+    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('text-lg font-semibold leading-none tracking-tight', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.dialog?.registerTitleId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.dialog?.unregisterTitleId(this.resolvedId()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogTitleComponent, isStandalone: true, selector: "DialogTitle, h2[DialogTitle]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogTitleComponent, isStandalone: true, selector: "DialogTitle, h2[DialogTitle]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogTitle, h2[DialogTitle]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class DialogDescriptionComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    autoId = uniqueId('dialog-description');
+    dialog = inject(DialogComponent, { optional: true });
+    /** The id rendered on the element, used by the parent dialog for aria-describedby. */
+    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('text-sm text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.dialog?.registerDescriptionId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.dialog?.unregisterDescriptionId(this.resolvedId()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogDescriptionComponent, isStandalone: true, selector: "DialogDescription, p[DialogDescription]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogDescriptionComponent, isStandalone: true, selector: "DialogDescription, p[DialogDescription]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogDescription, p[DialogDescription]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class DialogContentComponent {
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('grid gap-4', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogContentComponent, isStandalone: true, selector: "DialogContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogContentComponent, isStandalone: true, selector: "DialogContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -275,13 +331,12 @@ class DialogFooterComponent {
     classes = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogFooterComponent, isStandalone: true, selector: "DialogFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogFooterComponent, isStandalone: true, selector: "DialogFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]

package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, Directive, computed, ChangeDetectionStrategy, Component, model, forwardRef, ContentChildren, TemplateRef, ViewContainerRef, DestroyRef, signal } from '@angular/core';
+import { inject, ElementRef, input, output, Directive, computed, Component, model, forwardRef, ContentChildren, TemplateRef, ViewContainerRef, DestroyRef, signal } from '@angular/core';
 import { cn, radiusBaseValue, densityBaseValue, connectedPositionFor, oppositeSide } from '@ojiepermana/angular-component/utils';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { Overlay } from '@angular/cdk/overlay';
@@ -50,13 +50,12 @@ class MenuGroupComponent {
     classes = computed(() => cn('block', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuGroupComponent, isStandalone: true, selector: "MenuGroup", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuGroupComponent, isStandalone: true, selector: "MenuGroup", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenuGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"group"',
@@ -85,14 +84,17 @@ class MenuRadioGroupComponent extends MenuRadioGroupBase {
         this.value.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuRadioGroupComponent, isStandalone: true, selector: "MenuRadioGroup", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, providers: [{ provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuRadioGroupComponent, isStandalone: true, selector: "MenuRadioGroup", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"" } }, providers: [
+            { provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuRadioGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenuRadioGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) }],
+                    providers: [
+                        { provide: MenuRadioGroupBase, useExisting: forwardRef(() => MenuRadioGroupComponent) },
+                    ],
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"group"',
@@ -107,13 +109,12 @@ class MenuItemComponent extends MenuFocusableItem {
         this.emitSelection(e);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: MenuItemComponent, isStandalone: true, selector: "MenuItem, button[MenuItem]", host: { attributes: { "tabindex": "-1" }, listeners: { "click": "handleClick($any($event))", "keydown.enter": "handleClick($any($event))", "keydown.space": "handleClick($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.data-inset": "inset() ? \"true\" : null", "attr.data-variant": "variant()" } }, providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuItemComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: MenuItemComponent, isStandalone: true, selector: "MenuItem, button[MenuItem]", host: { attributes: { "tabindex": "-1" }, listeners: { "click": "handleClick($any($event))", "keydown.enter": "handleClick($any($event))", "keydown.space": "handleClick($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.data-inset": "inset() ? \"true\" : null", "attr.data-variant": "variant()" } }, providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuItemComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenuItem, button[MenuItem]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuItemComponent) }],
                     host: {
                         '[class]': 'classes()',
@@ -141,7 +142,9 @@ class MenuCheckboxItemComponent extends MenuFocusableItem {
         this.checked.set(!this.checked());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuCheckboxItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: MenuCheckboxItemComponent, isStandalone: true, selector: "MenuCheckboxItem, button[MenuCheckboxItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "toggle($any($event))", "keydown.enter": "toggle($any($event))", "keydown.space": "toggle($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemcheckbox\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: MenuCheckboxItemComponent, isStandalone: true, selector: "MenuCheckboxItem, button[MenuCheckboxItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "toggle($any($event))", "keydown.enter": "toggle($any($event))", "keydown.space": "toggle($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemcheckbox\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [
+            { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       @if (checked()) {
         <svg
@@ -152,20 +155,22 @@ class MenuCheckboxItemComponent extends MenuFocusableItem {
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
-          stroke-linejoin="round">
+          stroke-linejoin="round"
+        >
           <polyline points="20 6 9 17 4 12" />
         </svg>
       }
     </span>
     <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuCheckboxItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenuCheckboxItem, button[MenuCheckboxItem]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) }],
+                    providers: [
+                        { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuCheckboxItemComponent) },
+                    ],
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"menuitemcheckbox"',
@@ -189,7 +194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
-          stroke-linejoin="round">
+          stroke-linejoin="round"
+        >
           <polyline points="20 6 9 17 4 12" />
         </svg>
       }
@@ -213,21 +219,24 @@ class MenuRadioItemComponent extends MenuFocusableItem {
         this.group.select(this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuRadioItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: MenuRadioItemComponent, isStandalone: true, selector: "MenuRadioItem, button[MenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "select($any($event))", "keydown.enter": "select($any($event))", "keydown.space": "select($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemradio\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: MenuRadioItemComponent, isStandalone: true, selector: "MenuRadioItem, button[MenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "select($any($event))", "keydown.enter": "select($any($event))", "keydown.space": "select($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitemradio\"", "attr.aria-disabled": "disabled ? \"true\" : null", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"checked\" : \"unchecked\"", "attr.data-variant": "variant()" } }, providers: [
+            { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       @if (checked()) {
         <span aria-hidden="true" class="h-2 w-2 rounded-full bg-current"></span>
       }
     </span>
     <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuRadioItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenuRadioItem, button[MenuRadioItem]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) }],
+                    providers: [
+                        { provide: MenuFocusableItem, useExisting: forwardRef(() => MenuRadioItemComponent) },
+                    ],
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"menuitemradio"',
@@ -256,13 +265,12 @@ class MenuSeparatorComponent {
     classes = computed(() => cn('-mx-1 my-1 block h-px bg-border', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuSeparatorComponent, isStandalone: true, selector: "MenuSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"separator\"", "attr.aria-orientation": "\"horizontal\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuSeparatorComponent, isStandalone: true, selector: "MenuSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"separator\"", "attr.aria-orientation": "\"horizontal\"" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenuSeparator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"separator"',
@@ -279,13 +287,12 @@ class MenuLabelComponent {
     classes = computed(() => cn('px-2 py-1.5 text-sm font-semibold text-foreground', this.inset() ? 'pl-8' : '', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuLabelComponent, isStandalone: true, selector: "MenuLabel", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuLabelComponent, isStandalone: true, selector: "MenuLabel", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenuLabel',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -296,13 +303,12 @@ class MenuShortcutComponent {
     classes = computed(() => cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuShortcutComponent, isStandalone: true, selector: "MenuShortcut, span[MenuShortcut]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuShortcutComponent, isStandalone: true, selector: "MenuShortcut, span[MenuShortcut]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuShortcutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenuShortcut, span[MenuShortcut]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -354,13 +360,12 @@ class MenuSurfaceComponent {
         this.closeRequested.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuSurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuSurfaceComponent, isStandalone: true, selector: "MenuSurface", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))", "keydown.tab": "onTab($any($event))" }, properties: { "class": "classes()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()", "attr.role": "\"menu\"" } }, queries: [{ propertyName: "items", predicate: MenuFocusableItem, descendants: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenuSurfaceComponent, isStandalone: true, selector: "MenuSurface", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))", "keydown.tab": "onTab($any($event))" }, properties: { "class": "classes()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()", "attr.role": "\"menu\"" } }, queries: [{ propertyName: "items", predicate: MenuFocusableItem, descendants: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenuSurfaceComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenuSurface',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[style.--radius-base]': 'radiusBase()',