@ojiepermana/angular-component 22.0.44 → 22.0.46

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, computed, Component } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 
 const kanbanColumnWidthClasses = {
@@ -13,16 +13,17 @@ class KanbanComponent {
     dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex w-full min-w-0 gap-[var(--kanban-column-gap)] overflow-x-auto pb-3 text-sm text-foreground', '[--kanban-card-gap:calc(var(--spacing)*3)] [--kanban-column-gap:calc(var(--spacing)*4)]', kanbanColumnWidthClasses[this.columnWidth()], this.dense() ? '[--kanban-card-gap:calc(var(--spacing)*2)] [--kanban-column-gap:calc(var(--spacing)*3)]' : '', this.class()), /* @ts-ignore */
+    classes = computed(() => cn('flex w-full min-w-0 gap-[var(--kanban-column-gap)] overflow-x-auto pb-3 text-sm text-foreground', '[--kanban-card-gap:calc(var(--spacing)*3)] [--kanban-column-gap:calc(var(--spacing)*4)]', kanbanColumnWidthClasses[this.columnWidth()], this.dense()
+        ? '[--kanban-card-gap:calc(var(--spacing)*2)] [--kanban-column-gap:calc(var(--spacing)*3)]'
+        : '', 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: KanbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanComponent, isStandalone: true, selector: "Kanban", inputs: { columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban\"", "attr.data-column-width": "columnWidth()", "attr.data-dense": "dense() ? \"\" : 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: KanbanComponent, isStandalone: true, selector: "Kanban", inputs: { columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban\"", "attr.data-column-width": "columnWidth()", "attr.data-dense": "dense() ? \"\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Kanban',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kanban"',
@@ -38,13 +39,12 @@ class KanbanColumnComponent {
     classes = computed(() => cn('flex max-h-full min-h-0 w-[var(--kanban-column-width)] shrink-0 flex-col overflow-hidden rounded-lg border border-border bg-muted/35 text-foreground shadow-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: KanbanColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanColumnComponent, isStandalone: true, selector: "KanbanColumn", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanColumnComponent, isStandalone: true, selector: "KanbanColumn", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'KanbanColumn',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kanban-column"',
@@ -79,16 +79,20 @@ class KanbanColumnHeaderComponent {
     <div class="order-1 min-w-0 flex-1">
       @if (heading()) {
         <div class="flex min-w-0 items-center gap-2">
-          <h3 class="truncate text-sm font-semibold leading-none text-foreground">{{ heading() }}</h3>
+          <h3 class="truncate text-sm font-semibold leading-none text-foreground">
+            {{ heading() }}
+          </h3>
           @if (displayCount() !== null) {
             <span
-              class="inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-muted px-1.5 text-xs font-medium text-muted-foreground">
+              class="inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-muted px-1.5 text-xs font-medium text-muted-foreground"
+            >
               {{ displayCount() }}
             </span>
           }
           @if (badge()) {
             <span
-              class="inline-flex shrink-0 items-center rounded-md border border-border bg-background px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+              class="inline-flex shrink-0 items-center rounded-md border border-border bg-background px-1.5 py-0.5 text-xs font-medium text-muted-foreground"
+            >
               {{ badge() }}
             </span>
           }
@@ -101,13 +105,12 @@ class KanbanColumnHeaderComponent {
 
       <ng-content />
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanColumnHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'KanbanColumnHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kanban-column-header"',
@@ -120,16 +123,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     <div class="order-1 min-w-0 flex-1">
       @if (heading()) {
         <div class="flex min-w-0 items-center gap-2">
-          <h3 class="truncate text-sm font-semibold leading-none text-foreground">{{ heading() }}</h3>
+          <h3 class="truncate text-sm font-semibold leading-none text-foreground">
+            {{ heading() }}
+          </h3>
           @if (displayCount() !== null) {
             <span
-              class="inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-muted px-1.5 text-xs font-medium text-muted-foreground">
+              class="inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-muted px-1.5 text-xs font-medium text-muted-foreground"
+            >
               {{ displayCount() }}
             </span>
           }
           @if (badge()) {
             <span
-              class="inline-flex shrink-0 items-center rounded-md border border-border bg-background px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+              class="inline-flex shrink-0 items-center rounded-md border border-border bg-background px-1.5 py-0.5 text-xs font-medium text-muted-foreground"
+            >
               {{ badge() }}
             </span>
           }
@@ -151,13 +158,12 @@ class KanbanColumnActionsComponent {
     classes = computed(() => cn('inline-flex 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.4", ngImport: i0, type: KanbanColumnActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanColumnActionsComponent, isStandalone: true, selector: "KanbanColumnActions, [KanbanColumnActions]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-actions\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanColumnActionsComponent, isStandalone: true, selector: "KanbanColumnActions, [KanbanColumnActions]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-actions\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanColumnActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'KanbanColumnActions, [KanbanColumnActions]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kanban-column-actions"',
@@ -171,13 +177,12 @@ class KanbanColumnCardsComponent {
     classes = computed(() => cn('flex min-h-0 flex-1 flex-col gap-[var(--kanban-card-gap)] overflow-y-auto p-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: KanbanColumnCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanColumnCardsComponent, isStandalone: true, selector: "KanbanColumnCards", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-cards\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanColumnCardsComponent, isStandalone: true, selector: "KanbanColumnCards", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-cards\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanColumnCardsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'KanbanColumnCards',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kanban-column-cards"',
@@ -191,13 +196,12 @@ class KanbanColumnFooterComponent {
     classes = computed(() => cn('flex flex-col gap-2 border-t border-border/80 px-2 py-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: KanbanColumnFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanColumnFooterComponent, isStandalone: true, selector: "KanbanColumnFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanColumnFooterComponent, isStandalone: true, selector: "KanbanColumnFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-column-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanColumnFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'KanbanColumnFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kanban-column-footer"',
@@ -231,13 +235,12 @@ class KanbanCardComponent {
 
       <ng-content />
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'KanbanCard, button[KanbanCard], a[KanbanCard]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kanban-card"',
@@ -271,13 +274,12 @@ class KanbanCardHeaderComponent {
     classes = computed(() => cn('flex min-w-0 flex-wrap items-center gap-1.5', 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: KanbanCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanCardHeaderComponent, isStandalone: true, selector: "KanbanCardHeader, [KanbanCardHeader]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-card-header\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanCardHeaderComponent, isStandalone: true, selector: "KanbanCardHeader, [KanbanCardHeader]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-card-header\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanCardHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'KanbanCardHeader, [KanbanCardHeader]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kanban-card-header"',
@@ -291,13 +293,12 @@ class KanbanCardFooterComponent {
     classes = computed(() => cn('flex min-w-0 items-center justify-between gap-2 text-xs text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanCardFooterComponent, isStandalone: true, selector: "KanbanCardFooter, [KanbanCardFooter]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-card-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KanbanCardFooterComponent, isStandalone: true, selector: "KanbanCardFooter, [KanbanCardFooter]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban-card-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KanbanCardFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'KanbanCardFooter, [KanbanCardFooter]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kanban-card-footer"',

package/fesm2022/ojiepermana-angular-component-kbd.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 KbdComponent {
@@ -12,13 +12,12 @@ class KbdComponent {
     ].join(' '), 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: KbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KbdComponent, isStandalone: true, selector: "Kbd, [Kbd]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kbd\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KbdComponent, isStandalone: true, selector: "Kbd, [Kbd]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kbd\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KbdComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Kbd, [Kbd]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kbd"',
@@ -32,13 +31,12 @@ class KbdGroupComponent {
     classes = computed(() => cn('inline-flex flex-wrap items-center gap-1.5', 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: KbdGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KbdGroupComponent, isStandalone: true, selector: "KbdGroup, [KbdGroup]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kbd-group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: KbdGroupComponent, isStandalone: true, selector: "KbdGroup, [KbdGroup]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kbd-group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KbdGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'KbdGroup, [KbdGroup]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"kbd-group"',

package/fesm2022/ojiepermana-angular-component-label.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 LabelComponent {
@@ -10,13 +10,12 @@ class LabelComponent {
     classes = computed(() => cn('text-sm font-medium leading-none text-foreground', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70', 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: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LabelComponent, isStandalone: true, selector: "Label, label[Label]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "for() || 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: LabelComponent, isStandalone: true, selector: "Label, label[Label]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "for() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Label, label[Label]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.for]': 'for() || null',

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

@@ -1,7 +1,7 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, signal, computed, ContentChildren, forwardRef, ChangeDetectionStrategy, Component, TemplateRef, Directive, output, ViewContainerRef, DestroyRef } from '@angular/core';
+import { input, inject, ElementRef, signal, computed, ContentChildren, forwardRef, Component, TemplateRef, Directive, output, ViewContainerRef, DestroyRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { connectedPositionFor, cn } from '@ojiepermana/angular-component/utils';
 import { merge } from 'rxjs';
@@ -119,13 +119,12 @@ class MenubarComponent {
         return getComputedStyle(this.host.nativeElement).direction === 'rtl' ? -1 : 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenubarComponent, isStandalone: true, selector: "Menubar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menubar\"" } }, queries: [{ propertyName: "triggers", predicate: i0.forwardRef(() => MenubarTriggerDirective), descendants: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: MenubarComponent, isStandalone: true, selector: "Menubar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menubar\"" } }, queries: [{ propertyName: "triggers", predicate: i0.forwardRef(() => MenubarTriggerDirective), descendants: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenubarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Menubar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"menubar"',
@@ -139,13 +138,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             }] } });
 class MenubarMenuComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenubarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: MenubarMenuComponent, isStandalone: true, selector: "MenubarMenu", host: { classAttribute: "contents" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: MenubarMenuComponent, isStandalone: true, selector: "MenubarMenu", host: { classAttribute: "contents" }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MenubarMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MenubarMenu',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'contents',
                     },
@@ -208,7 +206,9 @@ class MenubarTriggerDirective {
         const portal = new TemplatePortal(this.MenubarTrigger().template, this.vcr);
         overlayRef.attach(portal);
         this.overlayRef = overlayRef;
-        merge(overlayRef.outsidePointerEvents().pipe(filter((event) => !this.el.nativeElement.contains(event.target))), overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')), overlayRef.detachments())
+        merge(overlayRef
+            .outsidePointerEvents()
+            .pipe(filter((event) => !this.el.nativeElement.contains(event.target))), overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')), overlayRef.detachments())
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.close());
         this.isOpen.set(true);

package/fesm2022/ojiepermana-angular-component-native-select.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, computed, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { inject, ElementRef, input, computed, Component, Directive } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 
 const BASE = [
@@ -20,11 +20,11 @@ class NativeSelectComponent {
         this.el.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NativeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NativeSelectComponent, isStandalone: true, selector: "select[NativeSelect]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem 1rem}:host([dir=\"rtl\"]){background-position:left .75rem center;padding-left:2.5rem;padding-right:.75rem}:host([multiple]),:host([size]:not([size=\"1\"])){background-image:none;padding-left:.75rem;padding-right:.75rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NativeSelectComponent, isStandalone: true, selector: "select[NativeSelect]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem 1rem}:host([dir=\"rtl\"]){background-position:left .75rem center;padding-left:2.5rem;padding-right:.75rem}:host([multiple]),:host([size]:not([size=\"1\"])){background-image:none;padding-left:.75rem;padding-right:.75rem}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NativeSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'select[NativeSelect]', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'classes()' }, template: '<ng-content />', styles: [":host{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem 1rem}:host([dir=\"rtl\"]){background-position:left .75rem center;padding-left:2.5rem;padding-right:.75rem}:host([multiple]),:host([size]:not([size=\"1\"])){background-image:none;padding-left:.75rem;padding-right:.75rem}\n"] }]
+            args: [{ selector: 'select[NativeSelect]', host: { '[class]': 'classes()' }, template: '<ng-content />', styles: [":host{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem 1rem}:host([dir=\"rtl\"]){background-position:left .75rem center;padding-left:2.5rem;padding-right:.75rem}:host([multiple]),:host([size]:not([size=\"1\"])){background-image:none;padding-left:.75rem;padding-right:.75rem}\n"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class NativeSelectOptionDirective {

package/fesm2022/ojiepermana-angular-component-navigation-menu.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, ElementRef, input, Directive, signal, computed, ContentChildren, forwardRef, ChangeDetectionStrategy, Component, TemplateRef, output, ViewContainerRef, DestroyRef } from '@angular/core';
+import { inject, ElementRef, input, Directive, signal, computed, ContentChildren, forwardRef, Component, TemplateRef, output, ViewContainerRef, DestroyRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { connectedPositionFor, cn } from '@ojiepermana/angular-component/utils';
 import { merge } from 'rxjs';
@@ -101,7 +101,9 @@ class NavigationMenuComponent {
     }
     enabledItems() {
         return this.items
-            ? this.items.toArray().filter((item) => !item.disabled() && item.isWithin(this.host.nativeElement))
+            ? this.items
+                .toArray()
+                .filter((item) => !item.disabled() && item.isWithin(this.host.nativeElement))
             : [];
     }
     resolveItem(target) {
@@ -150,13 +152,12 @@ class NavigationMenuComponent {
         return getComputedStyle(this.host.nativeElement).direction === 'rtl' ? -1 : 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NavigationMenuComponent, isStandalone: true, selector: "NavigationMenu", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($any($event))" }, properties: { "class": "classes()", "attr.role": "\"navigation\"", "attr.aria-label": "ariaLabel() || null" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => NavigationMenuRootItem), descendants: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NavigationMenuComponent, isStandalone: true, selector: "NavigationMenu", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($any($event))" }, properties: { "class": "classes()", "attr.role": "\"navigation\"", "attr.aria-label": "ariaLabel() || null" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => NavigationMenuRootItem), descendants: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationMenu',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"navigation"',
@@ -175,13 +176,12 @@ class NavigationMenuListComponent {
     classes = computed(() => cn('group flex flex-1 list-none items-center justify-center gap-1', 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: NavigationMenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NavigationMenuListComponent, isStandalone: true, selector: "NavigationMenuList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"menubar\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NavigationMenuListComponent, isStandalone: true, selector: "NavigationMenuList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"menubar\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationMenuListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationMenuList',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"menubar"',
@@ -195,13 +195,12 @@ class NavigationMenuItemComponent {
     classes = computed(() => cn('relative', 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: NavigationMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NavigationMenuItemComponent, isStandalone: true, selector: "NavigationMenuItem", 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: NavigationMenuItemComponent, isStandalone: true, selector: "NavigationMenuItem", 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: NavigationMenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationMenuItem',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -322,14 +321,24 @@ class NavigationMenuTriggerDirective extends NavigationMenuRootItem {
         firstItem?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NavigationMenuTriggerDirective, isStandalone: true, selector: "[NavigationMenuTrigger]", inputs: { NavigationMenuTrigger: { classPropertyName: "NavigationMenuTrigger", publicName: "NavigationMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "openFromKeyboard($any($event), false)", "keydown.space": "openFromKeyboard($any($event), false)", "keydown.arrowDown": "openFromKeyboard($any($event), true)", "focus": "syncActiveState()", "mouseenter": "openFromHover()" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.tabindex": "tabIndex()", "attr.disabled": "disabled() ? \"\" : null" } }, providers: [{ provide: NavigationMenuRootItem, useExisting: forwardRef(() => NavigationMenuTriggerDirective) }], exportAs: ["NavigationMenuTrigger"], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NavigationMenuTriggerDirective, isStandalone: true, selector: "[NavigationMenuTrigger]", inputs: { NavigationMenuTrigger: { classPropertyName: "NavigationMenuTrigger", publicName: "NavigationMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "openFromKeyboard($any($event), false)", "keydown.space": "openFromKeyboard($any($event), false)", "keydown.arrowDown": "openFromKeyboard($any($event), true)", "focus": "syncActiveState()", "mouseenter": "openFromHover()" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.tabindex": "tabIndex()", "attr.disabled": "disabled() ? \"\" : null" } }, providers: [
+            {
+                provide: NavigationMenuRootItem,
+                useExisting: forwardRef(() => NavigationMenuTriggerDirective),
+            },
+        ], exportAs: ["NavigationMenuTrigger"], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationMenuTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[NavigationMenuTrigger]',
                     exportAs: 'NavigationMenuTrigger',
-                    providers: [{ provide: NavigationMenuRootItem, useExisting: forwardRef(() => NavigationMenuTriggerDirective) }],
+                    providers: [
+                        {
+                            provide: NavigationMenuRootItem,
+                            useExisting: forwardRef(() => NavigationMenuTriggerDirective),
+                        },
+                    ],
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"menuitem"',
@@ -380,14 +389,18 @@ class NavigationMenuLinkDirective extends NavigationMenuRootItem {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationMenuLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NavigationMenuLinkDirective, isStandalone: true, selector: "a[NavigationMenuLink], button[NavigationMenuLink]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "syncActiveState()", "click": "preventDisabled($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.tabindex": "tabIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-variant": "variant()" } }, providers: [{ provide: NavigationMenuRootItem, useExisting: forwardRef(() => NavigationMenuLinkDirective) }], exportAs: ["NavigationMenuLink"], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NavigationMenuLinkDirective, isStandalone: true, selector: "a[NavigationMenuLink], button[NavigationMenuLink]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "syncActiveState()", "click": "preventDisabled($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menuitem\"", "attr.tabindex": "tabIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-variant": "variant()" } }, providers: [
+            { provide: NavigationMenuRootItem, useExisting: forwardRef(() => NavigationMenuLinkDirective) },
+        ], exportAs: ["NavigationMenuLink"], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationMenuLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[NavigationMenuLink], button[NavigationMenuLink]',
                     exportAs: 'NavigationMenuLink',
-                    providers: [{ provide: NavigationMenuRootItem, useExisting: forwardRef(() => NavigationMenuLinkDirective) }],
+                    providers: [
+                        { provide: NavigationMenuRootItem, useExisting: forwardRef(() => NavigationMenuLinkDirective) },
+                    ],
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"menuitem"',

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

@@ -1,6 +1,6 @@
 import { buttonVariants } from '@ojiepermana/angular-component/button';
 import * as i0 from '@angular/core';
-import { model, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { model, input, computed, Component } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 
 /**
@@ -78,7 +78,8 @@ class PaginationComponent {
           [disabled]="page() <= 1 || null"
           [attr.aria-label]="previousAriaLabel()"
           [class]="navClasses(previousText().length > 0)"
-          (click)="go(page() - 1)">
+          (click)="go(page() - 1)"
+        >
           <svg
             aria-hidden="true"
             class="h-4 w-4"
@@ -87,7 +88,8 @@ class PaginationComponent {
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
-            stroke-linejoin="round">
+            stroke-linejoin="round"
+          >
             <polyline points="15 18 9 12 15 6" />
           </svg>
           @if (previousText()) {
@@ -103,7 +105,8 @@ class PaginationComponent {
               type="button"
               [attr.aria-current]="p.value === page() ? 'page' : null"
               [class]="pageClasses(p.value === page())"
-              (click)="go(p.value)">
+              (click)="go(p.value)"
+            >
               {{ formatPageLabel()(p.value) }}
             </button>
           } @else {
@@ -118,7 +121,8 @@ class PaginationComponent {
           [disabled]="page() >= total() || null"
           [attr.aria-label]="nextAriaLabel()"
           [class]="navClasses(nextText().length > 0)"
-          (click)="go(page() + 1)">
+          (click)="go(page() + 1)"
+        >
           @if (nextText()) {
             <span>{{ nextText() }}</span>
           }
@@ -130,19 +134,19 @@ class PaginationComponent {
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
-            stroke-linejoin="round">
+            stroke-linejoin="round"
+          >
             <polyline points="9 18 15 12 9 6" />
           </svg>
         </button>
       </li>
     </ul>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Pagination, nav[Pagination]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         role: 'navigation',
                         'aria-label': 'pagination',
@@ -156,7 +160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           [disabled]="page() <= 1 || null"
           [attr.aria-label]="previousAriaLabel()"
           [class]="navClasses(previousText().length > 0)"
-          (click)="go(page() - 1)">
+          (click)="go(page() - 1)"
+        >
           <svg
             aria-hidden="true"
             class="h-4 w-4"
@@ -165,7 +170,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="15 18 9 12 15 6" />
           </svg>
           @if (previousText()) {
@@ -181,7 +187,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               type="button"
               [attr.aria-current]="p.value === page() ? 'page' : null"
               [class]="pageClasses(p.value === page())"
-              (click)="go(p.value)">
+              (click)="go(p.value)"
+            >
               {{ formatPageLabel()(p.value) }}
             </button>
           } @else {
@@ -196,7 +203,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           [disabled]="page() >= total() || null"
           [attr.aria-label]="nextAriaLabel()"
           [class]="navClasses(nextText().length > 0)"
-          (click)="go(page() + 1)">
+          (click)="go(page() + 1)"
+        >
           @if (nextText()) {
             <span>{{ nextText() }}</span>
           }
@@ -208,7 +216,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="9 18 15 12 9 6" />
           </svg>
         </button>