@ojiepermana/angular-component 22.0.43 → 22.0.45

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

@@ -1,7 +1,7 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, input, model, signal, computed, viewChild, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, input, model, signal, computed, viewChild, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { uniqueId, cn, overlayDismissals } from '@ojiepermana/angular-component/utils';
@@ -118,8 +118,10 @@ class ComboboxComponent {
     setDisabledState(state) {
         this.cvaDisabled.set(state);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: ComboboxComponent, isStandalone: true, selector: "Combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboboxComponent), multi: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ComboboxComponent, isStandalone: true, selector: "Combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "classes()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboboxComponent), multi: true },
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
       #trigger
       type="button"
@@ -130,7 +132,8 @@ class ComboboxComponent {
       [attr.aria-controls]="isOpen() ? panelId : null"
       [class]="triggerClasses()"
       [disabled]="isDisabled() || null"
-      (click)="toggle()">
+      (click)="toggle()"
+    >
       <span [class.text-muted-foreground]="!selectedLabel()">
         {{ selectedLabel() || placeholder() }}
       </span>
@@ -141,7 +144,8 @@ class ComboboxComponent {
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+      >
         <polyline points="6 9 12 15 18 9" />
       </svg>
     </button>
@@ -149,7 +153,8 @@ class ComboboxComponent {
     <ng-template #panel>
       <div
         [attr.id]="panelId"
-        class="w-(--combobox-trigger-width) rounded-md border bg-popover text-popover-foreground shadow-md">
+        class="w-(--combobox-trigger-width) rounded-md border bg-popover text-popover-foreground shadow-md"
+      >
         <Command>
           <input CommandInput [placeholder]="searchPlaceholder()" />
           <CommandList>
@@ -161,7 +166,8 @@ class ComboboxComponent {
                   CommandItem
                   [value]="opt.label"
                   [disabled]="!!opt.disabled"
-                  (selected)="pick(opt)">
+                  (selected)="pick(opt)"
+                >
                   {{ opt.label }}
                   @if (isSelected(opt)) {
                     <svg
@@ -171,7 +177,8 @@ class ComboboxComponent {
                       stroke="currentColor"
                       stroke-width="2"
                       stroke-linecap="round"
-                      stroke-linejoin="round">
+                      stroke-linejoin="round"
+                    >
                       <polyline points="20 6 9 17 4 12" />
                     </svg>
                   }
@@ -182,13 +189,12 @@ class ComboboxComponent {
         </Command>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: CommandComponent, selector: "Command", inputs: ["query", "class"], outputs: ["queryChange"] }, { kind: "component", type: CommandInputComponent, selector: "input[CommandInput]", inputs: ["placeholder", "class"] }, { kind: "component", type: CommandListComponent, selector: "CommandList", inputs: ["class"] }, { kind: "component", type: CommandEmptyComponent, selector: "CommandEmpty", inputs: ["class"] }, { kind: "component", type: CommandGroupComponent, selector: "CommandGroup", inputs: ["heading", "class"] }, { kind: "component", type: CommandItemComponent, selector: "CommandItem, button[CommandItem]", inputs: ["value", "disabled", "class"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: CommandComponent, selector: "Command", inputs: ["query", "class"], outputs: ["queryChange"] }, { kind: "component", type: CommandInputComponent, selector: "input[CommandInput]", inputs: ["placeholder", "class"] }, { kind: "component", type: CommandListComponent, selector: "CommandList", inputs: ["class"] }, { kind: "component", type: CommandEmptyComponent, selector: "CommandEmpty", inputs: ["class"] }, { kind: "component", type: CommandGroupComponent, selector: "CommandGroup", inputs: ["heading", "class"] }, { kind: "component", type: CommandItemComponent, selector: "CommandItem, button[CommandItem]", inputs: ["value", "disabled", "class"], outputs: ["selected"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComboboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Combobox',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         CommandComponent,
                         CommandInputComponent,
@@ -197,7 +203,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                         CommandGroupComponent,
                         CommandItemComponent,
                     ],
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboboxComponent), multi: true }],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboboxComponent), multi: true },
+                    ],
                     host: { '[class]': 'classes()' },
                     template: `
     <button
@@ -210,7 +218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
       [attr.aria-controls]="isOpen() ? panelId : null"
       [class]="triggerClasses()"
       [disabled]="isDisabled() || null"
-      (click)="toggle()">
+      (click)="toggle()"
+    >
       <span [class.text-muted-foreground]="!selectedLabel()">
         {{ selectedLabel() || placeholder() }}
       </span>
@@ -221,7 +230,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+      >
         <polyline points="6 9 12 15 18 9" />
       </svg>
     </button>
@@ -229,7 +239,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
     <ng-template #panel>
       <div
         [attr.id]="panelId"
-        class="w-(--combobox-trigger-width) rounded-md border bg-popover text-popover-foreground shadow-md">
+        class="w-(--combobox-trigger-width) rounded-md border bg-popover text-popover-foreground shadow-md"
+      >
         <Command>
           <input CommandInput [placeholder]="searchPlaceholder()" />
           <CommandList>
@@ -241,7 +252,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                   CommandItem
                   [value]="opt.label"
                   [disabled]="!!opt.disabled"
-                  (selected)="pick(opt)">
+                  (selected)="pick(opt)"
+                >
                   {{ opt.label }}
                   @if (isSelected(opt)) {
                     <svg
@@ -251,7 +263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                       stroke="currentColor"
                       stroke-width="2"
                       stroke-linecap="round"
-                      stroke-linejoin="round">
+                      stroke-linejoin="round"
+                    >
                       <polyline points="20 6 9 17 4 12" />
                     </svg>
                   }

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

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Directive, model, input, signal, computed, forwardRef, ChangeDetectionStrategy, Component, inject, ElementRef, output, DestroyRef } from '@angular/core';
+import { Directive, model, input, signal, computed, forwardRef, Component, inject, ElementRef, output, DestroyRef } from '@angular/core';
 import { cn, uniqueId } from '@ojiepermana/angular-component/utils';
 
 /** Base class exposed to children for context lookup. */
 class CommandContextBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: CommandContextBase, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: CommandContextBase, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandContextBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandContextBase, decorators: [{
             type: Directive
         }] });
 class CommandComponent extends CommandContextBase {
@@ -62,14 +62,13 @@ class CommandComponent extends CommandContextBase {
     setActiveItem(activeItem) {
         this.items().forEach((item) => item._setActive(item === activeItem));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CommandComponent, isStandalone: true, selector: "Command", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandComponent, isStandalone: true, selector: "Command", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Command',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }],
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
@@ -98,14 +97,13 @@ class CommandInputComponent {
             active._select(e);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CommandInputComponent, isStandalone: true, selector: "input[CommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))" }, properties: { "class": "classes()", "attr.aria-activedescendant": "ctx.activeDescendantId()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandInputComponent, isStandalone: true, selector: "input[CommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))" }, properties: { "class": "classes()", "attr.aria-activedescendant": "ctx.activeDescendantId()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[CommandInput]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         type: 'text',
@@ -129,14 +127,13 @@ class CommandListComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('max-h-[300px] overflow-y-auto overflow-x-hidden p-1', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CommandListComponent, isStandalone: true, selector: "CommandList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandListComponent, isStandalone: true, selector: "CommandList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandList',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()', role: 'listbox' },
                     template: `<ng-content />`,
                 }]
@@ -147,14 +144,13 @@ class CommandEmptyComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('py-6 text-center text-sm text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CommandEmptyComponent, isStandalone: true, selector: "CommandEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "hidden": "ctx.hasVisibleItems()" } }, ngImport: i0, template: `<ng-content>No results found.</ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandEmptyComponent, isStandalone: true, selector: "CommandEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "hidden": "ctx.hasVisibleItems()" } }, ngImport: i0, template: `<ng-content>No results found.</ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandEmptyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandEmptyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandEmpty',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[hidden]': 'ctx.hasVisibleItems()',
@@ -169,19 +165,18 @@ class CommandGroupComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('overflow-hidden p-1 text-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: CommandGroupComponent, isStandalone: true, selector: "CommandGroup", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: CommandGroupComponent, isStandalone: true, selector: "CommandGroup", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
     @if (heading()) {
       <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{ heading() }}</div>
     }
     <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()', role: 'group' },
                     template: `
     @if (heading()) {
@@ -196,14 +191,13 @@ class CommandSeparatorComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('-mx-1 h-px bg-border block', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CommandSeparatorComponent, isStandalone: true, selector: "CommandSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandSeparatorComponent, isStandalone: true, selector: "CommandSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandSeparator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()', role: 'separator' },
                     template: '',
                 }]
@@ -248,14 +242,13 @@ class CommandItemComponent {
             return;
         this.ctx.activateOnly(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CommandItemComponent, isStandalone: true, selector: "CommandItem, button[CommandItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "_select($any($event))", "mousemove": "onHover()" }, properties: { "class": "classes()", "attr.id": "itemId", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.aria-selected": "active()", "attr.data-active": "active() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandItemComponent, isStandalone: true, selector: "CommandItem, button[CommandItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "_select($any($event))", "mousemove": "onHover()" }, properties: { "class": "classes()", "attr.id": "itemId", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.aria-selected": "active()", "attr.data-active": "active() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CommandItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandItem, button[CommandItem]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.id]': 'itemId',
@@ -276,14 +269,13 @@ class CommandShortcutComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     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.3", ngImport: i0, type: CommandShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CommandShortcutComponent, isStandalone: true, selector: "span[CommandShortcut]", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandShortcutComponent, isStandalone: true, selector: "span[CommandShortcut]", 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.3", ngImport: i0, type: CommandShortcutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandShortcutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[CommandShortcut]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { numberAttribute, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, signal, forwardRef } from '@angular/core';
+import { numberAttribute, input, booleanAttribute, output, computed, Component, inject, ElementRef, signal, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { cn } from '@ojiepermana/angular-component/utils';
 
@@ -56,7 +56,9 @@ class ComposerComponent {
         if (this.disabled() || event.key !== 'Enter' || event.defaultPrevented) {
             return;
         }
-        const shouldSubmit = this.submit() === 'enter' ? !event.shiftKey && !event.isComposing : event.metaKey || event.ctrlKey;
+        const shouldSubmit = this.submit() === 'enter'
+            ? !event.shiftKey && !event.isComposing
+            : event.metaKey || event.ctrlKey;
         if (!shouldSubmit) {
             return;
         }
@@ -75,13 +77,14 @@ class ComposerComponent {
             form.requestSubmit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ComposerComponent, isStandalone: true, selector: "Composer", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, submit: { classPropertyName: "submit", publicName: "submit", isSignal: true, isRequired: false, transformFunction: null }, submitForm: { classPropertyName: "submitForm", publicName: "submitForm", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitRequested: "submitRequested" }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer\"", "attr.data-variant": "variant()", "attr.data-inline": "inline() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.inert": "disabled() ? \"\" : null" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerComponent, isStandalone: true, selector: "Composer", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, submit: { classPropertyName: "submit", publicName: "submit", isSignal: true, isRequired: false, transformFunction: null }, submitForm: { classPropertyName: "submitForm", publicName: "submitForm", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitRequested: "submitRequested" }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer\"", "attr.data-variant": "variant()", "attr.data-inline": "inline() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.inert": "disabled() ? \"\" : null" } }, ngImport: i0, template: `
     <div
       data-slot="composer-shell"
       [class]="shellClasses()"
       [attr.data-disabled]="disabled() ? 'true' : null"
-      [attr.aria-invalid]="invalid() ? 'true' : null">
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+    >
       <ng-content select="ComposerHeader" />
       <div data-slot="composer-body" [class]="bodyClasses()">
         <ng-content select="ComposerActionsLeading" />
@@ -90,13 +93,12 @@ class ComposerComponent {
       </div>
       <ng-content select="ComposerFooter" />
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Composer',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer"',
@@ -112,7 +114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
       data-slot="composer-shell"
       [class]="shellClasses()"
       [attr.data-disabled]="disabled() ? 'true' : null"
-      [attr.aria-invalid]="invalid() ? 'true' : null">
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+    >
       <ng-content select="ComposerHeader" />
       <div data-slot="composer-body" [class]="bodyClasses()">
         <ng-content select="ComposerActionsLeading" />
@@ -129,14 +132,13 @@ class ComposerHeaderComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('flex min-w-0 flex-wrap gap-2 border-b border-[hsl(var(--border)/var(--opacity-70))] px-2.5 py-2', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ComposerHeaderComponent, isStandalone: true, selector: "ComposerHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-header\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerHeaderComponent, isStandalone: true, selector: "ComposerHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-header\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-header"',
@@ -149,14 +151,13 @@ class ComposerFooterComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('border-t border-[hsl(var(--border)/var(--opacity-70))] px-2.5 py-1.5 text-xs leading-5 text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ComposerFooterComponent, isStandalone: true, selector: "ComposerFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerFooterComponent, isStandalone: true, selector: "ComposerFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-footer"',
@@ -169,14 +170,13 @@ class ComposerActionsLeadingComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('flex min-h-8 shrink-0 items-center gap-1', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerActionsLeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ComposerActionsLeadingComponent, isStandalone: true, selector: "ComposerActionsLeading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-leading\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerActionsLeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerActionsLeadingComponent, isStandalone: true, selector: "ComposerActionsLeading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-leading\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerActionsLeadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerActionsLeadingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerActionsLeading',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-actions-leading"',
@@ -189,14 +189,13 @@ class ComposerActionsTrailingComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('flex min-h-8 shrink-0 items-center justify-end gap-1', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerActionsTrailingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ComposerActionsTrailingComponent, isStandalone: true, selector: "ComposerActionsTrailing", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-trailing\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerActionsTrailingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerActionsTrailingComponent, isStandalone: true, selector: "ComposerActionsTrailing", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-trailing\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerActionsTrailingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerActionsTrailingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerActionsTrailing',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-actions-trailing"',
@@ -219,14 +218,13 @@ class ComposerInputComponent {
     handleKeydown(event) {
         this.composer?.handleInputKeydown(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ComposerInputComponent, isStandalone: true, selector: "ComposerInput", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerInputComponent, isStandalone: true, selector: "ComposerInput", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerInput',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-input"',
@@ -309,20 +307,19 @@ class ComposerTextareaComponent {
         const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight);
         return Number.isFinite(lineHeight) ? lineHeight : 24;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ComposerTextareaComponent, isStandalone: true, selector: "textarea[ComposerInput]", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "handleInput()", "blur": "handleBlur()", "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.rows": "rows()", "attr.disabled": "disabled() ? \"\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerTextareaComponent, isStandalone: true, selector: "textarea[ComposerInput]", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "handleInput()", "blur": "handleBlur()", "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.rows": "rows()", "attr.disabled": "disabled() ? \"\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ComposerTextareaComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ComposerTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerTextareaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'textarea[ComposerInput]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,

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

@@ -85,10 +85,10 @@ class ContextMenuTriggerDirective {
             this.openedChange.emit(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: ContextMenuTriggerDirective, isStandalone: true, selector: "[ContextMenuTrigger]", inputs: { ContextMenuTrigger: { classPropertyName: "ContextMenuTrigger", publicName: "ContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeyDown($event)" } }, exportAs: ["ContextMenuTrigger"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: ContextMenuTriggerDirective, isStandalone: true, selector: "[ContextMenuTrigger]", inputs: { ContextMenuTrigger: { classPropertyName: "ContextMenuTrigger", publicName: "ContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeyDown($event)" } }, exportAs: ["ContextMenuTrigger"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ContextMenuTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ContextMenuTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ContextMenuTrigger]',