@ojiepermana/angular-component 22.0.44 → 22.0.46

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, input, model, computed, forwardRef, ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { Directive, input, model, computed, forwardRef, Component, inject } from '@angular/core';
 import { cn, radiusBaseValue, densityBaseValue, uniqueId } from '@ojiepermana/angular-component/utils';
 
 class AccordionContextBase {
@@ -58,13 +58,12 @@ class AccordionComponent extends AccordionContextBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AccordionComponent, isStandalone: true, selector: "Accordion", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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: { value: "valueChange" }, host: { properties: { "class": "classes()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, providers: [{ provide: AccordionContextBase, useExisting: forwardRef(() => AccordionComponent) }], 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: AccordionComponent, isStandalone: true, selector: "Accordion", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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: { value: "valueChange" }, host: { properties: { "class": "classes()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, providers: [{ provide: AccordionContextBase, useExisting: forwardRef(() => AccordionComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Accordion',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: AccordionContextBase, useExisting: forwardRef(() => AccordionComponent) }],
                     host: {
                         '[class]': 'classes()',
@@ -93,13 +92,12 @@ class AccordionItemComponent {
             this.ctx.toggle(this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AccordionItemComponent, isStandalone: true, selector: "AccordionItem", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AccordionItemComponent, isStandalone: true, selector: "AccordionItem", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AccordionItem',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-state]': 'open() ? "open" : "closed"',
@@ -126,16 +124,16 @@ class AccordionTriggerComponent {
       stroke="currentColor"
       stroke-width="2"
       stroke-linecap="round"
-      stroke-linejoin="round">
+      stroke-linejoin="round"
+    >
       <polyline points="6 9 12 15 18 9" />
     </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AccordionTriggerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[AccordionTrigger]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         type: 'button',
@@ -157,7 +155,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="6 9 12 15 18 9" />
     </svg>
   `,
@@ -170,13 +169,12 @@ class AccordionContentComponent {
     classes = computed(() => cn('block overflow-hidden text-sm', 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: AccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AccordionContentComponent, isStandalone: true, selector: "AccordionContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "item.contentId", "attr.role": "\"region\"", "attr.aria-labelledby": "item.triggerId", "attr.data-state": "item.open() ? \"open\" : \"closed\"", "hidden": "!item.open()" } }, ngImport: i0, template: `<div class="pb-4 pt-0 text-sm"><ng-content /></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AccordionContentComponent, isStandalone: true, selector: "AccordionContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "item.contentId", "attr.role": "\"region\"", "attr.aria-labelledby": "item.triggerId", "attr.data-state": "item.open() ? \"open\" : \"closed\"", "hidden": "!item.open()" } }, ngImport: i0, template: `<div class="pb-4 pt-0 text-sm"><ng-content /></div>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AccordionContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AccordionContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.id]': 'item.contentId',

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { model, input, output, signal, computed, ChangeDetectionStrategy, Component, inject, effect, ElementRef } from '@angular/core';
-import { cn } from '@ojiepermana/angular-component/utils';
+import { model, input, output, signal, computed, Component, inject, effect, DestroyRef, ElementRef } from '@angular/core';
+import { cn, uniqueId } from '@ojiepermana/angular-component/utils';
 import { DialogComponent } from '@ojiepermana/angular-component/dialog';
 import { buttonVariants } from '@ojiepermana/angular-component/button';
 
@@ -8,6 +8,15 @@ const ALERT_DIALOG_SIZE_CLASSES = {
     default: 'sm:max-w-lg',
     sm: 'sm:max-w-sm',
 };
+/**
+ * Confirmation dialog with `role="alertdialog"`.
+ *
+ * For the accessible name/description to wire up automatically, project the
+ * matching `AlertDialogTitle` / `AlertDialogDescription` parts (they register
+ * their ids with this component). Plain `DialogTitle` / `DialogDescription` will
+ * not auto-wire here — pass `aria-labelledby` / `aria-describedby` explicitly if
+ * you use custom markup.
+ */
 class AlertDialogComponent {
     open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -21,6 +30,9 @@ class AlertDialogComponent {
     ...(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 passed to the underlying dialog surface. `'alertdialog'` by default. */
+    role = input('alertdialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     radius = input('inherit', /* @ts-ignore */
@@ -30,58 +42,98 @@ class AlertDialogComponent {
     openedChange = output();
     contentSize = signal('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "contentSize" }] : /* istanbul ignore next */ []));
+    registeredTitleId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredTitleId" }] : /* istanbul ignore next */ []));
+    registeredDescriptionId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredDescriptionId" }] : /* istanbul ignore next */ []));
     resolvedSize = computed(() => this.contentSize(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     surfaceClasses = computed(() => cn(ALERT_DIALOG_SIZE_CLASSES[this.resolvedSize()], this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "surfaceClasses" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-labelledby` wins; otherwise a projected `AlertDialogTitle` supplies the id. */
+    resolvedLabelledBy = computed(() => this.labelledBy() ?? this.registeredTitleId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-describedby` wins; otherwise a projected `AlertDialogDescription` supplies the id. */
+    resolvedDescribedBy = computed(() => this.describedBy() ?? this.registeredDescriptionId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
     setContentSize(size) {
         this.contentSize.set(size);
     }
+    /** Called by a projected `AlertDialogTitle` so default usage has an accessible name (AXE-safe). */
+    registerTitleId(id) {
+        this.registeredTitleId.set(id);
+    }
+    /** Cleared by an `AlertDialogTitle` on destroy so a reopened alert never points at a stale id. */
+    unregisterTitleId(id) {
+        if (this.registeredTitleId() === id) {
+            this.registeredTitleId.set(null);
+        }
+    }
+    /** Called by a projected `AlertDialogDescription`. */
+    registerDescriptionId(id) {
+        this.registeredDescriptionId.set(id);
+    }
+    /** Cleared by an `AlertDialogDescription` on destroy. */
+    unregisterDescriptionId(id) {
+        if (this.registeredDescriptionId() === id) {
+            this.registeredDescriptionId.set(null);
+        }
+    }
     close() {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", 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" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", 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" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, ngImport: i0, template: `
     <Dialog
       [(open)]="open"
+      [role]="role()"
       [closeOnEscape]="closeOnEscape()"
       [closeOnBackdropClick]="closeOnBackdropClick()"
       [showCloseButton]="showCloseButton()"
       [closeButtonLabel]="closeButtonLabel()"
-      [aria-labelledby]="labelledBy()"
-      [aria-describedby]="describedBy()"
+      [aria-labelledby]="resolvedLabelledBy()"
+      [aria-describedby]="resolvedDescribedBy()"
       [class]="surfaceClasses()"
       [radius]="radius()"
       [density]="density()"
-      (openedChange)="openedChange.emit($event)">
+      (openedChange)="openedChange.emit($event)"
+    >
       <ng-content />
     </Dialog>
-  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "Dialog", inputs: ["open", "closeOnEscape", "closeOnBackdropClick", "showCloseButton", "closeButtonLabel", "aria-labelledby", "aria-describedby", "class", "radius", "density"], outputs: ["openChange", "openedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "Dialog", inputs: ["open", "closeOnEscape", "closeOnBackdropClick", "showCloseButton", "closeButtonLabel", "aria-labelledby", "aria-describedby", "role", "class", "radius", "density"], outputs: ["openChange", "openedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDialog',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // `<AlertDialog>` is a roleless host element; the consumer's
+                    // aria-labelledby/aria-describedby are re-applied on the inner dialog surface,
+                    // so strip them from the host (axe `aria-prohibited-attr`).
+                    host: {
+                        '[attr.aria-labelledby]': 'null',
+                        '[attr.aria-describedby]': 'null',
+                    },
                     imports: [DialogComponent],
                     template: `
     <Dialog
       [(open)]="open"
+      [role]="role()"
       [closeOnEscape]="closeOnEscape()"
       [closeOnBackdropClick]="closeOnBackdropClick()"
       [showCloseButton]="showCloseButton()"
       [closeButtonLabel]="closeButtonLabel()"
-      [aria-labelledby]="labelledBy()"
-      [aria-describedby]="describedBy()"
+      [aria-labelledby]="resolvedLabelledBy()"
+      [aria-describedby]="resolvedDescribedBy()"
       [class]="surfaceClasses()"
       [radius]="radius()"
       [density]="density()"
-      (openedChange)="openedChange.emit($event)">
+      (openedChange)="openedChange.emit($event)"
+    >
       <ng-content />
     </Dialog>
   `,
                 }]
-        }], 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"] }] } });
+        }], 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"] }] } });
 
 const ALERT_DIALOG_MEDIA_SIZE_CLASSES = {
     default: 'h-12 w-12 [&_svg]:h-5 [&_svg]:w-5',
@@ -99,13 +151,12 @@ class AlertDialogContentComponent {
         effect(() => this.alertDialog?.setContentSize(this.size()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogContentComponent, isStandalone: true, selector: "AlertDialogContent", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogContentComponent, isStandalone: true, selector: "AlertDialogContent", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDialogContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-size]': 'size()',
@@ -119,51 +170,72 @@ class AlertDialogHeaderComponent {
     classes = computed(() => cn('flex flex-col gap-2 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: AlertDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogHeaderComponent, isStandalone: true, selector: "AlertDialogHeader", 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: AlertDialogHeaderComponent, isStandalone: true, selector: "AlertDialogHeader", 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: AlertDialogHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDialogHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class AlertDialogTitleComponent {
+    /** 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('alert-dialog-title');
+    alertDialog = inject(AlertDialogComponent, { optional: true });
+    /** The id rendered on the element, used by the parent alert 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.alertDialog?.registerTitleId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.alertDialog?.unregisterTitleId(this.resolvedId()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogTitleComponent, isStandalone: true, selector: "AlertDialogTitle, h2[AlertDialogTitle]", 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: AlertDialogTitleComponent, isStandalone: true, selector: "AlertDialogTitle, h2[AlertDialogTitle]", 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: AlertDialogTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDialogTitle, h2[AlertDialogTitle]',
-                    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 AlertDialogDescriptionComponent {
+    /** 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('alert-dialog-description');
+    alertDialog = inject(AlertDialogComponent, { optional: true });
+    /** The id rendered on the element, used by the parent alert dialog for aria-describedby. */
+    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('text-sm leading-6 text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.alertDialog?.registerDescriptionId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.alertDialog?.unregisterDescriptionId(this.resolvedId()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogDescriptionComponent, isStandalone: true, selector: "AlertDialogDescription, p[AlertDialogDescription]", 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: AlertDialogDescriptionComponent, isStandalone: true, selector: "AlertDialogDescription, p[AlertDialogDescription]", 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: AlertDialogDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDialogDescription, p[AlertDialogDescription]',
-                    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 AlertDialogMediaComponent {
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
@@ -171,13 +243,12 @@ class AlertDialogMediaComponent {
     classes = computed(() => cn('mx-auto flex shrink-0 items-center justify-center rounded-full border border-border bg-muted/60 text-foreground sm:mx-0', ALERT_DIALOG_MEDIA_SIZE_CLASSES[this.alertDialog?.resolvedSize() ?? 'default'], 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: AlertDialogMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogMediaComponent, isStandalone: true, selector: "AlertDialogMedia", 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: AlertDialogMediaComponent, isStandalone: true, selector: "AlertDialogMedia", 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: AlertDialogMediaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDialogMedia',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -188,13 +259,12 @@ class AlertDialogFooterComponent {
     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: AlertDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogFooterComponent, isStandalone: true, selector: "AlertDialogFooter", 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: AlertDialogFooterComponent, isStandalone: true, selector: "AlertDialogFooter", 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: AlertDialogFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDialogFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -220,13 +290,12 @@ class AlertDialogCancelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogCancelComponent, isStandalone: true, selector: "button[AlertDialogCancel], a[AlertDialogCancel]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick()" }, properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.type": "buttonType()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogCancelComponent, isStandalone: true, selector: "button[AlertDialogCancel], a[AlertDialogCancel]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick()" }, properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.type": "buttonType()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogCancelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[AlertDialogCancel], a[AlertDialogCancel]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-size]': 'size()',
@@ -258,13 +327,12 @@ class AlertDialogActionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogActionComponent, isStandalone: true, selector: "button[AlertDialogAction], a[AlertDialogAction]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick()" }, properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.type": "buttonType()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogActionComponent, isStandalone: true, selector: "button[AlertDialogAction], a[AlertDialogAction]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick()" }, properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.type": "buttonType()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogActionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[AlertDialogAction], a[AlertDialogAction]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-size]': 'size()',

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, Component } from '@angular/core';
 import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
 import { cva } from 'class-variance-authority';
 
@@ -33,13 +33,12 @@ class AlertComponent {
     densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertComponent, isStandalone: true, selector: "Alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 } }, host: { properties: { "class": "classes()", "attr.role": "\"alert\"", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertComponent, isStandalone: true, selector: "Alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 } }, host: { properties: { "class": "classes()", "attr.role": "\"alert\"", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Alert',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"alert"',
@@ -55,13 +54,12 @@ class AlertTitleComponent {
     classes = computed(() => cn('mb-1 block font-medium leading-none tracking-tight', 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: AlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertTitleComponent, isStandalone: true, selector: "AlertTitle, h5[AlertTitle]", 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: AlertTitleComponent, isStandalone: true, selector: "AlertTitle, h5[AlertTitle]", 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: AlertTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertTitle, h5[AlertTitle]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -72,13 +70,12 @@ class AlertDescriptionComponent {
     classes = computed(() => cn('block text-sm [&_p]:leading-relaxed', 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: AlertDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDescriptionComponent, isStandalone: true, selector: "AlertDescription", 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: AlertDescriptionComponent, isStandalone: true, selector: "AlertDescription", 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: AlertDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertDescription',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -89,13 +86,12 @@ class AlertActionComponent {
     classes = computed(() => cn('mt-3 flex items-center justify-end sm:absolute sm:right-4 sm:top-4 sm:mt-0', 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: AlertActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertActionComponent, isStandalone: true, selector: "AlertAction", 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: AlertActionComponent, isStandalone: true, selector: "AlertAction", 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: AlertActionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AlertAction',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]

package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, Component } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 
 class AspectRatioComponent {
@@ -15,13 +15,12 @@ class AspectRatioComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paddingBottom" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AspectRatioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AspectRatioComponent, isStandalone: true, selector: "AspectRatio", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<div [style.padding-bottom]="paddingBottom()" class="block w-full"></div><div class="absolute inset-0"><ng-content /></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AspectRatioComponent, isStandalone: true, selector: "AspectRatio", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<div [style.padding-bottom]="paddingBottom()" class="block w-full"></div><div class="absolute inset-0"><ng-content /></div>', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AspectRatioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'AspectRatio',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },